refactor!: replace module.exports with ES module export (#1674)

.circleci/config.yml

@@ -0,0 +1,26 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:lts
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "yarn.lock" }}
+          - v1-dependencies-  # used if checksum fails
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+            - ~/.cache/yarn
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
+
+      - run: yarn lint
+      - run: yarn test

package.json

@@ -11,9 +11,11 @@
   "scripts": {
     "dev": "tsc --watch",
     "build": "tsc",
+    "pretest": "tsc",
+    "test": "jest",
     "dev-example": "webpack-dev-server --config example/webpack.config.js --inline --hot",
     "build-example": "rm -rf example/dist && webpack --config example/webpack.config.js --env.prod",
-    "lint": "prettier --write --parser typescript \"src/**/*.ts\"",
+    "lint": "prettier --write --parser typescript \"{src,test}/**/*.ts\"",
     "prepublishOnly": "tsc"
   },
   "gitHooks": {
@@ -30,6 +32,7 @@
     ]
   },
   "dependencies": {
+    "@types/mini-css-extract-plugin": "^0.9.1",
     "chalk": "^3.0.0",
     "hash-sum": "^2.0.0",
     "loader-utils": "^1.2.3",
@@ -41,28 +44,40 @@
     "@babel/preset-env": "^7.7.7",
     "@types/estree": "^0.0.42",
     "@types/hash-sum": "^1.0.0",
+    "@types/jest": "^25.2.1",
     "@types/loader-utils": "^1.1.3",
     "@types/webpack": "^4.41.0",
+    "@types/webpack-merge": "^4.1.5",
     "@vue/compiler-sfc": "^3.0.0-beta.9",
     "babel-loader": "^8.0.6",
     "cache-loader": "^4.1.0",
     "css-loader": "^3.3.2",
     "file-loader": "^5.0.2",
-    "jest": "^24.9.0",
+    "jest": "^25.5.4",
     "lint-staged": "^9.5.0",
+    "memfs": "^3.1.2",
     "mini-css-extract-plugin": "^0.8.0",
     "prettier": "^1.19.1",
     "pug": "^2.0.4",
     "pug-plain-loader": "^1.0.0",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^25.5.1",
     "typescript": "^3.7.3",
     "url-loader": "^3.0.0",
     "vue": "^3.0.0-beta.9",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
+    "webpack-merge": "^4.2.2",
     "yorkie": "^2.0.0"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "testPathIgnorePatterns": [
+      "<rootDir>/dist/",
+      "<rootDir>/node_modules/"
+    ]
   }
 }

src/index.ts

@@ -7,7 +7,7 @@ try {
   )
 }
 
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 import path from 'path'
 import qs from 'querystring'
 import hash from 'hash-sum'
@@ -25,7 +25,9 @@ import { genHotReloadCode } from './hotReload'
 import { genCSSModulesCode } from './cssModules'
 import { formatError } from './formatError'
 
