mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-25 07:00:34 +03:00
Code Activity

chore: update examples, convert vue-router to ts

Browse Source
This commit is contained in:
pimlie
2021-05-17 02:08:37 +02:00
parent eb032e3eff
commit 8069449119
13 changed files with 146 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/jiti.js
+6 -25
View File
@@ -1,21 +1,13 @@
const path = require('path') const path = require('path')
const { transformSync } = require('@babel/core')
module.exports = require('jiti')(__filename, { module.exports = require('jiti')(__filename, {
cache: false, cache: false,
debug: false, debug: false,
transform (opts) { transformOptions: {
const _opts = { ts: true,
babelrc: false, retainLines: true,
configFile: false, babel: {
compact: false,
retainLines: typeof opts.retainLines === 'boolean' ? opts.retainLines : true,
filename: '',
cwd: '/',
plugins: [ 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'), { [require('babel-plugin-global-define'), {
__DEV__: true, __DEV__: true,
__BROWSER__: false __BROWSER__: false
@@ -24,22 +16,11 @@ module.exports = require('jiti')(__filename, {
root: '.', root: '.',
extensions: ['.ts'], extensions: ['.ts'],
alias: { 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*$/, '')
})
}
} }
}) })
examples/server.js
+2 -2
View File
@@ -41,10 +41,10 @@ app.use((req, res, next) => {
// the examples without errors in the browser // the examples without errors in the browser
if (req.url.endsWith('.js')) { if (req.url.endsWith('.js')) {
res.setHeader('Content-Type', 'application/javascript') res.setHeader('Content-Type', 'application/javascript')
res.send('') res.send('/* empty */')
} else if (req.url.endsWith('.css')) { } else if (req.url.endsWith('.css')) {
res.setHeader('Content-Type', 'text/css') res.setHeader('Content-Type', 'text/css')
res.send('') res.send('/* empty */')
} else { } else {
next() next()
} }
examples/ssr/app.template.html
+2 -2
View File
@@ -5,10 +5,10 @@
<link rel="stylesheet" href="/global.css"> <link rel="stylesheet" href="/global.css">
</head> </head>
<body {{ bodyAttrs }}> <body {{ bodyAttrs }}>
<body-prepend id="body-prepend">{{ bodyPrepend }}</body-prepend> <div id="body-prepend">{{ bodyPrepend }}</div>
<a href="/">&larr; Examples index</a> <a href="/">&larr; Examples index</a>
{{ app }} <div id="app">{{ app }}</div>
<script src="/__build__/ssr.js"></script> <script src="/__build__/ssr.js"></script>
{{ bodyAppend }} {{ bodyAppend }}
examples/ssr/browser.js
+3 -6
View File
@@ -1,9 +1,6 @@
import { createApp } from 'vue' import { createApp } from '../vue-router/main'
import { App, createRouter, metaManager } from '../vue-router/main'
window.users = [] window.users = []
const app = createApp(App) const { app, router } = createApp('/ssr', null)
app.use(createRouter('/ssr')) router.isReady().then(() => app.mount('#app'))
app.use(metaManager)
app.mount('#app')
examples/ssr/server.js
+9 -12
View File
@@ -1,10 +1,11 @@
import path from 'path' import path from 'path'
import fs from 'fs-extra' import fs from 'fs-extra'
import { createSSRApp } from 'vue' import { renderToString } from '@vue/server-renderer'
import { renderToStringWithMeta } from 'vue-meta'
import { renderMetaToString } from 'vue-meta/ssr'
import template from 'lodash/template' 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 templateFile = path.resolve(__dirname, 'app.template.html')
const templateContent = fs.readFileSync(templateFile, { encoding: 'utf8' }) const templateContent = fs.readFileSync(templateFile, { encoding: 'utf8' })
@@ -17,17 +18,13 @@ process.server = true
export async function renderPage ({ url }) { export async function renderPage ({ url }) {
console.log('renderPage', url) console.log('renderPage', url)
const app = createSSRApp(App) const { app, router } = createApp('/ssr', true)
const router = createRouter('/ssr', true) router.push(url.slice(4))
app.use(router)
app.use(metaManager)
await router.push(url.substr(4))
await router.isReady() await router.isReady()
const [appHtml, ctx] = await renderToStringWithMeta(app) const ctx = {}
const appHtml = await renderToString(app, ctx)
await renderMetaToString(app, ctx)
if (!ctx.teleports) { if (!ctx.teleports) {
ctx.teleports = {} ctx.teleports = {}
examples/vue-router/App.js → examples/vue-router/App.ts
+24 -23
View File
@@ -1,5 +1,5 @@
import { watch } from 'vue' import { watch } from 'vue'
import { useMeta, useActiveMeta } from 'vue-meta' import { useMeta, useActiveMeta } from '../../src'
export default { export default {
setup () { setup () {
@@ -32,7 +32,7 @@ export default {
body: 'body-script1.js', // TODO: fix body: 'body-script1.js', // TODO: fix
htmlAttrs: { htmlAttrs: {
amp: true, amp: true,
lang: ['en', 'nl'] lang: ['en']
}, },
bodyAttrs: { bodyAttrs: {
class: ['theme-dark'] class: ['theme-dark']
@@ -44,7 +44,7 @@ export default {
// TODO { content: 'window.a = "<br/>"; </script><script>alert(\'asdasd\');' }, // TODO { content: 'window.a = "<br/>"; </script><script>alert(\'asdasd\');' },
// TODO { rawContent: 'window.b = "<br/>"; </script><script> alert(\'123321\');' }, // TODO { rawContent: 'window.b = "<br/>"; </script><script> alert(\'123321\');' },
{ src: 'body-script2.js', to: 'body' }, { src: 'body-script2.js', to: 'body' },
{ src: 'body-script3.js', to: 'body-prepend' } { src: 'body-script3.js', to: '#body-prepend' }
] ]
/* esi: { /* esi: {
children: [ children: [
@@ -87,16 +87,16 @@ export default {
}) })
setTimeout(() => (meta.title = 'My Updated Title'), 2000) setTimeout(() => (meta.title = 'My Updated Title'), 2000)
setTimeout(() => (meta.htmlAttrs.amp = undefined), 2000) // setTimeout(() => (meta.htmlAttrs.amp = undefined), 2000)
const metadata = useActiveMeta() const metadata = useActiveMeta()
if (!process.server) { /* if (!process.server) {
window.$metadata = metadata window.$metadata = metadata
} } */
watch(metadata, (newValue) => { watch(metadata, (newValue) => {
console.log('UPDATE', newValue) console.log('META UPDATED', newValue)
}) })
/* let i = 0 /* let i = 0
@@ -146,6 +146,9 @@ export default {
metadata metadata
} }
}, },
mounted () {
// window.$vue = this.$
},
template: ` template: `
<metainfo> <metainfo>
<template v-slot:base="{ content, metainfo }">http://nuxt.dev:3000{{ content }}</template> <template v-slot:base="{ content, metainfo }">http://nuxt.dev:3000{{ content }}</template>
@@ -162,7 +165,7 @@ export default {
<template v-slot:head="{ metainfo }"> <template v-slot:head="{ metainfo }">
<!--[if IE]> <!--[if IE]>
// -> Reactivity is not supported by Vue in comments, all comments are ignored // -> 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 // -> but a static file should work
<script src="user-3.js" ></script> <script src="user-3.js" ></script>
// -> altho Vue probably strips comments in production builds (but can be configged afaik) // -> altho Vue probably strips comments in production builds (but can be configged afaik)
@@ -175,23 +178,21 @@ export default {
</template> </template>
</metainfo> </metainfo>
<div id="app"> <h1>vue-router</h1>
<h1>vue-router</h1> <ul class="menu">
<ul class="menu"> <li><router-link to="/">Home</router-link></li>
<li><router-link to="/">Home</router-link></li> <li><router-link to="/about">About</router-link></li>
<li><router-link to="/about">About</router-link></li> </ul>
</ul>
<router-view v-slot="{ Component }" class="page"> <router-view v-slot="{ Component }" class="page">
<transition name="page" mode="out-in"> <transition name="page" mode="out-in">
<component :is="Component" /> <component :is="Component" />
</transition> </transition>
</router-view> </router-view>
<div class="metadata"> <div class="metadata">
<h4>Active Metainfo:</h4> <h4>Active Metainfo:</h4>
<p>{{ JSON.stringify(metadata, null, 2)}}</p> <p>{{ JSON.stringify(metadata, null, 2)}}</p>
</div>
</div> </div>
` `
} }
examples/vue-router/Child.js → examples/vue-router/Child.ts
+20 -7
View File
@@ -1,6 +1,7 @@
import { defineComponent, ref, reactive, computed, toRefs, onUnmounted } from 'vue' import { defineComponent, ref, reactive, computed, toRefs, onUnmounted } from 'vue'
import { isSymbol } from '@vue/shared'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useMeta } from 'vue-meta' import { useMeta } from '../../src'
let metaUpdated = 'no' let metaUpdated = 'no'
@@ -16,23 +17,35 @@ export default defineComponent({
const ogTitle = ref('Og Child Title') 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(() => ({ const metaConfig = computed(() => ({
charset: 'utf16', charset: 'utf16',
title: route.name[0].toUpperCase() + route.name.slice(1), title: routeName[0].toUpperCase() + routeName.slice(1),
description: 'Description ' + route.name, description: 'Description ' + routeName,
og: { og: {
title: ogTitle.value + ' ' + route.name title: ogTitle.value + ' ' + routeName
} },
htmlAttrs: routeName !== 'home'
? {}
: {
lang: ['nl']
}
})) }))
const { onRemoved } = useMeta(metaConfig) const { onRemoved } = useMeta(metaConfig)
const pageName = computed(() => route.name) const pageName = computed(() => routeName)
onUnmounted(() => (metaUpdated = 'yes')) onUnmounted(() => (metaUpdated = 'yes'))
setTimeout(() => (ogTitle.value = 'Updated Child Og Title'), 1000) 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(() => { onRemoved(() => {
console.log('Meta was removed', pageName.value) console.log('Meta was removed', pageName.value)
examples/vue-router/browser.js
+3 -6
View File
@@ -1,7 +1,4 @@
import { createApp } from 'vue' import { createApp } from './main'
import { App, createRouter, metaManager } from './main'
const app = createApp(App) const { app, router } = createApp('/vue-router')
app.use(createRouter('/vue-router')) router.isReady().then(() => app.mount('#app'))
app.use(metaManager)
app.mount('#app')
examples/vue-router/index.html
+1 -1
View File
@@ -12,7 +12,7 @@
</style> </style>
</head> </head>
<body> <body>
<body-prepend id="body-prepend"></body-prepend> <div id="body-prepend"></div>
<a href="/">&larr; Examples index</a> <a href="/">&larr; Examples index</a>
<div id="app"></div> <div id="app"></div>
<script src="/__build__/vue-router.js"></script> <script src="/__build__/vue-router.js"></script>
examples/vue-router/main.js
-50
View File
@@ -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
}
examples/vue-router/main.ts
+70
View File
@@ -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
}
examples/webpack.config.js
+1
View File
@@ -63,6 +63,7 @@ module.exports = (isBrowser) => {
// on the first HMR update and causes the page to reload. // on the first HMR update and causes the page to reload.
vue: 'vue/dist/vue.esm-bundler.js', vue: 'vue/dist/vue.esm-bundler.js',
'vue-meta': path.resolve(__dirname, '../src/'), 'vue-meta': path.resolve(__dirname, '../src/'),
'vue-meta/ssr': path.resolve(__dirname, '../src/ssr'),
...extraAliases ...extraAliases
} }
}, },
tsconfig.json
+5 -1
View File
@@ -25,7 +25,11 @@
"removeComments": false, "removeComments": false,
"jsx": "preserve", "jsx": "preserve",
"lib": ["esnext", "dom"], "lib": ["esnext", "dom"],
"types": ["jest", "node"] "types": ["jest", "node"],
"paths": {
"vue-meta": ["./src/"],
"vue-meta/*": ["./src/*"],
}
}, },
"include": [ "include": [
"src/global.d.ts", "src/global.d.ts",