Skip to content

Add Solid plugin support#12

Open
MuNeNICK wants to merge 2 commits into
elixir-volt:masterfrom
MuNeNICK:solid-plugin
Open

Add Solid plugin support#12
MuNeNICK wants to merge 2 commits into
elixir-volt:masterfrom
MuNeNICK:solid-plugin

Conversation

@MuNeNICK
Copy link
Copy Markdown

Summary

Add Solid JSX/TSX support through Volt's plugin system.

  • Add Volt.Plugin.Solid, using babel-preset-solid through Volt.JS.Runtime.
  • Keep Solid behind explicit plugin configuration because Solid uses the same .jsx and .tsx extensions as React while requiring a different compiler transform.
  • Add Solid import extraction and prebundle handling for solid-js and solid-js/web.
  • Add regression coverage for TSX compilation, type-only imports, require(...), worker URLs, and downlevel source maps.
  • Add a Phoenix example app under examples/solid that configures Volt.Plugin.Solid.

Why

Solid JSX needs the Solid compiler rather than a generic JSX transform. Keeping this in Volt.Plugin.Solid adds Solid support without changing Volt's default Vue/Svelte/React plugin set.

The implementation follows the same plugin boundary as the existing Vue and Svelte support: Volt owns module resolution, bundling, workers, and dev/prod integration, while the framework plugin owns the framework-specific source transform.

Usage

Enable the plugin explicitly in Volt config:

config :volt,
  entry: "assets/js/app.tsx",
  sources: ["**/*.{js,ts,jsx,tsx}"],
  plugins: [Volt.Plugin.Solid]

Use solid-js and solid-js/web from TSX as usual:

import { render } from 'solid-js/web'
import App from './App'

render(() => <App />, document.getElementById('app')!)

The examples/solid app shows the full Phoenix configuration.

Design notes

This PR does not add Solid to the default plugin set because .jsx and .tsx files are already handled by the generic JSX/React path. Enabling Solid automatically would require a broader Volt configuration decision, such as a Solid-specific import_source or framework JSX mode. This PR keeps that decision out of scope and exposes Solid through explicit Volt.Plugin.Solid configuration.

The Solid compiler runtime uses a 32MB QuickJS stack. In local validation with a recent Solid app using Solid 1.9 and Tailwind v4, a 16MB stack overflowed during Babel-based JSX/TSX compilation, while 32MB succeeded for the same input.

This is not meant to claim that 32MB is enough for every Solid project. Larger apps may still need more stack, and I would appreciate maintainer guidance on how Volt should handle compiler runtime resource limits for framework plugins.

For comparison, I also tested a few larger Svelte OSS components locally and saw similar 16MB stack overflows that compiled successfully with 32MB. I did not include any Svelte changes in this PR because that seems like a separate Volt runtime policy question rather than part of adding Solid support.

Notes

I'm currently building an app with SolidJS and Elixir, and I would like to use Volt for that stack in the future. This PR proposes Solid support as an opt-in framework plugin while keeping Volt's default plugin set unchanged.

If Solid support is outside Volt's scope, I completely understand. Otherwise, I’d be happy to adjust the implementation if there is a better fit for Volt’s plugin model.

Validation

  • mix test --include integration
  • mix test test/plugin_test.exs test/builder_test.exs --include integration

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant