// https://observablehq.com/@embracelife/html-stdlib-rewrite@119
import define1 from "/@embracelife/tutorial-utilities.js?v=3&resolutions=c4a6003288b4f7b5@119";
import define2 from "/@embracelife/ostdlib-internals.js?v=3&resolutions=c4a6003288b4f7b5@119";
function _1(md,anchorLink){return(
md`# html-stdlib rewrite
go to ${anchorLink("https://observablehq.com/@embracelife/stdlib-observable?collection=@embracelife/observable-stdlib", "stdlib-notebook")}
I tried to implement the exact behavior of \`html\` of stdlib by creating a function \`ohmtl\` in a notebook.
Basically, what I did is to copy and paste the source code of [html.js](https://github.com/observablehq/stdlib/blob/master/src/html.js) and [template.js](https://github.com/observablehq/stdlib/blob/master/src/template.js).
`
)}
function _2(orihtml)
{
// debugger; // easy to walk through the internal in this case
return orihtml`Hello world` // source code is not minified
}
function _orihtml(template){return(
template(function(string) {
var template = document.createElement("template");
template.innerHTML = string.trim();
return document.importNode(template.content, true);
}, function() {
return document.createElement("span");
})
)}
function _4(md){return(
md`
Although \`ohtml\` seems work the same as \`html\` in notebook, I felt like missing thing as the source code of [library.js](https://github.com/observablehq/stdlib/blob/master/src/library.js#L22) shows it actually runs \`constant(html)\` rather than \`html\` on its own.
But when I use \`constant(ohtlm)\` in notebook, I have to add additional \`()\` to make it work, see below.
`
)}
function _5(ohtml){return(
ohtml`hello world`
)}
function _ohtml(constant,orihtml){return(
constant(orihtml)()
)}
function _7(md,anchorLink){return(
md`
Why is it? does my \`ohtml\` miss something important without using \`constant\`?
Mike has provided the perfect answer ${anchorLink("https://talk.observablehq.com/t/why-need-constant-when-implementing-html-of-stdlib-in-a-notebook/2464/2", "here")}
`
)}
function _8(stylesheet){return(
stylesheet
)}
function _create_builtin(md){return(
md`## How to create a builtin function?
\`add\` is a function which intend to react to changes of \`h\`;
\`addo\` is intended to be a builtin function which does not react to \`h\`.
I have tried to follow the explanation given by [Mike](https://talk.observablehq.com/t/why-need-constant-when-implementing-html-of-stdlib-in-a-notebook/2464/2) but I didn't make it work. Could you help me figure out why?
`
)}
function _w(){return(
1
)}
function _h(){return(
3
)}
function _add(w,h){return(
function add(){
return w + h + 1;
}
)}
function _addo(constant,add){return(
constant(add)()
)}
function _16(add){return(
add()
)}
function _17(addo){return(
addo()
)}
export default function define(runtime, observer) {
const main = runtime.module();
main.variable(observer()).define(["md","anchorLink"], _1);
main.variable(observer()).define(["orihtml"], _2);
main.variable(observer("orihtml")).define("orihtml", ["template"], _orihtml);
main.variable(observer()).define(["md"], _4);
main.variable(observer()).define(["ohtml"], _5);
main.variable(observer("ohtml")).define("ohtml", ["constant","orihtml"], _ohtml);
main.variable(observer()).define(["md","anchorLink"], _7);
main.variable(observer()).define(["stylesheet"], _8);
const child1 = runtime.module(define1);
main.import("stylesheet", child1);
main.import("anchorLink", child1);
const child2 = runtime.module(define2);
main.import("template", child2);
main.import("constant", child2);
main.variable(observer("create_builtin")).define("create_builtin", ["md"], _create_builtin);
main.variable(observer("w")).define("w", _w);
main.variable(observer("h")).define("h", _h);
main.variable(observer("add")).define("add", ["w","h"], _add);
main.variable(observer("addo")).define("addo", ["constant","add"], _addo);
main.variable(observer()).define(["add"], _16);
main.variable(observer()).define(["addo"], _17);
return main;
}