fix: Convert DynamicLiveCodeSandPack export to default

mohebifar · Mar 1, 2024 · a8d34cb · a8d34cb
1 parent 1cfd6e7
commit a8d34cb
Show file tree

Hide file tree

Showing 21 changed files with 223 additions and 158 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v4
         with:
-          fetch-depth: 2
+          fetch-depth: 0
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v4

diff --git a/apps/docs/components/DynamicLiveCodeSandpack.tsx b/apps/docs/components/DynamicLiveCodeSandpack.tsx
@@ -1,35 +1,34 @@
 import dynamic from "next/dynamic";
 import { MoveRight } from "lucide-react";
 
-export const DynamicLiveCodeSandPack = dynamic(
-  () => import("./LiveCodeSandpack"),
-  {
-    loading: () => {
-      const loadingWindow = (
-        <div className="mockup-window bg-gray-200 border dark:bg-gray-800 dark:border-gray-700">
-          <div className="w-full bg-gray-100 border dark:bg-gray-900">
-            <div className="h-96 flex items-center justify-center">
-              <span className="loading loading-spinner loading-md"></span>{" "}
-            </div>
-            <div className="h-3 bg-gray-100" />
-            <div className="h-96 flex items-center justify-center">
-              <span className="loading loading-spinner loading-md"></span>{" "}
-            </div>
+const DynamicLiveCodeSandpack = dynamic(() => import("./LiveCodeSandpack"), {
+  loading: () => {
+    const loadingWindow = (
+      <div className="mockup-window bg-gray-200 border dark:bg-gray-800 dark:border-gray-700">
+        <div className="w-full bg-gray-100 border dark:bg-gray-900">
+          <div className="h-96 flex items-center justify-center">
+            <span className="loading loading-spinner loading-md"></span>{" "}
+          </div>
+          <div className="h-3 bg-gray-100" />
+          <div className="h-96 flex items-center justify-center">
+            <span className="loading loading-spinner loading-md"></span>{" "}
           </div>
         </div>
-      );
-
-      return (
-        <div className="grid xl:grid-rows-1 xl:grid-cols-beforeAfterCodingBlocks grid-cols-1 grid-row-2 gap-4 w-full mt-6">
-          {loadingWindow}
+      </div>
+    );
 
-          <div className="items-center hidden xl:flex">
-            <MoveRight className="dark:text-gray-100 text-gray-500" size={30} />
-          </div>
+    return (
+      <div className="grid xl:grid-rows-1 xl:grid-cols-beforeAfterCodingBlocks grid-cols-1 grid-row-2 gap-4 w-full mt-6">
+        {loadingWindow}
 
-          {loadingWindow}
+        <div className="items-center hidden xl:flex">
+          <MoveRight className="dark:text-gray-100 text-gray-500" size={30} />
         </div>
-      );
-    },
-  }
-);
+
+        {loadingWindow}
+      </div>
+    );
+  },
+});
+
+export { DynamicLiveCodeSandpack };
diff --git a/apps/docs/components/LiveCodeSandpack.tsx b/apps/docs/components/LiveCodeSandpack.tsx
@@ -1,8 +1,8 @@
 import { transform } from "@babel/standalone";
 import { SandpackProvider } from "@codesandbox/sandpack-react";
+// @ts-expect-error
 import reactUnforgetBabelPlugin from "@react-unforget/babel-plugin";
 import { MoveRight } from "lucide-react";
-// @ts-expect-error
 import jsxBabelPlugin from "@babel/plugin-syntax-jsx";
 import { useTheme } from "nextra-theme-docs";
 import { useCallback, useEffect, useMemo, useState } from "react";

diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
@@ -0,0 +1,13 @@
+import nextra from "nextra";
+
+const withNextra = nextra({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.jsx",
+});
+
+export default withNextra({
+  reactStrictMode: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+});
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -9,12 +9,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/parser": "^7.24.0",
     "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/standalone": "^7.24.0",
     "@codesandbox/sandpack-react": "^2.13.4",
