Permalink
Browse files

fix: Handle Vue.extend constructor export from .vue file (vuejs#206)

* test: Typescript Vue.extend component export

* chore: Bump @vue/component-compiler version

* chore: Remove unnecessary virtual extension from .vue block query
  • Loading branch information...
znck committed May 25, 2018
1 parent 98e75eb commit fa7661e029ddcabcd9ced35623f59cfc6d388691
Showing with 76 additions and 16 deletions.
  1. +1 −0 package.json
  2. +1 −1 src/utils.ts
  3. +16 −0 test/fixtures/with-script-typescript.vue
  4. +12 −5 test/setup/index.ts
  5. +17 −7 test/setup/plugins.ts
  6. +29 −3 yarn.lock
@@ -72,6 +72,7 @@
"rollup-plugin-image": "^1.0.2",
"rollup-plugin-md": "^0.0.7",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-typescript": "^0.8.1",
"ts-jest": "^22.4.5",
"typescript": "^2.8.3",
"vue": "^2.5.16",
@@ -80,7 +80,7 @@ export const createVuePartRequest: VuePartRequestCreator = ((
.filter(it => it !== undefined)
.join('.')

return `${path.basename(filename)}.${lang}?${queryString.stringify(query)}`
return `${path.basename(filename)}?${queryString.stringify(query)}`
}) as VuePartRequestCreator

createVuePartRequest.defaultLang = {
@@ -0,0 +1,16 @@
<template>
<h1 id="test" :style="style">Hello</h1>
</template>

<script lang="ts">
// @ts-ignore
import Vue, { VueConstructor } from 'vue'
export default Vue.extend({
data() {
return {
style: { color: 'red' }
}
}
})
</script>
@@ -24,20 +24,23 @@ export async function build(filename, css = false): Promise<string> {
plugins: [
pluginCreateVueApp(input, filename),
pluginCSS({
include: '**/*.css?*',
output: (s: string) => {
style = s
}
}),
pluginVue(options),
...plugins
],
external: ['vue']
})

cache[cacheKey] = (await bundle.generate({
format: 'iife',
name: 'App'
})).code + (style ? `;(function() {
name: 'App',
globals: {
vue: 'Vue'
}
})).code + (style ? `\n;(function() {
var s = document.createElement('style');
s.type = 'text/css';
document.head.appendChild(s);
@@ -62,8 +65,12 @@ export async function open(name: string, browser: Browser, code: string, id: str
</head>
<body>
<div id="app"></div>
<script>${await VUE_SOURCE}</script>
<script>${await code}</script>
<script>
${await VUE_SOURCE}
</script>
<script>
${await code}
</script>
</body>
</html>`

@@ -3,20 +3,29 @@ const pluginNodeResolve = require('rollup-plugin-node-resolve')
const pluginCommonJS = require('rollup-plugin-commonjs')
const pluginImage = require('rollup-plugin-image')
const pluginMarkdown = require('rollup-plugin-md')
const pluginTypescript = require('rollup-plugin-typescript')
const path = require('path')

export const plugins = [
pluginImage(),
pluginMarkdown(),
pluginNodeResolve(),
pluginCommonJS(),
pluginTypescript({
tsconfig: false,
module: 'es2015'
}),
pluginBabel({
presets: [
[require.resolve('@babel/preset-env'), {
modules: false,
targets: {
browsers: ['last 2 versions']
[
require.resolve('@babel/preset-env'),
{
modules: false,
targets: {
browsers: ['last 2 versions']
}
}
}]
]
],
babelrc: false,
runtimeHelpers: true
@@ -30,7 +39,8 @@ export function pluginCreateVueApp(filename: string, component: string): any {
if (id === filename) return filename
},
load(id) {
if (id === filename) return `
if (id === filename)
return `
import Component from '${component}'
Vue.config.productionTip = false
@@ -45,4 +55,4 @@ export function pluginCreateVueApp(filename: string, component: string): any {
`
}
}
}
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit fa7661e

Please sign in to comment.