▲ | brokegrammer 3 days ago | ||||||||||||||||
I've been thinking about loading React or something similar for specific components but still not sure which method I'm going to use for that. How are you embedding SolidJS on specific pages? Or do you actually have a full build pipeline? | |||||||||||||||||
▲ | bookofcooks 2 days ago | parent | next [-] | ||||||||||||||||
It actually depends on the page. Some pages, I don't use the SolidJS JSX, just its plain-js state primitives. For other page, I'll use full-blown SolidJS (with JSX and everything) for like a popup. Example: https://pasteboard.co/hY35xM7VbATG.png Now, how I specifically embed SolidJS, its pretty simple, I have my entrypoint files for specific pages: assets/admin-edit-book.tsx assets/admin-edit-song.tsx assets/single-worship.tsx assets/worship-edit.tsx Then I have a 30-line build script that invokes esbuild along with esbuild-plugin-solid (to compile JSX to plain-old html, no fancy virtual dom) to compile the scripts into javascript. I can share the build script if you'd like. It helps that SolidJS is so self-contained that it makes such a setup trivial. | |||||||||||||||||
| |||||||||||||||||
▲ | pbowyer 2 days ago | parent | prev [-] | ||||||||||||||||
I do this with Vue in Symfony PHP apps. Depending on the scope I eitehr have a full build pipeline for the JS (preferred) or will include the files direct from a CDN and have in-HTML templates that are parsed on load. For passing data into it I've used Inertia.js [0] and also my own data-in-page setup that's parsed and loaded into the Vue app. The app then writes the changes back out, usually into a hidden form input. The form on the page is then submitted as usual to the server, along with any other data that I need. It's a great way for adding more complicated behaviour to an existing app. |