Skip to content

Instantly share code, notes, and snippets.

@brettz9
Last active January 19, 2021 13:13
Show Gist options
  • Save brettz9/ab7c87f3a641941e4a3fc5517e8fd76e to your computer and use it in GitHub Desktop.
Save brettz9/ab7c87f3a641941e4a3fc5517e8fd76e to your computer and use it in GitHub Desktop.
hyperhtml wrapper (not currently put to use or tested)
/* globals hyperHTML, jml, Interpolator */
// Relies on getInterpolator of Jamilih: https://github.com/brettz9/jamilih
'use strict';
window.hyperJamilih = (() => {
const map = new Map();
const {bind: hyper} = hyperHTML;
hyper();
const {uuid, args, dynamic, plugin} = Interpolator.default();
/**
* @callback HyperJMLCallback
* @param {...JamilihArray} jamilihArgs
* @returns {Element}
*/
return {
dynamic,
/**
* @example
* hyperJML('.modal-confirm .modal-body p')(
* 'span', [
* 'Are you sure you want to delete your account?'
* ]
* );
* @param {string|Element} elem
* @returns {HyperJMLCallback}
*/
hyperJML (elem) {
if (typeof elem === 'string') {
elem = document.querySelector(elem);
}
const j = jml.jml.bind(null, {$plugins: [plugin]});
return function (...jamilihArgs) {
const ret = j(...jamilihArgs);
const elementsAsString = ret.outerHTML; //new XMLSerializer().serializeToString(ret);
// Wasteful part is here in rebuilding array each time vs. directly sending HTML strings to template array
// Might add `convert` to `Tagger` prototype from hyperHTML which instead of doing the joining at
// https://github.com/WebReflection/domsanitizer/blob/master/esm/index.js , instead did so here (Jamilih
// plugin might use its same UUID even and build an array of tokens, albeit requiring a Map here to avoid
// resending the same array if wish native template advantages)
return hyper(elem)(elementsAsString.split(uuid), ...args);
};
}
};
})();
export default {
$document: {
$DOCTYPE: {name: 'html'},
head: [
['script', {
src: '/node_modules/jamilih/dist/jml.js'
}],
['script', {
src: '/node_modules/hyperhtml/index.js'
}],
['script', {
src: '/node_modules/jamilih/dist/getInterpolator.js'
}],
['script', {
src: '/js/hyperJML.js'
}]
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment