-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
278 lines (259 loc) · 50.8 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!doctype html><html lang=en><head><meta charset=UTF-8><title>Marko + Rollup | 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.6fc1b285.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 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 class=selected 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=marko-rollup><a name=marko-rollup class=anchor href=#marko-rollup><span class=header-link></span></a>Marko + Rollup</h1><p>This is Marko’s official integration plugin for <a href="https://rollupjs.org/">the Rollup bundler</a>.</p><h2 id=installation><a name=installation class=anchor href=#installation><span class=header-link></span></a>Installation</h2><script>if(localStorage.getItem('markojs-website:syntax') === 'concise'){document.body.classList.add('concise')}</script><pre class=highlighted style=color:#D0D0E0;background-color:#202034>npm install --save-dev \
@marko/rollup \
rollup \
@rollup/plugin-node-resolve \
@rollup/plugin-commonjs
</pre><blockquote class=null><p><strong>Note</strong>: The Marko runtime is CommonJS, so don’t forget the <code>@rollup/plugin-commonjs</code> package!</p></blockquote><h2 id=configuration><a name=configuration class=anchor href=#configuration><span class=header-link></span></a>Configuration</h2><p><code>@marko/rollup</code> exports two methods for use in <a href=https://rollupjs.org/guide/en/#configuration-files>Rollup configuration files</a>: <code>.browser()</code> and <code>.server()</code>.</p><p>You <em>probably</em> want to use both, since that’ll get you…</p><ul><li>Automatic <a href=https://rollupjs.org/guide/en/#input><code>input</code> entrypoint configuration</a> for route-based bundle splitting</li><li>Complete control over asset loading with <a href=#rollup-tag>the <code><rollup></code> tag</a></li><li>The strengths behind why Marko exists in the first place: cooperation between servers and browsers for high performance in both</li></ul><blockquote class=null><p><strong>ProTip</strong>: You <em>could</em> use only <code>.browser()</code> or only <code>.server()</code> to build a completely client-side-rendered or server-side-rendered app. That would be a little odd, but you could.</p></blockquote><h3 id=config-example><a name=config-example class=anchor href=#config-example><span class=header-link></span></a>Config example</h3><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> <span style=color:#FFFFFF>nodeResolve</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-node-resolve"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>commonjs</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-commonjs"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>marko</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/rollup"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>sharedPlugins</span> <span style=color:#FFFFFF>=</span> [
<span style=color:#A6E22E>commonjs</span>({
extensions: [<span style=color:#FFF066>".js"</span>, <span style=color:#FFF066>".marko"</span>]
}),
<span style=color:#8F8F9E>// If using Marko’s `style {}` blocks, you’ll need an appropriate plugin, like npmjs.com/rollup-plugin-postcss</span>
<span style=color:#A6E22E>postcss</span>({ external: <span style=color:#AE81FF>true</span> })
]
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>serverAssetsConfig</span> <span style=color:#FFFFFF>=</span> {
input: <span style=color:#FFF066>"src/start-server.js"</span>,
plugins: [
<span style=color:#FFFFFF>marko</span>.<span style=color:#A6E22E>server</span>(),
<span style=color:#A6E22E>nodeResolve</span>({ preferBuiltins: <span style=color:#AE81FF>true</span> })
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>sharedPlugins</span>
]
};
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>browsersAssetsConfig</span> <span style=color:#FFFFFF>=</span> {
plugins: [
<span style=color:#FFFFFF>marko</span>.<span style=color:#A6E22E>browser</span>(),
<span style=color:#A6E22E>nodeResolve</span>({ browser: <span style=color:#AE81FF>true</span> })
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>sharedPlugins</span>
]
};
<span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> [<span style=color:#FFFFFF>serverAssetsConfig</span>, <span style=color:#FFFFFF>browsersAssetsConfig</span>];
</pre><h3 id=advanced-config-example><a name=advanced-config-example class=anchor href=#advanced-config-example><span class=header-link></span></a>Advanced config example</h3><p>The following configuration file is long and hairy, which may be upsetting to some viewers. However, it does show how to accomplish the following:</p><ul><li>Support for Rollup’s watch mode</li><li>A bundle analyzer</li><li>The ability to <code>import</code> JSON files to use their data</li><li>The ability to <code>import</code> image files to use their asset URLs for <code>img[src]</code> and such</li><li>Dead-code elimination for development-only code</li><li>Static compression of assets for something like <a href=https://nginx.org/en/docs/http/ngx_http_gzip_static_module.html>NGiNX’s <code>gzip_static</code></a></li><li>A CSS preprocessor (Sass, in this case)</li><li>Browserslist to automatically configure:<ul><li>Babel for JS transpilation</li><li>Autoprefixer for CSS transpilation</li></ul></li></ul><details><summary>Big ugly production-esque Rollup config</summary><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>import</span> { <span style=color:#FFFFFF>builtinModules</span> } <span style=color:#FF4185>from</span> <span style=color:#FFF066>"module"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>path</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"path"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>autoprefixer</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"autoprefixer"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>babelPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-babel"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>commonjsPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-commonjs"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>jsonPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-json"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>markoPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@marko/rollup"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>nodeResolvePlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-node-resolve"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>replacePlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-replace"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>runPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-run"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>stylesPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"rollup-plugin-styles"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>urlPlugin</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"@rollup/plugin-url"</span>;
<span style=color:#FF4185>import</span> <span style=color:#FFFFFF>pkg</span> <span style=color:#FF4185>from</span> <span style=color:#FFF066>"./package.json"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>__DEV__</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>process</span>.<span style=color:#FFFFFF>env</span>.<span style=color:#FFFFFF>NODE_ENV</span> <span style=color:#FF4185>===</span> <span style=color:#FFF066>"development"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>__PROD__</span> <span style=color:#FFFFFF>=</span> <span style=color:#FF4185>!</span><span style=color:#FFFFFF>__DEV__</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>isWatch</span> <span style=color:#FFFFFF>=</span> <span style=color:#A6E22E>Boolean</span>(<span style=color:#FFFFFF>process</span>.<span style=color:#FFFFFF>env</span>.<span style=color:#FFFFFF>ROLLUP_WATCH</span>);
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>publicPath</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>"/s/"</span>; <span style=color:#8F8F9E>// Guess what character is only 5 bits under HPACK</span>
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>assetFileNames</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>"[name]-[hash][extname]"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>externalDependencies</span> <span style=color:#FFFFFF>=</span> [
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>Object</span>.<span style=color:#A6E22E>keys</span>(<span style=color:#FFFFFF>pkg</span>.<span style=color:#FFFFFF>dependencies</span>),
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>builtinModules</span>,
];
<span style=color:#FFFFFF>process</span>.<span style=color:#FFFFFF>env</span>.<span style=color:#FFFFFF>SASS_PATH</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>"./:./node_modules"</span>;
<span style=color:#FF4185>export</span> <span style=color:#FF4185>default</span> (<span style=color:#FF4185>async</span> () <span style=color:#66D9EF>=></span> [
<span style=color:#A6E22E>compiler</span>(<span style=color:#FFF066>"server"</span>, {
input: <span style=color:#FFF066>"index.js"</span>,
output: {
dir: <span style=color:#FFF066>"built/server/"</span>,
assetFileNames: <span style=color:#FFF066>`../browser/</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>assetFileNames</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>`</span>,
format: <span style=color:#FFF066>"cjs"</span>,
sourcemap: <span style=color:#AE81FF>true</span>,
},
<span style=color:#A6E22E>external</span>: (<span style=color:#FFAC4D>id</span>) <span style=color:#66D9EF>=></span>
<span style=color:#FFFFFF>externalDependencies</span>.<span style=color:#A6E22E>some</span>(
(<span style=color:#FFAC4D>dependency</span>) <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>id</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>dependency</span> <span style=color:#FF4185>||</span> <span style=color:#FFFFFF>id</span>.<span style=color:#A6E22E>startsWith</span>(<span style=color:#FFFFFF>dependency</span> <span style=color:#FF4185>+</span> <span style=color:#FFF066>"/"</span>),
),
plugins: [<span style=color:#FFFFFF>isWatch</span> <span style=color:#FF4185>&&</span> <span style=color:#A6E22E>runPlugin</span>({ execArgv: [<span style=color:#FFF066>"--enable-source-maps"</span>] })],
}),
<span style=color:#A6E22E>compiler</span>(<span style=color:#FFF066>"browser"</span>, {
output: {
dir: <span style=color:#FFF066>"built/browser/"</span>,
chunkFileNames: <span style=color:#FFFFFF>__PROD__</span> <span style=color:#FF4185>?</span> <span style=color:#FFF066>"[name]-[hash].js"</span> <span style=color:#FF4185>:</span> <span style=color:#AE81FF>null</span>,
entryFileNames: <span style=color:#FFFFFF>__PROD__</span> <span style=color:#FF4185>?</span> <span style=color:#FFF066>"[name]-[hash].js"</span> <span style=color:#FF4185>:</span> <span style=color:#AE81FF>null</span>,
<span style=color:#FFFFFF>assetFileNames</span>,
sourcemap: <span style=color:#AE81FF>true</span>,
sourcemapExcludeSources: <span style=color:#FFFFFF>__PROD__</span>,
},
plugins: [
<span style=color:#A6E22E>stylesPlugin</span>({
mode: <span style=color:#FFF066>"extract"</span>,
sourceMap: <span style=color:#AE81FF>true</span>,
config: {
target: <span style=color:#FFF066>"browserslist:css"</span>,
plugins: [<span style=color:#A6E22E>autoprefixer</span>({ env: <span style=color:#FFF066>"css"</span> })],
},
minimize: <span style=color:#FFFFFF>__PROD__</span>,
url: {
<span style=color:#FFFFFF>publicPath</span>,
hash: <span style=color:#FFFFFF>assetFileNames</span>,
},
}),
<span style=color:#FFFFFF>__PROD__</span> <span style=color:#FF4185>&&</span> (<span style=color:#FF4185>await</span> <span style=color:#FF4185>import</span>(<span style=color:#FFF066>"rollup-plugin-terser"</span>)).<span style=color:#A6E22E>terser</span>(),
<span style=color:#FFFFFF>__PROD__</span> <span style=color:#FF4185>&&</span>
(<span style=color:#FF4185>await</span> <span style=color:#FF4185>import</span>(<span style=color:#FFF066>"rollup-plugin-gzip"</span>)).<span style=color:#A6E22E>default</span>({
filter:<span style=color:#FFF066> /</span><span style=color:#AE81FF>\.</span><span style=color:#FFF066>(?:js</span><span style=color:#FF4185>|</span><span style=color:#FFF066>css</span><span style=color:#FF4185>|</span><span style=color:#FFF066>svg</span><span style=color:#FF4185>|</span><span style=color:#FFF066>json</span><span style=color:#FF4185>|</span><span style=color:#FFF066>xml</span><span style=color:#FF4185>|</span><span style=color:#FFF066>txt)</span><span style=color:#FF4185>$</span><span style=color:#FFF066>/</span>,
minSize: <span style=color:#AE81FF>1024</span>,
gzipOptions: {
level: <span style=color:#AE81FF>9</span>,
memLevel: <span style=color:#AE81FF>9</span>,
},
}),
<span style=color:#FFFFFF>__PROD__</span> <span style=color:#FF4185>&&</span>
<span style=color:#FF4185>!</span><span style=color:#FFFFFF>isWatch</span> <span style=color:#FF4185>&&</span>
(<span style=color:#FF4185>await</span> <span style=color:#FF4185>import</span>(<span style=color:#FFF066>"rollup-plugin-visualizer"</span>)).<span style=color:#A6E22E>default</span>(),
<span style=color:#FFFFFF>__PROD__</span> <span style=color:#FF4185>&&</span>
<span style=color:#FF4185>!</span><span style=color:#FFFFFF>isWatch</span> <span style=color:#FF4185>&&</span> {
name: <span style=color:#FFF066>"bundle-visualizer-location"</span>,
<span style=color:#A6E22E>writeBundle</span>() {
<span style=color:#FFFFFF>console</span>.<span style=color:#A6E22E>info</span>(
<span style=color:#FFF066>`📊 Bundle visualizer at </span><span style=color:#AE81FF>\x1b</span><span style=color:#FFF066>[4;36mfile://</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>path</span><span style=color:#FFF066>.</span><span style=color:#A6E22E>join</span><span style=color:#FFF066>(</span>
<span style=color:#FFF066> </span><span style=color:#FFFFFF>__dirname</span><span style=color:#FFF066>,</span>
<span style=color:#FFF066> </span><span style=color:#FFF066>"../../"</span><span style=color:#FFF066>,</span>
<span style=color:#FFF066> </span><span style=color:#FFFFFF>bundleAnalyzerFilename</span><span style=color:#FFF066>,</span>
<span style=color:#FFF066> )</span><span style=color:#66D9EF>}</span><span style=color:#AE81FF>\x1b</span><span style=color:#FFF066>[0m`</span>,
);
},
},
],
}),
])();
<span style=color:#66D9EF>function</span> <span style=color:#A6E22E>compiler</span>(<span style=color:#FFAC4D>target</span>, <span style=color:#FFAC4D>config</span>) {
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>isBrowser</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>target</span> <span style=color:#FF4185>===</span> <span style=color:#FFF066>"browser"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>browserslistEnv</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>isBrowser</span> <span style=color:#FF4185>?</span> <span style=color:#FFF066>"js"</span> <span style=color:#FF4185>:</span> <span style=color:#FFF066>"server"</span>;
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>babelConfig</span> <span style=color:#FFFFFF>=</span> {
comments: <span style=color:#AE81FF>false</span>,
<span style=color:#FFFFFF>browserslistEnv</span>,
compact: <span style=color:#AE81FF>false</span>,
babelrc: <span style=color:#AE81FF>false</span>,
caller: { <span style=color:#FFFFFF>target</span> },
};
<span style=color:#FF4185>if</span> (<span style=color:#FFFFFF>isBrowser</span>) {
<span style=color:#FFFFFF>babelConfig</span>.<span style=color:#FFFFFF>presets</span> <span style=color:#FFFFFF>=</span> [
[
<span style=color:#FFF066>"@babel/preset-env"</span>,
{
<span style=color:#FFFFFF>browserslistEnv</span>,
bugfixes: <span style=color:#AE81FF>true</span>,
},
],
];
}
<span style=color:#FF4185>return</span> {
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>config</span>,
preserveEntrySignatures: <span style=color:#AE81FF>false</span>,
plugins: [
<span style=color:#FFFFFF>markoPlugin</span>[<span style=color:#FFFFFF>target</span>]({ <span style=color:#FFFFFF>babelConfig</span> }),
<span style=color:#A6E22E>nodeResolvePlugin</span>({
browser: <span style=color:#FFFFFF>isBrowser</span>,
preferBuiltins: <span style=color:#FF4185>!</span><span style=color:#FFFFFF>isBrowser</span>,
}),
<span style=color:#A6E22E>commonjsPlugin</span>(),
<span style=color:#A6E22E>replacePlugin</span>({
preventAssignment: <span style=color:#AE81FF>true</span>,
values: { <span style=color:#FFFFFF>__DEV__</span>, <span style=color:#FFFFFF>__PROD__</span> },
}),
<span style=color:#A6E22E>babelPlugin</span>({
babelHelpers: <span style=color:#FFF066>"bundled"</span>,
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>babelConfig</span>,
}),
<span style=color:#A6E22E>jsonPlugin</span>(),
<span style=color:#A6E22E>urlPlugin</span>({
<span style=color:#FFFFFF>publicPath</span>,
destDir: <span style=color:#FFF066>"built/browser/"</span>,
fileName: <span style=color:#FFFFFF>assetFileNames</span>,
include: <span style=color:#FFF066>"**/*.{svg,png,jpg,jpeg}"</span>,
limit: <span style=color:#AE81FF>0</span>, <span style=color:#8F8F9E>// Never Base64 & inline</span>
emitFiles: <span style=color:#FF4185>!</span><span style=color:#FFFFFF>isBrowser</span>,
}),
<span style=color:#FF4185>...</span><span style=color:#FFFFFF>config</span>.<span style=color:#FFFFFF>plugins</span>,
],
};
}
</pre></details><h2 id=rollup-tag><a name=rollup-tag class=anchor href=#rollup-tag><span class=header-link></span></a><code><rollup></code> tag</h2><p>Using both <code>.server()</code> and <code>.browser()</code> enables <strong>the <code><rollup></code> tag</strong>, which gives you complete control over how your app loads assets. That lets you do things like:</p><ul><li><a href="https://web.dev/extract-critical-css/">Critical CSS</a> for components as they write out within a kB budget, or <a href=https://jakearchibald.com/2016/link-in-body/#a-simpler-better-way>as components first appear on the page</a>, or any other style-loading mad science</li><li><a href="https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/"><code>module</code>/<code>nomodule</code> scripts</a> for smaller bundles in modern browsers</li><li><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce>Content-Security Policy <code>nonce</code>s</a> or <a href=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity>Subresource <code>integrity</code> hashes</a></li><li>Anything a web page can do, really. You can even combine <code><rollup></code> with <a href=#optionsserialize>the <code>serialize</code> option</a> to be as fancy as you wanna be.</li></ul><p>The <code><rollup></code> tag provides two <a href=/docs/syntax/#parameters>tag parameters</a>:</p><ol><li><p><code>entry</code> is the generated <code>input</code> string that the <code>server</code> plugin gave to the <code>browser</code> plugin. You can use it to find the corresponding entry chunk from Rollup’s <code>output</code> (the next parameter).</p></li><li><p><code>output</code> is an array of <code>AssetInfo | ChunkInfo</code> objects with most of <a href=https://rollupjs.org/guide/en/#generatebundle>the data returned from Rollup's <code>generateBundle</code> hook</a>. Some properties are omitted, like <code>code</code> and <code>map</code>, since they’re often too large to inline directly. However, each chunk also has a <code>size</code> property, to let you filter out empty chunks, inline code yourself below a certain size, or other delightful devilishness.</p></li></ol><p>For example, using the <code>entry</code> name and properties of <code>output</code> items to load scripts:</p><!--M#s0-1-0-17-4-112--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-112 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>head</span>>
<<span style=color:#FF4185>rollup</span>|<span style=color:#FFAC4D>entry</span>, <span style=color:#FFAC4D>output</span>|>
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>entryChunk</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>output</span>.<span style=color:#A6E22E>find</span>(<span style=color:#FFAC4D>chunk</span> <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>chunk</span>.<span style=color:#FFFFFF>name</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>entry</span>);
<<span style=color:#FF4185>if</span>(<span style=color:#FFFFFF>entryChunk</span>.<span style=color:#FFFFFF>size</span> <span style=color:#8F8F9E>/* only load non-empty JS entry points */</span>)>
<<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>fileName</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>entryChunk</span>.<span style=color:#FFFFFF>imports</span>>
<<span style=color:#FF4185>link</span> <span style=color:#A6E22E>rel</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"modulepreload"</span> <span style=color:#A6E22E>href</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>fileName</span> />
</<span style=color:#FF4185>for</span>>
<<span style=color:#FF4185>script</span> <span style=color:#A6E22E>async</span> <span style=color:#A6E22E>type</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"module"</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>entryChunk</span>.<span style=color:#FFFFFF>fileName</span>></<span style=color:#FF4185>script</span>>
</<span style=color:#FF4185>if</span>>
</<span style=color:#FF4185>rollup</span>>
</<span style=color:#FF4185>head</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>head</span>
<span style=color:#FF4185>rollup</span>|<span style=color:#FFAC4D>entry</span>, <span style=color:#FFAC4D>output</span>|
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>entryChunk</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>output</span>.<span style=color:#A6E22E>find</span>((<span style=color:#FFAC4D>chunk</span>) <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>chunk</span>.<span style=color:#FFFFFF>name</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>entry</span>);
<span style=color:#FF4185>if</span>(<span style=color:#FFFFFF>entryChunk</span>.<span style=color:#FFFFFF>size</span> <span style=color:#8F8F9E>/* only load non-empty JS entry points */</span>)
<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>fileName</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>entryChunk</span>.<span style=color:#FFFFFF>imports</span>
<span style=color:#FF4185>link</span> <span style=color:#A6E22E>rel</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"modulepreload"</span> <span style=color:#A6E22E>href</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>fileName</span>
<span style=color:#FF4185>script</span> <span style=color:#A6E22E>async</span> <span style=color:#A6E22E>type</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"module"</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>entryChunk</span>.<span style=color:#FFFFFF>fileName</span>
</pre></div></div><!--M/--><blockquote class=null><p><strong>Note</strong>: It’s up to you to transform the chunk data (also called the <strong>manifest</strong>) into <code><link></code>s, <code><script></code>s, and other HTML to load assets. Opting into complete control means we can’t do any of it for you.</p></blockquote><p>If your Rollup <code>browser</code> config contains multiple <code>output</code> options, or you have multiple <code>browser</code> configs, every <code>output</code>’s chunk is passed to the <code><rollup></code> tag.</p><p>For example, if you have both <code>esm</code> and <code>iife</code> build outputs configured:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034>{
output: [
{ dir: <span style=color:#FFF066>"dist/iife"</span>, format: <span style=color:#FFF066>"iife"</span> },
{ dir: <span style=color:#FFF066>"dist/esm"</span>, format: <span style=color:#FFF066>"esm"</span> },
];
}
</pre><p>…you could cross-reference assets from both…</p><!--M#s0-1-0-17-4-129--><div class=marko-code-block><button data-marko='{"onclick":"changeSyntax s0-1-0-17-4-129 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>rollup</span>|<span style=color:#FFAC4D>entry</span>, <span style=color:#FFAC4D>iifeOutput</span>, <span style=color:#FFAC4D>esmOutput</span>|>
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>iifeEntryChunk</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>iifeOutput</span>.<span style=color:#A6E22E>find</span>(<span style=color:#FFAC4D>chunk</span> <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>chunk</span>.<span style=color:#FFFFFF>name</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>entry</span>);
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>esmEntryChunk</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>esmOutput</span>.<span style=color:#A6E22E>find</span>(<span style=color:#FFAC4D>chunk</span> <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>chunk</span>.<span style=color:#FFFFFF>name</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>entry</span>);
<<span style=color:#FF4185>script</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>esmEntryChunk</span>.<span style=color:#FFFFFF>fileName</span> <span style=color:#A6E22E>type</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"module"</span> <span style=color:#A6E22E>async</span>></<span style=color:#FF4185>script</span>>
<<span style=color:#FF4185>script</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>iifeEntryChunk</span>.<span style=color:#FFFFFF>fileName</span> <span style=color:#A6E22E>nomodule</span> <span style=color:#A6E22E>async</span>></<span style=color:#FF4185>script</span>>
</<span style=color:#FF4185>rollup</span>>
</pre></div><div class="code concise"><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>rollup</span>|<span style=color:#FFAC4D>entry</span>, <span style=color:#FFAC4D>iifeOutput</span>, <span style=color:#FFAC4D>esmOutput</span>|
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>iifeEntryChunk</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>iifeOutput</span>.<span style=color:#A6E22E>find</span>((<span style=color:#FFAC4D>chunk</span>) <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>chunk</span>.<span style=color:#FFFFFF>name</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>entry</span>);
<span style=color:#FF4185>$</span> <span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>esmEntryChunk</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFFFFF>esmOutput</span>.<span style=color:#A6E22E>find</span>((<span style=color:#FFAC4D>chunk</span>) <span style=color:#66D9EF>=></span> <span style=color:#FFFFFF>chunk</span>.<span style=color:#FFFFFF>name</span> <span style=color:#FF4185>===</span> <span style=color:#FFFFFF>entry</span>);
<span style=color:#FF4185>script</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>esmEntryChunk</span>.<span style=color:#FFFFFF>fileName</span> <span style=color:#A6E22E>type</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>"module"</span> <span style=color:#A6E22E>async</span>
<span style=color:#FF4185>script</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>iifeEntryChunk</span>.<span style=color:#FFFFFF>fileName</span> <span style=color:#A6E22E>nomodule</span> <span style=color:#A6E22E>async</span>
</pre></div></div><!--M/--><p>…and <em>boom:</em> you now have <a href="https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/">a <code>module</code>/<code>nomodule</code> setup</a>.</p><h2 id=options><a name=options class=anchor href=#options><span class=header-link></span></a>Options</h2><h3 id=optionsbabelconfig><a name=optionsbabelconfig class=anchor href=#optionsbabelconfig><span class=header-link></span></a><code>options.babelConfig</code></h3><p>Both the <code>.server()</code> and <code>.browser()</code> plugins accept this option.</p><p>You can manually override the builtin Babel configuration by passing a <code>babelConfig</code> object. By default, <a href=https://babeljs.io/docs/en/config-files>Babel’s regular config file resolution</a> will be used.</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFFFFF>marko</span>.<span style=color:#A6E22E>browser</span>({
babelConfig: {
presets: [<span style=color:#FFF066>"@babel/preset-env"</span>],
},
});
</pre><h3 id=optionsruntimeid><a name=optionsruntimeid class=anchor href=#optionsruntimeid><span class=header-link></span></a><code>options.runtimeId</code></h3><p>Both the <code>.server()</code> and <code>.browser()</code> plugins accept this option. In fact, you <em>really</em> want to use it with both simultaneously.</p><p>In some cases, you may want to embed multiple isolated copies of Marko on the page. (If you can’t think of why, then don’t worry about this option.)</p><p>Since Marko uses some <code>window</code> properties to initialize, multiple instances can cause issues. For example, by default Marko checks <code>window.$components</code> for server-rendered hydration. Usually you can change these <code>window</code> properties by <a href=/docs/rendering/#global-data>rendering with <code>{ $global: { runtimeId: "MY_MARKO_RUNTIME_ID" } }</code> as input</a> on the server, but since <code>@marko/rollup</code> usually writes the autoinitialization code for you, instead this plugin exposes a <code>runtimeId</code> option to automatically set <code>$global.runtimeId</code> to initialize properly in the browser:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>runtimeId</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>"MY_MARKO_RUNTIME_ID"</span>;
<span style=color:#8F8F9E>// Make the `runtimeId` the same across `server` and `browser`, or it’ll error!</span>
<span style=color:#FFFFFF>marko</span>.<span style=color:#A6E22E>server</span>({ <span style=color:#FFFFFF>runtimeId</span> });
<span style=color:#FFFFFF>marko</span>.<span style=color:#A6E22E>browser</span>({ <span style=color:#FFFFFF>runtimeId</span> });
</pre><h3 id=optionsserialize><a name=optionsserialize class=anchor href=#optionsserialize><span class=header-link></span></a><code>options.serialize</code></h3><p>This option is only available for the <code>.browser()</code> plugin. It lets you inspect and transform the <code>output</code> chunks before they’re passed to <a href=#rollup-tag>the <code><rollup></code> tag</a>.</p><p>For example, if you <em>did</em> want to include the <code>code</code> property from the Rollup chunk — say, to inline code small enough that it’s not worth the overhead of an HTTP request, you’d try something like the following:</p><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFFFFF>marko</span>.<span style=color:#A6E22E>browser</span>({
<span style=color:#A6E22E>serialize</span>(<span style=color:#FFAC4D>output</span>) {
<span style=color:#FF4185>return</span> <span style=color:#FFFFFF>output</span>.<span style=color:#A6E22E>map</span>(({ <span style=color:#FFAC4D>type</span>, <span style=color:#FFAC4D>fileName</span>, <span style=color:#FFAC4D>isEntry</span>, <span style=color:#FFAC4D>code</span> }) <span style=color:#66D9EF>=></span>
<span style=color:#FFFFFF>type</span> <span style=color:#FF4185>===</span> <span style=color:#FFF066>"asset"</span>
<span style=color:#FF4185>?</span> { <span style=color:#FFFFFF>type</span>, <span style=color:#FFFFFF>fileName</span> }
<span style=color:#FF4185>:</span> {
<span style=color:#FFFFFF>type</span>,
<span style=color:#FFFFFF>name</span>,
<span style=color:#FFFFFF>isEntry</span>,
<span style=color:#FFFFFF>fileName</span>,
<span style=color:#8F8F9E>// only inline code chunks below 1kB</span>
inline: <span style=color:#FFFFFF>code</span>.<span style=color:#A6E22E>trim</span>().length <span style=color:#FF4185><</span> <span style=color:#AE81FF>1024</span> <span style=color:#FF4185>&&</span> <span style=color:#FFFFFF>code</span>,
},
);
},
});
</pre><a href="https://github.com/marko-js/marko/blob/main/packages/marko/docs/rollup.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/rollup.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/ScottAwesome class=contributor><img src=https://avatars.githubusercontent.com/u/52388100?v=4 alt class=photo><span class=name>ScottAwesome</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 class=contributor><img alt class=photo><span class=name></span></a><a href=https://github.com/marko-js/marko/blob/main/packages/marko/docs/rollup.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":"rollup"}],["s0-1-0-15-9",3,{}],["s0-1-0-17-4-112",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>head\u003C/span>>\n <<span style=color:#FF4185>rollup\u003C/span>|<span style=color:#FFAC4D>entry\u003C/span>, <span style=color:#FFAC4D>output\u003C/span>|>\n <span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>const\u003C/span> <span style=color:#FFFFFF>entryChunk\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>output\u003C/span>.<span style=color:#A6E22E>find\u003C/span>(<span style=color:#FFAC4D>chunk\u003C/span> <span style=color:#66D9EF>=>\u003C/span> <span style=color:#FFFFFF>chunk\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#FFFFFF>entry\u003C/span>);\n\n <<span style=color:#FF4185>if\u003C/span>(<span style=color:#FFFFFF>entryChunk\u003C/span>.<span style=color:#FFFFFF>size\u003C/span> <span style=color:#8F8F9E>/* only load non-empty JS entry points */\u003C/span>)>\n <<span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>fileName\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>entryChunk\u003C/span>.<span style=color:#FFFFFF>imports\u003C/span>>\n <<span style=color:#FF4185>link\u003C/span> <span style=color:#A6E22E>rel\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"modulepreload\"\u003C/span> <span style=color:#A6E22E>href\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>fileName\u003C/span> />\n </<span style=color:#FF4185>for\u003C/span>>\n\n <<span style=color:#FF4185>script\u003C/span> <span style=color:#A6E22E>async\u003C/span> <span style=color:#A6E22E>type\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"module\"\u003C/span> <span style=color:#A6E22E>src\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>entryChunk\u003C/span>.<span style=color:#FFFFFF>fileName\u003C/span>></<span style=color:#FF4185>script\u003C/span>>\n </<span style=color:#FF4185>if\u003C/span>>\n </<span style=color:#FF4185>rollup\u003C/span>>\n</<span style=color:#FF4185>head\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>head\u003C/span>\n <span style=color:#FF4185>rollup\u003C/span>|<span style=color:#FFAC4D>entry\u003C/span>, <span style=color:#FFAC4D>output\u003C/span>|\n <span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>const\u003C/span> <span style=color:#FFFFFF>entryChunk\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>output\u003C/span>.<span style=color:#A6E22E>find\u003C/span>((<span style=color:#FFAC4D>chunk\u003C/span>) <span style=color:#66D9EF>=>\u003C/span> <span style=color:#FFFFFF>chunk\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#FFFFFF>entry\u003C/span>);\n\n <span style=color:#FF4185>if\u003C/span>(<span style=color:#FFFFFF>entryChunk\u003C/span>.<span style=color:#FFFFFF>size\u003C/span> <span style=color:#8F8F9E>/* only load non-empty JS entry points */\u003C/span>)\n <span style=color:#FF4185>for\u003C/span>|<span style=color:#FFAC4D>fileName\u003C/span>| <span style=color:#A6E22E>of\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>entryChunk\u003C/span>.<span style=color:#FFFFFF>imports\u003C/span>\n <span style=color:#FF4185>link\u003C/span> <span style=color:#A6E22E>rel\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"modulepreload\"\u003C/span> <span style=color:#A6E22E>href\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>fileName\u003C/span>\n\n <span style=color:#FF4185>script\u003C/span> <span style=color:#A6E22E>async\u003C/span> <span style=color:#A6E22E>type\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"module\"\u003C/span> <span style=color:#A6E22E>src\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>entryChunk\u003C/span>.<span style=color:#FFFFFF>fileName\u003C/span>\n\u003C/pre>"}],["s0-1-0-17-4-129",4,{"html":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>rollup\u003C/span>|<span style=color:#FFAC4D>entry\u003C/span>, <span style=color:#FFAC4D>iifeOutput\u003C/span>, <span style=color:#FFAC4D>esmOutput\u003C/span>|>\n <span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>const\u003C/span> <span style=color:#FFFFFF>iifeEntryChunk\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>iifeOutput\u003C/span>.<span style=color:#A6E22E>find\u003C/span>(<span style=color:#FFAC4D>chunk\u003C/span> <span style=color:#66D9EF>=>\u003C/span> <span style=color:#FFFFFF>chunk\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#FFFFFF>entry\u003C/span>);\n <span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>const\u003C/span> <span style=color:#FFFFFF>esmEntryChunk\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>esmOutput\u003C/span>.<span style=color:#A6E22E>find\u003C/span>(<span style=color:#FFAC4D>chunk\u003C/span> <span style=color:#66D9EF>=>\u003C/span> <span style=color:#FFFFFF>chunk\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#FFFFFF>entry\u003C/span>);\n\n <<span style=color:#FF4185>script\u003C/span> <span style=color:#A6E22E>src\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>esmEntryChunk\u003C/span>.<span style=color:#FFFFFF>fileName\u003C/span> <span style=color:#A6E22E>type\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"module\"\u003C/span> <span style=color:#A6E22E>async\u003C/span>></<span style=color:#FF4185>script\u003C/span>>\n <<span style=color:#FF4185>script\u003C/span> <span style=color:#A6E22E>src\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>iifeEntryChunk\u003C/span>.<span style=color:#FFFFFF>fileName\u003C/span> <span style=color:#A6E22E>nomodule\u003C/span> <span style=color:#A6E22E>async\u003C/span>></<span style=color:#FF4185>script\u003C/span>>\n</<span style=color:#FF4185>rollup\u003C/span>>\n\u003C/pre>","concise":"<pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FF4185>rollup\u003C/span>|<span style=color:#FFAC4D>entry\u003C/span>, <span style=color:#FFAC4D>iifeOutput\u003C/span>, <span style=color:#FFAC4D>esmOutput\u003C/span>|\n <span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>const\u003C/span> <span style=color:#FFFFFF>iifeEntryChunk\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>iifeOutput\u003C/span>.<span style=color:#A6E22E>find\u003C/span>((<span style=color:#FFAC4D>chunk\u003C/span>) <span style=color:#66D9EF>=>\u003C/span> <span style=color:#FFFFFF>chunk\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#FFFFFF>entry\u003C/span>);\n <span style=color:#FF4185>$\u003C/span> <span style=color:#66D9EF>const\u003C/span> <span style=color:#FFFFFF>esmEntryChunk\u003C/span> <span style=color:#FFFFFF>=\u003C/span> <span style=color:#FFFFFF>esmOutput\u003C/span>.<span style=color:#A6E22E>find\u003C/span>((<span style=color:#FFAC4D>chunk\u003C/span>) <span style=color:#66D9EF>=>\u003C/span> <span style=color:#FFFFFF>chunk\u003C/span>.<span style=color:#FFFFFF>name\u003C/span> <span style=color:#FF4185>===\u003C/span> <span style=color:#FFFFFF>entry\u003C/span>);\n\n <span style=color:#FF4185>script\u003C/span> <span style=color:#A6E22E>src\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>esmEntryChunk\u003C/span>.<span style=color:#FFFFFF>fileName\u003C/span> <span style=color:#A6E22E>type\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFF066>\"module\"\u003C/span> <span style=color:#A6E22E>async\u003C/span>\n <span style=color:#FF4185>script\u003C/span> <span style=color:#A6E22E>src\u003C/span><span style=color:#FFFFFF>=\u003C/span><span style=color:#FFFFFF>iifeEntryChunk\u003C/span>.<span style=color:#FFFFFF>fileName\u003C/span> <span style=color:#A6E22E>nomodule\u003C/span> <span style=color:#A6E22E>async\u003C/span>\n\u003C/pre>"}]],"t":["IZr$9Bl","uja7Vjk","G0dDyNr","wIkyy5p","x0AuQwk"]})</script></body></html>