fix: avoid adding render function when no template in an SFC (#387)

elevatebart · web-flow · commit 6960203fdc42 · 2020-10-20T10:45:25.000+05:30
* test: make simple test more precise

* test: add the no-template example for test

* fix: when an SFC has no template leave render

* test: fix import example

* fix: missed template point

* tests: add missing dependencies necessary for test
diff --git a/examples/no-template/package.json b/examples/no-template/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "simple",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "dependencies": {
+    "rollup": "^2.10.9",
+    "rollup-plugin-vue": "link:../.."
+  }
+}
diff --git a/examples/no-template/rollup.config.js b/examples/no-template/rollup.config.js
@@ -0,0 +1,14 @@
+import VuePlugin from 'rollup-plugin-vue'
+
+export default [
+  {
+    input: 'src/HelloWorld.vue',
+    output: {
+      file: 'dist/HelloWorld.js',
+      format: 'esm',
+      sourcemap: 'inline',
+    },
+    plugins: [VuePlugin()],
+    external: ['vue'],
+  },
+]
diff --git a/examples/no-template/src/HelloWorld.vue b/examples/no-template/src/HelloWorld.vue
@@ -0,0 +1,10 @@
+<script>
+import { h } from 'vue'
+
+export default {
+  props: ['name'],
+  render() {
+    return h('div', 'my render')
+  },
+}
+</script>
diff --git a/examples/simple/rollup.config.js b/examples/simple/rollup.config.js
@@ -2,9 +2,9 @@ import VuePlugin from 'rollup-plugin-vue'
 
 export default [
   {
-    input: 'src/App.vue',
+    input: 'src/HelloWorld.vue',
     output: {
-      file: 'dist/app.js',
+      file: 'dist/HelloWorld.js',
       format: 'esm',
       sourcemap: 'inline',
     },
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@vue/compiler-sfc": "*"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/debug": "^4.1.5",
     "@types/jest": "^25.2.3",
     "@types/node": "^13.13.2",
@@ -35,6 +36,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "rollup": "^2.7.2",
+    "rollup-plugin-postcss": "^3.1.8",
     "ts-jest": "^26.0.0",
     "typescript": "^3.9.3"
   },
diff --git a/src/index.ts b/src/index.ts
@@ -417,13 +417,17 @@ function transformVueSFC(
   const id = hash(isProduction ? shortFilePath + '\n' + code : shortFilePath)
   // feature information
   const hasScoped = descriptor.styles.some((s) => s.scoped)
-  const templateImport = getTemplateCode(
-    descriptor,
-    resourcePath,
-    id,
-    hasScoped,
-    isServer
-  )
+
+  const templateImport = !descriptor.template
+    ? ''
+    : getTemplateCode(descriptor, resourcePath, id, hasScoped, isServer)
+
+  const renderReplace = !descriptor.template
+    ? ''
+    : isServer
+    ? `script.ssrRender = ssrRender`
+    : `script.render = render`
+
   const scriptImport = getScriptCode(descriptor, resourcePath)
   const stylesCode = getStyleCode(
     descriptor,
@@ -441,7 +445,7 @@ function transformVueSFC(
     templateImport,
     stylesCode,
     customBlocksCode,
-    isServer ? `script.ssrRender = ssrRender` : `script.render = render`,
+    renderReplace,
   ]
   if (hasScoped) {
     output.push(`script.__scopeId = ${_(`data-v-${id}`)}`)
diff --git a/test/core.e2e.ts b/test/core.e2e.ts
@@ -12,6 +12,20 @@ describe('simple', () => {
   })
 })
 
+describe('no-template', () => {
+  let result!: RollupOutput
+
+  beforeAll(async () => {
+    result = await roll('no-template')
+  })
+
+  it('should leave the render function alone when no template is in the SFC', () => {
+    expect(result.output[0].code).not.toEqual(
+      expect.stringContaining('.render =')
+    )
+  })
+})
+
 describe('custom-block', () => {
   let result!: RollupOutput
 
diff --git a/yarn.lock b/yarn.lock
