fix(templates): move dependencies to a package json (#594)

* Update 13 files * Update Playground.stories.tsx and tests-ts.ts * Update sandpackUtils.ts * Update 3 files * Update 3 files * Update sandpackUtils.ts * Update utils.ts * Update utils.test.ts
codesandbox · Oct 4, 2022 · 441d5a5 · 441d5a5
1 parent b092f2b
commit 441d5a5
Show file tree

Hide file tree

Showing 15 changed files with 166 additions and 75 deletions.
diff --git a/sandpack-client/src/utils.test.ts b/sandpack-client/src/utils.test.ts
@@ -120,4 +120,10 @@ describe(normalizePath, () => {
       "/foo": "",
     });
   });
+
+  it("doesn't tranform invalid values", () => {
+    expect(normalizePath(null)).toBe(undefined);
+    expect(normalizePath(undefined)).toBe(undefined);
+    expect(normalizePath(123)).toBe(undefined);
+  });
 });
diff --git a/sandpack-client/src/utils.ts b/sandpack-client/src/utils.ts
@@ -7,7 +7,7 @@ import type {
 } from "./types";
 
 const DEPENDENCY_ERROR_MESSAGE = `[sandpack-client]: "dependencies" was not specified - provide either a package.json or a "dependencies" value`;
-const ENTRY_ERROR_MESSAGE = `[sandpack-client]: "entry" was not specified - provide either a package.json with the "main" field or na "entry" value`;
+const ENTRY_ERROR_MESSAGE = `[sandpack-client]: "entry" was not specified - provide either a package.json with the "main" field or an "entry" value`;
 
 export function createPackageJSON(
   dependencies: Dependencies = {},
@@ -189,7 +189,7 @@ export const normalizePath = <R extends any>(path: R): R => {
     return path.map((p) => (p.startsWith("/") ? p : `/${p}`)) as R;
   }
 
-  if (typeof path === "object") {
+  if (typeof path === "object" && path !== null) {
     return Object.entries(path as any).reduce<any>(
       (acc, [key, content]: [string, string | any]) => {
         const fileName = key.startsWith("/") ? key : `/${key}`;

diff --git a/sandpack-react/src/Issues.stories.tsx b/sandpack-react/src/Issues.stories.tsx
@@ -13,6 +13,42 @@ export default {
   title: "Bug reports/Issues",
 };
 
+export const PackageJsonDep = (): JSX.Element => {
+  return (
+    <Sandpack
+      files={{
+        "/App.js": {
+          code: `export default function App() {
+  return <h1>Hello World</h1>
+}
+`,
+        },
+        "/index.js": {
+          code: `import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);`,
+        },
+        "/package.json": JSON.stringify({
+          main: "/index.js",
+          dependencies: {
+            react: "^18.0.0",
+            "react-dom": "^18.0.0",
+            "react-scripts": "^4.0.0",
+          },
+        }),
+      }}
+    />
+  );
+};
+
 export const Issue482 = (): JSX.Element => {
   const [hidden, setHidden] = useState(false);
 

diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
@@ -214,14 +214,10 @@ const defaultTemplate = SANDBOX_TEMPLATES["react-ts"];
 
 const exhaustedFilesTests = {
   ...defaultTemplate,
-  dependencies: {
-    ...defaultTemplate.dependencies,
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/jest-dom": "^5.16.5",
-  },
+
   files: {
-    "/src/index.tsx": SANDBOX_TEMPLATES["react-ts"].files["/index.tsx"],
-    "src/App.tsx": `console.log("Hello world");\n\n${SANDBOX_TEMPLATES["react-ts"].files["/App.tsx"].code}`,
+    "/src/index.tsx": defaultTemplate.files["/index.tsx"],
+    "/src/App.tsx": `console.log("Hello world");\n\n${defaultTemplate.files["/App.tsx"].code}`,
     "/src/App.test.tsx": `import '@testing-library/jest-dom';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
@@ -231,7 +227,21 @@ test('renders welcome message', () => {
   render(<App />);
   expect(screen.getByText('Hello World')).toBeInTheDocument();
 });`,
-    "/src/styles.css": SANDBOX_TEMPLATES["react-ts"].files["/styles.css"],
-    "/package.json": JSON.stringify({ main: "/src/index.tsx" }),
+    "/src/styles.css": defaultTemplate.files["/styles.css"],
+    "/package.json": JSON.stringify({
+      dependencies: {
+        react: "^18.0.0",
+        "react-dom": "^18.0.0",
+        "react-scripts": "^4.0.0",
+        "@testing-library/react": "^13.3.0",
+        "@testing-library/jest-dom": "^5.16.5",
+      },
+      devDependencies: {
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        typescript: "^4.0.0",
+      },
+      main: "/add.ts",
+    }),
   },
 };
diff --git a/sandpack-react/src/templates/angular.ts b/sandpack-react/src/templates/angular.ts
@@ -80,18 +80,22 @@ platformBrowserDynamic()
       import "zone.js/dist/zone";
 `,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          "@angular/core": "^11.2.0",
+          "@angular/platform-browser": "^11.2.0",
+          "@angular/platform-browser-dynamic": "^11.2.0",
+          "@angular/common": "^11.2.0",
+          "@angular/compiler": "^11.2.0",
+          "zone.js": "0.11.3",
+          "core-js": "3.8.3",
+          rxjs: "6.6.3",
+        },
+        main: "/src/main.ts",
+      }),
+    },
   },
-  dependencies: {
-    "@angular/core": "^11.2.0",
-    "@angular/platform-browser": "^11.2.0",
-    "@angular/platform-browser-dynamic": "^11.2.0",
-    "@angular/common": "^11.2.0",
-    "@angular/compiler": "^11.2.0",
-    "zone.js": "0.11.3",
-    "core-js": "3.8.3",
-    rxjs: "6.6.3",
-  },
-  entry: "/src/main.ts",
   main: "/src/app/app.component.ts",
   environment: "angular-cli",
 };
diff --git a/sandpack-react/src/templates/react-typescript.ts b/sandpack-react/src/templates/react-typescript.ts
@@ -66,18 +66,22 @@ h1 {
   </body>
 </html>`,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          react: "^18.0.0",
+          "react-dom": "^18.0.0",
+          "react-scripts": "^4.0.0",
+        },
+        devDependencies: {
+          "@types/react": "^18.0.0",
+          "@types/react-dom": "^18.0.0",
+          typescript: "^4.0.0",
+        },
+        main: "/index.tsx",
+      }),
+    },
   },
-  dependencies: {
-    react: "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0",
-  },
-  devDependencies: {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    typescript: "^4.0.0",
-  },
-  entry: "/index.tsx",
   main: "/App.tsx",
   environment: "create-react-app",
 };
