Skip to content

Instantly share code, notes, and snippets.

@FND
Last active March 7, 2019 11:54
Show Gist options
  • Save FND/7b262ba743ebb5afdc2ae2a2f6be08a0 to your computer and use it in GitHub Desktop.
Save FND/7b262ba743ebb5afdc2ae2a2f6be08a0 to your computer and use it in GitHub Desktop.
universal complate
/node_modules
/dist
"use strict";
module.exports = {
js: [{
source: "./index.js",
target: "./dist/bundle.js",
jsx: { pragma: "COMPLATE" }
}]
};
if(typeof global === "undefined" && typeof window !== "undefined") {
window.global = window;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>universal complate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>universal complate</h1>
<p>generating both HTML and DOM nodes from the same template</p>
<script src="dist/bundle.js"></script>
</body>
</html>
import "./global_shim";
import render from "./template";
import { default as dom } from "complate-dom";
import { createElement as html } from "complate-stream";
import BufferedStream from "complate-stream/src/buffered-stream";
global.COMPLATE = html;
let stream = new BufferedStream();
let element = render("Hello World", "lorem ipsum");
element(stream, { nonBlocking: true }, () => {
let container = document.createElement("pre");
container.textContent = stream.read();
insert(container);
});
global.COMPLATE = dom;
let node = render("Hello World", "lorem ipsum");
insert(node);
function insert(node) {
document.body.appendChild(node);
}
{
"scripts": {
"start": "faucet"
},
"dependencies": {},
"devDependencies": {
"complate-dom": "^1.2.0",
"complate-stream": "^0.16.5",
"faucet-pipeline-jsx": "^2.0.0"
}
}
export default (title, summary) => (
<article>
<h3>{title}</h3>
<p>{summary}</p>
</article>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment