@noodleseed/one 0.32.0 → 0.33.0

package/node_modules/use-callback-ref/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "use-callback-ref",
+  "version": "1.3.3",
+  "description": "The same useRef, but with callback",
+  "main": "dist/es5/index.js",
+  "jsnext:main": "dist/es2015/index.js",
+  "module": "dist/es2015/index.js",
+  "types": "dist/es5/index.d.ts",
+  "module:es2019": "dist/es2019/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "lib-builder dev",
+    "test": "jest",
+    "test:ci": "jest --runInBand --coverage",
+    "build": "lib-builder build && yarn size:report",
+    "release": "yarn build && yarn test",
+    "size": "npx size-limit",
+    "size:report": "npx size-limit --json > .size.json",
+    "lint": "lib-builder lint",
+    "format": "lib-builder format",
+    "update": "lib-builder update",
+    "prepublish": "yarn build && yarn changelog",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "changelog:rewrite": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+  },
+  "repository": "https://github.com/theKashey/use-callback-ref/",
+  "author": "theKashey <thekashey@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.0.2",
+    "size-limit": "^11.0.2",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@theuiteam/lib-builder": "^0.3.0",
+    "jest-environment-jsdom": "^29.7.0"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "hook",
+    "useRef",
+    "createRef",
+    "merge refs"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{js,css,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 120,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true
+  }
+}

package/node_modules/use-sidecar/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Anton Korzunov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/node_modules/use-sidecar/README.md

