build: add browser builds for @vue/compiler-sfc

packages/compiler-sfc/src/compileStyle.ts

@@ -94,20 +94,24 @@ export function doCompileStyle(
   }
   let cssModules: Record<string, string> | undefined
   if (modules) {
-    if (options.isAsync) {
-      plugins.push(
-        require('postcss-modules')({
-          ...modulesOptions,
-          getJSON: (cssFileName: string, json: Record<string, string>) => {
-            cssModules = json
-          }
-        })
-      )
-    } else {
+    if (__GLOBAL__ || __ESM_BROWSER__) {
       throw new Error(
-        '`modules` option can only be used with compileStyleAsync().'
+        '[@vue/compiler-sfc] `modules` option is not supported in the browser build.'
       )
     }
+    if (!options.isAsync) {
+      throw new Error(
+        '[@vue/compiler-sfc] `modules` option can only be used with compileStyleAsync().'
+      )
+    }
+    plugins.push(
+      require('postcss-modules')({
+        ...modulesOptions,
+        getJSON: (_cssFileName: string, json: Record<string, string>) => {
+          cssModules = json
+        }
+      })
+    )
   }
 
   const postCSSOptions: ProcessOptions = {
@@ -172,6 +176,14 @@ function preprocess(
   options: SFCStyleCompileOptions,
   preprocessor: StylePreprocessor
 ): StylePreprocessorResults {
+  if ((__ESM_BROWSER__ || __GLOBAL__) && !options.preprocessCustomRequire) {
+    throw new Error(
+      `[@vue/compiler-sfc] Style preprocessing in the browser build must ` +
+        `provide the \`preprocessCustomRequire\` option to return the in-browser ` +
+        `version of the preprocessor.`
+    )
+  }
+
   return preprocessor.render(
     options.source,
     options.map,

packages/compiler-sfc/src/compileTemplate.ts

@@ -14,6 +14,8 @@ import {
 } from './templateTransformAssetUrl'
 import { transformSrcset } from './templateTransformSrcset'
 import { isObject } from '@vue/shared'
+import * as CompilerDOM from '@vue/compiler-dom'
+import * as CompilerSSR from '@vue/compiler-ssr'
 import consolidate from 'consolidate'
 
 export interface TemplateCompiler {
@@ -38,6 +40,7 @@ export interface SFCTemplateCompileOptions {
   compilerOptions?: CompilerOptions
   preprocessLang?: string
   preprocessOptions?: any
+  preprocessCustomRequire?: (id: string) => any
   transformAssetUrls?: AssetURLOptions | boolean
 }
 
@@ -66,9 +69,25 @@ function preprocess(
 export function compileTemplate(
   options: SFCTemplateCompileOptions
 ): SFCTemplateCompileResults {
-  const { preprocessLang } = options
-  const preprocessor =
-    preprocessLang && consolidate[preprocessLang as keyof typeof consolidate]
+  const { preprocessLang, preprocessCustomRequire } = options
+
+  if (
+    (__ESM_BROWSER__ || __GLOBAL__) &&
+    preprocessLang &&
+    !preprocessCustomRequire
+  ) {
+    throw new Error(
+      `[@vue/compiler-sfc] Template preprocessing in the browser build must ` +
+        `provide the \`preprocessCustomRequire\` option to return the in-browser ` +
+        `version of the preprocessor in the shape of { render(): string }.`
+    )
+  }
+
+  const preprocessor = preprocessLang
+    ? preprocessCustomRequire
+      ? preprocessCustomRequire(preprocessLang)
+      : require('consolidate')[preprocessLang as keyof typeof consolidate]
+    : false
   if (preprocessor) {
     try {
       return doCompileTemplate({
@@ -108,7 +127,7 @@ function doCompileTemplate({
   inMap,
   source,
   ssr = false,
-  compiler = ssr ? require('@vue/compiler-ssr') : require('@vue/compiler-dom'),
+  compiler = ssr ? (CompilerSSR as TemplateCompiler) : CompilerDOM,
   compilerOptions = {},
   transformAssetUrls
 }: SFCTemplateCompileOptions): SFCTemplateCompileResults {

packages/compiler-sfc/src/parse.ts

@@ -6,9 +6,9 @@ import {
   TextModes
 } from '@vue/compiler-core'
 import { RawSourceMap, SourceMapGenerator } from 'source-map'
-import LRUCache from 'lru-cache'
 import { generateCodeFrame } from '@vue/shared'
 import { TemplateCompiler } from './compileTemplate'
+import * as CompilerDOM from '@vue/compiler-dom'
 
 export interface SFCParseOptions {
   filename?: string
@@ -57,7 +57,13 @@ export interface SFCParseResult {
 }
 
 const SFC_CACHE_MAX_SIZE = 500
-const sourceToSFC = new LRUCache<string, SFCParseResult>(SFC_CACHE_MAX_SIZE)
+const sourceToSFC =
+  __GLOBAL__ || __ESM_BROWSER__
+    ? new Map<string, SFCParseResult>()
+    : (new (require('lru-cache'))(SFC_CACHE_MAX_SIZE) as Map<
+        string,
+        SFCParseResult
+      >)
 
 export function parse(
   source: string,
@@ -66,7 +72,7 @@ export function parse(
     filename = 'component.vue',
     sourceRoot = '',
     pad = false,
-    compiler = require('@vue/compiler-dom')
+    compiler = CompilerDOM
   }: SFCParseOptions = {}
 ): SFCParseResult {
   const sourceKey =