Exactly my idea.

This Github demo was pulled straight out of some work I was doing for the Admin of Prayershub (https://prayershub.com).

Working on this specific feature (the soundtrack uploader) though, I reguarly asked myself "what if I just used Svelte or SolidJS"?

Note, Prayershub uses a regular mix of HTMX and SolidJS, so I can pop-in SolidJS whenever I find convenient.

▲

brokegrammer 3 days ago | parent [-]

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.

▲

brokegrammer 2 days ago | parent [-]

Sure, the build script would be insightful. Removing the virtual dom sounds cool. I've been sleeping on SolidJS because I've always stuck with React after being disappointed by other frameworks. If it allows me to keep my server rendered pages, SolidJS might be what I've been looking for.

	▲	bookofcooks 2 days ago \| parent [-]
		Alright, let me know if you need any extra help. https://gist.github.com/BookOfCooks/42181c4214442144c3e4d7e5...

▲

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.

0. https://inertiajs.com/