Fix esm var changes (#4262)

* Fix esm var changes

* Fix object initiliazers

* Add comment

Author: CompuIves

packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/__snapshots__/index.test.ts.snap

@@ -150,6 +150,23 @@ const short = {
 "
 `;
 
+exports[`convert-esmodule doesn't remove object initializers 1`] = `
+"var $csb__shared = require(\\"@react-spring/shared\\");
+const createHost = (components, {a = () => {}} = {}) => {
+  $csb__shared.is();
+};
+"
+`;
+
+exports[`convert-esmodule doesn't set var definitions 1`] = `
+"Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+var global = typeof window !== \\"undefined\\" ? window : {};
+exports.global = global;
+"
+`;
+
 exports[`convert-esmodule handles default as exports 1`] = `
 "Object.defineProperty(exports, \\"__esModule\\", {
   value: true
@@ -172,7 +189,7 @@ exports[`convert-esmodule handles export mutations 1`] = `
 });
 function test() {}
 exports.default = test;
-exports.default = test = 5;;
+exports.default = test = 5;
 "
 `;
 
@@ -185,6 +202,21 @@ exports.default = $csb__default;
 "
 `;
 
+exports[`convert-esmodule handles export mutations with variables 1`] = `
+"Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+var to;
+exports.to = to;
+function assign() {
+  exports.to = to = \\"test\\";
+}
+function assign2(to) {
+  to = \\"test\\";
+}
+"
+`;
+
 exports[`convert-esmodule handles multiple aliased exports 1`] = `
 "Object.defineProperty(exports, \\"f\\", {
   enumerable: true,

packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.test.ts

@@ -151,6 +151,41 @@ describe('convert-esmodule', () => {
     expect(convertEsModule(code)).toMatchSnapshot();
   });
 
+  it('handles export mutations with variables', () => {
+    const code = `
+    export var to;
+
+    function assign() {
+      to = "test"
+    }
+
+    function assign2(to) {
+      to = "test"
+    }
+    `;
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
+
+  it("doesn't remove object initializers", () => {
+    const code = `
+    import { defineHidden, is, createInterpolator, each, getFluidConfig, isAnimatedString, useForceUpdate } from '@react-spring/shared';
+
+    const createHost = (components, {
+      a = () => {}
+    } = {}) => {
+     is()
+    };
+    `;
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
+
+  it("doesn't set var definitions", () => {
+    const code = `
+    export var global = typeof window !== 'undefined' ? window : {};
+    `;
+    expect(convertEsModule(code)).toMatchSnapshot();
+  });
+
   it('handles default as exports', () => {
     const code = `
     export { default as Field } from './Field';

packages/app/src/sandbox/eval/transpilers/babel/convert-esmodule/index.ts

@@ -5,11 +5,7 @@ import * as astring from 'astring';
 import * as escope from 'escope';
 import { basename } from 'path';
 import { walk } from 'estree-walker';
-import {
-  AssignmentExpression,
-  ExpressionStatement,
-  Property,
-} from 'meriyah/dist/estree';
+import { Property } from 'meriyah/dist/estree';
 import { Syntax as n } from './syntax';
 import {
   generateRequireStatement,
@@ -29,6 +25,7 @@ import { customGenerator } from './generator';
 export function convertEsModule(code: string) {
   const usedVarNames = [];
   const varsToRename = {};
+  const trackedExports = {};
 
   const getVarName = (name: string) => {
     let usedName = name.replace(/[.-]/g, '');
@@ -144,6 +141,7 @@ export function convertEsModule(code: string) {
             continue;
           }
 
+          trackedExports[foundDeclaration.id.name] = foundDeclaration.id.name;
           varName = foundDeclaration.id.name;
         }
         i++;
@@ -232,40 +230,7 @@ export function convertEsModule(code: string) {
           newDeclaration.type === n.ClassDeclaration ||
           newDeclaration.type === n.FunctionExpression
         ) {
-          // @ts-ignore Different libraries with the same types
-          program = walk(program, {
-            enter(node, parent, prop, index) {
-              if (node.type === n.AssignmentExpression) {
-                const { left } = node as AssignmentExpression;
-                if (
-                  left.type === n.Identifier &&
-                  left.name === newDeclaration.id.name
-                ) {
-                  this.replace({
-                    type: n.ExpressionStatement,
-                    expression: {
-                      type: n.AssignmentExpression,
-                      left: {
-                        type: n.MemberExpression,
-                        object: {
-                          type: n.Identifier,
-                          name: 'exports',
-                        },
-                        computed: false,
-                        property: {
-                          type: n.Identifier,
-                          name: 'default',
-                        },
-                      },
-                      operator: '=' as '=',
-                      right: node,
-                    },
-                  } as ExpressionStatement);
-                  this.skip();
-                }
-              }
-            },
-          });
+          trackedExports[newDeclaration.id.name] = 'default';
         }
       }
     } else if (statement.type === n.ImportDeclaration) {
@@ -358,15 +323,21 @@ export function convertEsModule(code: string) {
     }
   }
 
-  if (Object.keys(varsToRename).length > 0) {
+  if (
+    Object.keys(varsToRename).length > 0 ||
+    Object.keys(trackedExports).length > 0
+  ) {
     // Convert all the object shorthands to not shorthands, needed later when we rename variables so we
     // don't change to the key literals
     // @ts-ignore
     program = walk(program, {
       enter(node, parent, prop, index) {
         if (node.type === n.Property) {
           const property = node as Property;
-          if (property.shorthand) {
+          if (
+            property.shorthand &&
+            property.value.type !== n.AssignmentPattern // Not a default initializer
+          ) {
             property.value = {
               ...property.key,
             };
@@ -387,6 +358,16 @@ export function convertEsModule(code: string) {
         if (varsToRename[ref.identifier.name] && ref.resolved === null) {
           ref.identifier.name = varsToRename[ref.identifier.name].join('.');
         }
+
+        if (
+          trackedExports[ref.identifier.name] &&
+          ref.isWrite() &&
+          ref.resolved === null &&
+          !ref.init
+        ) {
+          const name = trackedExports[ref.identifier.name];
+          ref.identifier.name = `exports.${name} = ${ref.identifier.name}`;
+        }
       });
     });
     scopeManager.detach();