+
+
+
+
+```
diff --git a/docs/en/configurations/extract-css.md b/docs/en/configurations/extract-css.md
index b0701a0..f40b2c0 100644
--- a/docs/en/configurations/extract-css.md
+++ b/docs/en/configurations/extract-css.md
@@ -1,13 +1,13 @@
# Extracting CSS into a Single File
-Example config to extract all the processed CSS in all Vue components into a single CSS file:
-
-### Webpack 1.x
-
``` 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")
@@ -15,31 +15,32 @@ var ExtractTextPlugin = require("extract-text-webpack-plugin")
module.exports = {
// other options...
module: {
- loaders: [
+ rules: [
{
test: /\.vue$/,
- loader: 'vue'
- },
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
]
},
- vue: {
- loaders: {
- css: ExtractTextPlugin.extract("css"),
- // you can also include
- {{ docs }}
+hi
+ hi
```
@@ -49,3 +49,19 @@ Into the following:
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.
+
+6. If you need nested selectors in `scoped` styles, you will have to use `>>>` operator for CSS and `/deep/` for `scss`:
+
+ ``` html
+
+
+
+ ```
diff --git a/docs/en/options.md b/docs/en/options.md
index 6789e7c..09e6168 100644
--- a/docs/en/options.md
+++ b/docs/en/options.md
@@ -2,18 +2,7 @@
## Usage Difference Between Webpack 1 & 2
-For Webpack 1.x: add a root `vue` block in your Webpack config:
-
-``` js
-module.exports = {
- // ...
- vue: {
- // vue-loader options
- }
-}
-```
-
-For Webpack 2 (^2.1.0-beta.25):
+For Webpack 2: pass the options directly to the loader rule.
``` js
module.exports = {
@@ -22,7 +11,7 @@ module.exports = {
rules: [
{
test: /\.vue$/,
- loader: 'vue',
+ loader: 'vue-loader',
options: {
// vue-loader options
}
@@ -32,11 +21,22 @@ module.exports = {
}
```
+For Webpack 1.x: add a root `vue` block in your Webpack config.
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader options
+ }
+}
+```
+
### loaders
-- type: `Object`
+- type: `{ [lang: string]: string }`
- An object specifying Webpack loaders to use 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:
+ 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`
- `
+
+
+```
+
+#### webpack.config.js
+
+``` js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ loaders: {
+ // 全ての
+
+
+
+
+```
diff --git a/docs/ja/configurations/extract-css.md b/docs/ja/configurations/extract-css.md
new file mode 100644
index 0000000..e166a56
--- /dev/null
+++ b/docs/ja/configurations/extract-css.md
@@ -0,0 +1,103 @@
+# 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 0000000..380bc28
--- /dev/null
+++ b/docs/ja/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 モジュールの一流の統合を提供します。
+
+### 使い方
+
+`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
+
+```
+
+#### 注意
+
+1. 同じコンポーネント内にスコープで区切られてものとそうでないスタイルを含むことが出来ます：
+
+ ``` html
+
+
+
+ ```
+
+2. 子コンポーネントのルートノードは親のスコープの CSS と子のスコープの CSS の両方の影響をうけます。
+
+3. パーシャルはスコープ付きスタイルの影響をうけません。
+
+4. **スコープされたスタイルは class の必要性を排除しません**。ブラウザが様々な CSS セレクタをレンダリングするため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](http://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
+
+5. **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。
+
+6. `scoped` スタイルで入れ子のセレクタが必要なら、CSS に対して `>>>` オペレータを、そして `scss` に対しては `/deep/` を使用する必要があります:
+
+ ``` html
+
+
+
+ ```
diff --git a/docs/ja/options.md b/docs/ja/options.md
new file mode 100644
index 0000000..d5bc5f3
--- /dev/null
+++ b/docs/ja/options.md
@@ -0,0 +1,262 @@
+# オプションリファレンス
+
+## 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 オプション
+ }
+}
+```
+
+### loaders
+
+- 型: `{ [lang: string]: string }`
+
+ `* .vue` ファイル内の言語ブロックに使用されるデフォルトの loader を上書きする Webpack loader を指定するオブジェクト。キーは指定されている場合、言語ブロックの `lang` 属性に対応します。各タイプのデフォルトの `lang` は次のとおりです:
+
+ - ``: `html`
+ - `
+
+
+
+
+
+
+
+
+```
diff --git a/docs/kr/configurations/extract-css.md b/docs/kr/configurations/extract-css.md
index 7c90a0e..e6aede8 100644
--- a/docs/kr/configurations/extract-css.md
+++ b/docs/kr/configurations/extract-css.md
@@ -1,62 +1,63 @@
# CSS 단일 파일로 추출하기
-다음 예제 설정을 사용하여 모든 Vue 컴포넌트의 처리된 CSS를 단일 CSS 파일로 추출할 수 있습니다.
-
-### Webpack 1.x
-
``` 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: {
- loaders: [
+ rules: [
{
test: /\.vue$/,
- loader: 'vue'
- },
+ loader: 'vue-loader',
+ options: {
+ extractCSS: true
+ }
+ }
]
},
- vue: {
- loaders: {
- css: ExtractTextPlugin.extract("css"),
- // 당신은
- {{ docs }}
+안녕
+ 안녕
```
diff --git a/docs/kr/options.md b/docs/kr/options.md
index ba22198..3c7572f 100644
--- a/docs/kr/options.md
+++ b/docs/kr/options.md
@@ -2,18 +2,7 @@
## Webpack 1 & 2 사용 방법의 차이점
-Webpack 1.x의 경우 Webpack 설정에 루트 `vue` 블럭을 추가합니다.
-
-``` js
-module.exports = {
- // ...
- vue: {
- // vue-loader 옵션
- }
-}
-```
-
-Webpack 2 (^2.1.0-beta.25)는 다음과 같습니다.
+Webpack 2 : 직접 loader 규칙에 전달합니다
``` js
module.exports = {
@@ -32,9 +21,20 @@ module.exports = {
}
```
+Webpack 1.x의 경우 Webpack 설정에 루트 `vue` 블럭을 추가합니다.
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader 옵션
+ }
+}
+```
+
### 로더
-- 타입: `Object`
+- 타입: `{ [lang: string]: string }`
`*.vue` 파일의 언어 블럭에 사용할 Webpack 로더를 지정하는 객체입니다. 이 키는 특별히 지정된 경우 language block에 대한 `lang` 속성에 해당합니다. 각 타입에 대한 기본적인 `lang`은 다음과 같습니다.
@@ -45,16 +45,46 @@ module.exports = {
예를 들어, `babel-loader`와 `eslint-loader`를 사용하여 모든 `
```
-`src`로 가져오기가 CommonJS `require()` 호출과 동일한 경로 확인 규칙을 따르기 때문에 주의해야 합니다. 즉, `./`로 시작해야하는 상대 경로를 의미하며 설치된 NPM 패키지에서 직접 리소스를 가져올 수 있습니다.
+`src` import는 CommonJS의 `require()` 호출과 동일한 경로 규칙을 사용하므로 `./`로 시작하는 상대 경로를 이용해 NPM 패키지를 직접 가져올 수 있습니다.
``` html
-
+
+```
+
+#### webpack.config.js
+
+```js
+// Webpack 2.x
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue',
+ options: {
+ loaders: {
+ // extrai todo conteúdo de
+
+
+
+
+ ```
diff --git a/docs/pt_BR/configurations/extract-css.md b/docs/pt_BR/configurations/extract-css.md
new file mode 100644
index 0000000..b15e95e
--- /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 0000000..c1fbba6
--- /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 0000000..a6db98a
--- /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 0000000..e092e87
--- /dev/null
+++ b/docs/ru/configurations/extract-css.md
@@ -0,0 +1,103 @@
+# Извлечение 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 0000000..d73760a
--- /dev/null
+++ b/docs/ru/features/css-modules.md
@@ -0,0 +1,117 @@
+# 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
+
+```
+
+#### Примечания
+
+1. Вы можете использовать в компоненте локальные и глобальные стили одновременно:
+
+ ``` html
+
+
+
+ ```
+
+2. Корневой тег компонента потомка будет попадать под область видимости родительского локального CSS и своего локального CSS.
+
+3. Partials не затрагиваются локальными стилями.
+
+4. **Локальные стили не устраняют необходимость классов**. Из-за того как браузеры рендерят различные CSS-селекторы, `p { color: red }` может быть в разы медленнее при использовании в локальных стилях (например, когда комбинируется с селектором по атрибуту). Если же вы используете классы или ID, такие как `.example { color: red }`, тогда вы практически полностью исключаете ухудшение производительности. [Вот пример](http://stevesouders.com/efws/css-selectors/csscreate.php) где вы можете проверить разницу самостоятельно.
+
+5. **Будьте внимательны с селекторами потомков в рекурсивных компонентах!** Для CSS-правила с селектором `.a .b`, если элемент, который соответствует `.a` содержит рекурсивный компонент потомок, тогда все `.b` в этом компоненте потомке будут также соответствовать правилу.
+
+6. Если вам нужны вложенные селекторы в `scoped` стилях, вам нужно будет использовать оператор `>>>` для CSS и `/deep/` для `scss`:
+
+ ``` html
+
+
+
+ ```
\ No newline at end of file
diff --git a/docs/ru/options.md b/docs/ru/options.md
new file mode 100644
index 0000000..7b78938
--- /dev/null
+++ b/docs/ru/options.md
@@ -0,0 +1,262 @@
+# Перечень настроек
+
+## Отличия в использовании с Webpack 1 & 2
+
+Для Webpack 2: настройки можно передавать непосредственно в правилах загрузчиков.
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // настройки vue-loader
+ }
+ }
+ ]
+ }
+}
+```
+
+Для Webpack 1.x: добавить блок `vue` в корень конфигурации Webpack:
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // настройки vue-loader
+ }
+}
+```
+
+### loaders
+
+- Тип: `{ [lang: string]: string }`
+
+ Объект определяющий какие загрузчики Webpack переопределят стандартные загрузчики, используемые для обработки секций `*.vue` файлов. Ключ соответствует атрибуту `lang` у секции файла, если таковой был указан. Значения `lang` по умолчанию:
+
+ - ``: `html`
+ - `
+
+
+
++ This should be red +
+ +``` + +由于它是一个计算属性，它也适用于 `:class` 的 object/array 语法： + +``` 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` Query
+
+CSS 模块处理是通过 [css-loader](https://github.com/webpack/css-loader)。默认 query 如下：
+
+``` js
+{
+ modules: true,
+ importLoaders: true,
+ localIdentName: '[hash:base64]'
+}
+```
+
+你可以使用 `vue-loader` 的 `cssModules` 选项去为 `css-loader` 添加 query 配置：
+
+``` js
+// webpack 1
+vue: {
+ cssModules: {
+ // overwrite local ident name
+ localIdentName: '[path][name]---[local]---[hash:base64:5]',
+ // enable camelCase
+ camelCase: true
+ }
+}
+
+// webpack 2
+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 0000000..8c0184e
--- /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/hot-reload.md b/docs/zh-cn/features/hot-reload.md
new file mode 100644
index 0000000..944d239
--- /dev/null
+++ b/docs/zh-cn/features/hot-reload.md
@@ -0,0 +1,7 @@
+# 热重载
+
+"热重载"不是当你修改文件的时候简单重新加载页面。启用热重载后，当你修改 `.vue` 文件时，所有该组件的实例会被替换，**并且不需要刷新页面**。它甚至保持应用程序和被替换组件的当前状态！当你调整模版或者修改样式时，这极大的提高了开发体验。
+
+
+
+当使用脚手架工具 `vue-cli` 时，热重载是开箱即用的。
diff --git a/docs/zh-cn/features/postcss.md b/docs/zh-cn/features/postcss.md
new file mode 100644
index 0000000..1753538
--- /dev/null
+++ b/docs/zh-cn/features/postcss.md
@@ -0,0 +1,68 @@
+# PostCSS
+
+由`vue-loader` 处理的 CSS 输出，都是通过 [PostCSS](https://github.com/postcss/postcss) 进行作用域重写，你还可以为 PostCSS 添加自定义插件，例如 [autoprefixer](https://github.com/postcss/autoprefixer) 或者 [CSSNext](http://cssnext.io/)。
+
+## 使用配置文件
+
+`vue-loader` 从 11.0 版本开始支持通过 [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) 自动加载同一个配置文件：
+
+- `postcss.config.js`
+- `.postcssrc`
+- `package.json` 中的 `postcss`
+
+使用配置文件允许你在由 `postcss-loader` 处理的普通CSS文件和 `*.vue` 文件中的 CSS 之间共享相同的配置，这是推荐的做法。
+
+## 内联选项
+
+或者，你可以使用 `vue-loader` 的 `postcss` 选项来为 `.vue` 文件指定配置。
+
+Webpack 1.x 例子：
+
+``` js
+// webpack.config.js
+module.exports = {
+ // other configs...
+ vue: {
+ // use custom postcss plugins
+ postcss: [require('postcss-cssnext')()]
+ }
+}
+```
+
+Webpack 2.x 例子:
+
+``` js
+// webpack.config.js
+module.exports = {
+ // other options...
+ module: {
+ // module.rules is the same as module.loaders in 1.x
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ // vue-loader options goes here
+ options: {
+ // ...
+ postcss: [require('postcss-cssnext')()]
+ }
+ }
+ ]
+ }
+}
+```
+
+除了插件数组之外，`postcss` 配置选项也接受：
+
+- 返回插件数组的函数；
+
+- 要传递给 PostCSS 处理器的包含 options 的对象。当你使用的 PostCSS 项目依赖自定义 `parser/stringifiers`时，这很有用：
+
+ ``` js
+ postcss: {
+ plugins: [...], // list of plugins
+ options: {
+ parser: sugarss // use sugarss parser
+ }
+ }
+ ```
diff --git a/docs/zh-cn/features/scoped-css.md b/docs/zh-cn/features/scoped-css.md
new file mode 100644
index 0000000..237e032
--- /dev/null
+++ b/docs/zh-cn/features/scoped-css.md
@@ -0,0 +1,51 @@
+# CSS 作用域
+
+当 `
+
+
+
+ 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/test/fixtures/custom-language.vue b/test/fixtures/custom-language.vue
new file mode 100644
index 0000000..3684d13
--- /dev/null
+++ b/test/fixtures/custom-language.vue
@@ -0,0 +1,31 @@
+
+ describe('example', function () {
+ it('basic', function (done) {
+ done();
+ })
+ })
+
+
+
+ This is example documentation for a component.
+
+
+
+
+ describe('example', function () {
+ it('basic', function (done) {
+ done();
+ })
+ })
+
diff --git a/test/fixtures/functional-style.vue b/test/fixtures/functional-style.vue
new file mode 100644
index 0000000..70f575f
--- /dev/null
+++ b/test/fixtures/functional-style.vue
@@ -0,0 +1,12 @@
+
+
+
diff --git a/test/fixtures/inject.vue b/test/fixtures/inject.vue
index 6485a5c..eae6e98 100644
--- a/test/fixtures/inject.vue
+++ b/test/fixtures/inject.vue
@@ -3,9 +3,9 @@
+
+
+
+
diff --git a/test/fixtures/supports-query.vue b/test/fixtures/supports-query.vue
new file mode 100644
index 0000000..88db497
--- /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 0000000..a72b02f
--- /dev/null
+++ b/test/fixtures/template-comment.vue
@@ -0,0 +1,16 @@
+
+ '
expect(vnode.children[0].tag).to.equal('h1')
@@ -206,27 +268,26 @@ describe('vue-loader', function () {
})
})
- it('script import', function (done) {
+ it('script import', done => {
test({
entry: './test/fixtures/script-import.vue'
- }, function (window, module) {
+ }, (window, module) => {
expect(module.data().msg).to.contain('Hello from Component A!')
done()
})
})
- it('source map', function (done) {
- var config = Object.assign({}, globalConfig, {
+ it('source map', done => {
+ bundle({
entry: './test/fixtures/basic.vue',
devtool: '#source-map'
- })
- bundle(config, function (code) {
+ }, (code, warnings) => {
var map = mfs.readFileSync('/test.build.js.map').toString()
var smc = new SourceMapConsumer(JSON.parse(map))
var line
var col
var targetRE = /^\s+msg: 'Hello from Component A!'/
- code.split(/\r?\n/g).some(function (l, i) {
+ code.split(/\r?\n/g).some((l, i) => {
if (targetRE.test(l)) {
line = i + 1
col = 0
@@ -243,20 +304,32 @@ describe('vue-loader', function () {
})
})
- it('media-query', function (done) {
+ it('media-query', done => {
test({
entry: './test/fixtures/media-query.vue'
- }, function (window) {
+ }, (window) => {
var style = window.document.querySelector('style').textContent
style = normalizeNewline(style)
- var id = 'data-v-' + genId(require.resolve('./fixtures/media-query.vue'))
+ var id = 'data-v-' + hash('vue-loader/test/fixtures/media-query.vue')
expect(style).to.contain('@media print {\n.foo[' + id + '] {\n color: #000;\n}\n}')
done()
})
})
- it('extract CSS', function (done) {
- bundle(Object.assign({}, globalConfig, {
+ it('supports-query', done => {
+ test({
+ entry: './test/fixtures/supports-query.vue'
+ }, (window) => {
+ var style = window.document.querySelector('style').textContent
+ style = normalizeNewline(style)
+ var id = 'data-v-' + hash('vue-loader/test/fixtures/supports-query.vue')
+ expect(style).to.contain('@supports ( color: #000 ) {\n.foo[' + id + '] {\n color: #000;\n}\n}')
+ done()
+ })
+ })
+
+ it('extract CSS', done => {
+ bundle({
entry: './test/fixtures/extract-css.vue',
vue: {
loaders: {
@@ -267,18 +340,56 @@ describe('vue-loader', function () {
plugins: [
new ExtractTextPlugin('test.output.css')
]
- }), function () {
+ }, (code, warnings) => {
+ var css = mfs.readFileSync('/test.output.css').toString()
+ css = normalizeNewline(css)
+ expect(css).to.contain('h1 {\n color: #f00;\n}')
+ expect(css).to.contain('h2 {\n color: green;\n}')
+ done()
+ })
+ })
+
+ it('extract CSS using option', done => {
+ bundle({
+ entry: './test/fixtures/extract-css.vue',
+ vue: {
+ extractCSS: true
+ },
+ plugins: [
+ new ExtractTextPlugin('test.output.css')
+ ]
+ }, (code, warnings) => {
+ var css = mfs.readFileSync('/test.output.css').toString()
+ css = normalizeNewline(css)
+ expect(css).to.contain('h1 {\n color: #f00;\n}')
+ expect(css).to.contain('h2 {\n color: green;\n}')
+ done()
+ })
+ })
+
+ it('extract CSS using option (passing plugin instance)', done => {
+ const plugin = new ExtractTextPlugin('test.output.css')
+ bundle({
+ entry: './test/fixtures/extract-css.vue',
+ vue: {
+ extractCSS: plugin
+ },
+ plugins: [
+ plugin
+ ]
+ }, (code, warnings) => {
var css = mfs.readFileSync('/test.output.css').toString()
css = normalizeNewline(css)
- expect(css).to.contain('h1 {\n color: #f00;\n}\n\nh2 {\n color: green;\n}')
+ expect(css).to.contain('h1 {\n color: #f00;\n}')
+ expect(css).to.contain('h2 {\n color: green;\n}')
done()
})
})
- it('dependency injection', function (done) {
+ it('dependency injection', done => {
test({
entry: './test/fixtures/inject.js'
- }, function (window) {
+ }, (window) => {
// console.log(window.injector.toString())
var module = interopDefault(window.injector({
'./service': {
@@ -294,7 +405,7 @@ describe('vue-loader', function () {
})
})
- it('translates relative URLs and respects resolve alias', function (done) {
+ it('translates relative URLs and respects resolve alias', done => {
test({
entry: './test/fixtures/resolve.vue',
resolve: {
@@ -308,7 +419,7 @@ describe('vue-loader', function () {
{ test: /\.png$/, loader: 'file-loader?name=[name].[hash:6].[ext]' }
]
}
- }, function (window, module) {
+ }, (window, module) => {
var vnode = mockRender(module)
//
hi
+
+```
+
+转换结果：
+
+``` html
+
+
+
+ hi
+
+```
+
+#### 注意
+
+1. 你可以在一个组件中同时使用 scoped 和 non-scoped styles
+
+ ``` html
+
+
+
+ ```
+
+2. 子组件的根节点将同时受父组件和子组件作用域 CSS 的影响。
+
+3. Partials 不受作用域样式影响。
+
+4. **CSS 作用域不能代替 classes**。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，`p { color: red }` 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 classes 或者 ids 代替，比如 `.example { color: red }`，这样几乎没有性能影响。[Here's a playground](http://stevesouders.com/efws/css-selectors/csscreate.php) 你可以测试它们的不同。
+
+5. **在递归组件中小心使用后代选择器!** 对于带有选择器 `.a .b` 的CSS 规则，如果元素 `.a` 包含递归子组件，所有的子组件中的 `.b` 会被匹配。
diff --git a/docs/zh-cn/options.md b/docs/zh-cn/options.md
new file mode 100644
index 0000000..6b79401
--- /dev/null
+++ b/docs/zh-cn/options.md
@@ -0,0 +1,249 @@
+# 选项参考
+
+## Webpack 1 和 2 之间的使用差异
+
+Webpack 2：配置直接放到 loader rule 中。
+
+``` js
+module.exports = {
+ // ...
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ // vue-loader options
+ }
+ }
+ ]
+ }
+}
+```
+
+Webpack 1.x：在 Webpack 配置中添加根节点 `vue` 块。
+
+``` js
+module.exports = {
+ // ...
+ vue: {
+ // vue-loader options
+ }
+}
+```
+
+### loaders
+
+- 类型： `{ [lang: string]: string }`
+
+ 指定 Webpack loader 对象覆盖用于 `*.vue` 文件内的语言块的默认 loader。如果指定，该键对应于语言块的 `lang` 属性。 每种类型的默认 `lang` 是：
+
+ - ``: `html`
+ - `
+
+
+
+{{msg}}
+ + + + + diff --git a/test/fixtures/custom-module.js b/test/fixtures/custom-module.js new file mode 100644 index 0000000..ff11834 --- /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 0000000..fd9dbe5 --- /dev/null +++ b/test/fixtures/custom-module.vue @@ -0,0 +1,5 @@ + +
+
+
+
diff --git a/test/fixtures/custom-options.vue b/test/fixtures/custom-options.vue
new file mode 100644
index 0000000..c8249bb
--- /dev/null
+++ b/test/fixtures/custom-options.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/test/fixtures/transform.vue b/test/fixtures/transform.vue
new file mode 100644
index 0000000..33442c6
--- /dev/null
+++ b/test/fixtures/transform.vue
@@ -0,0 +1,12 @@
+
+{{msg}}
+
+ 
+
+
+
+
+
diff --git a/test/fixtures/unit-test.js b/test/fixtures/unit-test.js
new file mode 100644
index 0000000..a44105b
--- /dev/null
+++ b/test/fixtures/unit-test.js
@@ -0,0 +1,5 @@
+ 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 0000000..d441233
--- /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 0000000..fe5d6d1
--- /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
new file mode 100644
index 0000000..f0e749e
--- /dev/null
+++ b/test/mock-loaders/docs.js
@@ -0,0 +1,7 @@
+module.exports = function (source, map) {
+ this.callback(null,
+ 'module.exports = function(Component) {Component.options.__docs = ' +
+ JSON.stringify(source) +
+ '}',
+ map)
+}
diff --git a/test/mock-loaders/html.js b/test/mock-loaders/html.js
new file mode 100644
index 0000000..182d66e
--- /dev/null
+++ b/test/mock-loaders/html.js
@@ -0,0 +1,3 @@
+module.exports = function (content) {
+ return content.replace(/red/, 'green')
+}
diff --git a/test/mock-loaders/i18n.js b/test/mock-loaders/i18n.js
new file mode 100644
index 0000000..718312e
--- /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/js.js b/test/mock-loaders/js.js
new file mode 100644
index 0000000..a0c719b
--- /dev/null
+++ b/test/mock-loaders/js.js
@@ -0,0 +1,3 @@
+module.exports = function (content) {
+ return content.replace(/Hello from Component A!/, 'Changed!')
+}
diff --git a/test/mock-loaders/yaml.js b/test/mock-loaders/yaml.js
new file mode 100644
index 0000000..a27de0b
--- /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/test.js b/test/test.js
index a9eea3d..cf938f3 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1,18 +1,20 @@
process.env.VUE_LOADER_TEST = true
+var fs = require('fs')
var path = require('path')
+var jsdom = require('jsdom')
var webpack = require('webpack')
var MemoryFS = require('memory-fs')
-var jsdom = require('jsdom')
var expect = require('chai').expect
-var rimraf = require('rimraf')
-var genId = require('../lib/gen-id')
-var SourceMapConsumer = require('source-map').SourceMapConsumer
-var ExtractTextPlugin = require("extract-text-webpack-plugin")
-var compiler = require('../lib/template-compiler')
+var hash = require('hash-sum')
+var SSR = require('vue-server-renderer')
+// var compiler = require('../lib/template-compiler')
var normalizeNewline = require('normalize-newline')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var SourceMapConsumer = require('source-map').SourceMapConsumer
-var loaderPath = 'expose-loader?vueModule!' + path.resolve(__dirname, '../index.js')
+var rawLoaderPath = path.resolve(__dirname, '../index.js')
+var loaderPath = 'expose-loader?vueModule!' + rawLoaderPath
var mfs = new MemoryFS()
var globalConfig = {
output: {
@@ -26,7 +28,10 @@ var globalConfig = {
loader: loaderPath
}
]
- }
+ },
+ plugins: [
+ new webpack.optimize.ModuleConcatenationPlugin()
+ ]
}
function bundle (options, cb) {
@@ -43,54 +48,76 @@ function bundle (options, cb) {
var webpackCompiler = webpack(config)
webpackCompiler.outputFileSystem = mfs
- webpackCompiler.run(function (err, stats) {
+ webpackCompiler.run((err, stats) => {
expect(err).to.be.null
if (stats.compilation.errors.length) {
- stats.compilation.errors.forEach(function (err) {
+ stats.compilation.errors.forEach((err) => {
+ console.error(err.message)
+ })
+ }
+ if (stats.compilation.errors) {
+ stats.compilation.errors.forEach(err => {
console.error(err.message)
})
}
expect(stats.compilation.errors).to.be.empty
- cb(mfs.readFileSync('/test.build.js').toString())
+ cb(mfs.readFileSync('/test.build.js').toString(), stats.compilation.warnings)
})
}
function test (options, assert) {
- bundle(options, function (code) {
+ bundle(options, (code, warnings) => {
jsdom.env({
html: '',
src: [code],
- done: function (err, window) {
+ done: (err, window) => {
if (err) {
console.log(err[0].data.error.stack)
expect(err).to.be.null
}
- assert(window, interopDefault(window.vueModule), window.vueModule)
+ const module = interopDefault(window.vueModule)
+ const instance = {}
+ if (module && module.beforeCreate) {
+ module.beforeCreate.forEach(hook => hook.call(instance))
+ }
+ assert(window, module, window.vueModule, instance)
}
})
})
}
function mockRender (options, data) {
+ function h (tag, data, children) {
+ if (Array.isArray(data)) {
+ children = data
+ data = null
+ }
+ return {
+ tag: tag,
+ data: data,
+ children: children
+ }
+ }
+ function e (text = '') {
+ return {
+ text: text,
+ isComment: true
+ }
+ }
return options.render.call(Object.assign({
- _h (tag, data, children) {
- if (Array.isArray(data)) {
- children = data
- data = null
- }
- return {
- tag: tag,
- data: data,
- children: children
- }
+ _v (val) {
+ return val
},
+ _self: {},
+ _e: e,
+ $createElement: h,
_m (index) {
return options.staticRenderFns[index].call(this)
},
_s (str) {
return String(str)
}
- }, data))
+ }, data), h)
}
function interopDefault (module) {
@@ -100,10 +127,10 @@ function interopDefault (module) {
}
describe('vue-loader', function () {
- it('basic', function (done) {
+ it('basic', done => {
test({
entry: './test/fixtures/basic.vue'
- }, function (window, module, rawModule) {
+ }, (window, module, rawModule) => {
var vnode = mockRender(module, {
msg: 'hi'
})
@@ -120,19 +147,19 @@ describe('vue-loader', function () {
})
})
- it('expose filename', function (done) {
+ it('expose filename', done => {
test({
entry: './test/fixtures/basic.vue'
- }, function (window, module, rawModule) {
- expect(module.__file).to.equal(path.resolve(__dirname, './fixtures/basic.vue'))
+ }, (window, module, rawModule) => {
+ expect(module.__file).to.equal(path.normalize('test/fixtures/basic.vue'))
done()
})
})
- it('pre-processors', function (done) {
+ it('pre-processors', done => {
test({
entry: './test/fixtures/pre.vue'
- }, function (window, module) {
+ }, (window, module) => {
var vnode = mockRender(module)
// div
// h1 This is the app
@@ -149,11 +176,40 @@ describe('vue-loader', function () {
})
})
- it('scoped style', function (done) {
+ it('pre-processors with extract css', done => {
test({
- entry: './test/fixtures/scoped-css.vue'
- }, function (window, module) {
- var id = 'data-v-' + genId(require.resolve('./fixtures/scoped-css.vue'))
+ entry: './test/fixtures/pre.vue',
+ vue: {
+ extractCSS: true
+ },
+ plugins: [
+ new ExtractTextPlugin('test.output.css')
+ ]
+ }, (window, module) => {
+ var vnode = mockRender(module)
+
+ expect(vnode.children[0].tag).to.equal('h1')
+ expect(vnode.children[1].tag).to.equal('comp-a')
+ expect(vnode.children[2].tag).to.equal('comp-b')
+
+ expect(module.data().msg).to.contain('Hello from coffee!')
+
+ var css = mfs.readFileSync('/test.output.css').toString()
+ css = normalizeNewline(css)
+ expect(css).to.contain('body {\n font: 100% Helvetica, sans-serif;\n color: #999;\n}')
+
+ done()
+ })
+ })
+
+ it('scoped style', done => {
+ test({
+ entry: './test/fixtures/scoped-css.vue',
+ vue: {
+ hashKey: 'foo'
+ }
+ }, (window, module) => {
+ var id = 'data-v-' + hash('vue-loader/test/fixtures/scoped-css.vue' + 'foo')
expect(module._scopeId).to.equal(id)
var vnode = mockRender(module, {
@@ -174,30 +230,36 @@ describe('vue-loader', function () {
var style = window.document.querySelector('style').textContent
style = normalizeNewline(style)
- expect(style).to.contain('.test[' + id + '] {\n color: yellow;\n}')
- expect(style).to.contain('.test[' + id + ']:after {\n content: \'bye!\';\n}')
- expect(style).to.contain('h1[' + id + '] {\n color: green;\n}')
+ expect(style).to.contain(`.test[${id}] {\n color: yellow;\n}`)
+ expect(style).to.contain(`.test[${id}]:after {\n content: \'bye!\';\n}`)
+ expect(style).to.contain(`h1[${id}] {\n color: green;\n}`)
+ // scoped keyframes
+ expect(style).to.contain(`.anim[${id}] {\n animation: color-${id} 5s infinite, other 5s;`)
+ expect(style).to.contain(`.anim-2[${id}] {\n animation-name: color-${id}`)
+ expect(style).to.contain(`@keyframes color-${id} {`)
+ // >>> combinator
+ expect(style).to.contain(`.foo p[${id}] .bar {\n color: red;\n}`)
done()
})
})
- it('style import', function (done) {
+ it('style import', done => {
test({
entry: './test/fixtures/style-import.vue'
- }, function (window) {
+ }, (window) => {
var styles = window.document.querySelectorAll('style')
expect(styles[0].textContent).to.contain('h1 { color: red;\n}')
// import with scoped
- var id = 'data-v-' + genId(require.resolve('./fixtures/style-import.vue'))
+ var id = 'data-v-' + hash('vue-loader/test/fixtures/style-import.vue')
expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green;\n}')
done()
})
})
- it('template import', function (done) {
+ it('template import', done => {
test({
entry: './test/fixtures/template-import.vue'
- }, function (window, module) {
+ }, (window, module) => {
var vnode = mockRender(module)
// '
+
+hello
// 
@@ -326,7 +437,35 @@ describe('vue-loader', function () {
})
})
- it('postcss options', function (done) {
+ it('transformToRequire option', done => {
+ test({
+ entry: './test/fixtures/transform.vue',
+ module: {
+ rules: [
+ { test: /\.vue$/, loader: loaderPath },
+ {
+ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+ loader: 'url-loader'
+ }
+ ]
+ }
+ }, (window, module) => {
+ function includeDataURL (s) {
+ return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i)
+ }
+ var vnode = mockRender(module)
+ // img tag
+ expect(includeDataURL(vnode.children[0].data.attrs.src)).to.equal(true)
+ // image tag (SVG)
+ expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true)
+ var style = window.document.querySelector('style').textContent
+ // style
+ expect(includeDataURL(style)).to.equal(true)
+ done()
+ })
+ })
+
+ it('postcss options', done => {
test({
entry: './test/fixtures/postcss.vue',
vue: {
@@ -336,18 +475,31 @@ describe('vue-loader', function () {
}
}
}
- }, function (window) {
+ }, (window) => {
+ var style = window.document.querySelector('style').textContent
+ style = normalizeNewline(style)
+ expect(style).to.contain('h1 {\n color: red;\n font-size: 14px\n}')
+ done()
+ })
+ })
+
+ it('load postcss config file', done => {
+ fs.writeFileSync('.postcssrc', JSON.stringify({ parser: 'sugarss' }))
+ test({
+ entry: './test/fixtures/postcss.vue'
+ }, (window) => {
var style = window.document.querySelector('style').textContent
style = normalizeNewline(style)
expect(style).to.contain('h1 {\n color: red;\n font-size: 14px\n}')
+ fs.unlinkSync('.postcssrc')
done()
})
})
- it('transpile ES2015 features in template', function (done) {
+ it('transpile ES2015 features in template', done => {
test({
entry: './test/fixtures/es2015.vue'
- }, function (window, module) {
+ }, (window, module) => {
var vnode = mockRender(module, {
a: 'hello',
b: true
@@ -360,10 +512,10 @@ describe('vue-loader', function () {
})
})
- it('allows to export extended constructor', function (done) {
+ it('allows to export extended constructor', done => {
test({
entry: './test/fixtures/extend.vue'
- }, function (window, Module) {
+ }, (window, Module) => {
// extend.vue should export Vue constructor
var vnode = mockRender(Module.options, {
msg: 'success'
@@ -375,13 +527,13 @@ describe('vue-loader', function () {
})
})
- it('support es compatible modules', function (done) {
+ it('support es compatible modules', done => {
test({
entry: './test/fixtures/basic.vue',
vue: {
esModule: true
}
- }, function (window, module, rawModule) {
+ }, (window, module, rawModule) => {
expect(rawModule.__esModule).to.equal(true)
var vnode = mockRender(rawModule.default, {
msg: 'hi'
@@ -395,7 +547,7 @@ describe('vue-loader', function () {
})
})
- it('css-modules', function (done) {
+ it('css-modules', done => {
function testWithIdent (localIdentName, regexToMatch, cb) {
test({
entry: './test/fixtures/css-modules.vue',
@@ -404,15 +556,13 @@ describe('vue-loader', function () {
localIdentName: localIdentName
}
}
- }, function (window) {
- var module = window.vueModule
-
+ }, (window, module, raw, instance) => {
// get local class name
- var className = module.computed.style().red
+ var className = instance.style.red
expect(className).to.match(regexToMatch)
// class name in style
- var style = [].slice.call(window.document.querySelectorAll('style')).map(function (style) {
+ var style = [].slice.call(window.document.querySelectorAll('style')).map((style) => {
return style.textContent
}).join('\n')
style = normalizeNewline(style)
@@ -426,16 +576,16 @@ describe('vue-loader', function () {
expect(style).to.contain('animation: ' + animationName + ' 1s;')
// default module + pre-processor + scoped
- var anotherClassName = module.computed.$style().red
+ var anotherClassName = instance.$style.red
expect(anotherClassName).to.match(regexToMatch).and.not.equal(className)
- var id = 'data-v-' + genId(require.resolve('./fixtures/css-modules.vue'))
+ var id = 'data-v-' + hash('vue-loader/test/fixtures/css-modules.vue')
expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
cb()
})
}
// default localIdentName
- testWithIdent(undefined, /^\w{23}/, function () {
+ testWithIdent(undefined, /^\w{23}/, () => {
// specified localIdentName
var ident = '[path][name]---[local]---[hash:base64:5]'
var regex = /^test-fixtures-css-modules---red---\w{5}/
@@ -443,25 +593,343 @@ describe('vue-loader', function () {
})
})
- it('css-modules in SSR', function (done) {
+ it('css-modules in SSR', done => {
bundle({
entry: './test/fixtures/css-modules.vue',
target: 'node',
output: Object.assign({}, globalConfig.output, {
libraryTarget: 'commonjs2'
})
- }, function (code) {
+ }, (code, warnings) => {
// http://stackoverflow.com/questions/17581830/load-node-js-module-from-string-in-memory
- function requireFromString(src, filename) {
- var Module = module.constructor;
- var m = new Module();
- m._compile(src, filename);
- return m.exports;
+ function requireFromString (src, filename) {
+ var Module = module.constructor
+ var m = new Module()
+ m._compile(src, filename)
+ return m.exports
}
- var output = requireFromString(code, './test.build.js')
- expect(output.computed.style().red).to.exist
+ var output = interopDefault(requireFromString(code, './test.build.js'))
+ var mockInstance = {}
+ output.beforeCreate.forEach(hook => hook.call(mockInstance))
+ expect(mockInstance.style.red).to.exist
+
+ done()
+ })
+ })
+
+ it('should allow adding custom html loaders', done => {
+ test({
+ entry: './test/fixtures/markdown.vue',
+ vue: {
+ loaders: {
+ html: 'marked'
+ }
+ }
+ }, (window, module) => {
+ var vnode = mockRender(module, {
+ msg: 'hi'
+ })
+ //
@@ -326,7 +437,35 @@ describe('vue-loader', function () {
})
})
- it('postcss options', function (done) {
+ it('transformToRequire option', done => {
+ test({
+ entry: './test/fixtures/transform.vue',
+ module: {
+ rules: [
+ { test: /\.vue$/, loader: loaderPath },
+ {
+ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+ loader: 'url-loader'
+ }
+ ]
+ }
+ }, (window, module) => {
+ function includeDataURL (s) {
+ return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i)
+ }
+ var vnode = mockRender(module)
+ // img tag
+ expect(includeDataURL(vnode.children[0].data.attrs.src)).to.equal(true)
+ // image tag (SVG)
+ expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).to.equal(true)
+ var style = window.document.querySelector('style').textContent
+ // style
+ expect(includeDataURL(style)).to.equal(true)
+ done()
+ })
+ })
+
+ it('postcss options', done => {
test({
entry: './test/fixtures/postcss.vue',
vue: {
@@ -336,18 +475,31 @@ describe('vue-loader', function () {
}
}
}
- }, function (window) {
+ }, (window) => {
+ var style = window.document.querySelector('style').textContent
+ style = normalizeNewline(style)
+ expect(style).to.contain('h1 {\n color: red;\n font-size: 14px\n}')
+ done()
+ })
+ })
+
+ it('load postcss config file', done => {
+ fs.writeFileSync('.postcssrc', JSON.stringify({ parser: 'sugarss' }))
+ test({
+ entry: './test/fixtures/postcss.vue'
+ }, (window) => {
var style = window.document.querySelector('style').textContent
style = normalizeNewline(style)
expect(style).to.contain('h1 {\n color: red;\n font-size: 14px\n}')
+ fs.unlinkSync('.postcssrc')
done()
})
})
- it('transpile ES2015 features in template', function (done) {
+ it('transpile ES2015 features in template', done => {
test({
entry: './test/fixtures/es2015.vue'
- }, function (window, module) {
+ }, (window, module) => {
var vnode = mockRender(module, {
a: 'hello',
b: true
@@ -360,10 +512,10 @@ describe('vue-loader', function () {
})
})
- it('allows to export extended constructor', function (done) {
+ it('allows to export extended constructor', done => {
test({
entry: './test/fixtures/extend.vue'
- }, function (window, Module) {
+ }, (window, Module) => {
// extend.vue should export Vue constructor
var vnode = mockRender(Module.options, {
msg: 'success'
@@ -375,13 +527,13 @@ describe('vue-loader', function () {
})
})
- it('support es compatible modules', function (done) {
+ it('support es compatible modules', done => {
test({
entry: './test/fixtures/basic.vue',
vue: {
esModule: true
}
- }, function (window, module, rawModule) {
+ }, (window, module, rawModule) => {
expect(rawModule.__esModule).to.equal(true)
var vnode = mockRender(rawModule.default, {
msg: 'hi'
@@ -395,7 +547,7 @@ describe('vue-loader', function () {
})
})
- it('css-modules', function (done) {
+ it('css-modules', done => {
function testWithIdent (localIdentName, regexToMatch, cb) {
test({
entry: './test/fixtures/css-modules.vue',
@@ -404,15 +556,13 @@ describe('vue-loader', function () {
localIdentName: localIdentName
}
}
- }, function (window) {
- var module = window.vueModule
-
+ }, (window, module, raw, instance) => {
// get local class name
- var className = module.computed.style().red
+ var className = instance.style.red
expect(className).to.match(regexToMatch)
// class name in style
- var style = [].slice.call(window.document.querySelectorAll('style')).map(function (style) {
+ var style = [].slice.call(window.document.querySelectorAll('style')).map((style) => {
return style.textContent
}).join('\n')
style = normalizeNewline(style)
@@ -426,16 +576,16 @@ describe('vue-loader', function () {
expect(style).to.contain('animation: ' + animationName + ' 1s;')
// default module + pre-processor + scoped
- var anotherClassName = module.computed.$style().red
+ var anotherClassName = instance.$style.red
expect(anotherClassName).to.match(regexToMatch).and.not.equal(className)
- var id = 'data-v-' + genId(require.resolve('./fixtures/css-modules.vue'))
+ var id = 'data-v-' + hash('vue-loader/test/fixtures/css-modules.vue')
expect(style).to.contain('.' + anotherClassName + '[' + id + ']')
cb()
})
}
// default localIdentName
- testWithIdent(undefined, /^\w{23}/, function () {
+ testWithIdent(undefined, /^\w{23}/, () => {
// specified localIdentName
var ident = '[path][name]---[local]---[hash:base64:5]'
var regex = /^test-fixtures-css-modules---red---\w{5}/
@@ -443,25 +593,343 @@ describe('vue-loader', function () {
})
})
- it('css-modules in SSR', function (done) {
+ it('css-modules in SSR', done => {
bundle({
entry: './test/fixtures/css-modules.vue',
target: 'node',
output: Object.assign({}, globalConfig.output, {
libraryTarget: 'commonjs2'
})
- }, function (code) {
+ }, (code, warnings) => {
// http://stackoverflow.com/questions/17581830/load-node-js-module-from-string-in-memory
- function requireFromString(src, filename) {
- var Module = module.constructor;
- var m = new Module();
- m._compile(src, filename);
- return m.exports;
+ function requireFromString (src, filename) {
+ var Module = module.constructor
+ var m = new Module()
+ m._compile(src, filename)
+ return m.exports
}
- var output = requireFromString(code, './test.build.js')
- expect(output.computed.style().red).to.exist
+ var output = interopDefault(requireFromString(code, './test.build.js'))
+ var mockInstance = {}
+ output.beforeCreate.forEach(hook => hook.call(mockInstance))
+ expect(mockInstance.style.red).to.exist
+
+ done()
+ })
+ })
+
+ it('should allow adding custom html loaders', done => {
+ test({
+ entry: './test/fixtures/markdown.vue',
+ vue: {
+ loaders: {
+ html: 'marked'
+ }
+ }
+ }, (window, module) => {
+ var vnode = mockRender(module, {
+ msg: 'hi'
+ })
+ // {{msg}}
+ expect(vnode.tag).to.equal('h2') + expect(vnode.data.attrs.id).to.equal('-msg-') + expect(vnode.children[0]).to.equal('hi') + done() + }) + }) + + it('support chaining with other loaders', done => { + const mockLoaderPath = require.resolve('./mock-loaders/js') + test({ + entry: './test/fixtures/basic.vue', + module: { + rules: [ + { test: /\.vue$/, loader: loaderPath + '!' + mockLoaderPath } + ] + } + }, (window, module) => { + expect(module.data().msg).to.equal('Changed!') + done() + }) + }) + + it('SSR style and moduleId extraction', done => { + bundle({ + target: 'node', + entry: './test/fixtures/ssr-style.js', + output: { + path: '/', + filename: 'test.build.js', + libraryTarget: 'commonjs2' + }, + externals: ['vue'], + module: { + rules: [{ test: /\.vue$/, loader: rawLoaderPath }] + } + }, code => { + const renderer = SSR.createBundleRenderer(code, { + basedir: __dirname, + runInNewContext: 'once' + }) + const context = { + _registeredComponents: new Set() + } + renderer.renderToString(context, (err, res) => { + if (err) return done(err) + expect(res).to.contain('data-server-rendered') + expect(res).to.contain('Hello
') + expect(res).to.contain('Hello from Component A!') + expect(res).to.contain('functional
')
+ // from main component
+ expect(context.styles).to.contain('h1 { color: green;')
+ // from imported child component
+ expect(context.styles).to.contain('comp-a h2 {\n color: #f00;')
+ // from imported css file
+ expect(context.styles).to.contain('h1 { color: red;')
+ // from imported functional component
+ expect(context.styles).to.contain('.foo { color: red;')
+ // collect component identifiers during render
+ expect(Array.from(context._registeredComponents).length).to.equal(3)
+ done()
+ })
+ })
+ })
+
+ it('extract custom blocks to a separate file', done => {
+ bundle({
+ entry: './test/fixtures/custom-language.vue',
+ vue: {
+ loaders: {
+ 'documentation': ExtractTextPlugin.extract('raw-loader')
+ }
+ },
+ plugins: [
+ new ExtractTextPlugin('doc.md')
+ ]
+ }, (code, warnings) => {
+ var unitTest = mfs.readFileSync('/doc.md').toString()
+ unitTest = normalizeNewline(unitTest)
+ expect(unitTest).to.contain('This is example documentation for a component.')
+ done()
+ })
+ })
+
+ it('add custom blocks to the webpack output', done => {
+ bundle({
+ entry: './test/fixtures/custom-language.vue',
+ vue: {
+ loaders: {
+ 'unit-test': 'babel-loader'
+ }
+ }
+ }, (code, warnings) => {
+ expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
+ done()
+ })
+ })
+
+ it('custom blocks work with src imports', done => {
+ bundle({
+ entry: './test/fixtures/custom-import.vue',
+ vue: {
+ loaders: {
+ 'unit-test': 'babel-loader'
+ }
+ }
+ }, (code, warnings) => {
+ expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
+ done()
+ })
+ })
+
+ it('passes Component to custom block loaders', done => {
+ const mockLoaderPath = require.resolve('./mock-loaders/docs')
+ test({
+ entry: './test/fixtures/custom-language.vue',
+ vue: {
+ loaders: {
+ 'documentation': mockLoaderPath
+ }
+ }
+ }, (window, module) => {
+ expect(module.__docs).to.contain('This is example documentation for a component.')
+ done()
+ })
+ })
+
+ it('custom blocks can be ignored', done => {
+ bundle({
+ entry: './test/fixtures/custom-language.vue'
+ }, (code, warnings) => {
+ expect(code).not.to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
+ done()
+ })
+ })
+
+ it('passes attributes as options to the loader', done => {
+ bundle({
+ entry: './test/fixtures/custom-options.vue',
+ vue: {
+ loaders: {
+ 'unit-test': 'babel-loader!skeleton-loader'
+ }
+ },
+ plugins: [
+ new webpack.LoaderOptionsPlugin({
+ options: {
+ skeletonLoader: {
+ procedure: (content, sourceMap, callback, options) => {
+ expect(options.foo).to.equal('bar')
+ expect(options.opt2).to.equal('value2')
+
+ // Return the content to output.
+ return content
+ }
+ }
+ }
+ })
+ ]
+ }, (code, warnings) => {
+ expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
+ done()
+ })
+ })
+
+ it('pre/post loaders', done => {
+ test({
+ entry: './test/fixtures/basic.vue',
+ vue: {
+ preLoaders: {
+ js: require.resolve('./mock-loaders/js'),
+ css: require.resolve('./mock-loaders/css')
+ },
+ postLoaders: {
+ html: require.resolve('./mock-loaders/html')
+ }
+ }
+ }, (window, module) => {
+ var vnode = mockRender(module, {
+ msg: 'hi'
+ })
+ // {{msg}}
+ expect(vnode.tag).to.equal('h2') + expect(vnode.data.staticClass).to.equal('green') + expect(vnode.children[0]).to.equal('hi') + + expect(module.data().msg).to.contain('Changed!') + var style = window.document.querySelector('style').textContent + style = normalizeNewline(style) + expect(style).to.contain('comp-a h2 {\n color: #00f;\n}') + done() + }) + }) + + it('pre/post loaders for custom blocks', done => { + test({ + entry: './test/fixtures/custom-blocks.vue', + vue: { + preLoaders: { + i18n: require.resolve('./mock-loaders/yaml') + }, + loaders: { + i18n: require.resolve('./mock-loaders/i18n'), + blog: 'marked' + }, + postLoaders: { + blog: require.resolve('./mock-loaders/blog') + } + } + }, (window, module) => { + var vnode = mockRender(module, { + msg: JSON.parse(module.__i18n).en.hello, + blog: module.__blog + }) + expect(vnode.children[0].children[0]).to.equal('hello world') + expect(vnode.children[2].data.domProps.innerHTML).to.equal('foo
') + done() + }) + }) + + it('custom compiler modules', done => { + test({ + entry: './test/fixtures/custom-module.vue', + vue: { + compilerModules: [ + { + postTransformNode: el => { + if (el.staticStyle) { + el.staticStyle = `$processStyle(${el.staticStyle})` + } + if (el.styleBinding) { + el.styleBinding = `$processStyle(${el.styleBinding})` + } + } + } + ] + } + }, (window, module) => { + var results = [] + // var vnode = + mockRender(module, { + $processStyle: style => results.push(style), + transform: 'translateX(10px)' + }) + expect(results).to.deep.equal([ + { 'flex-direction': 'row' }, + { 'transform': 'translateX(10px)' } + ]) + done() + }) + }) + + it('custom compiler modules (string)', done => { + test({ + entry: './test/fixtures/basic.vue', + vue: { + compilerModules: require.resolve('./fixtures/custom-module') + } + }, (window, module) => { + var vnode = mockRender(module, { + msg: 'hi' + }) + expect(vnode.data.staticClass).to.equal('red blue') + done() + }) + }) + + it('functional component with styles', done => { + test({ + entry: './test/fixtures/functional-style.vue' + }, (window, module, rawModule) => { + expect(module.functional).to.equal(true) + var vnode = mockRender(module) + //hi
+ expect(vnode.tag).to.equal('div')
+ expect(vnode.data.class).to.equal('foo')
+ expect(vnode.children[0]).to.equal('functional')
+
+ var style = window.document.querySelector('style').textContent
+ style = normalizeNewline(style)
+ expect(style).to.contain('.foo { color: red;\n}')
+ done()
+ })
+ })
+
+ it('template with comments', done => {
+ test({
+ entry: './test/fixtures/template-comment.vue'
+ }, (window, module, rawModule) => {
+ expect(module.comments).to.equal(true)
+ var vnode = mockRender(module, {
+ msg: 'hi'
+ })
+ expect(vnode.tag).to.equal('div')
+ expect(vnode.children.length).to.equal(2)
+ expect(vnode.children[0].data.staticClass).to.equal('red')
+ expect(vnode.children[0].children[0]).to.equal('hi')
+ expect(vnode.children[1].isComment).to.true
+ expect(vnode.children[1].text).to.equal(' comment here ')
done()
})
})