Perfect usage 👍 on codesandbox
import React from "react";
import { unit, useUnit } from "realar";
const Ticker = unit({
current: 0,
after: 2,
get next() {
return this.current + 1;
},
tick() {
this.current += 1;
},
synchronize() {
this.after = this.next + 1;
}
});
export default function App() {
const { current, next, after, tick } = useUnit(Ticker);
return (
<>
<h1>Realar ticker</h1>
<p>Current: {current}</p>
<p>Next: {next}</p>
<p>After: {after}</p>
<p>
<button onClick={tick}>tick</button>
</p>
</>
);
}
Crazy usage 😜 on codesandbox
import React from "react";
import {
unit,
useService,
changed,
service,
action,
inst,
chan,
useUnit,
Zone,
Service
} from "realar";
const MaxBoost = action();
const GetUser = chan();
const Config = unit({
step: 1,
inc() {
this.step += 1;
},
[MaxBoost]() {
console.log("x10 speed!", this.step);
this.step *= 10;
}
});
const Ticker = unit({
config: service(Config),
om: inst(Config),
after: 0,
current: 0,
get next() {
return this.current + this.step;
},
get step() {
return this.config.step;
},
tick() {
this.current += this.step;
},
construct() {},
destruct() {},
synchronize() {
this.after = this.next + this.step;
if (changed(this.after > 4)) console.log("Fire!");
if (changed(this.after > 10)) {
MaxBoost();
}
}
});
const BackendFF = unit({
async [GetUser](id) {
return await new Promise(r => setTimeout(() => r("John Doe " + id), 1000));
}
});
const User = unit({
user: "not loaded",
concurrent: 0,
get loading() {
return this.concurrent > 0;
},
async load() {
this.concurrent++;
this.user = await GetUser(1);
this.concurrent--;
}
});
function App() {
const { current, next, tick, step } = useService(Ticker);
const {
after,
config: { inc },
om: { step: om_step }
} = useService(Ticker);
const { user, load, loading } = useUnit(User);
return (
<div>
<h1>Realar ticker</h1>
<p>Current: {current}</p>
<p>Next: {next}</p>
<p>After: {after}</p>
<button onClick={tick}>tick</button>
<p>Step: {step}</p>
<button onClick={inc}>inc</button>
<p>Om: {om_step}</p>
<p>User: {loading ? "loading..." : user}</p>
<button onClick={load}>load</button>
<Service unit={BackendFF} root />
</div>
);
}
export default function Root() {
return (
<>
<Zone>
<App />
</Zone>
<Zone>
<App />
</Zone>
</>
);
}
Top comments (2)
What does chan, Zone, inst, and Service do?
Hi, bitten!
Thank you for your interest!
And thanks a lot for your feedback. With your help I made some several changes in library external interface:
chan
tocall
because its interface for a remote (between zones/services) async call.inst
keyword, and you can see a fresh example at realar github readme, now you can useunit
as a factory now:Cheers,