@nifrajs/web-solid 1.13.0 → 2.1.0

package/dist/svg.d.ts

@@ -0,0 +1,5 @@
+import type { BunPlugin } from "bun";
+/** The Solid SVG-component plugin. `generate` selects the Solid `"dom"`/`"ssr"` output, matching
+ * `solidBunPlugin`. A plain `import "./icon.svg"` (asset URL) is untouched - only `?component` matches. */
+export declare function solidSvgComponentBunPlugin(generate: "dom" | "ssr"): BunPlugin;
+//# sourceMappingURL=svg.d.ts.map

package/dist/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../src/svg.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC;2GAC2G;AAC3G,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,KAAK,GAAG,KAAK,GAAG,SAAS,CAoB7E"}

package/dist/svg.js

@@ -0,0 +1,40 @@
+/**
+ * `@nifrajs/web-solid/svg` - the Solid build of the SVG-as-component plugin. `import Icon from
+ * "./icon.svg?component"`, then `<Icon class="w-6 h-6" />`, props spread onto the root `<svg>`.
+ *
+ * Solid JSX is not standard JSX (it compiles through `babel-preset-solid`) and uses `class`, not
+ * `className` - so this can't reuse the React/Preact plugin from `@nifrajs/web/plugins/svg`. It shares
+ * that package's `svgToJsx` transform (with `classProp: "class"`) to produce a Solid component, then
+ * runs the same Solid + TypeScript babel passes `solidBunPlugin` applies to `.tsx`. Pass `"dom"` for the
+ * client bundle and preload `"ssr"` for the server.
+ */
+import { transformAsync } from "@babel/core";
+// @ts-expect-error - no type declarations published
+import presetTypeScript from "@babel/preset-typescript";
+import { SVG_COMPONENT_FILTER, svgComponentSource } from "@nifrajs/web/plugins/svg";
+// @ts-expect-error - no type declarations published
+import presetSolid from "babel-preset-solid";
+/** The Solid SVG-component plugin. `generate` selects the Solid `"dom"`/`"ssr"` output, matching
+ * `solidBunPlugin`. A plain `import "./icon.svg"` (asset URL) is untouched - only `?component` matches. */
+export function solidSvgComponentBunPlugin(generate) {
+    return {
+        name: `nifra-solid-svg-${generate}`,
+        setup(build) {
+            build.onLoad({ filter: SVG_COMPONENT_FILTER }, async (args) => {
+                const path = args.path.split("?")[0] ?? args.path;
+                const xml = await Bun.file(path).text();
+                // Solid uses `class`; emit the component JSX, then run the Solid + TS babel passes.
+                const source = svgComponentSource(xml, { classProp: "class" });
+                const result = await transformAsync(source, {
+                    filename: `${path}.tsx`, // ensure presetTypeScript treats it as TSX-eligible
+                    presets: [
+                        [presetSolid, { generate, hydratable: true }],
+                        [presetTypeScript, { onlyRemoveTypeImports: true }],
+                    ],
+                });
+                return { contents: result?.code ?? "", loader: "js" };
+            });
+        },
+    };
+}
+//# sourceMappingURL=svg.js.map

package/dist/svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.js","sourceRoot":"","sources":["../src/svg.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAC5C,oDAAoD;AACpD,OAAO,gBAAgB,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AACnF,oDAAoD;AACpD,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAG5C;2GAC2G;AAC3G,MAAM,UAAU,0BAA0B,CAAC,QAAuB;IAChE,OAAO;QACL,IAAI,EAAE,mBAAmB,QAAQ,EAAE;QACnC,KAAK,CAAC,KAAK;YACT,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,oBAAoB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;gBAC5D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAA;gBACjD,MAAM,GAAG,GAAG,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;gBACvC,oFAAoF;gBACpF,MAAM,MAAM,GAAG,kBAAkB,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;gBAC9D,MAAM,MAAM,GAAG,MAAM,cAAc,CAAC,MAAM,EAAE;oBAC1C,QAAQ,EAAE,GAAG,IAAI,MAAM,EAAE,oDAAoD;oBAC7E,OAAO,EAAE;wBACP,CAAC,WAAW,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;wBAC7C,CAAC,gBAAgB,EAAE,EAAE,qBAAqB,EAAE,IAAI,EAAE,CAAC;qBACpD;iBACF,CAAC,CAAA;gBACF,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,IAAI,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;YACvD,CAAC,CAAC,CAAA;QACJ,CAAC;KACF,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-solid",
-  "version": "1.13.0",
+  "version": "2.1.0",
   "description": "Solid render adapter for @nifrajs/web — SSR + hydration + the Solid Babel build plugin.",
   "keywords": [
     "bun",
@@ -61,6 +61,11 @@
       "types": "./dist/mdx.d.ts",
       "default": "./dist/mdx.js"
     },