-const VueLoaderPlugin = require('./plugin')
+import VueLoaderPlugin from './plugin'
+
+export { VueLoaderPlugin }
 
 export interface VueLoaderOptions {
   transformAssetUrls?: SFCTemplateCompileOptions['transformAssetUrls']
@@ -38,7 +40,10 @@ export interface VueLoaderOptions {
 
 let errorEmitted = false
 
-const loader: webpack.loader.Loader = function(source: string) {
+export default function loader(
+  this: webpack.loader.LoaderContext,
+  source: string
+) {
   const loaderContext = this
 
   // check if plugin is installed
@@ -245,6 +250,3 @@ function attrsToQuery(attrs: SFCBlock['attrs'], langFallback?: string): string {
   }
   return query
 }
-
-;(loader as any).VueLoaderPlugin = VueLoaderPlugin
-module.exports = loader

src/pitcher.ts

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 import qs from 'querystring'
 import loaderUtils from 'loader-utils'
 
@@ -22,8 +22,6 @@ const isNotPitcher = (l: Loader) => l.path !== __filename
 
 const pitcher: webpack.loader.Loader = code => code
 
-module.exports = pitcher
-
 // This pitching loader is responsible for intercepting all vue block requests
 // and transform it into appropriate requests.
 pitcher.pitch = function() {
@@ -126,3 +124,5 @@ function shouldIgnoreCustomBlock(loaders: Loader[]) {
   })
   return actualLoaders.length === 0
 }
+
+export default pitcher

src/plugin.ts

@@ -1,12 +1,17 @@
-const webpack = require('webpack')
-let VueLoaderPlugin = null
+import webpack from 'webpack'
+declare class VueLoaderPlugin implements webpack.Plugin {
+  static NS: string
+  apply(compiler: webpack.Compiler): void
+}
+
+let Plugin: typeof VueLoaderPlugin
 
-if (webpack.version && webpack.version[0] > 4) {
+if (webpack.version && webpack.version[0] > '4') {
   // webpack5 and upper
-  VueLoaderPlugin = require('./pluginWebpack5')
+  Plugin = require('./pluginWebpack5').default
 } else {
   // webpack4 and lower
-  VueLoaderPlugin = require('./pluginWebpack4')
+  Plugin = require('./pluginWebpack4').default
 }
 
-module.exports = VueLoaderPlugin
+export default Plugin

src/pluginWebpack4.ts

@@ -1,5 +1,5 @@
 import qs from 'querystring'
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 import { VueLoaderOptions } from './'
 
 const RuleSet = require('webpack/lib/RuleSet')
@@ -196,4 +196,4 @@ function cloneRuleForRenderFn(rule: webpack.RuleSetRule) {
   return res
 }
 
-module.exports = VueLoaderPlugin
+export default VueLoaderPlugin

src/pluginWebpack5.ts

@@ -1,6 +1,6 @@
 import qs from 'querystring'
 import { VueLoaderOptions } from './'
-import { RuleSetRule, Compiler } from 'webpack'
+import { RuleSetRule, Compiler, Plugin } from 'webpack'
 
 const id = 'vue-loader-plugin'
 const NS = 'vue-loader'
@@ -77,7 +77,7 @@ const ruleSetCompiler = new RuleSetCompiler([
   new UseEffectRulePlugin()
 ])
 
-class VueLoaderPlugin {
+class VueLoaderPlugin implements Plugin {
   static NS = NS
 
   apply(compiler: Compiler) {
@@ -302,4 +302,4 @@ function cloneRule(
   return res
 }
 
-module.exports = VueLoaderPlugin
+export default VueLoaderPlugin

src/select.ts

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 import { SFCDescriptor } from '@vue/compiler-sfc'
 import { ParsedUrlQuery } from 'querystring'
 

src/stylePostLoader.ts

@@ -1,6 +1,6 @@
 import qs from 'querystring'
 import { compileStyle } from '@vue/compiler-sfc'
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 
 // This is a post loader that handles scoped CSS transforms.
 // Injected right before css-loader by the global pitcher (../pitch.js)
@@ -23,4 +23,4 @@ const StylePostLoader: webpack.loader.Loader = function(source, inMap) {
   }
 }
 
-module.exports = StylePostLoader
+export default StylePostLoader

src/templateLoader.ts

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack'
+import webpack from 'webpack'
 import qs from 'querystring'
 import loaderUtils from 'loader-utils'
 import { VueLoaderOptions } from './'
@@ -62,4 +62,4 @@ const TemplateLoader: webpack.loader.Loader = function(source, inMap) {
   loaderContext.callback(null, code, map)
 }
 
-module.exports = TemplateLoader
+export default TemplateLoader

test/core.spec.ts

@@ -0,0 +1,5 @@
+import { bundle } from './utils'
+
+test('basic', async () => {
+  await bundle({ entry: 'basic.vue' })
+})

test/fixtures/basic.vue

@@ -0,0 +1,19 @@
+<template>
+  <h2 class="red">{{msg}}</h2>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello from Component A!'
+    }
+  }
+}
+</script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>

test/fixtures/entry.js

@@ -0,0 +1,9 @@
+import Component from '~target'
+import * as exports from '~target'
+
+if (typeof window !== 'undefined') {
+  window.module = Component
+  window.exports = exports
+}
+
+export default Component