fix(solid): emit proper solid output

Author: quantizor

.changeset/soft-eels-bow.md

@@ -0,0 +1,5 @@
+---
+'markdown-to-jsx': patch
+---
+
+Ensure Solid renderer uses Solid's hyperscript runtime so JSX returns real elements instead of `[object Object]` placeholders

bunup.config.ts

@@ -29,7 +29,7 @@ export default defineConfig([
     outDir: 'dist',
     format: ['esm', 'cjs'],
     dts: true,
-    external: ['react', 'react-native', 'solid-js', 'vue'],
+    external: ['react', 'react-native', 'solid-js', 'solid-js/h', 'vue'],
     target: 'browser',
   },
 ])

scripts/metrics.baseline.json

@@ -506,5 +506,132 @@
       "blockParseIterations": 919,
       "inlineParseIterations": 1283
     }
+  },
+  "solid": {
+    "timestamp": "2025-12-06T01:25:21.467Z",
+    "target": "solid",
+    "inputSize": 173,
+    "parseTime": 5.81,
+    "blockParsers": {
+      "blockQuote": {
+        "attempts": 70,
+        "hits": 60
+      },
+      "breakThematic": {
+        "attempts": 573,
+        "hits": 55
+      },
+      "codeBlock": {
+        "attempts": 30,
+        "hits": 20
+      },
+      "codeFenced": {
+        "attempts": 184,
+        "hits": 21
+      },
+      "footnote": {
+        "attempts": 15,
+        "hits": 0
+      },
+      "frontmatter": {
+        "attempts": 1,
+        "hits": 1
+      },
+      "heading": {
+        "attempts": 794,
+        "hits": 787
+      },
+      "headingSetext": {
+        "attempts": 1144,
+        "hits": 11
+      },
+      "htmlBlock": {
+        "attempts": 88,
+        "hits": 25
+      },
+      "htmlComment": {
+        "attempts": 6,
+        "hits": 3
+      },
+      "listGfmTask": {
+        "attempts": 20,
+        "hits": 20
+      },
+      "list": {
+        "attempts": 261,
+        "hits": 151
+      },
+      "paragraph": {
+        "attempts": 872,
+        "hits": 311
+      },
+      "table": {
+        "attempts": 40,
+        "hits": 40
+      }
+    },
+    "inlineParsers": {
+      "breakLine": {
+        "attempts": 5,
+        "hits": 5
+      },
+      "codeInline": {
+        "attempts": 51,
+        "hits": 51
+      },
+      "escaped": {
+        "attempts": 5,
+        "hits": 5
+      },
+      "formatting": {
+        "attempts": 392,
+        "hits": 392
+      },
+      "footnoteRef": {
+        "attempts": 15,
+        "hits": 15
+      },
+      "htmlComment": {
+        "attempts": 20,
+        "hits": 10
+      },
+      "htmlElement": {
+        "attempts": 66,
+        "hits": 66
+      },
+      "image": {
+        "attempts": 25,
+        "hits": 25
+      },
+      "link": {
+        "attempts": 51,
+        "hits": 42
+      },
+      "linkAngleBrace": {
+        "attempts": 76,
+        "hits": 10
+      },
+      "linkBareUrl": {
+        "attempts": 25,
+        "hits": 25
+      },
+      "linkEmail": {
+        "attempts": 5,
+        "hits": 5
+      },
+      "linkRef": {
+        "attempts": 44,
+        "hits": 20
+      },
+      "refImage": {
+        "attempts": 0,
+        "hits": 0
+      }
+    },
+    "operationCounts": {
+      "totalOperations": 3348,
+      "blockParseIterations": 919,
+      "inlineParseIterations": 1283
+    }
   }
 }

src/solid.tsx

@@ -10,6 +10,7 @@ import {
   useContext,
   type Context,
 } from 'solid-js'
+import solidH from 'solid-js/h'
 import * as $ from './constants'
 import * as parse from './parse'
 import { MarkdownToJSX, RuleType, RequireAtLeastOne } from './types'
