Result:
{"code":"/* CompiledComponent generated by Svelte v4.0.1 */\nimport {\n\tSvelteComponent,\n\tadd_render_callback,\n\tappend,\n\tattr,\n\tcreate_bidirectional_transition,\n\tdetach,\n\telement,\n\tinit,\n\tinsert,\n\tlisten,\n\trun_all,\n\tsafe_not_equal,\n\tset_data,\n\tset_input_value,\n\tspace,\n\ttext,\n\tto_number\n} from \"svelte/internal\";\n\nimport \"svelte/internal/disclose-version\";\nimport { createEventDispatcher } from \"svelte\";\nimport { getContext } from \"svelte\";\nimport { fade } from \"svelte/transition\";\n\nfunction create_fragment(ctx) {\n\tlet button0;\n\tlet t1;\n\tlet button1;\n\tlet t3;\n\tlet button2;\n\tlet t5;\n\tlet div5;\n\tlet div0;\n\tlet button3;\n\tlet t7;\n\tlet input0;\n\tlet t8;\n\tlet button4;\n\tlet t10;\n\tlet div1;\n\tlet t12;\n\tlet div2;\n\tlet button5;\n\tlet t14;\n\tlet input1;\n\tlet t15;\n\tlet button6;\n\tlet t17;\n\tlet div3;\n\tlet t19;\n\tlet div4;\n\tlet t20;\n\tlet div5_transition;\n\tlet t21;\n\tlet t22;\n\tlet current;\n\tlet mounted;\n\tlet dispose;\n\n\treturn {\n\t\tc() {\n\t\t\tbutton0 = element(\"button\");\n\t\t\tbutton0.textContent = \"Randomize\";\n\t\t\tt1 = space();\n\t\t\tbutton1 = element(\"button\");\n\t\t\tbutton1.textContent = \"Reset\";\n\t\t\tt3 = space();\n\t\t\tbutton2 = element(\"button\");\n\t\t\tbutton2.textContent = \"Destroy\";\n\t\t\tt5 = space();\n\t\t\tdiv5 = element(\"div\");\n\t\t\tdiv0 = element(\"div\");\n\t\t\tbutton3 = element(\"button\");\n\t\t\tbutton3.textContent = \"-\";\n\t\t\tt7 = space();\n\t\t\tinput0 = element(\"input\");\n\t\t\tt8 = space();\n\t\t\tbutton4 = element(\"button\");\n\t\t\tbutton4.textContent = \"+\";\n\t\t\tt10 = space();\n\t\t\tdiv1 = element(\"div\");\n\t\t\tdiv1.textContent = \"X\";\n\t\t\tt12 = space();\n\t\t\tdiv2 = element(\"div\");\n\t\t\tbutton5 = element(\"button\");\n\t\t\tbutton5.textContent = \"-\";\n\t\t\tt14 = space();\n\t\t\tinput1 = element(\"input\");\n\t\t\tt15 = space();\n\t\t\tbutton6 = element(\"button\");\n\t\t\tbutton6.textContent = \"+\";\n\t\t\tt17 = space();\n\t\t\tdiv3 = element(\"div\");\n\t\t\tdiv3.textContent = \"=\";\n\t\t\tt19 = space();\n\t\t\tdiv4 = element(\"div\");\n\t\t\tt20 = text(/*product*/ ctx[2]);\n\t\t\tt21 = text(\"\\n\\nc: \");\n\t\t\tt22 = text(/*c*/ ctx[3]);\n\t\t\tattr(button0, \"id\", \"random\");\n\t\t\tattr(button1, \"id\", \"reset\");\n\t\t\tattr(button2, \"id\", \"destroy\");\n\t\t\tattr(input0, \"type\", \"number\");\n\t\t\tattr(input0, \"name\", \"\");\n\t\t\tattr(input0, \"id\", \"\");\n\t\t\tattr(div0, \"class\", \"col-[2/3]\");\n\t\t\tattr(input1, \"type\", \"number\");\n\t\t\tattr(input1, \"name\", \"\");\n\t\t\tattr(input1, \"id\", \"\");\n\t\t\tattr(div4, \"class\", \"text-right\");\n\t\t\tattr(div5, \"class\", \"grid grid-cols-[10px_230px] items-baseline gap-[5px] [&_*]:!m-0 [&_*]:p-0\");\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, button0, anchor);\n\t\t\tinsert(target, t1, anchor);\n\t\t\tinsert(target, button1, anchor);\n\t\t\tinsert(target, t3, anchor);\n\t\t\tinsert(target, button2, anchor);\n\t\t\tinsert(target, t5, anchor);\n\t\t\tinsert(target, div5, anchor);\n\t\t\tappend(div5, div0);\n\t\t\tappend(div0, button3);\n\t\t\tappend(div0, t7);\n\t\t\tappend(div0, input0);\n\t\t\tset_input_value(input0, /*a*/ ctx[0]);\n\t\t\tappend(div0, t8);\n\t\t\tappend(div0, button4);\n\t\t\tappend(div5, t10);\n\t\t\tappend(div5, div1);\n\t\t\tappend(div5, t12);\n\t\t\tappend(div5, div2);\n\t\t\tappend(div2, button5);\n\t\t\tappend(div2, t14);\n\t\t\tappend(div2, input1);\n\t\t\tset_input_value(input1, /*b*/ ctx[1]);\n\t\t\tappend(div2, t15);\n\t\t\tappend(div2, button6);\n\t\t\tappend(div5, t17);\n\t\t\tappend(div5, div3);\n\t\t\tappend(div5, t19);\n\t\t\tappend(div5, div4);\n\t\t\tappend(div4, t20);\n\t\t\tinsert(target, t21, anchor);\n\t\t\tinsert(target, t22, anchor);\n\t\t\tcurrent = true;\n\n\t\t\tif (!mounted) {\n\t\t\t\tdispose = [\n\t\t\t\t\tlisten(button3, \"click\", /*click_handler*/ ctx[5]),\n\t\t\t\t\tlisten(input0, \"input\", /*input0_input_handler*/ ctx[6]),\n\t\t\t\t\tlisten(button4, \"click\", /*click_handler_1*/ ctx[7]),\n\t\t\t\t\tlisten(button5, \"click\", /*click_handler_2*/ ctx[8]),\n\t\t\t\t\tlisten(input1, \"input\", /*input1_input_handler*/ ctx[9]),\n\t\t\t\t\tlisten(button6, \"click\", /*click_handler_3*/ ctx[10])\n\t\t\t\t];\n\n\t\t\t\tmounted = true;\n\t\t\t}\n\t\t},\n\t\tp(ctx, [dirty]) {\n\t\t\tif (dirty & /*a*/ 1 && to_number(input0.value) !== /*a*/ ctx[0]) {\n\t\t\t\tset_input_value(input0, /*a*/ ctx[0]);\n\t\t\t}\n\n\t\t\tif (dirty & /*b*/ 2 && to_number(input1.value) !== /*b*/ ctx[1]) {\n\t\t\t\tset_input_value(input1, /*b*/ ctx[1]);\n\t\t\t}\n\n\t\t\tif (!current || dirty & /*product*/ 4) set_data(t20, /*product*/ ctx[2]);\n\t\t},\n\t\ti(local) {\n\t\t\tif (current) return;\n\n\t\t\tadd_render_callback(() => {\n\t\t\t\tif (!current) return;\n\t\t\t\tif (!div5_transition) div5_transition = create_bidirectional_transition(div5, fade, {}, true);\n\t\t\t\tdiv5_transition.run(1);\n\t\t\t});\n\n\t\t\tcurrent = true;\n\t\t},\n\t\to(local) {\n\t\t\tif (!div5_transition) div5_transition = create_bidirectional_transition(div5, fade, {}, false);\n\t\t\tdiv5_transition.run(0);\n\t\t\tcurrent = false;\n\t\t},\n\t\td(detaching) {\n\t\t\tif (detaching) {\n\t\t\t\tdetach(button0);\n\t\t\t\tdetach(t1);\n\t\t\t\tdetach(button1);\n\t\t\t\tdetach(t3);\n\t\t\t\tdetach(button2);\n\t\t\t\tdetach(t5);\n\t\t\t\tdetach(div5);\n\t\t\t\tdetach(t21);\n\t\t\t\tdetach(t22);\n\t\t\t}\n\n\t\t\tif (detaching && div5_transition) div5_transition.end();\n\t\t\tmounted = false;\n\t\t\trun_all(dispose);\n\t\t}\n\t};\n}\n\nfunction instance($$self, $$props, $$invalidate) {\n\tlet product;\n\tconst dispatch = createEventDispatcher();\n\tlet { a = 1 } = $$props;\n\tlet { b = 1 } = $$props;\n\tconst c = getContext(\"c\");\n\n\tfunction reset() {\n\t\t$$invalidate(0, a = 1);\n\t\t$$invalidate(1, b = 1);\n\t}\n\n\tconst click_handler = () => $$invalidate(0, a -= 5);\n\n\tfunction input0_input_handler() {\n\t\ta = to_number(this.value);\n\t\t$$invalidate(0, a);\n\t}\n\n\tconst click_handler_1 = () => $$invalidate(0, a += 5);\n\tconst click_handler_2 = () => $$invalidate(1, b -= 5);\n\n\tfunction input1_input_handler() {\n\t\tb = to_number(this.value);\n\t\t$$invalidate(1, b);\n\t}\n\n\tconst click_handler_3 = () => $$invalidate(1, b += 5);\n\n\t$$self.$$set = $$props => {\n\t\tif ('a' in $$props) $$invalidate(0, a = $$props.a);\n\t\tif ('b' in $$props) $$invalidate(1, b = $$props.b);\n\t};\n\n\t$$self.$$.update = () => {\n\t\tif ($$self.$$.dirty & /*a, b*/ 3) {\n\t\t\t$: $$invalidate(2, product = a * b);\n\t\t}\n\n\t\tif ($$self.$$.dirty & /*product, a, b*/ 7) {\n\t\t\t$: dispatch(\"product\", { product, a, b });\n\t\t}\n\t};\n\n\treturn [\n\t\ta,\n\t\tb,\n\t\tproduct,\n\t\tc,\n\t\treset,\n\t\tclick_handler,\n\t\tinput0_input_handler,\n\t\tclick_handler_1,\n\t\tclick_handler_2,\n\t\tinput1_input_handler,\n\t\tclick_handler_3\n\t];\n}\n\nclass CompiledComponent extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\t\tinit(this, options, instance, create_fragment, safe_not_equal, { a: 0, b: 1, reset: 4 });\n\t}\n\n\tget reset() {\n\t\treturn this.$$.ctx[4];\n\t}\n}\n\nexport default CompiledComponent;","map":{"version":3,"names":[],"sources":["CompiledComponent"],"sourcesContent":["<script>\n\timport { createEventDispatcher } from \"svelte\";\n\timport { getContext } from \"svelte\";\n\timport { fade } from \"svelte/transition\";\n\n\tconst dispatch = createEventDispatcher();\n\n\texport let a = 1;\n\texport let b = 1;\n\t$: product = a * b;\n\t$: dispatch(\"product\", { product, a, b });\n\n\tconst c = getContext(\"c\");\n\n\texport function reset() {\n\t\ta = 1;\n\t\tb = 1;\n\t}\n</script>\n\n<button id=\"random\">Randomize</button>\n<button id=\"reset\">Reset</button>\n<button id=\"destroy\">Destroy</button>\n<!-- ? spicy selectors -->\n<div\n\ttransition:fade|global\n\tclass=\"grid grid-cols-[10px_230px] items-baseline gap-[5px] [&_*]:!m-0 [&_*]:p-0\">\n\t<div class=\"col-[2/3]\">\n\t\t<button on:click={() => (a -= 5)}>-</button>\n\t\t<input type=\"number\" name=\"\" bind:value={a} id=\"\" />\n\t\t<button on:click={() => (a += 5)}>+</button>\n\t</div>\n\t<div>X</div>\n\t<div>\n\t\t<button on:click={() => (b -= 5)}>-</button>\n\t\t<input type=\"number\" name=\"\" bind:value={b} id=\"\" />\n\t\t<button on:click={() => (b += 5)}>+</button>\n\t</div>\n\n\t<div>=</div>\n\t<div class=\"text-right\">{product}</div>\n</div>\n\nc: {c}\n\n<style>\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;SACU,qBAAqB,QAAQ,QAAQ;SACrC,UAAU,QAAQ,QAAQ;SAC1B,IAAI,QAAQ,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAqCf,GAAO;cAC3B,SAEH;oBAAC,GAAC;;;;;;;;;;;;;;;GAvBL,MAAsC;;GACtC,MAAiC;;GACjC,MAAqC;;GAErC,MAiBM;GAdL,MAIM;GAHL,MAA4C;;GAC5C,MAAoD;iCAAX,GAAC;;GAC1C,MAA4C;;GAE7C,MAAY;;GACZ,MAIM;GAHL,MAA4C;;GAC5C,MAAoD;iCAAX,GAAC;;GAC1C,MAA4C;;GAG7C,MAAY;;GACZ,MAAuC;;;;;;;;;;;;;;;;;;;;4DAXG,GAAC;kCAAD,GAAC;;;4DAMD,GAAC;kCAAD,GAAC;;;oEAKlB,GAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAnC1B,QAAQ,GAAG,qBAAqB;OAE3B,CAAC,GAAG,CAAC;OACL,CAAC,GAAG,CAAC;OAIV,CAAC,GAAG,UAAU,CAAC,GAAG;;UAER,KAAK;kBACpB,CAAC,GAAG,CAAC;kBACL,CAAC,GAAG,CAAC;;;6CAYoB,CAAC,IAAI,CAAC;;;EACU,CAAC;;;;+CACjB,CAAC,IAAI,CAAC;+CAIN,CAAC,IAAI,CAAC;;;EACU,CAAC;;;;+CACjB,CAAC,IAAI,CAAC;;;;;;;;;GA3BhC,CAAC,kBAAE,OAAO,GAAG,CAAC,GAAG,CAAC;;;;GAClB,CAAC,EAAE,QAAQ,CAAC,SAAS,IAAI,OAAO,EAAE,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}} {"code":null,"map":null}<script>
import { compile } from "svelte/compiler";
import fs from "fs";
import path from "path";
const pathToComponent = path.join(
"src/routes/svelte-course/Compiler-API/Component.svelte"
);
const svelteCode = fs.readFileSync(pathToComponent, "utf-8");
const { js, css } = compile(svelteCode, {
// options here
filename: "CompiledComponent",
// format: "cjs", // or esm
// generate: "ssr" // or dom
// dev: true
// immutable: true
// legacy: true
// sveltePath: "",
// css: false,
// cssHash: ({ hash, css, name, filename }) => `xyz${hash(css)}`,
// and more! (see docs at https://svelte.dev/docs/svelte-compiler)
});
console.log(js, css);
</script>
<p>Result:</p>
{JSON.stringify(js)}
{JSON.stringify(css)}
<style>
</style>