chore: update examples, convert vue-router to ts

2026-06-21 22:50:34 +03:00 · 2021-05-17 02:08:37 +02:00
parent eb032e3eff
commit 8069449119
13 changed files with 146 additions and 135 deletions
@@ -1,21 +1,13 @@
 const path = require('path')
-const { transformSync } = require('@babel/core')

 module.exports = require('jiti')(__filename, {
  cache: false,
  debug: false,
-  transform (opts) {
-    const _opts = {
-      babelrc: false,
-      configFile: false,
-      compact: false,
-      retainLines: typeof opts.retainLines === 'boolean' ? opts.retainLines : true,
-      filename: '',
-      cwd: '/',
+  transformOptions: {
+    ts: true,
+    retainLines: true,
+    babel: {
      plugins: [
-        [require('@babel/plugin-transform-modules-commonjs'), { allowTopLevelThis: true }],
-        [require('@babel/plugin-transform-typescript')],
-        [require('babel-plugin-dynamic-import-node'), { noInterop: true }],
        [require('babel-plugin-global-define'), {
          __DEV__: true,
          __BROWSER__: false
@@ -24,22 +16,11 @@ module.exports = require('jiti')(__filename, {
          root: '.',
          extensions: ['.ts'],
          alias: {
-            '^vue-meta$': path.resolve(__dirname, '../src/')
+            '^vue-meta$': path.resolve(__dirname, '../src/'),
+            '^vue-meta/ssr$': path.resolve(__dirname, '../src/ssr')
          }
        }]
      ]
    }
-
-    try {
-      return transformSync(opts.source, _opts).code || ''
-    } catch (err) {
-      return 'exports.__JITI_ERROR__ = ' + JSON.stringify({
-        filename: opts.filename,
-        line: (err.loc && err.loc.line) || 0,
-        column: (err.loc && err.loc.column) || 0,
-        code: err.code && err.code.replace('BABEL_', '').replace('PARSE_ERROR', 'ParseError'),
-        message: err.message.replace('/: ', '').replace(/\(.+\)\s*$/, '')
-      })
-    }
  }
 })
@@ -41,10 +41,10 @@ app.use((req, res, next) => {
  // the examples without errors in the browser
  if (req.url.endsWith('.js')) {
    res.setHeader('Content-Type', 'application/javascript')
-    res.send('')
+    res.send('/* empty */')
  } else if (req.url.endsWith('.css')) {
    res.setHeader('Content-Type', 'text/css')
-    res.send('')
+    res.send('/* empty */')
  } else {
    next()
  }
@@ -5,10 +5,10 @@
    <link rel="stylesheet" href="/global.css">
  </head>
  <body {{ bodyAttrs }}>
-    <body-prepend id="body-prepend">{{ bodyPrepend }}</body-prepend>
+    <div id="body-prepend">{{ bodyPrepend }}</div>

    <a href="/">&larr; Examples index</a>
-    {{ app }}
+    <div id="app">{{ app }}</div>

    <script src="/__build__/ssr.js"></script>
    {{ bodyAppend }}
@@ -1,9 +1,6 @@
-import { createApp } from 'vue'
-import { App, createRouter, metaManager } from '../vue-router/main'
+import { createApp } from '../vue-router/main'

 window.users = []

-const app = createApp(App)
-app.use(createRouter('/ssr'))
-app.use(metaManager)
-app.mount('#app')
+const { app, router } = createApp('/ssr', null)
+router.isReady().then(() => app.mount('#app'))
@@ -1,10 +1,11 @@
 import path from 'path'
 import fs from 'fs-extra'
-import { createSSRApp } from 'vue'
-import { renderToStringWithMeta } from 'vue-meta'
+import { renderToString } from '@vue/server-renderer'
+
+import { renderMetaToString } from 'vue-meta/ssr'

 import template from 'lodash/template'
-import { App, createRouter, metaManager } from '../vue-router/main'
+import { createApp } from '../vue-router/main'

 const templateFile = path.resolve(__dirname, 'app.template.html')
 const templateContent = fs.readFileSync(templateFile, { encoding: 'utf8' })
@@ -17,17 +18,13 @@ process.server = true
 export async function renderPage ({ url }) {
  console.log('renderPage', url)

-  const app = createSSRApp(App)
-  const router = createRouter('/ssr', true)
-
-  app.use(router)
-  app.use(metaManager)
-
-  await router.push(url.substr(4))
-
+  const { app, router } = createApp('/ssr', true)
+  router.push(url.slice(4))
  await router.isReady()

-  const [appHtml, ctx] = await renderToStringWithMeta(app)
+  const ctx = {}
+  const appHtml = await renderToString(app, ctx)
+  await renderMetaToString(app, ctx)

  if (!ctx.teleports) {
    ctx.teleports = {}
@@ -1,5 +1,5 @@
 import { watch } from 'vue'
-import { useMeta, useActiveMeta } from 'vue-meta'
+import { useMeta, useActiveMeta } from '../../src'

 export default {
  setup () {
@@ -32,7 +32,7 @@ export default {
      body: 'body-script1.js', // TODO: fix
      htmlAttrs: {
        amp: true,
-        lang: ['en', 'nl']
+        lang: ['en']
      },
      bodyAttrs: {
        class: ['theme-dark']
@@ -44,7 +44,7 @@ export default {
        // TODO { content: 'window.a = "<br/>"; </script><script>alert(\'asdasd\');' },
        // TODO { rawContent: 'window.b = "<br/>"; </script><script> alert(\'123321\');' },
        { src: 'body-script2.js', to: 'body' },
-        { src: 'body-script3.js', to: 'body-prepend' }
+        { src: 'body-script3.js', to: '#body-prepend' }
      ]
      /* esi: {
        children: [
@@ -87,16 +87,16 @@ export default {
    })

    setTimeout(() => (meta.title = 'My Updated Title'), 2000)
-    setTimeout(() => (meta.htmlAttrs.amp = undefined), 2000)
+    // setTimeout(() => (meta.htmlAttrs.amp = undefined), 2000)

    const metadata = useActiveMeta()

-    if (!process.server) {
+    /* if (!process.server) {
      window.$metadata = metadata
-    }
+    } */

    watch(metadata, (newValue) => {
-      console.log('UPDATE', newValue)
+      console.log('META UPDATED', newValue)
    })

    /* let i = 0
@@ -146,6 +146,9 @@ export default {
      metadata
    }
  },
+  mounted () {
+    // window.$vue = this.$
+  },
  template: `
    <metainfo>
     <template v-slot:base="{ content, metainfo }">http://nuxt.dev:3000{{ content }}</template>
@@ -162,7 +165,7 @@ export default {
      <template v-slot:head="{ metainfo }">
        <!--[if IE]>
        // -> Reactivity is not supported by Vue in comments, all comments are ignored
-        <component is="script" :src="metainfo.script[0].src" ></component>
+        <component is="script" :src="metainfo.script[0].src" data-duplicate="true"></component>
        // -> but a static file should work
        <script src="user-3.js" ></script>
        // -> altho Vue probably strips comments in production builds (but can be configged afaik)
@@ -175,23 +178,21 @@ export default {
      </template>
    </metainfo>

-    <div id="app">
-      <h1>vue-router</h1>
-      <ul class="menu">
-        <li><router-link to="/">Home</router-link></li>
-        <li><router-link to="/about">About</router-link></li>
-      </ul>
+    <h1>vue-router</h1>
+    <ul class="menu">
+      <li><router-link to="/">Home</router-link></li>
+      <li><router-link to="/about">About</router-link></li>
+    </ul>

-      <router-view v-slot="{ Component }" class="page">
-        <transition name="page" mode="out-in">
-          <component :is="Component" />
-        </transition>
-      </router-view>
+    <router-view v-slot="{ Component }" class="page">
+      <transition name="page" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>

-      <div class="metadata">
-        <h4>Active Metainfo:</h4>
-        <p>{{ JSON.stringify(metadata, null, 2)}}</p>
-      </div>
+    <div class="metadata">
+      <h4>Active Metainfo:</h4>
+      <p>{{ JSON.stringify(metadata, null, 2)}}</p>
    </div>
  `
 }
@@ -1,6 +1,7 @@
 import { defineComponent, ref, reactive, computed, toRefs, onUnmounted } from 'vue'
+import { isSymbol } from '@vue/shared'
 import { useRoute } from 'vue-router'
-import { useMeta } from 'vue-meta'
+import { useMeta } from '../../src'

 let metaUpdated = 'no'

@@ -16,23 +17,35 @@ export default defineComponent({

    const ogTitle = ref('Og Child Title')

+    let routeName: string
+    if (isSymbol(route.name)) {
+      routeName = route.name.toString()
+    } else if (route.name) {
+      routeName = route.name
+    }
+
    const metaConfig = computed(() => ({
      charset: 'utf16',
-      title: route.name[0].toUpperCase() + route.name.slice(1),
-      description: 'Description ' + route.name,
+      title: routeName[0].toUpperCase() + routeName.slice(1),
+      description: 'Description ' + routeName,
      og: {
-        title: ogTitle.value + ' ' + route.name
-      }
+        title: ogTitle.value + ' ' + routeName
+      },
+      htmlAttrs: routeName !== 'home'
+        ? {}
+        : {
+            lang: ['nl']
+          }
    }))

    const { onRemoved } = useMeta(metaConfig)

-    const pageName = computed(() => route.name)
+    const pageName = computed(() => routeName)

    onUnmounted(() => (metaUpdated = 'yes'))

    setTimeout(() => (ogTitle.value = 'Updated Child Og Title'), 1000)
-    setTimeout(() => (delete metaConfig.value.og), 3000)
+    setTimeout(() => (delete (metaConfig.value as Partial<typeof metaConfig.value>).og), 3000)

    onRemoved(() => {
      console.log('Meta was removed', pageName.value)
@@ -1,7 +1,4 @@
-import { createApp } from 'vue'
-import { App, createRouter, metaManager } from './main'
+import { createApp } from './main'

-const app = createApp(App)
-app.use(createRouter('/vue-router'))
-app.use(metaManager)
-app.mount('#app')
+const { app, router } = createApp('/vue-router')
+router.isReady().then(() => app.mount('#app'))
@@ -12,7 +12,7 @@
  </style>
 </head>
 <body>
-  <body-prepend id="body-prepend"></body-prepend>
+  <div id="body-prepend"></div>
  <a href="/">&larr; Examples index</a>
  <div id="app"></div>
  <script src="/__build__/vue-router.js"></script>
@@ -1,50 +0,0 @@
-import { h } from 'vue'
-import { createRouter as createVueRouter, createMemoryHistory, createWebHistory } from 'vue-router'
-import { createMetaManager, defaultConfig, resolveOption, useMeta } from 'vue-meta'
-import App from './App'
-import ChildComponent from './Child'
-
-function createComponent () {
-  return {
-    render: () => h(ChildComponent)
-  }
-}
-
-const decisionMaker5000000 = resolveOption((prevValue, context) => {
-  const { uid = 0 } = context.vm || {}
-  if (!prevValue || prevValue < uid) {
-    return uid
-  }
-})
-
-const metaManager = createMetaManager({
-  ...defaultConfig,
-  esi: {
-    group: true,
-    namespaced: true,
-    attributes: ['src', 'test', 'text']
-  }
-}, decisionMaker5000000)
-
-useMeta(
-  {
-    og: {
-      something: 'test'
-    }
-  },
-  metaManager
-) /**/
-
-const createRouter = (base, isSSR) => createVueRouter({
-  history: isSSR ? createMemoryHistory(base) : createWebHistory(base),
-  routes: [
-    { name: 'home', path: '/', component: createComponent() },
-    { name: 'about', path: '/about', component: createComponent() }
-  ]
-})
-
-export {
-  App,
-  metaManager,
-  createRouter
-}
@@ -0,0 +1,70 @@
+import { h, createApp as createVueApp, createSSRApp } from 'vue'
+import { createRouter as createVueRouter, createMemoryHistory, createWebHistory } from 'vue-router'
+import { createMetaManager as createVueMetaManager, defaultConfig, useMeta } from '../../src'
+import * as deepestResolver from '../../src/resolvers/deepest'
+import App from './App'
+import ChildComponent from './Child'
+
+function createComponent () {
+  return {
+    render: () => h(ChildComponent)
+  }
+}
+/*
+const decisionMaker5000000 = resolveOption((prevValue, context) => {
+  const { uid = 0 } = context.vm || {}
+  if (!prevValue || prevValue < uid) {
+    return uid
+  }
+})
+*/
+const createMetaManager = (isSSR = false) => createVueMetaManager(
+  isSSR,
+  {
+    ...defaultConfig,
+    esi: {
+      group: true,
+      namespaced: true
+      // TODO?: attributes: ['src', 'test', 'text']
+    }
+  },
+  deepestResolver
+)
+
+const createRouter = (base: string, isSSR = false) => createVueRouter({
+  history: isSSR ? createMemoryHistory(base) : createWebHistory(base),
+  routes: [
+    { name: 'home', path: '/', component: createComponent() },
+    { name: 'about', path: '/about', component: createComponent() }
+  ]
+})
+
+const createApp = (base: string, isSSR = null) => {
+  const app = isSSR === null ? createVueApp(App) : createSSRApp(App)
+  const router = createRouter(base, !!isSSR)
+  const metaManager = createMetaManager(!!isSSR)
+
+  app.use(router)
+  app.use(metaManager)
+
+  useMeta(
+    {
+      og: {
+        something: 'test'
+      }
+    },
+    metaManager
+  ) /**/
+
+  return {
+    app,
+    router,
+    metaManager
+  }
+}
+
+export {
+  createApp,
+  createMetaManager,
+  createRouter
+}
@@ -63,6 +63,7 @@ module.exports = (isBrowser) => {
        // on the first HMR update and causes the page to reload.
        vue: 'vue/dist/vue.esm-bundler.js',
        'vue-meta': path.resolve(__dirname, '../src/'),
+        'vue-meta/ssr': path.resolve(__dirname, '../src/ssr'),
        ...extraAliases
      }
    },
@@ -25,7 +25,11 @@
    "removeComments": false,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "paths": {
+      "vue-meta": ["./src/"],
+      "vue-meta/*": ["./src/*"],
+    }
  },
  "include": [
    "src/global.d.ts",