package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-loader",
-  "version": "16.0.0-beta.7",
+  "version": "16.0.0-beta.8",
   "license": "MIT",
   "author": "Evan You",
   "main": "dist/index.js",
@@ -15,61 +15,61 @@
     "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,test}/**/*.ts\"",
+    "lint": "prettier --write --parser typescript \"{src,test}/**/*.{j,t}s\"",
     "prepublishOnly": "tsc"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.ts": [
-      "prettier --parser=typescript --write",
-      "git add"
+      "prettier --parser=typescript --write"
     ]
   },
   "dependencies": {
-    "@types/mini-css-extract-plugin": "^0.9.1",
-    "chalk": "^3.0.0",
+    "chalk": "^4.1.0",
     "hash-sum": "^2.0.0",
-    "loader-utils": "^1.2.3",
-    "merge-source-map": "^1.1.0",
-    "source-map": "^0.6.1"
+    "loader-utils": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
-    "@babel/preset-env": "^7.7.7",
-    "@types/estree": "^0.0.42",
+    "@babel/preset-env": "^7.11.5",
+    "@types/estree": "^0.0.45",
     "@types/hash-sum": "^1.0.0",
-    "@types/jest": "^25.2.1",
-    "@types/loader-utils": "^1.1.3",
+    "@types/jest": "^26.0.13",
+    "@types/jsdom": "^16.2.4",
+    "@types/loader-utils": "^2.0.1",
+    "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/webpack": "^4.41.0",
     "@types/webpack-merge": "^4.1.5",
     "@vue/compiler-sfc": "^3.0.0-rc.10",
-    "babel-loader": "^8.0.6",
+    "babel-loader": "^8.1.0",
     "cache-loader": "^4.1.0",
-    "css-loader": "^3.3.2",
-    "file-loader": "^5.0.2",
+    "css-loader": "^4.3.0",
+    "file-loader": "^6.1.0",
     "jest": "^26.4.1",
-    "lint-staged": "^9.5.0",
+    "jsdom": "^16.4.0",
+    "lint-staged": "^10.3.0",
     "memfs": "^3.1.2",
-    "mini-css-extract-plugin": "^0.8.0",
-    "prettier": "^1.19.1",
-    "pug": "^2.0.4",
+    "mini-css-extract-plugin": "^0.11.2",
+    "normalize-newline": "^3.0.0",
+    "prettier": "^2.1.1",
+    "pug": "^2.0.0",
     "pug-plain-loader": "^1.0.0",
+    "style-loader": "^1.2.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "ts-jest": "^26.2.0",
     "typescript": "^4.0.2",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.0",
     "vue": "^3.0.0-rc.10",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
-    "webpack-merge": "^4.2.2",
+    "webpack-merge": "^5.1.4",
     "yorkie": "^2.0.0"
   },
   "jest": {

src/hotReload.ts

@@ -10,7 +10,7 @@ if (module.hot) {
   script.__hmrId = "${id}"
   const api = __VUE_HMR_RUNTIME__
   module.hot.accept()
-  if (!api.createRecord('${id}', script)) {
+  if (!api.createRecord('${id}')) {
     api.reload('${id}', script)
   }
   ${templateRequest ? genTemplateHotReloadCode(id, templateRequest) : ''}

src/index.ts

@@ -21,7 +21,7 @@ import {
   SFCTemplateCompileOptions,
   SFCScriptCompileOptions,
   SFCStyleBlock,
-  SFCScriptBlock
+  SFCScriptBlock,
 } from '@vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
@@ -75,7 +75,7 @@ export default function loader(
     sourceMap,
     rootContext,
     resourcePath,
-    resourceQuery
+    resourceQuery,
   } = loaderContext
 
   const rawQuery = resourceQuery.slice(1)
@@ -88,11 +88,11 @@ export default function loader(
 
   const { descriptor, errors } = parse(source, {
     filename: resourcePath,
-    sourceMap
+    sourceMap,
   })
 
   if (errors.length) {
-    errors.forEach(err => {
+    errors.forEach((err) => {
       formatError(err, source, resourcePath)
       loaderContext.emitError(err)
     })
@@ -119,7 +119,7 @@ export default function loader(
   const id = hash(isProduction ? shortFilePath + '\n' + source : shortFilePath)
 
   // feature information
-  const hasScoped = descriptor.styles.some(s => s.scoped)
+  const hasScoped = descriptor.styles.some((s) => s.scoped)
   const needsHotReload =
     !isServer &&
     !isProduction &&
@@ -132,7 +132,7 @@ export default function loader(
   if (descriptor.script || descriptor.scriptSetup) {
     try {
       script = (descriptor as any).scriptCompiled = compileScript(descriptor, {
-        babelParserPlugins: options.babelParserPlugins
+        babelParserPlugins: options.babelParserPlugins,
       })
     } catch (e) {
       loaderContext.emitError(e)
@@ -152,6 +152,7 @@ export default function loader(
   // template
   let templateImport = ``
   let templateRequest
+  const renderFnName = isServer ? `ssrRender` : `render`
   if (descriptor.template) {
     const src = descriptor.template.src || resourcePath
     const idQuery = `&id=${id}`
@@ -162,7 +163,7 @@ export default function loader(
       : ``
     const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${bindingsQuery}${resourceQuery}`
     templateRequest = stringifyRequest(src + query)
-    templateImport = `import { render } from ${templateRequest}`
+    templateImport = `import { ${renderFnName} } from ${templateRequest}`
   }
 
   // styles
@@ -200,7 +201,7 @@ export default function loader(
     templateImport,
     scriptImport,
     stylesCode,
-    templateImport ? `script.render = render` : ``
+    templateImport ? `script.${renderFnName} = ${renderFnName}` : ``,
   ]
     .filter(Boolean)
     .join('\n')

src/pitcher.ts

@@ -20,11 +20,11 @@ const isCSSLoader = (l: Loader) => /(\/|\\|@)css-loader/.test(l.path)
 const isCacheLoader = (l: Loader) => /(\/|\\|@)cache-loader/.test(l.path)
 const isNotPitcher = (l: Loader) => l.path !== __filename
 
-const pitcher: webpack.loader.Loader = code => code
+const pitcher: webpack.loader.Loader = (code) => code
 
 // This pitching loader is responsible for intercepting all vue block requests
 // and transform it into appropriate requests.
-export const pitch = function() {
+export const pitch = function () {
   const context = this as webpack.loader.LoaderContext
   const rawLoaders = context.loaders.filter(isNotPitcher)
   let loaders = rawLoaders
@@ -47,7 +47,7 @@ export const pitch = function() {
   // and the cloned rule would match a source import request or a
   // resourceQuery-only rule that intends to target a custom block with no lang
   const seen = new Map()
-  loaders = loaders.filter(loader => {
+  loaders = loaders.filter((loader) => {
     const identifier =
       typeof loader === 'string'
         ? loader
@@ -100,7 +100,7 @@ function genProxyModule(
 }
 
 function genRequest(loaders: Loader[], context: webpack.loader.LoaderContext) {
-  const loaderStrings = loaders.map(loader => {
+  const loaderStrings = loaders.map((loader) => {
     return typeof loader === 'string' ? loader : loader.request
   })
   const resource = context.resourcePath + context.resourceQuery
@@ -111,7 +111,7 @@ function genRequest(loaders: Loader[], context: webpack.loader.LoaderContext) {
 }
 
 function shouldIgnoreCustomBlock(loaders: Loader[]) {
-  const actualLoaders = loaders.filter(loader => {
+  const actualLoaders = loaders.filter((loader) => {
     // vue-loader
     if (loader.path === selfPath) {
       return false

src/pluginWebpack4.ts

@@ -12,7 +12,7 @@ class VueLoaderPlugin implements webpack.Plugin {
 
   apply(compiler: webpack.Compiler) {
     // inject NS for plugin installation check in the main loader
-    compiler.hooks.compilation.tap(id, compilation => {
+    compiler.hooks.compilation.tap(id, (compilation) => {
       compilation.hooks.normalModuleLoader.tap(id, (loaderContext: any) => {
         loaderContext[NS] = true
       })
@@ -45,7 +45,7 @@ class VueLoaderPlugin implements webpack.Plugin {
     // get the normlized "use" for vue files
     const vueUse = vueRule.use as webpack.RuleSetLoader[]
     // get vue-loader options
-    const vueLoaderUseIndex = vueUse.findIndex(u => {
+    const vueLoaderUseIndex = vueUse.findIndex((u) => {
       return /^vue-loader|(\/|\\|@)vue-loader/.test(u.loader || '')
     })
 
@@ -62,7 +62,7 @@ class VueLoaderPlugin implements webpack.Plugin {
 
     // 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 = {
@@ -71,7 +71,7 @@ class VueLoaderPlugin implements webpack.Plugin {
         const parsed = qs.parse(query.slice(1))
         return parsed.vue != null && parsed.type === 'template'
       },
-      options: vueLoaderOptions
+      options: vueLoaderOptions,
     }
 
     // for each rule that matches plain .js files, also create a clone and
@@ -80,7 +80,7 @@ class VueLoaderPlugin implements webpack.Plugin {
     // (mostly babel)
     const matchesJS = createMatcher(`test.js`)
     const jsRulesForRenderFn = rules
-      .filter(r => r !== vueRule && matchesJS(r))
+      .filter((r) => r !== vueRule && matchesJS(r))
       .map(cloneRuleForRenderFn)
 
     // pitcher for block requests (for injecting stylePostLoader and deduping
@@ -90,7 +90,7 @@ class VueLoaderPlugin implements webpack.Plugin {
       resourceQuery: (query: string) => {
         const parsed = qs.parse(query.slice(1))
         return parsed.vue != null
-      }
+      },
     }
 
     // replace original rules
@@ -99,7 +99,7 @@ class VueLoaderPlugin implements webpack.Plugin {
       ...jsRulesForRenderFn,
       templateCompilerRule,
       ...clonedRules,
-      ...rules
+      ...rules,
     ]
   }
 }
@@ -145,7 +145,7 @@ function cloneRule(rule: webpack.RuleSetRule) {
         return false
       }
       return true
-    }
+    },
   }
 
   if (rule.rules) {
@@ -182,7 +182,7 @@ function cloneRuleForRenderFn(rule: webpack.RuleSetRule) {
         return false
       }
       return true
-    }
+    },
   }
 
   if (rule.rules) {