(http://www.chetcorcos.com/)",
14 | "license": "MIT",
15 | "scripts": {
16 | "build": "rm -rf lib && tsc && cp -rf package.json lib",
17 | "watch": "tsc --watch",
18 | "release": "npm run build && cd lib && npm publish"
19 | },
20 | "dependencies": {
21 | "react": "^16.2.0"
22 | },
23 | "devDependencies": {
24 | "@types/react": "^16.0.27",
25 | "typescript": "^2.6.2"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/component.ts:
--------------------------------------------------------------------------------
1 | import { PureComponent } from "react"
2 | import { DerivedValue } from "./reactive"
3 |
4 | export default class Component extends PureComponent
{
5 | _view: DerivedValue
6 |
7 | constructor(props: P) {
8 | super(props)
9 | this._view = new DerivedValue(() => this.view(this.props))
10 | this._view.dependency.add(this._update)
11 | }
12 |
13 | willMount(props: P) {}
14 | componentWillMount() {
15 | this.willMount(this.props)
16 | }
17 |
18 | didMount(props: P) {}
19 | componentDidMount() {
20 | this.didMount(this.props)
21 | }
22 |
23 | willUpdate(props: P) {}
24 | componentWillUpdate(nextProps: P) {
25 | this._view.stale = true
26 | this.willUpdate(nextProps)
27 | }
28 |
29 | didUpdate(props: P) {}
30 | componentDidUpdate() {
31 | this.didUpdate(this.props)
32 | }
33 |
34 | willUnmount(props: P) {}
35 | componentWillUnmount() {
36 | this.willUnmount(this.props)
37 | this._view.stop()
38 | this._view.dependency.delete(this._update)
39 | }
40 |
41 | _updating = false
42 | _update = () => {
43 | if (!this._updating) {
44 | this._updating = true
45 | setTimeout(() => {
46 | this.forceUpdate()
47 | this._updating = false
48 | })
49 | }
50 | }
51 |
52 | view(props: P): React.ReactNode {
53 | return null
54 | }
55 |
56 | render(): React.ReactNode {
57 | return this._view.get()
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./reactive"
2 |
--------------------------------------------------------------------------------
/src/reactive.ts:
--------------------------------------------------------------------------------
1 | export interface Gettable {
2 | get(): V
3 | }
4 |
5 | export interface Settable extends Gettable {
6 | set(v: V): void
7 | }
8 |
9 | // Basic event emitter to keep track of dependencies
10 | export class Dependency {
11 | listeners: Set<() => void> = new Set()
12 | add(listener: () => void) {
13 | this.listeners.add(listener)
14 | }
15 | delete(listener: () => void) {
16 | this.listeners.delete(listener)
17 | }
18 | emit() {
19 | this.listeners.forEach(listener => listener())
20 | }
21 | }
22 |
23 | // A stack of dependencies that represent every .get() during a computation
24 | const computations: Array> = []
25 |
26 | // Adds its dependency to the currrent computation on .get() and emits on .set()
27 | export class Value implements Settable {
28 | value: V
29 | dependency = new Dependency()
30 | constructor(value: V) {
31 | this.value = value
32 | }
33 | get(): V {
34 | const computation = computations[0]
35 | computation && computation.add(this.dependency)
36 | return this.value
37 | }
38 | set(value: V): void {
39 | this.value = value
40 | this.dependency.emit()
41 | }
42 | update(fn: (v: V) => V): void {
43 | this.set(fn(this.get()))
44 | }
45 | }
46 |
47 | // A value that is derrived from other values
48 | export class DerivedValue implements Gettable {
49 | value: V
50 | dependency = new Dependency()
51 | computation = new Set()
52 | fn: () => V
53 | stale = true
54 | constructor(fn: () => V) {
55 | this.fn = fn
56 | }
57 | run() {
58 | computations.push(new Set())
59 | this.value = this.fn()
60 | const computation = computations.shift()
61 | this.stop()
62 | computation.forEach(dep => dep.add(this.onUpdate))
63 | this.computation = computation
64 | }
65 | onUpdate = () => {
66 | this.stale = true
67 | this.dependency.emit()
68 | }
69 | flush() {
70 | if (this.stale) {
71 | this.stale = false
72 | this.run()
73 | }
74 | }
75 | get(): V {
76 | this.flush()
77 | const deps = computations[0]
78 | deps && deps.add(this.dependency)
79 | return this.value
80 | }
81 | stop() {
82 | this.computation.forEach(dep => dep.delete(this.onUpdate))
83 | }
84 | }
85 |
86 | // A reactive constraint by providing inverse functions
87 | export class Constraint implements Settable {
88 | value: DerivedValue
89 | setter: (v: V) => void
90 | constructor({ get, set }: { get: () => V; set: (v: V) => void }) {
91 | this.value = new DerivedValue(get)
92 | this.setter = set
93 | }
94 | get(): V {
95 | return this.value.get()
96 | }
97 | set(value: V): void {
98 | this.setter(value)
99 | }
100 | update(fn: (v: V) => V): void {
101 | this.set(fn(this.get()))
102 | }
103 | }
104 |
105 | function equal(x: Set, y: Set) {
106 | if (x === y) {
107 | return true
108 | }
109 | if (x.size !== y.size) {
110 | return false
111 | }
112 | for (var value of Array.from(x)) {
113 | if (!y.has(value)) {
114 | return false
115 | }
116 | }
117 | return true
118 | }
119 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "allowSyntheticDefaultImports": true,
5 | "target": "es5",
6 | "module": "commonjs",
7 | "jsx": "react",
8 | "moduleResolution": "node",
9 | "noImplicitAny": true,
10 | "noUnusedLocals": false,
11 | "noUnusedParameters": false,
12 | "removeComments": true,
13 | "strictNullChecks": false,
14 | "preserveConstEnums": true,
15 | "sourceMap": true,
16 | "lib": ["es2015", "es2016", "dom"],
17 | "outDir": "lib",
18 | "declaration": true
19 | },
20 | "include": [
21 | "src/*.ts"
22 | ],
23 | "exclude": [
24 | "node_modules",
25 | "**/*.spec.ts"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------