From 88eefad570b13e14bd11a51009afd47c090704c5 Mon Sep 17 00:00:00 2001 From: akimyou Date: Wed, 2 Sep 2020 18:34:24 +0800 Subject: [PATCH 1/5] feat plugin-vue-enhance --- plugins/plugin-vue/plugin-tsx-jsx.js | 22 ++ plugins/plugin-vue/plugin.js | 24 +- plugins/plugin-vue/src/script-compilers.js | 39 +++ .../__snapshots__/plugin-tsx-jsx.test.js.snap | 42 +++ .../plugin-vue-ts-tsx-jsx.test.js.snap | 87 ++++++ .../test/__snapshots__/plugin.test.js.snap | 253 ++++++++++++++++++ .../script-compilers.test.js.snap | 64 +++++ .../plugin-vue/test/plugin-tsx-jsx.test.js | 32 +++ .../test/plugin-vue-ts-tsx-jsx.test.js | 44 +++ plugins/plugin-vue/test/plugin.test.js | 95 +++++++ .../plugin-vue/test/script-compilers.test.js | 33 +++ plugins/plugin-vue/test/stubs/JsxContent.jsx | 12 + plugins/plugin-vue/test/stubs/TsContent.ts | 8 + plugins/plugin-vue/test/stubs/TsxContent.tsx | 13 + plugins/plugin-vue/test/stubs/VueContent.vue | 60 +++++ .../test/stubs/VueContentErrorStyle.vue | 12 + .../test/stubs/VueContentErrorTpl.vue | 7 + .../plugin-vue/test/stubs/VueContentJsx.vue | 14 + .../test/stubs/VueContentOnlyTpl.vue | 3 + .../test/stubs/VueContentStyleScoped.vue | 13 + .../plugin-vue/test/stubs/VueContentTs.vue | 14 + .../plugin-vue/test/stubs/VueContentTsx.vue | 15 ++ plugins/plugin-vue/test/stubs/tsconfig.json | 7 + 23 files changed, 907 insertions(+), 6 deletions(-) create mode 100644 plugins/plugin-vue/plugin-tsx-jsx.js create mode 100644 plugins/plugin-vue/src/script-compilers.js create mode 100644 plugins/plugin-vue/test/__snapshots__/plugin-tsx-jsx.test.js.snap create mode 100644 plugins/plugin-vue/test/__snapshots__/plugin-vue-ts-tsx-jsx.test.js.snap create mode 100644 plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap create mode 100644 plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap create mode 100644 plugins/plugin-vue/test/plugin-tsx-jsx.test.js create mode 100644 plugins/plugin-vue/test/plugin-vue-ts-tsx-jsx.test.js create mode 100644 plugins/plugin-vue/test/plugin.test.js create mode 100644 plugins/plugin-vue/test/script-compilers.test.js create mode 100644 plugins/plugin-vue/test/stubs/JsxContent.jsx create mode 100644 plugins/plugin-vue/test/stubs/TsContent.ts create mode 100644 plugins/plugin-vue/test/stubs/TsxContent.tsx create mode 100644 plugins/plugin-vue/test/stubs/VueContent.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentJsx.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentOnlyTpl.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentStyleScoped.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentTs.vue create mode 100644 plugins/plugin-vue/test/stubs/VueContentTsx.vue create mode 100644 plugins/plugin-vue/test/stubs/tsconfig.json diff --git a/plugins/plugin-vue/plugin-tsx-jsx.js b/plugins/plugin-vue/plugin-tsx-jsx.js new file mode 100644 index 0000000000..f5e3cad582 --- /dev/null +++ b/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; + }, + }; +}; diff --git a/plugins/plugin-vue/plugin.js b/plugins/plugin-vue/plugin.js index 6c8dc95236..ec42e2abaa 100644 --- a/plugins/plugin-vue/plugin.js +++ b/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({ diff --git a/plugins/plugin-vue/src/script-compilers.js b/plugins/plugin-vue/src/script-compilers.js new file mode 100644 index 0000000000..43c21491c3 --- /dev/null +++ b/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, +}; diff --git a/plugins/plugin-vue/test/__snapshots__/plugin-tsx-jsx.test.js.snap b/plugins/plugin-vue/test/__snapshots__/plugin-tsx-jsx.test.js.snap new file mode 100644 index 0000000000..4f68d3db2a --- /dev/null +++ b/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\\")); + } +});" +`; diff --git a/plugins/plugin-vue/test/__snapshots__/plugin-vue-ts-tsx-jsx.test.js.snap b/plugins/plugin-vue/test/__snapshots__/plugin-vue-ts-tsx-jsx.test.js.snap new file mode 100644 index 0000000000..7896791146 --- /dev/null +++ b/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": "", + }, +} +`; diff --git a/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap b/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap new file mode 100644 index 0000000000..546d07b838 --- /dev/null +++ b/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap @@ -0,0 +1,253 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`plugin base 1`] = ` +Object { + ".css": Object { + "code": " +.App { + text-align: center; +} +.App-header { + background-color: #f9f6f6; + color: #32485f; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); +} +.App-link { + color: #00c185; +} +.App-logo { + height: 40vmin; + pointer-events: none; + margin-bottom: 1rem; + animation: App-logo-spin infinite 1.6s ease-in-out alternate; +} +@keyframes App-logo-spin { +from { + transform: scale(1); +} +to { + transform: scale(1.06); +} +} +", + "map": "", + }, + ".js": Object { + "code": " +const defaultExport = { + data() { + return { + message: \\"Learn Vue\\" + }; + } +}; + +import { createVNode as _createVNode, createTextVNode as _createTextVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from \\"/web_modules/vue.js\\" + +const _hoisted_1 = { class: \\"App\\" } +const _hoisted_2 = { class: \\"App-header\\" } +const _hoisted_3 = /*#__PURE__*/_createVNode(\\"img\\", { + src: \\"/logo.svg\\", + class: \\"App-logo\\", + alt: \\"logo\\" +}, null, -1 /* HOISTED */) +const _hoisted_4 = /*#__PURE__*/_createVNode(\\"p\\", null, [ + /*#__PURE__*/_createTextVNode(\\" Edit \\"), + /*#__PURE__*/_createVNode(\\"code\\", null, \\"src/App.vue\\"), + /*#__PURE__*/_createTextVNode(\\" and save to reload. \\") +], -1 /* HOISTED */) +const _hoisted_5 = { + class: \\"App-link\\", + href: \\"https://vuejs.org\\", + target: \\"_blank\\", + rel: \\"noopener noreferrer\\" +} + +export function render(_ctx, _cache) { + return (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [ + _createVNode(\\"header\\", _hoisted_2, [ + _hoisted_3, + _hoisted_4, + _createVNode(\\"a\\", _hoisted_5, _toDisplayString(_ctx.message), 1 /* TEXT */) + ]) + ])) +} + +defaultExport.render = render +export default defaultExport", + "map": "", + }, +} +`; + +exports[`plugin base only tpl 1`] = ` +Object { + ".css": Object { + "code": "", + "map": "", + }, + ".js": Object { + "code": "const defaultExport = {}; +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 Only Tpl\\")) +} + +defaultExport.render = render +export default defaultExport", + "map": "", + }, +} +`; + +exports[`plugin base style scoped 1`] = ` +Object { + ".css": Object { + "code": " +h1[data-v-46843ce0] { + color: red; +} +", + "map": "", + }, + ".js": Object { + "code": " +const defaultExport = {}; + +import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"/web_modules/vue.js\\" +const _withId = /*#__PURE__*/_withScopeId(\\"data-v-46843ce0\\") + +export const render = /*#__PURE__*/_withId(function render(_ctx, _cache) { + return (_openBlock(), _createBlock(\\"h1\\", null, \\"Vue Content Style Scoped\\")) +}) + +defaultExport.render = render +export default defaultExport", + "map": "", + }, +} +`; + +exports[`plugin base with error style 1`] = ` +Object { + ".css": Object { + "code": "", + "map": "", + }, + ".js": Object { + "code": " +const defaultExport = {}; + +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 Error Style\\")) +} + +defaultExport.render = render +export default defaultExport", + "map": "", + }, +} +`; + +exports[`plugin base with error tpl 1`] = ` +[Error: SyntaxError: Element is missing end tag. +[/Users/myouaki/Desktop/Develop/atome-fe/snowpack/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue] Line 2, Column 28 + + 1 | ] +`; + +exports[`plugin base with sourceMap 1`] = ` +Object { + ".css": Object { + "code": " +.App { + text-align: center; +} +.App-header { + background-color: #f9f6f6; + color: #32485f; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); +} +.App-link { + color: #00c185; +} +.App-logo { + height: 40vmin; + pointer-events: none; + margin-bottom: 1rem; + animation: App-logo-spin infinite 1.6s ease-in-out alternate; +} +@keyframes App-logo-spin { +from { + transform: scale(1); +} +to { + transform: scale(1.06); +} +} +", + "map": "", + }, + ".js": Object { + "code": " +const defaultExport = { + data() { + return { + message: \\"Learn Vue\\" + }; + } +}; + +import { createVNode as _createVNode, createTextVNode as _createTextVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from \\"/web_modules/vue.js\\" + +const _hoisted_1 = { class: \\"App\\" } +const _hoisted_2 = { class: \\"App-header\\" } +const _hoisted_3 = /*#__PURE__*/_createVNode(\\"img\\", { + src: \\"/logo.svg\\", + class: \\"App-logo\\", + alt: \\"logo\\" +}, null, -1 /* HOISTED */) +const _hoisted_4 = /*#__PURE__*/_createVNode(\\"p\\", null, [ + /*#__PURE__*/_createTextVNode(\\" Edit \\"), + /*#__PURE__*/_createVNode(\\"code\\", null, \\"src/App.vue\\"), + /*#__PURE__*/_createTextVNode(\\" and save to reload. \\") +], -1 /* HOISTED */) +const _hoisted_5 = { + class: \\"App-link\\", + href: \\"https://vuejs.org\\", + target: \\"_blank\\", + rel: \\"noopener noreferrer\\" +} + +export function render(_ctx, _cache) { + return (_openBlock(), _createBlock(\\"div\\", _hoisted_1, [ + _createVNode(\\"header\\", _hoisted_2, [ + _hoisted_3, + _hoisted_4, + _createVNode(\\"a\\", _hoisted_5, _toDisplayString(_ctx.message), 1 /* TEXT */) + ]) + ])) +} + +defaultExport.render = render +export default defaultExport", + "map": "", + }, +} +`; diff --git a/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap b/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap new file mode 100644 index 0000000000..00ccc9e37e --- /dev/null +++ b/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap @@ -0,0 +1,64 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`esbuildCompile 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[`esbuildCompile ts 1`] = ` +"import {defineComponent} from \\"vue\\"; +export default defineComponent({ + name: \\"TsContent\\", + setup() { + const name = \\"TsContent\\"; + } +});" +`; + +exports[`esbuildCompile 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\\")); + } +});" +`; + +exports[`esbuildCompile tsx with tsconfig 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\\")); + } +});" +`; diff --git a/plugins/plugin-vue/test/plugin-tsx-jsx.test.js b/plugins/plugin-vue/test/plugin-tsx-jsx.test.js new file mode 100644 index 0000000000..2048a0930e --- /dev/null +++ b/plugins/plugin-vue/test/plugin-tsx-jsx.test.js @@ -0,0 +1,32 @@ +const path = require('path'); +const pluginTsxJsx = require('../plugin-tsx-jsx.js'); + +test('plugin with tsx', async () => { + const pluginInstance = pluginTsxJsx({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/TsxContent.tsx'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + fileExt: '.tsx', + }); + expect(resultContent).toMatchSnapshot(); +}); + +test('plugin with jsx', async () => { + const pluginInstance = pluginTsxJsx({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/JsxContent.jsx'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + fileExt: '.jsx', + }); + expect(resultContent).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/plugins/plugin-vue/test/plugin-vue-ts-tsx-jsx.test.js b/plugins/plugin-vue/test/plugin-vue-ts-tsx-jsx.test.js new file mode 100644 index 0000000000..ac20928d1b --- /dev/null +++ b/plugins/plugin-vue/test/plugin-vue-ts-tsx-jsx.test.js @@ -0,0 +1,44 @@ +const path = require('path'); +const plugin = require('../plugin'); + +test('plugin vue with ts', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentTs.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); + +test('plugin vue with tsx', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentTsx.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); + +test('plugin vue with jsx', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentJsx.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/plugins/plugin-vue/test/plugin.test.js b/plugins/plugin-vue/test/plugin.test.js new file mode 100644 index 0000000000..e32f868f74 --- /dev/null +++ b/plugins/plugin-vue/test/plugin.test.js @@ -0,0 +1,95 @@ +const path = require('path'); +const plugin = require('../plugin'); + +test('plugin base', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: false, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContent.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); + +test('plugin base with sourceMap', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContent.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); + +test('plugin base only tpl', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentOnlyTpl.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); + +// BUG: hashsum maybe different in test environment +test.skip('plugin base style scoped', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentStyleScoped.vue'); + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); +}); + +test('plugin base with error tpl', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentErrorTpl.vue'); + try { + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); + } catch (error) { + expect(error).toMatchSnapshot(); + } +}); + +test('plugin base with error style', async () => { + const pluginInstance = plugin({ + buildOptions: { + sourceMap: true, + }, + }); + const pluginLoad = pluginInstance.load; + const codeFilePath = path.resolve(__dirname, './stubs/VueContentErrorStyle.vue'); + try { + const resultContent = await pluginLoad({ + filePath: codeFilePath, + }); + expect(resultContent).toMatchSnapshot(); + } catch (error) { + expect(error).toMatchSnapshot(); + } +}); \ No newline at end of file diff --git a/plugins/plugin-vue/test/script-compilers.test.js b/plugins/plugin-vue/test/script-compilers.test.js new file mode 100644 index 0000000000..5030770f79 --- /dev/null +++ b/plugins/plugin-vue/test/script-compilers.test.js @@ -0,0 +1,33 @@ +const fs = require('fs'); +const path = require('path'); +const scriptCompilers = require('../src/script-compilers'); + +test('esbuildCompile ts', () => { + const { esbuildCompile } = scriptCompilers; + const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/TsContent.ts')).toString(); + const resultContent = esbuildCompile(codeContent, 'ts'); + expect(resultContent).toMatchSnapshot(); +}); + +test('esbuildCompile tsx', () => { + const { esbuildCompile } = scriptCompilers; + const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/TsxContent.tsx')).toString(); + const resultContent = esbuildCompile(codeContent, 'tsx'); + expect(resultContent).toMatchSnapshot(); +}); + +test('esbuildCompile jsx', () => { + const { esbuildCompile } = scriptCompilers; + const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/JsxContent.jsx')).toString(); + const resultContent = esbuildCompile(codeContent, 'jsx'); + expect(resultContent).toMatchSnapshot(); +}); + +// BUG: https://github.com/evanw/esbuild/issues/366 +test.skip('esbuildCompile tsx with tsconfig', () => { + const { esbuildCompile } = scriptCompilers; + const tsconfigFilePath = path.join(__dirname, './stubs/tsconfig.json'); + const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/TsxContent.tsx')).toString(); + const resultContent = esbuildCompile(codeContent, 'tsx', tsconfigFilePath); + expect(resultContent).toMatchSnapshot(); +}); diff --git a/plugins/plugin-vue/test/stubs/JsxContent.jsx b/plugins/plugin-vue/test/stubs/JsxContent.jsx new file mode 100644 index 0000000000..c35780d78c --- /dev/null +++ b/plugins/plugin-vue/test/stubs/JsxContent.jsx @@ -0,0 +1,12 @@ +import {defineComponent} from 'vue'; + +export default defineComponent({ + name: 'JsxContent', + setup() { + return () => ( + <> +

JsxContent

+ + ); + }, +}); diff --git a/plugins/plugin-vue/test/stubs/TsContent.ts b/plugins/plugin-vue/test/stubs/TsContent.ts new file mode 100644 index 0000000000..21162e7e77 --- /dev/null +++ b/plugins/plugin-vue/test/stubs/TsContent.ts @@ -0,0 +1,8 @@ +import {defineComponent} from 'vue'; + +export default defineComponent({ + name: 'TsContent', + setup() { + const name: string = 'TsContent'; + }, +}); diff --git a/plugins/plugin-vue/test/stubs/TsxContent.tsx b/plugins/plugin-vue/test/stubs/TsxContent.tsx new file mode 100644 index 0000000000..5fd1826a2d --- /dev/null +++ b/plugins/plugin-vue/test/stubs/TsxContent.tsx @@ -0,0 +1,13 @@ +import {defineComponent} from 'vue'; + +export default defineComponent({ + name: 'TsxContent', + setup() { + const name: string = 'TsxContent'; + return () => ( + <> +

TsxContent

+ + ); + }, +}); diff --git a/plugins/plugin-vue/test/stubs/VueContent.vue b/plugins/plugin-vue/test/stubs/VueContent.vue new file mode 100644 index 0000000000..5134670b00 --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContent.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue b/plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue new file mode 100644 index 0000000000..6883302f5d --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue @@ -0,0 +1,12 @@ + + + + + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue b/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue new file mode 100644 index 0000000000..30cd6164ea --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentJsx.vue b/plugins/plugin-vue/test/stubs/VueContentJsx.vue new file mode 100644 index 0000000000..375a38f291 --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentJsx.vue @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentOnlyTpl.vue b/plugins/plugin-vue/test/stubs/VueContentOnlyTpl.vue new file mode 100644 index 0000000000..a443d83225 --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentOnlyTpl.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentStyleScoped.vue b/plugins/plugin-vue/test/stubs/VueContentStyleScoped.vue new file mode 100644 index 0000000000..802a70c90d --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentStyleScoped.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentTs.vue b/plugins/plugin-vue/test/stubs/VueContentTs.vue new file mode 100644 index 0000000000..0c46f9a3b1 --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentTs.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentTsx.vue b/plugins/plugin-vue/test/stubs/VueContentTsx.vue new file mode 100644 index 0000000000..8f2c03fdfa --- /dev/null +++ b/plugins/plugin-vue/test/stubs/VueContentTsx.vue @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/tsconfig.json b/plugins/plugin-vue/test/stubs/tsconfig.json new file mode 100644 index 0000000000..2613afea43 --- /dev/null +++ b/plugins/plugin-vue/test/stubs/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "jsx": "preserve", + "jsxFactory": "h", + "jsxFragmentFactory": "Fragment" + } +} From 0bc296300154e89dfeafb199e17e1025f3854ff4 Mon Sep 17 00:00:00 2001 From: akimyou Date: Thu, 3 Sep 2020 23:31:33 +0800 Subject: [PATCH 2/5] fix vue css hmr --- snowpack/src/commands/dev.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/snowpack/src/commands/dev.ts b/snowpack/src/commands/dev.ts index f299a72884..5261b48585 100644 --- a/snowpack/src/commands/dev.ts +++ b/snowpack/src/commands/dev.ts @@ -636,6 +636,14 @@ If Snowpack is having trouble detecting the import, add ${colors.bold( const {code, map} = output[requestedFileExt]; let finalResponse = code; + // Wrap the response. + const hasAttachedCss = requestedFileExt === '.js' && !!output['.css']; + finalResponse = await wrapResponse(finalResponse, { + hasCssResource: hasAttachedCss, + sourceMap: map, + sourceMappingURL: path.basename(requestedFile.base) + '.map', + }); + // Resolve imports. if ( requestedFileExt === '.js' || @@ -649,14 +657,6 @@ If Snowpack is having trouble detecting the import, add ${colors.bold( ); } - // Wrap the response. - const hasAttachedCss = requestedFileExt === '.js' && !!output['.css']; - finalResponse = await wrapResponse(finalResponse, { - hasCssResource: hasAttachedCss, - sourceMap: map, - sourceMappingURL: path.basename(requestedFile.base) + '.map', - }); - // Return the finalized response. return finalResponse; } From 065b6bc897fecada0567cad524935cfd0c7d6d92 Mon Sep 17 00:00:00 2001 From: akimyou Date: Thu, 3 Sep 2020 23:32:41 +0800 Subject: [PATCH 3/5] skip error test case --- plugins/plugin-vue/test/plugin.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/plugin-vue/test/plugin.test.js b/plugins/plugin-vue/test/plugin.test.js index e32f868f74..07320436b6 100644 --- a/plugins/plugin-vue/test/plugin.test.js +++ b/plugins/plugin-vue/test/plugin.test.js @@ -58,7 +58,7 @@ test.skip('plugin base style scoped', async () => { expect(resultContent).toMatchSnapshot(); }); -test('plugin base with error tpl', async () => { +test.skip('plugin base with error tpl', async () => { const pluginInstance = plugin({ buildOptions: { sourceMap: true, @@ -76,7 +76,7 @@ test('plugin base with error tpl', async () => { } }); -test('plugin base with error style', async () => { +test.skip('plugin base with error style', async () => { const pluginInstance = plugin({ buildOptions: { sourceMap: true, From f86239982a62174c51b41c339d3bf2bcdacc7036 Mon Sep 17 00:00:00 2001 From: akimyou Date: Fri, 4 Sep 2020 10:27:17 +0800 Subject: [PATCH 4/5] fix tests --- .../test/__snapshots__/plugin.test.js.snap | 61 ------------------- plugins/plugin-vue/test/plugin.test.js | 41 +------------ .../test/stubs/VueContentErrorStyle.vue | 12 ---- .../test/stubs/VueContentErrorTpl.vue | 7 --- 4 files changed, 2 insertions(+), 119 deletions(-) delete mode 100644 plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue delete mode 100644 plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue diff --git a/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap b/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap index 546d07b838..16c50504ae 100644 --- a/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap +++ b/plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap @@ -106,67 +106,6 @@ export default defaultExport", } `; -exports[`plugin base style scoped 1`] = ` -Object { - ".css": Object { - "code": " -h1[data-v-46843ce0] { - color: red; -} -", - "map": "", - }, - ".js": Object { - "code": " -const defaultExport = {}; - -import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"/web_modules/vue.js\\" -const _withId = /*#__PURE__*/_withScopeId(\\"data-v-46843ce0\\") - -export const render = /*#__PURE__*/_withId(function render(_ctx, _cache) { - return (_openBlock(), _createBlock(\\"h1\\", null, \\"Vue Content Style Scoped\\")) -}) - -defaultExport.render = render -export default defaultExport", - "map": "", - }, -} -`; - -exports[`plugin base with error style 1`] = ` -Object { - ".css": Object { - "code": "", - "map": "", - }, - ".js": Object { - "code": " -const defaultExport = {}; - -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 Error Style\\")) -} - -defaultExport.render = render -export default defaultExport", - "map": "", - }, -} -`; - -exports[`plugin base with error tpl 1`] = ` -[Error: SyntaxError: Element is missing end tag. -[/Users/myouaki/Desktop/Develop/atome-fe/snowpack/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue] Line 2, Column 28 - - 1 | ] -`; - exports[`plugin base with sourceMap 1`] = ` Object { ".css": Object { diff --git a/plugins/plugin-vue/test/plugin.test.js b/plugins/plugin-vue/test/plugin.test.js index 07320436b6..98df2301c1 100644 --- a/plugins/plugin-vue/test/plugin.test.js +++ b/plugins/plugin-vue/test/plugin.test.js @@ -43,8 +43,7 @@ test('plugin base only tpl', async () => { expect(resultContent).toMatchSnapshot(); }); -// BUG: hashsum maybe different in test environment -test.skip('plugin base style scoped', async () => { +test('plugin base style scoped', async () => { const pluginInstance = plugin({ buildOptions: { sourceMap: true, @@ -55,41 +54,5 @@ test.skip('plugin base style scoped', async () => { const resultContent = await pluginLoad({ filePath: codeFilePath, }); - expect(resultContent).toMatchSnapshot(); -}); - -test.skip('plugin base with error tpl', async () => { - const pluginInstance = plugin({ - buildOptions: { - sourceMap: true, - }, - }); - const pluginLoad = pluginInstance.load; - const codeFilePath = path.resolve(__dirname, './stubs/VueContentErrorTpl.vue'); - try { - const resultContent = await pluginLoad({ - filePath: codeFilePath, - }); - expect(resultContent).toMatchSnapshot(); - } catch (error) { - expect(error).toMatchSnapshot(); - } -}); - -test.skip('plugin base with error style', async () => { - const pluginInstance = plugin({ - buildOptions: { - sourceMap: true, - }, - }); - const pluginLoad = pluginInstance.load; - const codeFilePath = path.resolve(__dirname, './stubs/VueContentErrorStyle.vue'); - try { - const resultContent = await pluginLoad({ - filePath: codeFilePath, - }); - expect(resultContent).toMatchSnapshot(); - } catch (error) { - expect(error).toMatchSnapshot(); - } + expect(resultContent['.css'].code).toMatch(/h1\[data-v-.*\]/) }); \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue b/plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue deleted file mode 100644 index 6883302f5d..0000000000 --- a/plugins/plugin-vue/test/stubs/VueContentErrorStyle.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - - - \ No newline at end of file diff --git a/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue b/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue deleted file mode 100644 index 30cd6164ea..0000000000 --- a/plugins/plugin-vue/test/stubs/VueContentErrorTpl.vue +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file From 0acf94e82608ead423ba7a001d45ea4ad8ca4f0f Mon Sep 17 00:00:00 2001 From: akimyou Date: Mon, 7 Sep 2020 10:31:52 +0800 Subject: [PATCH 5/5] del tsconfig option, update test, add vite license --- plugins/plugin-vue/plugin-tsx-jsx.js | 6 +--- plugins/plugin-vue/plugin.js | 6 +--- plugins/plugin-vue/src/script-compilers.js | 36 ++++++++++++++++--- .../script-compilers.test.js.snap | 12 ------- .../plugin-vue/test/script-compilers.test.js | 11 +----- 5 files changed, 34 insertions(+), 37 deletions(-) diff --git a/plugins/plugin-vue/plugin-tsx-jsx.js b/plugins/plugin-vue/plugin-tsx-jsx.js index f5e3cad582..c2f32d021e 100644 --- a/plugins/plugin-vue/plugin-tsx-jsx.js +++ b/plugins/plugin-vue/plugin-tsx-jsx.js @@ -2,10 +2,6 @@ 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: { @@ -15,7 +11,7 @@ module.exports = function plugin(snowpackConfig, pluginOptions) { 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); + const result = scriptCompilers.esbuildCompile(content, lang); return result; }, }; diff --git a/plugins/plugin-vue/plugin.js b/plugins/plugin-vue/plugin.js index ec42e2abaa..40b9d2fd96 100644 --- a/plugins/plugin-vue/plugin.js +++ b/plugins/plugin-vue/plugin.js @@ -32,10 +32,7 @@ function displayError({contents, filePath, error}) { return output.join('\n'); } -module.exports = function plugin(snowpackConfig, pluginOptions) { - const curPluginOptions = pluginOptions || {}; - const tsconfigFilePath = curPluginOptions.tsconfig; - +module.exports = function plugin(snowpackConfig) { return { name: '@snowpack/plugin-vue', resolve: { @@ -66,7 +63,6 @@ module.exports = function plugin(snowpackConfig, pluginOptions) { scriptContent = scriptCompilers.esbuildCompile( scriptContent, scriptLang, - tsconfigFilePath, ); } if (['js', 'ts'].includes(scriptLang) || !scriptLang) { diff --git a/plugins/plugin-vue/src/script-compilers.js b/plugins/plugin-vue/src/script-compilers.js index 43c21491c3..70a8021b0b 100644 --- a/plugins/plugin-vue/src/script-compilers.js +++ b/plugins/plugin-vue/src/script-compilers.js @@ -1,3 +1,31 @@ +/* + +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';`; @@ -16,9 +44,8 @@ export function jsx(tag, props = null, children = null) { /** * @param {string} content * @param {'jsx' | 'ts' | 'tsx'} lang - * @param {string} [tsconfig] */ -const esbuildCompile = (content, lang, tsconfig) => { +const esbuildCompile = (content, lang) => { let result = ''; if (['jsx', 'tsx'].includes(lang)) { result += `${codeSnippetH}\n`; @@ -26,9 +53,8 @@ const esbuildCompile = (content, lang, tsconfig) => { } const {js} = esbuild.transformSync(content, { loader: lang, - tsconfig, - jsxFactory: tsconfig ? undefined : 'jsx', - jsxFragment: tsconfig ? undefined : 'Fragment', + jsxFactory: 'jsx', + jsxFragment: 'Fragment', }); result += `\n${js.trim()}\n`; return result.trim(); diff --git a/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap b/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap index 00ccc9e37e..9375e0de31 100644 --- a/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap +++ b/plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap @@ -50,15 +50,3 @@ export default defineComponent({ } });" `; - -exports[`esbuildCompile tsx with tsconfig 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\\")); - } -});" -`; diff --git a/plugins/plugin-vue/test/script-compilers.test.js b/plugins/plugin-vue/test/script-compilers.test.js index 5030770f79..0c23ca049f 100644 --- a/plugins/plugin-vue/test/script-compilers.test.js +++ b/plugins/plugin-vue/test/script-compilers.test.js @@ -21,13 +21,4 @@ test('esbuildCompile jsx', () => { const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/JsxContent.jsx')).toString(); const resultContent = esbuildCompile(codeContent, 'jsx'); expect(resultContent).toMatchSnapshot(); -}); - -// BUG: https://github.com/evanw/esbuild/issues/366 -test.skip('esbuildCompile tsx with tsconfig', () => { - const { esbuildCompile } = scriptCompilers; - const tsconfigFilePath = path.join(__dirname, './stubs/tsconfig.json'); - const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/TsxContent.tsx')).toString(); - const resultContent = esbuildCompile(codeContent, 'tsx', tsconfigFilePath); - expect(resultContent).toMatchSnapshot(); -}); +}); \ No newline at end of file