diff --git a/README.md b/README.md index 23bb922..a21ad22 100644 --- a/README.md +++ b/README.md @@ -14,22 +14,14 @@ The transformation process involves two main steps: ### Features -- **Intelligent Memoization:** React Unforget unwraps JSX elements and memoizes each element and expression separately, leading to more granular and effective memoization. - -- **Dependency Graph Computation:** It builds a comprehensive dependency graph that captures the relationships between different code segments, ensuring that transformations are done with a full understanding of the codebase. - -- **Optimized Transformation:** Through a topological sort and depth-first search, segments are transformed in an optimized order, replacing variables and expressions with their memoized counterparts to reduce re-renders. - -- **Custom Cache Hook:** Utilizes a custom hook `useCreateCache$unforget` from `@react-unforget/runtime` to manage state and cache effectively, ensuring that components only re-render when necessary. +- **Intelligent component and hook memoization**: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code. +- **Granular JSX element unwrapping**: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use `React.memo`. +- **Memoization beyond early returns**: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components. ## Comparison with React Compiler React Compiler (Forget) is still under development and its release date remains uncertain. React Unforget offers an alternative approach to optimizing React applications, similar to how Preact serves as an alternative to React. It not only provides a fallback option but also pushes the boundaries of what's possible within the React ecosystem, encouraging innovation and diversity in optimization techniques. -## Contributing - -We welcome contributions from the community! Whether you're interested in fixing bugs, adding new features, or improving documentation, your help is appreciated. Please refer to our contributing guidelines for more information on how to get involved. - ## License React Unforget is open-source software licensed under the MIT license. Feel free to use, modify, and distribute it as per the license terms. diff --git a/apps/docs/components/Hero.tsx b/apps/docs/components/Hero.tsx new file mode 100644 index 0000000..6290589 --- /dev/null +++ b/apps/docs/components/Hero.tsx @@ -0,0 +1,17 @@ +import { OldAndNewCodeReveal } from "./OldAndNewCodeReveal"; + +export const Hero = () => ( +
+
+
+

+ React Unforget +

+

+ A compiler for React that optimizes components and hooks for performance + and readability. +

+ +
+
+); diff --git a/apps/docs/components/ui/text-reveal-card.tsx b/apps/docs/components/ui/text-reveal-card.tsx index b981544..09b76a0 100644 --- a/apps/docs/components/ui/text-reveal-card.tsx +++ b/apps/docs/components/ui/text-reveal-card.tsx @@ -79,7 +79,7 @@ export const TextRevealCard = ({ } } transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }} - className="absolute bg-[#1d1c20] z-20 will-change-transform" + className="absolute bg-[#1d1c20] z-10 will-change-transform" > 
 0 ? 1 : 0,
           }}
           transition={isMouseOver ? { duration: 0 } : { duration: 0.4 }}
-          className="h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent absolute z-50 will-change-transform"
+          className="h-40 w-[8px] bg-gradient-to-b from-transparent via-neutral-800 to-transparent absolute z-20 will-change-transform"
         >
 
         

diff --git a/apps/docs/package.json b/apps/docs/package.json
index 0b9c749..5348383 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -19,6 +19,7 @@
     "framer-motion": "^11.0.8",
     "html-entities": "^2.5.2",
     "mermaid": "^10.9.0",
+    "mini-svg-data-uri": "^1.4.4",
     "next": "^14.0.4",
     "nextra": "^2.13.3",
     "nextra-theme-docs": "^2.13.3",
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index ad670a5..6451c00 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -3,13 +3,9 @@ title: "Home"
 ---
 
 import { DynamicLiveCodeSandpack } from "@components/DynamicLiveCodeSandpack";
-import { OldAndNewCodeReveal } from "@components/OldAndNewCodeReveal";
+import { Hero } from "@components/Hero";
 
-# React Unforget
-
-React Unforget is a project inspired by the principles of React Forget, designed to streamline and optimize React component rendering. The mission of React Unforget is to enhance the performance of React applications as well as developer experience by automating the memoization process, making it unnecessary to manually use `useMemo`, `useCallback` or `React.memo`.
-
-
+
 
 ## See it in action
 
@@ -19,22 +15,22 @@ React Unforget is a project inspired by the principles of React Forget, designed
 export default function CounterWithMutationTracking() {
   const [state, setState] = useState(0);
 
-let text = "The number is: ";
-
-if (state % 2 === 0) {
-text += "even";
-} else {
-text += "odd";
-}
-
-return (
-

-
-

-Count: {state} {text}
-

-

-);
+  let text = "The number is: ";
+
+  if (state % 2 === 0) {
+    text += "even";
+  } else {
+    text += "odd";
+  }
+
+  return (
+    

+      
+      

+        Count: {state} {text}
+      

+    

+  );
 }
 `}
 
@@ -44,12 +40,9 @@ Dive into the [collection of examples](./examples.mdx) and documentation to see
 
 ## Why React Unforget?
 
-1. Intelligent Component and Hook Memoization: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code.
-1. Granular JSX Element Unwrapping: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use `React.memo`.
-1. Memoization Beyond Early Returns: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components.
-1. Segmented Transformation Approach: Transforms code segments based on dependency analysis, ensuring efficient execution and minimizing unnecessary computations.
-
-Ensures segment execution is conditional based on dependency changes, reducing redundant computations and improving performance.
+1. **Intelligent component and hook memoization**: Automatically identifies and memoizes React components and hooks, ensuring that only necessary re-renders occur. This leads to a more performant yet with more readable code.
+1. **Granular JSX element unwrapping**: Unwraps JSX elements and memoizes each element and expression separately for more effective optimization. Eliminiating the need to use `React.memo`.
+1. **Memoization beyond early returns**: React Unforget uniquely enables the memoization of values even after early returns in component functions, eliminating the need to restructure your code to comply with the Rules of Hooks. This ensures optimization without altering the logical flow of your components.
 
 ### How about React Compiler (Forget)?
 
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index cbdce95..3073af5 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -1,3 +1,9 @@
+const svgToDataUri = require("mini-svg-data-uri");
+
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -13,7 +19,34 @@ module.exports = {
       },
     },
   },
-  plugins: [require("daisyui")],
+  plugins: [
+    require("daisyui"),
+    function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          "bg-grid": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              ``,
+            )}")`,
+          }),
+          "bg-grid-small": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              ``,
+            )}")`,
+          }),
+          "bg-dot": (value) => ({
+            backgroundImage: `url("${svgToDataUri(
+              ``,
+            )}")`,
+          }),
+        },
+        {
+          values: flattenColorPalette(theme("backgroundColor")),
+          type: "color",
+        },
+      );
+    },
+  ],
   daisyui: {
     base: false,
     themes: ["synthwave"],
diff --git a/yarn.lock b/yarn.lock
index 6cdfd27..c4000a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7736,6 +7736,11 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-svg-data-uri@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimatch@9.0.3, minimatch@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"