vue-template-loader - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib/modules/add-scoped-id.js

@@ -49,3 +49,3 @@ const assert = require('assert')
         selector.insertAfter(target, selectorParser.attribute({
-          attribute: options.id
+          attribute: 'data-v-' + options.id
         }))
@@ -59,5 +59,37 @@ }
   return root => {
-    root.walkRules(rule => {
-      rule.selector = selectorTransformer.process(rule.selector).result
+    const keyframes = new Map()
+
+    root.each(function transformNode (node) {
+      if (node.type === 'atrule') {
+        if (/-?keyframes$/.test(node.name)) {
+          const before = node.params
+          const after = node.params + '-' + options.id
+          node.params = after
+          keyframes.set(before, after)
+        } else {
+          node.each(transformNode)
+        }
+      } else {
+        node.selector = selectorTransformer.processSync(node.selector)
+      }
     })
+
+    keyframes.forEach((after, before) => {
+      root.walkDecls(decl => {
+        if (/-?animation-name$/.test(decl.prop)) {
+          decl.value = decl.value.split(',')
+            .map(v => v.trim() === before ? after : v)
+            .join(',')
+        } else if (/-?animation$/.test(decl.prop)) {
+          decl.value = decl.value.split(',')
+            .map(v => {
+              const [first, ...tail] = v.trim().split(/\s+/)
+              return first === before
+                ? [after, ...tail].join(' ')
+                : v
+            })
+            .join(',')
+        }
+      })
+    })
   }
@@ -64,0 +96,0 @@ })

lib/template-loader.js