@@ -26,6 +27,9 @@ const TRIM_STARTING_NEWLINES = /^\n+/
 // Import shared HTML to JSX conversion utilities
 import { htmlAttrsToJSXProps } from './utils'
 
+// Internal helper to create SolidJS elements
+const hasDOM = typeof document !== 'undefined'
+
 // Helper function for URL encoding backslashes and backticks per CommonMark spec
 function encodeUrlTarget(target: string): string {
   // Fast path: check if encoding is needed
@@ -538,35 +542,39 @@ export function astToJSX(
   const compileHTML = (input: string) =>
     compiler(input, { ...opts, wrapper: null })
 
-  // Internal helper to create SolidJS elements
   function createSolidElement(
     tag: string | Component<Record<string, unknown>>,
     props: Record<string, unknown>,
     ...children: HChildren[]
   ): JSX.Element {
-    const childrenValue =
-      children.length === 0
-        ? undefined
-        : children.length === 1
-          ? children[0]
-          : children
-    if (typeof tag === 'string') {
+    if (!hasDOM) {
+      // Non-DOM environments (tests/SSR) get a structural representation or component output
+      const childValue =
+        children.length === 0
+          ? undefined
+          : children.length === 1
+            ? children[0]
+            : children
+      const propsWithChildren =
+        childValue === undefined ? props : { ...props, children: childValue }
+      if (typeof tag === 'function') {
+        return (tag as Component<Record<string, unknown>>)(
+          propsWithChildren as Record<string, unknown>
+        )
+      }
       return {
         t: tag,
-        p:
-          childrenValue === undefined
-            ? props
-            : { ...props, children: childrenValue },
+        p: propsWithChildren,
       } as unknown as JSX.Element
     }
-    if (typeof tag === 'function') {
-      return (tag as Component<Record<string, unknown>>)(
-        (childrenValue === undefined
-          ? props
-          : { ...props, children: childrenValue }) as Record<string, unknown>
-      )
-    }
-    return tag as JSX.Element
+    const elementFactory = solidH(
+      tag as Component<Record<string, unknown>>,
+      props,
+      ...children
+    )
+    return typeof elementFactory === 'function'
+      ? (elementFactory as () => JSX.Element)()
+      : (elementFactory as JSX.Element)
   }
 
   // JSX helper function - this is what @jsx pragma uses
@@ -907,29 +915,33 @@ function h(
   props: Record<string, unknown>,
   ...children: (JSX.Element | string)[]
 ): JSX.Element {
-  const childrenValue =
-    children.length === 0
-      ? undefined
-      : children.length === 1
-        ? children[0]
-        : children
-  if (typeof tag === 'string') {
+  if (typeof document === 'undefined') {
+    const childValue =
+      children.length === 0
+        ? undefined
+        : children.length === 1
+          ? children[0]
+          : children
+    const propsWithChildren =
+      childValue === undefined ? props : { ...props, children: childValue }
+    if (typeof tag === 'function') {
+      return (tag as Component<Record<string, unknown>>)(
+        propsWithChildren as Record<string, unknown>
+      )
+    }
     return {
       t: tag,
-      p:
-        childrenValue === undefined
-          ? props
-          : { ...props, children: childrenValue },
+      p: propsWithChildren,
     } as unknown as JSX.Element
   }
-  if (typeof tag === 'function') {
-    return (tag as Component<Record<string, unknown>>)(
-      (childrenValue === undefined
-        ? props
-        : { ...props, children: childrenValue }) as Record<string, unknown>
-    )
-  }
-  return tag as JSX.Element
+  const elementFactory = solidH(
+    tag as Component<Record<string, unknown>>,
+    props,
+    ...children
+  )
+  return typeof elementFactory === 'function'
+    ? (elementFactory as () => JSX.Element)()
+    : (elementFactory as JSX.Element)
 }
 
 // Context provider component