Fix parsedConfigurations type (codesandbox#3109)

* Fix parsedConfigurations type

* Fix types

* Add @babel/plugin-proposal-optional-chaining

* Fix types

* Add babel plugins iin the correct place

* Resolve discussions

Author: MichaelDeBoey

packages/app/config/babel.dev.js

@@ -32,6 +32,7 @@ module.exports = {
     require.resolve('@babel/plugin-transform-destructuring'),
     require.resolve('@babel/plugin-proposal-object-rest-spread'),
     require.resolve('@babel/plugin-proposal-class-properties'),
+    require.resolve('@babel/plugin-proposal-optional-chaining'),
     require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
     require.resolve('@babel/plugin-syntax-dynamic-import'),

packages/app/config/babel.prod.js

@@ -30,6 +30,7 @@ module.exports = {
     require.resolve('@babel/plugin-transform-async-to-generator'),
     require.resolve('@babel/plugin-proposal-object-rest-spread'),
     require.resolve('@babel/plugin-proposal-class-properties'),
+    require.resolve('@babel/plugin-proposal-optional-chaining'),
     require.resolve('@babel/plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
     require.resolve('@babel/plugin-syntax-dynamic-import'),

packages/app/package.json

@@ -99,7 +99,7 @@
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
     "codesandbox-api": "0.0.23",
-    "codesandbox-import-utils": "2.1.2",
+    "codesandbox-import-utils": "^2.1.11",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
     "console": "^0.7.2",
@@ -223,6 +223,7 @@
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
     "@babel/plugin-transform-react-display-name": "^7.2.0",

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -1,4 +1,6 @@
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import getTemplateDefinition, {
+  TemplateType,
+} from '@codesandbox/common/lib/templates';
 import {
   Module,
   ModuleTab,
@@ -175,8 +177,8 @@ export const saveCode: AsyncAction<{
 };
 
 export const updateCurrentTemplate: AsyncAction = async ({
-  state,
   effects,
+  state,
 }) => {
   try {
     const currentTemplate = state.editor.currentSandbox.template;
@@ -187,9 +189,9 @@ export const updateCurrentTemplate: AsyncAction = async ({
     // in the sandbox configuration.
     if (
       templateDefinition.isServer ||
-      state.editor.parsedConfigurations.sandbox.parsed.template
+      state.editor.parsedConfigurations?.sandbox?.parsed?.template
     ) {
-      const { parsed } = state.editor.parsedConfigurations.package;
+      const { parsed = {} } = state.editor.parsedConfigurations?.package || {};
 
       const modulesByPath = mapValues(state.editor.modulesByPath, module => ({
         // No idea why this typing fails!
@@ -199,10 +201,10 @@ export const updateCurrentTemplate: AsyncAction = async ({
         isBinary: module.isBinary,
       }));
 
-      // TODO: What is a templat really? Two different kinds of templates here, need to fix the types
+      // TODO: What is a template really? Two different kinds of templates here, need to fix the types
       // Talk to Ives and Bogdan
-      const newTemplate =
-        computeTemplate(parsed, modulesByPath) || ('node' as any);
+      const newTemplate = (computeTemplate(parsed, modulesByPath) ||
+        'node') as TemplateType;
 
       if (
         newTemplate !== currentTemplate &&

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -1,7 +1,10 @@
 import getTemplate from '@codesandbox/common/lib/templates';
 import { generateFileFromSandbox } from '@codesandbox/common/lib/templates/configuration/package-json';
 import { getPreviewTabs } from '@codesandbox/common/lib/templates/devtools';
-import { ViewConfig } from '@codesandbox/common/lib/templates/template';
+import {
+  ParsedConfigurationFiles,
+  ViewConfig,
+} from '@codesandbox/common/lib/templates/template';
 import {
   DevToolsTabPosition,
   DiffTab,
@@ -56,7 +59,7 @@ type State = {
   mainModule: Derive<State, Module>;
   currentPackageJSON: Derive<State, Module>;
   currentPackageJSONCode: Derive<State, string>;
-  parsedConfigurations: Derive<State, any>;
+  parsedConfigurations: Derive<State, ParsedConfigurationFiles> | null;
   currentTab: Derive<State, ModuleTab | DiffTab>;
   modulesByPath: SandboxFs;
   isAdvancedEditor: Derive<State, boolean>;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx

@@ -32,20 +32,19 @@ export const Dependencies: FunctionComponent = () => {
     resource => !resource.includes('fonts.googleapis.com/css')
   );
 
-  if (!parsedConfigurations.package) {
+  if (!parsedConfigurations?.package) {
     return <ErrorMessage>Unable to find package.json</ErrorMessage>;
   }
 
-  const { parsed, error } = parsedConfigurations.package;
+  const { error, parsed } = parsedConfigurations.package;
   if (error) {
     return (
       <ErrorMessage>We weren{"'"}t able to parse the package.json</ErrorMessage>
     );
   }
 
+  const { dependencies = {} /* devDependencies = {} */ } = parsed;
   const { externalResourcesEnabled } = getTemplateDefinition(template);
-
-  const dependencies = parsed.dependencies || {};
   return (
     <div>
       <Margin bottom={0}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Tasks.tsx

@@ -37,13 +37,11 @@ const Task = styled.button`
 `;
 
 type Props = {
-  package:
-    | {
-        scripts: {
-          [command: string]: string;
-        };
-      }
-    | undefined;
+  package?: {
+    scripts?: {
+      [command: string]: string;
+    };
+  };
 };
 
 // These scripts are only supposed to run on the main thread.
@@ -73,7 +71,7 @@ export class Tasks extends React.PureComponent<Props> {
   };
 
   render() {
-    if (!this.props.package || !this.props.package.scripts) {
+    if (!this.props.package?.scripts) {
       return null;
     }
 

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx

@@ -67,12 +67,7 @@ export const Server: FunctionComponent = () => {
         <SubTitle>Run Scripts</SubTitle>
         <Margin top={0.5}>
           <TasksContainer disconnected={disconnected}>
-            <Tasks
-              package={
-                parsedConfigurations.package &&
-                parsedConfigurations.package.parsed
-              }
-            />
+            <Tasks package={parsedConfigurations?.package?.parsed} />
           </TasksContainer>
         </Margin>
       </Margin>

packages/common/src/templates/configuration/types.ts

@@ -18,12 +18,10 @@ export type ConfigurationFile = {
 };
 
 export type ParsedConfigurationFile<T> = {
-  parsed?: T;
   code: string;
   generated: boolean;
-  error?: Error;
   path: string;
-};
+} & ({ error: Error; parsed?: undefined } | { error?: undefined; parsed: T });
 
 export type ConfigurationUIProps = {
   file: string;

packages/common/src/templates/template.ts

@@ -33,10 +33,9 @@ export type ParsedConfigurationFiles = {
   package?: ParsedConfigurationFile<{
     main: string;
     dependencies?: Dependencies;
-    devDependencies: Dependencies;
-    resolutions?: {
-      [source: string]: string;
-    };
+    devDependencies?: Dependencies;
+    resolutions?: { [source: string]: string };
+    scripts?: { [script: string]: string };
     [otherProperties: string]: any | undefined;
   }>;
   [path: string]: ParsedConfigurationFile<any> | undefined;