Hello
+
+
+
+
+
+
+
+```
diff --git a/docs/guide/extract-css.md b/docs/guide/extract-css.md
new file mode 100644
index 000000000..7557392b7
--- /dev/null
+++ b/docs/guide/extract-css.md
@@ -0,0 +1,75 @@
+# CSS Extraction
+
+::: tip
+Only apply CSS extraction for production so that you get CSS hot reload during development.
+:::
+
+## webpack 4
+
+``` bash
+npm install -D mini-css-extract-plugin
+```
+
+``` js
+// webpack.config.js
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ // ... other rules omitted
+ {
+ test: /\.css$/,
+ use: [
+ process.env.NODE_ENV !== 'production'
+ ? 'vue-style-loader'
+ : MiniCssExtractPlugin.loader,
+ 'css-loader'
+ ]
+ }
+ ]
+ },
+ plugins: [
+ // ... Vue Loader plugin omitted
+ new MiniCssExtractPlugin({
+ filename: 'style.css'
+ })
+ ]
+}
+```
+
+Also see [mini-css-extract-plugin docs](https://github.com/webpack-contrib/mini-css-extract-plugin).
+
+## webpack 3
+
+``` bash
+npm install -D extract-text-webpack-plugin
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ // ... other rules omitted
+ {
+ test: /\.css$/,
+ loader: ExtractTextPlugin.extract({
+ use: 'css-loader',
+ fallback: 'vue-style-loader'
+ })
+ }
+ ]
+ },
+ plugins: [
+ // ... Vue Loader plugin omitted
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+Also see [extract-text-webpack-plugin docs](https://github.com/webpack-contrib/extract-text-webpack-plugin).
diff --git a/docs/guide/functional.md b/docs/guide/functional.md
new file mode 100644
index 000000000..afbdfb7a4
--- /dev/null
+++ b/docs/guide/functional.md
@@ -0,0 +1,21 @@
+# Functional Components
+
+Functional components defined as a Single-File Component in a `*.vue` file also receives proper template compilation, Scoped CSS and hot-reloading support.
+
+To denote a template that should be compiled as a functional component, add the `functional` attribute to the template block. This also allows omitting the `functional` option in the `
+
+
+```
+
+Использование `vue-loader` предоставляет множество интересных возможностей:
+
+- Позволяет использовать разнообразные загрузчики webpack для разных секций компонента Vue, например Sass для `
+```
+
+Атрибут `module` подскажет Vue Loader о необходимости внедрить CSS модуль в компонент в качестве вычисляемого свойства с именем `$style`. Вы можете использовать его в шаблонах для динамического добавления классов:
+
+``` vue
+
+ {{ docs }}
++ Текст должен быть красным +
+ +``` + +Поскольку это вычисляемое свойство, оно будет работать с объектом/массивом в `:class`: + +``` vue + +
+
+
+```
+
+Вы также можете получить доступ в JavaScript:
+
+``` vue
+
+```
+
+Обратитесь к [спецификации CSS-модулей](https://github.com/css-modules/css-modules) для получения информации о [глобальных исключениях](https://github.com/css-modules/css-modules#exceptions) и [композиции](https://github.com/css-modules/css-modules#composition).
+
+## Опциональное использование
+
+Если вы хотите использовать CSS модули только в некоторых компонентах Vue, вы можете использовать правило `oneOf` и проверять наличие строки `module` внутри `resourceQuery`:
+
+``` js
+// webpack.config.js -> module.rules
+{
+ test: /\.css$/,
+ oneOf: [
+ // это соответствует `
+
+
+```
diff --git a/docs/ru/guide/custom-blocks.md b/docs/ru/guide/custom-blocks.md
new file mode 100644
index 000000000..6ac91f677
--- /dev/null
+++ b/docs/ru/guide/custom-blocks.md
@@ -0,0 +1,94 @@
+# Пользовательские блоки
+
+Вы можете определять пользовательские блоки внутри файлов `*.vue`. Загрузчики, применяемые к такому блоку, будут определяться сопоставлением по атрибуту `lang` блока, имени тега блока, и правил в вашей конфигурации webpack.
+
+Если указан атрибут `lang`, пользовательский блок будет обработан как файл с расширением, указанном в `lang`.
+
+Вы также можете использовать `resourceQuery` для определения правила для блока без атрибута `lang`. Например, для сопоставления пользовательского блока `+ Буду ли я красным? +
++ Красный и жирный +
+Hello
+
+
+
+
+
+
+
+```
diff --git a/docs/ru/guide/extract-css.md b/docs/ru/guide/extract-css.md
new file mode 100644
index 000000000..94f61d36d
--- /dev/null
+++ b/docs/ru/guide/extract-css.md
@@ -0,0 +1,75 @@
+# Извлечение CSS в отдельный файл
+
+::: tip СОВЕТ
+Применяйте извлечение CSS в отдельный файл только в production, чтобы использовать горячую перезагрузку CSS на этапе разработки.
+:::
+
+## webpack 4
+
+``` bash
+npm install -D mini-css-extract-plugin
+```
+
+``` js
+// webpack.config.js
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+ // другие настройки...
+ module: {
+ rules: [
+ // ... другие правила опущены
+ {
+ test: /\.css$/,
+ use: [
+ process.env.NODE_ENV !== 'production'
+ ? 'vue-style-loader'
+ : MiniCssExtractPlugin.loader,
+ 'css-loader'
+ ]
+ }
+ ]
+ },
+ plugins: [
+ // ... плагин Vue Loader опущен
+ new MiniCssExtractPlugin({
+ filename: 'style.css'
+ })
+ ]
+}
+```
+
+Также смотрите [документацию mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
+
+## webpack 3
+
+``` bash
+npm install -D extract-text-webpack-plugin
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // другие настройки...
+ module: {
+ rules: [
+ // ... другие правила опущены
+ {
+ test: /\.css$/,
+ loader: ExtractTextPlugin.extract({
+ use: 'css-loader',
+ fallback: 'vue-style-loader'
+ })
+ }
+ ]
+ },
+ plugins: [
+ // ... плагин Vue Loader опущен
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+Также смотрите [документацию extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin).
diff --git a/docs/ru/guide/functional.md b/docs/ru/guide/functional.md
new file mode 100644
index 000000000..421979506
--- /dev/null
+++ b/docs/ru/guide/functional.md
@@ -0,0 +1,21 @@
+# Функциональные компоненты
+
+Функциональные компоненты, объявленные как однофайловые компоненты в файле `*.vue`, также получают правильную поддержку компиляции шаблона, локальный CSS и поддержку горячей перезагрузки.
+
+Чтобы обозначить шаблон, который должен быть скомпилирован как функциональный компонент, добавьте атрибут `functional` в тег шаблона. Это также позволяет опустить опцию `functional` в теге `
+
+
+
+{{ docs }}
++ This should be red +
+ +``` + +因为这是一个计算属性，所以它也支持 `:class` 的对象/数组语法： + +``` vue + +
+
+
+```
+
+你也可以通过 JavaScript 访问到它：
+
+``` vue
+
+```
+
+你可以查阅 [CSS Modules 规范](https://github.com/css-modules/css-modules)了解更多细节，诸如 [global exceptions](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等。
+
+## 可选用法
+
+如果你只想在某些 Vue 组件中使用 CSS Modules，你可以使用 `oneOf` 规则并在 `resourceQuery` 字符串中检查 `module` 字符串：
+
+``` js
+// webpack.config.js -> module.rules
+{
+ test: /\.css$/,
+ oneOf: [
+ // 这里匹配 `
+
+
+```
diff --git a/docs/zh/guide/custom-blocks.md b/docs/zh/guide/custom-blocks.md
new file mode 100644
index 000000000..65c6e0bb5
--- /dev/null
+++ b/docs/zh/guide/custom-blocks.md
@@ -0,0 +1,96 @@
+# 自定义块
+
+在 `.vue` 文件中，你可以自定义语言块。应用于一个自定义块的 loader 是基于这个块的 `lang` 特性、块的标签名以及你的 webpack 配置进行匹配的。
+
+如果指定了一个 `lang` 特性，则这个自定义块将会作为一个带有该 `lang` 扩展名的文件进行匹配。
+
+你也可以使用 `resourceQuery` 来为一个没有 `lang` 的自定义块匹配一条规则。例如为了匹配自定义块 `+ Am I red? +
++ Red and bold +
+Hello
+
+
+
+
+
+
+
+```
diff --git a/docs/zh/guide/extract-css.md b/docs/zh/guide/extract-css.md
new file mode 100644
index 000000000..5b1313d80
--- /dev/null
+++ b/docs/zh/guide/extract-css.md
@@ -0,0 +1,75 @@
+# CSS 提取
+
+:::tip 提示
+请只在生产环境下使用 CSS 提取，这将便于你在开发环境下进行热重载。
+:::
+
+## webpack 4
+
+``` bash
+npm install -D mini-css-extract-plugin
+```
+
+``` js
+// webpack.config.js
+var MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = {
+ // 其它选项...
+ module: {
+ rules: [
+ // ... 忽略其它规则
+ {
+ test: /\.css$/,
+ use: [
+ process.env.NODE_ENV !== 'production'
+ ? 'vue-style-loader'
+ : MiniCssExtractPlugin.loader,
+ 'css-loader'
+ ]
+ }
+ ]
+ },
+ plugins: [
+ // ... 忽略 vue-loader 插件
+ new MiniCssExtractPlugin({
+ filename: 'style.css'
+ })
+ ]
+}
+```
+
+你还可以查阅 [mini-css-extract-plugin 文档](https://github.com/webpack-contrib/mini-css-extract-plugin)。
+
+## webpack 3
+
+``` bash
+npm install -D extract-text-webpack-plugin
+```
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // 其它选项...
+ module: {
+ rules: [
+ // ...其它规则忽略
+ {
+ test: /\.css$/,
+ loader: ExtractTextPlugin.extract({
+ use: 'css-loader',
+ fallback: 'vue-style-loader'
+ })
+ }
+ ]
+ },
+ plugins: [
+ // ...vue-loader 插件忽略
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+你也可以查阅 [extract-text-webpack-plugin 文档](https://github.com/webpack-contrib/extract-text-webpack-plugin)。
diff --git a/docs/zh/guide/functional.md b/docs/zh/guide/functional.md
new file mode 100644
index 000000000..6599c3085
--- /dev/null
+++ b/docs/zh/guide/functional.md
@@ -0,0 +1,21 @@
+# 函数式组件
+
+在一个 `*.vue` 文件中以单文件形式定义的函数式组件，现在对于模板编译、scoped CSS 和热重载也有了良好的支持。
+
+要声明一个应该编译为函数式组件的模板，请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `
+
+
+
+{{ docs }}
+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/debugger.js b/example/debugger.js new file mode 100644 index 000000000..9c3f05c67 --- /dev/null +++ b/example/debugger.js @@ -0,0 +1,7 @@ +module.exports = function (...args) { + this.callback(null, ...args) +} + +module.exports.pitch = function (request) { + // debug +} 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 index a88d12564..9da805c65 100644 --- a/example/index.html +++ b/example/index.html @@ -1,3 +1,2 @@ - - + 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 index 9dbc646cc..232b901c2 100644 --- a/example/main.js +++ b/example/main.js @@ -1,9 +1,7 @@ -import App from './App.vue' -import { createApp, createSSRApp } from 'vue' +import Vue from 'vue' +import Foo from './source.vue' -const app = __IS_SSR__ ? createSSRApp(App) : createApp(App) -export default app - -if (typeof window !== 'undefined') { - app.mount('#app') -} +new Vue({ + el: '#app', + render: h => h(Foo) +}) diff --git a/example/source.vue b/example/source.vue new file mode 100644 index 000000000..20f70308c --- /dev/null +++ b/example/source.vue @@ -0,0 +1,26 @@ + +div(ok) + h1(:class="$style.red") hello + + + + + + +)/, `$1${html}`)
- )
-})
diff --git a/example/test.pug b/example/test.pug
new file mode 100644
index 000000000..f4ed36f6c
--- /dev/null
+++ b/example/test.pug
@@ -0,0 +1,2 @@
+div(ok)
+ h1(:class="$style.red") hello
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
index c240ad021..deb7e27be 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -1,138 +1,97 @@
const path = require('path')
-const webpack = require('webpack')
-const VueLoaderPlugin = require('../dist/plugin').default
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const VueLoaderPlugin = require('../lib/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',
- }
- : {},
+module.exports = {
+ mode: 'development',
+ entry: path.resolve(__dirname, './main.js'),
+ output: {
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'bundle.js',
+ publicPath: '/dist/'
+ },
+ devServer: {
+ stats: "minimal",
+ contentBase: __dirname
+ },
+ module: {
+ rules: [
+ // { loader: require.resolve('./debugger') },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
},
- output: {
- path: path.resolve(
- __dirname,
- isSSR ? (isServerBuild ? 'dist-ssr/server' : 'dist-ssr/dist') : 'dist'
- ),
- filename: '[name].js',
- publicPath: '/dist/',
- libraryTarget: isServerBuild ? 'commonjs' : undefined,
+ // example to apply loader to a custom block without lang="xxx"
+ // this rule applies to blocks
+ {
+ resourceQuery: /blockType=foo/,
+ loader: 'babel-loader'
},
- externals: isServerBuild
- ? [
- (ctx, request, cb) => {
- if (/^@vue/.test(request)) {
- return cb(null, 'commonjs ' + request)
- }
- cb()
- },
- ]
- : undefined,
- module: {
- rules: [
+ // example configuring preprocessor for
+ {
+ test: /\.pug$/,
+ oneOf: [
+ // this applies to in Vue components
{
- test: /\.vue$/,
- loader: 'vue-loader',
- options: {
- // reactivityTransform: true,
- compilerOptions: {
- isCustomElement: (tag) => tag.startsWith('custom-'),
- },
- },
+ resourceQuery: /^\?vue/,
+ use: ['pug-plain-loader']
},
+ // this applies to pug imports inside JavaScript
{
- test: /\.png$/,
- use: [
- {
- loader: 'url-loader',
- options: {
- limit: 8192,
- },
- },
- ],
- },
- {
- test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader'],
- },
+ use: ['raw-loader', 'pug-plain-loader']
+ }
+ ]
+ },
+ // example configuring CSS Modules
+ {
+ test: /\.css$/,
+ oneOf: [
+ // this applies to
+
+
-
-
diff --git a/test/fixtures/functional-root.vue b/test/fixtures/functional-root.vue
new file mode 100644
index 000000000..e0612e0f1
--- /dev/null
+++ b/test/fixtures/functional-root.vue
@@ -0,0 +1,18 @@
+
+
-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/markdown.vue b/test/fixtures/markdown.vue
index 113f4118d..6eccf3c72 100644
--- a/test/fixtures/markdown.vue
+++ b/test/fixtures/markdown.vue
@@ -1,11 +1 @@
## {{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/multiple-roots-template.vue b/test/fixtures/multiple-roots-template.vue
new file mode 100644
index 000000000..a0a7ec719
--- /dev/null
+++ b/test/fixtures/multiple-roots-template.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/test/fixtures/multiple-rules-1.vue b/test/fixtures/multiple-rules-1.vue
new file mode 100644
index 000000000..858b3eb1e
--- /dev/null
+++ b/test/fixtures/multiple-rules-1.vue
@@ -0,0 +1,9 @@
+
+
+
+ hello
+
+
+
+
+
diff --git a/test/fixtures/functional-style.vue b/test/fixtures/functional-style.vue
new file mode 100644
index 000000000..70f575f43
--- /dev/null
+++ b/test/fixtures/functional-style.vue
@@ -0,0 +1,12 @@
+
+
+
diff --git a/test/fixtures/functional.vue b/test/fixtures/functional.vue
new file mode 100644
index 000000000..67a44b636
--- /dev/null
+++ b/test/fixtures/functional.vue
@@ -0,0 +1,22 @@
+
+ Second slot
+ {{ scope.msg }}
+
+
+
+
+
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 @@
-
- {{ props.msg }}
+Some text
+ Not exist
+
+ {{ $t('test') }}
- - -Hello World
+
+
+
diff --git a/test/fixtures/multiple-rules-2.vue b/test/fixtures/multiple-rules-2.vue
new file mode 100644
index 000000000..97d226939
--- /dev/null
+++ b/test/fixtures/multiple-rules-2.vue
@@ -0,0 +1,9 @@
+
+ Hello World
+
+
+
diff --git a/test/fixtures/multiple-rules.js b/test/fixtures/multiple-rules.js
new file mode 100644
index 000000000..fa741e723
--- /dev/null
+++ b/test/fixtures/multiple-rules.js
@@ -0,0 +1,4 @@
+import Rule1 from './multiple-rules-1.vue'
+import Rule2 from './multiple-rules-2.vue'
+
+window.rules = [Rule1, Rule2]
diff --git a/test/fixtures/named-exports.vue b/test/fixtures/named-exports.vue
index d9637d3ef..fe873668a 100644
--- a/test/fixtures/named-exports.vue
+++ b/test/fixtures/named-exports.vue
@@ -2,8 +2,8 @@
export default {
name: 'named-exports'
}
+
export function foo () {
return 1
}
-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..0d4dd195b 100644 --- a/test/fixtures/postcss.vue +++ b/test/fixtures/postcss.vue @@ -1,7 +1,3 @@ - - diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue index 2ee0015a1..09c01667d 100644 --- a/test/fixtures/scoped-css.vue +++ b/test/fixtures/scoped-css.vue @@ -25,58 +25,41 @@ h1 { animation-name: color, opacity; animation-duration: 5s, 2s; } + @keyframes color { - from { - color: red; - } - to { - color: green; - } + from { color: red; } + to { color: green; } } @-webkit-keyframes color { - from { - color: red; - } - to { - color: green; - } + from { color: red; } + to { color: green; } } @keyframes opacity { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { opacity: 0; } + to { opacity: 1; } } @-webkit-keyframes opacity { - from { - opacity: 0; - } - to { - opacity: 1; - } + from { opacity: 0; } + to { opacity: 1; } } -.foo p ::v-deep(.bar) { +.foo p >>> .bar { color: red; } -
-
-
+hi
hi
-yo
- -
+
+
diff --git a/test/fixtures/script-import.js b/test/fixtures/script-import.js
index ce0b6a81c..03622bda2 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!'
}
- },
+ }
}
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/ssr-scoped-style.js b/test/fixtures/ssr-scoped-style.js
new file mode 100644
index 000000000..90704991d
--- /dev/null
+++ b/test/fixtures/ssr-scoped-style.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import App from './scoped-css.vue'
+
+export default () => new Vue({
+ render: h => h(App)
+})
diff --git a/test/fixtures/ssr-style.js b/test/fixtures/ssr-style.js
new file mode 100644
index 000000000..10055bfa2
--- /dev/null
+++ b/test/fixtures/ssr-style.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import App from './ssr-style.vue'
+
+export default () => new Vue({
+ render: h => h(App)
+})
diff --git a/test/fixtures/ssr-style.vue b/test/fixtures/ssr-style.vue
new file mode 100644
index 000000000..55d15f674
--- /dev/null
+++ b/test/fixtures/ssr-style.vue
@@ -0,0 +1,25 @@
+
+ hi
hi
+yo
+ +
+
+
+
+
+
+
+
+
diff --git a/test/fixtures/style-import.vue b/test/fixtures/style-import.vue
index 3979d6457..54b83bf89 100644
--- a/test/fixtures/style-import.vue
+++ b/test/fixtures/style-import.vue
@@ -1,6 +1,2 @@
-
-
diff --git a/test/fixtures/style-v-bind.vue b/test/fixtures/style-v-bind.vue
deleted file mode 100644
index 143bdb326..000000000
--- a/test/fixtures/style-v-bind.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-
- Hello
+hello
-
-
-
-
-
diff --git a/test/fixtures/supports-query.vue b/test/fixtures/supports-query.vue
new file mode 100644
index 000000000..88db49709
--- /dev/null
+++ b/test/fixtures/supports-query.vue
@@ -0,0 +1,7 @@
+
diff --git a/test/fixtures/template-comment.vue b/test/fixtures/template-comment.vue
new file mode 100644
index 000000000..a72b02fa4
--- /dev/null
+++ b/test/fixtures/template-comment.vue
@@ -0,0 +1,16 @@
+
+
+
+
+
+
diff --git a/test/fixtures/template-pre.js b/test/fixtures/template-pre.js
new file mode 100644
index 000000000..d75dad8d2
--- /dev/null
+++ b/test/fixtures/template-pre.js
@@ -0,0 +1,9 @@
+import Comp1 from './template-pre.vue'
+import Comp2 from './template-import-pre.vue'
+import html from './template-import.pug'
+
+window.exports = {
+ Comp1,
+ Comp2,
+ html
+}
diff --git a/test/fixtures/template-pre.vue b/test/fixtures/template-pre.vue
new file mode 100644
index 000000000..caa2610f1
--- /dev/null
+++ b/test/fixtures/template-pre.vue
@@ -0,0 +1,4 @@
+
+div
+ h1 hello
+
diff --git a/test/fixtures/transform.vue b/test/fixtures/transform.vue
new file mode 100644
index 000000000..f43b47c69
--- /dev/null
+++ b/test/fixtures/transform.vue
@@ -0,0 +1,24 @@
+
+{{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
index 70d411983..bb7e55289 100644
--- a/test/fixtures/unit-test.js
+++ b/test/fixtures/unit-test.js
@@ -1,5 +1,5 @@
describe('example', () => {
- it('basic', (done) => {
+ it('basic', done => {
done()
})
})
diff --git a/test/mock-loaders/blog.js b/test/mock-loaders/blog.js
new file mode 100644
index 000000000..d441233af
--- /dev/null
+++ b/test/mock-loaders/blog.js
@@ -0,0 +1,8 @@
+function normalize (code) {
+ return code.split(/\r?\n/).map(function (line) { return line }).join('')
+}
+
+module.exports = function (source) {
+ var code = "module.exports = function (Component) { Component.options.__blog = '" + source + "' }"
+ return normalize(code)
+}
diff --git a/test/mock-loaders/css.js b/test/mock-loaders/css.js
new file mode 100644
index 000000000..fe5d6d1e2
--- /dev/null
+++ b/test/mock-loaders/css.js
@@ -0,0 +1,3 @@
+module.exports = function (content) {
+ return content.replace(/#f00/, '#00f')
+}
diff --git a/test/mock-loaders/docs.js b/test/mock-loaders/docs.js
index c79cd45c0..6535363b9 100644
--- a/test/mock-loaders/docs.js
+++ b/test/mock-loaders/docs.js
@@ -1,9 +1,7 @@
module.exports = function (source, map) {
- this.callback(
- null,
+ this.callback(null,
`export default Component => {
- Component.__docs = ${JSON.stringify(source)}
+ Component.options.__docs = ${JSON.stringify(source)}
}`,
- map
- )
+ map)
}
diff --git a/test/mock-loaders/i18n.js b/test/mock-loaders/i18n.js
new file mode 100644
index 000000000..718312e14
--- /dev/null
+++ b/test/mock-loaders/i18n.js
@@ -0,0 +1,6 @@
+module.exports = function (source) {
+ var value = typeof source === 'string' ? JSON.parse(source) : source
+ var jsonString = JSON.stringify(value).replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')
+ var code = 'module.exports = function (Component) { Component.options.__i18n = ' + JSON.stringify(jsonString) + ' }'
+ this.callback(null, code)
+}
diff --git a/test/mock-loaders/identity.js b/test/mock-loaders/identity.js
new file mode 100644
index 000000000..1590b7f40
--- /dev/null
+++ b/test/mock-loaders/identity.js
@@ -0,0 +1,3 @@
+module.exports = function (source, map) {
+ this.callback(null, source, map)
+}
diff --git a/test/mock-loaders/yaml.js b/test/mock-loaders/yaml.js
new file mode 100644
index 000000000..a27de0b5a
--- /dev/null
+++ b/test/mock-loaders/yaml.js
@@ -0,0 +1,7 @@
+var yaml = require('js-yaml')
+
+module.exports = function (source) {
+ this.cacheable && this.cacheable()
+ var res = yaml.safeLoad(source)
+ return JSON.stringify(res)
+}
diff --git a/test/script.spec.js b/test/script.spec.js
new file mode 100644
index 000000000..180585913
--- /dev/null
+++ b/test/script.spec.js
@@ -0,0 +1,30 @@
+const {
+ mockRender,
+ mockBundleAndRun
+} = require('./utils')
+
+test('allow exporting extended constructor', done => {
+ mockBundleAndRun({
+ entry: 'extend.vue'
+ }, ({ window, module }) => {
+ // extend.vue should export Vue constructor
+ const Component = module
+ const vnode = mockRender(Component.options, {
+ msg: 'success'
+ })
+ expect(vnode.tag).toBe('div')
+ expect(vnode.children[0].text).toBe('success')
+ expect(new Component().msg === 'success')
+ done()
+ })
+})
+
+test('named exports', done => {
+ mockBundleAndRun({
+ entry: 'named-exports.vue'
+ }, ({ exports }) => {
+ expect(exports.default.name).toBe('named-exports')
+ expect(exports.foo()).toBe(1)
+ done()
+ })
+})
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
+
+
+
+
+
+
+
+
+