test: add assemble test examples which spit generated output

Author: znck

.circleci/config.yml

@@ -0,0 +1,23 @@
+version: 2
+jobs:
+  build:
+    working_directory: ~/rollup-plugin-vue
+    docker:
+      - image: circleci/node:8.5.0
+    steps:
+      - checkout
+      - run:
+          name: Install yarn if required
+          command: if ! type yarn > /dev/null; then; curl -o- -s -L https://yarnpkg.com/install.sh | bash; fi
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: Install package dependencies
+          command: yarn --no-progress install
+      - save_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: Test
+          command: npm test

index.d.ts

@@ -3,27 +3,42 @@ declare module VueComponentCompiler {
    * Parse SFC file into block descriptors.
    *
    * @param content Contents of the SFC.
-   * @param filename Filepath (used for cache key & in generated source maps)
+   * @param file Filepath (used for cache key & in generated source maps)
    */
-  export function parse(content: string, filename: string, config: ParserConfig): SFCDescriptor
+  export function parse(content: string, file: string, config: ParserConfig): SFCDescriptor
 
   /**
    * Compile styles for SFC
    *
    * @param styles List of styles to process.
-   * @param filename SFC file path
+   * @param file SFC file path
    */
-  export function compileStyles(styles: Array<StyleCompilerSource>, filename: string, config: StyleCompilerConfig): Promise<Array<StyleCompilerOutput>>
+  export function compileStyles(styles: Array<StyleCompilerSource>, file: string, config: StyleCompilerConfig): Promise<Array<StyleCompilerOutput>>
 
   /**
    * Compile template to render functions
    *
    * @param template Template to compile
-   * @param filename SFC file path
+   * @param file SFC file path
    */
-  export function compileTemplate(template: TemplateCompilerSource, filename: string, config: TemplateCompilerConfig): Promise<TemplateCompilerOutput>
+  export function compileTemplate(template: TemplateCompilerSource, file: string, config: TemplateCompilerConfig): Promise<TemplateCompilerOutput>
 
-  export function assemble(source: AssemblerSource, filename: string, config: AssemblerConfig): string
+  /**
+   * Assemble processed parts of SFC.
+   *
+   * @param source Processed sources with resolvable identifiers (`id`)
+   * @param file SFC file path
+   */
+  export function assemble(source: AssemblerSource, file: string, config: AssemblerConfig): string
+
+  /**
+   * Generate scope id for SFC, used in scoped styles.
+   *
+   * @param file SFC file path
+   * @param context file is required in context
+   * @param key
+   */
+  export function generateScopeId(file: string, context: string, key?: string): string
 
   type ParserConfig = {
     needMap: boolean
@@ -97,9 +112,11 @@ declare module VueComponentCompiler {
   }
 
   type TemplateCompilerConfig = {
+    scopeId: string
     isHot?: boolean // false
     isServer?: boolean // false
     isProduction?: boolean // true
+    esModule?: boolean // true
     optimizeSSR?: boolean // true
     buble: object // see https://github.com/vuejs/vue-template-es2015-compiler/blob/master/index.js#L6
     options?: {
@@ -142,7 +159,7 @@ declare module VueComponentCompiler {
       vueHotReloadAPI?: string // vue-hot-reload-api
       normalizeComponent?: string // vue-component-compiler/src/normalize-component.js
     }
-    moduleId: string // same as scopeId of style compiler.
+    scopeId: string // same as scopeId of style compiler.
     moduleIdentifier?: string // autogenerated
     isHot?: boolean // false
     isServer?: boolean // false

src/assemble.js

@@ -1,8 +1,6 @@
 const defaults = require('lodash.defaultsdeep')
 const hash = require('hash-sum')
 
-const genId = require('./gen-id')
-
 const DISPOSED = 'disposed'
 const INJECT_STYLE_FN = 'injectStyle'
 const CSS_MODULES = 'cssModules'
@@ -13,12 +11,12 @@ function _s (any) {
 
 // eslint-disable-next-line camelcase
 function __vue_type__ (type, id, esModule, addPrefix = true) {
-  let output = '\n/* script */\n'
+  let output = addPrefix ? `\n/* ${type} */\n` : ''
   if (id) {
     if (esModule) {
-      output += `import __vue_${type}__ from ${id}\n`
+      output += `import __vue_${type}__ from ${_s(id)}\n`
     } else {
-      output += `var __vue_${type}__ = ${id}\n`
+      output += `var __vue_${type}__ = require(${_s(id)})\n`
     }
   } else {
     output += `var __vue_${type}__ = null\n`
@@ -27,14 +25,14 @@ function __vue_type__ (type, id, esModule, addPrefix = true) {
 }
 
 module.exports = function assemble (source, filename, config) {
-  config = defaults(config, {
+  config = defaults({}, config, {
     esModule: true,
     shortFilePath: filename,
     require: {
       vueHotReloadAPI: 'vue-hot-reload-api',
       normalizeComponent: 'vue-component-compiler/src/normalize-component.js'
     },
-    moduleId: null,
+    scopeId: null,
     moduleIdentifier: config.moduleIdentifier || hash(_s({ filename, config })), // require for server. TODO: verify this is correct.
     isHot: false,
     isServer: false,
@@ -58,15 +56,15 @@ module.exports = function assemble (source, filename, config) {
     let styleInjectionCode = `function ${INJECT_STYLE_FN} (ssrContext) {\n`
 
     if (needsHotReload) styleInjectionCode += `if (${DISPOSED}) return`
-    if (config.isServer) styleInjectionCode += 'var i\n'
+    if (config.isServer) styleInjectionCode += '  var i\n'
 
     styles.forEach((style, i) => {
       const invokeStyle = config.isServer && config.hasStyleInjectFn
-        ? code => `;i=${code},i.__inject__&&i.__inject__(ssrContext),i)\n`
+        ? code => `  ;i=${code},i.__inject__&&i.__inject__(ssrContext),i)\n`
         : code => `  ${code}\n`
 
       const moduleName = (style.descriptor.module === true) ? '$style' : style.descriptor.module
-      const requireString = `require(${_s(style.id)}`
+      const requireString = `require(${_s(style.id)})`
 
       if (moduleName) {
         if (!cssModules) {
@@ -92,7 +90,7 @@ module.exports = function assemble (source, filename, config) {
               `Object.defineProperty(this, ${MODULE_KEY}, { get: function () { return ${CSS_MODULES}[${MODULE_KEY}] }})\n`
 
             output +=
-              `module.hot && module.hot.accept([${style.hotPath}], function () {\n` +
+              `module.hot && module.hot.accept([${_s(style.hotPath || style.id)}], function () {\n` +
               // 1. check if style has been injected
               `  var oldLocals = ${CSS_MODULES}[${MODULE_KEY}]\n` +
               `  if (!oldLocals) return\n` +
@@ -123,31 +121,33 @@ module.exports = function assemble (source, filename, config) {
   //   scopeId,
   //   moduleIdentifier (server only)
   // )
-  output += `var normalizeComponent = require(${_s(config.require.normalizeComponent)})\n`
+  output += config.esModule
+    ? `import normalizeComponent from ${_s(config.require.normalizeComponent)}\n`
+    : `var normalizeComponent = require(${_s(config.require.normalizeComponent)})\n`
   // <script>
   output += __vue_type__('script', script.id, config.esModule)
   if (config.isInjectable) {
     output +=
-      `if (__vue_script__) {__vue_script__ = __vue_script__(injections) } \n`
+      `if (__vue_script__) { __vue_script__ = __vue_script__(injections) }\n`
   }
 
   // <template>
   output += __vue_type__('template', render.id, config.esModule)
 
   // style
-  output += '/* styles */\n'
+  output += '\n/* styles */\n'
   output += 'var __vue_styles__ = ' + (styles.length ? 'injectStyle' : 'null') + '\n'
 
   // scopeId
-  output += '/* scopeId */\n'
-  output += 'var __vue_scopeId__ = ' + (hasScoped ? _s(config.moduleId) : 'null') + '\n'
+  output += '\n/* scopeId */\n'
+  output += 'var __vue_scopeId__ = ' + (hasScoped ? _s(config.scopeId) : 'null') + '\n'
 
   // moduleIdentifier (server only)
-  output += '/* moduleIdentifier (server only) */\n'
+  output += '\n/* moduleIdentifier (server only) */\n'
   output += 'var __vue_module_identifier__ = ' + (config.isServer ? _s(config.moduleIdentifier) : 'null') + '\n'
 
   // close normalizeComponent call
-  output += 'var Component = normalizeComponent(\n' +
+  output += '\nvar Component = normalizeComponent(\n' +
   '  __vue_script__,\n' +
   '  __vue_template__,\n' +
   '  __vue_styles__,\n' +
@@ -161,19 +161,19 @@ module.exports = function assemble (source, filename, config) {
     output += `Component.options.__file = ${_s(config.shortFilePath)}\n`
     // check named exports
     output +=
-      'if (Component.esModule && Object.keys(Component.esModule).some(function (key) {' +
-        'return key !== "default" && key.substr(0, 2) !== "__"' +
-      '})) {' +
-        'console.error("named exports are not supported in *.vue files.")' +
-      '}\n'
+      `if (Component.esModule && Object.keys(Component.esModule).some(function (key) {\n` +
+      `  return key !== "default" && key.substr(0, 2) !== "__"\n` +
+      `})) {\n` +
+      `  console.error("named exports are not supported in *.vue files.")\n` +
+      `}\n`
     // check functional components used with templates
     if (render.id) {
       output +=
-        'if (Component.options.functional) {' +
-          'console.error("' +
+        'if (Component.options.functional) {\n' +
+        '  console.error("' +
           '[vue-loader] ' + filename + ': functional components are not ' +
           'supported with templates, they should use render functions.' +
-        '")}\n'
+        '")\n}\n'
     }
   }
 
@@ -182,14 +182,14 @@ module.exports = function assemble (source, filename, config) {
     customBlocks.forEach((customBlock, i) => {
       const TYPE = `customBlock_${customBlock.descriptor.type}_${i}`
       const BLOCK = `__vue_${TYPE}__`
-      output += __vue_type__(TYPE, customBlock.id, config.esModule, addedPrefix)
+      if (!addedPrefix) output += `\n/* Custom Blocks */\n`
+      output += __vue_type__(TYPE, customBlock.id, config.esModule, false)
       output += `if (typeof ${BLOCK} === 'function') { ${BLOCK}(Component) }\n`
       addedPrefix = true
     })
-    output += '\n'
   }
 
-  if (config.isInjectable) {
+  if (!config.isInjectable) {
     if (needsHotReload) {
       output +=
         `\n/* hot reload */\n` +
@@ -233,10 +233,14 @@ module.exports = function assemble (source, filename, config) {
   } else {
     output =
       `\n/* dependency injection */\n` +
-      `module.exports = function (injections) {\n${output}\n` +
+      `module.exports = function (injections) {\n${pad(output)}\n` +
       `  return Component.exports\n` +
       `}\n`
   }
 
   return output
 }
+
+function pad (content) {
+  return content.split('\n').map(line => '  ' + line).join('\n')
+}

src/gen-id.js

@@ -1,13 +1,14 @@
 // utility for generating a uid for each component file
 // used in scoped CSS rewriting
-var path = require('path')
-var hash = require('hash-sum')
-var cache = Object.create(null)
-var sepRE = new RegExp(path.sep.replace('\\', '\\\\'), 'g')
+const path = require('path')
+const hash = require('hash-sum')
+const cache = Object.create(null)
+const sepRE = new RegExp(path.sep.replace('\\', '\\\\'), 'g')
 
 module.exports = function genId (file, context, key) {
-  var contextPath = context.split(path.sep)
-  var rootId = contextPath[contextPath.length - 1]
+  const contextPath = context.split(path.sep)
+  const rootId = contextPath[contextPath.length - 1]
   file = rootId + '/' + path.relative(context, file).replace(sepRE, '/') + (key || '')
+
   return cache[file] || (cache[file] = hash(file))
 }

src/index.js

@@ -2,5 +2,6 @@ module.exports = {
   parse: require('./parser'),
   compileStyles: require('./style-compiler'),
   compileTemplate: require('./template-compiler'),
-  assemble: require('./assemble')
+  assemble: require('./assemble'),
+  generateScopeId: require('./gen-id')
 }

src/template-compiler/index.js

@@ -11,6 +11,7 @@ module.exports = function compileTemplate (template, filename, config) {
     {
       isHot: false,
       isServer: false,
+      esModule: true,
       isProduction: true,
       optimizeSSR: true,
       buble: {
@@ -40,7 +41,7 @@ module.exports = function compileTemplate (template, filename, config) {
   const vueHotReloadAPI = (config.require && config.require.vueHotReloadAPI) || 'vue-hot-reload-api'
 
   if (output.errors && output.errors.length) {
-    output.code = config.esModule !== false
+    output.code = config.esModule === true
       ? `export function render () {}\nexport var staticRenderFns = []`
       : 'module.exports={render:function(){},staticRenderFns:[]}'
   } else {
@@ -59,7 +60,7 @@ module.exports = function compileTemplate (template, filename, config) {
     }
 
     const __exports__ = `{ render: render, staticRenderFns: staticRenderFns }`
-    output.code += config.esModule !== false
+    output.code += config.esModule === true
       ? `export default ${__exports__}`
       : `module.exports = ${__exports__}`