build: setup prettier and jest

Author: yyx990803

package.json

@@ -4,15 +4,29 @@
   "license": "MIT",
   "author": "Evan You",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "tsc --watch",
     "build": "tsc",
     "dev-example": "webpack-dev-server --config example/webpack.config.js --inline --hot",
-    "build-example": "webpack --config example/webpack.config.js --mode=production --devtool=source-map"
+    "build-example": "webpack --config example/webpack.config.js --mode=production --devtool=source-map",
+    "lint": "prettier --write --parser typescript \"src/**/*.ts\""
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.ts": [
+      "prettier --parser=typescript --write",
+      "git add"
+    ]
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.0.0-alpha.0"
@@ -26,15 +40,21 @@
   },
   "devDependencies": {
     "@types/hash-sum": "^1.0.0",
+    "@types/jest": "^24.0.24",
     "@types/loader-utils": "^1.1.3",
     "@types/webpack": "^4.41.0",
     "css-loader": "^3.3.2",
     "file-loader": "^5.0.2",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.5.0",
     "mini-css-extract-plugin": "^0.8.0",
+    "prettier": "^1.19.1",
+    "ts-jest": "^24.2.0",
     "typescript": "^3.7.3",
     "url-loader": "^3.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0"
+    "webpack-dev-server": "^3.9.0",
+    "yorkie": "^2.0.0"
   }
 }

src/pitcher.ts