diff --git a/sandpack-react/src/templates/react.ts b/sandpack-react/src/templates/react.ts
@@ -53,13 +53,17 @@ h1 {
   </body>
 </html>`,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          react: "^18.0.0",
+          "react-dom": "^18.0.0",
+          "react-scripts": "^4.0.0",
+        },
+        main: "/index.js",
+      }),
+    },
   },
-  dependencies: {
-    react: "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-scripts": "^4.0.0",
-  },
-  entry: "/index.js",
   main: "/App.js",
   environment: "create-react-app",
 };
diff --git a/sandpack-react/src/templates/solid.ts b/sandpack-react/src/templates/solid.ts
@@ -49,11 +49,15 @@ h1 {
 </body>
 </html>`,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          "solid-js": "1.3.15",
+        },
+        main: "/index.tsx",
+      }),
+    },
   },
-  dependencies: {
-    "solid-js": "1.3.15",
-  },
-  entry: "/index.tsx",
   main: "/App.tsx",
   environment: "solid",
 };
diff --git a/sandpack-react/src/templates/svelte.ts b/sandpack-react/src/templates/svelte.ts
@@ -2,10 +2,6 @@
  * @hidden
  */
 export const SVELTE_TEMPLATE = {
-  environment: "svelte",
-  main: "/index.js",
-  entry: "/index.js",
-
   files: {
     "/App.svelte": {
       code: `<style>
@@ -50,8 +46,15 @@ export default app;
   </body>
 </html>`,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          svelte: "^3.0.0",
+        },
+        main: "/index.js",
+      }),
+    },
   },
