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

Question

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?

Shriji Kondan Elangovan · Accepted Answer · 2021-05-04 13:41:24Z

1

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.

answered May 4, 2021 at 13:41

Shriji Kondan Elangovan

1,1396 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

coreuter · Accepted Answer · 2021-06-05 07:47:58Z

0

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.

edited Jun 5, 2021 at 7:47

coreuter

3,6025 gold badges35 silver badges79 bronze badges

answered Jun 4, 2021 at 20:07

Lakshya Wadhwa

711 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related