@symbiote-native/svelte 0.2.0 → 0.2.1

package/build/preprocessor/collapse-text-whitespace.d.ts

@@ -0,0 +1,10 @@
+interface IMarkupInput {
+    readonly content: string;
+    readonly filename?: string;
+}
+export declare function collapseTextWhitespace(): {
+    markup(input: IMarkupInput): {
+        code: string;
+    };
+};
+export {};

package/build/preprocessor/collapse-text-whitespace.js

@@ -0,0 +1,125 @@
+// svelte-adapter-dom-shim skill §16: Svelte trims only the leading/trailing whitespace of a
+// fragment's own children - never whitespace INSIDE a single Text node, and never a
+// whitespace-only Text node BETWEEN two siblings. Vue's compiler (and every browser) collapses
+// both; Svelte doesn't. Confirmed against the real compiler (2026-08-17): a Text node authored
+// as `Hello world, this is a\n  long sentence.` compiles verbatim into
+// `$.text('Hello world, this is a\n  long sentence.')` - the newline and indent ship into the
+// native text content and render as a forced line break plus stray leading spaces on device.
+// Reproduced live on an iOS simulator before this file existed; fixed with it registered.
+//
+// Two hazards:
+//   1. Wrapped sentence - a Text node with real content plus an embedded whitespace run
+//      (usually a line-wrap for readability). Fixed by collapsing every whitespace run to a
+//      single space, matching HTML/Vue.
+//   2. Stray sibling gap - a Text node that is entirely whitespace. Compiles to a real
+//      `$.text(' ')` -> ShimText -> RCTRawText engine node: invalid outside a Text-accepting
+//      parent, and a stray paint even inside one. Fixed by deleting the node outright, since
+//      collapsing alone leaves it there as a single space.
+//
+// Telling an accidental gap from an intentional inline space (`<Text>{a} {b}</Text>`) needs a
+// signal, since both are whitespace-only nodes: did the original contain a newline? A same-line
+// space is something the author typed on purpose; a run spanning multiple source lines has, in
+// every case this codebase has produced, come from writing each sibling on its own line. So only
+// a whitespace-only node with a newline gets deleted; a same-line run of 2+ spaces collapses to
+// one and stays, matching HTML's own collapse of an intentional double space.
+//
+// Known gap: a whitespace-only run between two siblings on ONE line with no newline
+// (`<View><A/>  <B/></View>`) isn't caught - indistinguishable from the intentional-space case
+// without knowing whether the parent renders raw text. Rare in practice (§16's own audit found
+// only the wrapped-sentence and cross-line-gap shapes) and still caught by
+// `scripts/audit-svelte-stray-whitespace.mjs`, which walks the compiled output independently of
+// this heuristic.
+//
+// Registered in svelte.config.js's `preprocess`, same as forbid-web-only-constructs.ts and
+// scoped-styles.ts, so it covers both svelte-check/the language server and Metro's build.
+//
+// Line numbers are not preserved past an edited node, unlike scoped-styles.ts's blankOut trick:
+// blankOut hides removed characters behind an equal count of `\n` because that code is gone from
+// the output entirely; here the newlines being removed are the bug, so re-inserting them
+// anywhere would bring it back. A diagnostic below an edited node may point a few lines off - no
+// source map, matching the other two preprocessors, and the one place that choice costs
+// something.
+import { parse } from 'svelte/compiler';
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function numberAt(node, key) {
+    const value = node[key];
+    return typeof value === 'number' ? value : undefined;
+}
+function stringAt(node, key) {
+    const value = node[key];
+    return typeof value === 'string' ? value : undefined;
+}
+function fragmentNodes(ast) {
+    if (!isRecord(ast))
+        return [];
+    const fragment = ast.fragment;
+    if (!isRecord(fragment))
+        return [];
+    return Array.isArray(fragment.nodes) ? fragment.nodes : [];
+}
+// Same walk shape as scoped-styles.ts's collectClassEdits: a Text node can sit inside an
+// {#if}/{#each} branch, a snippet body, or an element's children, so this descends through every
+// child value rather than one known key.
+function nestedNodes(node) {
+    const nested = [];
+    for (const value of Object.values(node)) {
+        if (Array.isArray(value))
+            nested.push(...value);
+        else if (isRecord(value))
+            nested.push(value);
+    }
+    return nested;
+}
+const WHITESPACE_RUN = /[ \t\r\n]+/g;
+function collectEdits(nodes, edits) {
+    for (const node of nodes) {
+        if (!isRecord(node))
+            continue;
+        if (node.type === 'Text') {
+            const start = numberAt(node, 'start');
+            const end = numberAt(node, 'end');
+            const data = stringAt(node, 'data');
+            if (start !== undefined && end !== undefined && data !== undefined) {
+                const edit = textEdit(start, end, data);
+                if (edit !== undefined)
+                    edits.push(edit);
+            }
+            continue;
+        }
+        collectEdits(nestedNodes(node), edits);
+    }
+}
+function textEdit(start, end, data) {
+    if (!WHITESPACE_RUN.test(data))
+        return undefined; // fast path: nothing to collapse
+    WHITESPACE_RUN.lastIndex = 0;
+    const collapsed = data.replace(WHITESPACE_RUN, ' ');
+    if (collapsed.trim() === '') {
+        // Whitespace-only node: delete it only if the original spanned a line break, else leave it
+        // as the single collapsed space.
+        return data.includes('\n') ? { start, end, text: '' } : { start, end, text: collapsed };
+    }
+    if (collapsed === data)
+        return undefined;
+    return { start, end, text: collapsed };
+}
+// Applied back-to-front so an earlier edit's offsets stay valid, same as scoped-styles.ts.
+function applyEdits(content, edits) {
+    return [...edits]
+        .sort((left, right) => right.start - left.start)
+        .reduce((source, edit) => source.slice(0, edit.start) + edit.text + source.slice(edit.end), content);
+}
+export function collapseTextWhitespace() {
+    return {
+        markup({ content, filename }) {
+            const ast = parse(content, { filename, modern: true });
+            const edits = [];
+            collectEdits(fragmentNodes(ast), edits);
+            if (edits.length === 0)
+                return { code: content };
+            return { code: applyEdits(content, edits) };
+        },
+    };
+}

