refactor(framework/vue): support base meta and link tag for Head

Author: linbingquan

framework/vue/head.ts

@@ -1,4 +1,4 @@
-import { defineComponent, inject, onBeforeUnmount } from "vue";
+import { defineComponent, inject, isVNode, onBeforeUnmount, VNode } from "vue";
 import { ssrRenderComponent } from "vue/server-renderer";
 import util from "../../lib/util.ts";
 
@@ -7,7 +7,7 @@ export const Head = defineComponent({
   setup(_props, ctx) {
     const ssrHeadCollection: string[] | undefined = inject("ssrHeadCollection");
     if (ctx.slots.default && ssrHeadCollection) {
-      const children = ctx.slots.default();
+      const children = parseSlots(ctx.slots.default());
       children.forEach((vnode) => {
         const { props } = vnode;
         // add srr attr
@@ -25,31 +25,71 @@ export const Head = defineComponent({
         head.removeChild(el);
       }
     });
-  },
-  mounted() {
-    const { document } = window;
-    const insertedEls: Array<HTMLElement> = [];
+
     if (this.$slots.default) {
-      const defaultSlots = this.$slots.default();
-      defaultSlots.forEach((vnode) => {
-        const { type, children } = vnode;
-        if (type === "title") {
-          const el = document.createElement(type);
-          if (util.isFilledString(children)) {
-            el.innerText = children;
-          } else if (util.isFilledArray(children)) {
-            el.innerText = children.join("");
-          }
-          document.head.appendChild(el);
-          insertedEls.push(el);
+      const { document } = window;
+      const insertedEls: Array<HTMLElement> = [];
+      const children = parseSlots(this.$slots.default());
+      children.forEach((vnode) => {
+        const { type, props, children } = vnode;
+        const el = document.createElement(type);
+        if (children) el.innerText = children;
+        if (props) {
+          Object.keys(props).forEach((key) => {
+            const value = props[key];
+            el.setAttribute(key, String(value || ""));
+          });
         }
+        document.head.appendChild(el);
+        insertedEls.push(el);
+      });
+      onBeforeUnmount(() => {
+        insertedEls.forEach((el) => document.head.removeChild(el));
       });
     }
-    onBeforeUnmount(() => {
-      insertedEls.forEach((el) => document.head.removeChild(el));
-    });
   },
   render() {
     return [];
   },
 });
+
+type ParseSlots = {
+  type: string;
+  props?: Record<string, unknown> | null;
+  children?: string | null;
+};
+
+function parseSlots(vnodes: VNode[]): ParseSlots[] {
+  const els: ParseSlots[] = [];
+  const walk = (vnode: VNode) => {
+    if (!isVNode(vnode)) {
+      return;
+    }
+
+    const { type, props, children } = vnode;
+
+    switch (type) {
+      // ingore `script` and `no-script` tag
+      // ingore `style` tag
+      case "base":
+      case "meta":
+      case "link":
+        // remove the children of base/meta/link elements
+        els.push({ type, props });
+        break;
+      case "title":
+        if (util.isFilledString(children)) {
+          els.push({ type, props, children });
+        } else if (util.isFilledArray(children)) {
+          els.push({ type, props, children: children.join("") });
+        } else {
+          els.push({ type, props });
+        }
+        break;
+    }
+  };
+
+  vnodes.forEach((vnode) => walk(vnode));
+
+  return els;
+}

framework/vue/router.ts

@@ -55,7 +55,7 @@ const createRouter = (props?: RootProps) => {
     const router = defineComponent({
       name: "Router",
       render() {
-        return h(defaultExport as Component);
+        return [h(defaultExport as Component)];
       },
     });