@@ -15,3 +15,3 @@ /**
   const isServer = this.options.target === 'node'
-  const id = `data-v-${genId(this.resourcePath, process.cwd())}`
+  const id = genId(this.resourcePath, process.cwd())
 
@@ -74,3 +74,3 @@ // Acquire the query of target file
       builder.addLine(`
-        options._scopeId = '${id}'
+        options._scopeId = 'data-v-${id}'
       `)
@@ -77,0 +77,0 @@ }

package.json

 {
   "name": "vue-template-loader",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Vue.js 2.0 template loader for webpack",
@@ -29,3 +29,3 @@ "main": "lib/template-loader.js",
     "test": "npm run lint && jasmine JASMINE_CONFIG_PATH=test/jasmine.json",
-    "prepublish": "npm run test"
+    "prepublishOnly": "npm run test"
   },
@@ -35,32 +35,32 @@ "dependencies": {
     "loader-utils": "^1.1.0",
-    "postcss": "^5.2.16",
-    "postcss-selector-parser": "^2.2.3",
-    "source-map": "^0.5.6",
-    "vue-hot-reload-api": "^2.0.11",
-    "vue-template-es2015-compiler": "^1.5.1"
+    "postcss": "^6.0.16",
+    "postcss-selector-parser": "^3.1.1",
+    "source-map": "^0.6.1",
+    "vue-hot-reload-api": "^2.2.4",
+    "vue-template-es2015-compiler": "^1.6.0"
   },
   "devDependencies": {
-    "babel-eslint": "^7.2.1",
-    "babel-plugin-transform-class-properties": "^6.23.0",
+    "babel-eslint": "^8.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-register": "^6.24.0",
-    "css-loader": "^0.28.0",
-    "eslint": "^3.19.0",
-    "eslint-config-ktsn": "^1.0.0",
-    "extract-text-webpack-plugin": "^2.1.0",
-    "file-loader": "^0.11.1",
-    "html-webpack-plugin": "^2.28.0",
-    "jasmine": "^2.5.3",
-    "js-base64": "^2.1.9",
-    "node-sass": "^4.5.2",
-    "pug-html-loader": "^1.1.4",
-    "require-from-string": "^1.2.1",
-    "sass-loader": "^6.0.3",
-    "style-loader": "^0.16.1",
-    "ts-loader": "^2.0.3",
-    "typescript": "^2.2.2",
-    "vue": "^2.2.6",
-    "vue-class-component": "^5.0.1",
-    "vue-template-compiler": "^2.2.6",
-    "webpack": "^2.3.2"
+    "babel-register": "^6.26.0",
+    "css-loader": "^0.28.8",
+    "eslint": "^4.15.0",
+    "eslint-config-ktsn": "^1.0.3",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.6",
+    "html-webpack-plugin": "^2.30.1",
+    "jasmine": "^2.8.0",
+    "js-base64": "^2.4.0",
+    "node-sass": "^4.7.2",
+    "pug-html-loader": "^1.1.5",
+    "require-from-string": "^2.0.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.19.1",
+    "ts-loader": "^3.2.0",
+    "typescript": "^2.6.2",
+    "vue": "^2.5.13",
+    "vue-class-component": "^6.1.2",
+    "vue-template-compiler": "^2.5.13",
+    "webpack": "^3.10.0"
   },
@@ -67,0 +67,0 @@ "peerDependencies": {

README.md

@@ -5,18 +5,18 @@ # vue-template-loader
 
-This loader is just pre-compile a template by using [vue-template-compiler](https://www.npmjs.com/package/vue-template-compiler) and provide a function that can inject render function to a component options object.  
+This loader pre-compiles a html template into a render function using the [vue-template-compiler](https://www.npmjs.com/package/vue-template-compiler). Each html file is transformed into a function that takes a vue component options object and injects a render function, styles and HMR support.
 
-In most cases, you should use [vue-loader](https://github.com/vuejs/vue-loader).
+In most cases, [vue-loader](https://github.com/vuejs/vue-loader) is recommended over this loader.
 
 ## Features
 
-- Insert a render function to a component options object
-- vue-loader like scoped css and css modules support
-- HMR support for a template
+- Transforms a html template into a render function
+- Supports scoped css and css modules (similar to vue-loader)
+- HMR support for templates
 - Decorator syntax support (can be used with [vue-class-component](https://github.com/vuejs/vue-class-component) or other class style components)
 
-## Configuration for webpack
+## Webpack Configuration
 
-### Loading Template
+### Loading a Html Template
 
-Just add a loader option for vue-template-loader to your webpack configuration.
+Add vue-template-loader as a loader to your webpack configuration.
 
@@ -33,5 +33,5 @@ ```js
 
-### Asserts Handling
+### Asset Transforms
 
-You can transform an asset path in template to `require` expression that the webpack can handle. For example, if you would like to process image file specified on `src` attributes of `<img>` element, you should set `transformToRequire` option.
+To transform asset paths in your templates to `require` expressions that webpack can handle, configure the `transformToRequire` option. For example, if you would like webpack to process the image files in the `src` attribute of `<img>` elements:
 
@@ -47,4 +47,4 @@ ```js
           transformToRequire: {
-            // The key should be element name,
-            // the value should be attribute name or its array
+            // The key should be an element name
+            // The value should be an attribute name or an array of attribute names
             img: 'src'
@@ -55,3 +55,3 @@ }
 
-      // Make sure to add the loader that can process the asset files
+      // Make sure to add a loader that can process the asset files
       {
@@ -71,4 +71,14 @@ test: /\.(png|jpg)/,
 
-You need to specify scoped flag and loaders for style files such as `style-loader` and `css-loader`. Note that they must be `enforce: post` to inject scope id into styles before they are processed by them.
+For an explanation of scoped styles, see the [vue-loader docs](https://vue-loader.vuejs.org/en/features/scoped-css.html).
 
+Html and style files need to be imported using `import withRender from './app.html?style=./app.css'`.
+
+You also need modify your webpack config as follows:
+- Set `scoped: true` in the vue-template-loader options
+- Mark some of your style loaders (usually `style-loader` and `css-loader`) as post-loaders (by setting `enforce: 'post'`).
+
+**Logic for what to mark as a post-loader:** vue-template-loader injects an _inline_ webpack loader into your loader pipeline to modify your style files to include [scope-id] selectors. Webpack loaders run in the order normal -> inline -> post, so any loaders you want to run before the inline loader should be normal loaders, and anything you want to run after the inline loader should be post loaders (i.e. marked with `enforce: 'post'`).
+
+Typically you will want to leave loaders that compile to css (like less, sass and postcss transpilers) as normal loaders, so they run before the [scope-id] injection. Loaders that transform css into a format for webpack consumption (like `style-loader` and `css-loader`) should be post loaders (marked as `enforce: 'post'`).
+
 ```js
@@ -79,11 +89,17 @@ module.exports = {
       {
-        test: /\.html$/,
-        loader: 'vue-template-loader',
-        options: {
-          scoped: true // add `scoped` flag
-        }
+        // Loaders that transform css into a format for webpack consumption should be post loaders (enforce: 'post')
+        enforce: 'post',
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
       },
+      // We needed to split the rule for .scss files across two rules
       {
-        enforce: 'post', // required
-        test: /\.css$/,
+        // The loaders that compile to css (postcss and sass in this case) should be left as normal loaders
+        test: /\.scss$/,
+        use: ['postcss-loader', 'sass-loader']
+      },
+      {
+        // The loaders that format css for webpack consumption should be post loaders
+        enforce: 'post',
+        test: /\.scss$/,
         use: ['style-loader', 'css-loader']
@@ -98,3 +114,3 @@ }
 
-There are cases you may want to style children components. e.g. using a third party component. In such cases, you can use `>>>` combinator to apply styles to any descendant elements of a scoped styled element.
+There are cases where you may want to style children components e.g. using a third party component. In such cases, you can use the `>>>` (/deep/) combinator to apply styles to any descendant elements of a scoped styled element.
 
@@ -117,6 +133,19 @@ Input:
 
+If you are using less, note that it does not yet support the `>>>` operator, but you can use:
+```less
+@deep: ~">>>";
+
+.foo @{deep} .bar {
+  color: red;
+}
+```
+
 ### Loading CSS Modules
 
-All what you have to do is enable `modules` flag of `css-loader`. vue-template-loader will add `$style` property and you can use hashed classes through it.
+For an explanation of CSS modules, see the [vue-loader docs](https://vue-loader.vuejs.org/en/features/css-modules.html).
 
+Html and style files need to be imported using the loader syntax: `import withRender from './app.html?style=./app.css'`. You also need to enable the `modules` flag of `css-loader`.
+
+vue-template-loader will add the `$style` property to your view model and you can use hashed classes through it.
+
 ```js
@@ -141,3 +170,3 @@ module.exports = {
 
-By default Hot Module Replacement is disabled in following situations:
+By default Hot Module Replacement is disabled in the following situations:
 
@@ -148,3 +177,3 @@ * Webpack `target` is `node`
 
-You may use `hmr: false` option to disable HMR explicitly for any other situation.
+You may use the `hmr: false` option to disable HMR explicitly for any other situation.
 
@@ -169,3 +198,3 @@ ```js
 
-Write a template of Vue component as html.
+Write a template for a Vue component using html.
 
@@ -180,3 +209,3 @@ ```html
 
-Import it as a function and pass a component option to the function. If you also would like to load a style file, add `style` query and specify the style file path.
+Import it as a function and pass a component option to the function. If you would like to load a style file, add the `style` query and specify the style file path.
 
@@ -220,13 +249,15 @@ ```js
 
-If you use this loader with TypeScript, make sure to add a declaration file for html file into your project.
+### Typescript
 
+If you use this loader with TypeScript, make sure to add a declaration file for html files into your project. (If you want to load style files via query string, you need to replace `*.html` with `*.css`)
+
 ```ts
 declare module '*.html' {
-  import Vue = require('vue')
+  import Vue, { ComponentOptions } from 'vue'
   interface WithRender {
-    <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>
+    <V extends Vue>(options: ComponentOptions<V>): ComponentOptions<V>
     <V extends typeof Vue>(component: V): V
   }
   const withRender: WithRender
-  export = withRender
+  export default withRender
 }
@@ -237,5 +268,4 @@ ```
 
-There are vue-cli templates using vue-template-loader (Thanks to @Toilal).
+There is vue-cli template using vue-template-loader (Thanks to @Toilal).
 
-- [Toilal/vue-ts-hmr-std-files](https://github.com/Toilal/vue-ts-hmr-std-files)
 - [Toilal/vue-webpack-template](https://github.com/Toilal/vue-webpack-template)
@@ -242,0 +272,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21679

increased by16.24%

Lines of code

372

increased by8.77%

Number of lines in readme file

262

increased by12.93%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedansi-styles@3.2.1(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addeddot-prop@5.3.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedis-obj@2.0.0(transitive)

• + Addedpostcss@6.0.23(transitive)

• + Addedpostcss-selector-parser@3.1.2(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsupports-color@5.5.0(transitive)

• - Removedansi-regex@2.1.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedflatten@1.0.3(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removedhas-flag@1.0.0(transitive)

• - Removedjs-base64@2.6.4(transitive)

• - Removedpostcss@5.2.18(transitive)

• - Removedpostcss-selector-parser@2.2.3(transitive)

• - Removedsource-map@0.5.7(transitive)

• - Removedstrip-ansi@3.0.1(transitive)

• - Removedsupports-color@2.0.03.2.3(transitive)

• Updatedpostcss@^6.0.16

• Updatedpostcss-selector-parser@^3.1.1

• Updatedsource-map@^0.6.1

• Updatedvue-hot-reload-api@^2.2.4

• Updatedvue-template-es2015-compiler@^1.6.0