Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

realar

Package Overview
Dependencies
Maintainers
1
Versions
129
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

realar - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

compiled/index.esm.js

59

package.json
{
"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"
}
# 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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc