init

Author: yyx990803

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+node_modules
+*.log
+dist

.npmignore

@@ -0,0 +1,5 @@
+test
+jest.config.js
+tsconfig.json
+*.log
+*.lock

README.md

@@ -0,0 +1,127 @@
+# @vue/component-compiler-utils
+
+> Lower level utilities for compiling Vue single file components
+
+This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in [vue-loader](https://github.com/vuejs/vue-loader) version 15 and above.
+
+The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.
+
+## API
+
+### parse(ParseOptions): SFCDescriptor
+
+Parse raw single file component source into a descriptor with source maps.
+
+``` ts
+interface ParseOptions {
+  source: string
+  filename?: string
+  sourceRoot?: string
+  needMap?: boolean
+}
+
+interface SFCDescriptor {
+  template?: SFCBlock
+  script?: SFCBlock
+  styles: SFCBlock[]
+  customBlocks: SFCCustomBlock[]
+}
+
+interface SFCCustomBlock {
+  type: string
+  content: string
+  attrs: { [key: string]: string }
+  start: number
+  end: number
+  map: RawSourceMap
+}
+
+interface SFCBlock extends SFCCustomBlock {
+  lang?: string
+  src?: string
+  scoped?: boolean
+  module?: string | boolean
+}
+```
+
+### compileTemplate(TemplateCompileOptions): TemplateCompileResults
+
+Takes raw template source and compile it into JavaScript code. The actual compiler (`vue-template-compiler`) must be passed so that the specific version used can be determined by the end user.
+
+It can also optionally perform pre-processing for any templating engine supported by [consolidate](https://github.com/tj/consolidate.js/).
+
+``` ts
+interface TemplateCompileOptions {
+  source: string
+  filename: string
+
+  // See https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler
+  compiler: VueTemplateCompiler
+  compilerOptions?: VueTemplateCompilerOptions
+
+  // Template preprocessor
+  preprocessLang?: string
+  preprocessOptions?: any
+
+  // Transform asset urls found in the template into `require()` calls
+  // This is off by default. If set to true, the default value is
+  // {
+  //   video: ['src', 'poster'],
+  //   source: 'src',
+  //   img: 'src',
+  //   image: 'xlink:href'
+  // }
+  transformAssetUrls?: AssetURLOptions | boolean
+
+  // For vue-template-es2015-compiler, which is a fork of Buble
+  transpileOptions?: any
+
+  isProduction?: boolean  // default: false
+  isFunctional?: boolean  // default: false
+  optimizeSSR?: boolean   // default: false
+}
+
+interface TemplateCompileResult {
+  code: string
+  source: string
+  tips: string[]
+  errors: string[]
+}
+
+interface AssetURLOptions {
+  [name: string]: string | string[]
+}
+```
+
+#### Handling the Output
+
+The resulting JavaScript code will look like this:
+
+``` js
+var render = function (h) { /* ... */}
+var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}]
+```
+
+It **does NOT** assume any module system. It is your responsibility to handle the exports, if needed.
+
+### compileStyle(StyleCompileOptions)
+
+Take input raw CSS and applies scoped CSS transform. It does NOT handle pre-processors. If the component doesn't use scoped CSS then this step can be skipped.
+
+``` ts
+interface StyleCompileOptions {
+  source: string
+  filename: string
+  id: string
+  map?: any
+  scoped?: boolean
+  trim?: boolean
+}
+
+interface StyleCompileResults {
+  code: string
+  map: any | void
+  rawResult: LazyResult | void // raw lazy result from PostCSS
+  errors: string[]
+}
+```

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  moduleFileExtensions: ['ts', 'js', 'json'],
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+    '^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest/preprocessor.js'
+  }
+}

lib/compileStyle.ts

@@ -0,0 +1,71 @@
+import { ProcessOptions, LazyResult } from 'postcss'
+import postcss = require('postcss')
+import trimPlugin from './stylePlugins/trim'
+import scopedPlugin from './stylePlugins/scoped'
+
+export interface StyleCompileOptions {
+  source: string
+  filename: string
+  id: string
+  map?: any
+  scoped?: boolean
+  trim?: boolean
+}
+
+export interface StyleCompileResults {
+  code: string
+  map: any | void
+  rawResult: LazyResult | void
+  errors: string[]
+}
+
+export function compileStyle (
+  options: StyleCompileOptions
+): StyleCompileResults {
+  const {
+    source,
+    filename,
+    id,
+    map,
+    scoped = true,
+    trim = true
+  } = options
+
+  const plugins = []
+  if (trim) {
+    plugins.push(trimPlugin())
+  }
+  if (scoped) {
+    plugins.push(scopedPlugin(id))
+  }
+
+  const postCSSOptions: ProcessOptions = {
+    to: filename,
+    from: filename
+  }
+  if (map) {
+    postCSSOptions.map = {
+      inline: false,
+      annotation: false,
+      prev: map
+    }
+  }
+
+  let result, code, outMap
+  const errors = []
+  try {
+    result = postcss(plugins).process(source, postCSSOptions)
+    // force synchronous transform (we know we only have sync plugins)
+    code = result.css
+    outMap = result.map
+  } catch (e) {
+    errors.push(e)
+  }
+
+  return {
+    code: code || ``,
+    map: outMap && outMap.toJSON(),
+    errors,
+    rawResult: result
+  }
+}

