Add interpolation spacing test.

src/reactivity/cref.ts

@@ -1,4 +1,11 @@
-import { IsNull, Ref, RefContent, RefParam, SRef, UnwrapRef } from '../api/types'
+import {
+  IsNull,
+  Ref,
+  RefContent,
+  RefParam,
+  SRef,
+  UnwrapRef,
+} from '../api/types'
 import { flatten } from '../misc/flatten'
 import { ref } from './ref'
 

src/reactivity/ref.ts

@@ -14,9 +14,9 @@ import { refSymbol } from './refSymbols'
 import { sref } from './sref'
 
 /**
- * The ref function mutates given value in place. Use it with caution. 
+ * The ref function mutates given value in place. Use it with caution.
  * If you need to create ref without mutating use cref (which is slower).
- * 
+ *
  * Converts the given value and its nested properties into ref objects recursively and returns the ref.
  * The returned object's type reflects its nested properties as well.
  *

tests/app/createApp.spec.ts

@@ -74,6 +74,41 @@ test('interpolation supports both syntaxes at once', () => {
   expect(root.textContent).toBe('hello world')
 })
 
+test('interpolation preserves authored text spacing', () => {
+  const root = document.createElement('div')
+  const first = ref('Ada')
+  const last = ref('Lovelace')
+  createApp(
+    {
+      first,
+      last,
+    },
+    {
+      element: root,
+      template: html`<section>
+        <p id="joined">{{ first }}{{ last }}</p>
+        <p id="spaced">{{ first }} {{ last }}</p>
+        <p id="mixed">Hello {{ first }}!</p>
+        <p id="whole">{{ first }}</p>
+      </section>`,
+    },
+  )
+
+  expect(root.querySelector('#joined')?.textContent).toBe('AdaLovelace')
+  expect(root.querySelector('#spaced')?.textContent).toBe('Ada Lovelace')
+  expect(root.querySelector('#mixed')?.textContent).toBe('Hello Ada!')
+  expect(root.querySelector('#whole')?.textContent).toBe('Ada')
+  expect(root.querySelector('p > span')).toBeNull()
+
+  first('Grace')
+  last('Hopper')
+  expect(root.querySelector('#joined')?.textContent).toBe('GraceHopper')
+  expect(root.querySelector('#spaced')?.textContent).toBe('Grace Hopper')
+  expect(root.querySelector('#mixed')?.textContent).toBe('Hello Grace!')
+  expect(root.querySelector('#whole')?.textContent).toBe('Grace')
+  expect(root.querySelector('p > span')).toBeNull()
+})
+
 test('interpolation removes only generated spans and keeps cleanup anchored', () => {
   const root = document.createElement('div')
   const message = ref('hello')

tests/directives/r-for.spec.ts

@@ -32,13 +32,14 @@ test('should mount the people into reactive divs.', () => {
     expect(rows.map((x) => x.className)).toStrictEqual(
       people.map((x) => x().name()),
     )
-    expect(rows.map((x) => x.textContent?.replace(/\s+/g, ' ').trim()))
-      .toStrictEqual(
-        people.map((x, i) => {
-          const person = x()
-          return `${i} - name: ${person.name()} age: ${person.age()}`
-        }),
-      )
+    expect(
+      rows.map((x) => x.textContent?.replace(/\s+/g, ' ').trim()),
+    ).toStrictEqual(
+      people.map((x, i) => {
+        const person = x()
+        return `${i} - name: ${person.name()} age: ${person.age()}`
+      }),
+    )
   }
   testContent()
   people[0]().name.value = 'Ali'
@@ -128,8 +129,9 @@ test('should mount nested r-for.', () => {
       ),
     )
 
-    expect(rows.map((x) => x.textContent?.replace(/\s+/g, ' ').trim()))
-      .toStrictEqual(
+    expect(
+      rows.map((x) => x.textContent?.replace(/\s+/g, ' ').trim()),
+    ).toStrictEqual(
       duplicateArray(
         duplicate(),
         people.map((x, i) => {