Comparing version 0.0.0 to 0.0.1
{ | ||
"name": "realar", | ||
"version": "0.0.0", | ||
"description": "My favorite React state management", | ||
"version": "0.0.1", | ||
"description": "My beloved React micro frontends", | ||
"repository": { | ||
@@ -15,13 +15,13 @@ "url": "https://github.com/betula/realar" | ||
"build": "npx rollup -c", | ||
"clean": "npx rimraf ./release && npx rimraf ./coverage", | ||
"clean": "npx rimraf ./compiled && npx rimraf ./coverage", | ||
"dev": "npx rollup -cw", | ||
"publish": "npm run lerna:publish", | ||
"test": "npx jest --coverage --passWithNoTests", | ||
"lerna:reset": "npm run lerna:clean && npx lerna clean --yes && npm run lerna:bootstrap", | ||
"lerna:update": "npx lerna bootstrap --no-ci", | ||
"lerna:bootstrap": "npx lerna bootstrap --no-ci && npm run lerna:build && npm run lerna:test", | ||
"test": "npx jest --coverage", | ||
"lerna:reset": "npm run lerna:clean && npm run lerna:bootstrap", | ||
"lerna:ci": "npx lerna bootstrap --no-ci", | ||
"lerna:bootstrap": "npx lerna bootstrap --no-ci && npm run build && npm run test", | ||
"lerna:clean": "npx lerna run clean && npx lerna clean --yes", | ||
"lerna:publish": "npm run clean && npm run build && npm run test && npx lerna publish", | ||
"lerna:build": "npx lerna run build", | ||
"lerna:test": "npx lerna run test", | ||
"lerna:clean": "npx lerna run clean", | ||
"lerna:publish": "npm run lerna:clean && npm run lerna:build && npm run lerna:test && npx lerna publish" | ||
"lerna:test": "npx lerna run test" | ||
}, | ||
@@ -32,17 +32,16 @@ "author": "Slava Bereza <mail@betula.co> (http://betula.co)", | ||
"model", | ||
"functional", | ||
"reactive", | ||
"state management", | ||
"data flow", | ||
"hook", | ||
"hooks", | ||
"react-hooks" | ||
"react hooks", | ||
"micro frontends" | ||
], | ||
"source": "./src/index.ts", | ||
"main": "./release/index.js", | ||
"module": "./release/index.esm.js", | ||
"types": "./release/index.d.ts", | ||
"source": "./lib/index.js", | ||
"main": "./compiled/index.js", | ||
"module": "./compiled/index.esm.js", | ||
"types": "./lib.d.ts", | ||
"sideEffects": false, | ||
"files": [ | ||
"/release" | ||
"/compiled", | ||
"/lib.d.ts" | ||
], | ||
@@ -53,23 +52,13 @@ "peerDependencies": { | ||
"devDependencies": { | ||
"@babel/core": "7.10.2", | ||
"@babel/plugin-proposal-class-properties": "7.10.1", | ||
"@babel/plugin-proposal-object-rest-spread": "7.10.1", | ||
"@babel/preset-env": "7.10.2", | ||
"@babel/core": "7.10.3", | ||
"@babel/preset-env": "7.10.3", | ||
"@babel/preset-react": "7.10.1", | ||
"@babel/preset-typescript": "7.10.1", | ||
"@rollup/plugin-babel": "5.0.3", | ||
"@rollup/plugin-node-resolve": "8.0.1", | ||
"@types/enzyme": "3.10.5", | ||
"@types/enzyme-adapter-react-16": "1.0.6", | ||
"@types/jest": "26.0.0", | ||
"@types/node": "14.0.13", | ||
"@types/react": "16.9.36", | ||
"@types/react-dom": "16.9.8", | ||
"@rollup/plugin-babel": "5.0.4", | ||
"enzyme": "3.11.0", | ||
"enzyme-adapter-react-16": "1.15.2", | ||
"jest": "26.0.1", | ||
"jest": "26.1.0", | ||
"lerna": "3.22.1", | ||
"react": "16.13.1", | ||
"react-dom": "16.13.1", | ||
"rollup": "2.16.1" | ||
"rollup": "2.18.0" | ||
}, | ||
@@ -79,3 +68,3 @@ "publishConfig": { | ||
}, | ||
"gitHead": "d782b5c1a2f5bff013f5024cbf45d5417ff8740b" | ||
"gitHead": "8c770585e1caf77dec4fd7522be0b82b7f3f1716" | ||
} |
159
README.md
# Realar | ||
My beloved React micro frontends :heart_eyes: | ||
[![npm version](https://img.shields.io/npm/v/realar?style=flat-square)](https://www.npmjs.com/package/realar) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/realar?style=flat-square)](https://bundlephobia.com/result?p=realar) [![build status](https://img.shields.io/github/workflow/status/betula/realar/Tests?style=flat-square)](https://github.com/betula/realar/actions?workflow=Tests) [![code coverage](https://img.shields.io/coveralls/github/betula/realar?style=flat-square)](https://coveralls.io/github/betula/realar) | ||
My favorite React state management. | ||
Perfect usage :+1: [on codesandbox](https://codesandbox.io/s/black-wood-t4533) | ||
```javascript | ||
class Counter { | ||
count = 0; | ||
inc() { this.count += 1; } | ||
dec() { this.count -= 1; } | ||
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 :stuck_out_tongue_winking_eye: [on codesandbox](https://codesandbox.io/s/ecstatic-field-q1due) | ||
const App = () => { | ||
const { count, inc, dec } = useService(Counter); | ||
return ( | ||
<> | ||
<i>{count}</i> | ||
<button onClick={inc}>+</button> | ||
<button onClick={dec}>-</button> | ||
</> | ||
) | ||
```javascript | ||
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> | ||
</> | ||
); | ||
} | ||
``` | ||
[This example on CodeSandbox](https://codesandbox.io/s/mystifying-mclaren-9uvsb?file=/src/App.tsx) | ||
@@ -27,0 +156,0 @@ ### Install |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
35960
11
6
1133
163
1