CODEWITHSUNDEEP
javascriptsveltesvelte-3
Lakshya Wadhwa
Lakshya Wadhwa

Reputation: 71

How to get a single JS file as output from Svelte code?

I want to create a JS file that executes some code on another independent page, when injected dynamically through a script tag. The code that needs to run, I've written it in Svelte. So How Can I get the code as a single HTML file? Currently, there's separate CSS, HTML, JS files when building the bundle.

I can also write the code in react if need be, if it's not possible with Svelte for some reason.

The code is to create a button, that creates an iframe on the page. Then the content within the iframe takes it from there.

How do I achieve this goal of creating a single JS file with the css and html included?

Upvotes: 5

Views: 1824

Answers (2)

Lakshya Wadhwa
Lakshya Wadhwa

Reputation: 71

So I achieved this using 2 rollup files for the different codebases and then concurrently running two npm commands for each.

"build": "rollup -c",
"dev": "rollup -c -w --environment INCLUDE_DEPS,BUILD:dev",
    "sandbox": "rollup -c --environment INCLUDE_DEPS,BUILD:sandbox",
    "production": "rollup -c --environment INCLUDE_DEPS,BUILD:production",
    "code2dev": "rollup -c {NAME OF OTHER ROLLUP FILE} -w --environment INCLUDE_DEPS,BUILD:dev ",
    "start": "sirv public --no-clear --port {CUSTOM PORT HERE}",
    "start:dev": "sirv public --single --dev ",
    "local": "concurrently \"npm run code2dev\" \"npm run dev\" \"node ./server.js\""

Node server.js is just hosting a file on a second port.

Upvotes: 0

Shriji Kondan Elangovan
Shriji Kondan Elangovan

Reputation: 1099

It is possible to achieve this with custom element API on svelte, it will bundle your .svelte files to .js very helpful to make widgets.

I recommend watching this video that addresses your exact question, more information on Noah's blog.

Upvotes: 1

Related Questions