wip(framework/vue): add createSSRApp and Link

Author: linbingquan

examples/vue-app/app.vue

@@ -1,18 +1,17 @@
 <script setup>
 import { ref } from "vue"
+import { Link } from "aleph/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>
+  <Link to="/hello">hello page</Link>
+  <br />
+  <Link to="/blog">blog page</Link>
 </template>
 
 <style scoped>

examples/vue-app/hello.vue

@@ -1,25 +1,4 @@
-import { createApp } from "vue";
-import { createRouter, createWebHistory } from "vue-router";
+import { createSSRApp } from "aleph/vue";
 import App from "./app.vue";
-import Hello from "./hello.vue";
-import { routes } from "./routes.js";
 
-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);
-});
+createSSRApp(App).mount("#root", true);

examples/vue-app/main.js

@@ -0,0 +1,12 @@
+<script setup>
+import { ref } from "vue"
+import { Link } from "aleph/vue"
+
+const msg = ref("blog page")
+</script>
+
+<template>
+    <h2>{{ msg }}</h2>
+    <br />
+    <Link to="/">go back</Link>
+</template>

examples/vue-app/routes.js

@@ -0,0 +1,12 @@
+<script setup>
+import { ref } from "vue"
+import { Link } from "aleph/vue"
+
+const msg = ref("hello page")
+</script>
+
+<template>
+    <h2>{{ msg }}</h2>
+    <br />
+    <Link to="/">go back</Link>
+</template>

examples/vue-app/routes/blog.vue

@@ -1,30 +1,7 @@
-import { createSSRApp } from "vue";
-import { createMemoryHistory, createRouter } from "vue-router";
+import { createSSRApp } from "aleph/vue";
 import { serve } from "aleph/server";
 import { renderToString } from "vue/server-renderer";
 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({
   config: {
@@ -34,5 +11,5 @@ serve({
       // presets: [ unoPreset ],
     },
   },
-  ssr: async (ctx) => await renderToString(await createSSRApp_(ctx)),
+  ssr: async (ctx) => await renderToString(createSSRApp(App, { ssrContext: ctx }), ctx),
 });

examples/vue-app/routes/hello.vue

@@ -0,0 +1,6 @@
+import { ref } from "vue";
+
+export const RouterContext = ref({
+  url: new URL("http://localhost/"),
+  params: {},
+});

examples/vue-app/server.js

@@ -0,0 +1,22 @@
+import { useRouter } from "./router.ts";
+import { defineComponent, h } from "vue";
+
+export const Link = defineComponent({
+  name: "Link",
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+  },
+  setup() {
+    const { url, params } = useRouter();
+    return {
+      url,
+      params,
+    };
+  },
+  render() {
+    return h("a", { href: this.$props.to }, this.$slots.default ? this.$slots.default() : []);
+  },
+});

framework/vue/context.ts

@@ -1 +1,2 @@
-export { createSSRApp } from "./router.ts";
+export { App, createApp, createSSRApp } from "./router.ts";
+export { Link } from "./link.ts";