@@ -0,0 +1,349 @@
+<div align="center">
+  <h1>🏎 side car</h1>
+  <br/>
+   Alternative way to code splitting
+  <br/>
+  
+  <a href="https://www.npmjs.com/package/use-sidecar">
+    <img src="https://img.shields.io/npm/v/use-sidecar.svg?style=flat-square" />
+  </a>
+    
+  <a href="https://travis-ci.org/theKashey/use-sidecar">
+   <img src="https://img.shields.io/travis/theKashey/use-sidecar.svg?style=flat-square" alt="Build status">
+  </a> 
+
+  <a href="https://www.npmjs.com/package/use-sidecar">
+   <img src="https://img.shields.io/npm/dm/use-sidecar.svg" alt="npm downloads">
+  </a> 
+
+  <a href="https://bundlephobia.com/result?p=use-sidecar">
+   <img src="https://img.shields.io/bundlephobia/minzip/use-sidecar.svg" alt="bundle size">
+  </a>   
+  <br/>
+</div>
+
+UI/Effects code splitting pattern
+ - [read the original article](https://dev.to/thekashey/sidecar-for-a-code-splitting-1o8g) to understand concepts behind.
+ - [read how Google](https://medium.com/@cramforce/designing-very-large-javascript-applications-6e013a3291a3) split view and logic.
+ - [watch how Facebook](https://developers.facebook.com/videos/2019/building-the-new-facebookcom-with-react-graphql-and-relay/) defers "interactivity" effects. 
+
+## Terminology: 
+- `sidecar` - non UI component, which may carry effects for a paired UI component.
+- `UI` - UI component, which interactivity is moved to a `sidecar`.
+
+`UI` is a _view_, `sidecar` is the _logic_ for it. Like Batman(UI) and his sidekick Robin(effects). 
+
+## Concept
+- a `package` exposes __3 entry points__ using a [nested `package.json` format](https://github.com/theKashey/multiple-entry-points-example):
+  - default aka `combination`, and lets hope tree shaking will save you
+  - `UI`, with only UI part
+  - `sidecar`, with all the logic
+  - > `UI` + `sidecar` === `combination`. The size of `UI+sidecar` might a bit bigger than size of their `combination`.
+  Use [size-limit](https://github.com/ai/size-limit) to control their size independently. 
+  
+
+- package uses a `medium` to talk with own sidecar, breaking explicit dependency.
+ 
+- if package depends on another _sidecar_ package:
+  - it shall export dependency side car among own sidecar.
+  - package imports own sidecar via `medium`, thus able to export multiple sidecars via one export. 
+
+- final consumer uses `sidecar` or `useSidecar` to combine pieces together.  
+
+## Rules
+- `UI` components might use/import any other `UI` components
+- `sidecar` could use/import any other `sidecar`
+
+That would form two different code branches, you may load separately - UI first, and effect sidecar later.
+That also leads to a obvious consequence - __one sidecar may export all sidecars__.
+- to decouple `sidecars` from module exports, and be able to pick "the right" one at any point
+you have to use `exportSidecar(medium, component)` to export it, and use the same `medium` to import it back.
+- this limitation is for __libraries only__, as long as in the usercode you might 
+dynamically import whatever and whenever you want. 
+
+- `useMedium` is always async - action would be executed in a next tick, or on the logic load.
+- `sidecar` is always async - is does not matter have you loaded logic or not - component would be 
+rendered at least in the next tick.
+
+> except `medium.read`, which synchronously read the data from a medium, 
+and `medium.assingSyncMedium` which changes `useMedium` to be sync. 
+
+## SSR and usage tracking
+Sidecar pattern is clear:
+- you dont need to use/render any `sidecars` on server.
+- you dont have to load `sidecars` prior main render.
+
+Thus - no usage tracking, and literally no SSR. It's just skipped.
+
+
+# API
+
+## createMedium()
+- Type: Util. Creates shared effect medium for algebraic effect.
+- Goal: To decouple modules from each other.
+- Usage: `use` in UI side, and `assign` from side-car. All effects would be executed.
+- Analog: WeakMap, React.__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+```js
+const medium = createMedium(defaultValue);
+const cancelCb = medium.useMedium(someData);
+
+// like
+useEffect(() => medium.useMedium(someData), []);
+
+medium.assignMedium(someDataProcessor)
+
+// createSidecarMedium is a helper for createMedium to create a "sidecar" symbol
+const effectCar = createSidecarMedium();
+```
+
+> ! For consistence `useMedium` is async - sidecar load status should not affect function behavior,
+thus effect would be always executed at least in the "next tick". You may alter
+this behavior by using `medium.assingSyncMedium`.
+
+
+## exportSidecar(medium, component)
+- Type: HOC
+- Goal: store `component` inside `medium` and return external wrapper
+- Solving: decoupling module exports to support exporting multiple sidecars via a single entry point.
+- Usage: use to export a `sidecar`
+- Analog: WeakMap
+```js
+import {effectCar} from './medium';
+import {EffectComponent} from './Effect';
+// !!! - to prevent Effect from being imported
+// `effectCar` medium __have__ to be defined in another file
+// const effectCar = createSidecarMedium();
+export default exportSidecar(effectCar, EffectComponent);
+```
+
+## sidecar(importer)
+- Type: HOC
+- Goal: React.lazy analog for code splitting, but does not require `Suspense`, might provide error failback.
+- Usage: like React.lazy to load a side-car component.
+- Analog: React.Lazy
+```js
+import {sidecar} from "use-sidecar";
+const Sidecar =  sidecar(() => import('./sidecar'), <span>on fail</span>);
+
+<>
+ <Sidecar />
+ <UI />
+</> 
+```
+### Importing `exportedSidecar`
+Would require additional prop to be set - ```<Sidecar sideCar={effectCar} />```
+
+## useSidecar(importer)
+- Type: hook, loads a `sideCar` using provided `importer` which shall follow React.lazy API
+- Goal: to load a side car without displaying any "spinners".
+- Usage: load side car for a component
+- Analog: none
+```js
+import {useSidecar} from 'use-sidecar';
+
+const [Car, error] = useSidecar(() => import('./sideCar'));
+return (
+  <>
+    {Car ? <Car {...props} /> : null}
+    <UIComponent {...props}>
+  </>
+); 
+```
+### Importing `exportedSideCar`
+You have to specify __effect medium__ to read data from, as long as __export itself is empty__.
+```js
+import {useSidecar} from 'use-sidecar';
+
+/* medium.js: */ export const effectCar = useMedium({});
+/* sideCar.js: */export default exportSidecar(effectCar, EffectComponent);
+
+const [Car, error] = useSidecar(() => import('./sideCar'), effectCar); 
+return (
+  <>
+    {Car ? <Car {...props} /> : null}
+    <UIComponent {...props}>
+  </>
+);
+```
+
+## renderCar(Component)
+- Type: HOC, moves renderProp component to a side channel
+- Goal: Provide render prop support, ie defer component loading keeping tree untouched.
+- Usage: Provide `defaults` and use them until sidecar is loaded letting you code split (non visual) render-prop component
+- Analog: - Analog: code split library like [react-imported-library](https://github.com/theKashey/react-imported-library) or [@loadable/lib](https://www.smooth-code.com/open-source/loadable-components/docs/library-splitting/).
+```js
+import {renderCar, sidecar} from "use-sidecar";
+const RenderCar = renderCar(
+  // will move side car to a side channel
+  sidecar(() => import('react-powerplug').then(imports => imports.Value)),
+  // default render props
+  [{value: 0}]  
+);
+
+<RenderCar>
+  {({value}) => <span>{value}</span>}
+</RenderCar>
+```
+
+## setConfig(config)
+```js
+setConfig({
+  onError, // sets default error handler
+});
+```
+
+# Examples
+## Deferred effect
+Let's imagine - on element focus you have to do "something", for example focus anther element
+
+#### Original code
+```js
+onFocus = event => {
+  if (event.currentTarget === event.target) {
+    document.querySelectorAll('button', event.currentTarget)
+  }
+}
+```
+
+#### Sidecar code
+
+3. Use medium (yes, .3)
+```js
+// we are calling medium with an original event as an argument
+const onFocus = event => focusMedium.useMedium(event);
+```
+2. Define reaction
+```js
+// in a sidecar
+
+// we are setting handler for the effect medium
+// effect is complicated - we are skipping event "bubbling", 
+// and focusing some button inside a parent
+focusMedium.assignMedium(event => {
+  if (event.currentTarget === event.target) {
+    document.querySelectorAll('button', event.currentTarget)
+  }
+});
+
+```
+1. Create medium
+Having these constrains - we have to clone `event`, as long as React would eventually reuse SyntheticEvent, thus not
+preserve `target` and `currentTarget`. 
+```js
+// 
+const focusMedium = createMedium(null, event => ({...event}));
+```
+Now medium side effect is ok to be async
+
+__Example__: [Effect for react-focus-lock](https://github.com/theKashey/react-focus-lock/blob/8c69c644ecfeed2ec9dc0dc4b5b30e896a366738/src/Lock.js#L48) - 1kb UI, 4kb sidecar
+
+### Medium callback
+Like a library level code splitting
+
+#### Original code
+```js
+import {x, y} from './utils';
+
+useEffect(() => {
+  if (x()) {
+    y()
+  }
+}, []);
+```
+
+#### Sidecar code
+
+```js
+// medium
+const utilMedium = createMedium();
+
+// utils
+const x = () => { /* ... */};
+const y = () => { /* ... */};
+
+// medium will callback with exports exposed
+utilMedium.assignMedium(cb => cb({
+ x, y
+}));
+
+
+// UI
+// not importing x and y from the module system, but would be given via callback
+useEffect(() => {
+  utilMedium.useMedium(({x,y}) => {
+      if (x()) {
+        y()
+      }
+  })
+}, []);
+```
+
+- Hint: there is a easy way to type it
+```js
+const utilMedium = createMedium<(cb: typeof import('./utils')) => void>();
+``` 
+
+__Example__: [Callback API for react-focus-lock](https://github.com/theKashey/react-focus-lock/blob/8c69c644ecfeed2ec9dc0dc4b5b30e896a366738/src/MoveFocusInside.js#L12) 
+
+### Split effects
+Lets take an example from a Google - Calendar app, with view and logic separated.
+To be honest - it's not easy to extract logic from application like calendar - usually it's tight coupled.
+
+#### Original code
+```js
+const CalendarUI = () => { 
+  const [date, setDate] = useState();
+  const onButtonClick = useCallback(() => setDate(Date.now), []);
+  
+  return (
+    <>
+     <input type="date" onChange={setDate} value={date} />
+     <input type="button" onClick={onButtonClick}>Set Today</button>
+    </>
+  )
+}
+```
+#### Sidecar code
+
+```js
+const CalendarUI = () => {
+  const [events, setEvents] = useState({});
+  const [date, setDate] = useState();
+  
+  return (
+    <>
+     <Sidecar setDate={setDate} setEvents={setEvents}/>
+     <UILayout {...events} date={date}/>
+    </>
+  )
+}
+
+const UILayout = ({onDateChange, onButtonClick, date}) => (
+  <>
+      <input type="date" onChange={onDateChange} value={date} />
+      <input type="button" onClick={onButtonClick}>Set Today</button>
+  </>
+);
+
+// in a sidecar
+// we are providing callbacks back to UI
+const Sidecar = ({setDate, setEvents}) => {
+  useEffect(() => setEvents({
+      onDateChange:setDate,
+      onButtonClick: () => setDate(Date.now),
+  }), []);
+  
+  return null;
+}
+```  
+
+While in this example this looks a bit, you know, strange - there are 3 times more code
+that in the original example - that would make a sense for a real Calendar, especially
+if some helper library, like `moment`, has been used.
+
+__Example__: [Effect for react-remove-scroll](https://github.com/theKashey/react-remove-scroll/blob/666472d5c77fb6c4e5beffdde87c53ae63ef42c5/src/SideEffect.tsx#L166) - 300b UI, 2kb sidecar
+
+# Licence
+
+MIT
+

package/node_modules/use-sidecar/dist/es2015/config.d.ts

@@ -0,0 +1,5 @@
+export interface IConfig {
+    onError(e: Error): void;
+}
+export declare const config: IConfig;
+export declare const setConfig: (conf: Partial<IConfig>) => void;

package/node_modules/use-sidecar/dist/es2015/config.js

@@ -0,0 +1,6 @@
+export var config = {
+    onError: function (e) { return console.error(e); },
+};
+export var setConfig = function (conf) {
+    Object.assign(config, conf);
+};

package/node_modules/use-sidecar/dist/es2015/env.d.ts

@@ -0,0 +1,4 @@
+export declare const env: {
+    isNode: boolean;
+    forceCache: boolean;
+};

package/node_modules/use-sidecar/dist/es2015/env.js

@@ -0,0 +1,5 @@
+import { isNode } from 'detect-node-es';
+export var env = {
+    isNode: isNode,
+    forceCache: false,
+};

package/node_modules/use-sidecar/dist/es2015/exports.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { SideCarComponent, SideCarMedium } from './types';
+export declare function exportSidecar<T>(medium: SideCarMedium<T>, exported: React.ComponentType<T>): SideCarComponent<T>;

package/node_modules/use-sidecar/dist/es2015/exports.js

@@ -0,0 +1,18 @@
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
+var SideCar = function (_a) {
+    var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
+    if (!sideCar) {
+        throw new Error('Sidecar: please provide `sideCar` property to import the right car');
+    }
+    var Target = sideCar.read();
+    if (!Target) {
+        throw new Error('Sidecar medium not found');
+    }
+    return React.createElement(Target, __assign({}, rest));
+};
+SideCar.isSideCarExport = true;
+export function exportSidecar(medium, exported) {
+    medium.useMedium(exported);
+    return SideCar;
+}

package/node_modules/use-sidecar/dist/es2015/hoc.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Importer, SideCarHOC } from './types';
+export declare function sidecar<T>(importer: Importer<T>, errorComponent?: React.ReactNode): React.FunctionComponent<Omit<T, 'sideCar'> & SideCarHOC<Omit<T, 'sideCar'>>>;

package/node_modules/use-sidecar/dist/es2015/hoc.js

@@ -0,0 +1,15 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { useSidecar } from './hook';
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function sidecar(importer, errorComponent) {
+    var ErrorCase = function () { return errorComponent; };
+    return function Sidecar(props) {
+        var _a = useSidecar(importer, props.sideCar), Car = _a[0], error = _a[1];
+        if (error && errorComponent) {
+            return ErrorCase;
+        }
+        // @ts-expect-error type shenanigans
+        return Car ? React.createElement(Car, __assign({}, props)) : null;
+    };
+}

package/node_modules/use-sidecar/dist/es2015/hook.d.ts

@@ -0,0 +1,2 @@
+import { Importer, SideMedium } from './types';
+export declare function useSidecar<T>(importer: Importer<T>, effect?: SideMedium<any>): [React.ComponentType<T> | null, Error | null];

package/node_modules/use-sidecar/dist/es2015/hook.js

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import { env } from './env';
+var cache = new WeakMap();
+var NO_OPTIONS = {};
+export function useSidecar(importer, effect) {
+    var options = (effect && effect.options) || NO_OPTIONS;
+    if (env.isNode && !options.ssr) {
+        return [null, null];
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useRealSidecar(importer, effect);
+}
+function useRealSidecar(importer, effect) {
+    var options = (effect && effect.options) || NO_OPTIONS;
+    var couldUseCache = env.forceCache || (env.isNode && !!options.ssr) || !options.async;
+    var _a = useState(couldUseCache ? function () { return cache.get(importer); } : undefined), Car = _a[0], setCar = _a[1];
+    var _b = useState(null), error = _b[0], setError = _b[1];
+    useEffect(function () {
+        if (!Car) {
+            importer().then(function (car) {
+                var resolved = effect ? effect.read() : car.default || car;
+                if (!resolved) {
+                    console.error('Sidecar error: with importer', importer);
+                    var error_1;
+                    if (effect) {
+                        console.error('Sidecar error: with medium', effect);
+                        error_1 = new Error('Sidecar medium was not found');
+                    }
+                    else {
+                        error_1 = new Error('Sidecar was not found in exports');
+                    }
+                    setError(function () { return error_1; });
+                    throw error_1;
+                }
+                cache.set(importer, resolved);
+                setCar(function () { return resolved; });
+            }, function (e) { return setError(function () { return e; }); });
+        }
+    }, []);
+    return [Car, error];
+}

package/node_modules/use-sidecar/dist/es2015/index.d.ts

@@ -0,0 +1,7 @@
+export { sidecar } from './hoc';
+export { useSidecar } from './hook';
+export { setConfig } from './config';
+export { createMedium, createSidecarMedium } from './medium';
+export { renderCar } from './renderProp';
+export { exportSidecar } from './exports';
+export type { SideCarComponent } from './types';

package/node_modules/use-sidecar/dist/es2015/index.js

@@ -0,0 +1,6 @@
+export { sidecar } from './hoc';
+export { useSidecar } from './hook';
+export { setConfig } from './config';
+export { createMedium, createSidecarMedium } from './medium';
+export { renderCar } from './renderProp';
+export { exportSidecar } from './exports';

package/node_modules/use-sidecar/dist/es2015/medium.d.ts

@@ -0,0 +1,3 @@
+import { MiddlewareCallback, SideCarMedium, SideCarMediumOptions, SideMedium } from './types';
+export declare function createMedium<T>(defaults?: T, middleware?: MiddlewareCallback<T>): Readonly<SideMedium<T>>;
+export declare function createSidecarMedium<T = {}>(options?: SideCarMediumOptions): Readonly<SideCarMedium<T>>;

package/node_modules/use-sidecar/dist/es2015/medium.js

@@ -0,0 +1,78 @@
+import { __assign } from "tslib";
+function ItoI(a) {
+    return a;
+}
+function innerCreateMedium(defaults, middleware) {
+    if (middleware === void 0) { middleware = ItoI; }
+    var buffer = [];
+    var assigned = false;
+    var medium = {
+        read: function () {
+            if (assigned) {
+                throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.');
+            }
+            if (buffer.length) {
+                return buffer[buffer.length - 1];
+            }
+            return defaults;
+        },
+        useMedium: function (data) {
+            var item = middleware(data, assigned);
+            buffer.push(item);
+            return function () {
+                buffer = buffer.filter(function (x) { return x !== item; });
+            };
+        },
+        assignSyncMedium: function (cb) {
+            assigned = true;
+            while (buffer.length) {
+                var cbs = buffer;
+                buffer = [];
+                cbs.forEach(cb);
+            }
+            buffer = {
+                push: function (x) { return cb(x); },
+                filter: function () { return buffer; },
+            };
+        },
+        assignMedium: function (cb) {
+            assigned = true;
+            var pendingQueue = [];
+            if (buffer.length) {
+                var cbs = buffer;
+                buffer = [];
+                cbs.forEach(cb);
+                pendingQueue = buffer;
+            }
+            var executeQueue = function () {
+                var cbs = pendingQueue;
+                pendingQueue = [];
+                cbs.forEach(cb);
+            };
+            var cycle = function () { return Promise.resolve().then(executeQueue); };
+            cycle();
+            buffer = {
+                push: function (x) {
+                    pendingQueue.push(x);
+                    cycle();
+                },
+                filter: function (filter) {
+                    pendingQueue = pendingQueue.filter(filter);
+                    return buffer;
+                },
+            };
+        },
+    };
+    return medium;
+}
+export function createMedium(defaults, middleware) {
+    if (middleware === void 0) { middleware = ItoI; }
+    return innerCreateMedium(defaults, middleware);
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function createSidecarMedium(options) {
+    if (options === void 0) { options = {}; }
+    var medium = innerCreateMedium(null);
+    medium.options = __assign({ async: true, ssr: false }, options);
+    return medium;
+}