-    "@react-unforget/babel-plugin": "0.1.0-dev.4",
-    "@react-unforget/compiler": "0.1.0-dev.5",
+    "@react-unforget/babel-plugin": "0.1.0-dev.6",
+    "@react-unforget/compiler": "0.1.0-dev.7",
     "@react-unforget/runtime": "0.1.0-dev.4",
     "@vercel/analytics": "^1.2.2",
     "classnames": "^2.5.1",
@@ -29,9 +28,9 @@
     "@next/eslint-plugin-next": "^14.0.4",
     "@react-unforget/eslint-config": "*",
     "@react-unforget/typescript-config": "*",
-    "@types/eslint": "^8.56.1",
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
+    "@types/eslint": "^8.56.5",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.17",
     "daisyui": "^4.7.2",

diff --git a/apps/docs/pages/examples/component-with-early-return.mdx b/apps/docs/pages/examples/component-with-early-return.mdx
@@ -1,4 +1,4 @@
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 ### Component with Early Return
 

diff --git a/apps/docs/pages/examples/component-with-props.mdx b/apps/docs/pages/examples/component-with-props.mdx
@@ -1,4 +1,4 @@
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 ### Component with Props
 

diff --git a/apps/docs/pages/examples/counter-with-mutated-dependency.mdx b/apps/docs/pages/examples/counter-with-mutated-dependency.mdx
@@ -1,4 +1,4 @@
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 ### Counter with Mutation Tracking
 
@@ -10,23 +10,22 @@ React Unforget can trace statements that will mutate a variable.
 export default function CounterWithMutationTracking() {
   const [state, setState] = useState(0);
 
-  let text = "The number is: ";
-
-  if (state % 2 === 0) {
-    text += "even";
-  } else {
-    text += "odd";
-  }
-
-  return (
-    <div>
-      <button onClick={() => setState(state + 1)}>Increment</button>
-      <div>
-        <span>Count: {state}</span> {text}
-      </div>
-    </div>
-  );
+let text = "The number is: ";
+
+if (state % 2 === 0) {
+text += "even";
+} else {
+text += "odd";
 }
-`}
+
+return (
+
+<div>
+  <button onClick={() => setState(state + 1)}>Increment</button>
+  <div>
+    <span>Count: {state}</span> {text}
+  </div>
+</div>
+); } `}
 
 </DynamicLiveCodeSandPack>
diff --git a/apps/docs/pages/examples/simple-counter.mdx b/apps/docs/pages/examples/simple-counter.mdx
@@ -1,4 +1,4 @@
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 ### Simple Counter App
 

diff --git a/apps/docs/pages/examples/simple-jsx.mdx b/apps/docs/pages/examples/simple-jsx.mdx
@@ -1,4 +1,4 @@
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 ### Simple JSX
 

diff --git a/apps/docs/pages/examples/with-data-fetching.mdx b/apps/docs/pages/examples/with-data-fetching.mdx
@@ -1,4 +1,4 @@
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 ### With Data Fetching
 
