Tagged templating, an alternative way to structure code that's all the rage #60
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tbranyen
changed the title
tbranyen
force-pushed
the
add-tagged-template-function
branch
2 times, most recently
from
1c8f2ab
to
838a805
Compare
|
Edit: Before I was cleaning memory in the middle of renders which never mattered until HTML parsing could happen multiple times for nested tagged template strings. This has since been corrected. |
tbranyen
changed the title
tbranyen
force-pushed
the
add-tagged-template-function
branch
2 times, most recently
from
6ced6da
to
0268711
Compare
This adds in support for building a "Virtual Tree" and passing it into
diffHTML. A Virtual Tree (or VTree) looks like this in diffHTML:
{
"nodeName": "div",
"nodeType": 1,
"nodeValue": "",
"attributes": [{ "name": "id", "value": "test" }],
"childNodes": [{
"nodeName": "#text",
"nodeType": 3,
"nodeValue": "Hello world!",
"attributes": [],
"childNodes": []
}]
}
Which represents the following markup:
<div id="test">Hello world!</div>
It's allowed in any existing method like outerHTML and innerHTML. It's
really easy to use too. Check out a simple example:
import { outerHTML, html } from 'diffhtml';
const fixture = document.createElement('div');
const message = 'Hello world!';
outerHTML(fixture, html`<div id="test">${message}</div>`);
The coolest part about the above example is that the interpolation with
`${...}` allows for composition and event binding/sharing of non-string
based data that you would normally be bound to with an HTML string. For
instance the above could be rewritten to:
import { outerHTML, html } from 'diffhtml';
const fixture = document.createElement('div');
const message = () => 'Hello world!';
outerHTML(fixture, html`<div id="test">${message()}</div>`);
Now for a more complex example showing composition and re-rendering:
import { outerHTML, html } from 'diffhtml';
const partial = props => html`
<div class=${props.test}></div>
`;
function render(date) {
outerHTML(document.body, html`<body>
<h1>Some new content diff/patched in!</h1>
<p onclick=${e => console.log(e)}>
<span>Current date: ${date}</span>
</p>
${partial({ test: 'hello world' })}
</body>`);
}
setInterval(function() {
render(new Date().toLocaleString());
}, 1000);
render(new Date().toLocaleString());
I'll start working on a Babel transform as well to make the entire parse
time disappear. Performance-ahoy. Thx JSX, yo-yo, bel for inspiration
choo-choo.
Related changes:
- Updated dependencies
- While testing you can skip coverage with SKIP_COV=true env var
- Fix bug where newHTML was set for non-string input
- No longer cleans up in the middle of rendering, which broke VDOM inputs
- Ensures that non-string attributes (aka props for now) are removed properly
- Added more tests
There was a test that did not put a `uuid` property on two descriptors while testing the virtual dom passing to outerHTML. It never triggered an error in the past due to lucky happenstance, but now I've tracked and fixed it.
tbranyen
force-pushed
the
add-tagged-template-function
branch
from
0268711
to
4272d8f
Compare
|
🎉 💃 👯 🍰 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds in support for building a "Virtual Tree" and passing it into
diffHTML. A Virtual Tree (or VTree) looks like this in diffHTML:
{ "nodeName": "div", "nodeType": 1, "nodeValue": "", "attributes": [{ "name": "id", "value": "test" }], "childNodes": [{ "nodeName": "#text", "nodeType": 3, "nodeValue": "Hello world!", "attributes": [], "childNodes": [] }] }Which represents the following markup:
It's allowed in any existing method like outerHTML and innerHTML. It's
really easy to use too. Check out a simple example:
The coolest part about the above example is that the interpolation with
${...}allows for composition and event binding/sharing of non-stringbased data that you would normally be bound to with an HTML string. For
instance the above could be rewritten to:
Now for a more complex example showing composition and re-rendering:
I'll start working on a Babel transform as well to make the entire parse
time disappear. Performance-ahoy. Thx JSX, yo-yo, bel for inspiration
choo-choo.
Related changes: