-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
154 lines (143 loc) · 47.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html><html lang=en><head><meta charset=UTF-8><title>Compiler | Marko</title><link rel=icon type=image/png sizes=32x32 href=/assets/d78b83f1.png><meta name=viewport content="width=device-width, initial-scale=1"><meta name=description content="Marko is a friendly (and fast!) UI library that makes building web apps fun."><script>
if (window.self !== window.top) {
document.documentElement.classList.add("iframe");
}
</script><script>
const params = new URL(window.location).searchParams;
const uwu = params.has("uwu")
? params.get("uwu") !== "false"
: localStorage.uwu;
if (uwu) {
localStorage.uwu = true;
document.documentElement.className = "uwu";
document.write(
"<style>@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');html.uwu body{font-family:'Varela Round',sans-serif;}</style>",
);
} else {
delete localStorage.uwu;
}
</script><script src="/assets/121.73867a62.js" async></script><script src="/assets/364.f6733859.js" async></script><script src="/assets/991.5eec5c73.js" async></script><link rel="stylesheet" href="/assets/a50c84bf.css"></head><body class=docs><a href="#main" id=skip-link>Skip to main content</a><!--M#s0-1-0-14--><header data-marko-key="@header s0-1-0-14" class=site-header><div class=content><a href="/"><img src=/assets/91bc26e5.svg alt="Marko Home" class=site-logo><img src=/assets/2371441a.png alt="Marko Home" class=site-logo-uwu></a><div class=stuff><nav class=site-menu><a href=/docs/getting-started>Docs</a><a href=/try-online>Try Online</a><a href=https://github.com/marko-js/marko>GitHub</a><!--M^s0-1-0-14-12 s0-1-0-14 12--><link rel=preconnect href=https://GB0QQV5RQM-dsn.algolia.net crossorigin><div data-marko-key="@container s0-1-0-14-12" class=search></div><!--M/--></nav><button data-marko='{"onclick":"toggleMenu s0-1-0-14 false"}' class=menu>☰</button></div></div></header><!--M/--><!--M#s0-1-0-15--><div data-marko-key="@sidebar s0-1-0-15" class=doc-sidebar><button data-marko='{"onclick":"hide s0-1-0-15 false"}' class=close>✕</button><h1>Marko <!--M^s0-1-0-15-9 s0-1-0-15 9--><select data-marko='{"onchange":"switchVersion s0-1-0-15-9 false"}' data-marko-key="@version s0-1-0-15-9"><option value=/v6/docs/setup>next</option><option value=/docs/getting-started selected>5.37.27</option><option value="http://marko-v4.github.io/docs/">4.x</option><option value="http://v3.markojs.com/docs/">3.x</option><option value="http://marko-v2.github.io/docs/">2.x</option></select><!--M/--></h1><ul class=toc-level0><li class=section><a href="/docs/guides-overview/">GUIDES</a></li><li><a href="/docs/installing/">Installing</a></li><li><a href="/docs/getting-started/">Getting started</a></li><li><a href="/docs/conditionals-and-lists/">Conditionals and lists</a></li><li><a href="/docs/custom-tags/">Custom tags</a></li><li><a href="/docs/state/">State</a></li><li><a href="/docs/styles/">Styles</a></li><li><a href="/docs/events/">Events</a></li><li><a href="/docs/body-content/">Body content</a></li><li><a href="/docs/typescript/">TypeScript</a></li><li><a href="/docs/marko-5-upgrade/">Marko 5 upgrade</a></li><li><a href="/docs/troubleshooting-streaming/">Troubleshooting Streaming</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/tutorials-overview/">TUTORIALS</a></li><li><a href="/docs/color-picker/">Color Picker</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/reference-overview/">REFERENCE</a></li><li><a href="/docs/rendering/">Rendering</a></li><li><a href="/docs/syntax/">Syntax</a></li><li><a href="/docs/core-tags/">Core tags</a></li><li><a href="/docs/class-components/">Class components</a></li><li><a href="/docs/marko-json/">marko.json</a></li><li><a class=selected href="/docs/compiler/">Compiler</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/bundler-integrations-overview/">BUNDLER INTEGRATIONS</a></li><li><a href="/docs/vite/">Vite</a></li><li><a href="/docs/webpack/">Webpack</a></li><li><a href="/docs/rollup/">Rollup</a></li><li><a href="/docs/lasso/">Lasso</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/server-integrations-overview/">SERVER INTEGRATIONS</a></li><li><a href="/docs/cloudflare-workers/">Cloudflare Workers</a></li><li><a href="/docs/express/">Express</a></li><li><a href="/docs/fastify/">Fastify</a></li><li><a href="/docs/koa/">Koa</a></li><li><a href="/docs/http/">HTTP</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/tooling-overview/">TOOLING</a></li><li><a href="/docs/editor-plugins/">Editor plugins</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/articles-overview/">ARTICLES</a></li><li><a href="/docs/marko-vs-react/">Marko vs React</a></li><li><a href="/docs/why-is-marko-fast/">Why is Marko Fast</a></li><li><a href="/docs/10-awesome-marko-features/">10 Awesome Marko Features</a></li></ul></div><!--M/--><main id=main tabindex=-1 class=content><div class=doc-layout><div class=doc-container><div class=doc-content><h1 id=compiler><a name=compiler class=anchor href=#compiler><span class=header-link></span></a>Compiler</h1><blockquote class=null><p><strong>Warning</strong>: The compiler API and hooks are not terribly stable. They’re intended for advanced integrations or userland experimentation with new language features.</p><p>Prefer existing official plugins and the standard tag library when possible.</p></blockquote><h2 id=compile-api><a name=compile-api class=anchor href=#compile-api><span class=header-link></span></a>Compile API</h2><blockquote class=null><p><strong>Warning</strong>: The Compile API is intended for advanced integration with build tools, like Webpack and Rollup. Unless you’re doing that, you probably instead want <a href=https://github.com/marko-js/cli#readme><code>build</code>/<code>serve</code> in the Marko CLI</a>, or one of <a href="/docs/bundler-integrations-overview/">Marko’s bundler integrations</a>.</p></blockquote><h3 id=compile-functions><a name=compile-functions class=anchor href=#compile-functions><span class=header-link></span></a>Compile Functions</h3><p>Compile functions take two arguments:</p><ol><li>A source Marko template</li><li><a href=#options><code>CompileOptions</code></a></li></ol><p>Then, they return a <code>CompileResult</code>:</p><script>if(localStorage.getItem('markojs-website:syntax') === 'concise'){document.body.classList.add('concise')}</script><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>type</span> CompileResult <span style=color:#FFFFFF>=</span> {
<span style=color:#FFFFFF>code</span><span style=color:#FF4185>:</span> <span style=color:#66D9EF>string</span>;
<span style=color:#FFFFFF>map</span><span style=color:#FF4185>?:</span> SourceMap;
<span style=color:#FFFFFF>meta</span><span style=color:#FF4185>:</span> Record<<span style=color:#66D9EF>string</span>, <span style=color:#66D9EF>unknown</span>>;
};
</pre><ul><li><code>code</code>: The compiled output of executable JavaScript code.</li><li><code>map</code>: <a href=https://firefox-source-docs.mozilla.org/devtools-user/debugger/how_to/use_a_source_map/index.html>A source map, used for debugging.</a></li><li><code>meta</code>: Metadata gathered while compiling — nothing terribly useful, probably going to get deprecated.<ul><li>Data about child dependencies. Was useful back when it was primarily the bundlers that handled tree-shaking out server components. Now that happens in the compiler, so we don’t use this anymore and therefore might become inaccurate in the future.</li><li>A list of <code>watchFiles</code>: files that were used to compile the template (e.g. <code>marko.json</code>). Used to tell bundlers which files should be watched in dev mode.</li></ul></li></ul><h4 id=compilefile-and-compilefilesync><a name=compilefile-and-compilefilesync class=anchor href=#compilefile-and-compilefilesync><span class=header-link></span></a><code>compileFile()</code> and <code>compileFileSync</code></h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileFile</span>(<span style=color:#FFFFFF>filename</span>: <span style=color:#FFFFFF>string</span>, <span style=color:#FFFFFF>options</span><span style=color:#FF4185>?:</span> <span style=color:#FFFFFF>CompileOptions</span>): <span style=color:#66D9EF>Promise</span><span style=color:#FF4185><</span><span style=color:#FFFFFF>CompileResult</span><span style=color:#FF4185>></span>
<span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileFileSync</span>(<span style=color:#FFFFFF>filename</span>: <span style=color:#FFFFFF>string</span>, <span style=color:#FFFFFF>options</span><span style=color:#FF4185>?:</span> <span style=color:#FFFFFF>CompileOptions</span>): <span style=color:#FFFFFF>CompileResult</span>
</pre><p><code>compileFile</code> and <code>compileFileSync</code> load <code>filename</code> from disk to use as a source template, then translate it into JavaScript.</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#AE81FF>*</span> <span style=color:#FF4185>as</span> <span style=color:#FFFFFF>compiler</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/compiler"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>asyncResult</span> <span style=color:#FFFFFF>=</span> <span style=color:#FF4185>await</span> <span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileFile</span>(<span style=color:#FFF066>"./src/index.marko"</span>, {
modules: <span style=color:#FFF066>"cjs"</span>,
});
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>syncResult</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileFileSync</span>(<span style=color:#FFF066>"./src/index.marko"</span>, {
modules: <span style=color:#FFF066>"cjs"</span>,
});
</pre><h4 id=compile-and-compilesync><a name=compile-and-compilesync class=anchor href=#compile-and-compilesync><span class=header-link></span></a><code>compile()</code> and <code>compileSync()</code></h4><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compile</span>(<span style=color:#FFFFFF>src</span>: <span style=color:#FFFFFF>string</span>, <span style=color:#FFFFFF>filename</span>: <span style=color:#FFFFFF>string</span>, <span style=color:#FFFFFF>options</span><span style=color:#FF4185>?:</span> <span style=color:#FFFFFF>CompileOptions</span>): <span style=color:#66D9EF>Promise</span><span style=color:#FF4185><</span><span style=color:#FFFFFF>CompileResult</span><span style=color:#FF4185>></span>
<span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileSync</span>(<span style=color:#FFFFFF>src</span>: <span style=color:#FFFFFF>string</span>, <span style=color:#FFFFFF>filename</span>: <span style=color:#FFFFFF>string</span>, <span style=color:#FFFFFF>options</span><span style=color:#FF4185>?:</span> <span style=color:#FFFFFF>CompileOptions</span>): <span style=color:#FFFFFF>CompileResult</span>
</pre><p><code>compile</code> and <code>compileSync</code> accept source templates as a string, rather than loading from disk.</p><p>The <code>filename</code> location is used for resolving taglibs and imports, but does not have to be an actually existing file. </p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#AE81FF>*</span> <span style=color:#FF4185>as</span> <span style=color:#FFFFFF>compiler</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/compiler"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>asyncResult</span> <span style=color:#FFFFFF>=</span> <span style=color:#FF4185>await</span> <span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compile</span>(
<span style=color:#FFF066>"<h1>Hello!</>"</span>,
<span style=color:#FFF066>"./src/index.marko"</span>,
{ modules: <span style=color:#FFF066>"cjs"</span> },
);
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>syncResult</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileSync</span>(<span style=color:#FFF066>"<h1>Hello!</>"</span>, <span style=color:#FFF066>"./src/index.marko"</span>, {
modules: <span style=color:#FFF066>"cjs"</span>,
});
</pre><h3 id=options><a name=options class=anchor href=#options><span class=header-link></span></a>Options</h3><p>The compiler may be configured globally to change its default options:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#AE81FF>*</span> <span style=color:#FF4185>as</span> <span style=color:#FFFFFF>compiler</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/compiler"</span>;
<span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>configure</span>({ output: <span style=color:#FFF066>"dom"</span> });
</pre><p>Or you can pass options objects when calling compile functions. Each property will override individual properties set by <code>configure()</code>:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#AE81FF>*</span> <span style=color:#FF4185>as</span> <span style=color:#FFFFFF>compiler</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/compiler"</span>;
<span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>configure</span>({
output: <span style=color:#FFF066>"dom"</span>,
sourceMaps: <span style=color:#AE81FF>true</span>,
});
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>result</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>compiler</span>.<span style=color:#A6E22E>compileFileSync</span>(<span style=color:#FFF066>"./example.marko"</span>, {
output: <span style=color:#FFF066>"html"</span>,
});
</pre><p>In the above example, <code>result</code> would be compiled with the options of <code>{ output: "html", sourceMaps: true }</code>.</p><h4 id=output><a name=output class=anchor href=#output><span class=header-link></span></a><code>output</code></h4><p>Type: <code>string</code><br> Default: <code>"html"</code></p><ul><li><code>"html"</code>: compiles templates to JavaScript that generates HTML strings for server HTTP responses, writing <code>.html</code> files, or maybe even constructing <code>Response</code>s in Web Workers.</li><li><code>"dom"</code>: compiles templates to JavaScript that generates DOM nodes for client-side rendering in browsers.</li><li><code>"hydrate"</code>: like <code>"dom"</code>, but only includes assets & components needed in-browser, assuming the page was rendered on the server.</li><li><code>"migrate"</code>: only runs migrations (no transforms or translation) and returns the migrated template code.</li><li><code>"source"</code>: parses templates without running any migrations or transforms. (Useful with <code>ast: true</code>)</li></ul><blockquote class=null><p><strong>Note</strong>: For <code>dom</code> or <code>hydrate</code> outputs, you should also specify a <a href=#resolvevirtualdependency><code>resolveVirtualDependency</code></a> function.</p></blockquote><h4 id=code><a name=code class=anchor href=#code><span class=header-link></span></a><code>code</code></h4><p>Type: <code>boolean</code><br> Default: <code>true</code></p><p>If <code>false</code>, will not generate or return the compiled <code>code</code> string.</p><h4 id=ast><a name=ast class=anchor href=#ast><span class=header-link></span></a><code>ast</code></h4><p>Type: <code>boolean</code><br> Default: <code>false</code></p><p>If <code>true</code>, the compiler will provide the <code>ast</code> in its output.</p><h4 id=striptypes><a name=striptypes class=anchor href=#striptypes><span class=header-link></span></a><code>stripTypes</code></h4><p>Type: <code>boolean|undefined</code><br> Default: <code>undefined</code></p><p>If <code>true</code>, removes all TypeScript types from the output. If the value is <code>undefined</code> (the default), the compiler will remove types if the <code>output</code> option is not <code>source</code> or <code>migrate</code>.</p><p>For example, to run migrations <em>and</em> strip types, you can set both <code>output: "migrate"</code> and <code>stripTypes: true</code>.</p><h4 id=runtimeid><a name=runtimeid class=anchor href=#runtimeid><span class=header-link></span></a><code>runtimeId</code></h4><p>Type: <code>string</code><br> Default: <code>undefined</code></p><p>Optionally use to override the runtime ID used to differentiate multiple copies of Marko on the same page, which is passed to <code>marko/components.init(runtimeId)</code> when compiling in the <code>hydrate</code> output.</p><h4 id=writeversioncomment><a name=writeversioncomment class=anchor href=#writeversioncomment><span class=header-link></span></a><code>writeVersionComment</code></h4><p>Type: <code>boolean</code><br> Default: <code>true</code></p><p>Whether the Marko version should be written to the template in a comment, like so:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#8F8F9E>// Compiled using marko@x.x.x - DO NOT EDIT</span>
</pre><h4 id=ignoreunrecognizedtags><a name=ignoreunrecognizedtags class=anchor href=#ignoreunrecognizedtags><span class=header-link></span></a><code>ignoreUnrecognizedTags</code></h4><p>Type: <code>boolean</code><br> Default: <code>false</code></p><p>Whether unrecognized tags should be silently ignored or throw a compile error. Ignored tags will be output as native elements.</p><blockquote class=null><p><strong>ProTip</strong>: Some test setups use this alongside <code>@marko/compiler/taglib</code>'s <code>excludeDir</code> and <code>excludePackage</code> to simulate "shallow" rendering.</p></blockquote><h4 id=sourcemaps><a name=sourcemaps class=anchor href=#sourcemaps><span class=header-link></span></a><code>sourceMaps</code></h4><p>Type: <code>boolean</code> or <code>string</code><br> Default: <code>false</code></p><p>Whether source maps should be output with the compiled templates.</p><ul><li>When <code>true</code> a <code>map</code> property will be available on the compile result.</li><li>When <code>"inline"</code> the sourcemap will be inlined as a comment in the output code.</li><li>When <code>"both"</code> both of the above will be used.</li></ul><h4 id=meta><a name=meta class=anchor href=#meta><span class=header-link></span></a><code>meta</code></h4><p>Type: <code>boolean</code><br> Default: <code>false</code></p><p><em>Deprecated</em>. This option inlines the metadata in the output Javascript code. Metadata should be accessed instead from the <code>CompileResult</code>.</p><h4 id=filesystem><a name=filesystem class=anchor href=#filesystem><span class=header-link></span></a><code>fileSystem</code></h4><p>Type: typeof <a href=https://nodejs.org/api/fs.html><code>fs</code></a> (specifically read APIs)<br> Default: Cached <code>fs</code></p><p>Use a different file system object (eg. webpack's <a href=https://github.com/webpack/enhanced-resolve/blob/f08fe3f1a22c90c722eca14b38a9300ad00c62e8/lib/CachedInputFileSystem.js>CachedInputFileSystem</a> or <a href=https://github.com/eBay/arc/tree/master/packages/arc-fs><code>arc-fs</code></a>)</p><h4 id=modules><a name=modules class=anchor href=#modules><span class=header-link></span></a><code>modules</code></h4><p>Type: <code>string</code> (<code>"esm"</code> or <code>"cjs"</code>)<br> Default: <code>"esm"</code></p><p>By default Marko outputs ES Modules. You can optionally specify <code>"cjs"</code> for CommonJS/<code>require()</code>.</p><h4 id=optimize><a name=optimize class=anchor href=#optimize><span class=header-link></span></a><code>optimize</code></h4><p>Type: <code>boolean</code><br> Default: <a href=https://github.com/marko-js/marko/blob/0f212897d2d3ec30b12c2f18ba950818bccb83b4/packages/compiler/src/babel-plugin/index.js#L277-L284>environment based</a> (<code>false</code> in development, <code>true</code> in production)</p><p>Enables production mode optimizations.</p><h4 id=optimizeknowntemplates><a name=optimizeknowntemplates class=anchor href=#optimizeknowntemplates><span class=header-link></span></a><code>optimizeKnownTemplates</code></h4><p>Type: <code>string[]</code><br> Default: <code>undefined</code></p><p>If <code>optimize</code> is enabled you can provide an array of template paths which the compiler will use to generate shorter registry/template ids using incrementing ids. This can only be used if the same <code>optimizeKnownTemplates</code> are used for both server and client compilations.</p><h4 id=resolvevirtualdependency><a name=resolvevirtualdependency class=anchor href=#resolvevirtualdependency><span class=header-link></span></a><code>resolveVirtualDependency</code></h4><p>Type:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034>(
<span style=color:#FFFFFF>filename</span>: <span style=color:#FFFFFF>string</span>,
<span style=color:#FFFFFF>dep</span>: {
code: <span style=color:#FFFFFF>string</span>;
<span style=color:#FFFFFF>virtualPath</span>: <span style=color:#FFFFFF>string</span>;
<span style=color:#FFFFFF>map</span><span style=color:#FF4185>?:</span> <span style=color:#FFFFFF>SourceMap</span>;
},
) <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>string</span>;
</pre><p>Default: <code>undefined</code></p><p>This option should be set for <code>dom</code> or <code>hydrate</code> outputs. Since Marko templates can represent multiple output files (eg. JS renderer and CSS styles), a single source <code>.marko</code> file must be treated as potentially multiple virtual files.</p><p>Different build tools have different mechanisms for handling virtual files. You should pass a function that returns a virtual path that can be handled by your build tool.</p><h5 id=example-based-on-markowebpackloader><a name=example-based-on-markowebpackloader class=anchor href=#example-based-on-markowebpackloader><span class=header-link></span></a>Example based on <code>@marko/webpack/loader</code>:</h5><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#8F8F9E>// lookup is shared between resolveVirtualDependency and markoLoader</span>
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>virtualSources</span> <span style=color:#FFFFFF>=</span> <span style=color:#FF4185>new</span> <span style=color:#A6E22E>Map</span>();
<span style=color:#66D9EF>function</span> <span style=color:#A6E22E>resolveVirtualDependency</span>(<span style=color:#FFAC4D>filename</span>, { <span style=color:#FFAC4D>virtualPath</span>, <span style=color:#FFAC4D>code</span>, <span style=color:#FFAC4D>map</span> }) {
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>virtualFilename</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>`</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>filename</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>?virtual=</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>virtualPath</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>`</span>;
<span style=color:#8F8F9E>// Add virtual source to the lookup to be later accessed by the loader</span>
<span style=color:#FFFFFF>virtualSources</span>.<span style=color:#A6E22E>set</span>(<span style=color:#FFFFFF>virtualFilename</span>, { <span style=color:#FFFFFF>code</span>, <span style=color:#FFFFFF>map</span> });
<span style=color:#8F8F9E>// Generate the webpack path, from right to left...</span>
<span style=color:#8F8F9E>// 1. Pass the virtualFilename so webpack can find the real file</span>
<span style=color:#8F8F9E>// located at sourceFilename, but the virtualPath is also present</span>
<span style=color:#8F8F9E>// (eg. "./index.marko?virtual=./index.marko.css")</span>
<span style=color:#8F8F9E>// 2. Use an inline loader to run this file through @marko/webpack/loader</span>
<span style=color:#8F8F9E>// https://webpack.js.org/concepts/loaders/#inline</span>
<span style=color:#8F8F9E>// 3. Use an inline matchResource to redefine this as the virtualPath</span>
<span style=color:#8F8F9E>// which allows the appropriate loaders to match the virtual dependency</span>
<span style=color:#8F8F9E>// https://webpack.js.org/api/loaders/#inline-matchresource</span>
<span style=color:#FF4185>return</span> <span style=color:#FFF066>`</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>virtualPath</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>!=!@marko/webpack/loader!</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>virtualFilename</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>`</span>;
}
<span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> <span style=color:#66D9EF>function</span> <span style=color:#A6E22E>markoLoader</span>(<span style=color:#FFAC4D>source</span>) {
<span style=color:#66D9EF>let</span> <span style=color:#FFFFFF>code</span>, <span style=color:#FFFFFF>map</span>;
<span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>virtualSources</span>.<span style=color:#A6E22E>has</span>(<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>resource</span>)) {
<span style=color:#8F8F9E>// If the resource has a ?virtual query param, we should</span>
<span style=color:#8F8F9E>// find it in the lookup and then return the virtual code</span>
<span style=color:#8F8F9E>// rather than performing the normal compilation</span>
{ <span style=color:#FFFFFF>code</span>, <span style=color:#FFFFFF>map</span> } <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>virtualSources</span>.<span style=color:#A6E22E>get</span>(<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>resource</span>);
<span style=color:#FFFFFF>virtualSources</span>.<span style=color:#A6E22E>delete</span>(<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>resource</span>);
} <span style=color:#FF4185>else</span> {
<span style=color:#8F8F9E>// The default behavior is to compile the template in dom output mode</span>
{ <span style=color:#FFFFFF>code</span>, <span style=color:#FFFFFF>map</span> } <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>markoCompiler</span>.<span style=color:#A6E22E>compileSync</span>(<span style=color:#FFFFFF>source</span>, <span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>resourcePath</span>, {
output: <span style=color:#FFF066>"dom"</span>,
<span style=color:#FFFFFF>resolveVirtualDependency</span>
});
}
<span style=color:#FF4185>return</span> <span style=color:#FFFFFF>this</span>.<span style=color:#A6E22E>callback</span>(<span style=color:#AE81FF>null</span>, <span style=color:#FFFFFF>code</span>, <span style=color:#FFFFFF>map</span>);
}
</pre><h4 id=hydrateincludeimports><a name=hydrateincludeimports class=anchor href=#hydrateincludeimports><span class=header-link></span></a><code>hydrateIncludeImports</code></h4><p>This option is only used for <code>output: "hydrate"</code>. By default, <code>import</code>s in server-only files are not included in the hydrate output. However, for some assets, like stylesheets, it is useful to have them included in hydrate mode.</p><p>The <code>hydrateIncludeImports</code> option allows you to provide a function which receives an import path, or a regexp to match against that path which tells Marko to include that import in the hydrate mode output.</p><p>The default regexp includes a list of common known asset file extensions, and is as follows:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFF066>/</span><span style=color:#AE81FF>\.</span><span style=color:#FFF066>(css</span><span style=color:#FF4185>|</span><span style=color:#FFF066>less</span><span style=color:#FF4185>|</span><span style=color:#FFF066>s</span><span style=color:#AE81FF>[ac]</span><span style=color:#FFF066>ss</span><span style=color:#FF4185>|</span><span style=color:#FFF066>styl</span><span style=color:#FF4185>|</span><span style=color:#FFF066>png</span><span style=color:#FF4185>|</span><span style=color:#FFF066>jpe</span><span style=color:#FF4185>?</span><span style=color:#FFF066>g</span><span style=color:#FF4185>|</span><span style=color:#FFF066>gif</span><span style=color:#FF4185>|</span><span style=color:#FFF066>svg</span><span style=color:#FF4185>|</span><span style=color:#FFF066>ico</span><span style=color:#FF4185>|</span><span style=color:#FFF066>webp</span><span style=color:#FF4185>|</span><span style=color:#FFF066>avif</span><span style=color:#FF4185>|</span><span style=color:#FFF066>mp4</span><span style=color:#FF4185>|</span><span style=color:#FFF066>webm</span><span style=color:#FF4185>|</span><span style=color:#FFF066>ogg</span><span style=color:#FF4185>|</span><span style=color:#FFF066>mp3</span><span style=color:#FF4185>|</span><span style=color:#FFF066>wav</span><span style=color:#FF4185>|</span><span style=color:#FFF066>flac</span><span style=color:#FF4185>|</span><span style=color:#FFF066>aac</span><span style=color:#FF4185>|</span><span style=color:#FFF066>woff2</span><span style=color:#FF4185>?|</span><span style=color:#FFF066>eot</span><span style=color:#FF4185>|</span><span style=color:#AE81FF>[ot]</span><span style=color:#FFF066>tf)</span><span style=color:#FF4185>$</span><span style=color:#FFF066>/</span>;
</pre><p>Looking at a partial Marko file such as:</p><!--M#s0-1-0-17-4-279--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-279 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFF066>"./bar"</span>
<span style=color:#FF4185>import</span> <span style=color:#FFF066>"./foo.css"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFF066>"./baz.wasm"</span>;
<<span style=color:#FF4185>div</span>/>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFF066>"./bar"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFF066>"./foo.css"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFF066>"./baz.wasm"</span>;
<span style=color:#FF4185>div</span>
</pre></div></div><!--M/--><p>For <code>hydrate</code> output, with the default <code>hydrateIncludeImports</code>, would only cause <code>./foo.css</code> to be loaded in the browser.</p><h4 id=hydrateinit><a name=hydrateinit class=anchor href=#hydrateinit><span class=header-link></span></a><code>hydrateInit</code></h4><p>This option is only used for <code>output: "hydrate"</code>. It defaults to <code>true</code> and causes the hydrate output to include code which tells the Marko runtime to begin hydrating any registered components.</p><p>Setting to false will disable that <code>init</code> call and allow you to generate code which <em>just</em> imports any hydrate dependencies for a template.</p><h4 id=cache><a name=cache class=anchor href=#cache><span class=header-link></span></a><code>cache</code></h4><p>Type: typeof <a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map><code>Map</code></a> (specifically, <code>.get()</code> is required)<br> Default: <code>new Map()</code></p><p>Compiling a Marko template may require other (used) Marko templates to compile. To prevent compiling templates more than once, most of the compilation is cached.</p><p>The default cache strategy is to clear the cache each macrotask. If the default cache is overwritten, it is up to the user to determine when the cache is cleared.</p><h4 id=babelconfig><a name=babelconfig class=anchor href=#babelconfig><span class=header-link></span></a><code>babelConfig</code></h4><p>Type: see <a href=https://babeljs.io/docs/en/options>babel options</a><br> Default: babel defaults, plus</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034>{
<span style=color:#FFFFFF>filename</span>,
sourceType: <span style=color:#FFF066>"module"</span>,
sourceMaps: <span style=color:#FFFFFF>config</span>.<span style=color:#FFFFFF>sourceMaps</span>
}
</pre><h4 id=translator><a name=translator class=anchor href=#translator><span class=header-link></span></a><code>translator</code></h4><p>Type: <code>{ analyze: Visitor, transform:Visitor }</code><br> Default: <a href=https://github.com/marko-js/marko/blob/0f212897d2d3ec30b12c2f18ba950818bccb83b4/packages/compiler/src/config.js#L46-L89>autodiscovers</a> a translator package starting with <code>@marko/translator-</code> or <code>marko-translator-</code></p><p>The translator is a collection of transforms that translates the Marko AST into a valid JavaScript AST based on the <code>output</code> option. There is a default translator in Marko, but this option may be used to switch to experimental translators for alternate runtimes.</p><p>The translator is an object with <code>analyze</code> and <code>transform</code> <a href=https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#visitors>Babel Visitors</a>:</p><ul><li>The result of the <code>analyze</code> visitor is cached and may be requested by other templates.</li><li>The <code>transform</code> visitor transforms the AST to its final JavaScript AST.</li></ul><p>See <a href=https://github.com/marko-js/marko/blob/11a10f82cdb5389880e6deca5f77d17727acb831/packages/translator-default/src/index.js><code>@marko/translator-default</code></a> for a reference implementation.</p><h2 id=hooks><a name=hooks class=anchor href=#hooks><span class=header-link></span></a>Hooks</h2><blockquote class=null><p><strong>Note</strong>: These compiler hooks aren’t terribly stable either. Using hooks for one-time migrations, like a codemod, is the best-supported way to use the compiler hooks, since you won’t have to worry about the code changing underneath you in the future.</p></blockquote><p><img src=/assets/e6d9b930.png alt="1. Parse (angle bracket source code) 2. Migrate (old Marko to new Marko) 3. Transform (objects to different objects) 4. Translate (Marko to JavaScript.)" style=max-width:100%></p><p>The Marko compiler runs a series of stages to produce its final JavaScript output. These stages handle different steps of template processing, and can be tweaked, extended, and hooked into with <a href="/docs/marko-json/"><code>marko.json</code> configuration files</a>.</p><ul><li><p>All compiler hooks must have a default export of a <a href=https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#toc-visitors>Babel-style visitor function</a>, which will receive a <a href=https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#paths>babel <code>NodePath</code></a> with a <code>MarkoTag</code> node.</p></li><li><p>Hooks will also receive a <code>types</code> object that matches the <a href=https://babeljs.io/docs/en/babel-types><code>@babel/types</code></a> API extended with the <a href=#marko-ast>Marko AST types</a>. (You may also reference the types by importing <code>{ types } from "@marko/compiler"</code>.)</p></li><li><p>Hooks may alternatively export an <code>enter</code> function (alias of <code>default</code>), and optionally an <code>exit</code> function. These map to <a href=https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#babel-traverse><code>@babel/traverse</code>’s <code>enter</code> and <code>exit</code> methods</a>.</p></li></ul><p>Here is an example hook:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> (<span style=color:#FFAC4D>tag</span>, <span style=color:#FFAC4D>types</span>) <span style=color:#66D9EF>=></span> {
<span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>types</span>.<span style=color:#A6E22E>isStringLiteral</span>(<span style=color:#FFFFFF>tag</span>.<span style=color:#FFFFFF>node</span>.<span style=color:#FFFFFF>name</span>)) {
<span style=color:#FFFFFF>console</span>.<span style=color:#A6E22E>log</span>(<span style=color:#FFF066>`Found a tag called </span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>tag</span><span style=color:#FFF066>.</span><span style=color:#FFFFFF>node</span><span style=color:#FFF066>.</span><span style=color:#FFFFFF>name</span><span style=color:#FFF066>.</span><span style=color:#FFFFFF>value</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>`</span>);
<span style=color:#FFFFFF>tag</span>.<span style=color:#A6E22E>remove</span>();
}
};
</pre><h3 id=parse><a name=parse class=anchor href=#parse><span class=header-link></span></a>Parse</h3><p>Marko compilation starts by converting the raw text of your Marko template into an <a href=https://en.wikipedia.org/wiki/Abstract_syntax_tree>AST (Abstract Syntax Tree)</a> — an object representation of your code.</p><!--M#s0-1-0-17-4-377--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-377 false"}' title="Switch Syntax" class=switch-syntax>⇄</button><div class="code html"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>h1</span>>Hello!</<span style=color:#FF4185>h1</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>h1</span> -- Hello!
</pre></div></div><!--M/--><p>…will roughly become:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034>{
<span style=color:#FFF066>"type"</span>: <span style=color:#FFF066>"MarkoTag"</span>,
<span style=color:#FFF066>"name"</span>: {
<span style=color:#FFF066>"type"</span>: <span style=color:#FFF066>"StringLiteral"</span>,
<span style=color:#FFF066>"value"</span>: <span style=color:#FFF066>"h1"</span>
},
<span style=color:#FFF066>"body"</span>: {
<span style=color:#FFF066>"type"</span>: <span style=color:#FFF066>"MarkoTagBody"</span>,
<span style=color:#FFF066>"body"</span>: [
{
<span style=color:#FFF066>"type"</span>: <span style=color:#FFF066>"MarkoText"</span>,
<span style=color:#FFF066>"value"</span>: <span style=color:#FFF066>"Hello!"</span>
}
]
}
}
</pre><p>This might look a bit verbose, but ASTs aim for completeness, not terseness.</p><p>Marko parses in two steps to stay flexible with the ever-changing syntax of JavaScript:</p><ol><li><p>The first parsing pass happens in our <a href=https://github.com/marko-js/htmljs-parser><code>htmljs-parser</code></a>, which understands the HTML and HTML-like parts of your template.</p></li><li><p>For JavaScript expressions, Marko defers to <a href=https://babeljs.io/docs/en/babel-parser><code>@babel/parser</code></a>. The resulting <a href=#marko-ast>Marko AST</a> is a superset of what <code>@babel/parser</code> would return.</p></li></ol><p>To hook into the <code>parse</code> stage, use <a href=/docs/marko-json/#paths>the <code>parse</code> option in the <code>marko.json</code> file</a>.</p><blockquote class=null><p><strong>Note</strong>: The <code>parse</code> hook deviates from the other compiler hooks:</p><ul><li>It does not support the <code>enter</code> & <code>exit</code> API.</li><li>You <em>must return</em> a replacement AST node.</li></ul></blockquote><h3 id=migrate><a name=migrate class=anchor href=#migrate><span class=header-link></span></a>Migrate</h3><p>That’s right, Marko has <em>first-class</em> support for migrations. The <strong>migration stage</strong> can translate outdated APIs into modern counterparts, leaving the rest of the compilation none the wiser.</p><p>Migrations run automatically in the background, and can be written to disk when users are ready by running the <a href=https://github.com/marko-js/cli/blob/master/packages/migrate/README.md><code>@marko/migrate</code> CLI command</a>.</p><p>To hook into the <code>migrate</code> stage, <a href=/docs/marko-json/#paths>use the <code>migrate</code> option in the <code>marko.json</code> file</a>.</p><blockquote class=note><p><strong>Note:</strong> To make the compiler stop at this point and output the migrated template, rather than continuing to produce the JavaScript output, <a href=#output>set <code>output: "migrate"</code></a> in the <a href=#options>compilation options</a>.</p></blockquote><h3 id=transform><a name=transform class=anchor href=#transform><span class=header-link></span></a>Transform</h3><p>The <strong>transform stage</strong> is meant for userland transformations of Marko code into different Marko code. Think of it like <a href=https://babeljs.io/docs/en/babel-core#transform><code>babel.transform</code></a> for Marko templates. At this stage, you are given a fully parsed and migrated AST to do what you will with.</p><p>To hook into the <code>transform</code> stage, <a href=/docs/marko-json/#paths>use the <code>transform</code> option in the <code>marko.json</code> file</a>.</p><h3 id=analyze><a name=analyze class=anchor href=#analyze><span class=header-link></span></a>Analyze</h3><p>Next is the <strong>analyze stage</strong>, intended for non-mutative analysis of the entire AST in a way that can be cached in RAM.</p><blockquote class=null><p><strong>Note</strong>: “Non-mutative analysis” means that if you modify the AST during this stage, <em>you’ll probably regret it</em> someday.</p></blockquote><p>Metadata should be stored on nodes’ <code>.extra</code> property. These <code>.extra</code> properties are typically read in <a href=#translate>the translate stage</a>, or when using the child template analysis helpers.</p><p>To hook into the <code>analyze</code> stage, <a href=/docs/marko-json/#paths>use the <code>analyze</code> option in the <code>marko.json</code> file</a>.</p><h3 id=translate><a name=translate class=anchor href=#translate><span class=header-link></span></a>Translate</h3><p>Finally, we have the <strong>translation stage</strong>. This stage is Marko’s “Rosetta Stone”, and is responsible for turning your beautiful <code>.marko</code> code into different versions of optimized JavaScript you’d rather not write yourself.</p><p>To hook into the <code>translate</code> stage, <a href=/docs/marko-json/#paths>use the <code>translate</code> option in the <code>marko.json</code> file</a>.</p><h2 id=utilities><a name=utilities class=anchor href=#utilities><span class=header-link></span></a>Utilities</h2><p><a href=https://github.com/marko-js/marko/tree/master/packages/babel-utils/index.d.ts>The <code>@marko/babel-utils</code> package</a> exposes a handful of utilities for various tasks on <a href=#marko-ast>Marko ASTs</a>.</p><h3 id=marko-ast><a name=marko-ast class=anchor href=#marko-ast><span class=header-link></span></a>Marko AST</h3><p>Marko extends Babel’s AST types to add nodes for <code>MarkoTag</code>, <code>MarkoAttribute</code>, etc.</p><p>For AST creation and assertion utilities, you can import Marko’s <code>@babel/types</code> superset from the compiler package:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> { <span style=color:#FFFFFF>types</span> } <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/compiler"</span>;
</pre><p>The <a href=https://babeljs.io/docs/en/babel-types><code>@babel/types</code> documentation</a> shows all utility methods available for Babel AST nodes. When importing <code>types</code> from <code>@marko/compiler</code>, you also get the same types of utilities for Marko nodes: <code>types.markoTag</code>, <code>types.isMarkoTag</code>, <code>types.assertMarkoTag</code>, and so on.</p><p>For full definitions, view the source code for Babel and Marko:</p><ul><li><a href=https://github.com/babel/babel/blob/master/packages/babel-types/src/definitions/core.js>Babel’s Core Definitions</a></li><li><a href=https://github.com/babel/babel/tree/master/packages/babel-types/src/definitions>Babel’s Extended Definitions</a></li><li><a href=https://github.com/marko-js/marko/blob/main/packages/compiler/src/babel-types/types/definitions.js>Marko’s Definitions</a></li></ul><a href="https://github.com/marko-js/marko/blob/main/packages/marko/docs/compiler.md" class=edit-on-github>EDIT <img alt="on GitHub" src=/assets/0bc571bc.svg></a><h2 id=contributors><a name=contributors class=anchor href=#contributors><span class=header-link></span></a> Contributors</h2><p>Helpful? You can thank these awesome people! You can also <a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/compiler.md>edit this doc</a> if you see any issues or want to improve it.</p><div class=contributors><a href=https://github.com/DylanPiercey class=contributor><img src=https://avatars.githubusercontent.com/u/4985201?v=4 alt class=photo><span class=name>DylanPiercey</span></a><a href=https://github.com/mlrawlings class=contributor><img src=https://avatars.githubusercontent.com/u/1958812?v=4 alt class=photo><span class=name>mlrawlings</span></a><a href=https://github.com/tigt class=contributor><img src=https://avatars.githubusercontent.com/u/8072522?v=4 alt class=photo><span class=name>tigt</span></a><a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/compiler.md class="contributor you"><div class=photo><span class=icon>+</span></div><span class=name>You?</span></a></div><footer class="site-footer doc-footer"><a href="https://openjsf.org/" class=openjsf><img src=/assets/6876aea9.svg alt> <span><span class=bold>OpenJS</span> <span class=light>Foundation</span></span></a><div class=separator></div><a href=https://github.com/marko-js/marko/blob/main/LICENSE class=osi><img src=/assets/1b70b500.svg alt> MIT License</a><div class=separator></div><a href=https://github.com/eBay class=ebay><img src=/assets/339b8a9e.svg alt=eBay> open source</a></footer></div></div></div></main><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66854919-1', 'markojs.com');
ga('send', 'pageview');
</script><a href=https://discord.gg/marko target=_blank class=discord-button><img src=/assets/78800ea4.svg alt="Chat in Marko's Discord Server"></a><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-1-0-14",0,{}],["s0-1-0-14-12",1,{}],["s0-1-0-15",2,{"currentDoc":"compiler"}],["s0-1-0-15-9",3,{}],["s0-1-0-17-4-279",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import\u003C/span> <span style=color:#FFF066>\"./bar\"\u003C/span>\n<span style=color:#FF4185>import\u003C/span> <span style=color:#FFF066>\"./foo.css\"\u003C/span>;\n<span style=color:#FF4185>import\u003C/span> <span style=color:#FFF066>\"./baz.wasm\"\u003C/span>;\n\n<<span style=color:#FF4185>div\u003C/span>/>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import\u003C/span> <span style=color:#FFF066>\"./bar\"\u003C/span>;\n<span style=color:#FF4185>import\u003C/span> <span style=color:#FFF066>\"./foo.css\"\u003C/span>;\n<span style=color:#FF4185>import\u003C/span> <span style=color:#FFF066>\"./baz.wasm\"\u003C/span>;\n\n<span style=color:#FF4185>div\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-377",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>h1\u003C/span>>Hello!</<span style=color:#FF4185>h1\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>h1\u003C/span> -- Hello!\n\u003C/pre>"}]],"t":["IZr$9Bl","uja7Vjk","G0dDyNr","wIkyy5p","x0AuQwk"]})</script></body></html>