feat(plugin-vue): enhancements

plugins/plugin-vue/plugin-tsx-jsx.js

@@ -0,0 +1,18 @@
+const fs = require('fs');
+const scriptCompilers = require('./src/script-compilers');
+
+module.exports = function plugin(snowpackConfig, pluginOptions) {
+  return {
+    name: '@snowpack/plugin-vue-tsx-jsx',
+    resolve: {
+      input: ['.tsx', '.jsx'],
+      output: ['.js'],
+    },
+    async load({filePath, fileExt}) {
+      const content = fs.readFileSync(filePath, 'utf-8');
+      const lang = fileExt.slice(fileExt.lastIndexOf('.') + 1);
+      const result = scriptCompilers.esbuildCompile(content, lang);
+      return result;
+    },
+  };
+};

plugins/plugin-vue/plugin.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const hashsum = require('hash-sum');
 const compiler = require('@vue/compiler-sfc');
+const scriptCompilers = require('./src/script-compilers');
 
 /** Friendly error display */
 function displayError({contents, filePath, error}) {
@@ -56,14 +57,21 @@ module.exports = function plugin(snowpackConfig) {
       };
 
       if (descriptor.script) {
-        output['.js'].code += descriptor.script.content.replace(
-          `export default`,
-          'const defaultExport =',
-        );
+        const scriptLang = descriptor.script.lang;
+        let scriptContent = descriptor.script.content;
+        if (['jsx', 'ts', 'tsx'].includes(scriptLang)) {
+          scriptContent = scriptCompilers.esbuildCompile(
+            scriptContent,
+            scriptLang,
+          );
+        }
+        if (['js', 'ts'].includes(scriptLang) || !scriptLang) {
+          scriptContent = scriptContent.replace(`export default`, 'const defaultExport =');
+        }
+        output['.js'].code += scriptContent;
       } else {
         output['.js'].code += `const defaultExport = {};`;
       }
-
       await Promise.all(
         descriptor.styles.map((stylePart) => {
           const css = compiler.compileStyle({

plugins/plugin-vue/src/script-compilers.js

@@ -0,0 +1,65 @@
+/*
+
+This license applies to parts of this file originating from the
+https://github.com/vitejs/vite repository:
+
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+const esbuild = require('esbuild');
+
+const codeSnippetH = `import { Fragment } from '/web_modules/vue.js';`;
+
+// https://github.com/vitejs/vite/blob/master/src/client/vueJsxCompat.ts
+const codeSnippetVueJsxCompat = 
+`import {createVNode, isVNode} from '/web_modules/vue.js';
+const slice = Array.prototype.slice;
+export function jsx(tag, props = null, children = null) {
+  if (arguments.length > 3 || isVNode(children)) {
+    children = slice.call(arguments, 2);
+  }
+  return createVNode(tag, props, children);
+}`;
+
+/**
+ * @param {string} content
+ * @param {'jsx' | 'ts' | 'tsx'} lang
+ */
+const esbuildCompile = (content, lang) => {
+  let result = '';
+  if (['jsx', 'tsx'].includes(lang)) {
+    result += `${codeSnippetH}\n`;
+    result += `${codeSnippetVueJsxCompat}\n`;
+  }
+  const {js} = esbuild.transformSync(content, {
+    loader: lang,
+    jsxFactory: 'jsx',
+    jsxFragment: 'Fragment',
+  });
+  result += `\n${js.trim()}\n`;
+  return result.trim();
+};
+
+module.exports = {
+  esbuildCompile,
+};

plugins/plugin-vue/test/__snapshots__/plugin-tsx-jsx.test.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugin with jsx 1`] = `
+"import { Fragment } from '/web_modules/vue.js';
+import {createVNode, isVNode} from '/web_modules/vue.js';
+const slice = Array.prototype.slice;
+export function jsx(tag, props = null, children = null) {
+  if (arguments.length > 3 || isVNode(children)) {
+    children = slice.call(arguments, 2);
+  }
+  return createVNode(tag, props, children);
+}
+
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"JsxContent\\",
+  setup() {
+    return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\"h1\\", null, \\"JsxContent\\"));
+  }
+});"
+`;
+
+exports[`plugin with tsx 1`] = `
+"import { Fragment } from '/web_modules/vue.js';
+import {createVNode, isVNode} from '/web_modules/vue.js';
+const slice = Array.prototype.slice;
+export function jsx(tag, props = null, children = null) {
+  if (arguments.length > 3 || isVNode(children)) {
+    children = slice.call(arguments, 2);
+  }
+  return createVNode(tag, props, children);
+}
+
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"TsxContent\\",
+  setup() {
+    const name = \\"TsxContent\\";
+    return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\"h1\\", null, \\"TsxContent\\"));
+  }
+});"
+`;

plugins/plugin-vue/test/__snapshots__/plugin-vue-ts-tsx-jsx.test.js.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugin vue with jsx 1`] = `
+Object {
+  ".css": Object {
+    "code": "",
+    "map": "",
+  },
+  ".js": Object {
+    "code": "import { Fragment } from '/web_modules/vue.js';
+import {createVNode, isVNode} from '/web_modules/vue.js';
+const slice = Array.prototype.slice;
+export function jsx(tag, props = null, children = null) {
+  if (arguments.length > 3 || isVNode(children)) {
+    children = slice.call(arguments, 2);
+  }
+  return createVNode(tag, props, children);
+}
+
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"VueContentJsx\\",
+  setup() {
+    return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\"h1\\", null, \\"VueContentJsx\\"));
+  }
+});",
+    "map": "",
+  },
+}
+`;
+
+exports[`plugin vue with ts 1`] = `
+Object {
+  ".css": Object {
+    "code": "",
+    "map": "",
+  },
+  ".js": Object {
+    "code": "import {defineComponent} from \\"vue\\";
+const defaultExport = defineComponent({
+  name: \\"VueContentTs\\",
+  setup() {
+    const name = \\"VueContentTs\\";
+  }
+});
+import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from \\"/web_modules/vue.js\\"
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createBlock(\\"h1\\", null, \\"Vue Content Ts\\"))
+}
+
+defaultExport.render = render
+export default defaultExport",
+    "map": "",
+  },
+}
+`;
+
+exports[`plugin vue with tsx 1`] = `
+Object {
+  ".css": Object {
+    "code": "",
+    "map": "",
+  },
+  ".js": Object {
+    "code": "import { Fragment } from '/web_modules/vue.js';
+import {createVNode, isVNode} from '/web_modules/vue.js';
+const slice = Array.prototype.slice;
+export function jsx(tag, props = null, children = null) {
+  if (arguments.length > 3 || isVNode(children)) {
+    children = slice.call(arguments, 2);
+  }
+  return createVNode(tag, props, children);
+}
+
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"VueContentTsx\\",
+  setup() {
+    const name = \\"VueContentTsx\\";
+    return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\"h1\\", null, \\"VueContentTsx\\"));
+  }
+});",
+    "map": "",
+  },
+}
+`;