realar - npm Package Compare versions

Comparing version 0.4.33 to 0.5.0

build/index.d.ts

 import { FC } from 'react';
-import { expr, box, sel, transaction, untrack } from 'reactive-box';
-export { prop, cache, action, on, sync, cycle, effect, shared, initial, observe, useValue, useLocal, useShared, useScoped, Scope, free, mock, unmock, box, sel, expr, transaction, untrack, Ensurable, };
+import { transaction, untrack } from 'reactive-box';
+export { value, selector, prop, cache, signal, on, sync, cycle, effect, shared, initial, observe, useValue, useLocal, useShared, useScoped, Scope, free, mock, unmock, transaction, untrack, Ensurable, };
 declare type Ensurable<T> = T | void;
-declare type Action<T, K = T> = {
+declare type Callable<T> = {
     (data: T): void;
-    0: () => K;
-} & Pick<Promise<T>, 'then' | 'catch' | 'finally'> & (T extends void ? {
+} & (T extends void ? {
     (): void;
 } : {});
-declare function action<T = void>(): Action<T, Ensurable<T>>;
-declare function action<T = void>(init: T): Action<T>;
+declare type Selector<T> = {
+    0: () => T;
+    1: () => void;
+    readonly val: T;
+} & [() => T, () => void];
+declare type Value<T> = Callable<T> & {
+    0: () => T;
+    1: (value: T) => void;
+    val: T;
+} & [() => T, (value: T) => void];
+declare type Signal<T, K = T> = Callable<T> & Pick<Promise<T>, 'then' | 'catch' | 'finally'> & {
+    0: () => K;
+    readonly val: K;
+} & [() => K];
+declare function value<T = void>(): Value<T>;
+declare function value<T = void>(init: T): Value<T>;
+declare function selector<T>(body: () => T): Selector<T>;
+declare function signal<T = void>(): Signal<T, Ensurable<T>>;
+declare function signal<T = void>(init: T): Signal<T>;
 declare function on<T>(target: {
@@ -14,0 +30,0 @@ 0: () => Ensurable<T>;

build/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.untrack = exports.transaction = exports.expr = exports.sel = exports.box = exports.unmock = exports.mock = exports.free = exports.Scope = exports.useScoped = exports.useShared = exports.useLocal = exports.useValue = exports.observe = exports.initial = exports.shared = exports.effect = exports.cycle = exports.sync = exports.on = exports.action = exports.cache = exports.prop = void 0;
+exports.untrack = exports.transaction = exports.unmock = exports.mock = exports.free = exports.Scope = exports.useScoped = exports.useShared = exports.useLocal = exports.useValue = exports.observe = exports.initial = exports.shared = exports.effect = exports.cycle = exports.sync = exports.on = exports.signal = exports.cache = exports.prop = exports.selector = exports.value = void 0;
 const reactive_box_1 = require("reactive-box");
-Object.defineProperty(exports, "expr", { enumerable: true, get: function () { return reactive_box_1.expr; } });
-Object.defineProperty(exports, "box", { enumerable: true, get: function () { return reactive_box_1.box; } });
-Object.defineProperty(exports, "sel", { enumerable: true, get: function () { return reactive_box_1.sel; } });
 Object.defineProperty(exports, "transaction", { enumerable: true, get: function () { return reactive_box_1.transaction; } });
@@ -37,2 +34,3 @@ Object.defineProperty(exports, "untrack", { enumerable: true, get: function () { return reactive_box_1.untrack; } });
 }
+const key = 'val';
 const shareds = new Map();
@@ -45,3 +43,22 @@ let initial_data;
 let scope_context;
-function action(init) {
+function value(init) {
+    const [get, set] = reactive_box_1.box(init);
+    set[Symbol.iterator] = function* () {
+        yield get;
+        yield set;
+    };
+    set[0] = get;
+    set[1] = set;
+    Object.defineProperty(set, key, { get, set });
+    return set;
+}
+exports.value = value;
+function selector(body) {
+    const h = reactive_box_1.sel(body);
+    const get = h[0];
+    Object.defineProperty(h, key, { get });
+    return h;
+}
+exports.selector = selector;
+function signal(init) {
     let resolve;
@@ -55,3 +72,8 @@ const [get, set] = reactive_box_1.box([init]);
     };
-    fn[0] = () => get()[0];
+    const val = () => get()[0];
+    fn[0] = val;
+    fn[Symbol.iterator] = function* () {
+        yield val;
+    };
+    Object.defineProperty(fn, key, { get: val });
     promisify();
@@ -66,3 +88,3 @@ function promisify() {
 }
-exports.action = action;
+exports.signal = signal;
 function on(target, listener) {
@@ -69,0 +91,0 @@ const sync_mode = is_sync;

package.json

 {
   "name": "realar",
-  "version": "0.4.33",
+  "version": "0.5.0",
   "description": "React state manager",
@@ -88,3 +88,3 @@ "repository": {
   },
-  "gitHead": "9168812ceb0195567945768161fd3c27ca23de3b"
+  "gitHead": "088be83e6d61badc4cd0b82832a4567cb37564bd"
 }

README.md

@@ -11,3 +11,3 @@ # Realar
 
-Ttransparent functional reactive programming with classes, decorators and [babel jsx wrapper](https://github.com/betula/babel-plugin-realar)
+Transparent functional reactive programming with classes, decorators and [babel jsx wrapper](https://github.com/betula/babel-plugin-realar)
 
@@ -29,3 +29,3 @@ ```javascript
 
-Realar **targeted to** all scale applications up to complex enterprise solutions on microfrontends architecture.
+Realar **targeted to** all scale applications up to complex enterprise solutions on micro apps architecture.
 
@@ -38,9 +38,9 @@ You can use as many from Realar as you want. For small websites or theme switchers, two functions are enough:ok_hand: Step by step on applications scale stairs you can take more and more. From sharing state to all application parts, to modulable architecture with micro apps composition.
 
-- __Shared stateful logic decomposition__. The pattern for decomposing applications logic to separate independent or one direction dependent modules. Each module can have its own set of reactive values. (logic isolation, ssr, comfort “mock” mechanism for simple unit testing)
+- __Shared stateful logic decomposition__. The pattern for decomposing applications logic to separate independent or one direction dependent modules. Each module can have its own set of reactive values. (ssr, comfort “mock” mechanism for simple unit testing). Shared stateful logic is a single instantiated class with total accessibility from all parts of your application. In another terminology - services.
 
-- __Lightweight and Fast__. Really light ~ 2kb. And only those components are updated in which it is really necessary to make changes and only they.
+- __Lightweight and Fast__. Really light ~2kB. And only those components are updated in which it is really necessary to make changes.
 
 - __React component context level scopes__. Declaration one scope and use as many reactive values as you want without the need to define a new React context for each changeable value.
 
-- __Actions__ are a necessary part of reactive communication, well knows for most javascript developers. Possibility for subscribing to action, call action, and wait for the next action value everywhere on the code base.
+- __Actions__ are a necessary part of reactive communication, well knows for most javascript developers. In Realar that possibility provides through signal abstraction. Possibility for subscribing to signal, call signal and wait for the next signal value everywhere on the codebase. And for a tasty, reading the last called value from a signal.
 
@@ -133,37 +133,45 @@
 
-Or If you coding in low level style:
+**context component level scope**
 
 ```javascript
-const CounterLogic = () => {
+const Counter = () => {
+  const { value, inc } = useScoped(CounterLogic);
 
-  const [get, set] = box(0);
-  const inc = () => set(get() + 1);
+  return (
+    <p>{value} <button onClick={inc}>+</button></p>
+  );
+}
 
-  return sel(() => ({
-    value: get(),
-    inc
-  }));
-}
+export const App = () => (
+  <Scope>
+    <Scope>
+      <Counter />
+      <Counter />
+    </Scope>
+    <Counter />
+  </Scope>
+);
 ```
-[Play on CodeSandbox](https://codesandbox.io/s/realar-component-level-scope-functional-5pjdy?file=/src/App.tsx)
 
-### Actions
+[Play wrapped on CodeSandbox](https://codesandbox.io/s/realar-context-component-level-scope-classes-wivjv?file=/src/App.tsx)
 
-The `action` allows you to trigger an event and delivers the functionality to subscribe to it anywhere in your application code.
+### Signals
 
+The `signal` allows you to trigger an event or action and delivers the functionality to subscribe to it anywhere in your application code.
+
 ```javascript
-const add = action();
+const add = signal();
 
-const [get, set] = box(1);
-on(add, num => set(get() + num));
+const store = value(1);
+on(add, num => store.val += num);
 
 add(15);
-console.log(get()); // 16
+console.log(store.val); // 16
 ```
 [Edit on RunKit](https://runkit.com/betula/6013af7649e8720019c9cf2a)
 
-An action is convenient to use as a promise.
+An signal is convenient to use as a promise.
 
 ```javascript
-const fire = action();
+const fire = signal();
 
@@ -191,6 +199,6 @@ const listen = async () => {
 ```javascript
-const [getA, setA] = box(0)
-const [getB, setB] = box(0)
+const a = value(0)
+const b = value(0)
 
-const sum = () => getA() + getB()
+const sum = () => a.val + b.val
 
@@ -224,9 +232,9 @@ on(sum, console.log)
 ```javascript
-const [getCount, set] = box(0);
+const count = value(0);
 
-const tick = () => set(getCount() + 1);
+const tick = () => count.val++;
 setInterval(tick, 200);
 
 const App = () => {
-  const count = useValue(getCount);
+  const count = useValue(count);
   return (
@@ -241,5 +249,5 @@ <p>{count}</p>
 import React from "react";
-import { box, useValue } from "realar";
+import { value, useValue } from "realar";
 
-const [get, set] = box(0);
+const [get, set] = value(0);
 
@@ -277,10 +285,10 @@ const next = () => get() + 1;
 
-**box**
+**value**
 
-The first abstraction of Realar is reactive container - `box`.
-The `box` is a place where your store some data as an immutable struct.
-When you change box value (rewrite to a new immutable struct) all who depend on It will be updated synchronously.
+The first abstraction of Realar is reactive container - `value`.
+The `value` is a place where your store some data as an immutable struct.
+When you change value (rewrite to a new immutable struct) all who depend on It will be updated synchronously.
 
-For create new box we need `box` function from `realar`, and initial value that will store in reactive container.
-The call of `box` function returns array of two functions.
+For create new value we need `value` function from `realar`, and initial value that will store in reactive container.
+The call of `value` function returns array of two functions.
 - The first is value getter.
@@ -290,3 +298,3 @@ - The second one is necessary for save new value to reactive container.
 ```javascript
-const [get, set] = box(0);
+const [get, set] = value(0);
 
@@ -300,7 +308,7 @@ set(get() + 1);
 In that example
-- for a first we created `box` container for number with initial zero;
-- After that, we got the box value, and set to box its value plus one;
+- for a first we created `value` container for number with initial zero;
+- After that, we got the value, and set to its value plus one;
 - Let's print the result to the developer console, that will is one.
 
-We learned how to create a box, set, and get its value.
+We learned how to create a value, set, and get it.
 
@@ -310,8 +318,8 @@ **on**
 The next basic abstraction is expression.
-Expression is a function that read reactive boxes or selectors. It can return value and write reactive boxes inside.
+Expression is a function that read reactive boxes or selectors. It can return value and write reactive values inside.
 
-We can subscribe to change any reactive expression using `on` function _(which also works with action)_.
+We can subscribe to change any reactive expression using `on` function _(which also works with signal)_.
 
 ```javascript
-const [get, set] = box(0);
+const [get, set] = value(0);
 
@@ -326,3 +334,3 @@ const next = () => get() + 1;
 
-In that example expression is `next` function, because It get box value and return that plus one.
+In that example expression is `next` function, because It get value and return that plus one.
 
@@ -332,3 +340,3 @@ **cycle**
 ```javascript
-const [get, set] = box(0);
+const [get, set] = value(0);
 
@@ -347,3 +355,3 @@ cycle(() => {
 - Takes a function as reactive expression.
-- After each run: subscribe to all reactive boxes accessed while running
+- After each run: subscribe to all reactive values accessed while running
 - Re-run on data changes
@@ -354,4 +362,4 @@
 ```javascript
-const [getSource, setSource] = box(0);
-const [getTarget, setTarget] = box(0);
+const [getSource, setSource] = value(0);
+const [getTarget, setTarget] = value(0);
 
@@ -367,3 +375,3 @@ sync(getSource, setTarget);
 
-_Documentation not ready yet for `sel`, `shared`, `effect`, `initial`, `mock`, `unmock`, `free`, `useValue`, `useShared`, `useScoped`, `Scope`, `observe`, `transaction`, `cache`, `prop` functions. It's coming soon._
+_Documentation not ready yet for `sel`, `effect`, `initial`, `mock`, `unmock`, `free`, `cache`, `observe`, `transaction`, `untrack` functions. It's coming soon._
 
@@ -370,0 +378,0 @@ ### Demos

src/index.ts

@@ -5,5 +5,7 @@ import React, { Context, FC } from 'react';
 export {
+  value,
+  selector,
   prop,
   cache,
-  action,
+  signal,
   on,
@@ -24,5 +26,2 @@ sync,
   unmock,
-  box,
-  sel,
-  expr,
   transaction,
@@ -62,2 +61,3 @@ untrack,
 
+const key = 'val';
 const shareds = new Map();
@@ -73,27 +73,74 @@
 type Ensurable<T> = T | void;
-type Action<T, K = T> = {
+
+type Callable<T> = {
   (data: T): void;
-  0: () => K;
-} & Pick<Promise<T>, 'then' | 'catch' | 'finally'> &
-  (T extends void
-    ? {
-        (): void;
-      }
-    : {});
+} & (T extends void
+  ? {
+      (): void;
+    }
+  : {});
 
-function action<T = void>(): Action<T, Ensurable<T>>;
-function action<T = void>(init: T): Action<T>;
-function action(init?: any) {
+type Selector<T> = {
+  0: () => T;
+  1: () => void;
+  readonly val: T;
+} & [() => T, () => void];
+
+type Value<T> = Callable<T> & {
+  0: () => T;
+  1: (value: T) => void;
+  val: T;
+} & [() => T, (value: T) => void];
+
+type Signal<T, K = T> = Callable<T> &
+  Pick<Promise<T>, 'then' | 'catch' | 'finally'> & {
+    0: () => K;
+    readonly val: K;
+  } & [() => K];
+
+function value<T = void>(): Value<T>;
+function value<T = void>(init: T): Value<T>;
+function value(init?: any): any {
+  const [get, set] = box(init) as any;
+
+  set[Symbol.iterator] = function* () {
+    yield get;
+    yield set;
+  };
+  set[0] = get;
+  set[1] = set;
+
+  Object.defineProperty(set, key, { get, set });
+  return set;
+}
+
+function selector<T>(body: () => T): Selector<T> {
+  const h = sel(body);
+  const get = h[0];
+
+  Object.defineProperty(h, key, { get });
+  return h as any;
+}
+
+function signal<T = void>(): Signal<T, Ensurable<T>>;
+function signal<T = void>(init: T): Signal<T>;
+function signal(init?: any) {
   let resolve: any;
   const [get, set] = box([init]);
 
-  const fn = function (data?: any) {
+  const fn = function (data: any) {
     const ready = resolve;
     promisify();
     set([data]);
-    ready(data!);
+    ready(data);
   };
+  const val = () => get()[0];
 
-  fn[0] = () => get()[0];
+  fn[0] = val;
+  fn[Symbol.iterator] = function* () {
+    yield val;
+  };
 
+  Object.defineProperty(fn, key, { get: val });
+
   promisify();
@@ -100,0 +147,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46914

increased by6.22%

Lines of code

725

increased by11.54%

Number of lines in readme file

402

increased by2.03%

No dependency changes