-  dependencies: {
-    svelte: "^3.0.0",
-  },
+  main: "/index.js",
+  environment: "svelte",
 };
diff --git a/sandpack-react/src/templates/tests-ts.ts b/sandpack-react/src/templates/tests-ts.ts
@@ -28,12 +28,14 @@ describe('add', () => {
   });
 });`,
     },
+    "package.json": {
+      code: JSON.stringify({
+        dependencies: {},
+        devDependencies: { typescript: "^4.0.0" },
+        main: "/add.ts",
+      }),
+    },
   },
-  dependencies: {},
-  devDependencies: {
-    typescript: "^4.0.0",
-  },
-  entry: "/add.ts",
   main: "/add.test.ts",
   environment: "parcel",
   mode: "tests",

diff --git a/sandpack-react/src/templates/vanilla-typescript.ts b/sandpack-react/src/templates/vanilla-typescript.ts
@@ -58,12 +58,16 @@ document.getElementById("app").innerHTML = \`
 
 </html>`,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {},
+        devDependencies: {
+          typescript: "^4.0.0",
+        },
+        main: "/src/index.ts",
+      }),
+    },
   },
-  dependencies: {},
-  devDependencies: {
-    typescript: "^4.0.0",
-  },
-  entry: "/src/index.ts",
   main: "/src/index.ts",
   environment: "parcel",
 };
diff --git a/sandpack-react/src/templates/vanilla.ts b/sandpack-react/src/templates/vanilla.ts
@@ -40,9 +40,13 @@ document.getElementById("app").innerHTML = \`
 
 </html>`,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {},
+        main: "/src/index.js",
+      }),
+    },
   },
-  dependencies: {},
-  entry: "/src/index.js",
   main: "/src/index.js",
   environment: "parcel",
 };
diff --git a/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts
@@ -62,12 +62,16 @@ new Vue({
 </html>
 `,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          vue: "^2.6.11",
+          "@vue/cli-plugin-babel": "4.1.1",
+        },
+        main: "/src/main.js",
+      }),
+    },
   },
-  dependencies: {
-    vue: "^2.6.11",
-    "@vue/cli-plugin-babel": "4.1.1",
-  },
-  entry: "/src/main.js",
   main: "/src/App.vue",
   environment: "vue-cli",
 };
diff --git a/sandpack-react/src/templates/vue3.ts b/sandpack-react/src/templates/vue3.ts
@@ -62,13 +62,17 @@ createApp(App).mount('#app')
 </html>
 `,
     },
+    "/package.json": {
+      code: JSON.stringify({
+        dependencies: {
+          "core-js": "^3.6.5",
+          vue: "^3.0.0-0",
+          "@vue/cli-plugin-babel": "4.5.0",
+        },
+        main: "/src/main.js",
+      }),
+    },
   },
-  dependencies: {
-    "core-js": "^3.6.5",
-    vue: "^3.0.0-0",
-    "@vue/cli-plugin-babel": "4.5.0",
-  },
-  entry: "/src/main.js",
   main: "/src/App.vue",
   environment: "vue-cli",
 };
diff --git a/sandpack-react/src/utils/sandpackUtils.ts b/sandpack-react/src/utils/sandpackUtils.ts
@@ -173,7 +173,7 @@ const combineTemplateFilesToSetup = ({
   if (!template) {
     // If not input, default to vanilla
     if (!customSetup) {
-      return SANDBOX_TEMPLATES.vanilla as SandboxTemplate;
+      return SANDBOX_TEMPLATES.vanilla as unknown as SandboxTemplate;
     }
 
     if (!files || Object.keys(files).length === 0) {
@@ -189,7 +189,9 @@ const combineTemplateFilesToSetup = ({
     } as SandboxTemplate;
   }
 
-  const baseTemplate = SANDBOX_TEMPLATES[template] as SandboxTemplate;
+  const baseTemplate = SANDBOX_TEMPLATES[
+    template
+  ] as unknown as SandboxTemplate;
   if (!baseTemplate) {
     throw new Error(
       `[sandpack-react]: invalid template "${template}" provided`