release: WRNexusJS 0.2.32

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/compiler/src/codegen.ts

@@ -925,7 +925,9 @@ function behaviorAttribute(behavior: ComponentBehavior | null): string {
     return "";
   }
 
-  return ` data-wrn-behavior="${attrEscape(JSON.stringify(behavior))}"`;
+  const encoded = encodeURIComponent(JSON.stringify(behavior));
+
+  return ` data-wrn-behavior="${encoded}"`;
 }
 
 const INTERP_RE = /\{([^{}]+)\}/g;

packages/compiler/test/compiler.test.ts

@@ -382,11 +382,11 @@ component LifecycleTest {
 `),
   );
 
-  expect(output).toContain(""mount"");
+  expect(output).toContain("%22mount%22");
 
-  expect(output).toContain(""update"");
+  expect(output).toContain("%22update%22");
 
-  expect(output).toContain(""unmount"");
+  expect(output).toContain("%22unmount%22");
 });
 test("component watchers compile into behavior metadata", () => {
   const output = generate(
@@ -405,7 +405,7 @@ component WatchTest {
 `),
   );
 
-  expect(output).toContain(""state":"visible"");
+  expect(output).toContain("%22state%22%3A%22visible%22");
 
   expect(output).toContain("console.log");
 });
@@ -436,3 +436,121 @@ component BehaviorOnly {
 
   expect(output).toContain("data-wrn-behavior");
 });
+test("component behavior metadata safely encodes multiline code", () => {
+  const output = generate(
+    parse(`
+component BackToTop {
+  state visible = false
+
+  functions {
+    function updateVisibility() {
+      visible = window.scrollY > 500
+    }
+
+    function scrollToTop() {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      })
+    }
+  }
+
+  lifecycle {
+    mount {
+      updateVisibility()
+    }
+  }
+
+  watch visible {
+    console.log(
+      value,
+      previous
+    )
+  }
+
+  view {
+    <button @click="scrollToTop()">
+      Top
+    </button>
+  }
+}
+`),
+  );
+
+  expect(output).toContain("data-wrn-behavior=");
+
+  expect(output).toContain("%7B");
+  expect(output).toContain("%22functions%22");
+
+  expect(output).not.toContain('data-wrn-behavior="{');
+});
+
+test("component watchers compile into behavior metadata", () => {
+  const output = generate(
+    parse(`
+component WatchTest {
+  state visible = false
+
+  watch visible {
+    console.log("changed", visible)
+  }
+
+  view {
+    <div>{visible}</div>
+  }
+}
+`),
+  );
+
+  const match = /data-wrn-behavior="([^"]+)"/.exec(output);
+
+  expect(match).not.toBeNull();
+
+  const behavior = JSON.parse(decodeURIComponent(match![1]));
+
+  expect(behavior.watches).toEqual([
+    {
+      state: "visible",
+      body: expect.stringContaining('console.log("changed", visible)'),
+    },
+  ]);
+});
+test("component lifecycle hooks compile into behavior metadata", () => {
+  const output = generate(
+    parse(`
+component LifecycleTest {
+  state ready = false
+
+  lifecycle {
+    mount {
+      ready = true
+    }
+
+    update {
+      console.log(ready)
+    }
+
+    unmount {
+      ready = false
+    }
+  }
+
+  view {
+    <div>{ready}</div>
+  }
+}
+`),
+  );
+
+  const match = /data-wrn-behavior="([^"]+)"/.exec(output);
+
+  expect(match).not.toBeNull();
+
+  const behavior = JSON.parse(decodeURIComponent(match![1]));
+
+  expect(behavior.lifecycle.mount).toContain("ready = true");
+
+  expect(behavior.lifecycle.update).toContain("console.log(ready)");
+
+  expect(behavior.lifecycle.unmount).toContain("ready = false");
+});