sandpack
sandpack copied to clipboard
codesandbox
Static template for pure HTML/CSS/JS
Tell us how you think we can improve Sandpack
It would be wonderful to have a "static" template that skips all bundling, and renders the HTML/CSS/JS provided.
My usecase: some of my sandpacks are meant to show CSS things. I want to have an HTML file with a <style> tag, so that the user can see the result and poke at the CSS.
I tried to do something similar using the vanilla template, but it seems as though anything added to the <head> of the HTML doc is blown away by the bundler.
Here's a codesandbox demonstrating the issue: https://codesandbox.io/s/vigorous-williams-fol3rg?file=/src/App.js
Packages affected
- [ ] sandpack-client
- [x] sandpack-react
How would your idea work?
I imagine it could work like the "static" template on CodeSandbox.
Though, one issue: the "static" template on CodeSandbox doesn't have any sort of hot reloading. You have to save the file to see the results. Sandpack doesn't have a "save" mechanism, so maybe it could trigger the reload when the user stops typing, with a debounce?
Alternatively: maybe the vanilla template could be updated so that stuff in the <head> is preserved? I don't mind using a more-sophisticated template, but right now it doesn't seem possible.
Thanks y'all!
This is something we definitely want to support in the near future and have a plan together on how to achieve it. At least the part where we would support <head>. The bundler overhead is something that will remain to some extent, however we've also been working on a super lightweight bundler, that uses less than half the memory and network.
The planned solution is:
- Dependencies are downloaded
- Code gets transpiled (if any)
- bundler creates an additional iframe to execute the code, this iframe would start with the provided html and have a small script injected that calls back to the bundler to execute the code
An added benefit of this will be that we'll be able to support more complex setups like multi-page apps and template languages like pug without any server logic.
Very late update about this approach: We tested it and seemed like not all browsers liked it so we didn't roll it out, there's now an open PR that will be released very soon which is built entirely using service workers and uses barely any memory/cpu
This is something we definitely want to support in the near future and have a plan together on how to achieve it. At least the part where we would support
. The bundler overhead is something that will remain to some extent, however we've also been working on a super lightweight bundler, that uses less than half the memory and network.
Awesome 😄 Glad to hear it! That sounds perfect 👍
I also need static template in CodeSandbox, I am trying to create a tutorial and the following sandbox works: https://codesandbox.io/s/optimistic-morning-u7kl9p?file=/main.py in static mode, but SandpackProvider does not support the "static" mode.
HII! Is there any update in this matter?? I would love to use Sandpack also for teach some CSS to my students and as @joshwcomeau said,
I want them to see the result and poke at the CSS
Looking forward to it!
¡Thanks a lot!
Ivan
Hey there! I just wanted to jump on the back of this discussion and see if @joshwcomeau or others have found a workaround for the time being? It would be pretty amazing to have this feature.
Keep up the amazing work on sandpack y'all, it's great stuff!
Thanks!
Hey there! I just wanted to jump on the back of this discussion and see if @joshwcomeau or others have found a workaround for the time being? It would be pretty amazing to have this feature.
Keep up the amazing work on sandpack y'all, it's great stuff!
Thanks!
Not me... I wish someone would soon!! 😀
Stay tuned for exciting news on https://github.com/codesandbox/sandpack/pull/830 🔥
