Enable optional chaining for CRA

Author: CompuIves

packages/app/src/sandbox/eval/presets/create-react-app/index.js

@@ -60,6 +60,7 @@ export default function initialize() {
             config: {
               plugins: [
                 '@babel/plugin-transform-react-jsx-source',
+                '@babel/plugin-proposal-optional-chaining',
                 'transform-flow-strip-types',
                 'transform-destructuring',
                 'babel-plugin-macros',

packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js

@@ -2,6 +2,7 @@
 import { flatten } from 'lodash-es';
 import codeFrame from 'babel-code-frame';
 import macrosPlugin from 'babel-plugin-macros';
+import chainingPlugin from '@babel/plugin-proposal-optional-chaining';
 
 import delay from '@codesandbox/common/lib/utils/delay';
 
@@ -622,6 +623,18 @@ self.addEventListener('message', async event => {
       Babel.registerPlugin('babel-plugin-macros', macrosPlugin);
     }
 
+    console.log(flattenedPlugins);
+    if (
+      (flattenedPlugins.indexOf('proposal-optional-chaining') > -1 ||
+        flattenedPlugins.indexOf('@babel/plugin-proposal-optional-chaining') >
+          -1) &&
+      Object.keys(Babel.availablePlugins).indexOf(
+        'proposal-optional-chaining'
+      ) === -1
+    ) {
+      Babel.registerPlugin('proposal-optional-chaining', chainingPlugin);
+    }
+
     if (
       flattenedPlugins.indexOf('transform-cx-jsx') > -1 &&
       Object.keys(Babel.availablePlugins).indexOf('transform-cx-jsx') === -1