From 977c7a221973106676c3ff70c3732d2c3fe8904f Mon Sep 17 00:00:00 2001 From: dominikg Date: Thu, 24 Nov 2022 18:01:20 +0100 Subject: [PATCH 01/16] feat: support direct and raw query parameters for svelte requests --- .changeset/giant-tools-hunt.md | 5 ++++ packages/vite-plugin-svelte/src/index.ts | 26 +++++++++++++++++---- packages/vite-plugin-svelte/src/utils/id.ts | 3 ++- 3 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 .changeset/giant-tools-hunt.md diff --git a/.changeset/giant-tools-hunt.md b/.changeset/giant-tools-hunt.md new file mode 100644 index 000000000..dbad90906 --- /dev/null +++ b/.changeset/giant-tools-hunt.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': minor +--- + +support `&direct` and `&raw` query parameters for svelte requests diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts index 1ca56a534..c0afcdb9b 100644 --- a/packages/vite-plugin-svelte/src/index.ts +++ b/packages/vite-plugin-svelte/src/index.ts @@ -103,17 +103,28 @@ export function svelte(inlineOptions?: Partial): Plugin[] { setupWatchers(options, cache, requestParser); }, - load(id, opts) { + async load(id, opts) { const ssr = !!opts?.ssr; const svelteRequest = requestParser(id, !!ssr); if (svelteRequest) { const { filename, query } = svelteRequest; // virtual css module if (query.svelte && query.type === 'style') { - const css = cache.getCSS(svelteRequest); + let css = cache.getCSS(svelteRequest); + const isPlainRequest = query.raw || query.direct; + if (!css && isPlainRequest) { + // not cached, but plain requests may happen independently + // so compile for css on the fly + log.debug(`compiling for direct css request ${id}`); + css = ( + await compileSvelte(svelteRequest, fs.readFileSync(filename, 'utf-8'), options) + ).compiled.css; + } if (css) { - log.debug(`load returns css for ${filename}`); - return css; + log.debug( + `load returns ${isPlainRequest ? 'plain css' : 'css module code'} for ${filename}` + ); + return isPlainRequest ? css.code : css; } } // prevent vite asset plugin from loading files as url that should be compiled in transform @@ -205,7 +216,12 @@ export function svelte(inlineOptions?: Partial): Plugin[] { ensureWatchedFile(options.server!.watcher, d, options.root); }); } - log.debug(`transform returns compiled js for ${svelteRequest.filename}`); + if (svelteRequest.query.raw) { + // TODO is direct allowed for js requests too? + log.debug(`transform returns raw compiled js for ${svelteRequest.filename}`); + return compileData.compiled.js.code; + } + log.debug(`transform returns compiled js module for ${svelteRequest.filename}`); return { ...compileData.compiled.js, meta: { diff --git a/packages/vite-plugin-svelte/src/utils/id.ts b/packages/vite-plugin-svelte/src/utils/id.ts index 29b625b44..7b40edc33 100644 --- a/packages/vite-plugin-svelte/src/utils/id.ts +++ b/packages/vite-plugin-svelte/src/utils/id.ts @@ -16,6 +16,7 @@ export interface RequestQuery { // vite specific url?: boolean; raw?: boolean; + direct?: boolean; } export interface SvelteRequest { @@ -44,7 +45,7 @@ function parseToSvelteRequest( ssr: boolean ): SvelteRequest | undefined { const query = parseRequestQuery(rawQuery); - if (query.url || query.raw) { + if (query.url || (query.raw && !query.svelte)) { // skip requests with special vite tags return; } From ab2722a1e0f771dd40a0d6ff7559e10c1bcf1227 Mon Sep 17 00:00:00 2001 From: dominikg Date: Sun, 27 Nov 2022 14:10:45 +0100 Subject: [PATCH 02/16] wip: add option to pass compileOptions for raw scripts, fix issues with output as default export, add tests --- .../__tests__/import-queries.spec.ts | 409 ++++++++++++++++++ packages/e2e-tests/import-queries/index.html | 13 + .../e2e-tests/import-queries/package.json | 17 + .../import-queries/public/favicon.png | Bin 0 -> 3127 bytes .../e2e-tests/import-queries/src/App.svelte | 23 + .../e2e-tests/import-queries/src/Dummy.svelte | 17 + packages/e2e-tests/import-queries/src/main.js | 7 + .../import-queries/src/vite-env.d.ts | 2 + .../e2e-tests/import-queries/svelte.config.js | 7 + .../e2e-tests/import-queries/vite.config.js | 28 ++ packages/vite-plugin-svelte/src/index.ts | 48 +- .../vite-plugin-svelte/src/utils/compile.ts | 82 ++-- packages/vite-plugin-svelte/src/utils/id.ts | 52 ++- .../src/utils/preprocess.ts | 6 +- pnpm-lock.yaml | 12 + 15 files changed, 672 insertions(+), 51 deletions(-) create mode 100644 packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts create mode 100644 packages/e2e-tests/import-queries/index.html create mode 100644 packages/e2e-tests/import-queries/package.json create mode 100644 packages/e2e-tests/import-queries/public/favicon.png create mode 100644 packages/e2e-tests/import-queries/src/App.svelte create mode 100644 packages/e2e-tests/import-queries/src/Dummy.svelte create mode 100644 packages/e2e-tests/import-queries/src/main.js create mode 100644 packages/e2e-tests/import-queries/src/vite-env.d.ts create mode 100644 packages/e2e-tests/import-queries/svelte.config.js create mode 100644 packages/e2e-tests/import-queries/vite.config.js diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts new file mode 100644 index 000000000..24f083f20 --- /dev/null +++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts @@ -0,0 +1,409 @@ +import { browserLogs, getText, isBuild, readFileContent } from '~utils'; + +test('does not have failed requests', async () => { + browserLogs.forEach((msg) => { + expect(msg).not.toMatch('404'); + }); +}); + +test('Dummy.svelte', async () => { + expect(await getText('#component button')).toBe('dummy clicks: 0'); +}); + +test('Dummy.svelte?raw', async () => { + const result = await getText('#raw'); + expect(result).toMatchInlineSnapshot(` + " + + + " + `); +}); + +test('Dummy.svelte?raw&svelte&type=preprocessed', async () => { + const result = await getText('#preprocessed'); + expect(result).toMatchInlineSnapshot(` + " + + + " + `); +}); + +test('Dummy.svelte?raw&svelte&type=script&compileOptions={"customElement":true,"dev":false}', async () => { + const result = await getText('#wcScript'); + expect(result).toMatchInlineSnapshot(` + "/* src/Dummy.svelte generated by Svelte v3.53.1 */ + import { + SvelteElement as SvelteElement$, + append as append$, + attribute_to_object as attribute_to_object$, + detach as detach$, + element as element$, + flush as flush$, + init as init$, + insert as insert$, + listen as listen$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data as set_data$, + text as text$ + } from \\"svelte/internal\\"; + + function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + return { + c() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + this.c = noop$; + }, + m(target, anchor) { + insert$(target, button$, anchor); + append$(button$, t0$); + append$(button$, t1$); + append$(button$, t2$); + + if (!mounted) { + dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d(detaching) { + if (detaching) detach$(button$); + mounted = false; + dispose(); + } + }; + } + + function instance$($$self, $$props, $$invalidate) { + let { name } = $$props; + let clicks = 0; + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + return [name, clicks, click_handler$]; + } + + class Dummy$ extends SvelteElement$ { + constructor(options) { + super(); + this.shadowRoot.innerHTML = \`\`; + + init$( + this, + { + target: this.shadowRoot, + props: attribute_to_object$(this.attributes), + customElement: true + }, + instance$, + create_fragment, + safe_not_equal$, + { name: 0 }, + null + ); + + if (options) { + if (options.target) { + insert$(options.target, this, options.anchor); + } + + if (options.props) { + this.$set(options.props); + flush$(); + } + } + } + + static get observedAttributes() { + return [\\"name\\"]; + } + + get name() { + return this.$$.ctx[0]; + } + + set name(name) { + this.$$set({ name }); + flush$(); + } + } + + export default Dummy$;" + `); +}); + +test('Dummy.svelte?raw&svelte&type=style', async () => { + const result = await getText('#style'); + expect(result).toMatchInlineSnapshot('"button.svelte-d8vj6a{color:#000099}"'); +}); + +if (isBuild) { + // needs to be different because dev raw script expected result is different from build raw script + test(`build: Dummy.svelte?raw&svelte&type=script`, async () => { + const result = await getText('#script'); + expect(result).toMatchInlineSnapshot(` + "/* src/Dummy.svelte generated by Svelte v3.53.1 */ + import { + SvelteComponent as SvelteComponent$, + append as append$, + attr as attr$, + detach as detach$, + element as element$, + init as init$, + insert as insert$, + listen as listen$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data as set_data$, + text as text$ + } from \\"svelte/internal\\"; + + function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + return { + c() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + attr$(button$, \\"class\\", \\"svelte-d8vj6a\\"); + }, + m(target, anchor) { + insert$(target, button$, anchor); + append$(button$, t0$); + append$(button$, t1$); + append$(button$, t2$); + + if (!mounted) { + dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d(detaching) { + if (detaching) detach$(button$); + mounted = false; + dispose(); + } + }; + } + + function instance$($$self, $$props, $$invalidate) { + let { name } = $$props; + let clicks = 0; + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + return [name, clicks, click_handler$]; + } + + class Dummy$ extends SvelteComponent$ { + constructor(options) { + super(); + init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); + } + } + + export default Dummy$;" + `); + }); +} else { + test(`dev: Dummy.svelte?raw&svelte&type=script`, async () => { + const result = await getText('#script'); + expect(result).toMatchInlineSnapshot(` + "/* src/Dummy.svelte generated by Svelte v3.53.1 */ + import { + SvelteComponentDev as SvelteComponentDev$, + add_location as add_location$, + append_dev as append_dev$, + attr_dev as attr_dev$, + detach_dev as detach_dev$, + dispatch_dev as dispatch_dev$, + element as element$, + globals as globals$, + init as init$, + insert_dev as insert_dev$, + listen_dev as listen_dev$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data_dev as set_data_dev$, + text as text$, + validate_slots as validate_slots$ + } from \\"svelte/internal\\"; + + const { Error: Error$, Object: Object$, console: console$ } = globals$; + const file$ = \\"src/Dummy.svelte\\"; + + function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + const block$ = { + c: function create() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + attr_dev$(button$, \\"class\\", \\"svelte-d8vj6a\\"); + add_location$(button$, file$, 3, 0, 61); + }, + l: function claim(nodes) { + throw new Error$(\\"options.hydrate only works if the component was compiled with the \`hydratable: true\` option\\"); + }, + m: function mount(target, anchor) { + insert_dev$(target, button$, anchor); + append_dev$(button$, t0$); + append_dev$(button$, t1$); + append_dev$(button$, t2$); + + if (!mounted) { + dispose = listen_dev$(button$, \\"click\\", /*click_handler$*/ ctx[2], false, false, false); + mounted = true; + } + }, + p: function update(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data_dev$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data_dev$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d: function destroy(detaching) { + if (detaching) detach_dev$(button$); + mounted = false; + dispose(); + } + }; + + dispatch_dev$(\\"SvelteRegisterBlock\\", { + block: block$, + id: create_fragment.name, + type: \\"component\\", + source: \\"\\", + ctx + }); + + return block$; + } + + function instance$($$self, $$props, $$invalidate) { + let { $$slots: slots = {}, $$scope } = $$props; + validate_slots$('Dummy', slots, []); + let { name } = $$props; + let clicks = 0; + + $$self.$$.on_mount.push(function () { + if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) { + console$.warn(\\" was created without expected prop 'name'\\"); + } + }); + + const writable_props = ['name']; + + Object$.keys($$props).forEach(key => { + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console$.warn(\` was created with unknown prop '\${key}'\`); + }); + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + $$self.$capture_state = () => ({ name, clicks }); + + $$self.$inject_state = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + if ('clicks' in $$props) $$invalidate(1, clicks = $$props.clicks); + }; + + if ($$props && \\"$$inject\\" in $$props) { + $$self.$inject_state($$props.$$inject); + } + + return [name, clicks, click_handler$]; + } + + class Dummy$ extends SvelteComponentDev$ { + constructor(options) { + super(options); + init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); + + dispatch_dev$(\\"SvelteRegisterComponent\\", { + component: this, + tagName: \\"Dummy$\\", + options, + id: create_fragment.name + }); + } + + get name() { + throw new Error$(\\": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''\\"); + } + + set name(value) { + throw new Error$(\\": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''\\"); + } + } + + export default Dummy$;" + `); + }); +} diff --git a/packages/e2e-tests/import-queries/index.html b/packages/e2e-tests/import-queries/index.html new file mode 100644 index 000000000..c4b05496b --- /dev/null +++ b/packages/e2e-tests/import-queries/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Svelte + + +
+ + + diff --git a/packages/e2e-tests/import-queries/package.json b/packages/e2e-tests/import-queries/package.json new file mode 100644 index 000000000..3dde129dc --- /dev/null +++ b/packages/e2e-tests/import-queries/package.json @@ -0,0 +1,17 @@ +{ + "name": "e2e-tests-import-queries", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite --force", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "workspace:*", + "sass": "^1.56.1", + "svelte": "^3.53.1", + "vite": "^3.2.3" + } +} diff --git a/packages/e2e-tests/import-queries/public/favicon.png b/packages/e2e-tests/import-queries/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645 GIT binary patch literal 3127 zcmV-749N3|P)i z7)}s4L53SJCkR}iVi00SFk;`MXX*#X*kkwKs@nFGS}c;=?XFjU|G$3t^5sjIVS2G+ zw)WGF83CpoGXhLGW(1gW%uV|X7>1P6VhCX=Ux)Lb!*DZ%@I3!{Gsf7d?gtIQ%nQiK z3%(LUSkBji;C5Rfgd6$VsF@H`Pk@xtY6t<>FNR-pD}=C~$?)9pdm3XZ36N5PNWYjb z$xd$yNQR9N!dfj-Vd@BwQo^FIIWPPmT&sZyQ$v81(sCBV=PGy{0wltEjB%~h157*t zvbe_!{=I_783x!0t1-r#-d{Y?ae$Q4N_Nd^Ui^@y(%)Gjou6y<3^XJdu{rmUf-Me?)zZ>9OR&6U5H*cK; z$gUlB{g0O4gN0sLSO|Of?hU(l?;h(jA3uH!Z{EBKuV23ouU@^Y6#%v+QG;>e*E}%?wlu-NT4DG zs)z)7WbLr)vGAu(ohrKc^em@OpO&f~6_>E61n_e0_V3@{U3^O;j{`^mNCJUj_>;7v zsMs6Hu3g7+@v+lSo;=yTYFqq}jZmQ-BK8K{C4kqi_i*jBaQE(Au0607V-zKeT;EPg zX(`vrn=L+e74+-Tqeok@_`tDa$G9I|$nTU5H*2V8@y()n*zqM?J1G!-1aX;CfDC9B zTnJ#j_%*n8Qb1)re*Bno7g0RG{Eb;IK14irJYJp$5Z6ac9~b_P?+5t~95~SRG$g?1 znFJ7p$xV&GZ18m~79TGRdfsc-BcX$9yXTR*n)mPD@1~O(_?cT$ZvFPucRmGlq&se0 zKrcUf^k}4hM*biEJOWKzz!qQe;CB_ZtSOO9Owg#lZAc=s65^rb{fZe(TYu_rk!wKkEf}RIt=#Om( zR8mN`DM<^xj~59euMMspBolVN zAPTr8sSDI104orIAdmL$uOXn*6hga1G+0WD0E?UtabxC#VC~vf3|10|phW;yQ3CY8 z2CM=)ErF;xq-YJ5G|um}>*1#E+O_Mu|Nr#qQ&G1P-NMq@f?@*XUcSbV?tX=)ilM-Q zBZP|!Bpv0V;#ojKcpc7$=eqO;#Uy~#?^kNI{vSZfLx&DEt~LTmaKWXcx=joubklI<*Aw z>LtMaQ7DR<1I2LkWvwyu#Rwn~;ezT}_g(@5l3h?W%-a86Y-t#O1PubP+z<%?V5D(U zy57A6{h+{?kOZp7&WKZR+=sznMJ}+Dnpo=C_0%R_x_t~J5T?E_{+))l5v1%52>)d-`iiZyx|5!%M2Fb2dU zW3~MwwpEH9Rhue+k$UIOoo($Ds!NbOyMR36fRHu;*15(YcA7siIZk#%JWz>P!qX1?IUojG&nKR>^gArBt2 zit(ETyZ=@V&7mv_Fi4bABcnwP+jzQuHcfU&BrAV91u-rFvEi7y-KnWsvHH=d2 zgAk(GKm_S8RcTJ>2N3~&Hbwp{Z3NF_Xeh}g4Eke)V&dY{W(3&b1j9t4yK_aYJisZZ{1rcU5- z;eD>K;ndPq&B-8yA_S0F!4ThA&{1{x)H<#?k9a#6Pc6L?V^s0``ynL&D;p(!Nmx`Y zFkHex{4p!Ggm^@DlehW}iHHVi}~u=$&N? z(NEBLQ#UxxAkdW>X9LnqUr#t4Lu0=9L8&o>JsqTtT5|%gb3QA~hr0pED71+iFFr)dZ=Q=E6ng{NE{Z~0)C?deO#?Aj zSDQ$z#TeC2T^|=}6GBo-&$;E{HL3!q3Z-szuf)O=G#zDjin4SSP%o%6+2IT#sLjQa ziyxFFz~LMjWY+_a5H!U6%a<=b7QVP^ z*90a62;bVq{?@)P6^DWd^Yilq4|YTV2Nw!Yu;a1lPI-sxR)rf@Fe5DhDP7FH zZZ%4S*1C30P;|O+jB!1;m|rXT90Sm5*RBbQN`PKu+hDD*S^yE(CdtSfg=z>u$cIj> z + import Dummy from './Dummy.svelte'; + import raw from './Dummy.svelte?raw'; + import preprocessed from './Dummy.svelte?raw&svelte&type=preprocessed'; + import script from './Dummy.svelte?raw&svelte&type=script'; + import wcScript from './Dummy.svelte?raw&svelte&type=script&compileOptions={"customElement":true,"dev":false}'; + import style from './Dummy.svelte?raw&svelte&type=style'; + + +
+

raw

+ 
{raw}
+

preprocessed

+ 
{preprocessed.code}
+

script

+ 
{script.code}
+

web component script

+ 
{wcScript.code}
+

style

+ 
{style.code}
+

Component

+
+
diff --git a/packages/e2e-tests/import-queries/src/Dummy.svelte b/packages/e2e-tests/import-queries/src/Dummy.svelte new file mode 100644 index 000000000..21db6c29d --- /dev/null +++ b/packages/e2e-tests/import-queries/src/Dummy.svelte @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/e2e-tests/import-queries/src/main.js b/packages/e2e-tests/import-queries/src/main.js new file mode 100644 index 000000000..2c27a2579 --- /dev/null +++ b/packages/e2e-tests/import-queries/src/main.js @@ -0,0 +1,7 @@ +import App from './App.svelte'; + +const app = new App({ + target: document.body +}); + +export default app; diff --git a/packages/e2e-tests/import-queries/src/vite-env.d.ts b/packages/e2e-tests/import-queries/src/vite-env.d.ts new file mode 100644 index 000000000..4078e7476 --- /dev/null +++ b/packages/e2e-tests/import-queries/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/e2e-tests/import-queries/svelte.config.js b/packages/e2e-tests/import-queries/svelte.config.js new file mode 100644 index 000000000..b44f034a9 --- /dev/null +++ b/packages/e2e-tests/import-queries/svelte.config.js @@ -0,0 +1,7 @@ +export default { + vitePlugin: { + experimental: { + useVitePreprocess: true + } + } +}; diff --git a/packages/e2e-tests/import-queries/vite.config.js b/packages/e2e-tests/import-queries/vite.config.js new file mode 100644 index 000000000..24823c71d --- /dev/null +++ b/packages/e2e-tests/import-queries/vite.config.js @@ -0,0 +1,28 @@ +import { defineConfig } from 'vite'; +import { svelte } from '@sveltejs/vite-plugin-svelte'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()], + optimizeDeps: { + exclude: [ + // TODO this must be excluded because nested has an scss dep that prebundle can't handle! + // figure out how to exclude it automatically or at least tell the user about it in a more friendly way + 'e2e-test-dep-scss-only', + 'e2e-test-dep-svelte-hybrid' + ] + }, + build: { + // make build faster by skipping transforms and minification + target: 'esnext', + minify: false + }, + server: { + watch: { + // During tests we edit the files too fast and sometimes chokidar + // misses change events, so enforce polling for consistency + usePolling: true, + interval: 100 + } + } +}); diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts index c0afcdb9b..d95ba777c 100644 --- a/packages/vite-plugin-svelte/src/index.ts +++ b/packages/vite-plugin-svelte/src/index.ts @@ -107,12 +107,11 @@ export function svelte(inlineOptions?: Partial): Plugin[] { const ssr = !!opts?.ssr; const svelteRequest = requestParser(id, !!ssr); if (svelteRequest) { - const { filename, query } = svelteRequest; + const { filename, query, raw } = svelteRequest; // virtual css module if (query.svelte && query.type === 'style') { let css = cache.getCSS(svelteRequest); - const isPlainRequest = query.raw || query.direct; - if (!css && isPlainRequest) { + if (!css && raw) { // not cached, but plain requests may happen independently // so compile for css on the fly log.debug(`compiling for direct css request ${id}`); @@ -121,14 +120,12 @@ export function svelte(inlineOptions?: Partial): Plugin[] { ).compiled.css; } if (css) { - log.debug( - `load returns ${isPlainRequest ? 'plain css' : 'css module code'} for ${filename}` - ); - return isPlainRequest ? css.code : css; + log.debug(`load returns ${raw ? 'plain css' : 'css module code'} for ${filename}`); + return raw ? toDefaultExport(css) : css; } } // prevent vite asset plugin from loading files as url that should be compiled in transform - if (viteConfig.assetsInclude(filename)) { + if (viteConfig.assetsInclude(filename) || raw) { log.debug(`load returns raw content for ${filename}`); return fs.readFileSync(filename, 'utf-8'); } @@ -139,14 +136,12 @@ export function svelte(inlineOptions?: Partial): Plugin[] { const ssr = !!opts?.ssr; const svelteRequest = requestParser(importee, ssr); if (svelteRequest?.query.svelte) { - if (svelteRequest.query.type === 'style') { + if (svelteRequest.query.type === 'style' && !svelteRequest.raw) { // return cssId with root prefix so postcss pipeline of vite finds the directory correctly // see https://github.com/sveltejs/vite-plugin-svelte/issues/14 log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`); return svelteRequest.cssId; } - log.debug(`resolveId resolved ${importee}`); - return importee; // query with svelte tag, an id we generated, no need for further analysis } if (ssr && importee === 'svelte') { @@ -199,9 +194,13 @@ export function svelte(inlineOptions?: Partial): Plugin[] { async transform(code, id, opts) { const ssr = !!opts?.ssr; const svelteRequest = requestParser(id, ssr); - if (!svelteRequest || svelteRequest.query.svelte) { + if (!svelteRequest) { return; } + const { query, raw } = svelteRequest; + if (query.svelte && query.type === 'style') { + return; // styles are handled by load after js compile created a cached virtual module + } let compileData; try { compileData = await compileSvelte(svelteRequest, code, options); @@ -210,17 +209,28 @@ export function svelte(inlineOptions?: Partial): Plugin[] { throw toRollupError(e, options); } logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options); + + if (raw) { + // subquery for raw code + if (query.type === 'script') { + log.debug(`transform returns raw compiled js data for ${svelteRequest.filename}`); + return toDefaultExport(compileData.compiled.js); + } + if (query.type === 'preprocessed') { + log.debug(`transform returns raw preprocessed data for ${svelteRequest.filename}`); + return toDefaultExport(compileData.preprocessed); + } + throw new Error( + `invalid raw query in id: ${svelteRequest.id}. It has to be combined with a supported type.` + ); + } + cache.update(compileData); if (compileData.dependencies?.length && options.server) { compileData.dependencies.forEach((d) => { ensureWatchedFile(options.server!.watcher, d, options.root); }); } - if (svelteRequest.query.raw) { - // TODO is direct allowed for js requests too? - log.debug(`transform returns raw compiled js for ${svelteRequest.filename}`); - return compileData.compiled.js.code; - } log.debug(`transform returns compiled js module for ${svelteRequest.filename}`); return { ...compileData.compiled.js, @@ -272,3 +282,7 @@ export { } from './utils/options'; export { SvelteWarningsMessage } from './utils/log'; + +function toDefaultExport(object: object | string) { + return `export default ${JSON.stringify(object)}`; +} diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index f169c31d3..2c7050477 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -6,17 +6,21 @@ import { SvelteRequest } from './id'; import { safeBase64Hash } from './hash'; import { log } from './log'; import { StatCollection } from './vite-plugin-svelte-stats'; +//eslint-disable-next-line node/no-missing-import +import type { Processed } from 'svelte/types/compiler/preprocess'; +import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess'; const scriptLangRE = / + + + + +" +`; + +exports[`raw > Dummy.svelte?raw&svelte&type=preprocessed 1`] = ` +" + + + + +" +`; + +exports[`raw > Dummy.svelte?raw&svelte&type=script 1`] = ` +"/* src/Dummy.svelte generated by Svelte v3.53.1 */ +import { + SvelteComponent as SvelteComponent$, + append as append$, + attr as attr$, + detach as detach$, + element as element$, + init as init$, + insert as insert$, + listen as listen$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data as set_data$, + text as text$ +} from \\"svelte/internal\\"; + +function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + return { + c() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + attr$(button$, \\"class\\", \\"svelte-d8vj6a\\"); + }, + m(target, anchor) { + insert$(target, button$, anchor); + append$(button$, t0$); + append$(button$, t1$); + append$(button$, t2$); + + if (!mounted) { + dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d(detaching) { + if (detaching) detach$(button$); + mounted = false; + dispose(); + } + }; +} + +function instance$($$self, $$props, $$invalidate) { + let { name } = $$props; + let clicks = 0; + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + return [name, clicks, click_handler$]; +} + +class Dummy$ extends SvelteComponent$ { + constructor(options) { + super(); + init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); + } +} + +export default Dummy$;" +`; + +exports[`raw > Dummy.svelte?raw&svelte&type=script&compileOptions={"customElement":true} 1`] = ` +"/* src/Dummy.svelte generated by Svelte v3.53.1 */ +import { + SvelteElement as SvelteElement$, + append as append$, + attribute_to_object as attribute_to_object$, + detach as detach$, + element as element$, + flush as flush$, + init as init$, + insert as insert$, + listen as listen$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data as set_data$, + text as text$ +} from \\"svelte/internal\\"; + +function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + return { + c() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + this.c = noop$; + }, + m(target, anchor) { + insert$(target, button$, anchor); + append$(button$, t0$); + append$(button$, t1$); + append$(button$, t2$); + + if (!mounted) { + dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d(detaching) { + if (detaching) detach$(button$); + mounted = false; + dispose(); + } + }; +} + +function instance$($$self, $$props, $$invalidate) { + let { name } = $$props; + let clicks = 0; + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + return [name, clicks, click_handler$]; +} + +class Dummy$ extends SvelteElement$ { + constructor(options) { + super(); + this.shadowRoot.innerHTML = \`\`; + + init$( + this, + { + target: this.shadowRoot, + props: attribute_to_object$(this.attributes), + customElement: true + }, + instance$, + create_fragment, + safe_not_equal$, + { name: 0 }, + null + ); + + if (options) { + if (options.target) { + insert$(options.target, this, options.anchor); + } + + if (options.props) { + this.$set(options.props); + flush$(); + } + } + } + + static get observedAttributes() { + return [\\"name\\"]; + } + + get name() { + return this.$$.ctx[0]; + } + + set name(name) { + this.$$set({ name }); + flush$(); + } +} + +export default Dummy$;" +`; + +exports[`raw > Dummy.svelte?raw&svelte&type=style 1`] = `"button.svelte-d8vj6a{color:#000099}"`; + +exports[`ssrLoadModule > ?raw 1`] = ` +" + + + + +" +`; + +exports[`ssrLoadModule > ?raw&svelte&type=preprocessed 1`] = ` +" + + + + +" +`; + +exports[`ssrLoadModule > ?raw&svelte&type=script 1`] = ` +"/* temp/serve/import-queries/src/Dummy.svelte generated by Svelte v3.53.1 */ +import { + SvelteComponent as SvelteComponent$, + append as append$, + attr as attr$, + detach as detach$, + element as element$, + init as init$, + insert as insert$, + listen as listen$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data as set_data$, + text as text$ +} from \\"svelte/internal\\"; + +function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + return { + c() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + attr$(button$, \\"class\\", \\"svelte-d8vj6a\\"); + }, + m(target, anchor) { + insert$(target, button$, anchor); + append$(button$, t0$); + append$(button$, t1$); + append$(button$, t2$); + + if (!mounted) { + dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d(detaching) { + if (detaching) detach$(button$); + mounted = false; + dispose(); + } + }; +} + +function instance$($$self, $$props, $$invalidate) { + let { name } = $$props; + let clicks = 0; + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + return [name, clicks, click_handler$]; +} + +class Dummy$ extends SvelteComponent$ { + constructor(options) { + super(); + init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); + } +} + +export default Dummy$;" +`; + +exports[`ssrLoadModule > ?raw&svelte&type=script&compileOptions={"customElement":true} 1`] = ` +"/* temp/serve/import-queries/src/Dummy.svelte generated by Svelte v3.53.1 */ +import { + SvelteElement as SvelteElement$, + append as append$, + attribute_to_object as attribute_to_object$, + detach as detach$, + element as element$, + flush as flush$, + init as init$, + insert as insert$, + listen as listen$, + noop as noop$, + safe_not_equal as safe_not_equal$, + set_data as set_data$, + text as text$ +} from \\"svelte/internal\\"; + +function create_fragment(ctx) { + let button$; + let t0$; + let t1$; + let t2$; + let mounted; + let dispose; + + return { + c() { + button$ = element$(\\"button\\"); + t0$ = text$(/*name*/ ctx[0]); + t1$ = text$(\\" clicks: \\"); + t2$ = text$(/*clicks*/ ctx[1]); + this.c = noop$; + }, + m(target, anchor) { + insert$(target, button$, anchor); + append$(button$, t0$); + append$(button$, t1$); + append$(button$, t2$); + + if (!mounted) { + dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); + mounted = true; + } + }, + p(ctx, [dirty]) { + if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); + if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); + }, + i: noop$, + o: noop$, + d(detaching) { + if (detaching) detach$(button$); + mounted = false; + dispose(); + } + }; +} + +function instance$($$self, $$props, $$invalidate) { + let { name } = $$props; + let clicks = 0; + + const click_handler$ = () => { + $$invalidate(1, clicks++, clicks); + }; + + $$self.$$set = $$props => { + if ('name' in $$props) $$invalidate(0, name = $$props.name); + }; + + return [name, clicks, click_handler$]; +} + +class Dummy$ extends SvelteElement$ { + constructor(options) { + super(); + this.shadowRoot.innerHTML = \`\`; + + init$( + this, + { + target: this.shadowRoot, + props: attribute_to_object$(this.attributes), + customElement: true + }, + instance$, + create_fragment, + safe_not_equal$, + { name: 0 }, + null + ); + + if (options) { + if (options.target) { + insert$(options.target, this, options.anchor); + } + + if (options.props) { + this.$set(options.props); + flush$(); + } + } + } + + static get observedAttributes() { + return [\\"name\\"]; + } + + get name() { + return this.$$.ctx[0]; + } + + set name(name) { + this.$$set({ name }); + flush$(); + } +} + +export default Dummy$;" +`; + +exports[`ssrLoadModule > ?raw&svelte&type=style 1`] = `"button.svelte-d8vj6a{color:#000099}"`; diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts index 24f083f20..c4098c277 100644 --- a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts +++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts @@ -1,409 +1,123 @@ -import { browserLogs, getText, isBuild, readFileContent } from '~utils'; - -test('does not have failed requests', async () => { - browserLogs.forEach((msg) => { - expect(msg).not.toMatch('404'); +import { browserLogs, fetchFromPage, getText, isBuild, testDir } from '~utils'; +import { createServer, ViteDevServer } from 'vite'; + +describe('raw', () => { + test('does not have failed requests', async () => { + browserLogs.forEach((msg) => { + expect(msg).not.toMatch('404'); + }); }); -}); - -test('Dummy.svelte', async () => { - expect(await getText('#component button')).toBe('dummy clicks: 0'); -}); - -test('Dummy.svelte?raw', async () => { - const result = await getText('#raw'); - expect(result).toMatchInlineSnapshot(` - " - - - " - `); -}); - -test('Dummy.svelte?raw&svelte&type=preprocessed', async () => { - const result = await getText('#preprocessed'); - expect(result).toMatchInlineSnapshot(` - " - - - " - `); -}); - -test('Dummy.svelte?raw&svelte&type=script&compileOptions={"customElement":true,"dev":false}', async () => { - const result = await getText('#wcScript'); - expect(result).toMatchInlineSnapshot(` - "/* src/Dummy.svelte generated by Svelte v3.53.1 */ - import { - SvelteElement as SvelteElement$, - append as append$, - attribute_to_object as attribute_to_object$, - detach as detach$, - element as element$, - flush as flush$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ - } from \\"svelte/internal\\"; - - function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$(\\"button\\"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(\\" clicks: \\"); - t2$ = text$(/*clicks*/ ctx[1]); - this.c = noop$; - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; - } - - function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; - } - - class Dummy$ extends SvelteElement$ { - constructor(options) { - super(); - this.shadowRoot.innerHTML = \`\`; - init$( - this, - { - target: this.shadowRoot, - props: attribute_to_object$(this.attributes), - customElement: true - }, - instance$, - create_fragment, - safe_not_equal$, - { name: 0 }, - null - ); - - if (options) { - if (options.target) { - insert$(options.target, this, options.anchor); - } + test('Dummy.svelte', async () => { + expect(await getText('#component button')).toBe('dummy clicks: 0'); + }); - if (options.props) { - this.$set(options.props); - flush$(); - } - } - } + test('Dummy.svelte?raw', async () => { + const result = await getText('#raw'); + expect(result).toMatchSnapshot(); + }); - static get observedAttributes() { - return [\\"name\\"]; - } + test('Dummy.svelte?raw&svelte&type=preprocessed', async () => { + const result = await getText('#preprocessed'); + expect(result).toMatchSnapshot(); + }); - get name() { - return this.$$.ctx[0]; - } + test(`Dummy.svelte?raw&svelte&type=script`, async () => { + const result = await getText('#script'); + expect(result).toMatchSnapshot(); + }); - set name(name) { - this.$$set({ name }); - flush$(); - } - } + test('Dummy.svelte?raw&svelte&type=script&compileOptions={"customElement":true}', async () => { + const result = await getText('#wcScript'); + expect(result).toMatchSnapshot(); + }); - export default Dummy$;" - `); + test('Dummy.svelte?raw&svelte&type=style', async () => { + const result = await getText('#style'); + expect(result).toMatchSnapshot(); + }); }); -test('Dummy.svelte?raw&svelte&type=style', async () => { - const result = await getText('#style'); - expect(result).toMatchInlineSnapshot('"button.svelte-d8vj6a{color:#000099}"'); +// vitest prints a warning about obsolete snapshots during build tests, ignore it, they are used in dev tests. +// always regenerate snapshots with `pnpm test:serve import-queries -u` and check the diffs if they are correct +describe.runIf(isBuild)('snapshots not obsolete warning', async () => { + afterAll(() => { + console.log( + 'Ignore the obsolete snapshot warnings for ssrLoadModule snapshots from vitest during test:build, they are used in test:serve' + ); + }); + test('suite not empty', () => { + expect(true).toBe(true); + }); }); -if (isBuild) { - // needs to be different because dev raw script expected result is different from build raw script - test(`build: Dummy.svelte?raw&svelte&type=script`, async () => { - const result = await getText('#script'); - expect(result).toMatchInlineSnapshot(` - "/* src/Dummy.svelte generated by Svelte v3.53.1 */ - import { - SvelteComponent as SvelteComponent$, - append as append$, - attr as attr$, - detach as detach$, - element as element$, - init as init$, - insert as insert$, - listen as listen$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data as set_data$, - text as text$ - } from \\"svelte/internal\\"; - - function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - return { - c() { - button$ = element$(\\"button\\"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(\\" clicks: \\"); - t2$ = text$(/*clicks*/ ctx[1]); - attr$(button$, \\"class\\", \\"svelte-d8vj6a\\"); - }, - m(target, anchor) { - insert$(target, button$, anchor); - append$(button$, t0$); - append$(button$, t1$); - append$(button$, t2$); - - if (!mounted) { - dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]); - mounted = true; - } - }, - p(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d(detaching) { - if (detaching) detach$(button$); - mounted = false; - dispose(); - } - }; - } - - function instance$($$self, $$props, $$invalidate) { - let { name } = $$props; - let clicks = 0; - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - return [name, clicks, click_handler$]; - } - - class Dummy$ extends SvelteComponent$ { - constructor(options) { - super(); - init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); - } - } - - export default Dummy$;" - `); +describe.runIf(!isBuild)('direct', () => { + test('Dummy.svelte?direct&svelte&type=style&lang.css', async () => { + const response = await fetchFromPage('src/Dummy.svelte?direct&svelte&type=style&lang.css', { + headers: { Accept: 'text/css' } + }); + expect(response.ok).toBe(true); + expect(response.headers.get('Content-Type')).toBe('text/css'); + const css = await response.text(); + expect(css).toMatchSnapshot(); }); -} else { - test(`dev: Dummy.svelte?raw&svelte&type=script`, async () => { - const result = await getText('#script'); - expect(result).toMatchInlineSnapshot(` - "/* src/Dummy.svelte generated by Svelte v3.53.1 */ - import { - SvelteComponentDev as SvelteComponentDev$, - add_location as add_location$, - append_dev as append_dev$, - attr_dev as attr_dev$, - detach_dev as detach_dev$, - dispatch_dev as dispatch_dev$, - element as element$, - globals as globals$, - init as init$, - insert_dev as insert_dev$, - listen_dev as listen_dev$, - noop as noop$, - safe_not_equal as safe_not_equal$, - set_data_dev as set_data_dev$, - text as text$, - validate_slots as validate_slots$ - } from \\"svelte/internal\\"; - - const { Error: Error$, Object: Object$, console: console$ } = globals$; - const file$ = \\"src/Dummy.svelte\\"; - - function create_fragment(ctx) { - let button$; - let t0$; - let t1$; - let t2$; - let mounted; - let dispose; - - const block$ = { - c: function create() { - button$ = element$(\\"button\\"); - t0$ = text$(/*name*/ ctx[0]); - t1$ = text$(\\" clicks: \\"); - t2$ = text$(/*clicks*/ ctx[1]); - attr_dev$(button$, \\"class\\", \\"svelte-d8vj6a\\"); - add_location$(button$, file$, 3, 0, 61); - }, - l: function claim(nodes) { - throw new Error$(\\"options.hydrate only works if the component was compiled with the \`hydratable: true\` option\\"); - }, - m: function mount(target, anchor) { - insert_dev$(target, button$, anchor); - append_dev$(button$, t0$); - append_dev$(button$, t1$); - append_dev$(button$, t2$); - - if (!mounted) { - dispose = listen_dev$(button$, \\"click\\", /*click_handler$*/ ctx[2], false, false, false); - mounted = true; - } - }, - p: function update(ctx, [dirty]) { - if (dirty & /*name*/ 1) set_data_dev$(t0$, /*name*/ ctx[0]); - if (dirty & /*clicks*/ 2) set_data_dev$(t2$, /*clicks*/ ctx[1]); - }, - i: noop$, - o: noop$, - d: function destroy(detaching) { - if (detaching) detach_dev$(button$); - mounted = false; - dispose(); - } - }; - - dispatch_dev$(\\"SvelteRegisterBlock\\", { - block: block$, - id: create_fragment.name, - type: \\"component\\", - source: \\"\\", - ctx - }); - - return block$; - } - - function instance$($$self, $$props, $$invalidate) { - let { $$slots: slots = {}, $$scope } = $$props; - validate_slots$('Dummy', slots, []); - let { name } = $$props; - let clicks = 0; - - $$self.$$.on_mount.push(function () { - if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) { - console$.warn(\\" was created without expected prop 'name'\\"); - } - }); - - const writable_props = ['name']; - - Object$.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console$.warn(\` was created with unknown prop '\${key}'\`); - }); - - const click_handler$ = () => { - $$invalidate(1, clicks++, clicks); - }; - - $$self.$$set = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - }; - - $$self.$capture_state = () => ({ name, clicks }); - - $$self.$inject_state = $$props => { - if ('name' in $$props) $$invalidate(0, name = $$props.name); - if ('clicks' in $$props) $$invalidate(1, clicks = $$props.clicks); - }; - - if ($$props && \\"$$inject\\" in $$props) { - $$self.$inject_state($$props.$$inject); - } - - return [name, clicks, click_handler$]; - } - - class Dummy$ extends SvelteComponentDev$ { - constructor(options) { - super(options); - init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 }); - - dispatch_dev$(\\"SvelteRegisterComponent\\", { - component: this, - tagName: \\"Dummy$\\", - options, - id: create_fragment.name - }); - } - - get name() { - throw new Error$(\\": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''\\"); - } - - set name(value) { - throw new Error$(\\": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''\\"); - } - } + test('Dummy.svelte?direct&svelte&type=script', async () => { + const response = await fetchFromPage('src/Dummy.svelte?direct&svelte&type=script', { + headers: { Accept: 'application/javascript' } + }); + expect(response.ok).toBe(true); + expect(response.headers.get('Content-Type')).toBe('application/javascript'); + const js = await response.text(); + // during dev, the import is rewritten but can vary on the v= hash. replace with stable short import + const stableJS = js.replace( + /\/node_modules\/\.vite\/deps\/svelte_internal\.js\?v=[0-9a-f]{8}/, + 'svelte/internal' + ); + expect(stableJS).toMatchSnapshot(); + }); +}); - export default Dummy$;" - `); +describe.runIf(!isBuild)('ssrLoadModule', () => { + let vite: ViteDevServer; + let ssrLoadDummy; + beforeAll(async () => { + vite = await createServer({ + root: testDir + '/', + appType: 'custom', + server: { middlewareMode: true, hmr: false } + }); + // needed to init plugins + await vite.pluginContainer.buildStart({}); + ssrLoadDummy = async (query) => + vite + .ssrLoadModule('./src/Dummy.svelte' + query, { fixStacktrace: true }) + .then((m) => m.default?.code ?? m.default); + }); + afterAll(async () => { + await vite.close(); + vite = null; + ssrLoadDummy = null; + }); + test('?raw', async () => { + const result = await ssrLoadDummy('?raw'); + expect(result).toMatchSnapshot(); + }); + test('?raw&svelte&type=preprocessed', async () => { + const result = await ssrLoadDummy('?raw&svelte&type=preprocessed'); + expect(result).toMatchSnapshot(); }); -} + test('?raw&svelte&type=script', async () => { + const result = await ssrLoadDummy('?raw&svelte&type=script'); + expect(result).toMatchSnapshot(); + }); + test('?raw&svelte&type=script&compileOptions={"customElement":true}', async () => { + const result = await ssrLoadDummy( + '?raw&svelte&type=script&compileOptions={"customElement":true}' + ); + expect(result).toMatchSnapshot(); + }); + test('?raw&svelte&type=style', async () => { + const result = await ssrLoadDummy('?raw&svelte&type=style'); + expect(result).toMatchSnapshot(); + }); +}); diff --git a/packages/e2e-tests/import-queries/svelte.config.js b/packages/e2e-tests/import-queries/svelte.config.js index b44f034a9..f3a4f4ccb 100644 --- a/packages/e2e-tests/import-queries/svelte.config.js +++ b/packages/e2e-tests/import-queries/svelte.config.js @@ -3,5 +3,10 @@ export default { experimental: { useVitePreprocess: true } + }, + onwarn(warning, defaultHandler) { + // import query test generates one of these + if (warning.code === 'custom-element-no-tag') return; + defaultHandler(warning); } }; diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts index a87cf517c..eea67ae6d 100644 --- a/packages/e2e-tests/testUtils.ts +++ b/packages/e2e-tests/testUtils.ts @@ -269,6 +269,10 @@ export async function fetchPageText() { } } +export async function fetchFromPage(url, init?) { + const fullUrl = page.url() + (url.startsWith('/') ? url.slice(1) : url); + return fetch(fullUrl, init); +} export function readVitePrebundleMetadata() { const metadataPaths = [ 'node_modules/.vite/_metadata.json', diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts index d95ba777c..6bd3983e7 100644 --- a/packages/vite-plugin-svelte/src/index.ts +++ b/packages/vite-plugin-svelte/src/index.ts @@ -108,26 +108,52 @@ export function svelte(inlineOptions?: Partial): Plugin[] { const svelteRequest = requestParser(id, !!ssr); if (svelteRequest) { const { filename, query, raw } = svelteRequest; - // virtual css module - if (query.svelte && query.type === 'style') { - let css = cache.getCSS(svelteRequest); - if (!css && raw) { - // not cached, but plain requests may happen independently - // so compile for css on the fly - log.debug(`compiling for direct css request ${id}`); - css = ( - await compileSvelte(svelteRequest, fs.readFileSync(filename, 'utf-8'), options) - ).compiled.css; + if (raw) { + // raw svelte subrequest, compile on the fly and return requested subpart + let compileData; + try { + compileData = await compileSvelte( + svelteRequest, + fs.readFileSync(filename, 'utf-8'), + options + ); + } catch (e) { + throw toRollupError(e, options); + } + let result; + if (query.type === 'style') { + result = compileData.compiled.css; + } else if (query.type === 'script') { + result = compileData.compiled.js; + } else if (query.type === 'preprocessed') { + result = compileData.preprocessed; + } else { + throw new Error( + `invalid type value in ${svelteRequest.id}. supported are script, style, preprocessed` + ); } - if (css) { - log.debug(`load returns ${raw ? 'plain css' : 'css module code'} for ${filename}`); - return raw ? toDefaultExport(css) : css; + if (query.direct) { + log.debug(`load returns direct result for ${id}`); + return result.code; + } else if (query.raw) { + log.debug(`load returns raw result for ${id}`); + return toDefaultExport(result); + } else { + throw new Error(`invalid raw mode in ${svelteRequest.id}, supported are raw, direct`); + } + } else { + if (query.svelte && query.type === 'style') { + const css = cache.getCSS(svelteRequest); + if (css) { + log.debug(`load returns css for ${filename}`); + return css; + } + } + // prevent vite asset plugin from loading files as url that should be compiled in transform + if (viteConfig.assetsInclude(filename)) { + log.debug(`load returns raw content for ${filename}`); + return fs.readFileSync(filename, 'utf-8'); } - } - // prevent vite asset plugin from loading files as url that should be compiled in transform - if (viteConfig.assetsInclude(filename) || raw) { - log.debug(`load returns raw content for ${filename}`); - return fs.readFileSync(filename, 'utf-8'); } } }, @@ -194,13 +220,9 @@ export function svelte(inlineOptions?: Partial): Plugin[] { async transform(code, id, opts) { const ssr = !!opts?.ssr; const svelteRequest = requestParser(id, ssr); - if (!svelteRequest) { + if (!svelteRequest || svelteRequest.query.type === 'style' || svelteRequest.raw) { return; } - const { query, raw } = svelteRequest; - if (query.svelte && query.type === 'style') { - return; // styles are handled by load after js compile created a cached virtual module - } let compileData; try { compileData = await compileSvelte(svelteRequest, code, options); @@ -209,29 +231,13 @@ export function svelte(inlineOptions?: Partial): Plugin[] { throw toRollupError(e, options); } logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options); - - if (raw) { - // subquery for raw code - if (query.type === 'script') { - log.debug(`transform returns raw compiled js data for ${svelteRequest.filename}`); - return toDefaultExport(compileData.compiled.js); - } - if (query.type === 'preprocessed') { - log.debug(`transform returns raw preprocessed data for ${svelteRequest.filename}`); - return toDefaultExport(compileData.preprocessed); - } - throw new Error( - `invalid raw query in id: ${svelteRequest.id}. It has to be combined with a supported type.` - ); - } - cache.update(compileData); if (compileData.dependencies?.length && options.server) { compileData.dependencies.forEach((d) => { ensureWatchedFile(options.server!.watcher, d, options.root); }); } - log.debug(`transform returns compiled js module for ${svelteRequest.filename}`); + log.debug(`transform returns compiled js for ${svelteRequest.filename}`); return { ...compileData.compiled.js, meta: { diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index 2c7050477..4cb7dd62c 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -24,7 +24,7 @@ const _createCompileSvelte = (makeHot: Function) => { const { emitCss = true } = options; const dependencies = []; - if (options.stats) { + if (options.stats && !raw) { if (options.isBuild) { if (!stats) { // build is either completely ssr or csr, create stats collector on first compile @@ -55,16 +55,23 @@ const _createCompileSvelte = (makeHot: Function) => { generate: ssr ? 'ssr' : 'dom', format: 'esm' }; - if (options.hot && options.emitCss && !raw) { - const hash = `s-${safeBase64Hash(normalizedFilename)}`; - log.debug(`setting cssHash ${hash} for ${normalizedFilename}`); - compileOptions.cssHash = () => hash; - } - if (ssr && compileOptions.enableSourcemap !== false) { - if (typeof compileOptions.enableSourcemap === 'object') { - compileOptions.enableSourcemap.css = false; - } else { - compileOptions.enableSourcemap = { js: true, css: false }; + if (raw) { + // ensure raw queries compile consistently between dev and build, compileOptions query can be used to modify these + compileOptions.dev = false; + compileOptions.generate = 'dom'; + compileOptions.enableSourcemap = false; + } else { + if (options.hot && options.emitCss) { + const hash = `s-${safeBase64Hash(normalizedFilename)}`; + log.debug(`setting cssHash ${hash} for ${normalizedFilename}`); + compileOptions.cssHash = () => hash; + } + if (ssr && compileOptions.enableSourcemap !== false) { + if (typeof compileOptions.enableSourcemap === 'object') { + compileOptions.enableSourcemap.css = false; + } else { + compileOptions.enableSourcemap = { js: true, css: false }; + } } } @@ -91,6 +98,10 @@ const _createCompileSvelte = (makeHot: Function) => { if (preprocessed.dependencies) dependencies.push(...preprocessed.dependencies); if (preprocessed.map) compileOptions.sourcemap = preprocessed.map; } + if (raw && svelteRequest.query.type === 'preprocessed') { + // shortcut + return { preprocessed: preprocessed ?? { code } } as CompileData; + } const finalCode = preprocessed ? preprocessed.code : code; const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({ filename, @@ -109,7 +120,7 @@ const _createCompileSvelte = (makeHot: Function) => { } : compileOptions; - if (svelteRequest.query.compileOptions) { + if (raw && svelteRequest.query.compileOptions) { if (log.debug.enabled) { log.debug( `query compile options for ${filename}: ${JSON.stringify( diff --git a/packages/vite-plugin-svelte/src/utils/id.ts b/packages/vite-plugin-svelte/src/utils/id.ts index b14af2201..97cdfd1ef 100644 --- a/packages/vite-plugin-svelte/src/utils/id.ts +++ b/packages/vite-plugin-svelte/src/utils/id.ts @@ -15,7 +15,8 @@ const SUPPORTED_COMPILE_OPTIONS_IN_QUERY = [ 'css', 'hydratable', 'customElement', - 'immutable' + 'immutable', + 'enableSourcemap' ]; export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed'; @@ -29,7 +30,7 @@ export interface RequestQuery { direct?: boolean; compileOptions?: Pick< CompileOptions, - 'generate' | 'dev' | 'css' | 'hydratable' | 'customElement' | 'immutable' + 'generate' | 'dev' | 'css' | 'hydratable' | 'customElement' | 'immutable' | 'enableSourcemap' >; } From 241a4b0f2a20f1668209943c68996309864e6a6c Mon Sep 17 00:00:00 2001 From: dominikg Date: Mon, 28 Nov 2022 21:13:16 +0100 Subject: [PATCH 04/16] wip: add sourcemap query and inline sourcemaps to direct requests. improve error handling --- .../__snapshots__/import-queries.spec.ts.snap | 14 +++++++++--- .../__tests__/import-queries.spec.ts | 22 ++++++++++++------- packages/vite-plugin-svelte/src/index.ts | 21 ++++++++++++++++-- .../vite-plugin-svelte/src/utils/compile.ts | 9 +++++++- packages/vite-plugin-svelte/src/utils/id.ts | 9 ++++---- 5 files changed, 57 insertions(+), 18 deletions(-) diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap index 64786866c..1a9df4209 100644 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1 -exports[`direct > Dummy.svelte?direct&svelte&type=script 1`] = ` +exports[`direct > Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js 1`] = ` "/* src/Dummy.svelte generated by Svelte v3.53.1 */ import { SvelteComponent as SvelteComponent$, @@ -80,10 +80,18 @@ class Dummy$ extends SvelteComponent$ { } } -export default Dummy$;" +export default Dummy$; + +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQVFLLEdBQUk7ZUFBQyxXQUFTOzBCQUFDLEdBQU07Ozs7R0FIMUIsT0FJQTs7Ozs7Ozs7Ozs7bURBREssR0FBSTt1REFBVyxHQUFNOzs7Ozs7Ozs7Ozs7O09DUGQsSUFBQTtLQUNQLE1BQUEsR0FBUyxDQUFBOzs7a0JES1osTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIkR1bW15LnN2ZWx0ZSIsIi9ob21lL2RvbWluaWtnL2RldmVsb3Avc3ZlbHRlanMvdml0ZS1wbHVnaW4tc3ZlbHRlL3RlbXAvc2VydmUvaW1wb3J0LXF1ZXJpZXMvc3JjL0R1bW15LnN2ZWx0ZSJdfQ== +" `; -exports[`direct > Dummy.svelte?direct&svelte&type=style&lang.css 1`] = `"button.svelte-d8vj6a{color:#000099}"`; +exports[`direct > Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css 1`] = ` +"button.svelte-d8vj6a{color:#000099} + +/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHVtbXkuc3ZlbHRlIiwibWFwcGluZ3MiOiJBQVdrQixNQUFBLGNBQUEsQ0FBQSxjQUtsQiIsIm5hbWVzIjpbXSwic291cmNlcyI6WyJEdW1teS5zdmVsdGUiXX0= */ +" +`; exports[`raw > Dummy.svelte?raw 1`] = ` " diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts index 67b5c1296..f9bc851bd 100644 --- a/packages/vite-plugin-svelte/src/index.ts +++ b/packages/vite-plugin-svelte/src/index.ts @@ -23,6 +23,7 @@ import { toRollupError } from './utils/error'; import { saveSvelteMetadata } from './utils/optimizer'; import { svelteInspector } from './ui/inspector/plugin'; import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache'; +import { loadRaw } from './utils/load-raw'; interface PluginAPI { /** @@ -109,55 +110,7 @@ export function svelte(inlineOptions?: Partial): Plugin[] { if (svelteRequest) { const { filename, query, raw } = svelteRequest; if (raw) { - // raw svelte subrequest, compile on the fly and return requested subpart - let compileData; - try { - compileData = await compileSvelte( - svelteRequest, - fs.readFileSync(filename, 'utf-8'), - options - ); - } catch (e) { - throw toRollupError(e, options); - } - let result; - if (query.type === 'style') { - result = compileData.compiled.css; - } else if (query.type === 'script') { - result = compileData.compiled.js; - } else if (query.type === 'preprocessed') { - result = compileData.preprocessed; - } else { - throw new Error( - `invalid "type=${query.type}" in ${svelteRequest.id}. supported are script, style, preprocessed` - ); - } - if (query.direct) { - const supportedDirectTypes = ['script', 'style']; - if (!supportedDirectTypes.includes(query.type)) { - throw new Error( - `invalid "type=${query.type}" combined with direct in ${ - svelteRequest.id - }. supported are: ${supportedDirectTypes.join(', ')}` - ); - } - log.debug(`load returns direct result for ${id}`); - let directOutput = result.code; - if (query.sourcemap && result.map?.toUrl) { - const map = `sourceMappingURL=${result.map.toUrl()}`; - if (query.type === 'style') { - directOutput += `\n\n/*# ${map} */\n`; - } else if (query.type === 'script') { - directOutput += `\n\n//# ${map}\n`; - } - } - return directOutput; - } else if (query.raw) { - log.debug(`load returns raw result for ${id}`); - return toDefaultExport(result); - } else { - throw new Error(`invalid raw mode in ${svelteRequest.id}, supported are raw, direct`); - } + return loadRaw(svelteRequest, compileSvelte, options); } else { if (query.svelte && query.type === 'style') { const css = cache.getCSS(svelteRequest); @@ -305,7 +258,3 @@ export { } from './utils/options'; export { SvelteWarningsMessage } from './utils/log'; - -function toDefaultExport(object: object | string) { - return `export default ${JSON.stringify(object)}`; -} diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index 6d57fe65e..d2ad7b2f2 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -12,6 +12,8 @@ import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess'; const scriptLangRE = /\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"compiled\\":{\\"js\\":{\\"code\\":\\"/* src/Dummy.svelte generated by Svelte vXXX\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",\\"map\\":{\\"version\\":3,\\"mappings\\":\\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OCPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBDKZ,MAAM;;;;;;;;;;;;;;;;;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"/home/dominikg/develop/sveltejs/vite-plugin-svelte/temp/serve/import-queries/src/Dummy.svelte\\"]},\\"dependencies\\":[]},\\"css\\":{\\"code\\":\\"button.svelte-d8vj6a{color:#000099}\\",\\"map\\":{\\"version\\":3,\\"file\\":\\"Dummy.svelte\\",\\"mappings\\":\\"AAWkB,MAAA,cAAA,CAAA,cAKlB\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\"]}},\\"ast\\":{\\"html\\":{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Fragment\\",\\"children\\":[{\\"start\\":60,\\"end\\":62,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"},{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Element\\",\\"name\\":\\"button\\",\\"attributes\\":[{\\"start\\":71,\\"end\\":104,\\"type\\":\\"EventHandler\\",\\"name\\":\\"click\\",\\"modifiers\\":[],\\"expression\\":{\\"type\\":\\"ArrowFunctionExpression\\",\\"start\\":81,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":11},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"id\\":null,\\"expression\\":false,\\"generator\\":false,\\"async\\":false,\\"params\\":[],\\"body\\":{\\"type\\":\\"BlockStatement\\",\\"start\\":87,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":17},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"body\\":[{\\"type\\":\\"ExpressionStatement\\",\\"start\\":91,\\"end\\":100,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":11}},\\"expression\\":{\\"type\\":\\"UpdateExpression\\",\\"start\\":91,\\"end\\":99,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":10}},\\"operator\\":\\"++\\",\\"prefix\\":false,\\"argument\\":{\\"type\\":\\"Identifier\\",\\"start\\":91,\\"end\\":97,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":8}},\\"name\\":\\"clicks\\"}}}]}}}],\\"children\\":[{\\"start\\":105,\\"end\\":111,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":106,\\"end\\":110,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":5},\\"end\\":{\\"line\\":8,\\"column\\":9}},\\"name\\":\\"name\\"}},{\\"start\\":111,\\"end\\":120,\\"type\\":\\"Text\\",\\"raw\\":\\" clicks: \\",\\"data\\":\\" clicks: \\"},{\\"start\\":120,\\"end\\":128,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":121,\\"end\\":127,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":20},\\"end\\":{\\"line\\":8,\\"column\\":26}},\\"name\\":\\"clicks\\"}}]},{\\"start\\":138,\\"end\\":140,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"}]},\\"css\\":{\\"type\\":\\"Style\\",\\"start\\":140,\\"end\\":195,\\"attributes\\":[{\\"start\\":147,\\"end\\":158,\\"type\\":\\"Attribute\\",\\"name\\":\\"lang\\",\\"value\\":[{\\"start\\":153,\\"end\\":157,\\"type\\":\\"Text\\",\\"raw\\":\\"scss\\",\\"data\\":\\"scss\\"}]}],\\"children\\":[{\\"type\\":\\"Rule\\",\\"prelude\\":{\\"type\\":\\"SelectorList\\",\\"children\\":[{\\"type\\":\\"Selector\\",\\"children\\":[{\\"type\\":\\"TypeSelector\\",\\"name\\":\\"button\\",\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165},\\"block\\":{\\"type\\":\\"Block\\",\\"children\\":[{\\"type\\":\\"Declaration\\",\\"important\\":false,\\"property\\":\\"color\\",\\"value\\":{\\"type\\":\\"Value\\",\\"children\\":[{\\"type\\":\\"Hash\\",\\"value\\":\\"000099\\",\\"start\\":177,\\"end\\":184}],\\"start\\":177,\\"end\\":184},\\"start\\":170,\\"end\\":184}],\\"start\\":166,\\"end\\":187},\\"start\\":159,\\"end\\":187}],\\"content\\":{\\"start\\":159,\\"end\\":187,\\"styles\\":\\"button {\\\\n color: #000099;\\\\n}\\"}},\\"instance\\":{\\"type\\":\\"Script\\",\\"start\\":0,\\"end\\":60,\\"context\\":\\"default\\",\\"content\\":{\\"type\\":\\"Program\\",\\"start\\":18,\\"end\\":51,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":0},\\"end\\":{\\"line\\":3,\\"column\\":0}},\\"body\\":[{\\"type\\":\\"ExportNamedDeclaration\\",\\"start\\":18,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":18},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declaration\\":{\\"type\\":\\"VariableDeclaration\\",\\"start\\":25,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":25},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"name\\":\\"name\\"},\\"init\\":null}],\\"kind\\":\\"let\\"},\\"specifiers\\":[],\\"source\\":null},{\\"type\\":\\"VariableDeclaration\\",\\"start\\":35,\\"end\\":50,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":0},\\"end\\":{\\"line\\":2,\\"column\\":15}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":39,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":39,\\"end\\":45,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":10}},\\"name\\":\\"clicks\\"},\\"init\\":{\\"type\\":\\"Literal\\",\\"start\\":48,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":13},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"value\\":0,\\"raw\\":\\"0\\"}}],\\"kind\\":\\"let\\"}],\\"sourceType\\":\\"module\\"}}},\\"warnings\\":[],\\"vars\\":[{\\"name\\":\\"name\\",\\"export_name\\":\\"name\\",\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":false,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false},{\\"name\\":\\"clicks\\",\\"export_name\\":null,\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":true,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false}],\\"stats\\":{\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}}}}"`; + exports[`raw > Dummy.svelte?raw&svelte&type=preprocessed 1`] = ` "
@@ -18,6 +19,8 @@ 
{wcScript.code}

style

{style.code}
+

all

+ 
{JSON.stringify(all)}

Component

diff --git a/packages/vite-plugin-svelte/src/utils/id.ts b/packages/vite-plugin-svelte/src/utils/id.ts index 64434d27d..b8b3a6e4d 100644 --- a/packages/vite-plugin-svelte/src/utils/id.ts +++ b/packages/vite-plugin-svelte/src/utils/id.ts @@ -9,7 +9,8 @@ import { log } from './log'; const VITE_FS_PREFIX = '/@fs/'; const IS_WINDOWS = process.platform === 'win32'; -const SUPPORTED_COMPILE_OPTIONS_IN_QUERY = [ + +const SUPPORTED_COMPILER_OPTIONS = [ 'generate', 'dev', 'css', @@ -18,7 +19,9 @@ const SUPPORTED_COMPILE_OPTIONS_IN_QUERY = [ 'immutable', 'enableSourcemap' ]; -export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed'; +const TYPES_WITH_COMPILER_OPTIONS = ['style', 'script', 'all']; + +export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed' | 'all'; export interface RequestQuery { // our own @@ -109,26 +112,28 @@ function parseRequestQuery(rawQuery: string): RequestQuery { } const compilerOptions = query.compilerOptions; if (compilerOptions) { - if (!(query.raw && (query.type === 'script' || query.type === 'style'))) { + if (!((query.raw || query.direct) && TYPES_WITH_COMPILER_OPTIONS.includes(query.type))) { throw new Error( - `Invalid compilerOptions in query ${rawQuery}. CompileOptions are only supported for raw script or style queries, eg '?svelte&raw&type=script&compileOptions={"generate":"ssr","dev":false}` + `Invalid compilerOptions in query ${rawQuery}. CompilerOptions are only supported for raw or direct queries with type in "${TYPES_WITH_COMPILER_OPTIONS.join( + ', ' + )}" e.g. '?svelte&raw&type=script&compilerOptions={"generate":"ssr","dev":false}` ); } try { const parsed = JSON.parse(compilerOptions); const invalid = Object.keys(parsed).filter( - (key) => !SUPPORTED_COMPILE_OPTIONS_IN_QUERY.includes(key) + (key) => !SUPPORTED_COMPILER_OPTIONS.includes(key) ); if (invalid.length) { throw new Error( - `Invalid compileOptions in query ${rawQuery}: ${invalid.join( + `Invalid compilerOptions in query ${rawQuery}: ${invalid.join( ', ' - )}. Supported: ${SUPPORTED_COMPILE_OPTIONS_IN_QUERY.join(', ')}` + )}. Supported: ${SUPPORTED_COMPILER_OPTIONS.join(', ')}` ); } query.compilerOptions = parsed; } catch (e) { - log.error('failed to parse request query compileOptions', e); + log.error('failed to parse request query compilerOptions', e); throw e; } } diff --git a/packages/vite-plugin-svelte/src/utils/load-raw.ts b/packages/vite-plugin-svelte/src/utils/load-raw.ts index 294830b17..2a6ea2903 100644 --- a/packages/vite-plugin-svelte/src/utils/load-raw.ts +++ b/packages/vite-plugin-svelte/src/utils/load-raw.ts @@ -17,21 +17,22 @@ export async function loadRaw( // raw svelte subrequest, compile on the fly and return requested subpart let compileData; + const source = fs.readFileSync(filename, 'utf-8'); try { //avoid compileSvelte doing extra ssr stuff unless requested - svelteRequest.ssr = svelteRequest.query.compilerOptions?.generate === 'ssr'; - - compileData = await compileSvelte(svelteRequest, fs.readFileSync(filename, 'utf-8'), { + svelteRequest.ssr = query.compilerOptions?.generate === 'ssr'; + const type = query.type; + compileData = await compileSvelte(svelteRequest, source, { ...options, // don't use dynamic vite-plugin-svelte defaults here to ensure stable result between ssr,dev and build compilerOptions: { dev: false, css: false, hydratable: false, - enableSourcemap: svelteRequest.query.sourcemap + enableSourcemap: query.sourcemap ? { - js: svelteRequest.query.type === 'script', - css: svelteRequest.query.type === 'style' + js: type === 'script' || type === 'all', + css: type === 'style' || type === 'all' } : false, ...svelteRequest.query.compilerOptions @@ -49,18 +50,20 @@ export async function loadRaw( result = compileData.compiled.js; } else if (query.type === 'preprocessed') { result = compileData.preprocessed; + } else if (query.type === 'all') { + return toDefaultExport({ source, compiled: compileData.compiled }); } else { throw new Error( - `invalid "type=${query.type}" in ${svelteRequest.id}. supported are script, style, preprocessed` + `invalid "type=${query.type}" in ${id}. supported are script, style, preprocessed, all` ); } if (query.direct) { const supportedDirectTypes = ['script', 'style']; if (!supportedDirectTypes.includes(query.type)) { throw new Error( - `invalid "type=${query.type}" combined with direct in ${ - svelteRequest.id - }. supported are: ${supportedDirectTypes.join(', ')}` + `invalid "type=${ + query.type + }" combined with direct in ${id}. supported are: ${supportedDirectTypes.join(', ')}` ); } log.debug(`load returns direct result for ${id}`); @@ -78,7 +81,7 @@ export async function loadRaw( log.debug(`load returns raw result for ${id}`); return toDefaultExport(result); } else { - throw new Error(`invalid raw mode in ${svelteRequest.id}, supported are raw, direct`); + throw new Error(`invalid raw mode in ${id}, supported are raw, direct`); } } From 5181e312f42cf04d586fafb888c852353ff95d17 Mon Sep 17 00:00:00 2001 From: dominikg Date: Tue, 29 Nov 2022 14:40:15 +0100 Subject: [PATCH 08/16] fix: heal pnpm-lock --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cc7be74dd..292f1ce67 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -256,7 +256,7 @@ importers: '@sveltejs/vite-plugin-svelte': link:../../vite-plugin-svelte sass: 1.56.1 svelte: 3.53.1 - vite: 3.2.3_sass@1.56.1 + vite: 3.2.4_sass@1.56.1 packages/e2e-tests/inspector-kit: specifiers: From 01de8112a0dcbd3b10472d824730cea0851bc824 Mon Sep 17 00:00:00 2001 From: dominikg Date: Thu, 1 Dec 2022 11:50:26 +0100 Subject: [PATCH 09/16] fix: improve snapshot normalization, sourcemap output included absolute path to testDir, which differs between serve and build tests --- .../__snapshots__/import-queries.spec.ts.snap | 491 +++++++++++++++++- .../__tests__/import-queries.spec.ts | 6 +- .../e2e-tests/import-queries/src/App.svelte | 6 +- 3 files changed, 492 insertions(+), 11 deletions(-) diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap index 99348e9ec..4ec413b22 100644 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1 exports[`direct > Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js 1`] = ` -"/* src/Dummy.svelte generated by Svelte vXXX +"/* src/Dummy.svelte generated by Svelte vXXX */ import { SvelteComponent as SvelteComponent$, append as append$, @@ -114,7 +114,486 @@ exports[`raw > Dummy.svelte?raw 1`] = ` " `; -exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = `"{\\"source\\":\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"compiled\\":{\\"js\\":{\\"code\\":\\"/* src/Dummy.svelte generated by Svelte vXXX\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",\\"map\\":{\\"version\\":3,\\"mappings\\":\\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OCPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBDKZ,MAAM;;;;;;;;;;;;;;;;;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"/home/dominikg/develop/sveltejs/vite-plugin-svelte/temp/serve/import-queries/src/Dummy.svelte\\"]},\\"dependencies\\":[]},\\"css\\":{\\"code\\":\\"button.svelte-d8vj6a{color:#000099}\\",\\"map\\":{\\"version\\":3,\\"file\\":\\"Dummy.svelte\\",\\"mappings\\":\\"AAWkB,MAAA,cAAA,CAAA,cAKlB\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\"]}},\\"ast\\":{\\"html\\":{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Fragment\\",\\"children\\":[{\\"start\\":60,\\"end\\":62,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"},{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Element\\",\\"name\\":\\"button\\",\\"attributes\\":[{\\"start\\":71,\\"end\\":104,\\"type\\":\\"EventHandler\\",\\"name\\":\\"click\\",\\"modifiers\\":[],\\"expression\\":{\\"type\\":\\"ArrowFunctionExpression\\",\\"start\\":81,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":11},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"id\\":null,\\"expression\\":false,\\"generator\\":false,\\"async\\":false,\\"params\\":[],\\"body\\":{\\"type\\":\\"BlockStatement\\",\\"start\\":87,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":17},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"body\\":[{\\"type\\":\\"ExpressionStatement\\",\\"start\\":91,\\"end\\":100,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":11}},\\"expression\\":{\\"type\\":\\"UpdateExpression\\",\\"start\\":91,\\"end\\":99,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":10}},\\"operator\\":\\"++\\",\\"prefix\\":false,\\"argument\\":{\\"type\\":\\"Identifier\\",\\"start\\":91,\\"end\\":97,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":8}},\\"name\\":\\"clicks\\"}}}]}}}],\\"children\\":[{\\"start\\":105,\\"end\\":111,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":106,\\"end\\":110,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":5},\\"end\\":{\\"line\\":8,\\"column\\":9}},\\"name\\":\\"name\\"}},{\\"start\\":111,\\"end\\":120,\\"type\\":\\"Text\\",\\"raw\\":\\" clicks: \\",\\"data\\":\\" clicks: \\"},{\\"start\\":120,\\"end\\":128,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":121,\\"end\\":127,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":20},\\"end\\":{\\"line\\":8,\\"column\\":26}},\\"name\\":\\"clicks\\"}}]},{\\"start\\":138,\\"end\\":140,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"}]},\\"css\\":{\\"type\\":\\"Style\\",\\"start\\":140,\\"end\\":195,\\"attributes\\":[{\\"start\\":147,\\"end\\":158,\\"type\\":\\"Attribute\\",\\"name\\":\\"lang\\",\\"value\\":[{\\"start\\":153,\\"end\\":157,\\"type\\":\\"Text\\",\\"raw\\":\\"scss\\",\\"data\\":\\"scss\\"}]}],\\"children\\":[{\\"type\\":\\"Rule\\",\\"prelude\\":{\\"type\\":\\"SelectorList\\",\\"children\\":[{\\"type\\":\\"Selector\\",\\"children\\":[{\\"type\\":\\"TypeSelector\\",\\"name\\":\\"button\\",\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165},\\"block\\":{\\"type\\":\\"Block\\",\\"children\\":[{\\"type\\":\\"Declaration\\",\\"important\\":false,\\"property\\":\\"color\\",\\"value\\":{\\"type\\":\\"Value\\",\\"children\\":[{\\"type\\":\\"Hash\\",\\"value\\":\\"000099\\",\\"start\\":177,\\"end\\":184}],\\"start\\":177,\\"end\\":184},\\"start\\":170,\\"end\\":184}],\\"start\\":166,\\"end\\":187},\\"start\\":159,\\"end\\":187}],\\"content\\":{\\"start\\":159,\\"end\\":187,\\"styles\\":\\"button {\\\\n color: #000099;\\\\n}\\"}},\\"instance\\":{\\"type\\":\\"Script\\",\\"start\\":0,\\"end\\":60,\\"context\\":\\"default\\",\\"content\\":{\\"type\\":\\"Program\\",\\"start\\":18,\\"end\\":51,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":0},\\"end\\":{\\"line\\":3,\\"column\\":0}},\\"body\\":[{\\"type\\":\\"ExportNamedDeclaration\\",\\"start\\":18,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":18},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declaration\\":{\\"type\\":\\"VariableDeclaration\\",\\"start\\":25,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":25},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"name\\":\\"name\\"},\\"init\\":null}],\\"kind\\":\\"let\\"},\\"specifiers\\":[],\\"source\\":null},{\\"type\\":\\"VariableDeclaration\\",\\"start\\":35,\\"end\\":50,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":0},\\"end\\":{\\"line\\":2,\\"column\\":15}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":39,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":39,\\"end\\":45,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":10}},\\"name\\":\\"clicks\\"},\\"init\\":{\\"type\\":\\"Literal\\",\\"start\\":48,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":13},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"value\\":0,\\"raw\\":\\"0\\"}}],\\"kind\\":\\"let\\"}],\\"sourceType\\":\\"module\\"}}},\\"warnings\\":[],\\"vars\\":[{\\"name\\":\\"name\\",\\"export_name\\":\\"name\\",\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":false,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false},{\\"name\\":\\"clicks\\",\\"export_name\\":null,\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":true,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false}],\\"stats\\":{\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}}}}"`; +exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` +"{ + \\"source\\": \\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\", + \\"compiled\\": { + \\"js\\": { + \\"code\\": \\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\", + \\"map\\": { + \\"version\\": 3, + \\"mappings\\": \\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OCPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBDKZ,MAAM;;;;;;;;;;;;;;;;;\\", + \\"names\\": [], + \\"sources\\": [ + \\"Dummy.svelte\\", + \\"/src/Dummy.svelte\\" + ] + }, + \\"dependencies\\": [] + }, + \\"css\\": { + \\"code\\": \\"button.svelte-d8vj6a{color:#000099}\\", + \\"map\\": { + \\"version\\": 3, + \\"file\\": \\"Dummy.svelte\\", + \\"mappings\\": \\"AAWkB,MAAA,cAAA,CAAA,cAKlB\\", + \\"names\\": [], + \\"sources\\": [ + \\"Dummy.svelte\\" + ] + } + }, + \\"ast\\": { + \\"html\\": { + \\"start\\": 62, + \\"end\\": 138, + \\"type\\": \\"Fragment\\", + \\"children\\": [ + { + \\"start\\": 60, + \\"end\\": 62, + \\"type\\": \\"Text\\", + \\"raw\\": \\"\\\\n\\\\n\\", + \\"data\\": \\"\\\\n\\\\n\\" + }, + { + \\"start\\": 62, + \\"end\\": 138, + \\"type\\": \\"Element\\", + \\"name\\": \\"button\\", + \\"attributes\\": [ + { + \\"start\\": 71, + \\"end\\": 104, + \\"type\\": \\"EventHandler\\", + \\"name\\": \\"click\\", + \\"modifiers\\": [], + \\"expression\\": { + \\"type\\": \\"ArrowFunctionExpression\\", + \\"start\\": 81, + \\"end\\": 103, + \\"loc\\": { + \\"start\\": { + \\"line\\": 6, + \\"column\\": 11 + }, + \\"end\\": { + \\"line\\": 8, + \\"column\\": 2 + } + }, + \\"id\\": null, + \\"expression\\": false, + \\"generator\\": false, + \\"async\\": false, + \\"params\\": [], + \\"body\\": { + \\"type\\": \\"BlockStatement\\", + \\"start\\": 87, + \\"end\\": 103, + \\"loc\\": { + \\"start\\": { + \\"line\\": 6, + \\"column\\": 17 + }, + \\"end\\": { + \\"line\\": 8, + \\"column\\": 2 + } + }, + \\"body\\": [ + { + \\"type\\": \\"ExpressionStatement\\", + \\"start\\": 91, + \\"end\\": 100, + \\"loc\\": { + \\"start\\": { + \\"line\\": 7, + \\"column\\": 2 + }, + \\"end\\": { + \\"line\\": 7, + \\"column\\": 11 + } + }, + \\"expression\\": { + \\"type\\": \\"UpdateExpression\\", + \\"start\\": 91, + \\"end\\": 99, + \\"loc\\": { + \\"start\\": { + \\"line\\": 7, + \\"column\\": 2 + }, + \\"end\\": { + \\"line\\": 7, + \\"column\\": 10 + } + }, + \\"operator\\": \\"++\\", + \\"prefix\\": false, + \\"argument\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 91, + \\"end\\": 97, + \\"loc\\": { + \\"start\\": { + \\"line\\": 7, + \\"column\\": 2 + }, + \\"end\\": { + \\"line\\": 7, + \\"column\\": 8 + } + }, + \\"name\\": \\"clicks\\" + } + } + } + ] + } + } + } + ], + \\"children\\": [ + { + \\"start\\": 105, + \\"end\\": 111, + \\"type\\": \\"MustacheTag\\", + \\"expression\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 106, + \\"end\\": 110, + \\"loc\\": { + \\"start\\": { + \\"line\\": 8, + \\"column\\": 5 + }, + \\"end\\": { + \\"line\\": 8, + \\"column\\": 9 + } + }, + \\"name\\": \\"name\\" + } + }, + { + \\"start\\": 111, + \\"end\\": 120, + \\"type\\": \\"Text\\", + \\"raw\\": \\" clicks: \\", + \\"data\\": \\" clicks: \\" + }, + { + \\"start\\": 120, + \\"end\\": 128, + \\"type\\": \\"MustacheTag\\", + \\"expression\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 121, + \\"end\\": 127, + \\"loc\\": { + \\"start\\": { + \\"line\\": 8, + \\"column\\": 20 + }, + \\"end\\": { + \\"line\\": 8, + \\"column\\": 26 + } + }, + \\"name\\": \\"clicks\\" + } + } + ] + }, + { + \\"start\\": 138, + \\"end\\": 140, + \\"type\\": \\"Text\\", + \\"raw\\": \\"\\\\n\\\\n\\", + \\"data\\": \\"\\\\n\\\\n\\" + } + ] + }, + \\"css\\": { + \\"type\\": \\"Style\\", + \\"start\\": 140, + \\"end\\": 195, + \\"attributes\\": [ + { + \\"start\\": 147, + \\"end\\": 158, + \\"type\\": \\"Attribute\\", + \\"name\\": \\"lang\\", + \\"value\\": [ + { + \\"start\\": 153, + \\"end\\": 157, + \\"type\\": \\"Text\\", + \\"raw\\": \\"scss\\", + \\"data\\": \\"scss\\" + } + ] + } + ], + \\"children\\": [ + { + \\"type\\": \\"Rule\\", + \\"prelude\\": { + \\"type\\": \\"SelectorList\\", + \\"children\\": [ + { + \\"type\\": \\"Selector\\", + \\"children\\": [ + { + \\"type\\": \\"TypeSelector\\", + \\"name\\": \\"button\\", + \\"start\\": 159, + \\"end\\": 165 + } + ], + \\"start\\": 159, + \\"end\\": 165 + } + ], + \\"start\\": 159, + \\"end\\": 165 + }, + \\"block\\": { + \\"type\\": \\"Block\\", + \\"children\\": [ + { + \\"type\\": \\"Declaration\\", + \\"important\\": false, + \\"property\\": \\"color\\", + \\"value\\": { + \\"type\\": \\"Value\\", + \\"children\\": [ + { + \\"type\\": \\"Hash\\", + \\"value\\": \\"000099\\", + \\"start\\": 177, + \\"end\\": 184 + } + ], + \\"start\\": 177, + \\"end\\": 184 + }, + \\"start\\": 170, + \\"end\\": 184 + } + ], + \\"start\\": 166, + \\"end\\": 187 + }, + \\"start\\": 159, + \\"end\\": 187 + } + ], + \\"content\\": { + \\"start\\": 159, + \\"end\\": 187, + \\"styles\\": \\"button {\\\\n color: #000099;\\\\n}\\" + } + }, + \\"instance\\": { + \\"type\\": \\"Script\\", + \\"start\\": 0, + \\"end\\": 60, + \\"context\\": \\"default\\", + \\"content\\": { + \\"type\\": \\"Program\\", + \\"start\\": 18, + \\"end\\": 51, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 0 + }, + \\"end\\": { + \\"line\\": 3, + \\"column\\": 0 + } + }, + \\"body\\": [ + { + \\"type\\": \\"ExportNamedDeclaration\\", + \\"start\\": 18, + \\"end\\": 34, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 18 + }, + \\"end\\": { + \\"line\\": 1, + \\"column\\": 34 + } + }, + \\"declaration\\": { + \\"type\\": \\"VariableDeclaration\\", + \\"start\\": 25, + \\"end\\": 34, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 25 + }, + \\"end\\": { + \\"line\\": 1, + \\"column\\": 34 + } + }, + \\"declarations\\": [ + { + \\"type\\": \\"VariableDeclarator\\", + \\"start\\": 29, + \\"end\\": 33, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 29 + }, + \\"end\\": { + \\"line\\": 1, + \\"column\\": 33 + } + }, + \\"id\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 29, + \\"end\\": 33, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 29 + }, + \\"end\\": { + \\"line\\": 1, + \\"column\\": 33 + } + }, + \\"name\\": \\"name\\" + }, + \\"init\\": null + } + ], + \\"kind\\": \\"let\\" + }, + \\"specifiers\\": [], + \\"source\\": null + }, + { + \\"type\\": \\"VariableDeclaration\\", + \\"start\\": 35, + \\"end\\": 50, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 0 + }, + \\"end\\": { + \\"line\\": 2, + \\"column\\": 15 + } + }, + \\"declarations\\": [ + { + \\"type\\": \\"VariableDeclarator\\", + \\"start\\": 39, + \\"end\\": 49, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 4 + }, + \\"end\\": { + \\"line\\": 2, + \\"column\\": 14 + } + }, + \\"id\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 39, + \\"end\\": 45, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 4 + }, + \\"end\\": { + \\"line\\": 2, + \\"column\\": 10 + } + }, + \\"name\\": \\"clicks\\" + }, + \\"init\\": { + \\"type\\": \\"Literal\\", + \\"start\\": 48, + \\"end\\": 49, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 13 + }, + \\"end\\": { + \\"line\\": 2, + \\"column\\": 14 + } + }, + \\"value\\": 0, + \\"raw\\": \\"0\\" + } + } + ], + \\"kind\\": \\"let\\" + } + ], + \\"sourceType\\": \\"module\\" + } + } + }, + \\"warnings\\": [], + \\"vars\\": [ + { + \\"name\\": \\"name\\", + \\"export_name\\": \\"name\\", + \\"injected\\": false, + \\"module\\": false, + \\"mutated\\": false, + \\"reassigned\\": false, + \\"referenced\\": true, + \\"writable\\": true, + \\"referenced_from_script\\": false + }, + { + \\"name\\": \\"clicks\\", + \\"export_name\\": null, + \\"injected\\": false, + \\"module\\": false, + \\"mutated\\": false, + \\"reassigned\\": true, + \\"referenced\\": true, + \\"writable\\": true, + \\"referenced_from_script\\": false + } + ], + \\"stats\\": { + \\"timings\\": { + \\"total\\":0.123456789, + \\"parse\\": { + \\"total\\":0.123456789 + }, + \\"create component\\": { + \\"total\\":0.123456789 + } + } + } + } +}" +`; exports[`raw > Dummy.svelte?raw&svelte&type=preprocessed 1`] = ` "
+

Component

+

raw

{raw}

preprocessed

@@ -20,7 +22,5 @@

style

{style.code}

all

- 
{JSON.stringify(all)}
-

Component

-
+ 
{JSON.stringify(all, null, 2)}
From 9fd735f08cdb77f725c25a0c19afcd8617bed86a Mon Sep 17 00:00:00 2001 From: dominikg Date: Thu, 1 Dec 2022 14:27:54 +0100 Subject: [PATCH 10/16] fix: avoid absolute paths in sourcemap sources --- .changeset/fresh-papayas-change.md | 5 ++++ .../__snapshots__/import-queries.spec.ts.snap | 7 +++--- .../__tests__/import-queries.spec.ts | 5 ++-- .../vite-plugin-svelte/src/utils/compile.ts | 24 +++++++++++++++++++ 4 files changed, 34 insertions(+), 7 deletions(-) create mode 100644 .changeset/fresh-papayas-change.md diff --git a/.changeset/fresh-papayas-change.md b/.changeset/fresh-papayas-change.md new file mode 100644 index 000000000..33271b0bf --- /dev/null +++ b/.changeset/fresh-papayas-change.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/vite-plugin-svelte': patch +--- + +ensure sources paths in sourcemaps are not absolute file paths diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap index 4ec413b22..dc06b1c11 100644 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap @@ -82,7 +82,7 @@ class Dummy$ extends SvelteComponent$ { export default Dummy$; -//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQVFLLEdBQUk7ZUFBQyxXQUFTOzBCQUFDLEdBQU07Ozs7R0FIMUIsT0FJQTs7Ozs7Ozs7Ozs7bURBREssR0FBSTt1REFBVyxHQUFNOzs7Ozs7Ozs7Ozs7O09DUGQsSUFBQTtLQUNQLE1BQUEsR0FBUyxDQUFBOzs7a0JES1osTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIkR1bW15LnN2ZWx0ZSIsIi9ob21lL2RvbWluaWtnL2RldmVsb3Avc3ZlbHRlanMvdml0ZS1wbHVnaW4tc3ZlbHRlL3RlbXAvc2VydmUvaW1wb3J0LXF1ZXJpZXMvc3JjL0R1bW15LnN2ZWx0ZSJdfQ== +//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQVFLLEdBQUk7ZUFBQyxXQUFTOzBCQUFDLEdBQU07Ozs7R0FIMUIsT0FJQTs7Ozs7Ozs7Ozs7bURBREssR0FBSTt1REFBVyxHQUFNOzs7Ozs7Ozs7Ozs7O09BUGQsSUFBQTtLQUNQLE1BQUEsR0FBUyxDQUFBOzs7a0JBS1osTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIkR1bW15LnN2ZWx0ZSJdfQ== " `; @@ -122,11 +122,10 @@ exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` \\"code\\": \\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\", \\"map\\": { \\"version\\": 3, - \\"mappings\\": \\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OCPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBDKZ,MAAM;;;;;;;;;;;;;;;;;\\", + \\"mappings\\": \\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OAPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBAKZ,MAAM;;;;;;;;;;;;;;;;;\\", \\"names\\": [], \\"sources\\": [ - \\"Dummy.svelte\\", - \\"/src/Dummy.svelte\\" + \\"Dummy.svelte\\" ] }, \\"dependencies\\": [] diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts index 64d4d58fd..c94f9baa8 100644 --- a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts +++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts @@ -2,14 +2,13 @@ import { browserLogs, fetchFromPage, getText, isBuild, testDir } from '~utils'; import { createServer, ViteDevServer } from 'vite'; function normalizeSnapshot(result: string) { - const testDirRegex = new RegExp(testDir.replace(/([/.+^${}()|[\]\\])/g, '\\$1'), 'g'); // during dev, the import is rewritten but can vary on the v= hash. replace with stable short import return result .replace(/\.js\?v=[0-9a-f]{8}/g, '.js?v=XXX') // vite import analysis import rewrite version query .replace(/generated by Svelte v\d\.\d+\.\d+/g, 'generated by Svelte vXXX') // compiler version comment - .replace(/"total": *\d+\.\d+/g, '"total":0.123456789') // svelte compile stats - .replace(testDirRegex, ''); + .replace(/"total": *\d+\.\d+/g, '"total":0.123456789'); // svelte compile stats } + describe('raw', () => { test('does not have failed requests', async () => { browserLogs.forEach((msg) => { diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts index d2ad7b2f2..8f54d3e5a 100644 --- a/packages/vite-plugin-svelte/src/utils/compile.ts +++ b/packages/vite-plugin-svelte/src/utils/compile.ts @@ -9,11 +9,30 @@ import { StatCollection } from './vite-plugin-svelte-stats'; //eslint-disable-next-line node/no-missing-import import type { Processed } from 'svelte/types/compiler/preprocess'; import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess'; +import path from 'path'; const scriptLangRE = /\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\", - \\"compiled\\": { - \\"js\\": { - \\"code\\": \\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\", - \\"map\\": { - \\"version\\": 3, - \\"mappings\\": \\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OAPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBAKZ,MAAM;;;;;;;;;;;;;;;;;\\", - \\"names\\": [], - \\"sources\\": [ - \\"Dummy.svelte\\" - ] - }, - \\"dependencies\\": [] - }, - \\"css\\": { - \\"code\\": \\"button.svelte-d8vj6a{color:#000099}\\", - \\"map\\": { - \\"version\\": 3, - \\"file\\": \\"Dummy.svelte\\", - \\"mappings\\": \\"AAWkB,MAAA,cAAA,CAAA,cAKlB\\", - \\"names\\": [], - \\"sources\\": [ - \\"Dummy.svelte\\" - ] - } - }, - \\"ast\\": { - \\"html\\": { - \\"start\\": 62, - \\"end\\": 138, - \\"type\\": \\"Fragment\\", - \\"children\\": [ - { - \\"start\\": 60, - \\"end\\": 62, - \\"type\\": \\"Text\\", - \\"raw\\": \\"\\\\n\\\\n\\", - \\"data\\": \\"\\\\n\\\\n\\" - }, - { - \\"start\\": 62, - \\"end\\": 138, - \\"type\\": \\"Element\\", - \\"name\\": \\"button\\", - \\"attributes\\": [ - { - \\"start\\": 71, - \\"end\\": 104, - \\"type\\": \\"EventHandler\\", - \\"name\\": \\"click\\", - \\"modifiers\\": [], - \\"expression\\": { - \\"type\\": \\"ArrowFunctionExpression\\", - \\"start\\": 81, + \\"ast\\": { + \\"html\\": { + \\"start\\": 62, + \\"end\\": 138, + \\"type\\": \\"Fragment\\", + \\"children\\": [ + { + \\"start\\": 60, + \\"end\\": 62, + \\"type\\": \\"Text\\", + \\"raw\\": \\"\\\\n\\\\n\\", + \\"data\\": \\"\\\\n\\\\n\\" + }, + { + \\"start\\": 62, + \\"end\\": 138, + \\"type\\": \\"Element\\", + \\"name\\": \\"button\\", + \\"attributes\\": [ + { + \\"start\\": 71, + \\"end\\": 104, + \\"type\\": \\"EventHandler\\", + \\"name\\": \\"click\\", + \\"modifiers\\": [], + \\"expression\\": { + \\"type\\": \\"ArrowFunctionExpression\\", + \\"start\\": 81, + \\"end\\": 103, + \\"loc\\": { + \\"start\\": { + \\"line\\": 6, + \\"column\\": 11 + }, + \\"end\\": { + \\"line\\": 8, + \\"column\\": 2 + } + }, + \\"id\\": null, + \\"expression\\": false, + \\"generator\\": false, + \\"async\\": false, + \\"params\\": [], + \\"body\\": { + \\"type\\": \\"BlockStatement\\", + \\"start\\": 87, \\"end\\": 103, \\"loc\\": { \\"start\\": { \\"line\\": 6, - \\"column\\": 11 + \\"column\\": 17 }, \\"end\\": { \\"line\\": 8, \\"column\\": 2 } }, - \\"id\\": null, - \\"expression\\": false, - \\"generator\\": false, - \\"async\\": false, - \\"params\\": [], - \\"body\\": { - \\"type\\": \\"BlockStatement\\", - \\"start\\": 87, - \\"end\\": 103, - \\"loc\\": { - \\"start\\": { - \\"line\\": 6, - \\"column\\": 17 + \\"body\\": [ + { + \\"type\\": \\"ExpressionStatement\\", + \\"start\\": 91, + \\"end\\": 100, + \\"loc\\": { + \\"start\\": { + \\"line\\": 7, + \\"column\\": 2 + }, + \\"end\\": { + \\"line\\": 7, + \\"column\\": 11 + } }, - \\"end\\": { - \\"line\\": 8, - \\"column\\": 2 - } - }, - \\"body\\": [ - { - \\"type\\": \\"ExpressionStatement\\", + \\"expression\\": { + \\"type\\": \\"UpdateExpression\\", \\"start\\": 91, - \\"end\\": 100, + \\"end\\": 99, \\"loc\\": { \\"start\\": { \\"line\\": 7, @@ -212,13 +200,15 @@ exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` }, \\"end\\": { \\"line\\": 7, - \\"column\\": 11 + \\"column\\": 10 } }, - \\"expression\\": { - \\"type\\": \\"UpdateExpression\\", + \\"operator\\": \\"++\\", + \\"prefix\\": false, + \\"argument\\": { + \\"type\\": \\"Identifier\\", \\"start\\": 91, - \\"end\\": 99, + \\"end\\": 97, \\"loc\\": { \\"start\\": { \\"line\\": 7, @@ -226,227 +216,225 @@ exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` }, \\"end\\": { \\"line\\": 7, - \\"column\\": 10 + \\"column\\": 8 } }, - \\"operator\\": \\"++\\", - \\"prefix\\": false, - \\"argument\\": { - \\"type\\": \\"Identifier\\", - \\"start\\": 91, - \\"end\\": 97, - \\"loc\\": { - \\"start\\": { - \\"line\\": 7, - \\"column\\": 2 - }, - \\"end\\": { - \\"line\\": 7, - \\"column\\": 8 - } - }, - \\"name\\": \\"clicks\\" - } + \\"name\\": \\"clicks\\" } } - ] - } + } + ] } } - ], - \\"children\\": [ - { - \\"start\\": 105, - \\"end\\": 111, - \\"type\\": \\"MustacheTag\\", - \\"expression\\": { - \\"type\\": \\"Identifier\\", - \\"start\\": 106, - \\"end\\": 110, - \\"loc\\": { - \\"start\\": { - \\"line\\": 8, - \\"column\\": 5 - }, - \\"end\\": { - \\"line\\": 8, - \\"column\\": 9 - } + } + ], + \\"children\\": [ + { + \\"start\\": 105, + \\"end\\": 111, + \\"type\\": \\"MustacheTag\\", + \\"expression\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 106, + \\"end\\": 110, + \\"loc\\": { + \\"start\\": { + \\"line\\": 8, + \\"column\\": 5 }, - \\"name\\": \\"name\\" - } - }, - { - \\"start\\": 111, - \\"end\\": 120, - \\"type\\": \\"Text\\", - \\"raw\\": \\" clicks: \\", - \\"data\\": \\" clicks: \\" - }, - { - \\"start\\": 120, - \\"end\\": 128, - \\"type\\": \\"MustacheTag\\", - \\"expression\\": { - \\"type\\": \\"Identifier\\", - \\"start\\": 121, - \\"end\\": 127, - \\"loc\\": { - \\"start\\": { - \\"line\\": 8, - \\"column\\": 20 - }, - \\"end\\": { - \\"line\\": 8, - \\"column\\": 26 - } + \\"end\\": { + \\"line\\": 8, + \\"column\\": 9 + } + }, + \\"name\\": \\"name\\" + } + }, + { + \\"start\\": 111, + \\"end\\": 120, + \\"type\\": \\"Text\\", + \\"raw\\": \\" clicks: \\", + \\"data\\": \\" clicks: \\" + }, + { + \\"start\\": 120, + \\"end\\": 128, + \\"type\\": \\"MustacheTag\\", + \\"expression\\": { + \\"type\\": \\"Identifier\\", + \\"start\\": 121, + \\"end\\": 127, + \\"loc\\": { + \\"start\\": { + \\"line\\": 8, + \\"column\\": 20 }, - \\"name\\": \\"clicks\\" - } + \\"end\\": { + \\"line\\": 8, + \\"column\\": 26 + } + }, + \\"name\\": \\"clicks\\" } - ] - }, - { - \\"start\\": 138, - \\"end\\": 140, - \\"type\\": \\"Text\\", - \\"raw\\": \\"\\\\n\\\\n\\", - \\"data\\": \\"\\\\n\\\\n\\" - } - ] - }, - \\"css\\": { - \\"type\\": \\"Style\\", - \\"start\\": 140, - \\"end\\": 195, - \\"attributes\\": [ - { - \\"start\\": 147, - \\"end\\": 158, - \\"type\\": \\"Attribute\\", - \\"name\\": \\"lang\\", - \\"value\\": [ + } + ] + }, + { + \\"start\\": 138, + \\"end\\": 140, + \\"type\\": \\"Text\\", + \\"raw\\": \\"\\\\n\\\\n\\", + \\"data\\": \\"\\\\n\\\\n\\" + } + ] + }, + \\"css\\": { + \\"type\\": \\"Style\\", + \\"start\\": 140, + \\"end\\": 195, + \\"attributes\\": [ + { + \\"start\\": 147, + \\"end\\": 158, + \\"type\\": \\"Attribute\\", + \\"name\\": \\"lang\\", + \\"value\\": [ + { + \\"start\\": 153, + \\"end\\": 157, + \\"type\\": \\"Text\\", + \\"raw\\": \\"scss\\", + \\"data\\": \\"scss\\" + } + ] + } + ], + \\"children\\": [ + { + \\"type\\": \\"Rule\\", + \\"prelude\\": { + \\"type\\": \\"SelectorList\\", + \\"children\\": [ { - \\"start\\": 153, - \\"end\\": 157, - \\"type\\": \\"Text\\", - \\"raw\\": \\"scss\\", - \\"data\\": \\"scss\\" + \\"type\\": \\"Selector\\", + \\"children\\": [ + { + \\"type\\": \\"TypeSelector\\", + \\"name\\": \\"button\\", + \\"start\\": 159, + \\"end\\": 165 + } + ], + \\"start\\": 159, + \\"end\\": 165 } - ] - } - ], - \\"children\\": [ - { - \\"type\\": \\"Rule\\", - \\"prelude\\": { - \\"type\\": \\"SelectorList\\", - \\"children\\": [ - { - \\"type\\": \\"Selector\\", + ], + \\"start\\": 159, + \\"end\\": 165 + }, + \\"block\\": { + \\"type\\": \\"Block\\", + \\"children\\": [ + { + \\"type\\": \\"Declaration\\", + \\"important\\": false, + \\"property\\": \\"color\\", + \\"value\\": { + \\"type\\": \\"Value\\", \\"children\\": [ { - \\"type\\": \\"TypeSelector\\", - \\"name\\": \\"button\\", - \\"start\\": 159, - \\"end\\": 165 + \\"type\\": \\"Hash\\", + \\"value\\": \\"000099\\", + \\"start\\": 177, + \\"end\\": 184 } ], - \\"start\\": 159, - \\"end\\": 165 - } - ], - \\"start\\": 159, - \\"end\\": 165 - }, - \\"block\\": { - \\"type\\": \\"Block\\", - \\"children\\": [ - { - \\"type\\": \\"Declaration\\", - \\"important\\": false, - \\"property\\": \\"color\\", - \\"value\\": { - \\"type\\": \\"Value\\", - \\"children\\": [ - { - \\"type\\": \\"Hash\\", - \\"value\\": \\"000099\\", - \\"start\\": 177, - \\"end\\": 184 - } - ], - \\"start\\": 177, - \\"end\\": 184 - }, - \\"start\\": 170, + \\"start\\": 177, \\"end\\": 184 - } - ], - \\"start\\": 166, - \\"end\\": 187 - }, - \\"start\\": 159, + }, + \\"start\\": 170, + \\"end\\": 184 + } + ], + \\"start\\": 166, \\"end\\": 187 - } - ], - \\"content\\": { + }, \\"start\\": 159, - \\"end\\": 187, - \\"styles\\": \\"button {\\\\n color: #000099;\\\\n}\\" + \\"end\\": 187 } - }, - \\"instance\\": { - \\"type\\": \\"Script\\", - \\"start\\": 0, - \\"end\\": 60, - \\"context\\": \\"default\\", - \\"content\\": { - \\"type\\": \\"Program\\", - \\"start\\": 18, - \\"end\\": 51, - \\"loc\\": { - \\"start\\": { - \\"line\\": 1, - \\"column\\": 0 - }, - \\"end\\": { - \\"line\\": 3, - \\"column\\": 0 - } + ], + \\"content\\": { + \\"start\\": 159, + \\"end\\": 187, + \\"styles\\": \\"button {\\\\n color: #000099;\\\\n}\\" + } + }, + \\"instance\\": { + \\"type\\": \\"Script\\", + \\"start\\": 0, + \\"end\\": 60, + \\"context\\": \\"default\\", + \\"content\\": { + \\"type\\": \\"Program\\", + \\"start\\": 18, + \\"end\\": 51, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 0 }, - \\"body\\": [ - { - \\"type\\": \\"ExportNamedDeclaration\\", - \\"start\\": 18, + \\"end\\": { + \\"line\\": 3, + \\"column\\": 0 + } + }, + \\"body\\": [ + { + \\"type\\": \\"ExportNamedDeclaration\\", + \\"start\\": 18, + \\"end\\": 34, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 18 + }, + \\"end\\": { + \\"line\\": 1, + \\"column\\": 34 + } + }, + \\"declaration\\": { + \\"type\\": \\"VariableDeclaration\\", + \\"start\\": 25, \\"end\\": 34, \\"loc\\": { \\"start\\": { \\"line\\": 1, - \\"column\\": 18 + \\"column\\": 25 }, \\"end\\": { \\"line\\": 1, \\"column\\": 34 } }, - \\"declaration\\": { - \\"type\\": \\"VariableDeclaration\\", - \\"start\\": 25, - \\"end\\": 34, - \\"loc\\": { - \\"start\\": { - \\"line\\": 1, - \\"column\\": 25 + \\"declarations\\": [ + { + \\"type\\": \\"VariableDeclarator\\", + \\"start\\": 29, + \\"end\\": 33, + \\"loc\\": { + \\"start\\": { + \\"line\\": 1, + \\"column\\": 29 + }, + \\"end\\": { + \\"line\\": 1, + \\"column\\": 33 + } }, - \\"end\\": { - \\"line\\": 1, - \\"column\\": 34 - } - }, - \\"declarations\\": [ - { - \\"type\\": \\"VariableDeclarator\\", + \\"id\\": { + \\"type\\": \\"Identifier\\", \\"start\\": 29, \\"end\\": 33, \\"loc\\": { @@ -459,49 +447,49 @@ exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` \\"column\\": 33 } }, - \\"id\\": { - \\"type\\": \\"Identifier\\", - \\"start\\": 29, - \\"end\\": 33, - \\"loc\\": { - \\"start\\": { - \\"line\\": 1, - \\"column\\": 29 - }, - \\"end\\": { - \\"line\\": 1, - \\"column\\": 33 - } - }, - \\"name\\": \\"name\\" - }, - \\"init\\": null - } - ], - \\"kind\\": \\"let\\" + \\"name\\": \\"name\\" + }, + \\"init\\": null + } + ], + \\"kind\\": \\"let\\" + }, + \\"specifiers\\": [], + \\"source\\": null + }, + { + \\"type\\": \\"VariableDeclaration\\", + \\"start\\": 35, + \\"end\\": 50, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 0 }, - \\"specifiers\\": [], - \\"source\\": null + \\"end\\": { + \\"line\\": 2, + \\"column\\": 15 + } }, - { - \\"type\\": \\"VariableDeclaration\\", - \\"start\\": 35, - \\"end\\": 50, - \\"loc\\": { - \\"start\\": { - \\"line\\": 2, - \\"column\\": 0 + \\"declarations\\": [ + { + \\"type\\": \\"VariableDeclarator\\", + \\"start\\": 39, + \\"end\\": 49, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 4 + }, + \\"end\\": { + \\"line\\": 2, + \\"column\\": 14 + } }, - \\"end\\": { - \\"line\\": 2, - \\"column\\": 15 - } - }, - \\"declarations\\": [ - { - \\"type\\": \\"VariableDeclarator\\", + \\"id\\": { + \\"type\\": \\"Identifier\\", \\"start\\": 39, - \\"end\\": 49, + \\"end\\": 45, \\"loc\\": { \\"start\\": { \\"line\\": 2, @@ -509,88 +497,115 @@ exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = ` }, \\"end\\": { \\"line\\": 2, - \\"column\\": 14 + \\"column\\": 10 } }, - \\"id\\": { - \\"type\\": \\"Identifier\\", - \\"start\\": 39, - \\"end\\": 45, - \\"loc\\": { - \\"start\\": { - \\"line\\": 2, - \\"column\\": 4 - }, - \\"end\\": { - \\"line\\": 2, - \\"column\\": 10 - } + \\"name\\": \\"clicks\\" + }, + \\"init\\": { + \\"type\\": \\"Literal\\", + \\"start\\": 48, + \\"end\\": 49, + \\"loc\\": { + \\"start\\": { + \\"line\\": 2, + \\"column\\": 13 }, - \\"name\\": \\"clicks\\" + \\"end\\": { + \\"line\\": 2, + \\"column\\": 14 + } }, - \\"init\\": { - \\"type\\": \\"Literal\\", - \\"start\\": 48, - \\"end\\": 49, - \\"loc\\": { - \\"start\\": { - \\"line\\": 2, - \\"column\\": 13 - }, - \\"end\\": { - \\"line\\": 2, - \\"column\\": 14 - } - }, - \\"value\\": 0, - \\"raw\\": \\"0\\" - } + \\"value\\": 0, + \\"raw\\": \\"0\\" } - ], - \\"kind\\": \\"let\\" - } - ], - \\"sourceType\\": \\"module\\" - } + } + ], + \\"kind\\": \\"let\\" + } + ], + \\"sourceType\\": \\"module\\" } + } + }, + \\"css\\": { + \\"code\\": \\"button.svelte-d8vj6a{color:#000099}\\", + \\"map\\": { + \\"version\\": 3, + \\"file\\": \\"Dummy.svelte\\", + \\"mappings\\": \\"AAWkB,MAAA,cAAA,CAAA,cAKlB\\", + \\"names\\": [], + \\"sources\\": [ + \\"Dummy.svelte\\" + ] + } + }, + \\"dependencies\\": [], + \\"js\\": { + \\"code\\": \\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\", + \\"map\\": { + \\"version\\": 3, + \\"mappings\\": \\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OAPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBAKZ,MAAM;;;;;;;;;;;;;;;;;\\", + \\"names\\": [], + \\"sources\\": [ + \\"Dummy.svelte\\" + ] }, - \\"warnings\\": [], - \\"vars\\": [ - { - \\"name\\": \\"name\\", - \\"export_name\\": \\"name\\", - \\"injected\\": false, - \\"module\\": false, - \\"mutated\\": false, - \\"reassigned\\": false, - \\"referenced\\": true, - \\"writable\\": true, - \\"referenced_from_script\\": false + \\"dependencies\\": [] + }, + \\"lang\\": \\"ts\\", + \\"normalizedFilename\\": \\"/src/Dummy.svelte\\", + \\"preprocessed\\": { + \\"code\\": \\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\", + \\"dependencies\\": [], + \\"map\\": { + \\"version\\": 3, + \\"mappings\\": \\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\", + \\"names\\": [], + \\"sources\\": [ + \\"Dummy.svelte\\", + \\"Dummy.svelte\\" + ] + } + }, + \\"source\\": \\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\", + \\"ssr\\": false, + \\"stats\\": { + \\"timings\\": { + \\"total\\":0.123456789, + \\"parse\\": { + \\"total\\":0.123456789 }, - { - \\"name\\": \\"clicks\\", - \\"export_name\\": null, - \\"injected\\": false, - \\"module\\": false, - \\"mutated\\": false, - \\"reassigned\\": true, - \\"referenced\\": true, - \\"writable\\": true, - \\"referenced_from_script\\": false - } - ], - \\"stats\\": { - \\"timings\\": { - \\"total\\":0.123456789, - \\"parse\\": { - \\"total\\":0.123456789 - }, - \\"create component\\": { - \\"total\\":0.123456789 - } + \\"create component\\": { + \\"total\\":0.123456789 } } - } + }, + \\"vars\\": [ + { + \\"name\\": \\"name\\", + \\"export_name\\": \\"name\\", + \\"injected\\": false, + \\"module\\": false, + \\"mutated\\": false, + \\"reassigned\\": false, + \\"referenced\\": true, + \\"writable\\": true, + \\"referenced_from_script\\": false + }, + { + \\"name\\": \\"clicks\\", + \\"export_name\\": null, + \\"injected\\": false, + \\"module\\": false, + \\"mutated\\": false, + \\"reassigned\\": true, + \\"referenced\\": true, + \\"writable\\": true, + \\"referenced_from_script\\": false + } + ], + \\"warnings\\": [] }" `; @@ -818,6 +833,45 @@ export default Dummy$;" exports[`raw > Dummy.svelte?raw&svelte&type=style 1`] = `"button.svelte-d8vj6a{color:#000099}"`; +exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=all 1`] = ` +"export const normalizedFilename=\\"/src/Dummy.svelte\\" +export const lang=\\"ts\\" +export const ssr=false +export const dependencies=[] +export const preprocessed={\\"code\\":\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"dependencies\\":[],\\"map\\":{\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]}} +export const js={\\"code\\":\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",\\"map\\":null,\\"dependencies\\":[]} +export const css={\\"code\\":\\"button.svelte-d8vj6a{color:#000099}\\",\\"map\\":null} +export const ast={\\"html\\":{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Fragment\\",\\"children\\":[{\\"start\\":60,\\"end\\":62,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"},{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Element\\",\\"name\\":\\"button\\",\\"attributes\\":[{\\"start\\":71,\\"end\\":104,\\"type\\":\\"EventHandler\\",\\"name\\":\\"click\\",\\"modifiers\\":[],\\"expression\\":{\\"type\\":\\"ArrowFunctionExpression\\",\\"start\\":81,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":11},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"id\\":null,\\"expression\\":false,\\"generator\\":false,\\"async\\":false,\\"params\\":[],\\"body\\":{\\"type\\":\\"BlockStatement\\",\\"start\\":87,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":17},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"body\\":[{\\"type\\":\\"ExpressionStatement\\",\\"start\\":91,\\"end\\":100,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":11}},\\"expression\\":{\\"type\\":\\"UpdateExpression\\",\\"start\\":91,\\"end\\":99,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":10}},\\"operator\\":\\"++\\",\\"prefix\\":false,\\"argument\\":{\\"type\\":\\"Identifier\\",\\"start\\":91,\\"end\\":97,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":8}},\\"name\\":\\"clicks\\"}}}]}}}],\\"children\\":[{\\"start\\":105,\\"end\\":111,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":106,\\"end\\":110,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":5},\\"end\\":{\\"line\\":8,\\"column\\":9}},\\"name\\":\\"name\\"}},{\\"start\\":111,\\"end\\":120,\\"type\\":\\"Text\\",\\"raw\\":\\" clicks: \\",\\"data\\":\\" clicks: \\"},{\\"start\\":120,\\"end\\":128,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":121,\\"end\\":127,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":20},\\"end\\":{\\"line\\":8,\\"column\\":26}},\\"name\\":\\"clicks\\"}}]},{\\"start\\":138,\\"end\\":140,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"}]},\\"css\\":{\\"type\\":\\"Style\\",\\"start\\":140,\\"end\\":195,\\"attributes\\":[{\\"start\\":147,\\"end\\":158,\\"type\\":\\"Attribute\\",\\"name\\":\\"lang\\",\\"value\\":[{\\"start\\":153,\\"end\\":157,\\"type\\":\\"Text\\",\\"raw\\":\\"scss\\",\\"data\\":\\"scss\\"}]}],\\"children\\":[{\\"type\\":\\"Rule\\",\\"prelude\\":{\\"type\\":\\"SelectorList\\",\\"children\\":[{\\"type\\":\\"Selector\\",\\"children\\":[{\\"type\\":\\"TypeSelector\\",\\"name\\":\\"button\\",\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165},\\"block\\":{\\"type\\":\\"Block\\",\\"children\\":[{\\"type\\":\\"Declaration\\",\\"important\\":false,\\"property\\":\\"color\\",\\"value\\":{\\"type\\":\\"Value\\",\\"children\\":[{\\"type\\":\\"Hash\\",\\"value\\":\\"000099\\",\\"start\\":177,\\"end\\":184}],\\"start\\":177,\\"end\\":184},\\"start\\":170,\\"end\\":184}],\\"start\\":166,\\"end\\":187},\\"start\\":159,\\"end\\":187}],\\"content\\":{\\"start\\":159,\\"end\\":187,\\"styles\\":\\"button {\\\\n color: #000099;\\\\n}\\"}},\\"instance\\":{\\"type\\":\\"Script\\",\\"start\\":0,\\"end\\":60,\\"context\\":\\"default\\",\\"content\\":{\\"type\\":\\"Program\\",\\"start\\":18,\\"end\\":51,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":0},\\"end\\":{\\"line\\":3,\\"column\\":0}},\\"body\\":[{\\"type\\":\\"ExportNamedDeclaration\\",\\"start\\":18,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":18},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declaration\\":{\\"type\\":\\"VariableDeclaration\\",\\"start\\":25,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":25},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"name\\":\\"name\\"},\\"init\\":null}],\\"kind\\":\\"let\\"},\\"specifiers\\":[],\\"source\\":null},{\\"type\\":\\"VariableDeclaration\\",\\"start\\":35,\\"end\\":50,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":0},\\"end\\":{\\"line\\":2,\\"column\\":15}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":39,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":39,\\"end\\":45,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":10}},\\"name\\":\\"clicks\\"},\\"init\\":{\\"type\\":\\"Literal\\",\\"start\\":48,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":13},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"value\\":0,\\"raw\\":\\"0\\"}}],\\"kind\\":\\"let\\"}],\\"sourceType\\":\\"module\\"}}} +export const warnings=[] +export const vars=[{\\"name\\":\\"name\\",\\"export_name\\":\\"name\\",\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":false,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false},{\\"name\\":\\"clicks\\",\\"export_name\\":null,\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":true,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false}] +export const stats={\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}} +export const source=\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\" +" +`; + +exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=preprocessed 1`] = ` +"export const code=\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\" +export const dependencies=[] +export const map={\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]} +export default code +" +`; + +exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=script 1`] = ` +"export const code=\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\" +export const map=null +export const dependencies=[] +export default code +" +`; + +exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=style 1`] = ` +"export const code=\\"button.svelte-d8vj6a{color:#000099}\\" +export const map=null +export default code +" +`; + exports[`ssrLoadModule > ?raw 1`] = ` "
@@ -14,13 +14,13 @@

raw

{raw}

preprocessed

- 
{preprocessed.code}
+ 
{preprocessed}

script

- 
{script.code}
+ 
{script}

web component script

- 
{wcScript.code}
+ 
{wcScript}

style

- 
{style.code}
+ 
{style}

all

{JSON.stringify(all, null, 2)}
diff --git a/packages/vite-plugin-svelte/src/utils/load-raw.ts b/packages/vite-plugin-svelte/src/utils/load-raw.ts index 2a6ea2903..7b3168058 100644 --- a/packages/vite-plugin-svelte/src/utils/load-raw.ts +++ b/packages/vite-plugin-svelte/src/utils/load-raw.ts @@ -3,7 +3,7 @@ import fs from 'fs'; import { toRollupError } from './error'; import { log } from './log'; import type { SvelteRequest } from './id'; -import { CompileSvelte } from './compile'; +import { type CompileData, CompileSvelte } from './compile'; /** * utility function to compile ?raw and ?direct requests in load hook @@ -50,8 +50,8 @@ export async function loadRaw( result = compileData.compiled.js; } else if (query.type === 'preprocessed') { result = compileData.preprocessed; - } else if (query.type === 'all') { - return toDefaultExport({ source, compiled: compileData.compiled }); + } else if (query.type === 'all' && query.raw) { + return allToRawExports(compileData, source); } else { throw new Error( `invalid "type=${query.type}" in ${id}. supported are script, style, preprocessed, all` @@ -79,12 +79,33 @@ export async function loadRaw( return directOutput; } else if (query.raw) { log.debug(`load returns raw result for ${id}`); - return toDefaultExport(result); + return toRawExports(result); } else { throw new Error(`invalid raw mode in ${id}, supported are raw, direct`); } } -function toDefaultExport(object: object | string) { - return `export default ${JSON.stringify(object)}`; +function allToRawExports(compileData: CompileData, source: string) { + // flatten CompileData + const exports: Partial = { + ...compileData, + ...compileData.compiled, + source + }; + delete exports.compiled; + delete exports.filename; // absolute path, remove to avoid it in output + return toRawExports(exports); +} + +function toRawExports(object: object) { + let exports = + Object.entries(object) + //eslint-disable-next-line no-unused-vars + .filter(([key, value]) => typeof value !== 'function') // preprocess output has a toString function that's enumerable + .map(([key, value]) => `export const ${key}=${JSON.stringify(value)}`) + .join('\n') + '\n'; + if (Object.prototype.hasOwnProperty.call(object, 'code')) { + exports += `export default code\n`; + } + return exports; } From e629ffeac2fa389ad34eb64dc465ef8b556a86fb Mon Sep 17 00:00:00 2001 From: dominikg Date: Fri, 2 Dec 2022 17:09:59 +0100 Subject: [PATCH 16/16] fix: sort exports and don't run mixed tests during build --- .../__snapshots__/import-queries.spec.ts.snap | 20 +++++++++--------- .../__tests__/import-queries.spec.ts | 2 +- .../vite-plugin-svelte/src/utils/load-raw.ts | 21 +++++++++++++++++++ 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap index a194dc806..6c016de89 100644 --- a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap +++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap @@ -834,18 +834,18 @@ export default Dummy$;" exports[`raw > Dummy.svelte?raw&svelte&type=style 1`] = `"button.svelte-d8vj6a{color:#000099}"`; exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=all 1`] = ` -"export const normalizedFilename=\\"/src/Dummy.svelte\\" -export const lang=\\"ts\\" -export const ssr=false +"export const ast={\\"html\\":{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Fragment\\",\\"children\\":[{\\"start\\":60,\\"end\\":62,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"},{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Element\\",\\"name\\":\\"button\\",\\"attributes\\":[{\\"start\\":71,\\"end\\":104,\\"type\\":\\"EventHandler\\",\\"name\\":\\"click\\",\\"modifiers\\":[],\\"expression\\":{\\"type\\":\\"ArrowFunctionExpression\\",\\"start\\":81,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":11},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"id\\":null,\\"expression\\":false,\\"generator\\":false,\\"async\\":false,\\"params\\":[],\\"body\\":{\\"type\\":\\"BlockStatement\\",\\"start\\":87,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":17},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"body\\":[{\\"type\\":\\"ExpressionStatement\\",\\"start\\":91,\\"end\\":100,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":11}},\\"expression\\":{\\"type\\":\\"UpdateExpression\\",\\"start\\":91,\\"end\\":99,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":10}},\\"operator\\":\\"++\\",\\"prefix\\":false,\\"argument\\":{\\"type\\":\\"Identifier\\",\\"start\\":91,\\"end\\":97,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":8}},\\"name\\":\\"clicks\\"}}}]}}}],\\"children\\":[{\\"start\\":105,\\"end\\":111,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":106,\\"end\\":110,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":5},\\"end\\":{\\"line\\":8,\\"column\\":9}},\\"name\\":\\"name\\"}},{\\"start\\":111,\\"end\\":120,\\"type\\":\\"Text\\",\\"raw\\":\\" clicks: \\",\\"data\\":\\" clicks: \\"},{\\"start\\":120,\\"end\\":128,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":121,\\"end\\":127,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":20},\\"end\\":{\\"line\\":8,\\"column\\":26}},\\"name\\":\\"clicks\\"}}]},{\\"start\\":138,\\"end\\":140,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"}]},\\"css\\":{\\"type\\":\\"Style\\",\\"start\\":140,\\"end\\":195,\\"attributes\\":[{\\"start\\":147,\\"end\\":158,\\"type\\":\\"Attribute\\",\\"name\\":\\"lang\\",\\"value\\":[{\\"start\\":153,\\"end\\":157,\\"type\\":\\"Text\\",\\"raw\\":\\"scss\\",\\"data\\":\\"scss\\"}]}],\\"children\\":[{\\"type\\":\\"Rule\\",\\"prelude\\":{\\"type\\":\\"SelectorList\\",\\"children\\":[{\\"type\\":\\"Selector\\",\\"children\\":[{\\"type\\":\\"TypeSelector\\",\\"name\\":\\"button\\",\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165},\\"block\\":{\\"type\\":\\"Block\\",\\"children\\":[{\\"type\\":\\"Declaration\\",\\"important\\":false,\\"property\\":\\"color\\",\\"value\\":{\\"type\\":\\"Value\\",\\"children\\":[{\\"type\\":\\"Hash\\",\\"value\\":\\"000099\\",\\"start\\":177,\\"end\\":184}],\\"start\\":177,\\"end\\":184},\\"start\\":170,\\"end\\":184}],\\"start\\":166,\\"end\\":187},\\"start\\":159,\\"end\\":187}],\\"content\\":{\\"start\\":159,\\"end\\":187,\\"styles\\":\\"button {\\\\n color: #000099;\\\\n}\\"}},\\"instance\\":{\\"type\\":\\"Script\\",\\"start\\":0,\\"end\\":60,\\"context\\":\\"default\\",\\"content\\":{\\"type\\":\\"Program\\",\\"start\\":18,\\"end\\":51,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":0},\\"end\\":{\\"line\\":3,\\"column\\":0}},\\"body\\":[{\\"type\\":\\"ExportNamedDeclaration\\",\\"start\\":18,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":18},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declaration\\":{\\"type\\":\\"VariableDeclaration\\",\\"start\\":25,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":25},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"name\\":\\"name\\"},\\"init\\":null}],\\"kind\\":\\"let\\"},\\"specifiers\\":[],\\"source\\":null},{\\"type\\":\\"VariableDeclaration\\",\\"start\\":35,\\"end\\":50,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":0},\\"end\\":{\\"line\\":2,\\"column\\":15}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":39,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":39,\\"end\\":45,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":10}},\\"name\\":\\"clicks\\"},\\"init\\":{\\"type\\":\\"Literal\\",\\"start\\":48,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":13},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"value\\":0,\\"raw\\":\\"0\\"}}],\\"kind\\":\\"let\\"}],\\"sourceType\\":\\"module\\"}}} +export const css={\\"code\\":\\"button.svelte-d8vj6a{color:#000099}\\",\\"map\\":null} export const dependencies=[] -export const preprocessed={\\"code\\":\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"dependencies\\":[],\\"map\\":{\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]}} export const js={\\"code\\":\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",\\"map\\":null,\\"dependencies\\":[]} -export const css={\\"code\\":\\"button.svelte-d8vj6a{color:#000099}\\",\\"map\\":null} -export const ast={\\"html\\":{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Fragment\\",\\"children\\":[{\\"start\\":60,\\"end\\":62,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"},{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Element\\",\\"name\\":\\"button\\",\\"attributes\\":[{\\"start\\":71,\\"end\\":104,\\"type\\":\\"EventHandler\\",\\"name\\":\\"click\\",\\"modifiers\\":[],\\"expression\\":{\\"type\\":\\"ArrowFunctionExpression\\",\\"start\\":81,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":11},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"id\\":null,\\"expression\\":false,\\"generator\\":false,\\"async\\":false,\\"params\\":[],\\"body\\":{\\"type\\":\\"BlockStatement\\",\\"start\\":87,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":17},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"body\\":[{\\"type\\":\\"ExpressionStatement\\",\\"start\\":91,\\"end\\":100,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":11}},\\"expression\\":{\\"type\\":\\"UpdateExpression\\",\\"start\\":91,\\"end\\":99,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":10}},\\"operator\\":\\"++\\",\\"prefix\\":false,\\"argument\\":{\\"type\\":\\"Identifier\\",\\"start\\":91,\\"end\\":97,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":8}},\\"name\\":\\"clicks\\"}}}]}}}],\\"children\\":[{\\"start\\":105,\\"end\\":111,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":106,\\"end\\":110,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":5},\\"end\\":{\\"line\\":8,\\"column\\":9}},\\"name\\":\\"name\\"}},{\\"start\\":111,\\"end\\":120,\\"type\\":\\"Text\\",\\"raw\\":\\" clicks: \\",\\"data\\":\\" clicks: \\"},{\\"start\\":120,\\"end\\":128,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":121,\\"end\\":127,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":20},\\"end\\":{\\"line\\":8,\\"column\\":26}},\\"name\\":\\"clicks\\"}}]},{\\"start\\":138,\\"end\\":140,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"}]},\\"css\\":{\\"type\\":\\"Style\\",\\"start\\":140,\\"end\\":195,\\"attributes\\":[{\\"start\\":147,\\"end\\":158,\\"type\\":\\"Attribute\\",\\"name\\":\\"lang\\",\\"value\\":[{\\"start\\":153,\\"end\\":157,\\"type\\":\\"Text\\",\\"raw\\":\\"scss\\",\\"data\\":\\"scss\\"}]}],\\"children\\":[{\\"type\\":\\"Rule\\",\\"prelude\\":{\\"type\\":\\"SelectorList\\",\\"children\\":[{\\"type\\":\\"Selector\\",\\"children\\":[{\\"type\\":\\"TypeSelector\\",\\"name\\":\\"button\\",\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165},\\"block\\":{\\"type\\":\\"Block\\",\\"children\\":[{\\"type\\":\\"Declaration\\",\\"important\\":false,\\"property\\":\\"color\\",\\"value\\":{\\"type\\":\\"Value\\",\\"children\\":[{\\"type\\":\\"Hash\\",\\"value\\":\\"000099\\",\\"start\\":177,\\"end\\":184}],\\"start\\":177,\\"end\\":184},\\"start\\":170,\\"end\\":184}],\\"start\\":166,\\"end\\":187},\\"start\\":159,\\"end\\":187}],\\"content\\":{\\"start\\":159,\\"end\\":187,\\"styles\\":\\"button {\\\\n color: #000099;\\\\n}\\"}},\\"instance\\":{\\"type\\":\\"Script\\",\\"start\\":0,\\"end\\":60,\\"context\\":\\"default\\",\\"content\\":{\\"type\\":\\"Program\\",\\"start\\":18,\\"end\\":51,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":0},\\"end\\":{\\"line\\":3,\\"column\\":0}},\\"body\\":[{\\"type\\":\\"ExportNamedDeclaration\\",\\"start\\":18,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":18},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declaration\\":{\\"type\\":\\"VariableDeclaration\\",\\"start\\":25,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":25},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"name\\":\\"name\\"},\\"init\\":null}],\\"kind\\":\\"let\\"},\\"specifiers\\":[],\\"source\\":null},{\\"type\\":\\"VariableDeclaration\\",\\"start\\":35,\\"end\\":50,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":0},\\"end\\":{\\"line\\":2,\\"column\\":15}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":39,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":39,\\"end\\":45,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":10}},\\"name\\":\\"clicks\\"},\\"init\\":{\\"type\\":\\"Literal\\",\\"start\\":48,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":13},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"value\\":0,\\"raw\\":\\"0\\"}}],\\"kind\\":\\"let\\"}],\\"sourceType\\":\\"module\\"}}} -export const warnings=[] -export const vars=[{\\"name\\":\\"name\\",\\"export_name\\":\\"name\\",\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":false,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false},{\\"name\\":\\"clicks\\",\\"export_name\\":null,\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":true,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false}] -export const stats={\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}} +export const lang=\\"ts\\" +export const normalizedFilename=\\"/src/Dummy.svelte\\" +export const preprocessed={\\"code\\":\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\",\\"dependencies\\":[],\\"map\\":{\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]}} export const source=\\"\\\\n\\\\n {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}\\\\n\\\\n\\\\n\\" +export const ssr=false +export const stats={\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}} +export const vars=[{\\"name\\":\\"name\\",\\"export_name\\":\\"name\\",\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":false,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false},{\\"name\\":\\"clicks\\",\\"export_name\\":null,\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":true,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false}] +export const warnings=[] " `; @@ -859,8 +859,8 @@ export default code exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=script 1`] = ` "export const code=\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\" -export const map=null export const dependencies=[] +export const map=null export default code " `; diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts index 27a8e026b..27f7c8638 100644 --- a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts +++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts @@ -50,7 +50,7 @@ describe('raw', () => { expect(normalizeSnapshot(result)).toMatchSnapshot(); }); - describe('mixed exports', () => { + describe.runIf(!isBuild)('mixed exports', () => { test('Dummy.svelte?raw&svelte&type=preprocessed', async () => { const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=preprocessed').then( (res) => res.text() diff --git a/packages/vite-plugin-svelte/src/utils/load-raw.ts b/packages/vite-plugin-svelte/src/utils/load-raw.ts index 7b3168058..bb8923c26 100644 --- a/packages/vite-plugin-svelte/src/utils/load-raw.ts +++ b/packages/vite-plugin-svelte/src/utils/load-raw.ts @@ -85,6 +85,12 @@ export async function loadRaw( } } +/** + * turn compileData and source into a flat list of raw exports + * + * @param compileData + * @param source + */ function allToRawExports(compileData: CompileData, source: string) { // flatten CompileData const exports: Partial = { @@ -97,11 +103,26 @@ function allToRawExports(compileData: CompileData, source: string) { return toRawExports(exports); } +/** + * turn object into raw exports. + * + * every prop is returned as a const export, and if prop 'code' exists it is additionally added as default export + * + * eg {'foo':'bar','code':'baz'} results in + * + * ```js + * export const code='baz' + * export const foo='bar' + * export default code + * ``` + * @param object + */ function toRawExports(object: object) { let exports = Object.entries(object) //eslint-disable-next-line no-unused-vars .filter(([key, value]) => typeof value !== 'function') // preprocess output has a toString function that's enumerable + .sort(([a], [b]) => (a < b ? -1 : a === b ? 0 : 1)) .map(([key, value]) => `export const ${key}=${JSON.stringify(value)}`) .join('\n') + '\n'; if (Object.prototype.hasOwnProperty.call(object, 'code')) {