diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md index 43812426a5a6..4f041c0ff11d 100644 --- a/site/content/docs/04-compile-time.md +++ b/site/content/docs/04-compile-time.md @@ -204,12 +204,18 @@ result: { dependencies?: Array }>, script?: (input: { content: string, markup: string, attributes: Record, filename: string }) => Promise<{ + code: string, + dependencies?: Array, + attributes?: Record + }>, + expression?: (input: { content: string, markup: string, filename: string }) => Promise<{ code: string, dependencies?: Array }>, style?: (input: { content: string, markup: string, attributes: Record, filename: string }) => Promise<{ code: string, - dependencies?: Array + dependencies?: Array, + attributes?: Record }> }>, options?: { @@ -224,7 +230,7 @@ The `preprocess` function provides convenient hooks for arbitrarily transforming The first argument is the component source code. The second is an array of *preprocessors* (or a single preprocessor, if you only have one), where a preprocessor is an object with `markup`, `script` and `style` functions, each of which is optional. -Each `markup`, `script` or `style` function must return an object (or a Promise that resolves to an object) with a `code` property, representing the transformed source code, and an optional array of `dependencies`. +Each `markup`, `script`, `expression` or `style` function must return an object (or a Promise that resolves to an object) with a `code` property, representing the transformed source code, an optional array of `dependencies`, and an optional object of `attributes`. The `markup` function receives the entire component source text, along with the component's `filename` if it was specified in the third argument. @@ -254,10 +260,16 @@ const { code } = await svelte.preprocess(source, { --- -The `script` and `style` functions receive the contents of ` + +
{ return a?.b?.c; }}> + this is {a#c} +
+ +
+ +{#if a} + {#each array['a`[x']["]]]]]]"]['[[[['] as item} + {:else} + {#await getPromise().[foo()]['"a"'] then { a }} + {:catch error} + {/await} + {/each} +{:else if b} + {#each array[123](f, y, z) as item} + { [([(a['asdf](((}}}[][!@#asdf}}}}'])])] + foo } + {/each} +{:else} +{/if} + +{#each foo as { as }} + {as} +{/each} + + 32 + { a: 1}} + b="3[3+4)4" + class="a {b} fds {c[123]} df {{ a: 3 }[`a +`]} qwe" + > +
{a} {@debug b} {@html '@debug qwe'} {a < 32 }
+
\ No newline at end of file diff --git a/test/preprocess/samples/script-in-attribute/output.svelte b/test/preprocess/samples/script-in-attribute/output.svelte new file mode 100644 index 000000000000..5b466d5b8280 --- /dev/null +++ b/test/preprocess/samples/script-in-attribute/output.svelte @@ -0,0 +1,40 @@ + + +
+ this is {replaced} +
+ +
+ +{#if replaced} + {#each replaced as item} + {:else} + {#await replaced then { a }} + {:catch error} + {/await} + {/each} +{:else if replaced} + {#each replaced as item} + {replaced} + {/each} +{:else} +{/if} + +{#each replaced as { as }} + {replaced} +{/each} + + +
{replaced} {@debug replaced} {@html replaced} {replaced}
+
\ No newline at end of file diff --git a/test/preprocess/samples/script-in-code/_config.js b/test/preprocess/samples/script-in-code/_config.js new file mode 100644 index 000000000000..c7a085cacce5 --- /dev/null +++ b/test/preprocess/samples/script-in-code/_config.js @@ -0,0 +1,9 @@ +export default { + preprocess: { + script: ({ is_expression, content }) => { + return { + code: is_expression ? content : 'let z = 42;' + }; + } + } +}; diff --git a/test/preprocess/samples/script-in-code/input.svelte b/test/preprocess/samples/script-in-code/input.svelte new file mode 100644 index 000000000000..08486ca60da8 --- /dev/null +++ b/test/preprocess/samples/script-in-code/input.svelte @@ -0,0 +1,23 @@ + + + + +{@html ''} + + + +{@html ` + +`} + + diff --git a/test/preprocess/samples/script-in-code/output.svelte b/test/preprocess/samples/script-in-code/output.svelte new file mode 100644 index 000000000000..bae963fc8e09 --- /dev/null +++ b/test/preprocess/samples/script-in-code/output.svelte @@ -0,0 +1,15 @@ + + + + +{@html ''} + + + +{@html ` + +`} + + diff --git a/test/preprocess/samples/style-in-code/_config.js b/test/preprocess/samples/style-in-code/_config.js new file mode 100644 index 000000000000..5af6ff3b386f --- /dev/null +++ b/test/preprocess/samples/style-in-code/_config.js @@ -0,0 +1,9 @@ +export default { + preprocess: { + style: () => { + return { + code: 'h1 { color: white; }' + }; + } + } +}; diff --git a/test/preprocess/samples/style-in-code/input.svelte b/test/preprocess/samples/style-in-code/input.svelte new file mode 100644 index 000000000000..579113ddb976 --- /dev/null +++ b/test/preprocess/samples/style-in-code/input.svelte @@ -0,0 +1,45 @@ + + + + + + +{a} {b} {c} {d} + +{@html ''} + + + +{@html ` + +`} + + diff --git a/test/preprocess/samples/style-in-code/output.svelte b/test/preprocess/samples/style-in-code/output.svelte new file mode 100644 index 000000000000..91c68d254f37 --- /dev/null +++ b/test/preprocess/samples/style-in-code/output.svelte @@ -0,0 +1,33 @@ + + + + + + +{a} {b} {c} {d} + +{@html ''} + + + +{@html ` + +`} + + diff --git a/test/preprocess/samples/update-attributes/_config.js b/test/preprocess/samples/update-attributes/_config.js new file mode 100644 index 000000000000..961ac0a03050 --- /dev/null +++ b/test/preprocess/samples/update-attributes/_config.js @@ -0,0 +1,16 @@ +export default { + preprocess: { + script: ({ content, attributes }) => { + attributes = { ...attributes, c: false, insert: 'foobar' }; + delete attributes['lang']; + if (attributes.context) { + attributes.context = 'module'; + } + + return { + code: content, + attributes + }; + } + } +}; diff --git a/test/preprocess/samples/update-attributes/input.svelte b/test/preprocess/samples/update-attributes/input.svelte new file mode 100644 index 000000000000..19fc081c339a --- /dev/null +++ b/test/preprocess/samples/update-attributes/input.svelte @@ -0,0 +1,14 @@ + + + + + + +{a} \ No newline at end of file diff --git a/test/preprocess/samples/update-attributes/output.svelte b/test/preprocess/samples/update-attributes/output.svelte new file mode 100644 index 000000000000..c287f096a676 --- /dev/null +++ b/test/preprocess/samples/update-attributes/output.svelte @@ -0,0 +1,14 @@ + + + + + + + + +{a} \ No newline at end of file diff --git a/test/sourcemaps/samples/attached-sourcemap/_config.js b/test/sourcemaps/samples/attached-sourcemap/_config.js index 86498caebad3..0af3c492aa6c 100644 --- a/test/sourcemaps/samples/attached-sourcemap/_config.js +++ b/test/sourcemaps/samples/attached-sourcemap/_config.js @@ -37,6 +37,9 @@ export default { get_processor('script', 'replace_me_script', 'done_replace_script_1'), get_processor('script', 'done_replace_script_1', 'done_replace_script_2'), + get_processor('expression', 'replace_me_script', 'done_replace_script_1'), + get_processor('expression', 'done_replace_script_1', 'done_replace_script_2'), + get_processor('style', '.replace_me_style', '.done_replace_style_1'), get_processor('style', '.done_replace_style_1', '.done_replace_style_2') diff --git a/test/sourcemaps/samples/attached-sourcemap/input.svelte b/test/sourcemaps/samples/attached-sourcemap/input.svelte index 21a47a72a9c9..1ae4405d9e4d 100644 --- a/test/sourcemaps/samples/attached-sourcemap/input.svelte +++ b/test/sourcemaps/samples/attached-sourcemap/input.svelte @@ -8,4 +8,4 @@ replace_me_script = 'hello' ; -

{done_replace_script_2}

+

{replace_me_script}

diff --git a/test/sourcemaps/samples/preprocessed-script/input.svelte b/test/sourcemaps/samples/preprocessed-script/input.svelte index 11586619e1a0..8b03658265d7 100644 --- a/test/sourcemaps/samples/preprocessed-script/input.svelte +++ b/test/sourcemaps/samples/preprocessed-script/input.svelte @@ -6,4 +6,4 @@ -

{foo.bar.baz}

+

{foo.baritone.baz}

diff --git a/test/sourcemaps/samples/typescript/_config.js b/test/sourcemaps/samples/typescript/_config.js index c8a955dfbdf4..d0cf8ea4e5bc 100644 --- a/test/sourcemaps/samples/typescript/_config.js +++ b/test/sourcemaps/samples/typescript/_config.js @@ -1,5 +1,11 @@ import * as ts from 'typescript'; +const tsCompilerOptions = { + target: ts.ScriptTarget.ES2015, + module: ts.ModuleKind.ES2015, + sourceMap: true +}; + export default { js_map_sources: [ 'input.svelte' @@ -9,17 +15,24 @@ export default { script: ({ content, filename }) => { const { outputText, sourceMapText } = ts.transpileModule(content, { fileName: filename, - compilerOptions: { - target: ts.ScriptTarget.ES2015, - module: ts.ModuleKind.ES2015, - sourceMap: true - } + compilerOptions: tsCompilerOptions }); return { code: outputText, map: sourceMapText }; + }, + expression: ({ content, filename }) => { + const { outputText, sourceMapText } = ts.transpileModule(content, { + fileName: filename, + compilerOptions: tsCompilerOptions + }); + + return { + code: outputText.replace(/;([\s]+\/\/# sourceMappingURL=[\S]+)$/, '$1'), + map: sourceMapText + }; } } ] diff --git a/test/sourcemaps/samples/typescript/input.svelte b/test/sourcemaps/samples/typescript/input.svelte index 93639544b66e..9fd8fa172e17 100644 --- a/test/sourcemaps/samples/typescript/input.svelte +++ b/test/sourcemaps/samples/typescript/input.svelte @@ -15,4 +15,4 @@

Hello world!

-
Counter value: {count}
+
Counter value: {count as number}