- This should be red -
- -``` - -Since it's a computed property, it also works with the object/array syntax of `:class`: - -``` html - -
-
-
-```
-
-And you can also access it from JavaScript:
-
-``` html
-
-```
-
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
-
-### Custom Inject Name
-
-You can have more than one `
-
-
-```
-
-### Configuring `css-loader` Query
-
-CSS Modules are processed via [css-loader](https://github.com/webpack/css-loader). With `
-
-
- - Am I red? -
-- Red and bold -
-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.
diff --git a/docs/en/options.md b/docs/en/options.md
deleted file mode 100644
index 74d6610cb..000000000
--- a/docs/en/options.md
+++ /dev/null
@@ -1,182 +0,0 @@
-# Options Reference
-
-## Usage Difference Between Webpack 1 & 2
-
-For Webpack 2: pass the options directly to the loader rule.
-
-``` js
-module.exports = {
- // ...
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: {
- // vue-loader options
- }
- }
- ]
- }
-}
-```
-
-For Webpack 1.x: add a root `vue` block in your Webpack config.
-
-``` js
-module.exports = {
- // ...
- vue: {
- // vue-loader options
- }
-}
-```
-
-### loaders
-
-- type: `{ [lang: string]: string }`
-
- An object specifying Webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:
-
- - ``: `html`
- - `
-
-
-
-- 이것은 빨간색이야 -
- -``` - -이는 계산된 속성이기 때문에 `:class`의 오브젝트/배열 문법에도 작동합니다. - -``` html - -
-
-
-```
-
-또한 JavaScript에서도 접근할 수 있습니다.
-
-``` html
-
-```
-
-[전역 예외사항](https://github.com/css-modules/css-modules#exceptions)과 [구성](https://github.com/css-modules/css-modules#composition) 같은 자세한 정보는 [CSS 모듈 스펙](https://github.com/css-modules/css-modules)을 참고하세요.
-
-### 사용자 정의 이름 주입
-
-하나의 `*.vue` 컴포넌트 내에 하나 이상의 `
-
-
-```
-
-### `css-loader` 쿼리 설정
-
-CSS 모듈은 [css-loader](https://github.com/webpack/css-loader)를 통해 처리됩니다. `
-
-
- - 나는 빨간색이야? -
-- 나는 빨간색이면서 볼드야 -
-안녕
-
-```
-
-다음과 같이 변환됩니다.
-
-``` html
-
-
-
- 안녕
-
-```
-
-#### 참고사항
-
-1. 범위가 지정된 스타일과 범위가 지정되지 않은 스타일은 동일한 컴포넌트에 포함 할 수 있습니다.
-
- ``` html
-
-
-
- ```
-
-2. 하위 컴포넌트의 루트 노드는 상위 범위 CSS와 하위 범위 CSS의 영향을 받습니다.
-
-3. Partial은 범위가 지정된 스타일의 영향을 받지 않습니다.
-
-4. **범위가 지정된 스타일은 클래스의 필요성을 제거하는 것이 아닙니다**. 브라우저가 다양한 CSS 셀렉터를 렌더링하는 방식 때문에 `p { color: red }`는 범위(즉 속성 선택자와 결합될 때)가 지정될 때 몇 배는 더 느려집니다. `.example { color: red }`와 같이 클래스 또는 id를 대신 사용한다면 성능 이슈를 해결할 수 있습니다. [여기 플레이그라운드](http://stevesouders.com/efws/css-selectors/csscreate.php)에서 차이점을 테스트 할 수 있습니다.
-
-5. **하위 컴포넌트의 선택자 사용을 조심하세요!** 선택자 `.a .b`가 있는 CSS 규칙의 경우 `.a`와 일치하는 요소에 하위 컴포넌트가 포함되어 있을 경우 해당 하위 컴포넌트의 모든 `.b`가 CSS 규칙에 적용됩니다.
diff --git a/docs/kr/options.md b/docs/kr/options.md
deleted file mode 100644
index ba2219835..000000000
--- a/docs/kr/options.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# 옵션 레퍼런스
-
-## Webpack 1 & 2 사용 방법의 차이점
-
-Webpack 1.x의 경우 Webpack 설정에 루트 `vue` 블럭을 추가합니다.
-
-``` js
-module.exports = {
- // ...
- vue: {
- // vue-loader 옵션
- }
-}
-```
-
-Webpack 2 (^2.1.0-beta.25)는 다음과 같습니다.
-
-``` js
-module.exports = {
- // ...
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue',
- options: {
- // vue-loader 옵션
- }
- }
- ]
- }
-}
-```
-
-### 로더
-
-- 타입: `Object`
-
- `*.vue` 파일의 언어 블럭에 사용할 Webpack 로더를 지정하는 객체입니다. 이 키는 특별히 지정된 경우 language block에 대한 `lang` 속성에 해당합니다. 각 타입에 대한 기본적인 `lang`은 다음과 같습니다.
-
- - ``: `html`
- - `
-
-
-```
-
-`vue-loader`는 파일을 파싱하고 각 언어 블럭을 추출한 다음 필요한 경우 다른 로더를 통해 파이프를 구성하고 `module.exports`가 Vue.js 옵션 객체인 CommonJS 모듈로 다시 합쳐줍니다.
-
-`vue-loader`는 언어 블럭에 `lang` 속성을 지정하여 CSS 전처리기 혹은 HTML 컴파일 언어를 사용할 수 있습니다. 예를 들어, 다음과 같이 컴포넌트에 SASS를 사용할 수 있습니다.
-
-``` html
-
-```
-
-자세한 내용은 [전처리기 사용하기](../configurations/pre-processors.md)에서 확인할 수 있습니다.
-
-### 언어 블록
-
-#### ``
-
-- 기본 언어: `html`.
-
-- 각 `*.vue` 파일은 하나의 `` 블럭을 포함 할 수 있습니다.
-
-- 내용은 문자열로 출력되어 컴파일된 Vue 컴포넌트의 `template` 옵션에 사용됩니다.
-
-#### `
-```
-
-`src`로 가져오기가 CommonJS `require()` 호출과 동일한 경로 확인 규칙을 따르기 때문에 주의해야 합니다. 즉, `./`로 시작해야하는 상대 경로를 의미하며 설치된 NPM 패키지에서 직접 리소스를 가져올 수 있습니다.
-
-``` html
-
-
diff --git a/example/Button.vue b/example/Button.vue
new file mode 100644
index 000000000..67ae8696c
--- /dev/null
+++ b/example/Button.vue
@@ -0,0 +1,32 @@
+
+ prop foo: {{ foo }}
+ +{{ hello }}
+
+ ref sugar count: {{ count }}
+
+
+
+
+
+
diff --git a/example/TypeScript.vue b/example/TypeScript.vue
new file mode 100644
index 000000000..446e42d5d
--- /dev/null
+++ b/example/TypeScript.vue
@@ -0,0 +1,14 @@
+
+
+
+ {{ Object.keys(props) }}
+ From TSssss: {{ a?.toFixed(2) }}
+ diff --git a/example/devServer.js b/example/devServer.js new file mode 100644 index 000000000..04cbb9bf2 --- /dev/null +++ b/example/devServer.js @@ -0,0 +1,17 @@ +// 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 new file mode 100644 index 000000000..d6912fdb8 --- /dev/null +++ b/example/docs-loader.js @@ -0,0 +1,5 @@ +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 new file mode 100644 index 000000000..a88d12564 --- /dev/null +++ b/example/index.html @@ -0,0 +1,3 @@ + + + diff --git a/example/logo.png b/example/logo.png new file mode 100644 index 000000000..1b3356a74 Binary files /dev/null and b/example/logo.png differ diff --git a/example/main.js b/example/main.js new file mode 100644 index 000000000..9dbc646cc --- /dev/null +++ b/example/main.js @@ -0,0 +1,9 @@ +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 new file mode 100644 index 000000000..34e9b64bf --- /dev/null +++ b/example/ssr.js @@ -0,0 +1,20 @@ +// 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
new file mode 100644
index 000000000..1de15a3db
--- /dev/null
+++ b/example/types.ts
@@ -0,0 +1,4 @@
+export interface Props {
+ msg: string
+ lol?: string
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
new file mode 100644
index 000000000..5da3d969e
--- /dev/null
+++ b/example/webpack.config.js
@@ -0,0 +1,134 @@
+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,
+ },
+ },
+ {
+ 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,
+ }),
+ ],
+ 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
deleted file mode 100644
index 18abae36c..000000000
--- a/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./lib/loader')
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 000000000..fc6d1b325
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,27 @@
+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/component-normalizer.js b/lib/component-normalizer.js
deleted file mode 100644
index 99eea7894..000000000
--- a/lib/component-normalizer.js
+++ /dev/null
@@ -1,47 +0,0 @@
-module.exports = function normalizeComponent (
- rawScriptExports,
- compiledTemplate,
- scopeId,
- cssModules
-) {
- var esModule
- var scriptExports = rawScriptExports = rawScriptExports || {}
-
- // ES6 modules interop
- var type = typeof rawScriptExports.default
- if (type === 'object' || type === 'function') {
- esModule = rawScriptExports
- scriptExports = rawScriptExports.default
- }
-
- // Vue.extend constructor export interop
- var options = typeof scriptExports === 'function'
- ? scriptExports.options
- : scriptExports
-
- // render functions
- if (compiledTemplate) {
- options.render = compiledTemplate.render
- options.staticRenderFns = compiledTemplate.staticRenderFns
- }
-
- // scopedId
- if (scopeId) {
- options._scopeId = scopeId
- }
-
- // inject cssModules
- if (cssModules) {
- var computed = options.computed || (options.computed = {})
- Object.keys(cssModules).forEach(function (key) {
- var module = cssModules[key]
- computed[key] = function () { return module }
- })
- }
-
- return {
- esModule: esModule,
- exports: scriptExports,
- options: options
- }
-}
diff --git a/lib/gen-id.js b/lib/gen-id.js
deleted file mode 100644
index 191929324..000000000
--- a/lib/gen-id.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// utility for generating a uid for each component file
-// used in scoped CSS rewriting
-var path = require('path')
-var hash = require('hash-sum')
-var cache = Object.create(null)
-var sepRE = new RegExp(path.sep.replace('\\', '\\\\'), 'g')
-
-module.exports = function genId (file, context) {
- var contextPath = context.split(path.sep)
- var rootId = contextPath[contextPath.length - 1]
- file = rootId + '/' + path.relative(context, file).replace(sepRE, '/')
- return cache[file] || (cache[file] = hash(file))
-}
diff --git a/lib/loader.js b/lib/loader.js
deleted file mode 100644
index dbb404a63..000000000
--- a/lib/loader.js
+++ /dev/null
@@ -1,453 +0,0 @@
-var path = require('path')
-var parse = require('./parser')
-var genId = require('./gen-id')
-var normalize = require('./normalize')
-var loaderUtils = require('loader-utils')
-var querystring = require('querystring')
-
-// internal lib loaders
-var selectorPath = normalize.lib('selector')
-var styleRewriterPath = normalize.lib('style-rewriter')
-var templateLoaderPath = normalize.lib('template-loader')
-var templateCompilerPath = normalize.lib('template-compiler')
-var componentNormalizerPath = normalize.lib('component-normalizer')
-
-// dep loaders
-var styleLoaderPath = normalize.dep('vue-style-loader')
-var hotReloadAPIPath = normalize.dep('vue-hot-reload-api')
-
-var hasBabel = false
-try {
- hasBabel = !!require('babel-loader')
-} catch (e) {}
-
-var hasBuble = false
-try {
- hasBuble = !!require('buble-loader')
-} catch (e) {}
-
-var rewriterInjectRE = /\b(css(?:-loader)?(?:\?[^!]+)?)(?:!|$)/
-
-var defaultLang = {
- template: 'html',
- styles: 'css',
- script: 'js'
-}
-
-// When extracting parts from the source vue file, we want to apply the
-// loaders chained before vue-loader, but exclude some loaders that simply
-// produces side effects such as linting. This is a hard-coded list and
-// hopefully eslint-loader is the only one.
-var excludedPreLoadersRE = /eslint-loader/
-
-function getRawRequest (context) {
- return loaderUtils.getRemainingRequest({
- resource: context.resource,
- loaderIndex: context.loaderIndex,
- loaders: context.loaders.filter(loader => !excludedPreLoadersRE.test(loader.path))
- })
-}
-
-module.exports = function (content) {
- this.cacheable()
- var isServer = this.options.target === 'node'
- var isProduction = this.minimize || process.env.NODE_ENV === 'production'
-
- var loaderContext = this
- var query = loaderUtils.parseQuery(this.query)
- var rawRequest = getRawRequest(this)
- var options = this.options.__vueOptions__ = Object.assign({}, this.options.vue, this.vue, query)
-
- var filePath = this.resourcePath
- var fileName = path.basename(filePath)
- var moduleId = 'data-v-' + genId(filePath, this._compiler.context)
- var styleRewriter = styleRewriterPath + '?id=' + moduleId
-
- var cssLoaderOptions = ''
- if (!isProduction && this.sourceMap && options.cssSourceMap !== false) {
- cssLoaderOptions += '?sourceMap'
- }
- if (isProduction) {
- cssLoaderOptions += (cssLoaderOptions ? '&' : '?') + 'minimize'
- }
-
- var bubleOptions = hasBuble && options.buble
- ? '?' + JSON.stringify(options.buble)
- : ''
-
- var defaultLoaders = {
- html: templateCompilerPath + '?id=' + moduleId,
- css: styleLoaderPath + '!' + 'css-loader' + cssLoaderOptions,
- js: hasBuble ? ('buble-loader' + bubleOptions) : hasBabel ? 'babel-loader' : ''
- }
-
- // check if there are custom loaders specified via
- // webpack config, otherwise use defaults
- var loaders = Object.assign({}, defaultLoaders, options.loaders)
- var preLoaders = options.preLoaders || {}
- var postLoaders = options.postLoaders || {}
-
- function getRequire (type, part, index, scoped) {
- return 'require(' +
- getRequireString(type, part, index, scoped) +
- ')'
- }
-
- 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
- rawRequest
- )
- }
-
- function getRequireForImport (type, impt, scoped) {
- return 'require(' +
- getRequireForImportString(type, impt, scoped) +
- ')'
- }
-
- 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
- var option = options.cssModules || {}
- var DEFAULT_OPTIONS = {
- modules: true,
- importLoaders: true
- }
- var OPTIONS = {
- localIdentName: '[hash:base64]'
- }
- return loader.replace(/((?:^|!)css(?:-loader)?)(\?[^!]*)?/, function (m, $1, $2) {
- // $1: !css-loader
- // $2: ?a=b
- var query = loaderUtils.parseQuery($2)
- Object.assign(query, OPTIONS, option, DEFAULT_OPTIONS)
- if (index !== -1) {
- // Note:
- // Class name is generated according to its filename.
- // Different
+
+
+
+
+
+
\ No newline at end of file
diff --git a/test/fixtures/css-modules-simple.vue b/test/fixtures/css-modules-simple.vue
new file mode 100644
index 000000000..f677aa29c
--- /dev/null
+++ b/test/fixtures/css-modules-simple.vue
@@ -0,0 +1,9 @@
+
+
+
diff --git a/test/fixtures/css-modules.vue b/test/fixtures/css-modules.vue
index 8646cb868..473f90ce9 100644
--- a/test/fixtures/css-modules.vue
+++ b/test/fixtures/css-modules.vue
@@ -10,11 +10,11 @@
}
-
diff --git a/test/fixtures/custom-language.vue b/test/fixtures/custom-language.vue
index 3684d135b..f026cd7f1 100644
--- a/test/fixtures/custom-language.vue
+++ b/test/fixtures/custom-language.vue
@@ -1,6 +1,6 @@
-
- describe('example', function () {
- it('basic', function (done) {
+
+ describe('example', () => {
+ it('basic', done => {
done();
})
})
diff --git a/test/fixtures/custom-options.vue b/test/fixtures/custom-options.vue
deleted file mode 100644
index c8249bbd6..000000000
--- a/test/fixtures/custom-options.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
- describe('example', function () {
- it('basic', function (done) {
- done();
- })
- })
-
diff --git a/test/fixtures/custom-query.vue b/test/fixtures/custom-query.vue
new file mode 100644
index 000000000..675d275f4
--- /dev/null
+++ b/test/fixtures/custom-query.vue
@@ -0,0 +1,5 @@
+
diff --git a/test/fixtures/duplicate-cssm.css b/test/fixtures/duplicate-cssm.css
new file mode 100644
index 000000000..611d25565
--- /dev/null
+++ b/test/fixtures/duplicate-cssm.css
@@ -0,0 +1 @@
+@value color: red;
diff --git a/test/fixtures/duplicate-cssm.js b/test/fixtures/duplicate-cssm.js
new file mode 100644
index 000000000..20c5905e3
--- /dev/null
+++ b/test/fixtures/duplicate-cssm.js
@@ -0,0 +1,7 @@
+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
new file mode 100644
index 000000000..0d37d0bd0
--- /dev/null
+++ b/test/fixtures/duplicate-cssm.vue
@@ -0,0 +1,11 @@
+
+
+test: Example Text
+
diff --git a/test/fixtures/imported-types-aliased.ts b/test/fixtures/imported-types-aliased.ts
new file mode 100644
index 000000000..21f0074ca
--- /dev/null
+++ b/test/fixtures/imported-types-aliased.ts
@@ -0,0 +1,3 @@
+export interface Props {
+ id?: number
+}
diff --git a/test/fixtures/imported-types.ts b/test/fixtures/imported-types.ts
new file mode 100644
index 000000000..7c9d47a62
--- /dev/null
+++ b/test/fixtures/imported-types.ts
@@ -0,0 +1,3 @@
+export interface Props {
+ msg: string
+}
diff --git a/test/fixtures/imported-types.vue b/test/fixtures/imported-types.vue
new file mode 100644
index 000000000..35f42ed15
--- /dev/null
+++ b/test/fixtures/imported-types.vue
@@ -0,0 +1,10 @@
+
+
+
+ {{ Object.keys(props) }}
+
diff --git a/test/fixtures/index.html b/test/fixtures/index.html
new file mode 100644
index 000000000..7e5123ef1
--- /dev/null
+++ b/test/fixtures/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
hi
+ + + diff --git a/test/fixtures/empty-style.vue b/test/fixtures/empty-style.vue new file mode 100644 index 000000000..12b50f3a7 --- /dev/null +++ b/test/fixtures/empty-style.vue @@ -0,0 +1,6 @@ + +empty style
+ + + diff --git a/test/fixtures/entry.js b/test/fixtures/entry.js new file mode 100644 index 000000000..b5a73e277 --- /dev/null +++ b/test/fixtures/entry.js @@ -0,0 +1,17 @@ +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/es2015.vue b/test/fixtures/es2015.vue deleted file mode 100644 index 5b2cb1ba5..000000000 --- a/test/fixtures/es2015.vue +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/test/fixtures/extend.vue b/test/fixtures/extend.vue deleted file mode 100644 index ca11dfe65..000000000 --- a/test/fixtures/extend.vue +++ /dev/null @@ -1,12 +0,0 @@ - -{{ msg }}
-
-
-
diff --git a/test/fixtures/extract-css-chunks.vue b/test/fixtures/extract-css-chunks.vue
new file mode 100644
index 000000000..80c5e182f
--- /dev/null
+++ b/test/fixtures/extract-css-chunks.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
diff --git a/test/fixtures/extract-css.vue b/test/fixtures/extract-css.vue
index 75034b07c..7e2e60be0 100644
--- a/test/fixtures/extract-css.vue
+++ b/test/fixtures/extract-css.vue
@@ -3,8 +3,12 @@ h1
color red
-
+
+
diff --git a/test/fixtures/i18n-entry.js b/test/fixtures/i18n-entry.js
new file mode 100644
index 000000000..6c1ffb43c
--- /dev/null
+++ b/test/fixtures/i18n-entry.js
@@ -0,0 +1,23 @@
+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
new file mode 100644
index 000000000..1d9d6bc75
--- /dev/null
+++ b/test/fixtures/i18n.vue
@@ -0,0 +1,7 @@
+
+ {{ $t('test') }}
+ + +{{ msg }}
-
-
-
diff --git a/test/fixtures/markdown.vue b/test/fixtures/markdown.vue
index ea398f3d6..113f4118d 100644
--- a/test/fixtures/markdown.vue
+++ b/test/fixtures/markdown.vue
@@ -1 +1,11 @@
-## {{msg}}
+## {{msg}}
+
+
diff --git a/test/fixtures/media-query.vue b/test/fixtures/media-query.vue
deleted file mode 100644
index 9dbe0ee21..000000000
--- a/test/fixtures/media-query.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/test/fixtures/named-exports.vue b/test/fixtures/named-exports.vue
new file mode 100644
index 000000000..d9637d3ef
--- /dev/null
+++ b/test/fixtures/named-exports.vue
@@ -0,0 +1,9 @@
+
+Terms
diff --git a/test/fixtures/no-script.vue b/test/fixtures/no-script.vue
new file mode 100644
index 000000000..8ad98e3d4
--- /dev/null
+++ b/test/fixtures/no-script.vue
@@ -0,0 +1,9 @@
+
+ hello
+ + + diff --git a/test/fixtures/optional-chaining.vue b/test/fixtures/optional-chaining.vue new file mode 100644 index 000000000..7e5139ce5 --- /dev/null +++ b/test/fixtures/optional-chaining.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/test/fixtures/postcss.vue b/test/fixtures/postcss.vue index a02d550de..5507870e1 100644 --- a/test/fixtures/postcss.vue +++ b/test/fixtures/postcss.vue @@ -1,4 +1,8 @@ - diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue index ce28b06bd..2ee0015a1 100644 --- a/test/fixtures/scoped-css.vue +++ b/test/fixtures/scoped-css.vue @@ -8,13 +8,75 @@ 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; +} -
-
-
+ hi
hi
-yo
- -
+
+
+
+
diff --git a/test/fixtures/script-import.js b/test/fixtures/script-import.js
index 8ab20152a..ce0b6a81c 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 b45d1ec73..08f329768 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
deleted file mode 100644
index 8247bc0cc..000000000
--- a/test/fixtures/service.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- msg: 'hi'
-}
diff --git a/test/fixtures/ssr-style.js b/test/fixtures/ssr-style.js
deleted file mode 100644
index 35f445ce3..000000000
--- a/test/fixtures/ssr-style.js
+++ /dev/null
@@ -1,4 +0,0 @@
-var Vue = require('vue')
-var App = require('./ssr-style.vue')
-
-module.exports = new Vue(App)
diff --git a/test/fixtures/ssr-style.vue b/test/fixtures/ssr-style.vue
deleted file mode 100644
index 059d4bf6d..000000000
--- a/test/fixtures/ssr-style.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
- hi
hi
+yo
+ +
-
-
-
-
-
-
-
-
diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue
new file mode 100644
index 000000000..6ae3d7173
--- /dev/null
+++ b/test/fixtures/style-import-twice-sub.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/test/fixtures/style-import-twice.vue b/test/fixtures/style-import-twice.vue
new file mode 100644
index 000000000..1459b47e0
--- /dev/null
+++ b/test/fixtures/style-import-twice.vue
@@ -0,0 +1,9 @@
+Hello
-
+
diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue
index 461624104..00de859d2 100644
--- a/test/fixtures/template-import.vue
+++ b/test/fixtures/template-import.vue
@@ -1 +1 @@
-
+
diff --git a/test/fixtures/transform.vue b/test/fixtures/transform.vue
deleted file mode 100644
index 33442c644..000000000
--- a/test/fixtures/transform.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-
-hello
+
- 
-
-
-
-
-
diff --git a/test/fixtures/ts.vue b/test/fixtures/ts.vue
new file mode 100644
index 000000000..95031a7f2
--- /dev/null
+++ b/test/fixtures/ts.vue
@@ -0,0 +1,11 @@
+
+
-
-{{ msg }}
+ + + + + diff --git a/test/fixtures/tsconfig.json b/test/fixtures/tsconfig.json new file mode 100644 index 000000000..2aee38a15 --- /dev/null +++ b/test/fixtures/tsconfig.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "paths": { + "foo": ["./imported-types-aliased.ts"] + } + }, + "include": ["."] +} diff --git a/test/fixtures/unit-test.js b/test/fixtures/unit-test.js index 422357802..70d411983 100644 --- a/test/fixtures/unit-test.js +++ b/test/fixtures/unit-test.js @@ -1,5 +1,5 @@ - describe('example', function () { - it('basic', function (done) { - done(); - }) +describe('example', () => { + it('basic', (done) => { + done() }) +}) diff --git a/test/mock-loaders/css.js b/test/mock-loaders/css.js deleted file mode 100644 index fe5d6d1e2..000000000 --- a/test/mock-loaders/css.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = function (content) { - return content.replace(/#f00/, '#00f') -} diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js new file mode 100644 index 000000000..c79cd45c0 --- /dev/null +++ b/test/mock-loaders/docs.js @@ -0,0 +1,9 @@ +module.exports = function (source, map) { + this.callback( + null, + `export default Component => { + Component.__docs = ${JSON.stringify(source)} + }`, + map + ) +} diff --git a/test/mock-loaders/query.js b/test/mock-loaders/query.js new file mode 100644 index 000000000..0a2ff8727 --- /dev/null +++ b/test/mock-loaders/query.js @@ -0,0 +1,22 @@ +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
new file mode 100644
index 000000000..e20f75d13
--- /dev/null
+++ b/test/script.spec.ts
@@ -0,0 +1,39 @@
+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