+
+
+
+
+```
diff --git a/docs/en/configurations/extract-css.md b/docs/en/configurations/extract-css.md
new file mode 100644
index 000000000..3f5400e95
--- /dev/null
+++ b/docs/en/configurations/extract-css.md
@@ -0,0 +1,68 @@
+# Extracting CSS into a Single File
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## The Easy Way
+
+> requires vue-loader@^12.0.0 and webpack@^2.0.0
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+The above will automatically handle extraction for `
+```
+
+Under the hood, the text content inside the `
+```
+
+However, note this makes your Vue component webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.**
diff --git a/docs/en/features/css-modules.md b/docs/en/features/css-modules.md
new file mode 100644
index 000000000..52311d6ad
--- /dev/null
+++ b/docs/en/features/css-modules.md
@@ -0,0 +1,106 @@
+# CSS Modules
+
+> requires ^9.8.0
+
+[CSS Modules](https://github.com/css-modules/css-modules) is a popular system for modularizing and composing CSS. `vue-loader` provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.
+
+### Usage
+
+Just add the `module` attribute to your `
+```
+
+This will turn on CSS Modules mode for `css-loader`, and the resulting class identifier object will be injected into the component as a computed property with the name `$style`. You can use it in your templates with a dynamic class binding:
+
+``` html
+
+ {{ docs }}
++ 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
+
+```
+
+## Tips
+
+### Mixing Local and Global Styles
+
+You can include both scoped and non-scoped styles in the same component:
+
+``` html
+
+
+
+```
+
+### Child Component Root Elements
+
+With `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.
+
+### Deep Selectors
+
+If you want a selector in `scoped` styles to be "deep", i.e. affecting child components, you can use the `>>>` combinator:
+
+``` html
+
+```
+
+The above will be compiled into:
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+
+Some pre-processors, such as Sass, may not be able to parse `>>>` properly. In those cases you can use the `/deep/` combinator instead - it's an alias for `>>>` and works exactly the same.
+
+### Dynamically Generated Content
+
+DOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.
+
+### Also Keep in Mind
+
+- **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](https://stevesouders.com/efws/css-selectors/csscreate.php) where you can test the differences yourself.
+
+- **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
new file mode 100644
index 000000000..76b74d8bb
--- /dev/null
+++ b/docs/en/options.md
@@ -0,0 +1,336 @@
+# Options Reference
+
+## Where to Place the Options
+
+``` js
+// webpack.config.js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // `vue-loader` options
+ }
+ }
+ ]
+ }
+}
+```
+
+### loaders
+
+- type: `{ [lang: string]: string | Object | Array }`
+
+ 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`
+ - `
+
+
+
+
+
+
+
+
+```
diff --git a/docs/ja/configurations/extract-css.md b/docs/ja/configurations/extract-css.md
new file mode 100644
index 000000000..e1a4a381e
--- /dev/null
+++ b/docs/ja/configurations/extract-css.md
@@ -0,0 +1,68 @@
+# CSS を単一のファイルに抽出する
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## 簡単な方法
+
+> vue-loader@^12.0.0 と webpack@^2.0.0 必須
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // 他のオプション...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+上記は、`*.vue` ファイル内部の `
+```
+
+ `
+```
+
+ただこれにより Vue コンポーネントが webpack 固有となり Browserify および [vueify](https://github.com/vuejs/vueify) と互換性がなくなります。 **Vue コンポーネントを再利用可能なサードパーティコンポーネントとして提供する場合は、この構文を使用しないでください。**
diff --git a/docs/ja/features/css-modules.md b/docs/ja/features/css-modules.md
new file mode 100644
index 000000000..9e46e8709
--- /dev/null
+++ b/docs/ja/features/css-modules.md
@@ -0,0 +1,106 @@
+# CSS モジュール
+
+> バージョン ^9.8.0 が必要
+
+[CSS モジュール](https://github.com/css-modules/css-modules) は CSS をモジュール化して構成するための一般的なシステムです。`vue-loader` はシミュレートされたスコープ付き CSS の代わりに CSS モジュールの一流の統合を提供します。
+
+### 使い方
+
+`module` 属性を `
+```
+
+`css-loader` の CSS モジュールモードを有効にし、その結果クラス識別子オブジェクトは `$style` という名前の算出プロパティとしてコンポーネントに注入されます。ダイナミッククラスバインディングを利用してテンプレートで使用可能になります。
+
+``` html
+
+ {{ docs }}
++ This should be red +
+ +``` + +これは算出プロパティなので、`:class` の オブジェクト / 配列構文でも動作します: + +``` html + +
+
+
+```
+
+そして JavaScript からもアクセス可能です:
+
+``` html
+
+```
+
+[CSS Modules spec](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-loader` クエリの設定
+
+CSS モジュールは [css-loader](https://github.com/webpack/css-loader) によって処理されます。`
+
+
+ + Am I red? +
++ Red and bold +
+hi
+
+```
+
+以下の通りになります:
+
+``` html
+
+
+
+ hi
+
+```
+
+## 秘訣
+
+### ローカルスタイルとグローバルスタイルの混在
+
+同じコンポーネントでスコープ付き、そして非スコープ付きスタイル両方を含むことができます:
+
+``` html
+
+
+
+```
+
+### 子コンポーネントのルート要素
+
+`scoped` によって、親コンポーネントのスタイルは子コンポーネントに漏れません。ただし、子コンポーネントのルートノードは親スコープの CSS と子スコープの CSS と両方によって影響を受けます。これは、設計上、親はレイアウトが目的で子のルート要素をスタイルすることができます。
+
+### ディープセレクタ
+
+`scoped` スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、`>>>` コンビネータを使用することができます:
+
+``` html
+
+```
+
+上記は以下にコンパイルされます:
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+
+SASS のようないくつかのプリプロセッサは、`>>>` を適切に解析できないかもしれません。そのようなケースでは `/deep/` コンビネータを代わりに使用することができます。それは、`>>>` のエイリアスで、全く同じような動作します。
+
+### 動的に生成されるコンテンツ
+
+`v-html` によって作成された DOM コンテンツは、スコープ付きスタイルにの影響を受けませんが、ディープセレクタを使用してスタイルを設定することはできます。
+
+### 留意すること
+
+- **スコープ付きスタイルでは class は必要です。** ブラウザが様々な CSS セレクタを描画するため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](https://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
+- **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。
diff --git a/docs/ja/options.md b/docs/ja/options.md
new file mode 100644
index 000000000..7f823d362
--- /dev/null
+++ b/docs/ja/options.md
@@ -0,0 +1,336 @@
+# オプションリファレンス
+
+## オプションの配置場所
+
+``` js
+// webpack.config.js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // `vue-loader` オプション
+ }
+ }
+ ]
+ }
+}
+```
+
+### loaders
+
+- 型: `{ [lang: string]: string | Object | Array }`
+
+ `* .vue` ファイル内の言語ブロックに使用されるデフォルトの loader を上書きする webpack loader を指定するオブジェクト。キーは指定されている場合、言語ブロックの `lang` 属性に対応します。各タイプのデフォルトの `lang` は次のとおりです:
+
+ - ``: `html`
+ - `
+
+
+
+
+
+
+
+
+```
diff --git a/docs/kr/configurations/extract-css.md b/docs/kr/configurations/extract-css.md
new file mode 100644
index 000000000..1e72ad0ca
--- /dev/null
+++ b/docs/kr/configurations/extract-css.md
@@ -0,0 +1,104 @@
+# CSS 단일 파일로 추출하기
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## 쉬운 방법
+
+> vue-loader@^12.0.0와 webpack@^2.0.0 필요
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+위 코드는 `*.vue` 파일 내부에서 `
+```
+
+내부적으로, `
+```
+
+그러나 이것은 Vue 컴포넌트가 webpack에 한정되어 있고 Browserify 및 [vueify](https://github.com/vuejs/vueify)와 호환되지 않습니다. **Vue 컴포넌트를 재사용 가능한 써드파티로 제공하려면 이 구문을 사용하지 마십시오.**
diff --git a/docs/kr/features/css-modules.md b/docs/kr/features/css-modules.md
new file mode 100644
index 000000000..c9a1874db
--- /dev/null
+++ b/docs/kr/features/css-modules.md
@@ -0,0 +1,117 @@
+# CSS 모듈
+
+> 9.8.0 이상 버전을 요구합니다
+
+[CSS 모듈](https://github.com/css-modules/css-modules)은 CSS을 모듈화하고 구성하는데 널리 사용되는 시스템입니다. `vue-loader`는 시뮬레이트된 범위 CSS의 대안으로 CSS 모듈과 함께 1급 클래스로의 통합을 제공합니다.
+
+### 사용법
+
+`
+```
+
+이렇게하면 `css-loader`에 대한 CSS 모듈 모드가 켜지고 결과적으로 클래스 식별자 오브젝트는 `$style` 이름의 계산된 속성으로 컴포넌트에 주입됩니다. 동적 클래스 바인딩을 사용하여 템플릿에서 이를 사용할 수 있습니다.
+
+``` html
+
+ {{ docs }}
++ 이것은 빨간색이야 +
+ +``` + +이는 계산된 속성이기 때문에 `: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
new file mode 100644
index 000000000..98da0484b
--- /dev/null
+++ b/docs/kr/options.md
@@ -0,0 +1,249 @@
+# 옵션 레퍼런스
+
+## webpack 1 & 2 사용 방법의 차이점
+
+webpack 2 : 직접 loader 규칙에 전달합니다
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // `vue-loader` 옵션
+ }
+ }
+ ]
+ }
+}
+```
+
+webpack 1.x의 경우 webpack 설정에 루트 `vue` 블럭을 추가합니다.
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // `vue-loader` 옵션
+ }
+}
+```
+
+### 로더
+
+- 타입: `{ [lang: string]: string }`
+
+ `*.vue` 파일의 언어 블럭에 사용할 webpack 로더를 지정하는 객체입니다. 이 키는 특별히 지정된 경우 language block에 대한 `lang` 속성에 해당합니다. 각 타입에 대한 기본적인 `lang`은 다음과 같습니다.
+
+ - ``: `html`
+ - `
+
+
+
+
+
+
+
+
+ ```
diff --git a/docs/pt_BR/configurations/extract-css.md b/docs/pt_BR/configurations/extract-css.md
new file mode 100644
index 000000000..39af0031d
--- /dev/null
+++ b/docs/pt_BR/configurations/extract-css.md
@@ -0,0 +1,70 @@
+# Extraindo CSS em um único arquivo
+
+Exemplo de configuração para extrair todo CSS processado de todos componentes Vue em um único arquivo CSS:
+
+### webpack 2.x
+
+```bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+```js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // outras opções...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ loaders: {
+ css: ExtractTextPlugin.extract({
+ loader: 'css-loader',
+ fallbackLoader: 'vue-style-loader' // <- isto é uma dependência de vue-loader, então não é necessário instalar explicitamente se estiver usando npm3
+ })
+ }
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+### webpack 1.x
+
+```bash
+npm install extract-text-webpack-plugin
+```
+
+```js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // outras opções...
+ module: {
+ loaders: [
+ {
+ test: /\.vue$/,
+ loader: 'vue'
+ },
+ ]
+ },
+ vue: {
+ loaders: {
+ css: ExtractTextPlugin.extract("css"),
+ // você também pode incluir
+```
+
+Por baixo do capô, o conteúdo de texto dentro da tag `
+```
+
+Contudo, observe que isso faz com que seu componente Vue se torne especifico para webpack e não compatível com Browserify e [vueify](https://github.com/vuejs/vueify). **Se você pretende enviar seu componente Vue como um componente reutilizável para terceiros, evite usar está sintaxe**.
diff --git a/docs/pt_BR/features/css-modules.md b/docs/pt_BR/features/css-modules.md
new file mode 100644
index 000000000..60a4cee63
--- /dev/null
+++ b/docs/pt_BR/features/css-modules.md
@@ -0,0 +1,117 @@
+# Módulos CSS
+
+> Requer versão ^9.8.0
+
+[Módulos CSS](https://github.com/css-modules/css-modules) é um sistema popula para modularização e composição de CSS. `vue-loader` fornece integração de alto nível com módulos CSS como uma alternativa para simular escopo CSS.
+
+### Uso
+
+Basta adicionar o atributo `module` ao seu `
+```
+
+Isto ativará o modo Módulo CSS para `css-loader`, e a classe resultante que identifica o objeto será injetada dentro do componente como uma propriedade computada com o nome `$style`. Você pode usá-lo em seus templates com uma ligação de classe dinâmica.
+
+```html
+
+ {{ docs }}
++ Isto deve ser vermelho +
+ +``` + +Uma vez que a propriedade é computada, ela também funciona com a sintaxe object/array de `:class`: + +```html + +
+
+
+```
+
+E você também pode acessá-la com JavaScript:
+
+```html
+
+```
+
+Consulte a [especificação do Módulo CSS](https://github.com/css-modules/css-modules) para detalhes como modo [exceções globais](https://github.com/css-modules/css-modules#exceptions) e [composição](https://github.com/css-modules/css-modules#composition).
+
+### Nome de Injeção Personalizado
+
+Você pode ter mais de uma tag `
+
+
+```
+
+### Configurando consulta `css-loader`
+
+Módulos CSS são processados via [css-loader](https://github.com/webpack/css-loader). Com `
+
+
+ + Eu sou vermelho? +
++ Vermelho e negrito +
+hi
+
+```
+
+Para o seguinte:
+
+```html
+
+
+
+ hi
+
+```
+
+#### Observações
+
+1. Você pode incluir ambos os estilos com escopo e sem escopo no mesmo componente:
+
+ ```html
+
+
+
+ ```
+
+2. Um nó raiz do componente filho irá ser afetado por ambos os CSS com escopo dos parentes e o CSS com escopo dos filhos.
+
+3. Templates parciais não são afetados por estilo com escopo.
+
+4. **Os estilos com escopo não eliminam a necessidade de classes**. Devido a forma como navegadores processam vários seletores CSS, `p { color: red }` irá ser muitas vezes mais lento quando com escopo \(exemplo: quando combinado com um seletor de atributo\). Se você usa classes ou ids ao invés, como em `.example { color: red }`, então você elimina praticamente esse desempenho atingido. [Aqui está um playground](http://stevesouders.com/efws/css-selectors/csscreate.php) onde você pode testar as diferenças você mesmo.
+
+5. **Tenha cuidado com seletores descendentes em componentes recursivos!** Para uma regra CSS com o seletor `.a .b`, se o elemento que coincide com `.a` contém um componente filho recursivo, então todos os `.b` nesse componente filho serão correspondidos pela regra.
+
+6. Se você precisa de seletores aninhados em estilos `scoped`, você terá que usar o operador `>>>` para CSS e `/deep/` para `scss`:
+
+``` html
+
+
+
+ ```
diff --git a/docs/pt_BR/options.md b/docs/pt_BR/options.md
new file mode 100644
index 000000000..9c04e7334
--- /dev/null
+++ b/docs/pt_BR/options.md
@@ -0,0 +1,188 @@
+# Referência de Opções
+
+## Diferença do uso entre webpack 1 & 2
+
+Para webpack 2: passe as opções diretamente para a regra do carregador.
+
+```js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // opções de vue-loader
+ }
+ }
+ ]
+ }
+}
+```
+
+Para webpack 1.x: Adicione um bloco \`vue\` na raiz de suas configurações webpack:
+
+```js
+module.exports = {
+ // ...
+ vue: {
+ // opções de vue-loader
+ }
+}
+```
+
+### loaders
+
+- tipo: `{ [lang: string]: string }`
+
+ Um objeto especificando carregadores de webpack para substituir carregadores padrão usados para blocos de linguagem dentro de arquivos `*.vue`. A chave corresponde ao atributo `lang` para o bloco de linguagem, se especificado. O padrão `lang` para cada tipo é:
+
+ - ``: `html`
+ - `
+
+
+
+{{ msg }}
+
+
+
+```
+
+Veja como importá-lo com simulações:
+
+> Nota: inject-loader@3.x está atualmente instável.
+
+```bash
+npm install inject-loader@^2.0.0 --save-dev
+```
+
+```js
+// exemplo.spec.js
+const ExemploInjecao = require('!!vue-loader?inject!./exemplo.vue')
+```
+
+Observe que ele requer uma sequência de caracteres - nós estamos usando algumas [requisições de carregador webpack](https://webpack.github.io/docs/loaders.html) em linha aqui. Uma explicação rápida:
+
+- `!!` no início significa "desative todos os carregadores da configuração global";
+- `vue-loader?inject!` significa "use `vue-loader`, e passe o `?inject` na consulta". Isso informa ao `vue-loader` para compilar o componente no modo injeção de dependência.
+
+O retorno de `ExemploInjecao` é uma função de fábrica que pode ser chamada para criar instâncias do módulo `exemplo.vue`.
+
+```js
+const ExemploComMocks = ExemploInjecao({
+ // simulação de serviço
+ '../servico': {
+ msg: 'Olá de uma simulação de serviço!'
+ }
+})
+```
+
+Finalmente, podemos testar o componente como de costume:
+
+```js
+it('Deve renderizar', () => {
+ const vm = new Vue({
+ template: '
+
+
+
+
+```
diff --git a/docs/ru/configurations/extract-css.md b/docs/ru/configurations/extract-css.md
new file mode 100644
index 000000000..2eb503159
--- /dev/null
+++ b/docs/ru/configurations/extract-css.md
@@ -0,0 +1,68 @@
+# Извлечение CSS в отдельный файл
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## Простой путь
+
+> требуется vue-loader@^12.0.0 и webpack@^2.0.0
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // другие настройки...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+Указанный выше пример будет автоматически обрабатывать извлечение `
+```
+
+В недрах, текстовое содержимое тега `
+```
+
+Обратите внимание, это сделает ваш компонент Vue зависимым от webpack и несовместимым с Browserify и [vueify](https://github.com/vuejs/vueify). **Если вы планируете распространять ваш компонент Vue, избегайте использования этого синтаксиса.**
diff --git a/docs/ru/features/css-modules.md b/docs/ru/features/css-modules.md
new file mode 100644
index 000000000..fda1c1b37
--- /dev/null
+++ b/docs/ru/features/css-modules.md
@@ -0,0 +1,106 @@
+# CSS модули
+
+> требуется версия 9.8.0 или выше
+
+[CSS модули](https://github.com/css-modules/css-modules) — это популярная система для модульности и компоновки CSS. `vue-loader` предоставляет первоклассную интеграцию с CSS модулями как возможную альтернативу эмулируемого scoped CSS.
+
+### Использование
+
+Просто добавьте атрибут `module` к тегу `
+```
+
+Это включит режим CSS-модулей в `css-loader`, и полученный индентификатор объекта класса будет внедрен в компонент как вычисляемое свойство с именем `$style`. Вы можете использовать его в своих шаблонах для динамического добавления классов:
+
+``` html
+
+ {{ docs }}
++ Этот текст будет красным +
+ +``` + +Поскольку это вычисляемое свойство, оно также будет работать с объектом/массивом в `:class`: + +``` html + +
+
+
+```
+
+Вы также можете получить доступ в JavaScript:
+
+``` html
+
+```
+
+Обратитесь к [спецификации 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-loader`
+
+CSS-модули обрабатываются с помощью [css-loader](https://github.com/webpack/css-loader). При использовании `
+
+
+ + Буду ли я красным? +
++ Красный и жирный +
+hi
+
+```
+
+В что-то подобное:
+
+``` html
+
+
+
+ hi
+
+```
+
+#### Советы
+
+### Использование локальных и глобальных стилей
+
+Вы можете сочетать использование в компоненте локальных и глобальных стилей одновременно:
+
+``` html
+
+
+
+```
+
+### Корневой узел дочернего компонента
+
+С помощью `scoped`, стили родительского компонента не будут влиять на содержимое дочерних компонентов. Тем не менее, корневой узел дочернего компонента будет зависеть как от scoped CSS из родительского элемента, так и от scoped CSS дочернего. Это предусмотрено специально, чтобы родительский элемент мог стилизовать корневой элемент дочернего компонента например для целей макета.
+
+### Глубокие селекторы
+
+Если вы хотите, чтобы селектор в `scoped` стилях был "глубоким", т.е. влиял на дочерние компоненты, вы можете использовать комбинатор `>>>`:
+
+``` html
+
+```
+
+Указанное выше будет скомпилировано в:
+
+``` css
+.a[data-v-f3f3eg9] .b { /* ... */ }
+```
+
+Некоторые пре-процессоры, такие как Sass, не могут правильно обработать `>>>`. В таких случаях вы можете использовать комбинатор `/deep/` — это псевдоним для `>>>` работающий точно также.
+
+### Динамически генерируемый контент
+
+DOM-содержимое, создаваемое с помощью `v-html` не попадает под область действия scoped-стилей, но вы всё равно можете его стилизовать воспользовавшись deep-селекторами.
+
+### О чём следует помнить
+
+- **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](https://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно.
+
+- **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу.
diff --git a/docs/ru/options.md b/docs/ru/options.md
new file mode 100644
index 000000000..673062aa4
--- /dev/null
+++ b/docs/ru/options.md
@@ -0,0 +1,314 @@
+# Перечень настроек
+
+## Где указывать настройки
+
+``` js
+// webpack.config.js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // настройки vue-loader
+ }
+ }
+ ]
+ }
+}
+```
+
+### loaders
+
+- Тип: `{ [lang: string]: string | Object | Array }`
+
+ Объект определяющий какие загрузчики webpack переопределят стандартные загрузчики, используемые для обработки секций `*.vue` файлов. Ключ соответствует атрибуту `lang` у секции файла, если таковой был указан. Значения `lang` по умолчанию:
+
+ - ``: `html`
+ - `
+
+
+
+
+
+
+
+
+```
diff --git a/docs/zh-cn/configurations/extract-css.md b/docs/zh-cn/configurations/extract-css.md
new file mode 100644
index 000000000..b0f176771
--- /dev/null
+++ b/docs/zh-cn/configurations/extract-css.md
@@ -0,0 +1,68 @@
+# 提取 CSS 到单个文件
+
+``` bash
+npm install extract-text-webpack-plugin --save-dev
+```
+
+## 简单的方法
+
+> requires vue-loader@^12.0.0 and webpack@^2.0.0
+
+``` js
+// webpack.config.js
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ // other options...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
+ ]
+ },
+ plugins: [
+ new ExtractTextPlugin("style.css")
+ ]
+}
+```
+
+上述内容将自动处理 `*.vue` 文件内的 `
+```
+
+在内部，`
+```
+
+但是，这使你的 Vue 组件只适用于 webpack，不能与 Browserify 和 [vueify](https://github.com/vuejs/vueify) 一同使用。**如果你打算将你的 Vue 组件作为可重复使用的第三方组件，请避免使用这个语法。**
diff --git a/docs/zh-cn/features/css-modules.md b/docs/zh-cn/features/css-modules.md
new file mode 100644
index 000000000..d925004ae
--- /dev/null
+++ b/docs/zh-cn/features/css-modules.md
@@ -0,0 +1,106 @@
+# CSS Modules
+
+> 需要 ^9.8.0
+
+[CSS Modules](https://github.com/css-modules/css-modules)是一个用于模块化和组合 CSS 的流行系统。`vue-loader` 提供了与 CSS 模块的一流集成，可以作为模拟 CSS 作用域的替代方案。
+
+### 使用
+
+在你的 `
+```
+
+这将为 `css-loader` 打开 CSS Modules 模式，生成的 CSS 对象将为组件注入一个名叫 `$style` 的计算属性，你可以在你的模块中使用动态 class 绑定：
+
+``` html
+
+ {{ docs }}
++ This should be red +
+ +``` + +由于它是一个计算属性，它也适用于 `:class` 的 object/array 语法： + +``` html + +
+
+
+```
+
+你也可以在 JavaScript 访问它：
+
+``` html
+
+```
+
+请参考 [CSS Modules 规范](https://github.com/css-modules/css-modules)了解更多诸如 [global exception](https://github.com/css-modules/css-modules#exceptions) 和 [composition](https://github.com/css-modules/css-modules#composition) 等详细信息。
+
+### 自定义注入名称
+
+在 `.vue` 中你可以定义不止一个 `
+
+
+```
+
+### 配置 `css-loader` Query
+
+CSS Modules 处理是通过 [css-loader](https://github.com/webpack/css-loader)。默认 query 如下：
+
+``` js
+{
+ modules: true,
+ importLoaders: 1,
+ localIdentName: '[hash:base64]'
+}
+```
+
+你可以使用 `vue-loader` 的 `cssModules` 选项去为 `css-loader` 添加 query 配置：
+
+``` js
+module: {
+ rules: [
+ {
+ test: '\.vue$',
+ loader: 'vue-loader',
+ options: {
+ cssModules: {
+ localIdentName: '[path][name]---[local]---[hash:base64:5]',
+ camelCase: true
+ }
+ }
+ }
+ ]
+}
+```
diff --git a/docs/zh-cn/features/es2015.md b/docs/zh-cn/features/es2015.md
new file mode 100644
index 000000000..9dee83231
--- /dev/null
+++ b/docs/zh-cn/features/es2015.md
@@ -0,0 +1,65 @@
+# ES2015
+
+当项目中配置了 `babel-loader` 或者 `buble-loader`，`vue-loader` 会使用他们处理所有 `.vue` 文件中的 `
+```
+
+我们使用 ES2015 的属性的简洁表示法去定义子组件，`{ ComponentA }` 是 `{ ComponentA: ComponentA }` 的简写，Vue 会自动的将 key 转换为`component-a`，所以你可以在 template 中使用 `+ Am I red? +
++ Red and bold +
+
+```
+
+可以简写为：
+
+``` html
+
+```
+
+**vue@^2.1.0 only:** 你可以在 `v-for` 或者 scoped slots 中使用解构赋值：
+
+``` html
+
+ {{ id }} {{ text }}
+
+```
+
+``` html
+
+
+ {{ id }} {{ text }}
+
+
+```
+
+你还可以使用 [`buble` 选项](../options.md#buble)自定义模板中支持的功能。
+
+### 转换普通 `.js` 文件
+
+由于 `vue-loader` 只处理 `.vue` 文件，你需要告诉 webpack 如何使用 `babel-loader` 或者 `buble-loader` 处理普通 `.js` 文件，在 webpack 中配置 `babel-loader` 或者 `buble-loader`。脚手架工具 `vue-cli` 已经为你做了这些。
+
+### 使用 `.babelrc` 配置 Babel
+
+`babel-loader` 遵守 [`.babelrc`](https://babeljs.io/docs/usage/babelrc/)，因此这是配置 Babel presets 和插件推荐的方法。
diff --git a/docs/zh-cn/features/functional.md b/docs/zh-cn/features/functional.md
new file mode 100644
index 000000000..6177c40bb
--- /dev/null
+++ b/docs/zh-cn/features/functional.md
@@ -0,0 +1,15 @@
+# 函数式组件的模板
+
+> 新增于 13.1.0，需要 Vue 版本 >= 2.5.0
+
+从 `vue-loader >= 13.3.0` 开始，在一个 `*.vue` 文件中以单文件形式定义的函数式组件，现在在模板编译、有作用域的 CSS 和热重载也有了良好的支持。
+
+要声明一个应该编译为函数式组件的模板，请将 `functional` 特性添加到模板块中。这样做以后就可以省略 `
+
+
+
+
+ This could be e.g. documentation for the component.
+
+```
+
+`vue-loader` 会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 CommonJS 模块，`module.exports` 出一个 Vue.js 组件对象。
+
+`vue-loader` 支持使用非默认语言，比如 CSS 预处理器，预编译的 HTML 模版语言，通过设置语言块的 `lang` 属性。例如，你可以像下面这样使用 Sass 语法编写样式：
+
+``` html
+
+```
+
+更多细节可以在[预处理器](../configurations/pre-processors.md)中找到。
+
+### 语言块
+
+#### ``
+
+- 默认语言：`html`。
+
+- 每个 `.vue` 文件最多包含一个 `` 块。
+
+- 内容将被提取为字符串，将编译并用作 Vue 组件的 `template` 选项。
+
+#### `
+```
+
+需要注意的是 `src` 导入遵循和 `require()` 一样的规则，这意味着你相对路径需要以 `./` 开始，你还可以从 NPM 包中直接导入资源，例如：
+
+``` html
+
+
diff --git a/example/Button.vue b/example/Button.vue
deleted file mode 100644
index 67ae8696c..000000000
--- a/example/Button.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-This component is fire. // <-- this should be logged
-
diff --git a/example/ScriptSetup.vue b/example/ScriptSetup.vue
deleted file mode 100644
index 71ed4753e..000000000
--- a/example/ScriptSetup.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
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/helpers.js b/lib/helpers.js
new file mode 100644
index 000000000..4e922c375
--- /dev/null
+++ b/lib/helpers.js
@@ -0,0 +1,409 @@
+const querystring = require('querystring')
+const loaderUtils = require('loader-utils')
+const normalize = require('./utils/normalize')
+const tryRequire = require('./utils/try-require')
+const styleCompilerPath = normalize.lib('style-compiler/index')
+
+// internal lib loaders
+const selectorPath = normalize.lib('selector')
+const templateCompilerPath = normalize.lib('template-compiler/index')
+const templatePreprocessorPath = normalize.lib('template-compiler/preprocessor')
+
+// dep loaders
+const styleLoaderPath = normalize.dep('vue-style-loader')
+
+// check whether default js loader exists
+const hasBabel = !!tryRequire('babel-loader')
+const hasBuble = !!tryRequire('buble-loader')
+
+const rewriterInjectRE = /\b(css(?:-loader)?(?:\?[^!]+)?)(?:!|$)/
+
+const defaultLang = {
+ template: 'html',
+ styles: 'css',
+ script: 'js'
+}
+
+const postcssExtensions = [
+ 'postcss', 'pcss', 'sugarss', 'sss'
+]
+
+// 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.
+function getRawRequest (
+ { resource, loaderIndex, loaders },
+ excludedPreLoaders = /eslint-loader/
+) {
+ return loaderUtils.getRemainingRequest({
+ resource: resource,
+ loaderIndex: loaderIndex,
+ loaders: loaders.filter(loader => !excludedPreLoaders.test(loader.path))
+ })
+}
+
+// sass => sass-loader
+// sass-loader => sass-loader
+// sass?indentedSyntax!css => sass-loader?indentedSyntax!css-loader
+function ensureLoader (lang) {
+ return lang
+ .split('!')
+ .map(loader =>
+ loader.replace(
+ /^([\w-]+)(\?.*)?/,
+ (_, name, query) =>
+ (/-loader$/.test(name) ? name : name + '-loader') + (query || '')
+ )
+ )
+ .join('!')
+}
+
+function ensureBang (loader) {
+ if (loader.charAt(loader.length - 1) !== '!') {
+ return loader + '!'
+ } else {
+ return loader
+ }
+}
+
+function resolveLoaders (
+ optionsId,
+ options,
+ moduleId,
+ isProduction,
+ hasScoped,
+ hasComment,
+ hasFunctionalTemplate,
+ needCssSourceMap
+) {
+ let cssLoaderOptions = ''
+ if (needCssSourceMap) {
+ cssLoaderOptions += '?sourceMap'
+ }
+ if (isProduction) {
+ cssLoaderOptions += (cssLoaderOptions ? '&' : '?') + 'minimize'
+ }
+
+ const bubleTemplateOptions = Object.assign({}, options.buble)
+ bubleTemplateOptions.transforms = Object.assign({}, bubleTemplateOptions.transforms)
+ bubleTemplateOptions.transforms.stripWithFunctional = hasFunctionalTemplate
+
+ const bubleOptions = hasBuble && options.buble
+ ? '?' + JSON.stringify(options.buble)
+ : ''
+
+ const templateCompilerOptions =
+ '?' +
+ JSON.stringify({
+ id: moduleId,
+ hasScoped,
+ hasComment,
+ optionsId,
+ buble: bubleTemplateOptions
+ })
+
+ const defaultLoaders = {
+ html: templateCompilerPath + templateCompilerOptions,
+ css: options.extractCSS
+ ? getCSSExtractLoader(null, options, cssLoaderOptions)
+ : styleLoaderPath + '!' + 'css-loader' + cssLoaderOptions,
+ js: hasBuble
+ ? 'buble-loader' + bubleOptions
+ : hasBabel ? 'babel-loader' : ''
+ }
+
+ function getCSSExtractLoader (lang) {
+ let extractor
+ const op = options.extractCSS
+ // extractCSS option is an instance of ExtractTextPlugin
+ if (typeof op.extract === 'function') {
+ extractor = op
+ } else {
+ extractor = tryRequire('extract-text-webpack-plugin')
+ if (!extractor) {
+ throw new Error(
+ '[vue-loader] extractCSS: true requires extract-text-webpack-plugin ' +
+ 'as a peer dependency.'
+ )
+ }
+ }
+ const langLoader = lang ? ensureBang(ensureLoader(lang)) : ''
+ return extractor.extract({
+ use: 'css-loader' + cssLoaderOptions + '!' + langLoader,
+ fallback: 'vue-style-loader'
+ })
+ }
+
+ return {
+ defaultLoaders,
+ getCSSExtractLoader,
+ loaders: Object.assign({}, defaultLoaders, options.loaders),
+ preLoaders: options.preLoaders || {},
+ postLoaders: options.postLoaders || {}
+ }
+}
+
+module.exports = function createHelpers (
+ optionsId,
+ loaderContext,
+ options,
+ moduleId,
+ parts,
+ isProduction,
+ hasScoped,
+ hasComment,
+ hasFunctionalTemplate,
+ needCssSourceMap
+) {
+ const rawRequest = getRawRequest(loaderContext, options.excludedPreLoaders)
+
+ const {
+ defaultLoaders,
+ getCSSExtractLoader,
+ loaders,
+ preLoaders,
+ postLoaders
+ } = resolveLoaders(
+ optionsId,
+ options,
+ moduleId,
+ isProduction,
+ hasScoped,
+ hasComment,
+ hasFunctionalTemplate,
+ needCssSourceMap
+ )
+
+ function getRequire (type, part, index, scoped) {
+ return 'require(' + getRequestString(type, part, index, scoped) + ')'
+ }
+
+ function getImport (type, part, index, scoped) {
+ return (
+ 'import __vue_' + type + '__ from ' +
+ getRequestString(type, part, index, scoped)
+ )
+ }
+
+ function getNamedExports (type, part, index, scoped) {
+ return (
+ 'export * from ' +
+ getRequestString(type, part, index, scoped)
+ )
+ }
+
+ function getRequestString (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 getRequireForSrc (type, impt, scoped) {
+ return 'require(' + getSrcRequestString(type, impt, scoped) + ')'
+ }
+
+ function getImportForSrc (type, impt, scoped) {
+ return (
+ 'import __vue_' + type + '__ from ' +
+ getSrcRequestString(type, impt, scoped)
+ )
+ }
+
+ function getNamedExportsForSrc (type, impt, scoped) {
+ return (
+ 'export * from ' +
+ getSrcRequestString(type, impt, scoped)
+ )
+ }
+
+ function getSrcRequestString (type, impt, scoped) {
+ return loaderUtils.stringifyRequest(
+ loaderContext,
+ '!!' + getLoaderString(type, impt, -1, scoped) + impt.src
+ )
+ }
+
+ function addCssModulesToLoader (loader, part, index) {
+ if (!part.module) return loader
+ const option = options.cssModules || {}
+ const DEFAULT_OPTIONS = {
+ modules: true
+ }
+ const OPTIONS = {
+ localIdentName: '[local]_[hash:base64:8]',
+ importLoaders: 1
+ }
+ return loader.replace(/((?:^|!)css(?:-loader)?)(\?[^!]*)?/, (m, $1, $2) => {
+ // $1: !css-loader
+ // $2: ?a=b
+ const query = loaderUtils.parseQuery($2 || '?')
+ Object.assign(query, OPTIONS, option, DEFAULT_OPTIONS)
+ if (index > 0) {
+ // 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
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-blocks.vue b/test/fixtures/custom-blocks.vue
new file mode 100644
index 000000000..8e7925aca
--- /dev/null
+++ b/test/fixtures/custom-blocks.vue
@@ -0,0 +1,21 @@
+
+en:
+ hello: "hello world"
+ja:
+ hello: "こんにちは、世界"
+
+
+## foo
+
+
+export default function (Component) {
+ Component.options.foo = 1
+}
+
+
+
+
- describe('example', () => {
- it('basic', done => {
+
+ describe('example', function () {
+ it('basic', function (done) {
done();
})
})
diff --git a/test/fixtures/custom-module.js b/test/fixtures/custom-module.js
new file mode 100644
index 000000000..ff1183412
--- /dev/null
+++ b/test/fixtures/custom-module.js
@@ -0,0 +1,9 @@
+module.exports = [
+ {
+ postTransformNode: el => {
+ if (el.staticClass) {
+ el.staticClass = '"red blue"'
+ }
+ }
+ }
+]
diff --git a/test/fixtures/custom-module.vue b/test/fixtures/custom-module.vue
new file mode 100644
index 000000000..fd9dbe526
--- /dev/null
+++ b/test/fixtures/custom-module.vue
@@ -0,0 +1,5 @@
+
+
+ describe('example', function () {
+ it('basic', function (done) {
+ done();
+ })
+ })
+
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 @@
-
-
-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/custom-directive.vue b/test/fixtures/custom-directive.vue
new file mode 100644
index 000000000..b11d74e33
--- /dev/null
+++ b/test/fixtures/custom-directive.vue
@@ -0,0 +1,3 @@
+
+
+
diff --git a/test/fixtures/custom-language.vue b/test/fixtures/custom-language.vue
index f026cd7f1..3684d135b 100644
--- a/test/fixtures/custom-language.vue
+++ b/test/fixtures/custom-language.vue
@@ -1,6 +1,6 @@
-{{ msg }}
+ +
+
+
+
diff --git a/test/fixtures/custom-options.vue b/test/fixtures/custom-options.vue
new file mode 100644
index 000000000..c8249bbd6
--- /dev/null
+++ b/test/fixtures/custom-options.vue
@@ -0,0 +1,7 @@
+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 index b5a73e277..a011a5b1f 100644 --- a/test/fixtures/entry.js +++ b/test/fixtures/entry.js @@ -1,17 +1,7 @@ -import { createApp } from 'vue' - -import Component from '~target' -import * as exports from '~target' +const Component = require('~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) + window.vueModule = Component } -export default Component +module.exports = Component diff --git a/test/fixtures/es2015.vue b/test/fixtures/es2015.vue new file mode 100644 index 000000000..5b2cb1ba5 --- /dev/null +++ b/test/fixtures/es2015.vue @@ -0,0 +1,3 @@ + + + diff --git a/test/fixtures/extend.vue b/test/fixtures/extend.vue new file mode 100644 index 000000000..ca11dfe65 --- /dev/null +++ b/test/fixtures/extend.vue @@ -0,0 +1,12 @@ + +{{ msg }}
+
+
+
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/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 @@
+
+
+
+ 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-lang.vue b/test/fixtures/postcss-lang.vue new file mode 100644 index 000000000..0f3255f1f --- /dev/null +++ b/test/fixtures/postcss-lang.vue @@ -0,0 +1,6 @@ + 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 @@ - - - diff --git a/test/fixtures/scoped-css.vue b/test/fixtures/scoped-css.vue index 2ee0015a1..cd5f74676 100644 --- a/test/fixtures/scoped-css.vue +++ b/test/fixtures/scoped-css.vue @@ -25,58 +25,33 @@ 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-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/sub/.postcssrc.js b/test/fixtures/sub/.postcssrc.js
new file mode 100644
index 000000000..961986e2b
--- /dev/null
+++ b/test/fixtures/sub/.postcssrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+ plugins: {
+ autoprefixer: {}
+ }
+}
diff --git a/test/fixtures/sub/postcss-cascade.vue b/test/fixtures/sub/postcss-cascade.vue
new file mode 100644
index 000000000..82fdf388f
--- /dev/null
+++ b/test/fixtures/sub/postcss-cascade.vue
@@ -0,0 +1,3 @@
+
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-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 @@
-{{msg}}
+
-
diff --git a/test/fixtures/template-import.vue b/test/fixtures/template-import.vue
index 00de859d2..461624104 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
new file mode 100644
index 000000000..f43b47c69
--- /dev/null
+++ b/test/fixtures/transform.vue
@@ -0,0 +1,24 @@
+
+hello
-
+ 
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
-
-
+
+
+
+
+
+
+
+
+{{ 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..a44105ba9 100644 --- a/test/fixtures/unit-test.js +++ b/test/fixtures/unit-test.js @@ -1,5 +1,5 @@ -describe('example', () => { - it('basic', (done) => { - done() + describe('example', function () { + it('basic', function (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..f0e749e4a 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, - `export default Component => { - Component.__docs = ${JSON.stringify(source)} - }`, - map - ) + this.callback(null, + 'module.exports = function(Component) {Component.options.__docs = ' + + JSON.stringify(source) + + '}', + 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/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/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.js b/test/script.js
new file mode 100644
index 000000000..96b9cb3e9
--- /dev/null
+++ b/test/script.js
@@ -0,0 +1,34 @@
+process.env.VUE_LOADER_TEST = true
+
+const { expect } = require('chai')
+const {
+ mockBundleAndRun,
+ mockRender
+} = require('./shared')
+
+describe('script block features', () => {
+ it('allows to export extended constructor', done => {
+ mockBundleAndRun({
+ entry: 'extend.vue'
+ }, (window, Module) => {
+ // extend.vue should export Vue constructor
+ const vnode = mockRender(Module.options, {
+ msg: 'success'
+ })
+ expect(vnode.tag).to.equal('div')
+ expect(vnode.children[0].text).to.equal('success')
+ expect(new Module().msg === 'success')
+ done()
+ })
+ })
+
+ it('named exports', done => {
+ mockBundleAndRun({
+ entry: 'named-exports.vue'
+ }, (window, _, rawModule) => {
+ expect(rawModule.default.name).to.equal('named-exports')
+ expect(rawModule.foo()).to.equal(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