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

feat: convert to ts (wip)

Browse Source
This commit is contained in:
pimlie
2020-06-01 01:05:59 +02:00
parent 303eae1603
commit 28d3fc1923
106 changed files with 4478 additions and 5037 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/utils/build.js
+43 -32
View File
@@ -11,22 +11,25 @@ const renderer = createRenderer()
export { default as getPort } from 'get-port'
export function _import (moduleName) {
export function _import(moduleName) {
return import(moduleName).then(m => m.default || m)
}
export const useDist = stdEnv.test && stdEnv.ci
export function getVueMetaPath (browser) {
export function getVueMetaPath(browser) {
if (useDist) {
return path.resolve(__dirname, `../..${browser ? '/dist/vue-meta.min.js' : ''}`)
return path.resolve(
__dirname,
`../..${browser ? '/dist/vue-meta.min.js' : ''}`
)
}
process.server = !browser
return path.resolve(__dirname, '../../src')
}
export function webpackRun (config) {
export function webpackRun(config) {
const compiler = webpack(config)
return new Promise((resolve, reject) => {
@@ -40,7 +43,7 @@ export function webpackRun (config) {
})
}
export async function buildFixture (fixture, config = {}) {
export async function buildFixture(fixture, config = {}) {
if (!fixture) {
throw new Error('buildFixture should be called with a fixture name')
}
@@ -67,10 +70,15 @@ export async function buildFixture (fixture, config = {}) {
const createApp = await _import(path.resolve(fixturePath, 'server'))
const vueApp = await createApp()
const templateFile = await fs.readFile(path.resolve(fixturePath, '..', 'app.template.html'), { encoding: 'utf8' })
const templateFile = await fs.readFile(
path.resolve(fixturePath, '..', 'app.template.html'),
{ encoding: 'utf8' }
)
const compiled = template(templateFile, { interpolate: /{{([\s\S]+?)}}/g })
const assets = webpackStats.assets.filter(asset => !asset.name.includes('load-test'))
const assets = webpackStats.assets.filter(
asset => !asset.name.includes('load-test')
)
const headAssets = assets
.filter(asset => asset.name.includes('chunk'))
@@ -94,11 +102,11 @@ export async function buildFixture (fixture, config = {}) {
appFile,
webpackStats,
html,
metaInfo
metaInfo,
}
}
export function createWebpackConfig (config = {}) {
export function createWebpackConfig(config = {}) {
const publicPath = '.vue-meta'
return {
@@ -108,7 +116,7 @@ export function createWebpackConfig (config = {}) {
path: path.join(path.dirname(config.entry), publicPath),
filename: '[name].js',
chunkFilename: '[id].chunk.js',
publicPath: `/${publicPath}/`
publicPath: `/${publicPath}/`,
},
module: {
rules: [
@@ -119,22 +127,25 @@ export function createWebpackConfig (config = {}) {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 'core-js@3',
targets: { ie: 9, safari: '5.1' }
}]
]
}
}
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 'core-js@3',
targets: { ie: 9, safari: '5.1' },
},
],
],
},
},
},
{ test: /\.vue$/, use: 'vue-loader' }
]
{ test: /\.vue$/, use: 'vue-loader' },
],
},
// Expose __dirname to allow automatically setting basename.
context: __dirname,
node: {
__dirname: true
__dirname: true,
},
optimization: {
splitChunks: {
@@ -142,29 +153,29 @@ export function createWebpackConfig (config = {}) {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
chunks: 'all',
},
},
},
},
plugins: [
new VueLoaderPlugin(),
new webpack.DefinePlugin({
'process.env': {
// make sure our simple polyfills are enabled
NODE_ENV: '"test"'
}
NODE_ENV: '"test"',
},
}),
new CopyWebpackPlugin([
{ from: path.join(path.dirname(config.entry), 'static') }
])
{ from: path.join(path.dirname(config.entry), 'static') },
]),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js',
'vue-meta': getVueMetaPath(true)
}
'vue-meta': getVueMetaPath(true),
},
},
...config
...config,
}
}
test/utils/index.js
+14 -9
View File
@@ -1,5 +1,10 @@
import { JSDOM } from 'jsdom'
import { mount, shallowMount, createWrapper, createLocalVue } from '@vue/test-utils'
import {
mount,
shallowMount,
createWrapper,
createLocalVue,
} from '@vue/test-utils'
import { render, renderToString } from '@vue/server-test-utils'
import { attributeMap } from '../../src/client/updaters/attribute'
import { defaultOptions } from '../../src/shared/constants'
@@ -12,34 +17,34 @@ export {
render,
renderToString,
VueMetaPlugin,
attributeMap
attributeMap,
}
export function getVue () {
export function getVue() {
return createLocalVue()
}
export function loadVueMetaPlugin (options, localVue = getVue()) {
export function loadVueMetaPlugin(options, localVue = getVue()) {
localVue.use(VueMetaPlugin, Object.assign({}, defaultOptions, options))
return localVue
}
export const vmTick = (vm) => {
return new Promise((resolve) => {
export const vmTick = vm => {
return new Promise(resolve => {
vm.$nextTick(resolve)
})
}
export const pTick = () => new Promise(resolve => process.nextTick(resolve))
export function createDOM (html = '<!DOCTYPE html>', options = {}) {
export function createDOM(html = '<!DOCTYPE html>', options = {}) {
const dom = new JSDOM(html, options)
return {
dom,
window: dom.window,
document: dom.window.document
document: dom.window.document,
}
}
@@ -47,6 +52,6 @@ export function createDOM (html = '<!DOCTYPE html>', options = {}) {
// this is ok because this code normally only runs on
// the client and not during ssr
// TODO: findout why jest.resetModules doesnt work for this
export function clearClientAttributeMap () {
export function clearClientAttributeMap() {
Object.keys(attributeMap).forEach(key => delete attributeMap[key])
}
test/utils/meta-info-data.js
+120 -80
View File
@@ -6,7 +6,7 @@ const metaInfoData = {
add: {
data: 'Hello World',
expect: ['<title>Hello World</title>'],
test (side, defaultTest) {
test(side, defaultTest) {
if (side === 'client') {
// client side vue-meta uses document.title and doesnt change the html
return () => {
@@ -21,52 +21,46 @@ const metaInfoData = {
} else {
return defaultTest
}
}
}
},
},
},
base: {
add: {
data: [{ href: 'href' }],
expect: ['<base data-vue-meta="ssr" href="href">']
expect: ['<base data-vue-meta="ssr" href="href">'],
},
change: {
data: [{ href: 'href2' }],
expect: ['<base data-vue-meta="ssr" href="href2">']
expect: ['<base data-vue-meta="ssr" href="href2">'],
},
remove: {
data: [],
expect: ['']
}
expect: [''],
},
},
meta: {
add: {
data: [{ charset: 'utf-8' }, { property: 'a', content: 'a' }],
expect: [
'<meta data-vue-meta="ssr" charset="utf-8">',
'<meta data-vue-meta="ssr" property="a" content="a">'
]
'<meta data-vue-meta="ssr" property="a" content="a">',
],
},
change: {
data: [
{ charset: 'utf-16' },
{ property: 'a', content: 'b' }
],
data: [{ charset: 'utf-16' }, { property: 'a', content: 'b' }],
expect: [
'<meta data-vue-meta="ssr" charset="utf-16">',
'<meta data-vue-meta="ssr" property="a" content="b">'
]
'<meta data-vue-meta="ssr" property="a" content="b">',
],
},
// make sure elements that already exists are not unnecessarily updated
duplicate: {
data: [
{ charset: 'utf-16' },
{ property: 'a', content: 'c' }
],
data: [{ charset: 'utf-16' }, { property: 'a', content: 'c' }],
expect: [
'<meta data-vue-meta="ssr" charset="utf-16">',
'<meta data-vue-meta="ssr" property="a" content="c">'
'<meta data-vue-meta="ssr" property="a" content="c">',
],
test (side, defaultTest) {
test(side, defaultTest) {
if (side === 'client') {
return () => {
const tags = defaultTest()
@@ -76,45 +70,57 @@ const metaInfoData = {
expect(tags.tagsRemoved.meta.length).toBe(1)
}
}
}
},
},
remove: {
data: [],
expect: ['']
}
expect: [''],
},
},
link: {
add: {
data: [{ rel: 'stylesheet', href: 'href' }],
expect: ['<link data-vue-meta="ssr" rel="stylesheet" href="href">']
expect: ['<link data-vue-meta="ssr" rel="stylesheet" href="href">'],
},
change: {
data: [{ rel: 'stylesheet', href: 'href', media: 'screen' }],
expect: ['<link data-vue-meta="ssr" rel="stylesheet" href="href" media="screen">']
expect: [
'<link data-vue-meta="ssr" rel="stylesheet" href="href" media="screen">',
],
},
remove: {
data: [],
expect: ['']
}
expect: [''],
},
},
style: {
add: {
data: [{ type: 'text/css', cssText: '.foo { color: red; }' }],
expect: ['<style data-vue-meta="ssr" type="text/css">.foo { color: red; }</style>']
expect: [
'<style data-vue-meta="ssr" type="text/css">.foo { color: red; }</style>',
],
},
change: {
data: [{ type: 'text/css', cssText: '.foo { color: blue; }' }],
expect: ['<style data-vue-meta="ssr" type="text/css">.foo { color: blue; }</style>']
expect: [
'<style data-vue-meta="ssr" type="text/css">.foo { color: blue; }</style>',
],
},
remove: {
data: [],
expect: ['']
}
expect: [''],
},
},
script: {
add: {
data: [
{ src: 'src1', async: false, defer: true, [defaultOptions.tagIDKeyName]: 'content', callback: () => {} },
{
src: 'src1',
async: false,
defer: true,
[defaultOptions.tagIDKeyName]: 'content',
callback: () => {},
},
{ src: 'src-prepend', async: true, defer: false, pbody: true },
{ src: 'src2', async: false, defer: true, body: true },
{ src: 'src3', async: false, skip: true },
@@ -125,22 +131,28 @@ const metaInfoData = {
'@type': 'Organization',
name: 'MyApp',
url: 'https://www.myurl.com',
logo: 'https://www.myurl.com/images/logo.png'
}
}
logo: 'https://www.myurl.com/images/logo.png',
},
},
],
expect: [
'<script data-vue-meta="ssr" src="src1" defer data-vmid="content" onload="this.__vm_l=1"></script>',
'<script data-vue-meta="ssr" src="src-prepend" async data-pbody="true"></script>',
'<script data-vue-meta="ssr" src="src2" defer data-body="true"></script>',
'<script data-vue-meta="ssr" type="application/ld+json">{"@context":"http://schema.org","@type":"Organization","name":"MyApp","url":"https://www.myurl.com","logo":"https://www.myurl.com/images/logo.png"}</script>'
'<script data-vue-meta="ssr" type="application/ld+json">{"@context":"http://schema.org","@type":"Organization","name":"MyApp","url":"https://www.myurl.com","logo":"https://www.myurl.com/images/logo.png"}</script>',
],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
if (side === 'client') {
for (const index in this.expect) {
this.expect[index] = this.expect[index].replace(/(async|defer)/g, '$1=""')
this.expect[index] = this.expect[index].replace(/ onload="this.__vm_l=1"/, '')
this.expect[index] = this.expect[index].replace(
/(async|defer)/g,
'$1=""'
)
this.expect[index] = this.expect[index].replace(
/ onload="this.__vm_l=1"/,
''
)
}
const tags = defaultTest()
@@ -160,40 +172,56 @@ const metaInfoData = {
expect(html).not.toContain(bodyAppended)
}
}
}
},
},
// this test only runs for client so we can directly expect wrong boolean attributes
change: {
data: [{ src: 'src', async: true, defer: true, [defaultOptions.tagIDKeyName]: 'content2' }],
expect: ['<script data-vue-meta="ssr" src="src" async="" defer="" data-vmid="content2"></script>']
data: [
{
src: 'src',
async: true,
defer: true,
[defaultOptions.tagIDKeyName]: 'content2',
},
],
expect: [
'<script data-vue-meta="ssr" src="src" async="" defer="" data-vmid="content2"></script>',
],
},
remove: {
data: [],
expect: ['']
}
expect: [''],
},
},
noscript: {
add: {
data: [{ innerHTML: '<p>noscript</p>' }],
expect: ['<noscript data-vue-meta="ssr"><p>noscript</p></noscript>']
expect: ['<noscript data-vue-meta="ssr"><p>noscript</p></noscript>'],
},
change: {
data: [{ innerHTML: '<p>noscript, no really</p>' }],
expect: ['<noscript data-vue-meta="ssr"><p>noscript, no really</p></noscript>']
expect: [
'<noscript data-vue-meta="ssr"><p>noscript, no really</p></noscript>',
],
},
remove: {
data: [],
expect: ['']
}
expect: [''],
},
},
htmlAttrs: {
add: {
data: { foo: 'bar' },
expect: ['<html foo="bar" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D%7D">'],
test (side, defaultTest) {
expect: [
'<html foo="bar" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D%7D">',
],
test(side, defaultTest) {
return () => {
if (side === 'client') {
this.expect[0] = this.expect[0].replace(/ data-vue-meta="[^"]+"/, '')
this.expect[0] = this.expect[0].replace(
/ data-vue-meta="[^"]+"/,
''
)
}
defaultTest()
@@ -202,39 +230,44 @@ const metaInfoData = {
expect(attributeMap).toEqual({ htmlAttrs: { foo: { ssr: 'bar' } } })
}
}
}
},
},
change: {
data: { foo: 'baz' },
expect: ['<html foo="baz">'],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ htmlAttrs: { foo: { ssr: 'baz' } } })
}
}
},
},
remove: {
data: {},
expect: ['<html>'],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ htmlAttrs: { foo: {} } })
}
}
}
},
},
},
headAttrs: {
add: {
data: { foo: 'bar' },
expect: ['<head foo="bar" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D%7D">'],
test (side, defaultTest) {
expect: [
'<head foo="bar" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D%7D">',
],
test(side, defaultTest) {
return () => {
if (side === 'client') {
this.expect[0] = this.expect[0].replace(/ data-vue-meta="[^"]+"/, '')
this.expect[0] = this.expect[0].replace(
/ data-vue-meta="[^"]+"/,
''
)
}
defaultTest()
@@ -243,39 +276,44 @@ const metaInfoData = {
expect(attributeMap).toEqual({ headAttrs: { foo: { ssr: 'bar' } } })
}
}
}
},
},
change: {
data: { foo: 'baz' },
expect: ['<head foo="baz">'],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ headAttrs: { foo: { ssr: 'baz' } } })
}
}
},
},
remove: {
data: {},
expect: ['<head>'],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ headAttrs: { foo: {} } })
}
}
}
},
},
},
bodyAttrs: {
add: {
data: { foo: 'bar', fizz: ['fuzz', 'fozz'] },
expect: ['<body foo="bar" fizz="fuzz fozz" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D,%22fizz%22:%7B%22ssr%22:%5B%22fuzz%22,%22fozz%22%5D%7D%7D">'],
test (side, defaultTest) {
expect: [
'<body foo="bar" fizz="fuzz fozz" data-vue-meta="%7B%22foo%22:%7B%22ssr%22:%22bar%22%7D,%22fizz%22:%7B%22ssr%22:%5B%22fuzz%22,%22fozz%22%5D%7D%7D">',
],
test(side, defaultTest) {
return () => {
if (side === 'client') {
this.expect[0] = this.expect[0].replace(/ data-vue-meta="[^"]+"/, '')
this.expect[0] = this.expect[0].replace(
/ data-vue-meta="[^"]+"/,
''
)
}
defaultTest()
@@ -284,36 +322,38 @@ const metaInfoData = {
expect(attributeMap).toEqual({
bodyAttrs: {
foo: { ssr: 'bar' },
fizz: { ssr: ['fuzz', 'fozz'] }
}
fizz: { ssr: ['fuzz', 'fozz'] },
},
})
}
}
}
},
},
change: {
data: { foo: 'baz' },
expect: ['<body foo="baz">'],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ bodyAttrs: { foo: { ssr: 'baz' }, fizz: {} } })
expect(attributeMap).toEqual({
bodyAttrs: { foo: { ssr: 'baz' }, fizz: {} },
})
}
}
},
},
remove: {
data: {},
expect: ['<body>'],
test (side, defaultTest) {
test(side, defaultTest) {
return () => {
defaultTest()
expect(attributeMap).toEqual({ bodyAttrs: { foo: {}, fizz: {} } })
}
}
}
}
},
},
},
}
export default metaInfoData