hi
+
+```
+
+Into the following:
+
+``` html
+
+
+
+ hi
+
+```
+
+#### Notes
+
+1. You can include both scoped and non-scoped styles in the same component:
+
+ ``` html
+
+
+
+ ```
+
+2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
+
+3. Partials are not affected by scoped styles.
+
+4. **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit. [Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself.
+
+5. **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule. To avoid class name conflicts, you can use [CSS Modules](features/css-modules.md).
diff --git a/docs/en/getting-started.md b/docs/en/getting-started.md
new file mode 100644
index 000000000..beac721df
--- /dev/null
+++ b/docs/en/getting-started.md
@@ -0,0 +1,176 @@
+# Getting Started
+
+### Syntax Highlighting
+
+First thing first, you will probably want proper syntax highlighting for `*.vue` components. Currently there are syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue) and [Vim](https://github.com/posva/vim-vue). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.
+
+### Project Structure
+
+We are going to walk through setting up a Webpack + `vue-loader` project from scratch. If you are interested in ready-to-run examples, check out [vue-loader-example](https://github.com/vuejs/vue-loader-example) and [vue-hackernews](https://github.com/vuejs/vue-hackernews). However, if you are not already a Webpack expert, I highly recommend going through the following tutorial to understand how the pieces fit together.
+
+A simple `vue-loader` based project structure looks like this:
+
+``` bash
+.
+├── index.html
+├── main.js
+├── components
+│ ├── App.vue
+│ ├── ComponentA.vue
+│ └── ComponentB.vue
+├── package.json
+└── webpack.config.js
+```
+
+### Installing Dependencies
+
+Before we write any code, we need to install the proper NPM dependencies. Let's run:
+
+``` bash
+# Create a package.json file.
+# fill in the questions as you desire.
+npm init
+
+# Install everything we need
+npm install\
+ webpack webpack-dev-server\
+ vue-loader vue-html-loader css-loader style-loader vue-hot-reload-api\
+ babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015\
+ babel-runtime@5\
+ --save-dev
+```
+
+That's a lot of dependencies, I know! This is mostly because `vue-loader` need to have other webpack loaders as **peer dependencies** rather than nested dependencies so that Webpack can find them.[^(1)]
+
+You may also notice that we are using `babel-runtime` version 5 instead of the latest 6.x - this is [intentional](https://github.com/vuejs/vue-loader/issues/96#issuecomment-162910917).
+
+After proper installation, your `package.json`'s `devDependencies` field should look like this:
+
+``` json
+...
+ "devDependencies": {
+ "babel-core": "^6.3.17",
+ "babel-loader": "^6.2.0",
+ "babel-plugin-transform-runtime": "^6.3.13",
+ "babel-preset-es2015": "^6.3.13",
+ "babel-runtime": "^5.8.34",
+ "css-loader": "^0.23.0",
+ "style-loader": "^0.13.0",
+ "vue-hot-reload-api": "^1.2.2",
+ "vue-html-loader": "^1.0.0",
+ "vue-loader": "^7.2.0",
+ "webpack": "^1.12.9",
+ "webpack-dev-server": "^1.14.0"
+ },
+...
+```
+
+### Configuring Webpack
+
+Here's the most basic Webpack configuration for `vue-loader`:
+
+``` js
+// webpack.config.js
+module.exports = {
+ // entry point of our application
+ entry: './main.js',
+ // where to place the compiled bundle
+ output: {
+ path: __dirname,
+ filename: 'build.js'
+ },
+ module: {
+ // `loaders` is an array of loaders to use.
+ // here we are only configuring vue-loader
+ loaders: [
+ {
+ test: /\.vue$/, // a regex for matching all files that end in `.vue`
+ loader: 'vue' // loader to use for matched files
+ }
+ ]
+ }
+}
+```
+
+With the above configuration, when you write the following in your JavaScript code:
+
+``` js
+var MyComponent = require('./my-component.vue')
+```
+
+Webpack knows it needs to pipe the contents of `./my-component.vue` through `vue-loader`, because the filename matches the regex we provided in the config.
+
+### Creating Other Files
+
+The app entry point, `main.js` typically looks like this:
+
+``` js
+// main.js
+var Vue = require('vue')
+// require a *.vue component
+var App = require('./components/App.vue')
+
+// mount a root Vue instance
+new Vue({
+ el: 'body',
+ components: {
+ // include the required component
+ // in the options
+ app: App
+ }
+})
+```
+
+Inside a `*.vue` component's `
+```
+
+Next, let's create an `index.html` that simply uses the bundled file:
+
+``` html
+
+
+ hi
+
+```
+
+转化为这样的代码：
+
+``` html
+
+
+
+ hi
+
+```
+
+#### 注意
+
+1. 在同一个组件中，你可以同时使用带作用域和不带的：
+
+ ``` html
+
+
+
+ ```
+
+2. 一个子组件的根节点会同时受到父组件的 CSS 作用域，以及子组件自身 CSS 作用域的影响。
+
+3. Partials 不受样式作用域影响。
+
+4. **作用域样式不排除使用类选择器**. 根据浏览器渲染不同选择器样式的方式， `p { color: red }` 加上作用域（如，与属性选择器结合）后会慢了几倍。如果你用类或者 ID 选择器代替，如 `.example { color: red }`，基本没有性能问题。[这里有一个测试环境](http://stevesouders.com/efws/css-selectors/csscreate.php)，你可以测试不同选择器的差异。
+
+5. **“多代”组件，慎用后代选择器！** 有一个样式规则使用 `.a .b` 选择器，此时，若匹配 `.a` 的元素包含“多代”子组件的话，则匹配 `.b` 的各代子组件都会应用该样式。
diff --git a/docs/zh-cn/getting-started.md b/docs/zh-cn/getting-started.md
new file mode 100644
index 000000000..beac721df
--- /dev/null
+++ b/docs/zh-cn/getting-started.md
@@ -0,0 +1,176 @@
+# Getting Started
+
+### Syntax Highlighting
+
+First thing first, you will probably want proper syntax highlighting for `*.vue` components. Currently there are syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue) and [Vim](https://github.com/posva/vim-vue). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.
+
+### Project Structure
+
+We are going to walk through setting up a Webpack + `vue-loader` project from scratch. If you are interested in ready-to-run examples, check out [vue-loader-example](https://github.com/vuejs/vue-loader-example) and [vue-hackernews](https://github.com/vuejs/vue-hackernews). However, if you are not already a Webpack expert, I highly recommend going through the following tutorial to understand how the pieces fit together.
+
+A simple `vue-loader` based project structure looks like this:
+
+``` bash
+.
+├── index.html
+├── main.js
+├── components
+│ ├── App.vue
+│ ├── ComponentA.vue
+│ └── ComponentB.vue
+├── package.json
+└── webpack.config.js
+```
+
+### Installing Dependencies
+
+Before we write any code, we need to install the proper NPM dependencies. Let's run:
+
+``` bash
+# Create a package.json file.
+# fill in the questions as you desire.
+npm init
+
+# Install everything we need
+npm install\
+ webpack webpack-dev-server\
+ vue-loader vue-html-loader css-loader style-loader vue-hot-reload-api\
+ babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015\
+ babel-runtime@5\
+ --save-dev
+```
+
+That's a lot of dependencies, I know! This is mostly because `vue-loader` need to have other webpack loaders as **peer dependencies** rather than nested dependencies so that Webpack can find them.[^(1)]
+
+You may also notice that we are using `babel-runtime` version 5 instead of the latest 6.x - this is [intentional](https://github.com/vuejs/vue-loader/issues/96#issuecomment-162910917).
+
+After proper installation, your `package.json`'s `devDependencies` field should look like this:
+
+``` json
+...
+ "devDependencies": {
+ "babel-core": "^6.3.17",
+ "babel-loader": "^6.2.0",
+ "babel-plugin-transform-runtime": "^6.3.13",
+ "babel-preset-es2015": "^6.3.13",
+ "babel-runtime": "^5.8.34",
+ "css-loader": "^0.23.0",
+ "style-loader": "^0.13.0",
+ "vue-hot-reload-api": "^1.2.2",
+ "vue-html-loader": "^1.0.0",
+ "vue-loader": "^7.2.0",
+ "webpack": "^1.12.9",
+ "webpack-dev-server": "^1.14.0"
+ },
+...
+```
+
+### Configuring Webpack
+
+Here's the most basic Webpack configuration for `vue-loader`:
+
+``` js
+// webpack.config.js
+module.exports = {
+ // entry point of our application
+ entry: './main.js',
+ // where to place the compiled bundle
+ output: {
+ path: __dirname,
+ filename: 'build.js'
+ },
+ module: {
+ // `loaders` is an array of loaders to use.
+ // here we are only configuring vue-loader
+ loaders: [
+ {
+ test: /\.vue$/, // a regex for matching all files that end in `.vue`
+ loader: 'vue' // loader to use for matched files
+ }
+ ]
+ }
+}
+```
+
+With the above configuration, when you write the following in your JavaScript code:
+
+``` js
+var MyComponent = require('./my-component.vue')
+```
+
+Webpack knows it needs to pipe the contents of `./my-component.vue` through `vue-loader`, because the filename matches the regex we provided in the config.
+
+### Creating Other Files
+
+The app entry point, `main.js` typically looks like this:
+
+``` js
+// main.js
+var Vue = require('vue')
+// require a *.vue component
+var App = require('./components/App.vue')
+
+// mount a root Vue instance
+new Vue({
+ el: 'body',
+ components: {
+ // include the required component
+ // in the options
+ app: App
+ }
+})
+```
+
+Inside a `*.vue` component's `
+```
+
+Next, let's create an `index.html` that simply uses the bundled file:
+
+``` html
+
+
+ prop foo: {{ foo }}
- -{{ hello }}
-
- ref sugar count: {{ count }}
-
-
-
-
-
-
diff --git a/example/TypeScript.vue b/example/TypeScript.vue
deleted file mode 100644
index 446e42d5d..000000000
--- a/example/TypeScript.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-
-
-
- {{ Object.keys(props) }}
- From TSssss: {{ a?.toFixed(2) }}
- diff --git a/example/devServer.js b/example/devServer.js deleted file mode 100644 index 04cbb9bf2..000000000 --- a/example/devServer.js +++ /dev/null @@ -1,17 +0,0 @@ -// register proxy sub-paths -if (process.env.WEBPACK4) { - console.log('using webpack 4...') - const Module = require('module') - const resolve = Module._resolveFilename - Module._resolveFilename = (request, ...rest) => { - if (request === 'webpack') { - return resolve('webpack4', ...rest) - } - if (request.startsWith('webpack/')) { - return resolve(request.replace(/^webpack\//, 'webpack4/'), ...rest) - } - return resolve(request, ...rest) - } -} - -require('webpack-dev-server/bin/webpack-dev-server.js') diff --git a/example/docs-loader.js b/example/docs-loader.js deleted file mode 100644 index d6912fdb8..000000000 --- a/example/docs-loader.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = function(source) { - this.callback(null, `export default function (Comp) { - Comp.mounted = () => console.log(${JSON.stringify(source.trim())}) - }`) -} diff --git a/example/index.html b/example/index.html deleted file mode 100644 index a88d12564..000000000 --- a/example/index.html +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/example/logo.png b/example/logo.png deleted file mode 100644 index 1b3356a74..000000000 Binary files a/example/logo.png and /dev/null differ diff --git a/example/main.js b/example/main.js deleted file mode 100644 index 9dbc646cc..000000000 --- a/example/main.js +++ /dev/null @@ -1,9 +0,0 @@ -import App from './App.vue' -import { createApp, createSSRApp } from 'vue' - -const app = __IS_SSR__ ? createSSRApp(App) : createApp(App) -export default app - -if (typeof window !== 'undefined') { - app.mount('#app') -} diff --git a/example/ssr.js b/example/ssr.js deleted file mode 100644 index 34e9b64bf..000000000 --- a/example/ssr.js +++ /dev/null @@ -1,20 +0,0 @@ -// This script is part of `yarn build-example-ssr`. - -const fs = require('fs') -const path = require('path') -const { renderToString } = require('@vue/server-renderer') -const template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8') - -// here out server-side build directly exports an app instance. -// in an actual SSR setup, you'll want to export a `createApp()` function that -// returns a fresh app instance for each request. You probably also want to -// return the router instance so that you can set the app's route state before -// actually rendering it. -const app = require('./dist-ssr/server/main.js').default - -renderToString(app).then((html) => { - fs.writeFileSync( - path.resolve(__dirname, 'dist-ssr/index.html'), - template.replace(/()/, `$1${html}`)
- )
-})
diff --git a/example/types.ts b/example/types.ts
deleted file mode 100644
index 1de15a3db..000000000
--- a/example/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Props {
- msg: string
- lol?: string
-}
diff --git a/example/webpack.config.js b/example/webpack.config.js
deleted file mode 100644
index c240ad021..000000000
--- a/example/webpack.config.js
+++ /dev/null
@@ -1,138 +0,0 @@
-const path = require('path')
-const webpack = require('webpack')
-const VueLoaderPlugin = require('../dist/plugin').default
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-module.exports = (env = {}) => {
- const isProd = env.prod
- const isSSR = env.ssr
-
- /**
- * Some notes regarding config for the server build of an SSR app:
- * 1. target: 'node'
- * 2. output.libraryTarget: 'commonjs' (so the exported app can be required)
- * 3. externals: this is mostly for faster builds.
- * - externalize @vue/* deps via commonjs require()
- * - externalize client side deps that are never used on the server, e.g.
- * ones that are only used in onMounted() to empty modules
- * 4. If using cache-loader or any other forms of cache, make sure the cache
- * key takes client vs. server builds into account!
- */
- const genConfig = (isServerBuild = false) => {
- const minimize = isProd && !isServerBuild && !env.noMinimize
-
- return {
- mode: isProd ? 'production' : 'development',
- entry: path.resolve(__dirname, './main.js'),
- target: isServerBuild ? 'node' : 'web',
- devtool: 'source-map',
- resolve: {
- extensions: ['.js', '.ts'],
- alias: process.env.WEBPACK4
- ? {
- webpack: 'webpack4',
- }
- : {},
- },
- output: {
- path: path.resolve(
- __dirname,
- isSSR ? (isServerBuild ? 'dist-ssr/server' : 'dist-ssr/dist') : 'dist'
- ),
- filename: '[name].js',
- publicPath: '/dist/',
- libraryTarget: isServerBuild ? 'commonjs' : undefined,
- },
- externals: isServerBuild
- ? [
- (ctx, request, cb) => {
- if (/^@vue/.test(request)) {
- return cb(null, 'commonjs ' + request)
- }
- cb()
- },
- ]
- : undefined,
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: {
- // reactivityTransform: true,
- compilerOptions: {
- isCustomElement: (tag) => tag.startsWith('custom-'),
- },
- },
- },
- {
- test: /\.png$/,
- use: [
- {
- loader: 'url-loader',
- options: {
- limit: 8192,
- },
- },
- ],
- },
- {
- test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
- {
- test: /\.ts$/,
- use: [
- {
- loader: process.env.WEBPACK4
- ? require.resolve('ts-loader')
- : require.resolve('ts-loader-v9'),
- options: {
- transpileOnly: true,
- appendTsSuffixTo: [/\.vue$/],
- },
- },
- ],
- },
- // target custom blocks
- {
- resourceQuery: /blockType=docs/,
- loader: require.resolve('./docs-loader'),
- },
- ],
- },
- plugins: [
- new VueLoaderPlugin(),
- new MiniCssExtractPlugin({
- filename: '[name].css',
- }),
- new webpack.DefinePlugin({
- __IS_SSR__: !!isSSR,
- __VUE_OPTIONS_API__: true,
- __VUE_PROD_DEVTOOLS__: false,
- __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
- }),
- ],
- optimization: {
- minimize,
- },
- devServer: {
- hot: true,
- stats: 'minimal',
- contentBase: __dirname,
- overlay: true,
- },
- resolveLoader: {
- alias: {
- 'vue-loader': require.resolve('../'),
- },
- },
- }
- }
-
- if (!isSSR) {
- return genConfig()
- } else {
- return [genConfig(), genConfig(true)]
- }
-}
diff --git a/index.js b/index.js
new file mode 100644
index 000000000..18abae36c
--- /dev/null
+++ b/index.js
@@ -0,0 +1 @@
+module.exports = require('./lib/loader')
diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index fc6d1b325..000000000
--- a/jest.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const isWebpack4 = process.env.WEBPACK4
-
-console.log(
- `running tests with webpack ${isWebpack4 ? '4' : '5'}${
- !isWebpack4 && process.env.INLINE_MATCH_RESOURCE
- ? ' with inline match resource enabled'
- : ''
- }...`
-)
-
-module.exports = {
- preset: 'ts-jest',
- testTimeout: 60000,
- testEnvironment: 'node',
- testPathIgnorePatterns: ['/dist/', '/node_modules/'],
- globals: {
- 'ts-jest': {
- diagnostics: false,
- },
- },
- moduleNameMapper: process.env.WEBPACK4
- ? {
- '^webpack$': 'webpack4',
- '^webpack/(.*)': 'webpack4/$1',
- }
- : undefined,
-}
diff --git a/lib/loader.js b/lib/loader.js
new file mode 100644
index 000000000..5af67c379
--- /dev/null
+++ b/lib/loader.js
@@ -0,0 +1,314 @@
+var loaderUtils = require('loader-utils')
+var assign = require('object-assign')
+var parse = require('./parser')
+var selectorPath = require.resolve('./selector')
+var hash = require('hash-sum')
+var path = require('path')
+
+var defaultLang = {
+ template: 'html',
+ style: 'css',
+ script: 'js'
+}
+
+var rewriterInjectRE = /\b((css|(vue-)?html)(-loader)?(\?[^!]+)?)(?:!|$)/
+var rewriters = {
+ template: require.resolve('./template-rewriter'),
+ style: require.resolve('./style-rewriter')
+}
+
+var templateLoader = require.resolve('./template-loader')
+
+module.exports = function (content) {
+ var defaultLoaders = {
+ html: 'vue-html-loader',
+ css: 'vue-style-loader!css-loader',
+ js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime&comments=false'
+ }
+
+ this.cacheable()
+ var loaderContext = this
+ var query = loaderUtils.getOptions(this) || {}
+ var options = Object.assign({}, this.options.vue, this.vue, query)
+ var filePath = this.resourcePath
+ var fileName = path.basename(filePath)
+ var moduleId = '_v-' + hash(filePath)
+
+ // respect user babel options
+ if (this.options.babel) {
+ defaultLoaders.js = 'babel-loader'
+ }
+
+ // enable css source map if needed
+ if (
+ this.sourceMap &&
+ !this.minimize &&
+ options.cssSourceMap !== false &&
+ process.env.NODE_ENV !== 'production'
+ ) {
+ defaultLoaders.css = 'vue-style-loader!css-loader?sourceMap'
+ }
+
+ // check if there are custom loaders specified via
+ // webpack config, otherwise use defaults
+ var loaders = assign({}, defaultLoaders, options.loaders)
+
+ function getRequire (type, part, index, scoped) {
+ return 'require(' +
+ getRequireString(type, part, index, scoped) +
+ ')\n'
+ }
+
+ function getRequireString (type, part, index, scoped) {
+ return loaderUtils.stringifyRequest(loaderContext,
+ // disable all configuration loaders
+ '!!' +
+ // get loader string for pre-processors
+ getLoaderString(type, part, index, scoped) +
+ // select the corresponding part from the vue file
+ getSelectorString(type, index || 0) +
+ // the url to the actual vue file, including remaining requests
+ loaderUtils.getRemainingRequest(loaderContext)
+ )
+ }
+
+ function getRequireForImport (type, impt, scoped) {
+ return 'require(' +
+ getRequireForImportString(type, impt, scoped) +
+ ')\n'
+ }
+
+ function getRequireForImportString (type, impt, scoped) {
+ return loaderUtils.stringifyRequest(loaderContext,
+ '!!' +
+ getLoaderString(type, impt, -1, scoped) +
+ impt.src
+ )
+ }
+
+ function addCssModulesToLoader (loader, part, index) {
+ if (!part.module) return loader
+ return loader.replace(/((?:^|!)css(?:-loader)?)(\?[^!]*)?/, function (m, $1, $2) {
+ // $1: !css-loader
+ // $2: ?a=b
+ var option = loaderUtils.getOptions($2 || {}) || {}
+ option.modules = true
+ option.importLoaders = true
+ option.localIdentName = '[hash:base64]'
+ if (index !== -1) {
+ // Note:
+ // Class name is generated according to its filename.
+ // Different
diff --git a/test/fixtures/basic.vue b/test/fixtures/basic.vue
index 5dce8c774..5035c8304 100644
--- a/test/fixtures/basic.vue
+++ b/test/fixtures/basic.vue
@@ -3,7 +3,7 @@
-
-
-
-
\ No newline at end of file
diff --git a/test/fixtures/css-modules-simple.vue b/test/fixtures/css-modules-simple.vue
deleted file mode 100644
index f677aa29c..000000000
--- a/test/fixtures/css-modules-simple.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
diff --git a/test/fixtures/css-modules.vue b/test/fixtures/css-modules.vue
index 473f90ce9..8646cb868 100644
--- a/test/fixtures/css-modules.vue
+++ b/test/fixtures/css-modules.vue
@@ -10,11 +10,11 @@
}
-
diff --git a/test/fixtures/custom-import.vue b/test/fixtures/custom-import.vue
deleted file mode 100644
index 34eed79df..000000000
--- a/test/fixtures/custom-import.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
- describe('example', () => {
- it('basic', done => {
- done();
- })
- })
-
-
-
- This is example documentation for a component.
-
-
-
-
-test: Example Text
-
diff --git a/test/fixtures/imported-types-aliased.ts b/test/fixtures/imported-types-aliased.ts
deleted file mode 100644
index 21f0074ca..000000000
--- a/test/fixtures/imported-types-aliased.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface Props {
- id?: number
-}
diff --git a/test/fixtures/imported-types.ts b/test/fixtures/imported-types.ts
deleted file mode 100644
index 7c9d47a62..000000000
--- a/test/fixtures/imported-types.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface Props {
- msg: string
-}
diff --git a/test/fixtures/imported-types.vue b/test/fixtures/imported-types.vue
deleted file mode 100644
index 35f42ed15..000000000
--- a/test/fixtures/imported-types.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
- {{ Object.keys(props) }}
-
diff --git a/test/fixtures/index.html b/test/fixtures/index.html
deleted file mode 100644
index 7e5123ef1..000000000
--- a/test/fixtures/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
- 
-
-
- 
-
diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue
index 2ee0015a1..9c9ec3059 100644
--- a/test/fixtures/scoped-css.vue
+++ b/test/fixtures/scoped-css.vue
@@ -8,75 +8,11 @@
h1 {
color: green;
}
-.anim {
- animation: color 5s infinite, other 5s;
-}
-.anim-2 {
- animation-name: color;
- animation-duration: 5s;
-}
-.anim-3 {
- animation: 5s color infinite, 5s other;
-}
-.anim-multiple {
- animation: color 5s infinite, opacity 2s;
-}
-.anim-multiple-2 {
- animation-name: color, opacity;
- animation-duration: 5s, 2s;
-}
-@keyframes color {
- from {
- color: red;
- }
- to {
- color: green;
- }
-}
-@-webkit-keyframes color {
- from {
- color: red;
- }
- to {
- color: green;
- }
-}
-@keyframes opacity {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-@-webkit-keyframes opacity {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-.foo p ::v-deep(.bar) {
- color: red;
-}
-
+
{{msg}}
- - - - - diff --git a/test/fixtures/custom-language.vue b/test/fixtures/custom-language.vue deleted file mode 100644 index f026cd7f1..000000000 --- a/test/fixtures/custom-language.vue +++ /dev/null @@ -1,31 +0,0 @@ -{{msg}}
- - - - - diff --git a/test/fixtures/custom-query.vue b/test/fixtures/custom-query.vue deleted file mode 100644 index 675d275f4..000000000 --- a/test/fixtures/custom-query.vue +++ /dev/null @@ -1,5 +0,0 @@ - diff --git a/test/fixtures/duplicate-cssm.css b/test/fixtures/duplicate-cssm.css deleted file mode 100644 index 611d25565..000000000 --- a/test/fixtures/duplicate-cssm.css +++ /dev/null @@ -1 +0,0 @@ -@value color: red; diff --git a/test/fixtures/duplicate-cssm.js b/test/fixtures/duplicate-cssm.js deleted file mode 100644 index 20c5905e3..000000000 --- a/test/fixtures/duplicate-cssm.js +++ /dev/null @@ -1,7 +0,0 @@ -import values from './duplicate-cssm.css' -import Comp from './duplicate-cssm.vue' - -export { values } -export default Comp - -window.exports = values diff --git a/test/fixtures/duplicate-cssm.vue b/test/fixtures/duplicate-cssm.vue deleted file mode 100644 index 0d37d0bd0..000000000 --- a/test/fixtures/duplicate-cssm.vue +++ /dev/null @@ -1,11 +0,0 @@ - -hi
- - - diff --git a/test/fixtures/empty-style.vue b/test/fixtures/empty-style.vue deleted file mode 100644 index 12b50f3a7..000000000 --- a/test/fixtures/empty-style.vue +++ /dev/null @@ -1,6 +0,0 @@ - -empty style
- - - diff --git a/test/fixtures/entry.js b/test/fixtures/entry.js deleted file mode 100644 index b5a73e277..000000000 --- a/test/fixtures/entry.js +++ /dev/null @@ -1,17 +0,0 @@ -import { createApp } from 'vue' - -import Component from '~target' -import * as exports from '~target' - -if (typeof window !== 'undefined') { - window.componentModule = Component - window.exports = exports - - const app = createApp(Component) - const container = window.document.createElement('div') - container.id = 'app' - window.instance = app.mount(container) - window.document.body.appendChild(container) -} - -export default Component diff --git a/test/fixtures/extract-css-chunks.vue b/test/fixtures/extract-css-chunks.vue deleted file mode 100644 index 80c5e182f..000000000 --- a/test/fixtures/extract-css-chunks.vue +++ /dev/null @@ -1,21 +0,0 @@ - -
-
-
-
-
-
-
diff --git a/test/fixtures/extract-css.vue b/test/fixtures/extract-css.vue
index 7e2e60be0..75034b07c 100644
--- a/test/fixtures/extract-css.vue
+++ b/test/fixtures/extract-css.vue
@@ -3,12 +3,8 @@ h1
color red
-
-
-
diff --git a/test/fixtures/i18n-entry.js b/test/fixtures/i18n-entry.js
deleted file mode 100644
index 6c1ffb43c..000000000
--- a/test/fixtures/i18n-entry.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
-
-import Component from './i18n.vue'
-import * as exports from './i18n.vue'
-
-const i18n = createI18n({
- locale: 'de',
- silentFallbackWarn: true,
- silentTranslationWarn: true,
-})
-
-if (typeof window !== 'undefined') {
- window.componentModule = Component
- window.exports = exports
-
- const app = createApp(Component).use(i18n)
-
- const container = window.document.createElement('div')
- window.instance = app.mount(container)
-}
-
-export default Component
diff --git a/test/fixtures/i18n.vue b/test/fixtures/i18n.vue
deleted file mode 100644
index 1d9d6bc75..000000000
--- a/test/fixtures/i18n.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
- {{ $t('test') }}
- - -{{ msg }}
+
+
+
diff --git a/test/fixtures/markdown.vue b/test/fixtures/markdown.vue
deleted file mode 100644
index 113f4118d..000000000
--- a/test/fixtures/markdown.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-## {{msg}}
-
-
diff --git a/test/fixtures/media-query.vue b/test/fixtures/media-query.vue
new file mode 100644
index 000000000..9dbe0ee21
--- /dev/null
+++ b/test/fixtures/media-query.vue
@@ -0,0 +1,7 @@
+
diff --git a/test/fixtures/named-exports.vue b/test/fixtures/named-exports.vue
deleted file mode 100644
index d9637d3ef..000000000
--- a/test/fixtures/named-exports.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-Terms
diff --git a/test/fixtures/no-script.vue b/test/fixtures/no-script.vue
deleted file mode 100644
index 8ad98e3d4..000000000
--- a/test/fixtures/no-script.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
- hello
- - - diff --git a/test/fixtures/optional-chaining.vue b/test/fixtures/optional-chaining.vue deleted file mode 100644 index 7e5139ce5..000000000 --- a/test/fixtures/optional-chaining.vue +++ /dev/null @@ -1,16 +0,0 @@ - - - - - diff --git a/test/fixtures/postcss.vue b/test/fixtures/postcss.vue index 5507870e1..a02d550de 100644 --- a/test/fixtures/postcss.vue +++ b/test/fixtures/postcss.vue @@ -1,8 +1,4 @@ - - - - -div - h1 This is the app - comp-a - comp-b + +h1 This is the app +comp-a +comp-b - diff --git a/test/fixtures/process-custom-file/custom-file.svg b/test/fixtures/process-custom-file/custom-file.svg deleted file mode 100644 index 7edfe0d23..000000000 --- a/test/fixtures/process-custom-file/custom-file.svg +++ /dev/null @@ -1,3 +0,0 @@ - -ProcessedCustomFile
-
\ No newline at end of file
diff --git a/test/fixtures/process-custom-file/process-custom-file.vue b/test/fixtures/process-custom-file/process-custom-file.vue
deleted file mode 100644
index 842e42d2d..000000000
--- a/test/fixtures/process-custom-file/process-custom-file.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
\ No newline at end of file
diff --git a/test/fixtures/resolve.vue b/test/fixtures/resolve.vue
index 86d58e7dc..c242e0fac 100644
--- a/test/fixtures/resolve.vue
+++ b/test/fixtures/resolve.vue
@@ -1,14 +1,9 @@
-
-
-
-
-
-
-
+hi
hi
-yo
- -hi
hi
+yo
+ - - diff --git a/test/fixtures/script-import.js b/test/fixtures/script-import.js index ce0b6a81c..8ab20152a 100644 --- a/test/fixtures/script-import.js +++ b/test/fixtures/script-import.js @@ -1,7 +1,7 @@ export default { - data() { + data () { return { - msg: 'Hello from Component A!', + msg: 'Hello from Component A!' } - }, -} + } +}; \ No newline at end of file diff --git a/test/fixtures/script-import.vue b/test/fixtures/script-import.vue index 08f329768..b45d1ec73 100644 --- a/test/fixtures/script-import.vue +++ b/test/fixtures/script-import.vue @@ -1 +1 @@ - + \ No newline at end of file diff --git a/test/fixtures/service.js b/test/fixtures/service.js new file mode 100644 index 000000000..8247bc0cc --- /dev/null +++ b/test/fixtures/service.js @@ -0,0 +1,3 @@ +module.exports = { + msg: 'hi' +} diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue deleted file mode 100644 index 6ae3d7173..000000000 --- a/test/fixtures/style-import-twice-sub.vue +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/test/fixtures/style-import-twice.vue b/test/fixtures/style-import-twice.vue deleted file mode 100644 index 1459b47e0..000000000 --- a/test/fixtures/style-import-twice.vue +++ /dev/null @@ -1,9 +0,0 @@ -hello
-
-
-
-
-
diff --git a/test/fixtures/template-import-pre.vue b/test/fixtures/template-import-pre.vue
deleted file mode 100644
index 461624104..000000000
--- a/test/fixtures/template-import-pre.vue
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/test/fixtures/template-import.html b/test/fixtures/template-import.html
deleted file mode 100644
index c9dc2eef3..000000000
--- a/test/fixtures/template-import.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
diff --git a/test/fixtures/template-import.pug b/test/fixtures/template-import.jade
similarity index 100%
rename from test/fixtures/template-import.pug
rename to test/fixtures/template-import.jade
diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue
index 00de859d2..ce534539b 100644
--- a/test/fixtures/template-import.vue
+++ b/test/fixtures/template-import.vue
@@ -1 +1 @@
-
+
diff --git a/test/fixtures/ts.vue b/test/fixtures/ts.vue
deleted file mode 100644
index 95031a7f2..000000000
--- a/test/fixtures/ts.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
- hello
-{{ msg }}
- - - - - diff --git a/test/fixtures/tsconfig.json b/test/fixtures/tsconfig.json deleted file mode 100644 index 2aee38a15..000000000 --- a/test/fixtures/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "paths": { - "foo": ["./imported-types-aliased.ts"] - } - }, - "include": ["."] -} diff --git a/test/fixtures/unit-test.js b/test/fixtures/unit-test.js deleted file mode 100644 index 70d411983..000000000 --- a/test/fixtures/unit-test.js +++ /dev/null @@ -1,5 +0,0 @@ -describe('example', () => { - it('basic', (done) => { - done() - }) -}) diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js deleted file mode 100644 index c79cd45c0..000000000 --- a/test/mock-loaders/docs.js +++ /dev/null @@ -1,9 +0,0 @@ -module.exports = function (source, map) { - this.callback( - null, - `export default Component => { - Component.__docs = ${JSON.stringify(source)} - }`, - map - ) -} diff --git a/test/mock-loaders/html.js b/test/mock-loaders/html.js deleted file mode 100644 index 182d66e49..000000000 --- a/test/mock-loaders/html.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (content) { - return content.replace(/red/, 'green') -} diff --git a/test/mock-loaders/js.js b/test/mock-loaders/js.js deleted file mode 100644 index a0c719bb1..000000000 --- a/test/mock-loaders/js.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (content) { - return content.replace(/Hello from Component A!/, 'Changed!') -} diff --git a/test/mock-loaders/query.js b/test/mock-loaders/query.js deleted file mode 100644 index 0a2ff8727..000000000 --- a/test/mock-loaders/query.js +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = function (content) { - const query = this.resourceQuery.slice(1) - - if (/change/.test(query)) { - return ` - -Changed!
-
-
- `
- }
-
- return content
-}
diff --git a/test/script.spec.ts b/test/script.spec.ts
deleted file mode 100644
index e20f75d13..000000000
--- a/test/script.spec.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { mockBundleAndRun } from './utils'
-
-test('named exports', async () => {
- const { exports } = await mockBundleAndRun({
- entry: 'named-exports.vue',
- })
- expect(exports.default.name).toBe('named-exports')
- expect(exports.foo()).toBe(1)
-})
-
-test('experimental