chore: add snapshot

packages/babel-plugin-jsx/src/index.ts

@@ -41,9 +41,13 @@ export default () => ({
               .filter((specifier) => {
                 if (t.isImportSpecifier(specifier)) {
                   const { imported, local } = specifier;
-                  specifierNames.add(imported.name);
-                  return local.name !== imported.name;
-                } if (t.isImportNamespaceSpecifier(specifier)) {
+                  if (local.name === imported.name) {
+                    specifierNames.add(imported.name);
+                    return false;
+                  }
+                  return true;
+                }
+                if (t.isImportNamespaceSpecifier(specifier)) {
                   // should keep when `import * as Vue from 'vue'`
                   shouldKeep = true;
                 }

packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MereProps Order: MereProps Order 1`] = `
+"import { createTextVNode, mergeProps, createVNode } from \\"vue\\";
+createVNode(\\"button\\", mergeProps({
+  \\"loading\\": true
+}, x, {
+  \\"type\\": \\"submit\\"
+}), [createTextVNode(\\"btn\\")], 16, [\\"loading\\"]);"
+`;
+
+exports[`Merge class/ style attributes into array: Merge class/ style attributes into array 1`] = `
+"import { createVNode } from \\"vue\\";
+createVNode(\\"div\\", {
+  \\"class\\": [\\"a\\", b],
+  \\"style\\": [\\"color: red\\", s]
+}, null, 6);"
+`;
+
+exports[`Without JSX should work: Without JSX should work 1`] = `
+"import { createVNode } from 'vue';
+createVNode('div', null, ['Without JSX should work']);"
+`;
+
+exports[`Without props: Without props 1`] = `
+"import { createTextVNode, createVNode } from \\"vue\\";
+createVNode(\\"a\\", null, [createTextVNode(\\"a\\")]);"
+`;
+
+exports[`custom directive: custom directive 1`] = `
+"import { resolveComponent, resolveDirective, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(resolveComponent(\\"A\\"), null, null, 512), [[resolveDirective(\\"cus\\"), x]]);"
+`;
+
+exports[`dynamic type in input: dynamic type in input 1`] = `
+"import { vModelDynamic, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"input\\", {
+  \\"type\\": type,
+  \\"onUpdate:modelValue\\": $event => test = $event
+}, null, 8, [\\"type\\", \\"onUpdate:modelValue\\"]), [[vModelDynamic, test]]);"
+`;
+
+exports[`input[type="checkbox"]: input[type="checkbox"] 1`] = `
+"import { vModelCheckbox, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"input\\", {
+  \\"type\\": \\"checkbox\\",
+  \\"onUpdate:modelValue\\": $event => test = $event
+}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelCheckbox, test]]);"
+`;
+
+exports[`input[type="radio"]: input[type="radio"] 1`] = `
+"import { Fragment, vModelRadio, createVNode, withDirectives } from \\"vue\\";
+createVNode(Fragment, null, [withDirectives(createVNode(\\"input\\", {
+  \\"type\\": \\"radio\\",
+  \\"value\\": \\"1\\",
+  \\"onUpdate:modelValue\\": $event => test = $event,
+  \\"name\\": \\"test\\"
+}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelRadio, test]]), withDirectives(createVNode(\\"input\\", {
+  \\"type\\": \\"radio\\",
+  \\"value\\": \\"2\\",
+  \\"onUpdate:modelValue\\": $event => test = $event,
+  \\"name\\": \\"test\\"
+}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelRadio, test]])]);"
+`;
+
+exports[`input[type="text"] .lazy modifier: input[type="text"] .lazy modifier 1`] = `
+"import { vModelText, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"input\\", {
+  \\"onUpdate:modelValue\\": $event => test = $event
+}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test, void 0, {
+  lazy: true
+}]]);"
+`;
+
+exports[`input[type="text"]: input[type="text"] 1`] = `
+"import { vModelText, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"input\\", {
+  \\"onUpdate:modelValue\\": $event => test = $event
+}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test]]);"
+`;
+
+exports[`reassign variable as component: reassign variable as component 1`] = `
+"import { defineComponent, createVNode } from \\"vue\\";
+let a = 1;
+const A = defineComponent({
+  setup(_, {
+    slots
+  }) {
+    return () => createVNode(\\"span\\", null, [slots.default()]);
+  }
+
+});
+const _a = 1;
+
+const __a = function () {
+  return a;
+}();
+
+a = createVNode(A, null, {
+  default: () => [__a],
+  _: 2
+});"
+`;
+
+exports[`select: select 1`] = `
+"import { createTextVNode, createVNode, vModelSelect, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"select\\", {
+  \\"onUpdate:modelValue\\": $event => test = $event
+}, [createVNode(\\"option\\", {
+  \\"value\\": \\"1\\"
+}, [createTextVNode(\\"a\\")]), createVNode(\\"option\\", {
+  \\"value\\": 2
+}, [createTextVNode(\\"b\\")]), createVNode(\\"option\\", {
+  \\"value\\": 3
+}, [createTextVNode(\\"c\\")])], 8, [\\"onUpdate:modelValue\\"]), [[vModelSelect, test]]);"
+`;
+
+exports[`should keep \`import * as Vue from "vue"\`: should keep \`import * as Vue from "vue"\` 1`] = `
+"import { createTextVNode, createVNode } from \\"vue\\";
+import * as Vue from 'vue';
+createVNode(\\"div\\", null, [createTextVNode(\\"Vue\\")]);"
+`;
+
+exports[`single no need for a mergeProps call: single no need for a mergeProps call 1`] = `
+"import { createTextVNode, createVNode } from \\"vue\\";
+createVNode(\\"div\\", x, [createTextVNode(\\"single\\")], 16);"
+`;
+
+exports[`specifiers should be merged into a single importDeclaration: specifiers should be merged into a single importDeclaration 1`] = `
+"import { createVNode, vShow } from \\"vue\\";
+import { Fragment as _Fragment } from \\"vue\\";
+createVNode(_Fragment, null, null);"
+`;
+
+exports[`textarea: textarea 1`] = `
+"import { vModelText, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"textarea\\", {
+  \\"onUpdate:modelValue\\": $event => test = $event
+}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test]]);"
+`;
+
+exports[`v-show: v-show 1`] = `
+"import { createTextVNode, vShow, createVNode, withDirectives } from \\"vue\\";
+withDirectives(createVNode(\\"div\\", null, [createTextVNode(\\"vShow\\")], 512), [[vShow, x]]);"
+`;
+
+exports[`vHtml: vHtml 1`] = `
+"import { createVNode } from \\"vue\\";
+createVNode(\\"h1\\", {
+  \\"innerHTML\\": \\"<div>foo</div>\\"
+}, null, 8, [\\"innerHTML\\"]);"
+`;
+
+exports[`vText: vText 1`] = `
+"import { createVNode } from \\"vue\\";
+createVNode(\\"div\\", {
+  \\"textContent\\": text
+}, null, 8, [\\"textContent\\"]);"
+`;