@@ -50,11 +50,12 @@ pitcher.pitch = function(r) {
   // resourceQuery-only rule that intends to target a custom block with no lang
   const seen = new Map()
   loaders = loaders.filter(loader => {
-    const identifier = typeof loader === 'string'
-      ? loader
-      // Dedupe based on both path and query if available. This is important
-      // in Vue CLI so that postcss-loaders with different options can co-exist
-      : (loader.path + loader.query)
+    const identifier =
+      typeof loader === 'string'
+        ? loader
+        : // Dedupe based on both path and query if available. This is important
+          // in Vue CLI so that postcss-loaders with different options can co-exist
+          loader.path + loader.query
     if (!seen.has(identifier)) {
       seen.set(identifier, true)
       return true
@@ -67,11 +68,10 @@ pitcher.pitch = function(r) {
     if (cssLoaderIndex > -1) {
       const afterLoaders = loaders.slice(0, cssLoaderIndex + 1)
       const beforeLoaders = loaders.slice(cssLoaderIndex + 1)
-      return genProxyModule([
-        ...afterLoaders,
-        stylePostLoaderPath,
-        ...beforeLoaders
-      ], context)
+      return genProxyModule(
+        [...afterLoaders, stylePostLoaderPath, ...beforeLoaders],
+        context
+      )
     }
   }
 
@@ -87,15 +87,18 @@ pitcher.pitch = function(r) {
   }
 }
 
-function genProxyModule(loaders: Loader[], context: webpack.loader.LoaderContext) {
+function genProxyModule(
+  loaders: Loader[],
+  context: webpack.loader.LoaderContext
+) {
   const loaderStrings = loaders.map(loader => {
     return typeof loader === 'string' ? loader : loader.request
   })
   const resource = context.resourcePath + context.resourceQuery
-  const request = loaderUtils.stringifyRequest(context, '-!' + [
-    ...loaderStrings,
-    resource
-  ].join('!'))
+  const request = loaderUtils.stringifyRequest(
+    context,
+    '-!' + [...loaderStrings, resource].join('!')
+  )
   // return a proxy module which simply re-exports everything from the
   // actual request.
   return (

src/plugin.ts

@@ -31,7 +31,7 @@ class VueLoaderPlugin implements webpack.Plugin {
     if (!vueRule) {
       throw new Error(
         `[VueLoaderPlugin Error] No matching rule for .vue files found.\n` +
-        `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
+          `Make sure there is at least one root-level rule that matches .vue or .vue.html files.`
       )
     }
 
@@ -51,18 +51,17 @@ class VueLoaderPlugin implements webpack.Plugin {
     if (vueLoaderUseIndex < 0) {
       throw new Error(
         `[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
-        `Make sure the rule matching .vue files include vue-loader in its use.`
+          `Make sure the rule matching .vue files include vue-loader in its use.`
       )
     }
 
     const vueLoaderUse = vueUse[vueLoaderUseIndex]
-    const vueLoaderOptions = (vueLoaderUse.options = vueLoaderUse.options || {}) as VueLoaderOptions
+    const vueLoaderOptions = (vueLoaderUse.options =
+      vueLoaderUse.options || {}) as VueLoaderOptions
 
     // for each user rule (expect the vue rule), create a cloned rule
     // that targets the corresponding language blocks in *.vue files.
-    const clonedRules = rules
-      .filter(r => r !== vueRule)
-      .map(cloneRule)
+    const clonedRules = rules.filter(r => r !== vueRule).map(cloneRule)
 
     // rule for template compiler
     const templateCompilerRule = {
@@ -102,21 +101,17 @@ class VueLoaderPlugin implements webpack.Plugin {
   }
 }
 
-function createMatcher (fakeFile: string) {
+function createMatcher(fakeFile: string) {
   return (rule: webpack.RuleSetRule) => {
     // #1201 we need to skip the `include` check when locating the vue rule
     const clone = Object.assign({}, rule)
     delete clone.include
     const normalized = RuleSet.normalizeRule(clone, {}, '')
-    return (
-      !rule.enforce &&
-      normalized.resource &&
-      normalized.resource(fakeFile)
-    )
+    return !rule.enforce && normalized.resource && normalized.resource(fakeFile)
   }
 }
 
-function cloneRule (rule: webpack.RuleSetRule) {
+function cloneRule(rule: webpack.RuleSetRule) {
   const resource = rule.resource as Function
   const resourceQuery = rule.resourceQuery as Function
   // Assuming `test` and `resourceQuery` tests are executed in series and

src/select.ts

@@ -2,7 +2,7 @@ import * as webpack from 'webpack'
 import { SFCDescriptor } from '@vue/compiler-sfc'
 import { ParsedUrlQuery } from 'querystring'
 
-export function selectBlock (
+export function selectBlock(
   descriptor: SFCDescriptor,
   loaderContext: webpack.loader.LoaderContext,
   query: ParsedUrlQuery,
@@ -16,11 +16,7 @@ export function selectBlock (
     if (appendExtension) {
       loaderContext.resourcePath += '.' + (template.lang || 'html')
     }
-    loaderContext.callback(
-      null,
-      template.content,
-      template.map
-    )
+    loaderContext.callback(null, template.content, template.map)
     return
   }
 
@@ -30,11 +26,7 @@ export function selectBlock (
     if (appendExtension) {
       loaderContext.resourcePath += '.' + (script.lang || 'js')
     }
-    loaderContext.callback(
-      null,
-      script.content,
-      script.map
-    )
+    loaderContext.callback(null, script.content, script.map)
     return
   }
 
@@ -44,21 +36,13 @@ export function selectBlock (
     if (appendExtension) {
       loaderContext.resourcePath += '.' + (style.lang || 'css')
     }
-    loaderContext.callback(
-      null,
-      style.content,
-      style.map
-    )
+    loaderContext.callback(null, style.content, style.map)
     return
   }
 
   // custom
   if (query.type === 'custom' && query.index != null) {
     const block = descriptor.customBlocks[Number(query.index)]
-    loaderContext.callback(
-      null,
-      block.content,
-      block.map
-    )
+    loaderContext.callback(null, block.content, block.map)
   }
 }

src/templateLoader.ts

@@ -52,19 +52,21 @@ const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
         loaderContext.emitError(err)
       } else {
         if (err.loc) {
-          const filePath = chalk.gray(`at ${
-            loaderContext.resourcePath
-          }:${err.loc.start.line + lineOffset}:${err.loc.start.column}`)
+          const filePath = chalk.gray(
+            `at ${loaderContext.resourcePath}:${err.loc.start.line +
+              lineOffset}:${err.loc.start.column}`
+          )
 
-          err.message = `\n${
-            chalk.red(`Syntax Error: ${err.message}`)
-          }\n${filePath}\n${
-            chalk.yellow(generateCodeFrame(
-            source as string,
-            err.loc.start.offset,
-            err.loc.end.offset,
-            lineOffset
-          ))}\n`
+          err.message = `\n${chalk.red(
+            `Syntax Error: ${err.message}`
+          )}\n${filePath}\n${chalk.yellow(
+            generateCodeFrame(
+              source as string,
+              err.loc.start.offset,
+              err.loc.end.offset,
+              lineOffset
+            )
+          )}\n`
         }
         loaderContext.emitError(err)
       }