vue-template-loader - npm Package Compare versions

Comparing version 0.4.1 to 1.0.0

lib/modules/template-compiler.js

 const assert = require('assert')
 const compiler = require('vue-template-compiler')
-const transpile = require('vue-template-es2015-compiler')
+const { compileTemplate } = require('@vue/component-compiler-utils')
 const SourceMapGenerator = require('source-map').SourceMapGenerator
 
 const empty =
-  `var render = ${toFunction('')}\n` +
+  'var render = function(){}\n' +
   'var staticRenderFns = []'
 
 module.exports = function compile (template, options = {}) {
-  const compiled = compiler.compile(template, {
-    modules: [{
-      postTransformNode: el => transformAsset(el, options.transformToRequire || {})
-    }]
+  const compiled = compileTemplate({
+    source: template,
+    filename: options.filename,
+    compiler,
+    transformAssetUrls: options.transformAssetUrls,
+    isFunctional: options.functional,
+    isProduction: options.isProduction,
+    optimizeSSR: options.optimizeSSR
   })
@@ -24,10 +28,5 @@
 
-  const transpiled = transpile(
-    `var render = ${toFunction(compiled.render)}\n` +
-    `var staticRenderFns = [${compiled.staticRenderFns.map(toFunction).join(',')}]`
-  )
-
   const result = {
     errors: [],
-    code: transpiled
+    code: compiled.code
   }
@@ -56,43 +55,1 @@
 }
-
-function transformAsset (el, transformToRequire) {
-  if (!el.attrs) return
-
-  Object.keys(transformToRequire).forEach(targetTag => {
-    if (el.tag !== targetTag) return
-
-    let targetAttrs = transformToRequire[targetTag]
-    el.attrs.forEach(attr => {
-      if (typeof targetAttrs === 'string') {
-        targetAttrs = [targetAttrs]
-      }
-
-      targetAttrs.forEach(targetName => {
-        if (attr.name !== targetName) return
-        rewriteAsset(attr)
-      })
-    })
-  })
-}
-
-function rewriteAsset (attr) {
-  let value = attr.value
-
-  const isStatic = value[0] === '"'
-    && value[value.length - 1] === '"'
-  if (!isStatic) {
-    return
-  }
-
-  const first = value[1]
-  if (first === '.' || first === '~') {
-    if (first === '~') {
-      value = '"' + value.slice(2)
-    }
-    attr.value = `require(${value})`
-  }
-}
-
-function toFunction (code) {
-  return `function(){${code}}`
-}

lib/scoped-style-loader.js

 const assert = require('assert')
 const loaderUtils = require('loader-utils')
-const addScopedId = require('./modules/add-scoped-id')
+const { compileStyleAsync } = require('@vue/component-compiler-utils')
 
 module.exports = function (rawStyle, prevMap) {
-  this.cacheable()
   const cb = this.async()
@@ -12,10 +11,18 @@ const { id } = loaderUtils.getOptions(this)
 
-  addScopedId(id, rawStyle, {
-    sourceMap: this.sourceMap,
-    fileName: this.resourcePath,
-    prevMap
+  compileStyleAsync({
+    source: rawStyle,
+    filename: this.resourcePath,
+    id: 'data-v-' + id,
+    map: prevMap,
+    scoped: true
   }).then(
-    result => cb(null, result.css, result.map),
+    result => {
+      if (result.errors.length > 0) {
+        cb(result.errors.join('\n'))
+        return
+      }
+      cb(null, result.code, result.map)
+    },
     err => cb(err)
   )
 }

lib/template-loader.js

@@ -13,9 +13,11 @@ /**
 module.exports = function (content) {
-  this.cacheable()
   const isServer = this.target === 'node'
   const id = genId(this.resourcePath, process.cwd())
 
+  const isProduction = process.env.NODE_ENV === 'production'
+
   // Acquire the query of target file
   const { style: stylePath } = loaderUtils.parseQuery('?' + this.request.split('?').pop())
   const options = Object.assign(loaderUtils.getOptions(this) || {}, {
+    isProduction,
     sourceMap: this.sourceMap,
@@ -32,4 +34,3 @@ fileName: this.resourcePath
 
-  const shouldHotReload = isHmrEnabled && !isServer && !this.minimize &&
-    process.env.NODE_ENV !== 'production'
+  const shouldHotReload = isHmrEnabled && !isServer && !this.minimize && !isProduction
 
@@ -79,2 +80,9 @@ const builder = new Builder()
 
+    // Functional component
+    if (options.functional) {
+      builder.addLine(`
+        options.functional = true
+      `)
+    }
+
     // Inject a snippet for adding CSS Modules object in computed
@@ -81,0 +89,0 @@ if (stylePath) {

package.json

 {
   "name": "vue-template-loader",
-  "version": "0.4.1",
+  "version": "1.0.0",
   "description": "Vue.js 2.0 template loader for webpack",
@@ -28,38 +28,40 @@ "main": "lib/template-loader.js",
     "lint": "eslint lib test",
-    "test": "npm run lint && jasmine JASMINE_CONFIG_PATH=test/jasmine.json",
-    "prepublishOnly": "npm run test"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:snapshot": "jest --updateSnapshot",
+    "prepublishOnly": "npm run lint && npm run test"
   },
+  "jest": {
+    "testRegex": "test/.*\\.spec\\.js$"
+  },
   "dependencies": {
+    "@vue/component-compiler-utils": "^2.0.0",
     "hash-sum": "^1.0.2",
     "loader-utils": "^1.1.0",
-    "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"
+    "vue-hot-reload-api": "^2.3.0"
   },
   "devDependencies": {
-    "babel-eslint": "^8.2.1",
+    "babel-eslint": "^8.2.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-register": "^6.26.0",
-    "css-loader": "^0.28.8",
-    "eslint": "^4.15.0",
+    "babel-plugin-transform-decorators-legacy": "^1.3.5",
+    "css-loader": "^0.28.11",
+    "eslint": "^4.19.1",
     "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",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^23.1.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
     "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"
+    "require-from-string": "^2.0.2",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "ts-loader": "^4.4.1",
+    "typescript": "^2.9.2",
+    "vue": "^2.5.16",
+    "vue-class-component": "^6.2.0",
+    "vue-template-compiler": "^2.5.16",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.6"
   },
@@ -66,0 +68,0 @@ "peerDependencies": {

README.md

@@ -34,3 +34,3 @@ # vue-template-loader
 
-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:
+To transform asset paths in your templates to `require` expressions that webpack can handle, configure the `transformAssetUrls` option. For example, if you would like webpack to process the image files in the `src` attribute of `<img>` elements:
 
@@ -45,3 +45,3 @@ ```js
         options: {
-          transformToRequire: {
+          transformAssetUrls: {
             // The key should be an element name
@@ -67,2 +67,34 @@ // The value should be an attribute name or an array of attribute names
 
+### Functional Component
+
+If you want to use functional component template, you need to set `functional: true` option to loader options. You may want to use `oneOf` to handle both normal and functional template configs.
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        oneOf: [
+          // If the file name has `.functional` suffix, treat it as functional component template
+          // You can change this rule whatever you want.
+          {
+            test: /\.functional\.html$/,
+            loader: 'vue-template-loader',
+            options: {
+              functional: true
+            }
+          },
+
+          // Normal component template
+          {
+            loader : 'vue-template-loader'
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
 ### Loading Scoped Styles
@@ -246,5 +278,5 @@
 declare module '*.html' {
-  import Vue, { ComponentOptions } from 'vue'
+  import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
   interface WithRender {
-    <V extends Vue>(options: ComponentOptions<V>): ComponentOptions<V>
+    <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
     <V extends typeof Vue>(component: V): V
@@ -257,2 +289,39 @@ }
 
+## Option Reference
+
+### transformAssetUrls
+
+- type: `Object`
+- default: `{}`
+
+To specify which attribute of elements are processed with webpack. Keys are element names while the values are their attribute string or array of string.
+
+### functional
+
+- type: `Boolean`
+- default: `false`
+
+Process template as functional component template if it is `true`.
+
+### scoped
+
+- type: `Boolean`
+- default: `false`
+
+If `true`, styles will be scoped.
+
+### hmr
+
+- type: `Boolean`
+- default: `true`
+
+If `false`, disable hot module replacement.
+
+### optimizeSSR
+
+- type: `Boolean`
+- default: `false`
+
+You can enable SSR optimazation when specify this option `true`.
+
 ## Templates
@@ -259,0 +328,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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-25%

Dev dependency count

22

decreased by-4.35%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

331

increased by26.34%

Worsened metrics

Total package byte prevSize

19480

decreased by-10.11%

Number of package files

9

decreased by-10%

Lines of code

247

decreased by-33.6%

Dependency changes

• + Added@vue/component-compiler-utils@^2.0.0

• - Removedpostcss@^6.0.16

• - Removedpostcss-selector-parser@^3.1.1

• - Removedvue-template-es2015-compiler@^1.6.0

• - Removedansi-styles@3.2.1(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removeddot-prop@5.3.0(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedindexes-of@1.0.1(transitive)

• - Removedis-obj@2.0.0(transitive)

• - Removedpostcss@6.0.23(transitive)

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

• - Removedsupports-color@5.5.0(transitive)

• - Removeduniq@1.0.1(transitive)

• - Removedvue-template-es2015-compiler@1.9.1(transitive)

• Updatedvue-hot-reload-api@^2.3.0