fimo-sveltekit 2.4.1 → 2.5.0-staging.2

package/components/Boolean.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 
   import type { FimoBoolean } from 'fimo-sveltekit';
@@ -15,5 +16,5 @@
 </script>
 
 {#if value != null}
-  <svelte:element this={as} {...props} data-fimo-source={source}>{String(value.valueOf())}</svelte:element>
+  <svelte:element this={as} {...withoutFimoEditingMetadata(props)} data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}>{String(value.valueOf())}</svelte:element>
 {/if}

package/components/Date.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLTimeAttributes } from 'svelte/elements';
 
   import type { FimoString } from 'fimo-sveltekit';
@@ -29,5 +30,5 @@
 </script>
 
 {#if rendered}
-  <time {...props} datetime={rendered.datetime} data-fimo-source={source}>{rendered.text}</time>
+  <time {...withoutFimoEditingMetadata(props)} datetime={rendered.datetime} data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}>{rendered.text}</time>
 {/if}

package/components/DateTime.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLTimeAttributes } from 'svelte/elements';
 
   import type { FimoString } from 'fimo-sveltekit';
@@ -31,5 +32,5 @@
 </script>
 
 {#if rendered}
-  <time {...props} datetime={rendered.datetime} data-fimo-source={source}>{rendered.text}</time>
+  <time {...withoutFimoEditingMetadata(props)} datetime={rendered.datetime} data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}>{rendered.text}</time>
 {/if}

package/components/Image.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLImgAttributes } from 'svelte/elements';
 
   import type { FimoMedia } from 'fimo-sveltekit';
@@ -67,7 +68,7 @@
 
 {#if image}
   <img
-    {...props}
+    {...withoutFimoEditingMetadata(props)}
     src={image.src}
     alt={image.alt}
     width={image.width}
@@ -75,6 +76,6 @@
     sizes={image.sizes}
     srcset={image.srcSet}
     style={imageStyle}
-    data-fimo-source={source}
+    data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}
   />
 {/if}

package/components/Json.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 
   import { getFimoSource } from 'fimo-sveltekit';
@@ -14,5 +15,5 @@
 </script>
 
 {#if value != null}
-  <svelte:element this={as} {...props} data-fimo-source={source}>{JSON.stringify(value)}</svelte:element>
+  <svelte:element this={as} {...withoutFimoEditingMetadata(props)} data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}>{JSON.stringify(value)}</svelte:element>
 {/if}

package/components/Number.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 
   // Content numbers stay plain JS numbers (there is no FimoNumber wrapper), so
@@ -17,5 +18,5 @@
 </script>
 
 {#if rendered != null}
-  <svelte:element this={as} {...props}>{rendered}</svelte:element>
+  <svelte:element this={as} {...withoutFimoEditingMetadata(props)}>{rendered}</svelte:element>
 {/if}

package/components/RichText.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLAttributes } from 'svelte/elements';
 
   import type { FimoRichText } from 'fimo-sveltekit';
@@ -15,5 +16,5 @@
 </script>
 
 {#if value}
-  <div {...props} data-fimo-source={source} data-fimo-richtext="">{@html html}</div>
+  <div {...withoutFimoEditingMetadata(props)} data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined} data-fimo-richtext={isFimoEditingMetadataEnabled() ? "" : undefined}>{@html html}</div>
 {/if}

package/components/Text.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 
   import type { FimoString } from 'fimo-sveltekit';
@@ -15,11 +16,11 @@
   const source = $derived(getFimoSource(value));
 </script>
 