@@ -32,7 +32,7 @@ function UserList() {
   const [followers, setFollowers] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  const [setFilterUsers, setShouldFilterUsers] = useState(false);
+  const [shouldFilterUsers, setShouldFilterUsers] = useState(false);
 
   useEffect(() => {
     Promise.all([
@@ -72,7 +72,7 @@ function UserList() {
     }
   }
 
-  const usersForUI = setFilterUsers ? filteredUsers : memoizedFollowers;
+  const usersForUI = shouldFilterUsers ? filteredUsers : memoizedFollowers;
 
   // Early return for loading state
   if (loading) return <div>Loading...</div>;
@@ -89,7 +89,7 @@ function UserList() {
       <h1>Follwers of {user.name}</h1>
       <h1>User List</h1>
       <button onClick={toggleEvenOnes}>
-        {setFilterUsers ? "Show Odd" : "Show Even"}
+        {shouldFilterUsers ? "Show Odd" : "Show Even"}
       </button>
       <ul onClick={() => handleUserClick(user.id)}>{userListElement}</ul>
     </div>
@@ -126,40 +126,3 @@ export default UserList;
 `}
 
 </DynamicLiveCodeSandPack>
-
-{/* <DynamicLiveCodeSandPack>
-{`import {useState} from "react";
-
-const numbers1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
-const numbers2 = numbers1.filter((number) => number % 2 === 0);
-
-export default function UserList() {
-  const [numbers, setNumbers] = useState(numbers1);
-
-  const filteredNumbers = [];
-  for (let i = 0; i < numbers.length; i++) {
-    const currentN = numbers[i];
-    if (i % 2 === 0) {
-      filteredNumbers.push(currentN);
-    }
-  }
-
-  const handleUserClick = () => {
-    setNumbers((p) => (numbers1 === p ? numbers2 : numbers1));
-  };
-
-  return (
-    <div>
-      <button onClick={handleUserClick}>Toggle even ones</button>
-      <ul>
-        {filteredNumbers.map((n) => (
-          <div>{n}</div>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-`}
-
-</DynamicLiveCodeSandPack> */}
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
@@ -2,7 +2,7 @@
 title: "Home"
 ---
 
-import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandPack";
+import { DynamicLiveCodeSandPack } from "@components/DynamicLiveCodeSandpack";
 
 # React Unforget
 

diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
@@ -1,24 +1,31 @@
 {
-  "extends": "@react-unforget/typescript-config/nextjs.json",
   "compilerOptions": {
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
+    "baseUrl": ".",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "module": "esnext",
+    "resolveJsonModule": true,
     "paths": {
-      "@components/*": ["./components/*"]
+      "@components/*": ["components/*"]
     }
   },
   "include": [
     "next-env.d.ts",
-    "next.config.js",
-    "theme.config.jsx",
-    "tailwind.config.js",
-    "postcss.config.js",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.mdx"
+, "next.config.mjs"  ],
   "exclude": ["node_modules"]
 }
diff --git a/apps/docs/vercel.json b/apps/docs/vercel.json
@@ -0,0 +1,3 @@
+{
+  "public": true
+}
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "react-unforget",
   "private": true,
   "scripts": {
-    "build": "turbo run --scope=@react-unforget/* --no-deps build",
+    "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
     "test": "turbo test",

diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json
@@ -26,7 +26,7 @@
     "@react-unforget/eslint-config": "*",
     "@react-unforget/jest-config": "*",
     "@react-unforget/typescript-config": "*",
-    "@types/react": "^18.2.58",
+    "@types/react": "^18.2.61",
     "react": "^18.2.0",
     "tsup": "^8.0.2"
   },

diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -35,9 +35,8 @@
   },
   "dependencies": {
     "@babel/helper-validator-identifier": "^7.22.20",
-    "@babel/parser": "^7.23.9",
-    "@babel/standalone": "^7.23.10",
-    "@babel/traverse": "^7.23.9",
+    "@babel/parser": "^7.24.0",
+    "@babel/traverse": "^7.24.0",
     "@babel/types": "^7.24.0"
   },
   "publishConfig": {

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -8,12 +8,12 @@
     "react-internal.js"
   ],
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@vercel/style-guide": "^5.1.0",
-    "eslint-config-turbo": "^1.11.3",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^1.11.3",
     "eslint-plugin-only-warn": "^1.1.0",
-    "@typescript-eslint/parser": "^6.17.0",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
     "typescript": "^5.3.3"
   }
 }
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -25,7 +25,7 @@
     "@react-unforget/eslint-config": "*",
     "@react-unforget/jest-config": "*",
     "@react-unforget/typescript-config": "*",
-    "@types/react": "^18.2.58",
+    "@types/react": "^18.2.61",
     "react": "^18.2.0",
     "tsup": "^8.0.2"
   },