1 line
35 KiB
JSON
1 line
35 KiB
JSON
{"type":"data","nodes":[null,{"type":"data","data":[{"content":1,"metadata":6},{"html":2,"css":3,"head":4},"\u003Cp data-svelte-h=\"svelte-1ur5rpk\">Svelte components can be embedded into the rendered HTML to make certain elements interactive. However, they require a bit more work, as Remark is configured to only render static HTML. To get around this, the idea is to do the following:\u003C/p> \u003Col data-svelte-h=\"svelte-101k9os\">\u003Cli>Create a Unified plugin to isolate the targeted element;\u003C/li> \u003Cli>Replace all the elements with the component, after every render.\u003C/li>\u003C/ol> \u003Ch2 id=\"example\" data-svelte-h=\"svelte-r4uhiu\">\u003Ca href=\"#example\">Example\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-r8in7e\">Let’s say we want to replace all hashtags, such as \u003Ccode>#something\u003C/code>, with a custom component. Here is as example of how that could be achieved.\u003C/p> \u003Ch3 id=\"parsing-the-hashtags\" data-svelte-h=\"svelte-15fs2m6\">\u003Ca href=\"#parsing-the-hashtags\">Parsing the hashtags\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1r7bbxd\">First things first: we need to tell the parser that we want to parse hashtags as custom elements. To do this, it’s useful to first install the following packages:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-shell\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-shell\">\u003Cspan class=\"token function\">npm\u003C/span> i unist-util-visit\n\u003Cspan class=\"token comment\"># Types\u003C/span>\n\u003Cspan class=\"token function\">npm\u003C/span> i \u003Cspan class=\"token parameter variable\">-D\u003C/span> unified hast\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-yy3zc6\">Let’s create a Unified plugin. The basic structure of a plugin is the following:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Plugin \u003Cspan class=\"token keyword\">as\u003C/span> UnifiedPlugin \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'unified'\u003C/span>\n\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> \u003Cspan class=\"token constant\">SKIP\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> visit \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'unist-util-visit'\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> unifiedPlugin\u003Cspan class=\"token operator\">:\u003C/span> UnifiedPlugin\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Root\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token keyword\">function\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n \u003Cspan class=\"token comment\">// Visit every node in the syntax tree\u003C/span>\n \u003Cspan class=\"token function\">visit\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">,\u003C/span> index\u003Cspan class=\"token punctuation\">,\u003C/span> parent\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n \u003Cspan class=\"token comment\">// Do something with the node\u003C/span>\n \u003Cspan class=\"token punctuation\">}\u003C/span>\n \u003Cspan class=\"token punctuation\">}\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-1akzv4g\">We now want to parse text nodes, so that words such as \u003Ccode>#pizza\u003C/code> and \u003Ccode>#123\u003C/code> are separated from the rest. This is a possible implementation:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> unifiedPlugin\u003Cspan class=\"token operator\">:\u003C/span> UnifiedPlugin\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Root\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token keyword\">function\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token function\">visit\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>tree\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">,\u003C/span> index\u003Cspan class=\"token punctuation\">,\u003C/span> parent\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\">// Skip code blocks and their children\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">.\u003C/span>type \u003Cspan class=\"token operator\">===\u003C/span> \u003Cspan class=\"token string\">'element'\u003C/span> \u003Cspan class=\"token operator\">&&\u003C/span> node\u003Cspan class=\"token punctuation\">.\u003C/span>tagName \u003Cspan class=\"token operator\">===\u003C/span> \u003Cspan class=\"token string\">'pre'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token constant\">SKIP\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token comment\">// Skip non-text nodes\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>node\u003Cspan class=\"token punctuation\">.\u003C/span>type \u003Cspan class=\"token operator\">!==\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> text \u003Cspan class=\"token operator\">=\u003C/span> node \u003Cspan class=\"token keyword\">as\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Text\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\t\u003Cspan class=\"token comment\">// Parse the text node and replace hashtags with spans\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> regex \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token regex\">\u003Cspan class=\"token regex-delimiter\">/\u003C/span>\u003Cspan class=\"token regex-source language-regex\">#(w+)\u003C/span>\u003Cspan class=\"token regex-delimiter\">/\u003C/span>\u003Cspan class=\"token regex-flags\">g\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> children\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>hast\u003Cspan class=\"token punctuation\">.\u003C/span>Element \u003Cspan class=\"token operator\">|\u003C/span> hast\u003Cspan class=\"token punctuation\">.\u003C/span>Text\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">let\u003C/span> lastIndex \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">let\u003C/span> match\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">while\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>match \u003Cspan class=\"token operator\">=\u003C/span> regex\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">exec\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> before \u003Cspan class=\"token operator\">=\u003C/span> text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">slice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>lastIndex\u003Cspan class=\"token punctuation\">,\u003C/span> match\u003Cspan class=\"token punctuation\">.\u003C/span>index\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>before\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\t\tchildren\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">push\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> before \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\t\t\tchildren\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">push\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\t\ttype\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'element'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\t\ttagName\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'span'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\t\tproperties\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'hashtag'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> match\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token number\">1\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\t\tchildren\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> match\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\n\t\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\tlastIndex \u003Cspan class=\"token operator\">=\u003C/span> regex\u003Cspan class=\"token punctuation\">.\u003C/span>lastIndex\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>lastIndex \u003Cspan class=\"token operator\"><\u003C/span> text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">.\u003C/span>length\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\tchildren\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">push\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> type\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'text'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> text\u003Cspan class=\"token punctuation\">.\u003C/span>value\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">slice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>lastIndex\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\n\t\t\t\u003Cspan class=\"token comment\">// Replace the text node with all the children\u003C/span>\n\t\t\tparent\u003Cspan class=\"token operator\">!\u003C/span>\u003Cspan class=\"token punctuation\">.\u003C/span>children\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">splice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>index\u003Cspan class=\"token operator\">!\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token number\">1\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token operator\">...\u003C/span>children\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\t\u003Cspan class=\"token comment\">// Skip the children\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">return\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token constant\">SKIP\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> index\u003Cspan class=\"token operator\">!\u003C/span> \u003Cspan class=\"token operator\">+\u003C/span> children\u003Cspan class=\"token punctuation\">.\u003C/span>length\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-tc8iwr\">If you want a more in-depth guide on writing Unified plugins, you can check out the official \u003Ca href=\"https://unifiedjs.com/learn/guide/create-a-plugin/\" rel=\"nofollow\">documentation\u003C/a>.\u003C/p> \u003Cp data-svelte-h=\"svelte-1a8clay\">Notice that hashtags are now replaced with the following:\u003C/p> \u003Cpre class=\"language-html\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-html\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>span\u003C/span> \u003Cspan class=\"token attr-name\">type\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>hashtag\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span> \u003Cspan class=\"token attr-name\">value\u003C/span>\u003Cspan class=\"token attr-value\">\u003Cspan class=\"token punctuation attr-equals\">=\u003C/span>\u003Cspan class=\"token punctuation\">\"\u003C/span>pizza\u003Cspan class=\"token punctuation\">\"\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span> #pizza \u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>span\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch3 id=\"configuring-the-transformer\" data-svelte-h=\"svelte-fedxl7\">\u003Ca href=\"#configuring-the-transformer\">Configuring the transformer\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-6g4x7v\">Unified plugins need to be wrapped inside a \u003Ccode>UnifiedTransformer\u003C/code> type, to be able to be used in Carta.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> UnifiedTransformer \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> hashtagTransformer\u003Cspan class=\"token operator\">:\u003C/span> UnifiedTransformer\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token string\">'sync'\u003C/span>\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\texecution\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'sync'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token comment\">// Sync, since the plugin is synchronous\u003C/span>\n\ttype\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'rehype'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token comment\">// Rehype, since it operates on HTML\u003C/span>\n\t\u003Cspan class=\"token function\">transform\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> processor \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tprocessor\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">use\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>unifiedPlugin\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"mounting-the-components\" data-svelte-h=\"svelte-1xm0rp4\">\u003Ca href=\"#mounting-the-components\">Mounting the components\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1btti53\">We now want to replace the generated hashtag placeholders with the following element:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-svelte\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-svelte\">\u003Cspan class=\"token comment\"><!-- Hashtag.svelte -->\u003C/span>\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>script\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003Cspan class=\"token script\">\u003Cspan class=\"token language-javascript\">\n\t\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">let\u003C/span> value\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003C/span>\u003C/span>\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>script\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"><\u003C/span>button\u003C/span>\n\t\u003Cspan class=\"token attr-name\">\u003Cspan class=\"token namespace\">on:\u003C/span>click=\u003C/span>\u003Cspan class=\"token language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tconsole\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">log\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'Hashtag clicked!'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\n\t#\u003Cspan class=\"token language-javascript\">\u003Cspan class=\"token punctuation\">{\u003C/span>value\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/span>\n\u003Cspan class=\"token tag\">\u003Cspan class=\"token tag\">\u003Cspan class=\"token punctuation\"></\u003C/span>button\u003C/span>\u003Cspan class=\"token punctuation\">>\u003C/span>\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-1ab5sxp\">To do that, we create a listener that:\u003C/p> \u003Col data-svelte-h=\"svelte-1ks6dt4\">\u003Cli>Finds all the previous placeholders;\u003C/li> \u003Cli>Mounts the component next to them;\u003C/li> \u003Cli>Removes the placeholders.\u003C/li>\u003C/ol> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Listener \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">import\u003C/span> Hashtag \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'./Hashtag.svelte'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> convertHashtags\u003Cspan class=\"token operator\">:\u003C/span> Listener\u003Cspan class=\"token operator\"><\u003C/span>\u003Cspan class=\"token string\">'carta-render'\u003C/span>\u003Cspan class=\"token operator\">>\u003C/span> \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\n\t\u003Cspan class=\"token string\">'carta-render'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token keyword\">function\u003C/span> \u003Cspan class=\"token function\">onRender\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> detail\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> carta \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">const\u003C/span> rendererContainer \u003Cspan class=\"token operator\">=\u003C/span> carta\u003Cspan class=\"token punctuation\">.\u003C/span>renderer\u003Cspan class=\"token operator\">?.\u003C/span>container\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token operator\">!\u003C/span>rendererContainer\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\u003Cspan class=\"token comment\">// Find all hashtag spans and replace them with Svelte components\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">const\u003C/span> hashtagSpans \u003Cspan class=\"token operator\">=\u003C/span> rendererContainer\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">querySelectorAll\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'span[type=\"hashtag\"]'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">for\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token keyword\">const\u003C/span> span \u003Cspan class=\"token keyword\">of\u003C/span> hashtagSpans\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\u003Cspan class=\"token keyword\">const\u003C/span> hashtag \u003Cspan class=\"token operator\">=\u003C/span> span\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">getAttribute\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'value'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">??\u003C/span> \u003Cspan class=\"token string\">''\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\t\u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Hashtag\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\t\ttarget\u003Cspan class=\"token operator\">:\u003C/span> span\u003Cspan class=\"token punctuation\">.\u003C/span>parentElement\u003Cspan class=\"token operator\">!\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\tanchor\u003Cspan class=\"token operator\">:\u003C/span> span\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\t\t\tprops\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> value\u003Cspan class=\"token operator\">:\u003C/span> hashtag \u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\t\t\tspan\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">remove\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"using-the-plugin\" data-svelte-h=\"svelte-bnlm90\">\u003Ca href=\"#using-the-plugin\">Using the plugin\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-sji02v\">Let’s now create a Plugin with the transformer and the listener:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token keyword\">type\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Plugin \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">export\u003C/span> \u003Cspan class=\"token keyword\">const\u003C/span> hashtag \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> Plugin \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\ttransformers\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>hashtagTransformer\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\tlisteners\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>convertHashtags\u003Cspan class=\"token punctuation\">]\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-9krp4j\">We can now use the plugin with the following:\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span> Carta \u003Cspan class=\"token punctuation\">}\u003C/span> \u003Cspan class=\"token keyword\">from\u003C/span> \u003Cspan class=\"token string\">'carta-md'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> carta \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Carta\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token comment\">// ...\u003C/span>\n\textensions\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token function\">hashtag\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cp data-svelte-h=\"svelte-1fa80qn\">You can find the example source code \u003Ca href=\"https://github.com/BearToCode/svelte-in-carta-example\" rel=\"nofollow\">here\u003C/a>.\u003C/p>",{"code":4,"map":5},"",null,{"title":7,"section":8},"Using Svelte Components","Overview"],"uses":{"url":1}}]}
|