@primate/vue 0.7.0 → 0.8.0

package/README.md

@@ -1,6 +1,5 @@
 # Vue
 
-This handler module supports SSR and serves Vue SFC components with the .vue
-extension.
+This handler serves Vue (SFC) components with the `vue` file extension.
 
 ## [Documentation](https://primatejs.com/modules/vue)

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@primate/vue",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Primate Vue module",
   "homepage": "https://primatejs.com/modules/vue",
   "bugs": "https://github.com/primatejs/primate/issues",
   "license": "MIT",
   "files": [
     "src/**/*.js",
+    "src/errors.json",
     "!src/**/*.spec.js"
   ],
   "repository": {
@@ -15,11 +16,12 @@
     "directory": "packages/vue"
   },
   "dependencies": {
-    "runtime-compat": "^0.24.1",
+    "@primate/frontend": "^0.2.0",
+    "runtime-compat": "^0.25.7",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "primate": "0.21"
+    "primate": "0.22"
   },
   "type": "module",
   "main": "./src/exports.js"

package/src/errors.js

@@ -0,0 +1,6 @@
+import {Path} from "runtime-compat/fs";
+import {Logger} from "primate";
+
+const json = await new Path(import.meta.url).up(1).join("errors.json").json();
+
+export default Logger.err(json.errors, json.module);

package/src/errors.json

@@ -0,0 +1,10 @@
+{
+  "module": "primate/vue",
+  "errors": {
+    "MissingComponent": {
+      "message": "missing component {0}",
+      "fix": "create {1} or remove route function",
+      "level": "Error"
+    }
+  }
+}

package/src/module.js

@@ -1,43 +1,56 @@
 import {Response, Status, MediaType} from "runtime-compat/http";
+import * as base from "@primate/frontend";
 import {createSSRApp} from "vue";
 import {renderToString} from "vue/server-renderer";
-import {parse} from "vue/compiler-sfc";
+import {parse, compileTemplate} from "vue/compiler-sfc";
 
-const render = (template, props) => {
-  const app = createSSRApp({data: () => props, template});
-  return renderToString(app);
-};
+const handler = config => (name, props = {}, {status = Status.OK, page} = {}) =>
+  async app => {
+    const {make} = config;
 
-const handler = (name, props = {}, {status = Status.OK} = {}) => async app => {
-  const {build, config} = app;
-  const target = build.paths.server.join(config.build.app).join(`${name}.js`);
-  const body = await render(await target.text(), props);
+    const imported = await make(name, props);
+    const component = createSSRApp({
+      render: imported.component.render,
+      data: () => props,
+    });
+    const body = await renderToString(component);
 
-  return new Response(await app.render({body}), {
-    status,
-    headers: {...app.headers(), "Content-Type": MediaType.TEXT_HTML},
-  });
-};
+    return new Response(await app.render({body, page}), {
+      status,
+      headers: {...app.headers(), "Content-Type": MediaType.TEXT_HTML},
+    });
+  };
+
+export default ({
+  directory,
+  dynamicProps,
+  extension = "vue",
+} = {}) => {
+  const rootname = "vue";
 
-export default _ => ({
-  name: "@primate/vue",
-  register(app, next) {
-    app.register("vue", handler);
-    return next(app);
-  },
-  async compile(app, next) {
-    const source = app.build.paths.components;
-    const target = app.build.paths.server.join(app.config.build.app);
-    await target.file.create();
-    const vue = ".vue";
-    const components = await source.list(filename => filename.endsWith(vue));
-    await Promise.all(components.map(async component => {
-      const file = await component.file.read();
-      const {descriptor} = parse(file);
-      const to = target.join(`${component.path}.js`.replace(source, ""));
-      await to.file.write(descriptor.template.content);
-    }));
+  return {
+    name: "primate:vue",
+    register(app, next) {
+      app.register(extension, handler(base.register({app, rootname})));
 
-    return next(app);
-  },
-});
+      return next(app);
+    },
+    async compile(app, next) {
+      await base.compile({
+        app,
+        directory: directory ?? app.config.location.components,
+        extension,
+        rootname,
+        dynamicProps,
+        compile(file) {
+          return compileTemplate({
+            source: parse(file).descriptor.template.content,
+            id: "1",
+          }).code;
+        },
+      });
+
+      return next(app);
+    },
+  };
+};