2c:null 2d:["$","title",null,{"children":"Using slate-hyperscript | Benjamin | Observable"}] 32:T83b,md` --- ### Technical Notes 1. \`hyperslate\` is a tagged template that accepts a template literal. It contains JSX code which is interpolated to a string. ~~~js hyperslate\` hello, world! \` ~~~ 2. Babel then transforms the interpolated string to JavaScript code. It replaces the JSX code with functions calls with the signature \`jsx(tagname, attributes, ...children)\`. It then wraps the result in a function, where we can define which \`jsx\` function to use. ~~~js (function (jsx) { return jsx( "element", { type: "block" }, "hello, ", jsx( "text", { bold: true }, "world" ), "!" ); }); ~~~ 3. We use the \`jsx\` function provided by \`slate-hyperscript\` and evaluate the generated JavaScript code. It will result in an object tree of objects conforming Slate interfaces. ~~~js { type: "block", children: [ { text: "hello, " }, { text: "world", bold: true }, { text: "!" } ] } ~~~ Examples: - default creators for slate objects: [slate/hyperscript.ts at v0.58.1](https://github.com/ianstormtaylor/slate/blob/v0.58.1/packages/slate-hyperscript/src/hyperscript.ts#L18-L27) - test fixtures for hyperscript: [slate/index.js at v0.58.1](https://github.com/ianstormtaylor/slate/blob/v0.58.1/packages/slate/test/index.js#L63-L68) - transform test-case: [slate/block.js at v0.58.1](https://github.com/ianstormtaylor/slate/blob/v0.58.1/packages/slate/test/transforms/setNodes/block/block.js) - normalize test-case: [slate/insert-adjacent-text.js at v0.58.1](https://github.com/ianstormtaylor/slate/blob/v0.58.1/packages/slate/test/normalization/inline/insert-adjacent-text.js) References: - [JSX In Depth – React](https://reactjs.org/docs/jsx-in-depth.html) - [@babel/preset-react · Babel](https://babeljs.io/docs/en/babel-preset-react) - [GitHub - lleaff/tagged-template-noop: No-op function for tagged template literals](https://github.com/lleaff/tagged-template-noop) `33:[] 30:{"id":"d6edff8be6355db5","slug":"using-slate-hyperscript","title":"Using slate-hyperscript","thumbnail":"629321c9e6987299781c74f72c6a6f44c4538589c5cd31c7a960cba38e6eb67c","access_level":"public","create_time":"$D2020-05-18T08:57:07.681Z","update_time":"$D2021-04-04T18:09:53.093Z","view_time":null,"first_public_time":"$D2020-05-18T10:31:24.101Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":785,"publish_version":785,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7baaad60a7fce17f","slug":"text-processing","title":"Text Processing","owner":{"id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin"}},"type":"notebook","body":{"titling":"auto","title":"Using slate-hyperscript","cells":[{"id":0,"value":"md`# Using slate-hyperscript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`\n### Usage\n\n1. Import the \\`hyperslate\\` tag template function.\n\n ~~~js\n import { hyperslate } from \"@hastebrot/using-slate-hyperscript\"\n ~~~\n\n2. Use \\`hyperslate\\` to define a new \\`block\\` element via the \\`options\\` object. It transforms the JSX template literal into a Slate element object.\n\n ~~~js\n hyperslate({\n elements: {\n block: { type: \"block\" },\n },\n })\\`bar\\`\n ~~~\n\n3. **NOTE:** The \\`elements\\` definitions (hyperscript shorthands) allow you to easily define custom hyperscript tags for your domain. Predefined \\`creators\\` for Slate objects are \\`\\`, \\`\\`, \\`\\`, \\`\\`, \\`\\`, \\`\\`, \\`\\`, and \\`\\`.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"hyperslate`\n \n \n foo\n \n \n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"hyperslate({\n elements: {\n block: { type: \"block\" },\n inline: { type: \"inline\", inline: true },\n },\n})`bar`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"hyperslate = asTaggedTemplate((options = {}) => code => {\n const compileCode = (code, jsx) => {\n const js = transformHyperscript(code, \"jsx\")\n return eval(js)(jsx)\n }\n const jsx = createHyperscript(options)\n return compileCode(code, jsx)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"createHyperscript = {\n return (await requires(\"slate-hyperscript\")).createHyperscript\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"transformHyperscript = (source, pragma = \"jsx\") => {\n source = `(${pragma}) => ${source}`\n return Babel.transform(source, {\n presets: [\"es2015\", [\"react\", { pragma }]],\n }).code\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"asTaggedTemplate = processor => {\n const interpolateTemplate = (parts, ...values) => {\n const lastIndex = parts.length - 1\n return parts.slice(0, lastIndex)\n .reduce((result, part, index) => result + part + values[index], \"\")\n + parts[lastIndex]\n }\n const isTemplateLiteral = args => Array.isArray(args) && args.length > 0\n \n // return a tagged template which takes an optional options object.\n return (...literalOrOptions) => {\n return isTemplateLiteral(literalOrOptions[0])\n ? processor({})(interpolateTemplate(...literalOrOptions))\n : (...literal) => processor(literalOrOptions[0])(interpolateTemplate(...literal))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"lit = (...args) => args","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"str = value => JSON.stringify(value, null, 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"React.render(jsx({ subject: \"world\" })`

Hello, {subject}!

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"React.render(jsx({ Hello, subject: \"world\" })``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"Hello = ({ subject }) => {\n return jsx({ subject })`

Hello, {subject}!

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"jsx = function(args = {}) {\n const transform = (strings, ...values) => {\n let code = strings[0]\n for (let i = 0, n = values.length; i < n; ++i) {\n code += values[i] + strings[i + 1]\n }\n code = `(React, ${Object.keys(args)}) => ${code}`\n \n const transformedCode = Babel.transform(code, {\n presets: [\"es2015\", [\"react\", { pragma: \"React.createElement\" }]]\n }).code\n return eval(transformedCode)(React, ...Object.values(args))\n }\n \n return Array.isArray(args) \n ? (args = {}, transform.apply(this, arguments)) \n : transform\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Babel = requires(\"@babel/standalone\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"import { React, ReactDOM } from \"@hastebrot/react@354\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"babelVersion = \"7.11.6\" // https://github.com/babel/babel/releases","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"reactVersion = \"17.0.0-rc.2\" // https://github.com/facebook/react/releases","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"slateVersion = \"0.59.0\" // https://github.com/ianstormtaylor/slate/releases","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"requires = require.alias({\n \"@babel/standalone\": `@babel/standalone@${babelVersion}/babel.min.js`,\n \"react\": `https://unpkg.com/react@${reactVersion}/umd/react.production.min.js`,\n \"react-dom\": `https://unpkg.com/react-dom@${reactVersion}/umd/react-dom.production.min.js`,\n \"react-is\": `https://unpkg.com/react-is@${reactVersion}/umd/react-is.production.min.js`,\n //\"react\": React,\n //\"react-dom\": ReactDOM,\n \"slate\": `slate@${slateVersion}/dist/slate.min.js`,\n \"slate-hyperscript\": `slate-hyperscript@${slateVersion}/dist/slate-hyperscript.min.js`,\n \"slate-react\": `slate-react@${slateVersion}/dist/slate-react.min.js`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"