feat: support optional enableObjectSlots (#259)

* feat: user can toggle off the object slot syntax parser (#257)

* chore(deps-dev): bump vue from 3.0.0 to 3.0.5 (#246)

Bumps [vue](https://github.com/vuejs/vue) from 3.0.0 to 3.0.5.
- [Release notes](https://github.com/vuejs/vue/releases)
- [Commits](https://github.com/vuejs/vue/commits)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* chore(deps-dev): bump @typescript-eslint/eslint-plugin (#244)

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 4.9.1 to 4.11.1.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v4.11.1/packages/eslint-plugin)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* chore(deps-dev): bump @typescript-eslint/parser from 4.9.1 to 4.11.1 (#245)

Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 4.9.1 to 4.11.1.
- [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases)
- [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/parser/CHANGELOG.md)
- [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v4.11.1/packages/parser)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* feat: user can toggle off the object slot syntax parser

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* feat: default value of enableObjectSlots should be true

Co-authored-by: 逆寒 <869732751@qq.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

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

@@ -18,6 +18,7 @@ export interface Opts {
   optimize?: boolean;
   mergeProps?: boolean;
   isCustomElement?: (tag: string) => boolean;
+  enableObjectSlots?: boolean;
 }
 
 export type ExcludesBoolean = <T>(x: T | false | true) => x is T;
@@ -70,7 +71,7 @@ export default ({ types }: typeof BabelCore) => ({
             importNames.forEach((name) => {
               state.set(name, () => {
                 if (importMap[name]) {
-                  return types.cloneDeep(importMap[name]);
+                  return types.cloneNode(importMap[name]);
                 }
                 const identifier = addNamed(
                   path,
@@ -84,6 +85,8 @@ export default ({ types }: typeof BabelCore) => ({
                 return identifier;
               });
             });
+            const { enableObjectSlots = true } = state.opts;
+            if (enableObjectSlots) {
               state.set('@vue/babel-plugin-jsx/runtimeIsSlot', () => {
                 if (importMap.runtimeIsSlot) {
                   return importMap.runtimeIsSlot;
@@ -102,6 +105,7 @@ export default ({ types }: typeof BabelCore) => ({
                 importMap.runtimeIsSlot = isSlot;
                 return isSlot;
               });
+            }
           } else {
             // var _vue = require('vue');
             let sourceName = '';

packages/babel-plugin-jsx/src/transform-vue-jsx.ts

@@ -82,10 +82,14 @@ const transformJSXElement = (
   const { optimize = false } = state.opts;
 
   const slotFlag = path.getData('slotFlag') || SlotFlags.STABLE;
-
   let VNodeChild;
 
   if (children.length > 1 || slots) {
+    /*
+      <A v-slots={slots}>{a}{b}</A>
+        ---> {{ default: () => [a, b], ...slots }}
+        ---> {[a, b]}
+    */
     VNodeChild = isComponent ? t.objectExpression([
       !!children.length && t.objectProperty(
         t.identifier('default'),
@@ -102,12 +106,12 @@ const transformJSXElement = (
       ),
     ].filter(Boolean as any)) : t.arrayExpression(children);
   } else if (children.length === 1) {
+    /*
+      <A>{a}</A> or <A>{() => a}</A>
+     */
+    const { enableObjectSlots = true } = state.opts;
     const child = children[0];
-    if (t.isIdentifier(child)) {
+    const objectExpression = t.objectExpression([
-      VNodeChild = t.conditionalExpression(
-        t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [child]),
-        child,
-        t.objectExpression([
       t.objectProperty(
         t.identifier('default'),
         t.arrowFunctionExpression([], t.arrayExpression(buildIIFE(path, [child]))),
@@ -116,11 +120,17 @@ const transformJSXElement = (
         t.identifier('_'),
         t.numericLiteral(slotFlag),
       ) as any,
-        ].filter(Boolean)),
+    ].filter(Boolean));
-      );
+    if (t.isIdentifier(child)) {
+      VNodeChild = enableObjectSlots ? t.conditionalExpression(
+        t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [child]),
+        child,
+        objectExpression,
+      ) : objectExpression;
     } else if (
       t.isCallExpression(child) && child.loc && isComponent
     ) { // the element was generated and doesn't have location information
+      if (enableObjectSlots) {
         const { scope } = path;
         const slotId = scope.generateUidIdentifier('slot');
         if (scope) {
@@ -129,24 +139,28 @@ const transformJSXElement = (
             kind: 'let',
           });
         }
-
+        const alternate = t.objectExpression([
-      VNodeChild = t.conditionalExpression(
-        t.callExpression(
-          state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(),
-          [t.assignmentExpression('=', slotId, child)],
-        ),
-        slotId,
-        t.objectExpression([
           t.objectProperty(
             t.identifier('default'),
             t.arrowFunctionExpression([], t.arrayExpression(buildIIFE(path, [slotId]))),
-          ),
+          ), optimize && t.objectProperty(
-          optimize && t.objectProperty(
             t.identifier('_'),
             t.numericLiteral(slotFlag),
           ) as any,
-        ].filter(Boolean)),
+        ].filter(Boolean));
+        const assignment = t.assignmentExpression('=', slotId, child);
+        const condition = t.callExpression(
+          state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(),
+          [assignment],
         );
+        VNodeChild = t.conditionalExpression(
+          condition,
+          slotId,
+          alternate,
+        );
+      } else {
+        VNodeChild = objectExpression;
+      }
     } else if (t.isFunctionExpression(child) || t.isArrowFunctionExpression(child)) {
       VNodeChild = t.objectExpression([
         t.objectProperty(

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

@@ -42,6 +42,16 @@ import { resolveComponent as _resolveComponent } from \\"vue\\";
 _withDirectives(_createVNode(_resolveComponent(\\"A\\"), null, null, 512), [[_resolveDirective(\\"cus\\"), x]]);"
 `;
 
+exports[`disable object slot syntax with defaultSlot: defaultSlot 1`] = `
+"import { createVNode as _createVNode } from \\"vue\\";
+import { resolveComponent as _resolveComponent } from \\"vue\\";
+
+_createVNode(_resolveComponent(\\"Badge\\"), null, {
+  default: () => [slots.default()],
+  _: 1
+});"
+`;
+
 exports[`dynamic type in input: dynamic type in input 1`] = `
 "import { withDirectives as _withDirectives } from \\"vue\\";
 import { createVNode as _createVNode } from \\"vue\\";

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

@@ -155,7 +155,7 @@ tests.forEach((
   test(
     name,
     async () => {
-      expect(await transpile(from, { optimize: true })).toMatchSnapshot(name);
+      expect(await transpile(from, { optimize: true, enableObjectSlots: true })).toMatchSnapshot(name);
     },
   );
 });
@@ -205,7 +205,26 @@ slotsTests.forEach(({
   test(
     `passing object slots via JSX children ${name}`,
     async () => {
-      expect(await transpile(from, { optimize: true })).toMatchSnapshot(name);
+      expect(await transpile(from, { optimize: true, enableObjectSlots: true })).toMatchSnapshot(name);
+    },
+  );
+});
+
+const objectSlotsTests = [
+  {
+    name: 'defaultSlot',
+    from: '<Badge>{slots.default()}</Badge>',
+  },
+];
+
+objectSlotsTests.forEach(({
+  name, from,
+}) => {
+  test(
+    `disable object slot syntax with ${name}`,
+    async () => {
+      expect(await transpile(from, { optimize: true, enableObjectSlots: false }))
+        .toMatchSnapshot(name);
     },
   );
 });