package/metro-svelte-transformer.cjs

@@ -68,6 +68,18 @@ function scopedStylesPreprocessor() {
   );
   return scopedStylesPromise;
 }
+
+// Collapses whitespace inside Text node content the same way a browser/Vue's template compiler
+// would (svelte-adapter-dom-shim skill §16/§29) — without it, a sentence an author wrapped across
+// source lines for readability ships a literal newline + indent into the native text content and
+// renders as a forced line break on device. Loaded lazily for the same reason as the two above.
+let collapseTextWhitespacePromise;
+function collapseTextWhitespacePreprocessor() {
+  collapseTextWhitespacePromise ??= import('@symbiote-native/svelte/collapse-text-whitespace').then(
+    mod => mod.collapseTextWhitespace(),
+  );
+  return collapseTextWhitespacePromise;
+}
 //
 // Svelte 5's compiler strips <script lang="ts"> types structurally, with no external type
 // resolution needed (unlike @vue/compiler-sfc's compileScript, which needs registerTS + a real
@@ -116,9 +128,12 @@ module.exports.transform = async function transform(params) {
     // Throws with a message naming the RN alternative. Deliberately BEFORE compile(), so the
     // author sees the real diagnosis rather than a downstream symptom.
     (await webOnlyConstructGuard()).markup({ content: params.src, filename: params.filename });
-    const preprocessed = await (
+    const stylePreprocessed = await (
       await scopedStylesPreprocessor()
     ).markup({ content: params.src, filename: params.filename });
+    const preprocessed = await (
+      await collapseTextWhitespacePreprocessor()
+    ).markup({ content: stylePreprocessed.code, filename: params.filename });
     const code = compileSvelteFile(preprocessed.code, params.filename);
     // Re-label as .tsx so RN's transformer processes the module exactly like app source; Metro
     // tracks the real path separately. Matches metro-vue-transformer.cjs's identical trick.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/svelte",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "SymbioteNative's Svelte adapter — a DOM shim over stock compiled Svelte output driving real native iOS/Android views through the same engine as every other adapter.",
   "license": "MIT",
   "repository": {
@@ -38,6 +38,10 @@
       "types": "./build/preprocessor/scoped-styles.d.ts",
       "default": "./build/preprocessor/scoped-styles.js"
     },
+    "./collapse-text-whitespace": {
+      "types": "./build/preprocessor/collapse-text-whitespace.d.ts",
+      "default": "./build/preprocessor/collapse-text-whitespace.js"
+    },
     "./style-scope": {
       "types": "./build/style-scope.d.ts",
       "default": "./build/style-scope.js"
@@ -71,8 +75,8 @@
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "svelte": "^5.56.0",
-    "@symbiote-native/engine": "0.2.0",
     "@symbiote-native/react": "0.3.0",
+    "@symbiote-native/engine": "0.2.0",
     "@symbiote-native/test-utils": "0.1.6",
     "@symbiote-native/vue": "0.4.0"
   },