feat: use component-compiler-utils

Author: znck

.gitignore

@@ -1,2 +1,5 @@
 .DS_Store
-node_modules
+node_modules
+/dist
+*.log
+/test/output/

example.js

@@ -0,0 +1,191 @@
+/* template */
+var render = function() {
+  var _vm = this
+  var _h = _vm.$createElement
+  var _c = _vm._self._c || _h
+  return _c("h1", { staticStyle: { color: "red" }, attrs: { id: "test" } }, [
+    _vm._v("Hello " + _vm._s(_vm.name) + "!")
+  ])
+}
+var staticRenderFns = []
+render._withStripped = true
+
+const __vue_render__ = typeof render !== 'undefined' ? { render, staticRenderFns } : {}
+/* style */
+const __vue_inject_styles__ = 0 ? function (context) {
+
+} : undefined
+/* script */
+//
+//
+//
+//
+
+const __vue_script__ = {
+  data () {
+    return { name: 'John Doe' }
+  }
+}
+
+/* scoped */
+const __vue_scope_id__ = false ? e(scopeId) : undefined
+/* functional template */
+const __vue_is_functional_template__ = false
+/* component normalizer */
+function __vue_normalize__(template, inject, script, scope, functional) {
+  const component = script || {}
+
+  if (!false) {
+    component.__file = "/Users/300005163/Workspace/OpenSource/vuejs/vue-component-compiler/test/fixtures/basic.vue"
+  }
+
+  if (!component.render) {
+    component.render = template.render
+    component.staticRenderFns = template.staticRenderFns
+    component._compiled = true
+
+    if (functional) component.functional = true
+  }
+
+  component.scopeId = scope
+
+  if (0) {
+    const call_inject = function(context) {
+      // 2.3 injection
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
+      // 2.2 with runInNewContext: true
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__
+      }
+      inject(function(id, style) {
+        let css = style.code
+        if (style.map) {
+          // https://developer.chrome.com/devtools/docs/javascript-debugging
+          // this makes source maps inside style tags work properly in Chrome
+          css += '
+/*# sourceURL=' + style.map.sources[0] + ' */'
+          // http://stackoverflow.com/a/26603875
+          css +=
+            '
+/*# sourceMappingURL=data:application/json;base64,' +
+            window.btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) +
+            ' */'
+        }
+        if (false) {
+          if (!context.hasOwnProperty('styles')) {
+            function renderStyles (styles) {
+              let css = ''
+              for (const key in styles) {
+                const it = styles[key]
+                css +=
+                  '<style data-vue-ssr-id="' + it.ids.join(' ') + '"' +
+                  (it.media ? ' media="' + it.media + '"' : '') +
+                  '>' +
+                  it.code +
+                  '</style>'
+              }
+              return css
+            }
+            Object.defineProperty(context, 'styles', {
+              enumerable: true,
+              get: () => renderStyles(context._styles)
+            })
+            // expose renderStyles for vue-server-renderer (vuejs/#6353)
+            context._renderStyles = renderStyles
+          }
+          const styles = context._styles || (context._styles = {})
+          const groupId = false ? style.media || 'default' : id
+          const target = styles[groupId]
+          if (target) {
+            if (target.ids.indexOf(id) < 0) {
+              target.ids.push(id)
+              target.code += '\n' + style.code
+            }
+          } else {
+            styles[groupId] = {
+              ids: [id],
+              style: style.code,
+              media: style.media
+            }
+          }
+        } else {
+          const head = document.head || document.getElementsByTagName('head')[0]
+          const isOldIE = typeof navigator !== 'undefined' && /msie [6-9]/.test(navigator.userAgent.toLowerCase())
+          const styleElement = document.querySelector('style[data-vue-ssr-id~="' + id + '"]')
+          if (styleElement) {
+            // SSR styles are present.
+            return
+          }
+
+          if (isOldIE) {
+            const indexKey = '__vue_style_singleton_counter__'
+            const textKey = '__vue_style_text__'
+            window[indexKey] = window[indexKey] || 0
+            const styles = window[textKey] = window[textKey] || []
+            const index = ++window[indexKey]
+            let styleElement = document.querySelector('style[data-vue-style-singleton=' + (style.media || '""') + ']')
+            if (!styleElement) {
+              styleElement = document.createElement('style')
+              styleElement.setAttribute('data-vue-style-singleton', style.media || '')
+              styleElement.type = 'text/css'
+              head.appendChild(style)
+            }
+            if (styleElement.styleSheet) {
+              styles[index] = css
+              styleElement.styleSheet.cssText = style.filter(Boolean).join('\n')
+            } else {
+              const cssNode = document.createTextNode(css)
+              const childNodes = styleElement.childNodes
+              if (childNodes[index]) styleElement.removeChild(childNodes[index])
+              if (childNodes.length) {
+                styleElement.insertBefore(cssNode, childNodes[index])
+              } else {
+                styleElement.appendChild(cssNode)
+              }
+            }
+          } else {
+            const styleElement = document.createElement('style')
+            styleElement.type = 'text/css'
+            styleElement.setAttribute('media', style.media)
+            head.appendChild(styleElement)
+            if (style.styleSheet) {
+              styleElement.styleSheet.cssText = css
+            } else {
+              styleElement.appendChild(document.createTextNode(css))
+            }
+          }
+        }
+      })
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(scope)
+      }
+    }
+    if (false) {
+      component._ssrRegister = call_inject
+    }
+    if (component.functional) {
+      const render = component.render
+      component.render = function renderWithInjection (h, ctx) {
+        call_inject.call(this, ctx)
+
+        return render(h, ctx)
+      }
+    } else {
+      const name = 'beforeCreate'
+      component[name] = component[name] ? [].concat(component[name], call_inject) : []
+    }
+  }
+
+  return component
+}
+
+export default __vue_normalize__(
+__vue_render__,
+__vue_inject_styles__,
+__vue_script__,
+__vue_scope_id__,
+__vue_is_functional_template__
+)

jest.config.js

@@ -1,12 +1,9 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'json',
-    'png',
-    'vue'
-  ],
+  moduleFileExtensions: ['js', 'json', 'png', 'ts', 'vue'],
   transform: {
-    '.*\.(js|vue|png)$': './test/setup/jest-helper.js'
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.ts$': '<rootDir>/node_modules/ts-jest/preprocessor.js',
+    '.*.(js|vue|png)$': './test/setup/jest-helper.js'
   },
-  testRegex: '.*\.spec.js'
+  testMatch: ['**/?(*.)(spec|test).ts']
 }