@primate/svelte 0.5.1 → 0.6.0

package/README.md

@@ -15,3 +15,13 @@ export default {
   modules: [svelte()],
 };
 ```
+
+If you use a bundler, specify an array of entry points:
+
+```js
+import svelte from "@primate/svelte";
+
+export default {
+  modules: [svelte({entryPoints: ["EntryPage.svelte"]})],
+};
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primate/svelte",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "bugs": "https://github.com/primatejs/svelte/issues",
   "repository": "https://github.com/primatejs/svelte",
   "description": "Primate Svelte module",

package/src/module.js

@@ -15,7 +15,7 @@ const handler = path => (component, props = {}, {status = 200} = {}) =>
 
     const name = component.slice(0, -endings.svelte.length);
     // create an entry point
-    const entry = `import {${name} as Component} from "./dist.js";
+    const entry = `import {${name} as Component} from "./${env.dist}.js";
       const props = JSON.parse(${JSON.stringify(JSON.stringify(props))});
       new Component({
         target: document.body,
@@ -37,7 +37,7 @@ const handler = path => (component, props = {}, {status = 200} = {}) =>
   };
 
 const {svelte, js} = endings;
-export default ({directory, entryPoints}) => ({
+export default ({directory, entryPoints} = {}) => ({
   register(env, next) {
     env.register("svelte", handler(directory ?? env.paths.components));
     return next(env);
@@ -60,30 +60,35 @@ export default ({directory, entryPoints}) => ({
     const options = {
       generate: "dom",
       hydratable: true,
-      css: false,
       sveltePath: "./svelte",
     };
     const components = await path.list(filename => filename.endsWith(svelte));
     const scriptPath = ["node_modules", "svelte", "internal", "index.mjs"];
-    // publish svelte itself
-    const code = await Path.resolve().join(...scriptPath).file.read();
-    await env.publish({src: "svelte/internal.js", code, type});
+    {
+      // publish svelte itself
+      const code = await Path.resolve().join(...scriptPath).file.read();
+      await env.publish({src: "svelte/internal.js", code, type});
+    }
     await Promise.all(components.map(async component => {
       const file = await component.file.read();
       const client = compiler.compile(file, options);
+      const css = client.css.code;
       const compiled = client.js.code
         .replaceAll(svelte, js)
         .replace("./svelte/internal", "./svelte/internal.js");
       await env.publish({src: `${component.name}.js`, code: compiled, type});
+      if (css !== null) {
+        const name = `${component.name}.css`;
+        await env.publish({src: name, code: css, type: "style"});
+        env.bootstrap({type: "style", code: `import "./${name}";`});
+      }
     }));
-    // create a pseudo entry to allow bundlers to bundle relevant code until
-    // proper path-splitting has been implemented
     if (entryPoints !== undefined) {
-      const code = entryPoints.map(entry => {
+      entryPoints.forEach(entry => {
         const name = entry.slice(0, -endings.svelte.length);
-        return `export {default as ${name}} from "./${entry}.js";`
-      }).join("");
-      await env.publish({src: "dist.js", code, type, main: true});
+        const code = `export {default as ${name}} from "./${entry}.js";`;
+        env.bootstrap({type: "script", code});
+      });
     }
     return next(env);
   },