TypeScript vue-template-es2015-compiler Examples

Example #1

File: compileTemplate.ts Project: mvolkmann/MyUnixEnv

function actuallyCompile(
  options: TemplateCompileOptions
): TemplateCompileResult {
  const {
    source,
    compiler,
    compilerOptions = {},
    transpileOptions = {},
    transformAssetUrls,
    isProduction = process.env.NODE_ENV === 'production',
    isFunctional = false,
    optimizeSSR = false,
    prettify = true
  } = 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`

    // #23 we use __render__ to avoid `render` not being prefixed by the
    // transpiler when stripping with, but revert it back to `render` to
    // maintain backwards compat
    code = code.replace(/\s__(render|staticRenderFns)__\s/g, ' $1 ')

    if (!isProduction) {
      // mark with stripped (this enables Vue to use correct runtime proxy
      // detection)
      code += `render._withStripped = true`

      if (prettify) {
        code = require('prettier').format(code, {
          semi: false,
          parser: 'babel'
        })
      }
    }

    return {
      code,
      source,
      tips,
      errors
    }
  }
}

Example #2

File: compileTemplate.ts Project: gilFuser/gilFuser.github.io

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, parser: 'babylon' })
    }

    return {
      code,
      source,
      tips,
      errors
    }
  }
}