103 lines
31 KiB
JavaScript
103 lines
31 KiB
JavaScript
import{s as es,e as l,a as i,H as d,c as u,l as r,g as k,b as g,m as w,f as a,p as m,i as e,n as Z}from"./scheduler.DKiYiPX0.js";import{S as ps,i as os,c as B,a as V,m as Y,t as G,b as J,d as Q}from"./index.z4bt_ZBS.js";import{C as X}from"./Code.tlNrnEug.js";function cs(h){let t,o,f=`<code class="language-shell"><span class="token function">npm</span> i unist-util-visit
|
||
<span class="token comment"># Types</span>
|
||
<span class="token function">npm</span> i <span class="token parameter variable">-D</span> unified hast</code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-shell")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function ls(h){let t,o,f=`<code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Plugin <span class="token keyword">as</span> UnifiedPlugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unified'</span>
|
||
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">SKIP</span><span class="token punctuation">,</span> visit <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'unist-util-visit'</span>
|
||
|
||
<span class="token keyword">const</span> unifiedPlugin<span class="token operator">:</span> UnifiedPlugin<span class="token operator"><</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> hast<span class="token punctuation">.</span>Root<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>tree<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Visit every node in the syntax tree</span>
|
||
<span class="token function">visit</span><span class="token punctuation">(</span>tree<span class="token punctuation">,</span> <span class="token punctuation">(</span>node<span class="token punctuation">,</span> index<span class="token punctuation">,</span> parent<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Do something with the node</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-ts")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function us(h){let t,o,f=`<code class="language-ts"><span class="token keyword">const</span> unifiedPlugin<span class="token operator">:</span> UnifiedPlugin<span class="token operator"><</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> hast<span class="token punctuation">.</span>Root<span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>tree<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">visit</span><span class="token punctuation">(</span>tree<span class="token punctuation">,</span> <span class="token punctuation">(</span>node<span class="token punctuation">,</span> index<span class="token punctuation">,</span> parent<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// Skip code blocks and their children</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'element'</span> <span class="token operator">&&</span> node<span class="token punctuation">.</span>tagName <span class="token operator">===</span> <span class="token string">'pre'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token constant">SKIP</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token comment">// Skip non-text nodes</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span>type <span class="token operator">!==</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> text <span class="token operator">=</span> node <span class="token keyword">as</span> hast<span class="token punctuation">.</span>Text<span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Parse the text node and replace hashtags with spans</span>
|
||
<span class="token keyword">const</span> regex <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">#(w+)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> children<span class="token operator">:</span> <span class="token punctuation">(</span>hast<span class="token punctuation">.</span>Element <span class="token operator">|</span> hast<span class="token punctuation">.</span>Text<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> lastIndex <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">let</span> match<span class="token punctuation">;</span>
|
||
<span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>match <span class="token operator">=</span> regex<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> before <span class="token operator">=</span> text<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>lastIndex<span class="token punctuation">,</span> match<span class="token punctuation">.</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>before<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> before <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
type<span class="token operator">:</span> <span class="token string">'element'</span><span class="token punctuation">,</span>
|
||
tagName<span class="token operator">:</span> <span class="token string">'span'</span><span class="token punctuation">,</span>
|
||
properties<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'hashtag'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> match<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> match<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
lastIndex <span class="token operator">=</span> regex<span class="token punctuation">.</span>lastIndex<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>lastIndex <span class="token operator"><</span> text<span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> text<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>lastIndex<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment">// Replace the text node with all the children</span>
|
||
parent<span class="token operator">!</span><span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token operator">!</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token operator">...</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Skip the children</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token constant">SKIP</span><span class="token punctuation">,</span> index<span class="token operator">!</span> <span class="token operator">+</span> children<span class="token punctuation">.</span>length<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-ts")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function is(h){let t,o,f=`<code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> UnifiedTransformer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> hashtagTransformer<span class="token operator">:</span> UnifiedTransformer<span class="token operator"><</span><span class="token string">'sync'</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
execution<span class="token operator">:</span> <span class="token string">'sync'</span><span class="token punctuation">,</span> <span class="token comment">// Sync, since the plugin is synchronous</span>
|
||
type<span class="token operator">:</span> <span class="token string">'rehype'</span><span class="token punctuation">,</span> <span class="token comment">// Rehype, since it operates on HTML</span>
|
||
<span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">{</span> processor <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
processor<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>unifiedPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-ts")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function ks(h){let t,o,f=`<code class="language-svelte"><span class="token comment"><!-- Hashtag.svelte --></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||
<span class="token keyword">export</span> <span class="token keyword">let</span> value<span class="token punctuation">;</span>
|
||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span>
|
||
<span class="token attr-name"><span class="token namespace">on:</span>click=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hashtag clicked!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
<span class="token punctuation">></span></span>
|
||
#<span class="token language-javascript"><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-svelte")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function rs(h){let t,o,f=`<code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Listener <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">import</span> Hashtag <span class="token keyword">from</span> <span class="token string">'./Hashtag.svelte'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> convertHashtags<span class="token operator">:</span> Listener<span class="token operator"><</span><span class="token string">'carta-render'</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token string">'carta-render'</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">function</span> <span class="token function">onRender</span><span class="token punctuation">(</span><span class="token punctuation">{</span> detail<span class="token operator">:</span> <span class="token punctuation">{</span> carta <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> rendererContainer <span class="token operator">=</span> carta<span class="token punctuation">.</span>renderer<span class="token operator">?.</span>container<span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>rendererContainer<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// Find all hashtag spans and replace them with Svelte components</span>
|
||
<span class="token keyword">const</span> hashtagSpans <span class="token operator">=</span> rendererContainer<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'span[type="hashtag"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> span <span class="token keyword">of</span> hashtagSpans<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> hashtag <span class="token operator">=</span> span<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">''</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">new</span> <span class="token class-name">Hashtag</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
target<span class="token operator">:</span> span<span class="token punctuation">.</span>parentElement<span class="token operator">!</span><span class="token punctuation">,</span>
|
||
anchor<span class="token operator">:</span> span<span class="token punctuation">,</span>
|
||
props<span class="token operator">:</span> <span class="token punctuation">{</span> value<span class="token operator">:</span> hashtag <span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
span<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span></code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-ts")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function fs(h){let t,o,f=`<code class="language-ts"><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Plugin <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">const</span> hashtag <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Plugin <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
transformers<span class="token operator">:</span> <span class="token punctuation">[</span>hashtagTransformer<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
listeners<span class="token operator">:</span> <span class="token punctuation">[</span>convertHashtags<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>`;return{c(){t=l("pre"),o=new d(!1),this.h()},l(p){t=u(p,"PRE",{class:!0});var c=g(t);o=w(c,!1),c.forEach(a),this.h()},h(){o.a=null,m(t,"class","language-ts")},m(p,c){e(p,t,c),o.m(f,t)},p:Z,d(p){p&&a(t)}}}function hs(h){let t,o="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:",f,p,c="<li>Create a Unified plugin to isolate the targeted element;</li> <li>Replace all the elements with the component, after every render.</li>",sn,v,Rn='<a href="#example">Example</a>',an,E,Sn="Let’s say we want to replace all hashtags, such as <code>#something</code>, with a custom component. Here is as example of how that could be achieved.",tn,$,Un='<a href="#parsing-the-hashtags">Parsing the hashtags</a>',en,R,In="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:",pn,_,on,S,zn="Let’s create a Unified plugin. The basic structure of a plugin is the following:",cn,x,ln,U,jn="We now want to parse text nodes, so that words such as <code>#pizza</code> and <code>#123</code> are separated from the rest. This is a possible implementation:",un,y,kn,I,qn='If you want a more in-depth guide on writing Unified plugins, you can check out the official <a href="https://unifiedjs.com/learn/guide/create-a-plugin/" rel="nofollow">documentation</a>.',rn,z,Fn="Notice that hashtags are now replaced with the following:",fn,j,hn,as='<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hashtag<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pizza<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> #pizza <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code>',mn,C,Kn='<a href="#configuring-the-transformer">Configuring the transformer</a>',dn,q,Nn="Unified plugins need to be wrapped inside a <code>UnifiedTransformer</code> type, to be able to be used in Carta.",gn,H,wn,T,On='<a href="#mounting-the-components">Mounting the components</a>',vn,F,Wn="We now want to replace the generated hashtag placeholders with the following element:",$n,P,_n,K,An="To do that, we create a listener that:",xn,N,Dn="<li>Finds all the previous placeholders;</li> <li>Mounts the component next to them;</li> <li>Removes the placeholders.</li>",yn,L,Cn,b,Bn='<a href="#using-the-plugin">Using the plugin</a>',Hn,O,Vn="Let’s now create a Plugin with the transformer and the listener:",Tn,M,Pn,W,Yn="We can now use the plugin with the following:",Ln,A,bn,ts=`<code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> Carta <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'carta-md'</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> carta <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Carta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
extensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token function">hashtag</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>`,Mn,D,Gn='You can find the example source code <a href="https://github.com/BearToCode/svelte-in-carta-example" rel="nofollow">here</a>.',En;return _=new X({props:{$$slots:{default:[cs]},$$scope:{ctx:h}}}),x=new X({props:{$$slots:{default:[ls]},$$scope:{ctx:h}}}),y=new X({props:{$$slots:{default:[us]},$$scope:{ctx:h}}}),H=new X({props:{$$slots:{default:[is]},$$scope:{ctx:h}}}),P=new X({props:{$$slots:{default:[ks]},$$scope:{ctx:h}}}),L=new X({props:{$$slots:{default:[rs]},$$scope:{ctx:h}}}),M=new X({props:{$$slots:{default:[fs]},$$scope:{ctx:h}}}),{c(){t=l("p"),t.textContent=o,f=i(),p=l("ol"),p.innerHTML=c,sn=i(),v=l("h2"),v.innerHTML=Rn,an=i(),E=l("p"),E.innerHTML=Sn,tn=i(),$=l("h3"),$.innerHTML=Un,en=i(),R=l("p"),R.textContent=In,pn=i(),B(_.$$.fragment),on=i(),S=l("p"),S.textContent=zn,cn=i(),B(x.$$.fragment),ln=i(),U=l("p"),U.innerHTML=jn,un=i(),B(y.$$.fragment),kn=i(),I=l("p"),I.innerHTML=qn,rn=i(),z=l("p"),z.textContent=Fn,fn=i(),j=l("pre"),hn=new d(!1),mn=i(),C=l("h3"),C.innerHTML=Kn,dn=i(),q=l("p"),q.innerHTML=Nn,gn=i(),B(H.$$.fragment),wn=i(),T=l("h3"),T.innerHTML=On,vn=i(),F=l("p"),F.textContent=Wn,$n=i(),B(P.$$.fragment),_n=i(),K=l("p"),K.textContent=An,xn=i(),N=l("ol"),N.innerHTML=Dn,yn=i(),B(L.$$.fragment),Cn=i(),b=l("h3"),b.innerHTML=Bn,Hn=i(),O=l("p"),O.textContent=Vn,Tn=i(),B(M.$$.fragment),Pn=i(),W=l("p"),W.textContent=Yn,Ln=i(),A=l("pre"),bn=new d(!1),Mn=i(),D=l("p"),D.innerHTML=Gn,this.h()},l(n){t=u(n,"P",{"data-svelte-h":!0}),r(t)!=="svelte-1ur5rpk"&&(t.textContent=o),f=k(n),p=u(n,"OL",{"data-svelte-h":!0}),r(p)!=="svelte-101k9os"&&(p.innerHTML=c),sn=k(n),v=u(n,"H2",{id:!0,"data-svelte-h":!0}),r(v)!=="svelte-r4uhiu"&&(v.innerHTML=Rn),an=k(n),E=u(n,"P",{"data-svelte-h":!0}),r(E)!=="svelte-r8in7e"&&(E.innerHTML=Sn),tn=k(n),$=u(n,"H3",{id:!0,"data-svelte-h":!0}),r($)!=="svelte-15fs2m6"&&($.innerHTML=Un),en=k(n),R=u(n,"P",{"data-svelte-h":!0}),r(R)!=="svelte-1r7bbxd"&&(R.textContent=In),pn=k(n),V(_.$$.fragment,n),on=k(n),S=u(n,"P",{"data-svelte-h":!0}),r(S)!=="svelte-yy3zc6"&&(S.textContent=zn),cn=k(n),V(x.$$.fragment,n),ln=k(n),U=u(n,"P",{"data-svelte-h":!0}),r(U)!=="svelte-1akzv4g"&&(U.innerHTML=jn),un=k(n),V(y.$$.fragment,n),kn=k(n),I=u(n,"P",{"data-svelte-h":!0}),r(I)!=="svelte-tc8iwr"&&(I.innerHTML=qn),rn=k(n),z=u(n,"P",{"data-svelte-h":!0}),r(z)!=="svelte-1a8clay"&&(z.textContent=Fn),fn=k(n),j=u(n,"PRE",{class:!0});var s=g(j);hn=w(s,!1),s.forEach(a),mn=k(n),C=u(n,"H3",{id:!0,"data-svelte-h":!0}),r(C)!=="svelte-fedxl7"&&(C.innerHTML=Kn),dn=k(n),q=u(n,"P",{"data-svelte-h":!0}),r(q)!=="svelte-6g4x7v"&&(q.innerHTML=Nn),gn=k(n),V(H.$$.fragment,n),wn=k(n),T=u(n,"H3",{id:!0,"data-svelte-h":!0}),r(T)!=="svelte-1xm0rp4"&&(T.innerHTML=On),vn=k(n),F=u(n,"P",{"data-svelte-h":!0}),r(F)!=="svelte-1btti53"&&(F.textContent=Wn),$n=k(n),V(P.$$.fragment,n),_n=k(n),K=u(n,"P",{"data-svelte-h":!0}),r(K)!=="svelte-1ab5sxp"&&(K.textContent=An),xn=k(n),N=u(n,"OL",{"data-svelte-h":!0}),r(N)!=="svelte-1ks6dt4"&&(N.innerHTML=Dn),yn=k(n),V(L.$$.fragment,n),Cn=k(n),b=u(n,"H3",{id:!0,"data-svelte-h":!0}),r(b)!=="svelte-bnlm90"&&(b.innerHTML=Bn),Hn=k(n),O=u(n,"P",{"data-svelte-h":!0}),r(O)!=="svelte-sji02v"&&(O.textContent=Vn),Tn=k(n),V(M.$$.fragment,n),Pn=k(n),W=u(n,"P",{"data-svelte-h":!0}),r(W)!=="svelte-9krp4j"&&(W.textContent=Yn),Ln=k(n),A=u(n,"PRE",{class:!0});var nn=g(A);bn=w(nn,!1),nn.forEach(a),Mn=k(n),D=u(n,"P",{"data-svelte-h":!0}),r(D)!=="svelte-1fa80qn"&&(D.innerHTML=Gn),this.h()},h(){m(v,"id","example"),m($,"id","parsing-the-hashtags"),hn.a=null,m(j,"class","language-html"),m(C,"id","configuring-the-transformer"),m(T,"id","mounting-the-components"),m(b,"id","using-the-plugin"),bn.a=null,m(A,"class","language-ts")},m(n,s){e(n,t,s),e(n,f,s),e(n,p,s),e(n,sn,s),e(n,v,s),e(n,an,s),e(n,E,s),e(n,tn,s),e(n,$,s),e(n,en,s),e(n,R,s),e(n,pn,s),Y(_,n,s),e(n,on,s),e(n,S,s),e(n,cn,s),Y(x,n,s),e(n,ln,s),e(n,U,s),e(n,un,s),Y(y,n,s),e(n,kn,s),e(n,I,s),e(n,rn,s),e(n,z,s),e(n,fn,s),e(n,j,s),hn.m(as,j),e(n,mn,s),e(n,C,s),e(n,dn,s),e(n,q,s),e(n,gn,s),Y(H,n,s),e(n,wn,s),e(n,T,s),e(n,vn,s),e(n,F,s),e(n,$n,s),Y(P,n,s),e(n,_n,s),e(n,K,s),e(n,xn,s),e(n,N,s),e(n,yn,s),Y(L,n,s),e(n,Cn,s),e(n,b,s),e(n,Hn,s),e(n,O,s),e(n,Tn,s),Y(M,n,s),e(n,Pn,s),e(n,W,s),e(n,Ln,s),e(n,A,s),bn.m(ts,A),e(n,Mn,s),e(n,D,s),En=!0},p(n,[s]){const nn={};s&1&&(nn.$$scope={dirty:s,ctx:n}),_.$set(nn);const Jn={};s&1&&(Jn.$$scope={dirty:s,ctx:n}),x.$set(Jn);const Qn={};s&1&&(Qn.$$scope={dirty:s,ctx:n}),y.$set(Qn);const Xn={};s&1&&(Xn.$$scope={dirty:s,ctx:n}),H.$set(Xn);const Zn={};s&1&&(Zn.$$scope={dirty:s,ctx:n}),P.$set(Zn);const ns={};s&1&&(ns.$$scope={dirty:s,ctx:n}),L.$set(ns);const ss={};s&1&&(ss.$$scope={dirty:s,ctx:n}),M.$set(ss)},i(n){En||(G(_.$$.fragment,n),G(x.$$.fragment,n),G(y.$$.fragment,n),G(H.$$.fragment,n),G(P.$$.fragment,n),G(L.$$.fragment,n),G(M.$$.fragment,n),En=!0)},o(n){J(_.$$.fragment,n),J(x.$$.fragment,n),J(y.$$.fragment,n),J(H.$$.fragment,n),J(P.$$.fragment,n),J(L.$$.fragment,n),J(M.$$.fragment,n),En=!1},d(n){n&&(a(t),a(f),a(p),a(sn),a(v),a(an),a(E),a(tn),a($),a(en),a(R),a(pn),a(on),a(S),a(cn),a(ln),a(U),a(un),a(kn),a(I),a(rn),a(z),a(fn),a(j),a(mn),a(C),a(dn),a(q),a(gn),a(wn),a(T),a(vn),a(F),a($n),a(_n),a(K),a(xn),a(N),a(yn),a(Cn),a(b),a(Hn),a(O),a(Tn),a(Pn),a(W),a(Ln),a(A),a(Mn),a(D)),Q(_,n),Q(x,n),Q(y,n),Q(H,n),Q(P,n),Q(L,n),Q(M,n)}}}const ws={title:"Using Svelte Components",section:"Overview"};class vs extends ps{constructor(t){super(),os(this,t,null,hs,es,{})}}export{vs as default,ws as metadata};
|