+    "./svg": {
+      "bun": "./src/svg.ts",
+      "types": "./dist/svg.d.ts",
+      "default": "./dist/svg.js"
+    },
     "./mdx-runtime": {
       "bun": "./src/mdx-runtime.ts",
       "types": "./dist/mdx-runtime.d.ts",
@@ -82,9 +87,9 @@
   "dependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
-    "@nifrajs/i18n": "1.13.0",
-    "@nifrajs/image": "1.13.0",
-    "@nifrajs/web": "1.13.0",
+    "@nifrajs/i18n": "2.1.0",
+    "@nifrajs/image": "2.1.0",
+    "@nifrajs/web": "2.1.0",
     "babel-preset-solid": "^1.9.3"
   },
   "peerDependencies": {

package/src/svg.ts

@@ -0,0 +1,41 @@
+/**
+ * `@nifrajs/web-solid/svg` - the Solid build of the SVG-as-component plugin. `import Icon from
+ * "./icon.svg?component"`, then `<Icon class="w-6 h-6" />`, props spread onto the root `<svg>`.
+ *
+ * Solid JSX is not standard JSX (it compiles through `babel-preset-solid`) and uses `class`, not
+ * `className` - so this can't reuse the React/Preact plugin from `@nifrajs/web/plugins/svg`. It shares
+ * that package's `svgToJsx` transform (with `classProp: "class"`) to produce a Solid component, then
+ * runs the same Solid + TypeScript babel passes `solidBunPlugin` applies to `.tsx`. Pass `"dom"` for the
+ * client bundle and preload `"ssr"` for the server.
+ */
+import { transformAsync } from "@babel/core"
+// @ts-expect-error - no type declarations published
+import presetTypeScript from "@babel/preset-typescript"
+import { SVG_COMPONENT_FILTER, svgComponentSource } from "@nifrajs/web/plugins/svg"
+// @ts-expect-error - no type declarations published
+import presetSolid from "babel-preset-solid"
+import type { BunPlugin } from "bun"
+
+/** The Solid SVG-component plugin. `generate` selects the Solid `"dom"`/`"ssr"` output, matching
+ * `solidBunPlugin`. A plain `import "./icon.svg"` (asset URL) is untouched - only `?component` matches. */
+export function solidSvgComponentBunPlugin(generate: "dom" | "ssr"): BunPlugin {
+  return {
+    name: `nifra-solid-svg-${generate}`,
+    setup(build) {
+      build.onLoad({ filter: SVG_COMPONENT_FILTER }, async (args) => {
+        const path = args.path.split("?")[0] ?? args.path
+        const xml = await Bun.file(path).text()
+        // Solid uses `class`; emit the component JSX, then run the Solid + TS babel passes.
+        const source = svgComponentSource(xml, { classProp: "class" })
+        const result = await transformAsync(source, {
+          filename: `${path}.tsx`, // ensure presetTypeScript treats it as TSX-eligible
+          presets: [
+            [presetSolid, { generate, hydratable: true }],
+            [presetTypeScript, { onlyRemoveTypeImports: true }],
+          ],
+        })
+        return { contents: result?.code ?? "", loader: "js" }
+      })
+    },
+  }
+}