2d:null 2e:["$","title",null,{"children":"rml - Build UI with Preact | Kindy Lin | Observable"}] 33:T6a6,rml = { let [p, $linkState] = await Promise.all([ require('https://bundle.run/preact'), require('https://bundle.run/linkstate'), ]); let {h, render, Component} = p; let Eval = eval; /* rml`x`; rml({val}, `{val}`); */ function rml(src, ctx) { // TODO template literal & props if (!Array.isArray(src) && src && typeof ctx === 'string') { ([src, ctx] = [ctx, src]); } let $value; ({$value, ...ctx} = ctx || {}); let r = DOM.element('div'); console.log('rml', {src, ctx, $value}); let C = class extends Component { constructor(...args) { super(...args); this.state = {}; } componentDidUpdate() { updateValue(this.state); } componentDidMount() { updateValue(this.state); } render() { const {fn, ctx} = this.props; return fn.call(this, h, {state: this.state, $linkState, ...ctx}); } }; // TODO: support ${} let con = jsx2h(String(src)); // con = Eval(``); let ctxKeys = Object.keys(ctx); let ctxKeyStr = ctxKeys.map(x => `, ${x}`).join(''); con = `(function(h, {state, $linkState${ctxKeyStr}}) { return ${con} })`; let fn = Eval(con); // fn = (h, {state, props, $linkState}) => h('div', null, [con]); let valueFn = $value || (state => (state && state.value || undefined)); let updateValue = (state) => { let val = valueFn(state, ctx); r.value = val === undefined ? null : val; // console.log('rml updateValue', r.value); }; let node = render(h(C, {fn, ctx}), r); // r.textContent = String(rml.p) + con; return r; } rml.p = p; return rml; }34:[] 31:{"id":"2ba3f2795c84983e","slug":"rml-build-ui-with-preact","title":"rml - Build UI with Preact","thumbnail":"0fd6d882d280b5b05ca633fabced0d50da4290d33689f5c44a765f3f0fced4be","access_level":"public","create_time":"$D2018-02-24T03:25:32.097Z","update_time":"$D2018-02-24T07:24:07.565Z","view_time":null,"first_public_time":"$D2018-02-24T07:24:37.167Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6b99b74a49d4f877","login":"kindy","name":"Kindy Lin","avatar_url":"https://avatars-next.observableusercontent.com/8cbd3b7e76fc2bc524df5886f6a25c0c6163d968567de0bde534fbf2aff120bc","tier":"starter_2024"},"version":191,"publish_version":191,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfde8dbae8a630e5","login":"kindy","name":"Kindy Lin","avatar_url":"https://avatars-next.observableusercontent.com/8cbd3b7e76fc2bc524df5886f6a25c0c6163d968567de0bde534fbf2aff120bc","tier":null}],"members":[{"type":"individual","id":"dfde8dbae8a630e5","login":"kindy","name":"Kindy Lin","avatar_url":"https://avatars-next.observableusercontent.com/8cbd3b7e76fc2bc524df5886f6a25c0c6163d968567de0bde534fbf2aff120bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"rml - Build UI with Preact","cells":[{"id":0,"value":"md`# rml - Build UI with Preact\n\nBuild UI with Preact on **observable**.\n\nFor question and feature request, please use [Github issues](https://github.com/kindy/fe-tools/labels/rml).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof demo1 = rml`

\n \n {state.value} 1\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`\nrml return component's \\`state.value\\` as view value by default.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"demo1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof demo2 = rml({\n demo1,\n $value: (state, ctx) => ({demo2: state.value, demo1}),\n}, `

\n \n
\n demo1: {demo1}, own value: {state.value}\n

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`\nVariables can be pass with style \\`rml(ctx, src)\\`.\n\nAnd **view value** can be defined by a special key \\`$value\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"demo2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\n## API\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"rml`

ES6 template literal style

\n state: {typeof state}, $linkState: {typeof $linkState}
\n state is component's state; $linkState is Preact's linkState;\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"rml(`

Function call style

\n state: {typeof state}, $linkState: {typeof $linkState}
\n

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"rml({a: 1, b: 2, c: {cc: 'cc'}}, `

Function call style with Ctx

\n ctx: a = {a}, b = {b}, c = {JSON.stringify(c)}\n

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`\n## What's Behind\n\nrml use\n\n1. [Preact](https://preactjs.com) to render UI\n2. [jsx-transform](https://www.npmjs.com/package/jsx-transform) to transform jsx\n\n## See Also\n\n* [react-with-jsx-example-via-babel-standalone](https://beta.observablehq.com/@subuta/react-with-jsx-example-via-babel-standalone)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"jsx2h = {\n let jsxTransform = await require('https://bundle.run/jsx-transform')\n\n return src => jsxTransform.fromString(src, {factory: 'h'});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"