+ The following editor is a preview of Forgetti not Unforget
+
+ ) : null}
+
+
+
+ }
+ afterTitle={
+ plugin === "forgetti" ? (
+
+ Forgetti Result
+
+ ) : undefined
}
/>
-
-
- Click here to {viewDependencyGraph ? "hide" : "view"} the dependency
- graph
-
-
- {viewDependencyGraph && (
-
- )}
-
-
+ {plugin === "unforget" && (
+
+
+ Click here to {viewDependencyGraph ? "hide" : "view"} the dependency
+ graph
+
+
+ {viewDependencyGraph && (
+
+ )}
+
+
+ )}
);
}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 4888d00..0eba2f2 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -16,6 +16,7 @@
"@react-unforget/runtime": "0.1.0-alpha.7",
"@vercel/analytics": "^1.2.2",
"clsx": "^2.1.0",
+ "forgetti": "^0.8.4",
"framer-motion": "^11.0.8",
"html-entities": "^2.5.2",
"mermaid": "^10.9.0",
diff --git a/apps/docs/pages/comparisons/_meta.json b/apps/docs/pages/comparisons/_meta.json
new file mode 100644
index 0000000..2b13bc5
--- /dev/null
+++ b/apps/docs/pages/comparisons/_meta.json
@@ -0,0 +1,8 @@
+{
+ "forgetti": {
+ "title": "Forgetti vs. Unforget",
+ "theme": {
+ "layout": "full"
+ }
+ }
+}
diff --git a/apps/docs/pages/comparisons/forgetti.mdx b/apps/docs/pages/comparisons/forgetti.mdx
index 32e3bbb..4b9924c 100644
--- a/apps/docs/pages/comparisons/forgetti.mdx
+++ b/apps/docs/pages/comparisons/forgetti.mdx
@@ -1,3 +1,5 @@
+import { DynamicLiveCodeSandpack } from "@components/DynamicLiveCodeSandpack";
+
# Forgetti
[Forgetti](https://github.com/lxsmnsyc/forgetti) is also another alternative tool made to optimize React components at build time to make it run faster at runtime. But, when it comes to more complicated patterns, it generates failing code. For example, loops and mutations can lead to generating code that does not work.
@@ -9,3 +11,155 @@
| Breaking down JSX | ✅ | ✖️ |
| Basic mutation detection | ✅ | ✖️ |
| Control flows | ✅ | Fails with while/for loops |
+
+### Example
+
+Ok, let's see how Forgetti performs with a simple example. We have a counter component that uses the `useState` hook. We will see how Forgetti handles this.
+
+
+{`import { useState } from "react";
+
+export default function CounterWithMutationTracking() {
+ const [state, setState] = useState(0);
+
+ const text = "Yay!";
+
+ return (
+
+
+
+ Count: {state} {text}
+
+
+ );
+}
+`}
+
+
+
+Yay 🎉! It worked. Now let's make it a bit more complex. Remember the example from the home page of Unforget? Let's make the test mutable.
+
+
+```ts
+let text = "The count is is: ";
+
+if (state % 2 === 0) {
+ text += "even";
+} else {
+ text += "odd";
+}
+```
+
+
+{`import { useState } from "react";
+
+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}
+
+
+ );
+}
+`}
+
+
+
+And that just failed. Forgetti is not able to handle this. It's not able to detect the mutation in the `text` variable. This is a limitation of Forgetti.
+
+Now let's see how it handles loops.
+
+
+
+{`import { useState } from "react";
+
+const useData = () => {
+ const [data, setData] = useState([]);
+
+ return {
+ data,
+ addData: (item) => {
+ setData([...data, item]);
+ },
+ };
+};
+
+export default function CounterWithMutationTracking() {
+ const { data, addData } = useData();
+
+ const filteredData = [];
+ for (let i = 0; i < data.length; i++) {
+ if (data[i] % 2 === 0) {
+ filteredData.push(data[i]);
+ }
+ }
+
+ return (
+
+ );
+}
+`}
+
+
+Oh no! It failed again.
+
+Ok, one more test. Let's see how it handles alias analysis.
+
+
+
+{`import { useState } from "react";
+
+function Comp({ a, b }) {
+ const x = [];
+
+ x.push(a);
+
+ const y = x;
+
+ y.push(b);
+
+ return