Support custom elements without assign function

chialab · Sep 20, 2024 · e02cc49 · e02cc49
1 parent 640beef
commit e02cc49
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/.changeset/few-lobsters-pull.md b/.changeset/few-lobsters-pull.md
@@ -0,0 +1,5 @@
+---
+'@chialab/plasma': patch
+---
+
+Support custom elements without assign function.
diff --git a/src/svelte.ts b/src/svelte.ts
@@ -202,19 +202,22 @@ export function generateSvelteComponent(entry: Entry, options: SvelteTransformOp
 
     function __sync(node, props) {
         const state = {};
-        const assign = (node, props) => {
-            node.assign(Object.entries(props).reduce((acc, [key, value]) => {
+        const assign = typeof node.assign === 'function' ?
+            node.assign.bind(node) :
+            (props) => Object.assign(node, props);
+        const sync = (node, props) => {
+            assign(Object.entries(props).reduce((acc, [key, value]) => {
                 if (props[key] !== undefined || state[key] !== undefined) {
                     acc[key] = state[key] = props[key];
                 }
                 return acc;
             }, {}));
         };
 
-        assign(node, props);
+        sync(node, props);
         return {
             update(newProps) {
-                assign(node, newProps);
+                sync(node, newProps);
             },
         };
     }

diff --git a/test/src/svelte/TestElement.svelte b/test/src/svelte/TestElement.svelte
@@ -3,19 +3,22 @@
 
     function __sync(node, props) {
         const state = {};
-        const assign = (node, props) => {
-            node.assign(Object.entries(props).reduce((acc, [key, value]) => {
+        const assign = typeof node.assign === 'function' ?
+            node.assign.bind(node) :
+            (props) => Object.assign(node, props);
+        const sync = (node, props) => {
+            assign(Object.entries(props).reduce((acc, [key, value]) => {
                 if (props[key] !== undefined || state[key] !== undefined) {
                     acc[key] = state[key] = props[key];
                 }
                 return acc;
             }, {}));
         };
 
-        assign(node, props);
+        sync(node, props);
         return {
             update(newProps) {
-                assign(node, newProps);
+                sync(node, newProps);
             },
         };
     }

diff --git a/test/src/svelte/TestLink.svelte b/test/src/svelte/TestLink.svelte
@@ -3,19 +3,22 @@
 
     function __sync(node, props) {
         const state = {};
-        const assign = (node, props) => {
-            node.assign(Object.entries(props).reduce((acc, [key, value]) => {
+        const assign = typeof node.assign === 'function' ?
+            node.assign.bind(node) :
+            (props) => Object.assign(node, props);
+        const sync = (node, props) => {
+            assign(Object.entries(props).reduce((acc, [key, value]) => {
                 if (props[key] !== undefined || state[key] !== undefined) {
                     acc[key] = state[key] = props[key];
                 }
                 return acc;
             }, {}));
         };
 
-        assign(node, props);
+        sync(node, props);
         return {
             update(newProps) {
-                assign(node, newProps);
+                sync(node, newProps);
             },
         };
     }