packages/babel-plugin-jsx/test/coverage.test.ts

@@ -1,16 +0,0 @@
-import * as fs from 'fs';
-import * as path from 'path';
-import { transformSync } from '@babel/core';
-import preset from '../babel.config.js';
-
-test('coverage', () => {
-  ['index.test.tsx', 'v-model.test.tsx']
-    .forEach((filename) => {
-      const mainTest = fs.readFileSync(path.resolve(__dirname, `./${filename}`)).toString();
-      transformSync(mainTest, {
-        babelrc: false,
-        presets: [preset],
-        filename,
-      });
-    });
-});

packages/babel-plugin-jsx/test/snapshot.test.ts

@@ -0,0 +1,144 @@
+import { transform } from '@babel/core';
+import JSX from '../src';
+
+const transpile = (source: string) => new Promise((resolve, reject) => transform(
+  source,
+  {
+    filename: '',
+    presets: null,
+    plugins: [[JSX, { optimize: true }]],
+    configFile: false,
+  }, (error, result) => {
+    if (error) {
+      return reject(error);
+    }
+    resolve(result?.code);
+  },
+));
+
+const tests = [
+  {
+    name: 'input[type="checkbox"]',
+    from: '<input type="checkbox" v-model={test} />',
+  },
+  {
+    name: 'input[type="radio"]',
+    from: `
+      <>
+        <input type="radio" value="1" v-model={test} name="test" />
+        <input type="radio" value="2" v-model={test} name="test" />
+      </>
+    `,
+  },
+  {
+    name: 'select',
+    from: `
+      <select v-model={test}>
+        <option value="1">a</option>
+        <option value={2}>b</option>
+        <option value={3}>c</option>
+      </select>
+    `,
+  },
+  {
+    name: 'textarea',
+    from: '<textarea v-model={test} />',
+  },
+  {
+    name: 'input[type="text"]',
+    from: '<input v-model={test} />',
+  },
+  {
+    name: 'dynamic type in input',
+    from: '<input type={type} v-model={test} />',
+  },
+  {
+    name: 'v-show',
+    from: '<div v-show={x}>vShow</div>',
+  },
+  {
+    name: 'input[type="text"] .lazy modifier',
+    from: `
+      <input v-model={[test, ['lazy']]} />
+    `,
+  },
+  {
+    name: 'custom directive',
+    from: '<A vCus={x} />',
+  },
+  {
+    name: 'vHtml',
+    from: '<h1 v-html="<div>foo</div>"></h1>',
+  },
+  {
+    name: 'vText',
+    from: '<div v-text={text}></div>',
+  },
+  {
+    name: 'Without props',
+    from: '<a>a</a>',
+  },
+  {
+    name: 'MereProps Order',
+    from: '<button loading {...x} type="submit">btn</button>',
+  },
+  {
+    name: 'Merge class/ style attributes into array',
+    from: '<div class="a" class={b} style="color: red" style={s}></div>',
+  },
+  {
+    name: 'single no need for a mergeProps call',
+    from: '<div {...x}>single</div>',
+  },
+  {
+    name: 'should keep `import * as Vue from "vue"`',
+    from: `
+      import * as Vue from 'vue';
+
+      <div>Vue</div>
+    `,
+  },
+  {
+    name: 'specifiers should be merged into a single importDeclaration',
+    from: `
+      import { createVNode, Fragment as _Fragment } from 'vue';
+      import { vShow } from 'vue'
+
+      <_Fragment />
+    `,
+  },
+  {
+    name: 'Without JSX should work',
+    from: `
+      import { createVNode } from 'vue';
+      createVNode('div', null, ['Without JSX should work']);
+    `,
+  },
+  {
+    name: 'reassign variable as component',
+    from: `
+      import { defineComponent } from 'vue';
+      let a = 1;
+      const A = defineComponent({
+        setup(_, { slots }) {
+          return () => <span>{slots.default()}</span>;
+        },
+      });
+
+      const _a = 1;
+
+      a = <A>{a}</A>;
+    `,
+  },
+];
+
+tests.forEach((
+  { name, from },
+) => {
+  test(
+    name,
+    async () => {
+      expect(await transpile(from)).toMatchSnapshot(name);
+    },
+  );
+});