Comments (7)
here's an example of a REPL inside a REPL (which makes use of an iframe)
https://svelte.dev/repl/eefc5b3e2311457693f153dcdf3ece2f?version=3.31.0
it has the html / css / js
being applied
from bookit.
Oh dang. This is exactly what I need. Thank you for the link!
from bookit.
I might need some help with this. I've been looking at https://github.com/sveltejs/sites/blob/master/packages/repl/src/lib/Output/Viewer.svelte
and have a prototype where it's kinda working, it's just html rn. No css or JS.
from bookit.
no problemo homie! looking forward to boo 👻 coming through
from bookit.
So now it feels like I'm completely re-implementing the REPL now that I'm getting into dealing with imports and nested components. I really want this iframe aspect to work but it's def a big beast beyond just getting a single component rendered into the iframe.
I might need to fork large parts of the repl repo and use their bundler as it's already taking care of the hard stuff (imports) Def feels like a lot of work. 😅
from bookit.
I've been hacking on this all day and have now really hit some bumps with Typescript and this approach . Kinda feels like this approach of dealing with Svelte compiling inside of Bookit might not be the right approach. I did have a working prototype that used a portal with an iframe but need to find some way to get component state to update.
from bookit.
Maybe, rather than passing code to the iframe, generate a page from the code and add that route to the iframe. Svelte will take care of the rest JS or TS.
Maybe a preprocessor would be the way to handle the generation ?
from bookit.
Related Issues (13)
- How to hide from production HOT 1
- Select frame from side nav HOT 1
- Make all heading areas collapsable HOT 1
- Mobile UI v1 HOT 1
- Story Title is `undefined`
- [feat] extract automatically component docs from TS/JSDoc annotation
- Project Status Update HOT 2
- Docs HOT 3
- Needs a site HOT 3
- More knobs for controls
- Code View Syntax Highlighting
- Make urls better HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bookit.