build: merge 'next' (Vue 3) branch into 'master' (Vue 2) for monorepo

.circleci/config.yml

@@ -24,4 +24,4 @@ jobs:
           key: node-10-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: npm run test
+      - run: yarn test

e2e/3.x/babel-in-package/components/Basic.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">{{ msg }}</h1>
+  </div>
+</template>
+
+<style module="css">
+.testA {
+  background-color: red;
+}
+</style>
+<style module>
+.testB {
+  background-color: blue;
+}
+</style>
+<style>
+.testC {
+  background-color: blue;
+}
+</style>
+
+<script>
+export default {
+  name: 'basic',
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      }
+    }
+  },
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    }
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy
+    }
+  }
+}
+</script>

e2e/3.x/babel-in-package/components/Coffee.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>Coffee</h1>
+</template>
+
+<script lang="coffee">
+export default
+    name: 'coffee'
+    data: -> {}
+</script>

e2e/3.x/babel-in-package/components/TypeScript.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <div id="parent">
+      {{ exclamationMarks }}
+    </div>
+    <type-script-child />
+  </div>
+</template>
+
+<script lang="ts">
+import TypeScriptChild from './TypeScriptChild.vue'
+export default {
+  computed: {
+    exclamationMarks(): string {
+      return 'Parent'
+    }
+  },
+  components: {
+    TypeScriptChild
+  }
+}
+</script>

e2e/3.x/babel-in-package/components/TypeScriptChild.vue

@@ -0,0 +1,13 @@
+<template>
+  <div id="child">{{ exclamationMarks }}</div>
+</template>
+
+<script lang="ts">
+export default {
+  computed: {
+    exclamationMarks(): string {
+      return 'Child'
+    }
+  }
+}
+</script>

e2e/3.x/babel-in-package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "vue3-babel-in-package",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "jest --no-cache test.js"
+  },
+  "dependencies": {
+    "vue": "^3.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@vue/compiler-sfc": "^3.0.3",
+    "coffeescript": "^2.3.2",
+    "jest": "^26.0.0",
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.2",
+    "vue3-jest": "^26.0.0-alpha.10"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue3-jest"
+    }
+  },
+  "babel": {
+    "presets": [
+      "@babel/env"
+    ]
+  }
+}

e2e/3.x/babel-in-package/test.js

@@ -0,0 +1,36 @@
+import { createApp, h } from 'vue'
+
+import TypeScript from './components/TypeScript.vue'
+import Basic from './components/Basic.vue'
+import Coffee from './components/Coffee.vue'
+
+function mount(Component, props, slots) {
+  document.getElementsByTagName('html')[0].innerHTML = ''
+  const el = document.createElement('div')
+  el.id = 'app'
+  document.body.appendChild(el)
+  const Parent = {
+    render() {
+      return h(Component, props, slots)
+    }
+  }
+  createApp(Parent).mount(el)
+}
+
+test('processes .vue files', () => {
+  mount(Basic)
+  expect(document.querySelector('h1').textContent).toBe(
+    'Welcome to Your Vue.js App'
+  )
+})
+
+test('processes .vue file with lang set to coffee', () => {
+  mount(Coffee)
+  expect(document.querySelector('h1').textContent).toBe('Coffee')
+})
+
+test('processes .vue files with lang set to typescript', () => {
+  mount(TypeScript)
+  expect(document.querySelector('#parent').textContent).toBe('Parent')
+  expect(document.querySelector('#child').textContent).toBe('Child')
+})

e2e/3.x/babel-in-package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "es6"],
+    "module": "ES2015",
+    "moduleResolution": "node",
+    "types": ["vue-typescript-import-dts", "node"],
+    "isolatedModules": false,
+    "experimentalDecorators": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true
+  }
+}

e2e/3.x/basic/__snapshots__/test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generates source maps for .vue files 1`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports[\\"default\\"] = void 0;
+var _default = {
+  name: 'basic',
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      };
+    }
+  },
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    };
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy;
+    }
+  }
+};
+exports[\\"default\\"] = _default;
+\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", { value: true });
+exports.render = void 0;
+var vue_1 = require(\\"vue\\");
+var _hoisted_1 = { class: \\"hello\\" };
+function render(_ctx, _cache) {
+    return (vue_1.openBlock(), vue_1.createBlock(\\"div\\", _hoisted_1, [
+        vue_1.createVNode(\\"h1\\", { class: _ctx.headingClasses }, vue_1.toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */)
+    ]));
+}
+exports.render = render;
+;exports.default = {...exports.default, render};;exports.default = {...exports.default, __cssModules: {\\"css\\":{\\"testA\\":\\"testA\\"},\\"$style\\":{\\"testB\\":\\"testB\\"}}}"
+`;
+
+exports[`generates source maps using src attributes 1`] = `
+"\\"use strict\\";
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports[\\"default\\"] = void 0;
+var _default = {
+  name: 'basic',
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      };
+    }
+  },
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    };
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy;
+    }
+  }
+};
+exports[\\"default\\"] = _default;
+\\"use strict\\";
+Object.defineProperty(exports, \\"__esModule\\", { value: true });
+exports.render = void 0;
+var vue_1 = require(\\"vue\\");
+var _hoisted_1 = { class: \\"hello\\" };
+function render(_ctx, _cache) {
+    return (vue_1.openBlock(), vue_1.createBlock(\\"div\\", _hoisted_1, [
+        vue_1.createVNode(\\"h1\\", { class: _ctx.headingClasses }, vue_1.toDisplayString(_ctx.msg), 3 /* TEXT, CLASS */)
+    ]));
+}
+exports.render = render;
+;exports.default = {...exports.default, render};"
+`;

e2e/3.x/basic/babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: ['@babel/preset-env'],
+  plugins: ['transform-vue-jsx']
+}

e2e/3.x/basic/components/Basic.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="hello">
+    <h1 :class="headingClasses">{{ msg }}</h1>
+  </div>
+</template>
+
+<style module="css">
+.testA {
+  background-color: red;
+}
+</style>
+<style module>
+.testB {
+  background-color: blue;
+}
+</style>
+<style>
+.testC {
+  background-color: blue;
+}
+</style>
+
+<script>
+export default {
+  name: 'basic',
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      }
+    }
+  },
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    }
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy
+    }
+  }
+}
+</script>

e2e/3.x/basic/components/BasicSrc.html

@@ -0,0 +1,3 @@
+<div class="hello">
+  <h1 :class="headingClasses">{{ msg }}</h1>
+</div>

e2e/3.x/basic/components/BasicSrc.js

@@ -0,0 +1,23 @@
+export default {
+  name: 'basic',
+  computed: {
+    headingClasses: function headingClasses() {
+      return {
+        red: this.isCrazy,
+        blue: !this.isCrazy,
+        shadow: this.isCrazy
+      }
+    }
+  },
+  data: function data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+      isCrazy: false
+    }
+  },
+  methods: {
+    toggleClass: function toggleClass() {
+      this.isCrazy = !this.isCrazy
+    }
+  }
+}

e2e/3.x/basic/components/BasicSrc.vue

@@ -0,0 +1,3 @@
+<template src="./BasicSrc.html"></template>
+
+<script src="./BasicSrc.js"></script>