2b:null 2c:["$","title",null,{"children":"Literal JSX | Kelley van Evert | Observable"}] 31:T43f,mdx`--- Although JSX makes us think of React (the project from which it arose), it doesn't necessarily have to have anything to do with it. JSX is just syntax, and Literal JSX is just a standard that extends JSON with some simple JSX. You can "hydrate" this syntax any way you like. For example, as is done is this notebook, we could use this factory: \`\`\`js function factory(name) { return name === "LJSX" ? html\`Literal JSX\` : "[Unknown]"; } \`\`\` and then: \`\`\`js LJSX.parseValue("${``}", factory) \`\`\` would result in said <strong> tag. We can easily extends Observable's wonderful md template literal function, which already interpolates html elements, to a template literal function mdx which finds all LJSX elements starting with capital letters (i.e. "components"), and tries rendering them from a little registry of "known" components. `32:[] 2f:{"id":"5c40d4bd2cb018e0","slug":"literal-jsx","title":"Literal JSX","thumbnail":"d34e0ec4f5cce88c39d8b6cc06faf10af8b068ba65e864a9be227267c847753e","access_level":"public","create_time":"$D2019-06-10T15:11:18.580Z","update_time":"$D2019-06-10T22:17:56.109Z","view_time":null,"first_public_time":"$D2019-06-10T22:03:43.769Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":484,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"7eacc2f229920947","slug":"ideas","title":"Nerdy","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"title":"Literal JSX","cells":[{"id":4,"value":"md`# Literal JSX`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"mdx(components)` is a lightweight format for content potentially rich in data and nominal structure. It extends **[JSON](https://json.org/)** by ${\"adding\"} the JSX-like _Element_ type as a possible value type aside objects, arrays, numbers, strings, booleans, and null. However, instead of the full JavaScript expression syntax, only JSON data (through possibly nesting more _Element_ nodes recursively) are allowed inside of its attributes (\"props\") and children.\n\nFor more info, see https://literal-jsx.org/.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"mdx`---\n\n_TL;DR_ This notebook imports the example implementation of Literal JSX from @literal-jsx/parser, and then defines a little helper template literal function utility mdx, which can be used in other notebooks like so:\n\n\\`\\`\\`js\nimport { mdx } from \"@kelleyvanevert/literal-jsx\"\n\ncomponents = ({\n LJSX: () => html\\`Literal JSX\\`\n})\n\nmdx(components)\\`Hello ${``}!\\`\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"components = ({\n LJSX: () => html`Literal JSX`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"mdx = {\n function make(components = {}) {\n function elementFactory(name, attributes, ...children) {\n return components[name]\n ? components[name](attributes, ...children)\n : `[Unknown LJSX component]`;\n }\n\n return function mdx(x, ...betweens) {\n if (typeof x.length === \"undefined\") {\n return make(x);\n }\n\n let pieces = x;\n let m;\n for (let i = 0; i < pieces.length; i++) {\n while (m = pieces[i].match(/<[A-Z]/)) {\n const initial = pieces[i].slice(0, m.index);\n const { source, remaining } = parseInitialLJSX(pieces[i].slice(m.index));\n pieces = pieces.slice();\n pieces.splice(i, 1, initial, remaining);\n betweens.splice(i, 0, LJSX.parseValue(source, elementFactory));\n }\n }\n return md(pieces, ...betweens);\n }\n }\n\n return make();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"function parseInitialLJSX (input = \"\") {\n const m = input.match(/^(\\s*)(<[A-Z])/)\n if (!m) return;\n\n const lexer = LJSX.makeLexer();\n const parser = new LJSX.Parser();\n\n lexer.reset(input);\n let error = null;\n let t = null;\n let ast = null;\n while (!error && !ast) {\n try {\n const nextToken = lexer.next();\n if (!nextToken) throw new Error(\"lexer end\");\n t = nextToken;\n parser.feed(t.value);\n if (parser.results && parser.results.length > 0) {\n ast = parser.results[0];\n }\n } catch (e) {\n error = e;\n }\n }\n\n let i = t.offset + t.value.length;\n\n const source = input.slice(0, i);\n const remaining = input.slice(i);\n\n return {\n remaining,\n source,\n ast\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"LJSX = require('@literal-jsx/parser@0.1.4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"