From c4e1f69fe485945afdb7fbd029aea769040ed41a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 1 Dec 2019 19:08:51 +0100 Subject: [PATCH 1/6] Fix parsedConfigurations type --- packages/app/src/app/overmind/namespaces/editor/state.ts | 7 +++++-- .../pages/Sandbox/Editor/Workspace/Dependencies/index.tsx | 7 +++---- packages/common/src/templates/configuration/types.ts | 4 +--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/app/src/app/overmind/namespaces/editor/state.ts b/packages/app/src/app/overmind/namespaces/editor/state.ts index a94035eb57e..e1c5c689344 100755 --- a/packages/app/src/app/overmind/namespaces/editor/state.ts +++ b/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; currentPackageJSON: Derive; currentPackageJSONCode: Derive; - parsedConfigurations: Derive; + parsedConfigurations: Derive | null; currentTab: Derive; modulesByPath: SandboxFs; isAdvancedEditor: Derive; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx index dee5a28a0d9..96f969d1727 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Dependencies/index.tsx +++ b/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 Unable to find package.json; } - const { parsed, error } = parsedConfigurations.package; + const { error, parsed } = parsedConfigurations.package; if (error) { return ( We weren{"'"}t able to parse the package.json ); } + const { dependencies = {} /* devDependencies = {} */ } = parsed; const { externalResourcesEnabled } = getTemplateDefinition(template); - - const dependencies = parsed.dependencies || {}; return (
diff --git a/packages/common/src/templates/configuration/types.ts b/packages/common/src/templates/configuration/types.ts index 08c3d9b73a9..9f97aefbe56 100644 --- a/packages/common/src/templates/configuration/types.ts +++ b/packages/common/src/templates/configuration/types.ts @@ -18,12 +18,10 @@ export type ConfigurationFile = { }; export type ParsedConfigurationFile = { - parsed?: T; code: string; generated: boolean; - error?: Error; path: string; -}; +} & ({ error: Error; parsed?: undefined } | { error?: undefined; parsed: T }); export type ConfigurationUIProps = { file: string; From 2852f2acfaa2c5b960033b76565fcaf6d819bff4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 1 Dec 2019 20:20:26 +0100 Subject: [PATCH 2/6] Fix types --- .../overmind/namespaces/editor/internalActions.ts | 6 +++--- .../Editor/Workspace/items/Server/Tasks.tsx | 14 ++++++-------- .../Editor/Workspace/items/Server/index.tsx | 7 +------ packages/common/src/templates/template.ts | 7 +++---- 4 files changed, 13 insertions(+), 21 deletions(-) diff --git a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts index cd4ef8ad46c..1cb3d147895 100755 --- a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts +++ b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts @@ -189,7 +189,7 @@ export const updateCurrentTemplate: AsyncAction = async ({ templateDefinition.isServer || 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 +199,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); + computeTemplate(parsed!, modulesByPath) || ('node' as any); if ( newTemplate !== currentTemplate && diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Tasks.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Tasks.tsx index 2e7ba7e42a5..085b7e4eb2d 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Tasks.tsx +++ b/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 { }; render() { - if (!this.props.package || !this.props.package.scripts) { + if (!this.props.package?.scripts) { return null; } diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx index 9daa3bf773c..9617077aaeb 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/index.tsx @@ -67,12 +67,7 @@ export const Server: FunctionComponent = () => { Run Scripts - + diff --git a/packages/common/src/templates/template.ts b/packages/common/src/templates/template.ts index cc27b497559..e0c8ba46d9a 100644 --- a/packages/common/src/templates/template.ts +++ b/packages/common/src/templates/template.ts @@ -32,11 +32,10 @@ export type Dependencies = { [name: string]: string }; export type ParsedConfigurationFiles = { package?: ParsedConfigurationFile<{ main: string; - dependencies?: Dependencies; + dependencies: Dependencies; devDependencies: Dependencies; - resolutions?: { - [source: string]: string; - }; + resolutions?: { [source: string]: string }; + scripts?: { [script: string]: string }; [otherProperties: string]: any | undefined; }>; [path: string]: ParsedConfigurationFile | undefined; From 17e478d37612f52f41d9a1c35b54bce67760b1a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 1 Dec 2019 20:51:54 +0100 Subject: [PATCH 3/6] Add @babel/plugin-proposal-optional-chaining --- packages/app/babel.config.js | 1 + packages/app/package.json | 1 + yarn.lock | 18 +++++++++--------- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/app/babel.config.js b/packages/app/babel.config.js index 3282bc9111f..5fa9a86ad85 100644 --- a/packages/app/babel.config.js +++ b/packages/app/babel.config.js @@ -22,4 +22,5 @@ module.exports = { ], }, }, + plugins: ['@babel/plugin-proposal-optional-chaining'], }; diff --git a/packages/app/package.json b/packages/app/package.json index aaf67440cc2..245664190e0 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 555fb9c4d8e..1e5a0b22035 100644 --- a/yarn.lock +++ b/yarn.lock @@ -406,13 +406,13 @@ "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-syntax-optional-catch-binding" "^7.2.0" -"@babel/plugin-proposal-optional-chaining@^7.6.0": - version "7.6.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.6.0.tgz#e9bf1f9b9ba10c77c033082da75f068389041af8" - integrity sha512-kj4gkZ6qUggkprRq3Uh5KP8XnE1MdIO0J7MhdDX8+rAbB6dJ2UrensGIS+0NPZAaaJ1Vr0PN6oLUgXMU1uMcSg== +"@babel/plugin-proposal-optional-chaining@^7.6.0", "@babel/plugin-proposal-optional-chaining@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.7.4.tgz#3f04c2de1a942cbd3008324df8144b9cbc0ca0ba" + integrity sha512-JmgaS+ygAWDR/STPe3/7y0lNlHgS+19qZ9aC06nYLwQ/XB7c0q5Xs+ksFU3EDnp9EiEsO0dnRAOKeyLHTZuW3A== dependencies: "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-syntax-optional-chaining" "^7.2.0" + "@babel/plugin-syntax-optional-chaining" "^7.7.4" "@babel/plugin-proposal-unicode-property-regex@^7.0.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.4": version "7.4.4" @@ -490,10 +490,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.0.0" -"@babel/plugin-syntax-optional-chaining@^7.2.0": - version "7.2.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.2.0.tgz#a59d6ae8c167e7608eaa443fda9fa8fa6bf21dff" - integrity sha512-HtGCtvp5Uq/jH/WNUPkK6b7rufnCPLLlDAFN7cmACoIjaOOiXxUt3SswU5loHqrhtqTsa/WoLQ1OQ1AGuZqaWA== +"@babel/plugin-syntax-optional-chaining@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.7.4.tgz#c91fdde6de85d2eb8906daea7b21944c3610c901" + integrity sha512-2MqYD5WjZSbJdUagnJvIdSfkb/ucOC9/1fRJxm7GAxY6YQLWlUvkfxoNbUPcPLHJyetKUDQ4+yyuUyAoc0HriA== dependencies: "@babel/helper-plugin-utils" "^7.0.0" From ff2e3edade5985d4684edb6de485f092daa651c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 1 Dec 2019 21:15:15 +0100 Subject: [PATCH 4/6] Fix types --- packages/app/package.json | 2 +- .../namespaces/editor/internalActions.ts | 10 ++++++---- packages/common/src/templates/template.ts | 4 ++-- yarn.lock | 18 +++++++++--------- 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 245664190e0..df3a02c6286 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts index 1cb3d147895..54b1105ecf4 100755 --- a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts +++ b/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, @@ -189,7 +191,7 @@ export const updateCurrentTemplate: AsyncAction = async ({ templateDefinition.isServer || 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! @@ -201,8 +203,8 @@ export const updateCurrentTemplate: AsyncAction = async ({ // 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 && diff --git a/packages/common/src/templates/template.ts b/packages/common/src/templates/template.ts index e0c8ba46d9a..a91bb15e441 100644 --- a/packages/common/src/templates/template.ts +++ b/packages/common/src/templates/template.ts @@ -32,8 +32,8 @@ export type Dependencies = { [name: string]: string }; export type ParsedConfigurationFiles = { package?: ParsedConfigurationFile<{ main: string; - dependencies: Dependencies; - devDependencies: Dependencies; + dependencies?: Dependencies; + devDependencies?: Dependencies; resolutions?: { [source: string]: string }; scripts?: { [script: string]: string }; [otherProperties: string]: any | undefined; diff --git a/yarn.lock b/yarn.lock index 1e5a0b22035..4179c6ac34a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7814,17 +7814,17 @@ codemirror@^5.27.4: version "5.38.0" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.38.0.tgz#26a9551446e51dbdde36aabe60f72469724fd332" -codesandbox-import-util-types@^2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.1.2.tgz#2d0b7e977eadd4c0b5baeeaaae0b79c7e6c6900a" - integrity sha512-/6kk/qbV9n+2+vH5aVUNlskyNlhhxGBzzUvt7Ne2MGWkSRv42QMFxuZgMd+bjmXBENUZjrJPGXPK7HxxD1Q67w== +codesandbox-import-util-types@^2.1.9: + version "2.1.9" + resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.1.9.tgz#24ba5ec3d966f51f18b78c48d32e6411da90aa74" + integrity sha512-Vc4qh+neVfHtS3RG+7wvaErMoEKdNTnLFnyj4Dcbn3NV7v9nlPj/z6MGhHp9S+vAjegWorFzxg9lKB1WGHTt5Q== -codesandbox-import-utils@2.1.2: - version "2.1.2" - resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-2.1.2.tgz#30613e28e79db681a555df70e5a916a7797f5c5d" - integrity sha512-cbvNa+dzYw2R3ofUkj51LsT8DX1GIoWVeDaJdSMJgZQSxXptjrf6zsLogcJtY8ihOURjED8CWEbQvpbHTM94EA== +codesandbox-import-utils@^2.1.11: + version "2.1.11" + resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-2.1.11.tgz#171ce53a77b8dcd196fdcfaf0f6bc52b1206444a" + integrity sha512-vkA0drdzO2ArMUzl8/AhEuzaW6qX3ic1SXPmruVS7bo/3K1P8H+S9CbuUNPo67X54/LzHwMnAZgZMXwN8vrw7Q== dependencies: - codesandbox-import-util-types "^2.1.2" + codesandbox-import-util-types "^2.1.9" istextorbinary "^2.2.1" lz-string "^1.4.4" From 6d849c7d46219cc1199594fc0365033d7ed9f651 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Mon, 2 Dec 2019 14:08:11 +0100 Subject: [PATCH 5/6] Add babel plugins iin the correct place --- packages/app/babel.config.js | 1 - packages/app/config/babel.dev.js | 1 + packages/app/config/babel.prod.js | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/app/babel.config.js b/packages/app/babel.config.js index 5fa9a86ad85..3282bc9111f 100644 --- a/packages/app/babel.config.js +++ b/packages/app/babel.config.js @@ -22,5 +22,4 @@ module.exports = { ], }, }, - plugins: ['@babel/plugin-proposal-optional-chaining'], }; diff --git a/packages/app/config/babel.dev.js b/packages/app/config/babel.dev.js index 937cdb5503b..49701071fbd 100644 --- a/packages/app/config/babel.dev.js +++ b/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'), diff --git a/packages/app/config/babel.prod.js b/packages/app/config/babel.prod.js index 4d4b8119346..b9ec3af6f46 100644 --- a/packages/app/config/babel.prod.js +++ b/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'), From e784f54178187e7d76444565a7c675c6bd3a904a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 4 Dec 2019 11:13:38 +0100 Subject: [PATCH 6/6] Resolve discussions --- .../src/app/overmind/namespaces/editor/internalActions.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts index 54b1105ecf4..e1418afd9d6 100755 --- a/packages/app/src/app/overmind/namespaces/editor/internalActions.ts +++ b/packages/app/src/app/overmind/namespaces/editor/internalActions.ts @@ -177,8 +177,8 @@ export const saveCode: AsyncAction<{ }; export const updateCurrentTemplate: AsyncAction = async ({ - state, effects, + state, }) => { try { const currentTemplate = state.editor.currentSandbox.template; @@ -189,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!