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

znck · web-flow · commit fa7661e029dd · 2018-05-26T01:27:50.000+05:30
* test: Typescript Vue.extend component export

* chore: Bump @vue/component-compiler version

* chore: Remove unnecessary virtual extension from .vue block query
diff --git a/package.json b/package.json
@@ -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",
diff --git a/src/utils.ts b/src/utils.ts
@@ -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 = {
diff --git a/test/fixtures/with-script-typescript.vue b/test/fixtures/with-script-typescript.vue
@@ -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>
diff --git a/test/setup/index.ts b/test/setup/index.ts
@@ -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>`
 
diff --git a/test/setup/plugins.ts b/test/setup/plugins.ts
@@ -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 {
   `
     }
   }
-}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -581,8 +581,8 @@
     vue-template-es2015-compiler "^1.6.0"
 
 "@vue/component-compiler@^3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.3.2.tgz#cccb36a698025c1ff93f8bd3ee7ed6ebc42c27c5"
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler/-/component-compiler-3.3.3.tgz#f23b5353515025e81d36448b71422b2510939502"
   dependencies:
     "@vue/component-compiler-utils" "^1.2.1"
     clean-css "^4.1.11"
@@ -1356,6 +1356,10 @@ compare-func@^1.3.1:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
 
+compare-versions@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-2.0.1.tgz#1edc1f93687fd97a325c59f55e45a07db106aca6"
+
 compare-versions@^3.1.0:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.2.1.tgz#a49eb7689d4caaf0b6db5220173fd279614000f7"
@@ -3089,10 +3093,14 @@ jest@^22.4.2:
     import-local "^1.0.0"
     jest-cli "^22.4.3"
 
-js-base64@^2.1.8, js-base64@^2.1.9:
+js-base64@^2.1.8:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
 
+js-base64@^2.1.9:
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.5.tgz#e293cd3c7c82f070d700fc7a1ca0a2e69f101f92"
+
 js-stringify@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
@@ -4537,6 +4545,16 @@ rollup-plugin-node-resolve@^3.3.0:
     is-module "^1.0.0"
     resolve "^1.1.6"
 
+rollup-plugin-typescript@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-typescript/-/rollup-plugin-typescript-0.8.1.tgz#2ff7eecc21cf6bb2b43fc27e5b688952ce71924a"
+  dependencies:
+    compare-versions "2.0.1"
+    object-assign "^4.0.1"
+    rollup-pluginutils "^1.3.1"
+    tippex "^2.1.1"
+    typescript "^1.8.9"
+
 rollup-pluginutils@^1.3.1, rollup-pluginutils@^1.5.0, rollup-pluginutils@^1.5.1, rollup-pluginutils@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
@@ -4992,6 +5010,10 @@ through@2, "through@>=2.2.7 <3":
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
+tippex@^2.1.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/tippex/-/tippex-2.3.1.tgz#a2fd5b7087d7cbfb20c9806a6c16108c2c0fafda"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -5104,6 +5126,10 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typescript@^1.8.9:
+  version "1.8.10"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-1.8.10.tgz#b475d6e0dff0bf50f296e5ca6ef9fbb5c7320f1e"
+
 typescript@^2.8.3:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.3.tgz#5d817f9b6f31bb871835f4edf0089f21abe6c170"