lib/compileTemplate.ts

@@ -0,0 +1,161 @@
+import {
+  VueTemplateCompiler,
+  VueTemplateCompilerOptions
+} from './types'
+
+import assetUrlsModule, { AssetURLOptions } from './templateCompilerModules/assetUrl'
+import srcsetModule from './templateCompilerModules/srcset'
+
+const prettier = require('prettier')
+const consolidate = require('consolidate')
+const transpile = require('vue-template-es2015-compiler')
+
+export interface TemplateCompileOptions {
+  source: string
+  filename: string
+  compiler: VueTemplateCompiler
+  compilerOptions?: VueTemplateCompilerOptions
+  transformAssetUrls?: AssetURLOptions | boolean
+  preprocessLang?: string
+  preprocessOptions?: any
+  transpileOptions?: any
+  isProduction?: boolean
+  isFunctional?: boolean
+  optimizeSSR?: boolean
+}
+
+export interface TemplateCompileResult {
+  code: string
+  source: string
+  tips: string[]
+  errors: string[]
+}
+
+export function compileTemplate (
+  options: TemplateCompileOptions
+): TemplateCompileResult {
+  const { preprocessLang } = options
+  const preprocessor = preprocessLang && consolidate[preprocessLang]
+  if (preprocessor) {
+    return actuallyCompile(Object.assign({}, options, {
+      source: preprocess(options, preprocessor)
+    }))
+  } else {
+    return actuallyCompile(options)
+  }
+}
+
+function preprocess (
+  options: TemplateCompileOptions,
+  preprocessor: any
+): string {
+  const {
+    source,
+    filename,
+    preprocessOptions
+  } = options
+
+  const finalPreprocessOptions = Object.assign({
+    filename
+  }, preprocessOptions)
+
+  // Consolidate exposes a callback based API, but the callback is in fact
+  // called synchronously for most templating engines. In our case, we have to
+  // expose a synchronous API so that it is usable in Jest transforms (which
+  // have to be sync because they are applied via Node.js require hooks)
+  let res: any, err
+  preprocessor.render(
+    source,
+    finalPreprocessOptions,
+    (_err: Error | null, _res: string) => {
+      if (_err) err = _err
+      res = _res
+    }
+  )
+
+  if (err) throw err
+  return res
+}
+
+function actuallyCompile (
+  options: TemplateCompileOptions
+): TemplateCompileResult {
+  const {
+    source,
+    compiler,
+    compilerOptions = {},
+    transpileOptions = {},
+    transformAssetUrls,
+    isProduction = process.env.NODE_ENV === 'production',
+    isFunctional = false,
+    optimizeSSR = false
+  } = options
+
+  const compile = optimizeSSR && compiler.ssrCompile
+    ? compiler.ssrCompile
+    : compiler.compile
+
+  let finalCompilerOptions = compilerOptions
+  if (transformAssetUrls) {
+    const builtInModules = [
+      transformAssetUrls === true
+        ? assetUrlsModule()
+        : assetUrlsModule(transformAssetUrls),
+      srcsetModule()
+    ]
+    finalCompilerOptions = Object.assign({}, compilerOptions, {
+      modules: [...builtInModules, ...compilerOptions.modules || []]
+    })
+  }
+
+  const {
+    render,
+    staticRenderFns,
+    tips,
+    errors
+  } = compile(source, finalCompilerOptions)
+
+  if (errors && errors.length) {
+    return {
+      code: (
+        `var render = function () {}\n` +
+        `var staticRenderFns = []\n`
+      ),
+      source,
+      tips,
+      errors
+    }
+  } else {
+    const finalTranspileOptions = Object.assign({}, transpileOptions, {
+      transforms: Object.assign({}, transpileOptions.transforms, {
+        stripWithFunctional: isFunctional
+      })
+    })
+
+    const toFunction = (code: string): string => {
+      return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`
+    }
+
+    // transpile code with vue-template-es2015-compiler, which is a forked
+    // version of Buble that applies ES2015 transforms + stripping `with` usage
+    let code = transpile(
+      `var render = ${toFunction(render)}\n` +
+      `var staticRenderFns = [${staticRenderFns.map(toFunction)}]`,
+      finalTranspileOptions
+    ) + `\n`
+
+    if (!isProduction) {
+      // mark with stripped (this enables Vue to use correct runtime proxy
+      // detection)
+      code += `render._withStripped = true`
+      code = prettier.format(code, { semi: false })
+    }
+
+    return {
+      code,
+      source,
+      tips,
+      errors
+    }
+  }
+}