wip(framework/vue): it can work.

linbingquan · linbingquan · commit e8007a53247e · 2022-05-04T07:55:50.000+08:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -19,6 +19,8 @@ You will need [Deno](https://deno.land/) 1.20+.
 6. Make a [pull request](https://github.com/alephjs/aleph.js/pulls).
 7. Merge to master branch by our maintainers.
 
+### react-app
+
 ```bash
 # run the example app in development mode
 deno task dev examples/react-app
@@ -30,6 +32,19 @@ deno task start examples/react-app
 deno task build examples/react-app
 ```
 
+### vue-app
+
+```bash
+# run the example app in development mode
+deno task dev examples/vue-app
+
+# run the example app in production mode
+deno task start examples/vue-app
+
+# build the example app into a worker for serverless platform
+deno task build examples/vue-app
+```
+
 ## Testing
 
 You can run all tests with the following command:
diff --git a/examples/vue-app/app.vue b/examples/vue-app/app.vue
@@ -2,12 +2,17 @@
 import { ref } from "vue"
 
 const msg = ref("Hello world!")
+
+function click() {
+  location.pathname = '/hello'
+}
 </script>
 
 <template>
   <h1 v-if="msg">{{ msg }}</h1>
   <h1 v-if="!msg" style="color: #ccc;">Please type something</h1>
   <input v-model="msg" placeholder="Please type something">
+  <button @click="click">hello page</button>
 </template>
 
 <style scoped>
diff --git a/examples/vue-app/hello.vue b/examples/vue-app/hello.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { ref } from "vue"
+
+const msg = ref("hello page")
+
+function click() {
+    location.pathname = ''
+}
+</script>
+
+<template>
+    <div>{{ msg }}</div>
+    <button @click="click">home page</button>
+</template>
diff --git a/examples/vue-app/index.html b/examples/vue-app/index.html
@@ -5,17 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="./assets/logo.svg">
-  <style>
-    body {
-      margin: 0;
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    }
-  </style>
+  <link rel="stylesheet" href="./style/app.css">
 </head>
 
 <body>
diff --git a/examples/vue-app/main.js b/examples/vue-app/main.js
@@ -1,4 +1,25 @@
 import { createApp } from "vue";
-import app from "./app.vue";
+import { createRouter, createWebHistory } from "vue-router";
+import App from "./app.vue";
+import Hello from "./hello.vue";
+import { routes } from "./routes.js";
 
-createApp(app).mount("#root", true);
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+const pathname = location.pathname;
+const app = createApp(
+  {
+    "/": App,
+    "/hello": Hello,
+  }[pathname],
+);
+
+app.use(router);
+await router.push({ path: pathname });
+
+router.isReady().then(() => {
+  app.mount("#root", true);
+});
diff --git a/examples/vue-app/routes.js b/examples/vue-app/routes.js
@@ -0,0 +1,12 @@
+import app from "./app.vue";
+import hello from "./hello.vue";
+
+const routes = [
+  {
+    path: "/",
+    component: app,
+  },
+  { path: "/hello", component: hello },
+];
+
+export { routes };
diff --git a/examples/vue-app/server.js b/examples/vue-app/server.js
@@ -1,8 +1,38 @@
-import { serve } from "aleph/server";
 import { createSSRApp } from "vue";
+import { createMemoryHistory, createRouter } from "vue-router";
+import { serve } from "aleph/server";
 import { renderToString } from "vue/server-renderer";
-import app from "./app.vue";
+import App from "./app.vue";
+import Hello from "./hello.vue";
+import { routes } from "./routes.js";
+
+const createSSRApp_ = async (ctx) => {
+  const pathname = ctx.url.pathname;
+  const ssrApp = createSSRApp(
+    {
+      "/": App,
+      "/hello": Hello,
+    }[pathname],
+  );
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes,
+  });
+  ssrApp.use(router);
+
+  await router.push({ path: pathname });
+  await router.isReady();
+
+  return ssrApp;
+};
 
 serve({
-  ssr: async (_ctx) => await renderToString(createSSRApp(app)),
+  config: {
+    routes: "./routes/**/*.{vue,tsx,ts}",
+    unocss: {
+      // to enable unocss, please add presets:
+      // presets: [ unoPreset ],
+    },
+  },
+  ssr: async (ctx) => await renderToString(await createSSRApp_(ctx)),
 });
diff --git a/examples/vue-app/style/app.css b/examples/vue-app/style/app.css
@@ -0,0 +1,10 @@
+@import url('./reset.css');
+
+body {
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
diff --git a/examples/vue-app/style/reset.css b/examples/vue-app/style/reset.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
diff --git a/framework/vue/mod.ts b/framework/vue/mod.ts
@@ -1 +1 @@
-// todo: add vue framework support
+export { createSSRApp } from "./router.ts";
diff --git a/framework/vue/router.ts b/framework/vue/router.ts
@@ -0,0 +1,20 @@
+import { Component, createApp, createSSRApp, MethodOptions } from "vue";
+import { createMemoryHistory, createRouter } from "vue-router";
+
+const createSSRApp_ = async (app: Component, routes: any, ctx: { url: { pathname: any } }) => {
+  const ssrApp = createSSRApp(app);
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes,
+  });
+  ssrApp.use(router);
+
+  const pathname = ctx.url.pathname;
+  await router.push(pathname);
+
+  await router.isReady();
+
+  return ssrApp;
+};
+
+export { createSSRApp_ as createSSRApp };
diff --git a/import_map.json b/import_map.json
@@ -5,10 +5,12 @@
     "aleph/": "./",
     "aleph/server": "./server/mod.ts",
     "aleph/react": "./framework/react/mod.ts",
+    "aleph/vue": "./framework/vue/mod.ts",
     "react": "https://esm.sh/react@18.1.0",
     "react-dom": "https://esm.sh/react-dom@18.1.0",
     "react-dom/": "https://esm.sh/react-dom@18.1.0/",
     "vue": "https://esm.sh/vue@3.2.33",
+    "vue-router": "https://esm.sh/vue-router@4.0.14",
     "vue/server-renderer": "https://esm.sh/@vue/server-renderer@3.2.33",
     "*.vue": "./loaders/vue.ts!loader"
   }

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-// todo: add vue framework support`
	`1`	`+export { createSSRApp } from "./router.ts";`