feat: Upgrade Node.js version (#1029)

Co-authored-by: Utwo <mihai.legat@gmail.com>

.codesandbox/tasks.json

@@ -30,6 +30,10 @@
       "command": "yarn build",
       "runAtStart": true
     },
+    "ts": {
+      "name": "Typecheck",
+      "command": "yarn typecheck"
+    },
     "build:client": {
       "name": "Build: client",
       "command": "yarn workspace @codesandbox/sandpack-client build",
@@ -71,10 +75,7 @@
       "name": "Install",
       "command": "yarn install",
       "restartOn": {
-        "files": [
-          "yarn.lock",
-          "**/package.json"
-        ],
+        "files": ["yarn.lock", "**/package.json"],
         "branch": false,
         "resume": false
       }

.github/workflows/checks.yml

@@ -11,10 +11,10 @@ jobs:
     timeout-minutes: 10
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v4
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: "yarn"
@@ -31,7 +31,7 @@ jobs:
     timeout-minutes: 10
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v4
 
       - name: Setup | Node.js
         uses: actions/setup-node@v2
@@ -47,14 +47,14 @@ jobs:
 
   format:
     name: Format
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v4
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: "yarn"
@@ -67,14 +67,14 @@ jobs:
 
   typecheck:
     name: Typecheck
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     timeout-minutes: 10
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v4
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: "yarn"

.github/workflows/release-canary.yml

@@ -16,13 +16,13 @@ jobs:
 
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # pulls all commits (needed for lerna / semantic release to correctly version)
           fetch-depth: "0"
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: "14.18.0"
 

.github/workflows/release.yml

@@ -13,12 +13,12 @@ jobs:
 
     steps:
       - name: Setup | Clone codesandbox-client
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: codesandbox/codesandbox-client
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: "16.0.0"
 
@@ -34,7 +34,7 @@ jobs:
         run: yarn build:sandpack
 
       - name: Archive bundler artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: bundler
           path: www/**/*.*
@@ -50,7 +50,7 @@ jobs:
 
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # pulls all commits (needed for lerna / semantic release to correctly version)
           fetch-depth: "0"
@@ -64,7 +64,7 @@ jobs:
         run: npm whoami
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
 
@@ -79,7 +79,7 @@ jobs:
           useLockFile: true
 
       - name: Prepare | Download artifacts
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: bundler
           path: bundler
@@ -107,7 +107,7 @@ jobs:
 
     steps:
       - name: Setup | Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # pulls all commits (needed for lerna / semantic release to correctly version)
           fetch-depth: "0"
@@ -118,7 +118,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
 
@@ -128,7 +128,7 @@ jobs:
           useLockFile: true
 
       - name: Prepare | Download artifacts
-        uses: actions/download-artifact@v2
+        uses: actions/download-artifact@v3
         with:
           name: bundler
           path: bundler

.nvmrc

@@ -1 +1 @@
-v16
+v18

examples/nextjs-app-dir/app/layout.tsx

@@ -1,4 +1,4 @@
-import { SandPackCSS } from "@/components/sandpack-styles";
+import { SandpackCSS } from "@/components/sandpack-styles";
 
 export const metadata = {
   title: "Create Next App",
@@ -13,7 +13,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <SandPackCSS />
+        <SandpackCSS />
       </head>
       <body>{children}</body>
     </html>

examples/nextjs-app-dir/components/sandpack-styles.tsx

@@ -6,7 +6,7 @@ import { useServerInsertedHTML } from "next/navigation";
 /**
  * Ensures CSSinJS styles are loaded server side.
  */
-export const SandPackCSS = () => {
+export const SandpackCSS = () => {
   useServerInsertedHTML(() => {
     return (
       <style

examples/nextjs-app-dir/package.json

@@ -9,16 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "*",
+    "@codesandbox/sandpack-themes": "*",
     "@types/node": "18.15.11",
     "@types/react": "18.0.37",
     "@types/react-dom": "18.0.11",
     "eslint": "8.38.0",
-    "eslint-config-next": "13.3.0",
-    "next": "13.5.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.0.4",
-    "@codesandbox/sandpack-react": "*",
-    "@codesandbox/sandpack-themes": "*"
+    "eslint-config-next": "^14.0.0",
+    "next": "^14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "5.0.4"
   }
 }

examples/nextjs/package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "*",
     "@codesandbox/sandpack-themes": "*",
-    "next": "^12.2.4",
+    "eslint-config-next": "^14.0.0",
+    "next": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/nextjs/tsconfig.json

@@ -9,7 +9,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node16",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",

package.json

@@ -44,15 +44,14 @@
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^10.0.1",
     "@types/jest": "^27.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^27.4.5",
-    "eslint": "^7.5.0",
+    "eslint": "8.38.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
@@ -69,5 +68,8 @@
   "lint-staged": {
     "*": "prettier -u --write",
     "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+  },
+  "dependencies": {
+    "eslint-plugin-flowtype": "^8.0.3"
   }
 }

sandpack-client/src/utils.ts

@@ -192,7 +192,7 @@ ${errorInCode}`;
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export const normalizePath = <R extends any>(path: R): R => {
+export const normalizePath = <R>(path: R): R => {
   if (typeof path === "string") {
     return (path.startsWith("/") ? path : `/${path}`) as R;
   }

sandpack-react/.storybook/main.cjs

@@ -1,4 +1,5 @@
 const { dirname, join } = require("path");
+const { mergeConfig } = require("vite");
 
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -15,6 +16,14 @@ module.exports = {
   features: {
     storyStoreV7: false, // 👈 Opt out of on-demand story loading
   },
+
+  async viteFinal(config, { configType }) {
+    return mergeConfig(config, {
+      define: {
+        "process.env.SANDPACK_UNSTYLED_COMPONENTS": "false",
+      },
+    });
+  },
 };
 
 function getAbsolutePath(value) {

sandpack-react/src/components/CodeEditor/utils.ts

@@ -223,8 +223,7 @@ export const getCodeMirrorLanguage = (
   return options[extension as keyof typeof options];
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const useCombinedRefs = <T extends any>(
+export const useCombinedRefs = <T>(
   ...refs: Array<React.Ref<T>>
 ): React.Ref<T> =>
   React.useCallback(

sandpack-react/src/components/Console/Console.stories.tsx

@@ -273,7 +273,6 @@ export const NodeTemplate: React.FC = () => {
 export const ReactTemplate: React.FC = () => {
   return (
     <Sandpack
-      options={{ showConsole: true }}
       files={{
         "App.js": `import { useState } from "react"
 export default function App() {
@@ -285,6 +284,7 @@ export default function App() {
     )
 }`,
       }}
+      options={{ showConsole: true }}
       template="react"
     />
   );

sandpack-react/src/templates/index.tsx

@@ -2,10 +2,10 @@ import { ASTRO_TEMPLATE } from "./node/astro";
 import { NEXTJS_TEMPLATE } from "./node/nexjs";
 import { NODE_TEMPLATE } from "./node/node";
 import { VITE_TEMPLATE } from "./node/vite";
-import { VITE_REACT_TEMPLATE } from "./node/vite-react";
-import { VITE_REACT_TS_TEMPLATE } from "./node/vite-react-ts";
 import { VITE_PREACT_TEMPLATE } from "./node/vite-preact";
 import { VITE_PREACT_TS_TEMPLATE } from "./node/vite-preact-ts";
+import { VITE_REACT_TEMPLATE } from "./node/vite-react";
+import { VITE_REACT_TS_TEMPLATE } from "./node/vite-react-ts";
 import { VITE_SVELTE_TEMPLATE } from "./node/vite-svelte";
 import { VITE_SVELTE_TS_TEMPLATE } from "./node/vite-svelte-ts";
 import { VITE_VUE_TEMPLATE } from "./node/vite-vue";
@@ -51,7 +51,7 @@ export const SANDBOX_TEMPLATES = {
   "vite-react": VITE_REACT_TEMPLATE,
   "vite-react-ts": VITE_REACT_TS_TEMPLATE,
   "vite-preact": VITE_PREACT_TEMPLATE,
-  "vite-preact-ts": VITE_PREACT_TS_TEMPLATE,  
+  "vite-preact-ts": VITE_PREACT_TS_TEMPLATE,
   "vite-vue": VITE_VUE_TEMPLATE,
   "vite-vue-ts": VITE_VUE_TS_TEMPLATE,
   "vite-svelte": VITE_SVELTE_TEMPLATE,

sandpack-react/src/templates/node/vite-preact-ts.ts

@@ -88,7 +88,7 @@ render(<App />, root);
             preview: "vite preview",
           },
           dependencies: {
-            "preact": "^10.16.0"
+            preact: "^10.16.0",
           },
           devDependencies: {
             "@preact/preset-vite": "^2.5.0",

sandpack-react/src/templates/node/vite-preact.ts

@@ -44,7 +44,7 @@ render(<App />, root);
           preview: "vite preview",
         },
         dependencies: {
-          "preact": "^10.16.0"
+          preact: "^10.16.0",
         },
         devDependencies: {
           "@preact/preset-vite": "^2.5.0",

sandpack-react/src/types.ts

@@ -618,7 +618,7 @@ export type SandpackStatus =
 export type EditorState = "pristine" | "dirty";
 
 export interface SandboxTemplate {
-  files: SandpackFiles;
+  files: SandpackBundlerFiles;
   dependencies: Record<string, string>;
   devDependencies?: Record<string, string>;
   entry?: string;

sandpack-react/src/utils/sandpackUtils.ts

@@ -44,7 +44,7 @@ export const getSandpackStateFromProps = (
   });
 
   // visibleFiles and activeFile override the setup flags
-  let visibleFiles = normalizePath(props.options?.visibleFiles ?? []);
+  let visibleFiles: string[] = normalizePath(props.options?.visibleFiles ?? []);
   let activeFile = props.options?.activeFile
     ? resolveFile(props.options?.activeFile, projectSetup.files)
     : undefined;