Skip to content

Commit

Permalink
Merge pull request #21 from lxsmnsyc/next
Browse files Browse the repository at this point in the history 
0.5.0
  • Loading branch information
@lxsmnsyc
lxsmnsyc authored May 15, 2023
2 parents 4b9ab60 + e101f8f commit 7adfa3f
Show file tree
Hide file tree
Showing 27 changed files with 1,597 additions and 738 deletions.
145 changes: 66 additions & 79 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,13 +62,12 @@ function Example() {
import { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
function Example() {
let _c = _$$cache(_useMemo, 1),
_v = _c[0] ||= [1, 2, 3, 4];
const value = _v;
let _c = _$$cache(_useMemo, 1);
const value = 0 in _c ? _c[0] : _c[0] = [1, 2, 3, 4];
}
```

The expression itself may unwrap into multiple constant values if the entire expression is constant itself.
Complex expressions that are entirely constant are cached as one.

```js
function Example() {
Expand All @@ -78,11 +77,8 @@ function Example() {
import { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
function Example() {
let _c = _$$cache(_useMemo, 3),
_v = _c[0] ||= getGreeting(),
_v2 = _c[1] ||= getReceiver(),
_v3 = _c[2] ||= `${_v}, ${_v2}`;
const message = _v3;
let _c = _$$cache(_useMemo, 1);
const message = 0 in _c ? _c[0] : _c[0] = `${getGreeting()}, ${getReceiver()}`;
}
```

Expand All @@ -109,10 +105,8 @@ function Example(props) {
_v3 = _eq2 ? _c[2] : _c[2] = _v2,
_v4 = _eq ? _c[3] : _c[3] = _v.message,
_eq3 = _$$equals(_c, 4, _v4),
_v5 = _eq3 ? _c[4] : _c[4] = _v4,
_eq4 = _eq2 && _eq3,
_v6 = _eq4 ? _c[5] : _c[5] = `${_v3}, ${_v5}`;
const message = _v6;
_v5 = _eq3 ? _c[4] : _c[4] = _v4;
const message = _eq2 && _eq3 ? _c[5] : _c[5] = `${_v3}, ${_v5}`;
}
```

Expand All @@ -135,11 +129,10 @@ import { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
import { useRef } from 'react';
function Example(props) {
let _c = _$$cache(_useMemo, 1),
_v = _c[0] ||= {
current: initialValue
};
const example = _v;
let _c = _$$cache(_useMemo, 1);
const example = 0 in _c ? _c[0] : _c[0] = {
current: initialValue
};
}
```

Expand All @@ -163,16 +156,13 @@ import { useMemo } from 'react';
function Example(props) {
let _c = _$$cache(_useMemo, 6),
_eq = _$$equals(_c, 0, props),
_v = _eq ? _c[0] : _c[0] = props,
_v2 = _eq ? _c[1] : _c[1] = getA(_v);
const dependencyA = _v2;
let _v3 = _eq ? _c[2] : _c[2] = getB(_v);
const dependencyB = _v3;
_v = _eq ? _c[0] : _c[0] = props;
const dependencyA = _eq ? _c[1] : _c[1] = getA(_v);
const dependencyB = _eq ? _c[2] : _c[2] = getB(_v);
let _eq2 = _$$equals(_c, 3, dependencyB),
_v4 = _eq2 ? _c[3] : _c[3] = dependencyB,
_v5 = _eq2 ? _c[4] : _c[4] = [_v4],
_v6 = _eq2 ? _c[5] : _c[5] = (() => getValue(dependencyA, dependencyB))();
const value = _v6;
_v5 = _eq2 ? _c[4] : _c[4] = [_v4];
const value = _eq2 ? _c[5] : _c[5] = (() => getValue(dependencyA, dependencyB))();
}
```

Expand All @@ -196,16 +186,13 @@ import { useCallback } from 'react';
function Example(props) {
let _c = _$$cache(_useMemo, 6),
_eq = _$$equals(_c, 0, props),
_v = _eq ? _c[0] : _c[0] = props,
_v2 = _eq ? _c[1] : _c[1] = getA(_v);
const dependencyA = _v2;
let _v3 = _eq ? _c[2] : _c[2] = getB(_v);
const dependencyB = _v3;
_v = _eq ? _c[0] : _c[0] = props;
const dependencyA = _eq ? _c[1] : _c[1] = getA(_v);
const dependencyB = _eq ? _c[2] : _c[2] = getB(_v);
let _eq2 = _$$equals(_c, 3, dependencyB),
_v4 = _eq2 ? _c[3] : _c[3] = dependencyB,
_v5 = _eq2 ? _c[4] : _c[4] = [_v4],
_v6 = _eq2 ? _c[5] : _c[5] = () => getValue(dependencyA, dependencyB);
const value = _v6;
_v5 = _eq2 ? _c[4] : _c[4] = [_v4];
const value = _eq2 ? _c[5] : _c[5] = () => getValue(dependencyA, dependencyB);
}
```

Expand All @@ -227,7 +214,7 @@ import { $$cache as _$$cache } from "forgetti/runtime";
import { $$equals as _$$equals } from "forgetti/runtime";
import { useEffect } from 'react';
function Example(props) {
let _c = _$$cache(_useMemo, 8),
let _c = _$$cache(_useMemo, 9),
_eq = _$$equals(_c, 0, props),
_v = _eq ? _c[0] : _c[0] = props,
_v2 = _eq ? _c[1] : _c[1] = _v.a,
Expand All @@ -239,11 +226,10 @@ function Example(props) {
_v6 = _eq ? _c[5] : _c[5] = _v.c,
_eq4 = _$$equals(_c, 6, _v6),
_v7 = _eq4 ? _c[6] : _c[6] = _v6,
_eq5 = _eq2 && _eq3 && _eq4,
_v8 = _eq5 ? _c[7] : _c[7] = [_v3, _v5, _v7];
useEffect(() => {
getValue(props.a, props.b, props.c);
}, [_v8]);
_hoisted = useEffect(() => {
getValue(props.a, props.b, props.c);
}, [_eq2 && _eq3 && _eq4 ? _c[7] : _c[7] = [_v3, _v5, _v7]]);
_$$equals(_c, 8, _hoisted) ? _c[8] : _c[8] = _hoisted;
}
```

Expand Down Expand Up @@ -280,12 +266,11 @@ import { $$cache as _$$cache } from "forgetti/runtime";
import { $$equals as _$$equals } from "forgetti/runtime";
function Example(props) {
let _c = _$$cache(_useMemo, 2),
_eq = _$$equals(_c[0], props),
_v = _eq ? _c[0] : _c[0] = props,
_v2 = _eq ? _c[1] : _c[1] = () => {
console.log(props.message);
};
const callback = _v2;
_eq = _$$equals(_c, 0, props),
_v = _eq ? _c[0] : _c[0] = props;
const callback = _eq ? _c[1] : _c[1] = () => {
console.log(props.message);
};
}
```

Expand All @@ -307,21 +292,19 @@ function Example(props) {
// Compiles into
import { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
import { $$branch as _$$branch } from "forgetti/runtime";
import { $$equals as _$$equals } from "forgetti/runtime";
function Example(props) {
let _c = _$$cache(_useMemo, 4),
_eq = _$$equals(_c, 0, props),
_v2 = _eq ? _c[0] : _c[0] = props,
_v3 = _eq ? _c[1] : _c[1] = _v2.condition,
_v;
if (_v3) {
let _c2 = _c[2] ||= new Array(1),
_v4 = _eq ? _c2[0] : _c2[0] = _v2.left;
_v = _v4;
if (_eq ? _c[1] : _c[1] = _v2.condition) {
let _c2 = _$$branch(_c, 2, 1);
_v = _eq ? _c2[0] : _c2[0] = _v2.left;
} else {
let _c3 = _c[3] ||= new Array(1),
_v5 = _eq ? _c3[0] : _c3[0] = _v2.right;
_v = _v5;
let _c3 = _$$branch(_c, 3, 1);
_v = _eq ? _c3[0] : _c3[0] = _v2.right;
}
const value = _v;
}
Expand All @@ -338,6 +321,7 @@ function Example(props) {
// Compiles into
import { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
import { $$branch as _$$branch } from "forgetti/runtime";
import { $$equals as _$$equals } from "forgetti/runtime";
function Example(props) {
let _c = _$$cache(_useMemo, 3),
Expand All @@ -346,9 +330,8 @@ function Example(props) {
_v3 = _eq ? _c[1] : _c[1] = _v2.condition,
_v;
if (_v3 == null) {
let _c2 = _c[2] ||= new Array(1),
_v4 = _eq ? _c2[0] : _c2[0] = _v2.right;
_v = _v4;
let _c2 = _$$branch(_c, 2, 1);
_v = _eq ? _c2[0] : _c2[0] = _v2.right;
} else _v = _v3;
const value = _v;
}
Expand Down Expand Up @@ -384,35 +367,29 @@ function Example(props) {
return examples.b(props.value);
}
}
// Compiles into
import { useMemo as _useMemo } from "react";
// Compiles intoimport { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
import { $$branch as _$$branch } from "forgetti/runtime";
import { $$equals as _$$equals } from "forgetti/runtime";
function Example(props) {
// root cache
let _c = _$$cache(_useMemo, 6),
_eq = _$$equals(_c, 0, props),
_v = _eq ? _c[0] : _c[0] = props,
_v2 = _eq ? _c[1] : _c[1] = _v.type,
_eq2 = _$$equals(_c, 2, _v2),
_v3 = _eq2 ? _c[2] : _c[2] = _v2,
_v4 = _eq2 ? _c[3] : _c[3] = _v3 === 'a';
if (_v4) {
// branched cache
let _c2 = _c[4] ||= new Array(3),
_v3 = _eq2 ? _c[2] : _c[2] = _v2;
if (_eq2 ? _c[3] : _c[3] = _v3 === 'a') {
let _c2 = _$$branch(_c, 4, 3),
_v5 = _eq ? _c2[0] : _c2[0] = _v.value,
_eq3 = _$$equals(_c2, 1, _v5),
_v6 = _eq3 ? _c2[1] : _c2[1] = _v5,
_v7 = _eq3 ? _c2[2] : _c2[2] = examples.a(_v6);
return _v7;
_v6 = _eq3 ? _c2[1] : _c2[1] = _v5;
return _eq3 ? _c2[2] : _c2[2] = examples.a(_v6);
} else {
// branched cache
let _c3 = _c[5] ||= new Array(3),
let _c3 = _$$branch(_c, 5, 3),
_v8 = _eq ? _c3[0] : _c3[0] = _v.value,
_eq4 = _$$equals(_c3, 1, _v8),
_v9 = _eq4 ? _c3[1] : _c3[1] = _v8,
_v10 = _eq4 ? _c3[2] : _c3[2] = examples.b(_v9);
return _v10;
_v9 = _eq4 ? _c3[1] : _c3[1] = _v8;
return _eq4 ? _c3[2] : _c3[2] = examples.b(_v9);
}
}
```
Expand Down Expand Up @@ -444,21 +421,20 @@ function Example(props) {
// Compiles into
import { useMemo as _useMemo } from "react";
import { $$cache as _$$cache } from "forgetti/runtime";
import { $$branch as _$$branch } from "forgetti/runtime";
import { $$equals as _$$equals } from "forgetti/runtime";
function Example(props) {
let _c = _$$cache(_useMemo, 3),
_eq = _$$equals(_c, 0, props),
_v = _eq ? _c[0] : _c[0] = props,
_v2 = _eq ? _c[1] : _c[1] = _v.arr,
_c2 = _c[2] ||= [],
_c2 = _$$branch(_c, 2, 0),
_id = 0;
for (const x in _v2) {
let _lid = _id++,
_l = _c2[_lid] ||= new Array(2),
let _l = _$$branch(_c2, _id++, 2),
_eq2 = _$$equals(_l, 0, x),
_v3 = _eq2 ? _l[0] : _l[0] = x,
_v4 = _eq2 ? _l[1] : _l[1] = console.log(_v3);
_v4;
_v3 = _eq2 ? _l[0] : _l[0] = x;
_eq2 ? _l[1] : _l[1] = console.log(_v3);
}
}
```
Expand All @@ -471,6 +447,17 @@ List of supported loop statements:
- `while`
- `do-while`
## `/* @forgetti skip */`
To disable optimization for an specific component, you can include the comment `/* @forgetti skip */` before the component.
```js
/* @forgetti skip */
function UnoptimizedComponent(props) {
return <h1 className={props.className}>{props.children}</h1>;
}
```
## Configuration
Configuration only has one property: `preset`. This property can either be `"react"`, `"preact"` or your custom preset.
Expand Down
2 changes: 1 addition & 1 deletion examples/preact/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function Decrement({ action }: { action: () => void }) {
export default function App() {
const [count, setCount] = useState(0);
const increment = () => setCount((c) => c + 1);
const decrement = () => setCount((c) => c + 1);
const decrement = () => setCount((c) => c - 1);
const example = useMemo(() => setCount, [setCount]);

useWhy('App#example', example);
Expand Down
2 changes: 1 addition & 1 deletion examples/react/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function Decrement({ action }: { action: () => void }) {
export default function App() {
const [count, setCount] = useState(0);
const increment = () => setCount((c) => c + 1);
const decrement = () => setCount((c) => c + 1);
const decrement = () => setCount((c) => c - 1);
const example = useMemo(() => setCount, [setCount]);

useWhy('App#example', example);
Expand Down
Loading

0 comments on commit 7adfa3f

Please sign in to comment.