@primate/vue 0.4.0 → 0.6.0

package/README.md

@@ -1,47 +1,6 @@
-# Primate Vue module
+# Vue
 
-## Install
+This handler module supports SSR and serves Vue SFC components with the .vue
+extension.
 
-`npm i @primate/vue`
-
-## Configure
-
-Add to `primate.config.js`
-
-```js
-import vue from "@primate/vue";
-
-export default {
-  modules: [vue()],
-};
-```
-
-## Use
-
-Create a [SFC][sfc] component in `components`, e.g. `PostIndex.vue`.
-
-```vue
-<template>
-  <h1>All posts</h1>
-  <div v-for="post in posts">
-    <h2><a :href="`/vue/post/view/${post.id}`">{{post.title}}</a></h2>
-  </div>
-</template>
-```
-
-Create a route, for example in `routes/vue.js` (mapping `/vue`).
-
-```js
-import {view} from "primate";
-
-const posts = [{
-  id: 1,
-  title: "First post",
-}];
-
-export default {
-  get() {
-    return view("PostIndex.vue", {posts});
-  },
-};
-```
+## [Documentation](https://primatejs.com/modules/vue)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@primate/vue",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Primate Vue module",
   "homepage": "https://primatejs.com/modules/vue",
   "bugs": "https://github.com/primatejs/primate/issues",
   "license": "MIT",
   "files": [
-    "src/**",
+    "src/**/*.js",
     "!src/**/*.spec.js"
   ],
   "repository": {
@@ -15,11 +15,11 @@
     "directory": "packages/vue"
   },
   "dependencies": {
-    "runtime-compat": "^0.17.0",
-    "vue": "^3.3.1"
+    "runtime-compat": "^0.20.2",
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "primate": "0.18"
+    "primate": "0.20"
   },
   "type": "module",
   "main": "./src/exports.js"

package/src/module.js

@@ -1,24 +1,23 @@
 import {createSSRApp} from "vue";
 import {renderToString} from "vue/server-renderer";
 import {parse} from "vue/compiler-sfc";
-import {File} from "runtime-compat/fs";
 
 const render = (template, props) => {
   const app = createSSRApp({data: () => props, template});
   return renderToString(app);
 };
 
-const handler = path => (component, props = {}, {status = 200} = {}) =>
-  async (app, headers) => {
-    const body = await render(
-      await File.read(`${path.join(`${component}.js`)}`), props);
+const handler = _ => (name, props = {}, {status = 200} = {}) => async app => {
+  const {paths, config} = app;
+  const target = paths.server.join(config.build.app).join(`${name}.js`);
+  const body = await render(await target.text(), props);
 
-    // -> spread into new Response()
-    return [await app.render({body}), {
-      status,
-      headers: {...headers, "Content-Type": "text/html"},
-    }];
-  };
+  // -> spread into new Response()
+  return [await app.render({body}), {
+    status,
+    headers: {...app.headers(), "Content-Type": "text/html"},
+  }];
+};
 
 export default ({directory} = {}) => ({
   name: "@primate/vue",
@@ -27,13 +26,16 @@ export default ({directory} = {}) => ({
     return next(app);
   },
   async compile(app, next) {
+    const source = directory ?? app.paths.components;
+    const target = app.paths.server.join(app.config.build.app);
+    await target.file.create();
     const vue = ".vue";
-    const path = directory ?? app.paths.components;
-    const components = await path.list(filename => filename.endsWith(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);
-      await File.write(`${component.path}.js`, descriptor.template.content);
+      const to = target.join(`${component.path}.js`.replace(source, ""));
+      await to.file.write(descriptor.template.content);
     }));
 
     return next(app);