Rollback styleEntrypoint option

.changeset/smart-pugs-call.md

@@ -0,0 +1,5 @@
+---
+'@chialab/plasma': minor
+---
+
+Rollback `styleEntrypoint` option: importing the css module in the svelte file can cause problems with vite preprocessor. The css module should be imported manually.

docs/guide/options.md

@@ -12,13 +12,6 @@ The custom elements manifest path to use to generate the wrappers. If not specif
 The original module entrypoint to use to import component implementation and types.  
 If the entrypoint is the main module of the package, it matches the name of NPM module.
 
-## Style entrypoint
-
--   `--style`
--   Type: `string`
-
-The original module entrypoint to use to import component styles.
-
 ## Outdir
 
 -   `--outdir`, `-o`

src/cli.ts

@@ -40,7 +40,6 @@ program
 
     .argument('[input]', 'custom elements manifest path')
     .option('-e, --entrypoint <path>', 'module entrypoint')
-    .option('--style <path>', 'style module entrypoint')
     .option('-o, --outdir <outdir>', 'output directory')
     .option('-f, --frameworks <frameworks...>', 'the framework to convert to')
     .option('-y, --yes', 'convert all candidates to all available frameworks')
@@ -50,7 +49,6 @@ program
             sourceDir,
             options: {
                 entrypoint?: string;
-                style?: string;
                 outdir?: string;
                 frameworks?: Frameworks[];
                 yes?: boolean;
@@ -160,7 +158,6 @@ program
                                     );
                                     const outFile = await transform(entry, framework, {
                                         entrypoint: entrypoint as string,
-                                        styleEntrypoint: options.style,
                                         outdir: outDir,
                                     });
                                     task.title = `Converted ${chalk.whiteBright(component)} to ${colorFramework(

src/svelte.ts

@@ -13,11 +13,6 @@ export interface SvelteTransformOptions {
      * The output directory to write the converted components to.
      */
     outdir: string;
-
-    /**
-     * The style entrypoint.
-     */
-    styleEntrypoint?: string;
 }
 
 function getAttributes(tagName: string) {
@@ -203,12 +198,7 @@ export function generateSvelteComponent(entry: Entry, options: SvelteTransformOp
 >${slots.join('')}</${definition.extend ?? definition.name}>`;
 
     return `<script>
-    import '${options.entrypoint}';${
-        options.styleEntrypoint
-            ? `
-    import '${options.styleEntrypoint}';`
-            : ''
-    }
+    import '${options.entrypoint}';
 
     function __sync(node, props) {
         const state = {};
@@ -232,9 +222,13 @@ export function generateSvelteComponent(entry: Entry, options: SvelteTransformOp
     let __element;
     export function getElement() {
         return __element;
-    }
+    }${
+        props.length
+            ? `
 
-    ${props.map((propName) => `export let ${propName} = undefined;`).join('\n    ')}
+    ${props.map((propName) => `export let ${propName} = undefined;`).join('\n    ')}`
+            : ''
+    }
 </script>
 
 ${markup}`;

test/src/svelte/TestElement.svelte

@@ -4,9 +4,12 @@
     function __sync(node, props) {
         const state = {};
         const assign = (node, props) => {
-            for (const key in props)
-                if (props[key] !== undefined || state[key] !== undefined)
-                    node[key] = state[key] = props[key];
+            node.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);

test/src/svelte/TestLink.svelte

@@ -4,9 +4,12 @@
     function __sync(node, props) {
         const state = {};
         const assign = (node, props) => {
-            for (const key in props)
-                if (props[key] !== undefined || state[key] !== undefined)
-                    node[key] = state[key] = props[key];
+            node.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);