https://github.com/lukasbombach/just-reactive-jsx
https://github.com/lukasbombach/just-reactive-jsx
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lukasbombach/just-reactive-jsx
- Owner: LukasBombach
- Created: 2023-11-04T07:24:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-02T20:28:50.000Z (over 1 year ago)
- Last Synced: 2025-02-24T02:40:20.930Z (4 months ago)
- Language: TypeScript
- Size: 377 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# just-reactive-jsx
Current todos
- [ ] Plugin: Assignments -> Signals
- [ ] SSR: Hydration Markers
- [ ] Client JS: Hydration functions
- [ ] Client JS: Final bundle + hydration data
- [ ] Cleanup
Next steps
- [ ] Clean up
- [ ] Reactive declarations quick implementation hack
- [ ] Reactive declarations selecting, possible edge-cases
- [ ] transformJsxExpressionContainers finds and transforms in one
- [ ] Really Remove React cleanly, even the package
- [x] Reactive Declarations
- [x] Rm React
- [ ] Hot Reload
evaluate
- [ ] EVALUATE: Compiler Augmented Reactivity (Signals)
- [ ] EVALUATE: Automatic Reactive Declarations & Reactive Statements
prove
- [ ] PROVE: Business Logic Outside of Components (& other state managers)
- [ ] PROVE: Just enough JavaScript (Hydration)
- [ ] PROVE: Non-Ownership of the DOM
- [ ] PROVE: Fine-Grained Page Loading Strategy (& Hydration Strategy)
- [ ] PROVE: Performance (Drag & Drop Performance Demo)
Notes:
- [x] Basic reactivity
- [ ] Get rid of unneded imports (React)
- [ ] Reactive Declarations
- [ ] Reactive Statements
- [ ] CSS (Tailwind)
- [ ] Drag & Drop Perormance Demo
- [ ] SSR & Hydration
- [ ] Hydration Strategy in Loading Strategy
- [ ] Inclusion of other CSS solutions than Tailwind
- [ ] Inclusion of other JS libraries from the eco system
- [ ] Inclusion of ther State Managers
## SSR & Hydration output
### Input
```tsx
function Counter() {
const count = signal(0);
return (
count.set(count() + 1)}>count: {count}
);
}
```
### SSR
```html
count:
0
```
### Client Js
declarative approach that maintains the structure of the component
#### first step here
```tsx
import { signal, hydrate } from "runtime";
const count = signal(0); // todo get initial value from ssr
hydrate([
[0, "attr", "value", count],
[1, "event", "click", () => count.set(count() + 1)],
[2, "set", count],
]);
```
#### then this
```tsx
function Counter() {
const count = signal(0); // todo get initial value from ssr
return [
[0, "attr", "value", count],
[1, "event", "click", () => count.set(count() + 1)],
[2, "child", count],
];
}
```
--
--
--
--
### alternatives
```tsx
import { signal, el } from "runtime";
const count = signal(0);
el(0).attr("value", count);
el(1).event("click", () => count.set(count() + 1));
el(2).set(count);
```
#### declarative approach
```tsx
export const values = {
count: 0,
};
export const hydrate = [
[0, "attr", "value", count],
[1, "event", "click", () => count.set(count() + 1)],
[2, "set", count],
];
```
```tsx
import { signal, attr, event, child } from "runtime";
const count = signal(0);
attr(0, "value", count);
event(1, "click", () => count.set(count() + 1));
child(2, count);
```
```html
count:
0
```