-<svelte:element this={as} {...props} data-fimo-source={source}>
+<svelte:element this={as} {...withoutFimoEditingMetadata(props)} data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}>
   {#if parts && parts.length > 1}
     {#each parts as part}
       {#if part.source}
-        <span data-fimo-source={part.source}>{part.text}</span>
+        <span data-fimo-source={isFimoEditingMetadataEnabled() ? part.source : undefined}>{part.text}</span>
       {:else}
         {part.text}
       {/if}

package/components/Video.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { isFimoEditingMetadataEnabled, withoutFimoEditingMetadata } from 'fimo/preview';
   import type { HTMLVideoAttributes } from 'svelte/elements';
 
   import type { FimoMedia } from 'fimo-sveltekit';
@@ -24,7 +25,7 @@
 {#if value}
   <!-- svelte-ignore a11y_media_has_caption -->
   <video
-    {...props}
+    {...withoutFimoEditingMetadata(props)}
     src={overrideSrc ?? value.url}
     width={value.width}
     height={value.height}
@@ -32,6 +33,6 @@
     {loop}
     {muted}
     {playsinline}
-    data-fimo-source={source}
+    data-fimo-source={isFimoEditingMetadataEnabled() ? source : undefined}
   ></video>
 {/if}

package/dist/data-id.js

@@ -1,6 +1,7 @@
 import { createRequire } from 'node:module';
 import { join } from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { FIMO_EDITING_ATTRIBUTES, resolveFimoEditingMetadata } from 'fimo/preview';
 import { getLineColumn } from 'fimo/vite/data-id';
 // Native DOM elements are always taggable. Fimo's editable primitives are the
 // only component exception: they forward arbitrary element attributes to the
@@ -44,7 +45,11 @@ export default function svelteDataIdPlugin() {
             config = resolvedConfig;
         },
         async transform(code, id) {
-            if (config.command === 'build') {
+            const configured = config.define?.['process.env.FIMO_EDITING_METADATA'];
+            const editing = configured === undefined
+                ? resolveFimoEditingMetadata(config.command === 'serve' && !config.isProduction ? 'development' : undefined, process.env.FIMO_EDITING_METADATA)
+                : configured === JSON.stringify('true');
+            if (!editing && !code.includes('data-fimo-')) {
                 return null;
             }
             // Query'd sub-requests (`+page.svelte?svelte&type=style…`) carry
@@ -71,31 +76,42 @@ export default function svelteDataIdPlugin() {
             const relativePath = id.startsWith(`${config.root}/`) ? id.slice(config.root.length + 1) : id;
             const insertions = [];
             const primitiveComponents = collectFimoPrimitiveComponents(parsed.instance, parsed.module);
-            collectInsertions(parsed.fragment, code, relativePath, primitiveComponents, insertions);
+            collectInsertions(parsed.fragment, code, relativePath, primitiveComponents, insertions, editing);
             if (insertions.length === 0) {
                 return null;
             }
             insertions.sort((a, b) => b.offset - a.offset);
             let transformed = code;
             for (const insertion of insertions) {
-                transformed = transformed.slice(0, insertion.offset) + insertion.value + transformed.slice(insertion.offset);
+                transformed =
+                    transformed.slice(0, insertion.offset) +
+                        insertion.value +
+                        transformed.slice(insertion.end ?? insertion.offset);
             }
             return { code: transformed, map: null };
         },
     };
 }
-function collectInsertions(node, code, relativePath, primitiveComponents, insertions) {
+function collectInsertions(node, code, relativePath, primitiveComponents, insertions, editing) {
     if (!node || typeof node !== 'object') {
         return;
     }
     if (Array.isArray(node)) {
         for (const item of node) {
-            collectInsertions(item, code, relativePath, primitiveComponents, insertions);
+            collectInsertions(item, code, relativePath, primitiveComponents, insertions, editing);
         }
         return;
     }
     const element = node;
-    if (typeof element.type === 'string' &&
+    if (!editing && Array.isArray(element.attributes)) {
+        for (const attr of element.attributes) {
+            if (attr.type === 'Attribute' && FIMO_EDITING_ATTRIBUTES.has(attr.name)) {
+                insertions.push({ offset: attr.start, end: attr.end, value: '' });
+            }
+        }
+    }
+    if (editing &&
+        typeof element.type === 'string' &&
         (TAGGABLE_ELEMENT_TYPES.has(element.type) ||
             (element.type === 'Component' && typeof element.name === 'string' && primitiveComponents.has(element.name))) &&
         typeof element.start === 'number' &&
@@ -115,7 +131,7 @@ function collectInsertions(node, code, relativePath, primitiveComponents, insert
         if (key === 'parent' || key === 'metadata') {
             continue;
         }
-        collectInsertions(child, code, relativePath, primitiveComponents, insertions);
+        collectInsertions(child, code, relativePath, primitiveComponents, insertions, editing);
     }
 }
 function collectFimoPrimitiveComponents(...instances) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fimo-sveltekit",
-  "version": "2.4.1",
+  "version": "2.5.0-staging.2",
   "description": "Fimo runtime and hosting adapter for SvelteKit projects. Pairs with the fimo package at the same version.",
   "files": [
     "dist/",
@@ -48,16 +48,16 @@
     "@sveltejs/adapter-vercel": "6.3.4"
   },
   "devDependencies": {
-    "@fimo/tsconfig": "2.4.1",
+    "@fimo/tsconfig": "2.5.0-staging.2",
     "@types/node": "22.18.6",
-    "fimo": "2.4.1",
+    "fimo": "2.5.0-staging.2",
     "typescript": "7.0.2",
     "vite": "8.2.2",
     "vitest": "5.0.0"
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
-    "fimo": ">=2.0.1",
+    "fimo": "2.5.0-staging.2",
     "svelte": "^5.0.0",
     "vite": "^7.0.0 || ^8.0.0"
   },