feat: add SolidJS integration (#540) (#546)

* feat: add SolidJS integration

Adds `@ox-content/vite-plugin-solid`, mirroring the Vue, React, and Svelte
integrations, plus a `Solid` target for the renderer's framework codegen.

Solid's JSX is compile-time only — there is no runtime element factory like
React's `createElement` or Vue's `h` — so the two consumers need different
output shapes:

- The Vite plugin emits Solid JSX and lets `vite-plugin-solid` compile it.
  That is the same arrangement solid-mdx uses, and it keeps the
  environment-sensitive `generate: 'dom' | 'ssr'` decision with the plugin
  that owns it.
- The Rust/N-API `renderFrameworkComponentCode` path has to produce code that
  runs without a compiler, so it targets `solid-js/h`, Solid's hyperscript
  entry point.

The JSX approach costs two setup rules that the sibling integrations do not
have: `oxContentSolid()` must precede `solid()` (both are `enforce: 'pre'`,
so array order decides who sees the Markdown first), and `solid()` needs the
Markdown extensions in its `extensions` option. Both mistakes otherwise fail
as an opaque Babel syntax error, so `verifySolidPlugin` checks ordering when
the config resolves and detects uncompiled output in a `post` transform,
reporting each with the fix.

Closes #540

* fix: bump brace-expansion to patched versions

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>

* ci: publish solid vite plugin preview via pkg-pr-new

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>

* fix: address Solid integration review feedback

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>

* test: cover @ox-content/vite-plugin-solid in the package dry-run

The check validates that every packed tarball's `files`/`exports` resolve to
files that actually ship. A newly published package that is not listed is
exactly the case it exists to catch.

---------

Co-authored-by: Codesmith <codesmith-bot@users.noreply.github.com>

Author: ubugeeei

.github/workflows/nightly.yml

@@ -303,6 +303,7 @@ jobs:
             ./npm/unplugin-ox-content \
             ./npm/vite-plugin-ox-content \
             ./npm/vite-plugin-ox-content-react \
+            ./npm/vite-plugin-ox-content-solid \
             ./npm/vite-plugin-ox-content-svelte \
             ./npm/vite-plugin-ox-content-vue
 

.github/workflows/publish.yml

@@ -398,6 +398,18 @@ jobs:
           TARBALL=$(vp exec -- pnpm pack --pack-destination /tmp | tail -1)
           npm publish "$TARBALL" --provenance --access public --tag "$NPM_TAG"
 
+      - name: Publish @ox-content/vite-plugin-solid
+        working-directory: npm/vite-plugin-ox-content-solid
+        run: |
+          PKG_NAME=$(node -p "require('./package.json').name")
+          PKG_VERSION=$(node -p "require('./package.json').version")
+          if npm view "${PKG_NAME}@${PKG_VERSION}" version >/dev/null 2>&1; then
+            echo "Skipping ${PKG_NAME}@${PKG_VERSION} (already published)"
+            exit 0
+          fi
+          TARBALL=$(vp exec -- pnpm pack --pack-destination /tmp | tail -1)
+          npm publish "$TARBALL" --provenance --access public --tag "$NPM_TAG"
+
       - name: Publish @ox-content/vite-plugin-svelte
         working-directory: npm/vite-plugin-ox-content-svelte
         run: |

README.md

@@ -139,6 +139,9 @@ npm install @ox-content/vite-plugin-react
 
 # Svelte
 npm install @ox-content/vite-plugin-svelte
+
+# Solid (vite-plugin-solid compiles the generated JSX, so it is required)
+npm install @ox-content/vite-plugin-solid solid-js vite-plugin-solid
 ```
 
 ### i18n Static Checker (CLI)

crates/ox_content_napi/index.d.ts

@@ -36,7 +36,7 @@ fn props_to_map(value: serde_json::Value) -> FxHashMap<String, serde_json::Value
 
 /// Renders already-produced Markdown HTML into framework-native component code.
 ///
-/// The `target` argument accepts `"react"`, `"vue"`, and `"svelte"`.
+/// The `target` argument accepts `"react"`, `"solid"`, `"vue"`, and `"svelte"`.
 /// `mode` defaults to `"expression"` for backward compatibility.
 #[napi(js_name = "renderFrameworkComponentCode")]
 pub fn render_framework_component_code(

crates/ox_content_napi/src/framework_codegen.rs

@@ -1841,7 +1841,7 @@ export declare function render(astJson: string): RenderResult
 /**
  * Renders already-produced Markdown HTML into framework-native component code.
  *
- * The `target` argument accepts `"react"`, `"vue"`, and `"svelte"`.
+ * The `target` argument accepts `"react"`, `"solid"`, `"vue"`, and `"svelte"`.
  * `mode` defaults to `"expression"` for backward compatibility.
  */
 export declare function renderFrameworkComponentCode(html: string, target: string, islands?: Array<JsFrameworkComponentIsland> | undefined | null, mode?: string | undefined | null): string

crates/ox_content_napi/src/tests/snapshots/ox_content_napi__tests__runtime_features__javascript_wrapper_declarations.snap

@@ -30,6 +30,7 @@ pub struct FrameworkComponentIsland {
 #[derive(Clone, Copy, Debug, Eq, PartialEq)]
 pub enum FrameworkCodegenTarget {
     React,
+    Solid,
     Svelte,
     Vue,
 }
@@ -38,6 +39,7 @@ impl FrameworkCodegenTarget {
     pub fn as_str(self) -> &'static str {
         match self {
             Self::React => "react",
+            Self::Solid => "solid",
             Self::Svelte => "svelte",
             Self::Vue => "vue",
         }
@@ -56,6 +58,7 @@ impl FromStr for FrameworkCodegenTarget {
     fn from_str(value: &str) -> Result<Self, Self::Err> {
         match value {
             "react" => Ok(Self::React),
+            "solid" | "solid-js" | "solidjs" => Ok(Self::Solid),
             "svelte" => Ok(Self::Svelte),
             "vue" => Ok(Self::Vue),
             _ => Err(FrameworkCodegenError::UnsupportedTarget { target: String::from(value) }),
@@ -179,9 +182,9 @@ fn render_framework_expression(
     islands: &[FrameworkComponentIsland],
 ) -> Result<String, FrameworkCodegenError> {
     match target {
-        FrameworkCodegenTarget::React | FrameworkCodegenTarget::Vue => {
-            Ok(render_framework_component_code(html, target, islands))
-        }
+        FrameworkCodegenTarget::React
+        | FrameworkCodegenTarget::Solid
+        | FrameworkCodegenTarget::Vue => Ok(render_framework_component_code(html, target, islands)),
         FrameworkCodegenTarget::Svelte => Err(FrameworkCodegenError::UnsupportedModeForTarget {
             mode: FrameworkCodegenMode::Expression,
             target,
@@ -195,6 +198,7 @@ fn render_framework_render_function(
 ) -> Result<String, FrameworkCodegenError> {
     match target {
         FrameworkCodegenTarget::React => Ok(react::render_function_module(expression)),
+        FrameworkCodegenTarget::Solid => Ok(solid::render_function_module(expression)),
         FrameworkCodegenTarget::Vue => Ok(vue::render_function_module(expression)),
         FrameworkCodegenTarget::Svelte => Err(FrameworkCodegenError::UnsupportedModeForTarget {
             mode: FrameworkCodegenMode::RenderFunction,
@@ -213,6 +217,10 @@ fn render_framework_component(
             let expression = render_framework_component_code(html, target, islands);
             Ok(react::component_module(&expression))
         }
+        FrameworkCodegenTarget::Solid => {
+            let expression = render_framework_component_code(html, target, islands);
+            Ok(solid::component_module(&expression))
+        }
         FrameworkCodegenTarget::Vue => {
             let expression = render_framework_component_code(html, target, islands);
             Ok(vue::component_module(&expression))
@@ -224,6 +232,7 @@ fn render_framework_component(
 fn render_inner_html_component(html: &str, target: FrameworkCodegenTarget) -> String {
     match target {
         FrameworkCodegenTarget::React => react::inner_html_component_module(html),
+        FrameworkCodegenTarget::Solid => solid::inner_html_component_module(html),
         FrameworkCodegenTarget::Svelte => svelte::inner_html_component_module(html),
         FrameworkCodegenTarget::Vue => vue::inner_html_component_module(html),
     }

crates/ox_content_renderer/src/frameworks.rs

@@ -1,6 +1,6 @@
 use super::{
     parser::{HtmlElement, HtmlNode},
-    react, shared, vue, FrameworkCodegenTarget, FrameworkComponentIsland,
+    react, shared, solid, vue, FrameworkCodegenTarget, FrameworkComponentIsland,
 };
 use smallvec::SmallVec;
 
@@ -17,6 +17,7 @@ impl FrameworkCodegen<'_> {
 
         match self.target {
             FrameworkCodegenTarget::React => react::render_root(&children),
+            FrameworkCodegenTarget::Solid => solid::render_root(&children),
             FrameworkCodegenTarget::Svelte => {
                 unreachable!("svelte component output does not use the VDOM renderer")
             }
@@ -51,6 +52,7 @@ impl FrameworkCodegen<'_> {
 
         match self.target {
             FrameworkCodegenTarget::React => react::render_element(element, &children),
+            FrameworkCodegenTarget::Solid => solid::render_element(element, &children),
             FrameworkCodegenTarget::Svelte => {
                 unreachable!("svelte component output does not use the VDOM renderer")
             }
@@ -61,6 +63,7 @@ impl FrameworkCodegen<'_> {
     fn render_island(&self, island: &FrameworkComponentIsland) -> String {
         match self.target {
             FrameworkCodegenTarget::React => react::render_island(island),
+            FrameworkCodegenTarget::Solid => solid::render_island(island),
             FrameworkCodegenTarget::Svelte => {
                 unreachable!("svelte component output does not use the VDOM renderer")
             }

crates/ox_content_renderer/src/frameworks/render.rs

@@ -0,0 +1,9 @@
+---
+source: crates/ox_content_renderer/src/frameworks/tests.rs
+expression: "format!(\"single:\\n{single}\\n\\nmany:\\n{many}\")"
+---
+single:
+h('div', { class: 'ox-content' }, h("p", null, h("span", null, "one")))
+
+many:
+h('div', { class: 'ox-content' }, h("p", null, h("span", null, "one"), h("span", null, "two")))

crates/ox_content_renderer/src/frameworks/snapshots/ox_content_renderer__frameworks__tests__renders_solid_children_variadically.snap

@@ -0,0 +1,28 @@
+---
+source: crates/ox_content_renderer/src/frameworks/tests.rs
+expression: "format!(\"component:\\n{component}\\n\\nrender_function:\\n{render_function}\\n\\ninner_html:\\n{inner_html}\")"
+---
+component:
+import h from 'solid-js/h';
+
+export default function MarkdownContent() {
+  return h('div', { class: 'ox-content' }, h("p", null, "Hello"));
+}
+
+
+render_function:
+import h from 'solid-js/h';
+
+export function renderMarkdownContent() {
+  return h('div', { class: 'ox-content' }, h("p", null, "Hello"));
+}
+
+
+inner_html:
+import h from 'solid-js/h';
+
+const rawHtml = "\x3Cp>Hello\x3C/p>";
+
+export default function MarkdownContent() {
+  return h('div', { class: 'ox-content', innerHTML: rawHtml });
+}