@nifrajs/web-svelte 1.12.0 → 2.0.0

package/dist/Await.svelte

@@ -11,7 +11,7 @@
 <script>
   let { resolve, children, pending, error } = $props()
   const isDeferred = (v) =>
-    v != null && typeof v === "object" && v.__velo_deferred === true
+    v != null && typeof v === "object" && v.__nifra_deferred === true
 </script>
 
 {#if isDeferred(resolve)}

package/dist/Chain.svelte

@@ -15,10 +15,10 @@
     {@const Page = chain[0]}
     <Page {...props} />
   {/if}
-{:else if chain[0] && chain[0].__veloErrorBoundary}
+{:else if chain[0] && chain[0].__nifraErrorBoundary}
   <!-- nifra `_error` boundary marker (from errorBoundary()): wrap the rest in <svelte:boundary>; the
        `failed` snippet renders the route's _error component with the serialized error. -->
-  {@const Fallback = chain[0].__veloErrorBoundary}
+  {@const Fallback = chain[0].__nifraErrorBoundary}
   <svelte:boundary>
     <Self chain={chain.slice(1)} {props} />
     {#snippet failed(error)}

package/dist/svg.d.ts

@@ -0,0 +1,7 @@
+import type { BunPlugin } from "bun";
+/** Wrap raw SVG XML in a Svelte 5 component: strip XML noise, spread props onto the root `<svg>`. */
+export declare function svgToSvelte(xml: string): string;
+/** The Svelte SVG-component plugin. `generate` selects Svelte's `"client"`/`"server"` output, matching
+ * `svelteBunPlugin`. */
+export declare function svelteSvgComponentBunPlugin(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":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,qGAAqG;AACrG,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAS/C;AAED;wBACwB;AACxB,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,KAAK,GAAG,KAAK,GAAG,SAAS,CAe9E"}

package/dist/svg.js

@@ -0,0 +1,42 @@
+/**
+ * `@nifrajs/web-svelte/svg` - the Svelte 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>`.
+ *
+ * Svelte markup accepts SVG almost verbatim (`class`, hyphenated attributes, an inline `style` string
+ * all work as-is), so - unlike the JSX adapters - no attribute rewriting is needed: the raw SVG is
+ * wrapped in a Svelte 5 component that spreads its props onto the root element, then compiled with the
+ * project's `svelte` compiler. Pass `"dom"` for the client bundle and preload `"ssr"` for the server;
+ * a plain `import "./icon.svg"` (asset URL) is untouched - only `?component` matches.
+ */
+import { SVG_COMPONENT_FILTER } from "@nifrajs/web/plugins/svg";
+import { compile } from "svelte/compiler";
+/** Wrap raw SVG XML in a Svelte 5 component: strip XML noise, spread props onto the root `<svg>`. */
+export function svgToSvelte(xml) {
+    const cleaned = xml
+        .replace(/<\?xml[\s\S]*?\?>/g, "")
+        .replace(/<!--[\s\S]*?-->/g, "")
+        .replace(/<!DOCTYPE[^>]*>/gi, "")
+        .trim();
+    // `$props()` opts the component into runes (Svelte 5); spread onto the root so user attrs win.
+    const withSpread = cleaned.replace(/^(<svg\b[^>]*?)>/, "$1 {...props}>");
+    return `<script>const props = $props()</script>\n${withSpread}\n`;
+}
+/** The Svelte SVG-component plugin. `generate` selects Svelte's `"client"`/`"server"` output, matching
+ * `svelteBunPlugin`. */
+export function svelteSvgComponentBunPlugin(generate) {
+    return {
+        name: `nifra-svelte-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();
+                const { js } = compile(svgToSvelte(xml), {
+                    generate: generate === "ssr" ? "server" : "client",
+                    filename: path,
+                });
+                return { contents: js.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,oBAAoB,EAAE,MAAM,0BAA0B,CAAA;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEzC,qGAAqG;AACrG,MAAM,UAAU,WAAW,CAAC,GAAW;IACrC,MAAM,OAAO,GAAG,GAAG;SAChB,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC;SACjC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC;SAC/B,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;SAChC,IAAI,EAAE,CAAA;IACT,+FAA+F;IAC/F,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAA;IACxE,OAAO,4CAA4C,UAAU,IAAI,CAAA;AACnE,CAAC;AAED;wBACwB;AACxB,MAAM,UAAU,2BAA2B,CAAC,QAAuB;IACjE,OAAO;QACL,IAAI,EAAE,oBAAoB,QAAQ,EAAE;QACpC,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,MAAM,EAAE,EAAE,EAAE,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE;oBACvC,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ;oBAClD,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAA;gBACF,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;YAC5C,CAAC,CAAC,CAAA;QACJ,CAAC;KACF,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nifrajs/web-svelte",
-  "version": "1.12.0",
+  "version": "2.0.0",
   "description": "Svelte 5 render adapter for @nifrajs/web — SSR + hydration + the .svelte compiler Bun-plugin.",
   "keywords": [
     "bun",
@@ -68,6 +68,11 @@
       "bun": "./src/mdx.ts",
       "types": "./dist/mdx.d.ts",
       "default": "./dist/mdx.js"
+    },
+    "./svg": {
+      "bun": "./src/svg.ts",
+      "types": "./dist/svg.d.ts",
+      "default": "./dist/svg.js"
     }
   },
   "files": [
@@ -83,9 +88,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@nifrajs/i18n": "1.12.0",
-    "@nifrajs/image": "1.12.0",
-    "@nifrajs/web": "1.12.0"
+    "@nifrajs/i18n": "2.0.0",
+    "@nifrajs/image": "2.0.0",
+    "@nifrajs/web": "2.0.0"
   },
   "peerDependencies": {
     "mdsvex": "^0.12",

package/src/Await.svelte

@@ -11,7 +11,7 @@
 <script>
   let { resolve, children, pending, error } = $props()
   const isDeferred = (v) =>
-    v != null && typeof v === "object" && v.__velo_deferred === true
+    v != null && typeof v === "object" && v.__nifra_deferred === true
 </script>
 
 {#if isDeferred(resolve)}

package/src/Chain.svelte

@@ -15,10 +15,10 @@
     {@const Page = chain[0]}
     <Page {...props} />
   {/if}
-{:else if chain[0] && chain[0].__veloErrorBoundary}
+{:else if chain[0] && chain[0].__nifraErrorBoundary}
   <!-- nifra `_error` boundary marker (from errorBoundary()): wrap the rest in <svelte:boundary>; the
        `failed` snippet renders the route's _error component with the serialized error. -->
-  {@const Fallback = chain[0].__veloErrorBoundary}
+  {@const Fallback = chain[0].__nifraErrorBoundary}
   <svelte:boundary>
     <Self chain={chain.slice(1)} {props} />
     {#snippet failed(error)}

package/src/svg.ts

@@ -0,0 +1,44 @@
+/**
+ * `@nifrajs/web-svelte/svg` - the Svelte 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>`.
+ *
+ * Svelte markup accepts SVG almost verbatim (`class`, hyphenated attributes, an inline `style` string
+ * all work as-is), so - unlike the JSX adapters - no attribute rewriting is needed: the raw SVG is
+ * wrapped in a Svelte 5 component that spreads its props onto the root element, then compiled with the
+ * project's `svelte` compiler. Pass `"dom"` for the client bundle and preload `"ssr"` for the server;
+ * a plain `import "./icon.svg"` (asset URL) is untouched - only `?component` matches.
+ */
+import { SVG_COMPONENT_FILTER } from "@nifrajs/web/plugins/svg"
+import type { BunPlugin } from "bun"
+import { compile } from "svelte/compiler"
+
+/** Wrap raw SVG XML in a Svelte 5 component: strip XML noise, spread props onto the root `<svg>`. */
+export function svgToSvelte(xml: string): string {
+  const cleaned = xml
+    .replace(/<\?xml[\s\S]*?\?>/g, "")
+    .replace(/<!--[\s\S]*?-->/g, "")
+    .replace(/<!DOCTYPE[^>]*>/gi, "")
+    .trim()
+  // `$props()` opts the component into runes (Svelte 5); spread onto the root so user attrs win.
+  const withSpread = cleaned.replace(/^(<svg\b[^>]*?)>/, "$1 {...props}>")
+  return `<script>const props = $props()</script>\n${withSpread}\n`
+}
+
+/** The Svelte SVG-component plugin. `generate` selects Svelte's `"client"`/`"server"` output, matching
+ * `svelteBunPlugin`. */
+export function svelteSvgComponentBunPlugin(generate: "dom" | "ssr"): BunPlugin {
+  return {
+    name: `nifra-svelte-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()
+        const { js } = compile(svgToSvelte(xml), {
+          generate: generate === "ssr" ? "server" : "client",
+          filename: path,
+        })
+        return { contents: js.code, loader: "js" }
+      })
+    },
+  }
+}