feat plugin-vue-enhance

plugins/plugin-vue/.gitignore

@@ -0,0 +1 @@
+coverage

plugins/plugin-vue/package.json

@@ -6,12 +6,23 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "test": "jest"
+  },
   "dependencies": {
     "@vue/compiler-sfc": "^3.0.0-0",
     "hash-sum": "^2.0.0"
   },
   "devDependencies": {
+    "jest": "^26.4.2",
     "vue": "*"
   },
-  "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4"
+  "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4",
+  "jest": {
+    "collectCoverageFrom": [
+      "plugin.js",
+      "script-compilers.js",
+      "!**/node_modules/**"
+    ]
+  }
 }

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

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const scriptCompilers = require('./src/script-compilers');
+
+module.exports = function plugin(snowpackConfig, pluginOptions) {
+  const curPluginOptions = pluginOptions || {};
+  const {sourceMaps} = snowpackConfig.buildOptions;
+  const tsconfigFilePath = curPluginOptions.tsconfig;
+
+  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, tsconfigFilePath);
+      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}) {
@@ -31,7 +32,10 @@ function displayError({contents, filePath, error}) {
   return output.join('\n');
 }
 
-module.exports = function plugin(snowpackConfig) {
+module.exports = function plugin(snowpackConfig, pluginOptions) {
+  const curPluginOptions = pluginOptions || {};
+  const tsconfigFilePath = curPluginOptions.tsconfig;
+
   return {
     name: '@snowpack/plugin-vue',
     resolve: {
@@ -56,14 +60,22 @@ 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,
+            tsconfigFilePath,
+          );
+        }
+        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,39 @@
+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
+ * @param {string} [tsconfig]
+ */
+const esbuildCompile = (content, lang, tsconfig) => {
+  let result = '';
+  if (['jsx', 'tsx'].includes(lang)) {
+    result += `${codeSnippetH}\n`;
+    result += `${codeSnippetVueJsxCompat}\n`;
+  }
+  const {js} = esbuild.transformSync(content, {
+    loader: lang,
+    tsconfig,
+    jsxFactory: tsconfig ? undefined : 'jsx',
+    jsxFragment: tsconfig ? undefined : '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,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugin with jsx 1`] = `
+"import { h, Fragment } from '/web_modules/vue.js';
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"JsxContent\\",
+  setup() {
+    return () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(\\"h1\\", null, \\"JsxContent\\"));
+  }
+});"
+`;
+
+exports[`plugin with tsx 1`] = `
+"import { h, Fragment } from '/web_modules/vue.js';
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"TsxContent\\",
+  setup() {
+    const name = \\"TsxContent\\";
+    return () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(\\"h1\\", null, \\"TsxContent\\"));
+  }
+});"
+`;

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

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`plugin vue with jsx 1`] = `
+Object {
+  ".css": Object {
+    "code": "",
+    "map": "",
+  },
+  ".js": Object {
+    "code": "import { h, Fragment } from '/web_modules/vue.js';
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"VueContentJsx\\",
+  setup() {
+    return () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(\\"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 { h, Fragment } from '/web_modules/vue.js';
+import {defineComponent} from \\"vue\\";
+export default defineComponent({
+  name: \\"VueContentTsx\\",
+  setup() {
+    const name = \\"VueContentTsx\\";
+    return () => /* @__PURE__ */ h(Fragment, null, /* @__PURE__ */ h(\\"h1\\", null, \\"VueContentTsx\\"));
+  }
+});",
+    "map": "",
+  },
+}
+`;