Initial commit
This commit is contained in:
21
node_modules/use-sidecar/LICENSE
generated
vendored
Normal file
21
node_modules/use-sidecar/LICENSE
generated
vendored
Normal file
@ -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.
|
||||
349
node_modules/use-sidecar/README.md
generated
vendored
Normal file
349
node_modules/use-sidecar/README.md
generated
vendored
Normal file
@ -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
|
||||
|
||||
5
node_modules/use-sidecar/dist/es2015/config.d.ts
generated
vendored
Normal file
5
node_modules/use-sidecar/dist/es2015/config.d.ts
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
export interface IConfig {
|
||||
onError(e: Error): void;
|
||||
}
|
||||
export declare const config: IConfig;
|
||||
export declare const setConfig: (conf: Partial<IConfig>) => void;
|
||||
6
node_modules/use-sidecar/dist/es2015/config.js
generated
vendored
Normal file
6
node_modules/use-sidecar/dist/es2015/config.js
generated
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
export var config = {
|
||||
onError: function (e) { return console.error(e); },
|
||||
};
|
||||
export var setConfig = function (conf) {
|
||||
Object.assign(config, conf);
|
||||
};
|
||||
4
node_modules/use-sidecar/dist/es2015/env.d.ts
generated
vendored
Normal file
4
node_modules/use-sidecar/dist/es2015/env.d.ts
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
export declare const env: {
|
||||
isNode: boolean;
|
||||
forceCache: boolean;
|
||||
};
|
||||
5
node_modules/use-sidecar/dist/es2015/env.js
generated
vendored
Normal file
5
node_modules/use-sidecar/dist/es2015/env.js
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
import { isNode } from 'detect-node-es';
|
||||
export var env = {
|
||||
isNode: isNode,
|
||||
forceCache: false,
|
||||
};
|
||||
3
node_modules/use-sidecar/dist/es2015/exports.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es2015/exports.d.ts
generated
vendored
Normal file
@ -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>;
|
||||
18
node_modules/use-sidecar/dist/es2015/exports.js
generated
vendored
Normal file
18
node_modules/use-sidecar/dist/es2015/exports.js
generated
vendored
Normal file
@ -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;
|
||||
}
|
||||
3
node_modules/use-sidecar/dist/es2015/hoc.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es2015/hoc.d.ts
generated
vendored
Normal file
@ -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'>>>;
|
||||
15
node_modules/use-sidecar/dist/es2015/hoc.js
generated
vendored
Normal file
15
node_modules/use-sidecar/dist/es2015/hoc.js
generated
vendored
Normal file
@ -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;
|
||||
};
|
||||
}
|
||||
2
node_modules/use-sidecar/dist/es2015/hook.d.ts
generated
vendored
Normal file
2
node_modules/use-sidecar/dist/es2015/hook.d.ts
generated
vendored
Normal file
@ -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];
|
||||
41
node_modules/use-sidecar/dist/es2015/hook.js
generated
vendored
Normal file
41
node_modules/use-sidecar/dist/es2015/hook.js
generated
vendored
Normal file
@ -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];
|
||||
}
|
||||
7
node_modules/use-sidecar/dist/es2015/index.d.ts
generated
vendored
Normal file
7
node_modules/use-sidecar/dist/es2015/index.d.ts
generated
vendored
Normal file
@ -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';
|
||||
6
node_modules/use-sidecar/dist/es2015/index.js
generated
vendored
Normal file
6
node_modules/use-sidecar/dist/es2015/index.js
generated
vendored
Normal file
@ -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';
|
||||
3
node_modules/use-sidecar/dist/es2015/medium.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es2015/medium.d.ts
generated
vendored
Normal file
@ -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>>;
|
||||
78
node_modules/use-sidecar/dist/es2015/medium.js
generated
vendored
Normal file
78
node_modules/use-sidecar/dist/es2015/medium.js
generated
vendored
Normal file
@ -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;
|
||||
}
|
||||
8
node_modules/use-sidecar/dist/es2015/renderProp.d.ts
generated
vendored
Normal file
8
node_modules/use-sidecar/dist/es2015/renderProp.d.ts
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { SideCarHOC } from './types';
|
||||
declare type CombinedProps<T extends any[], K> = {
|
||||
children: (...prop: T) => any;
|
||||
} & K;
|
||||
declare type RenderPropComponent<T extends any[], K> = React.ComponentType<CombinedProps<T, K>>;
|
||||
export declare function renderCar<T extends any[], K, C = RenderPropComponent<T, K & Partial<SideCarHOC>>>(WrappedComponent: C, defaults: (props: K) => T): (props: CombinedProps<T, K>) => JSX.Element;
|
||||
export {};
|
||||
35
node_modules/use-sidecar/dist/es2015/renderProp.js
generated
vendored
Normal file
35
node_modules/use-sidecar/dist/es2015/renderProp.js
generated
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
import { __assign } from "tslib";
|
||||
import * as React from 'react';
|
||||
import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
|
||||
export function renderCar(WrappedComponent, defaults) {
|
||||
function State(_a) {
|
||||
var stateRef = _a.stateRef, props = _a.props;
|
||||
var renderTarget = useCallback(function SideTarget() {
|
||||
var args = [];
|
||||
for (var _i = 0; _i < arguments.length; _i++) {
|
||||
args[_i] = arguments[_i];
|
||||
}
|
||||
useLayoutEffect(function () {
|
||||
stateRef.current(args);
|
||||
});
|
||||
return null;
|
||||
}, []);
|
||||
// @ts-ignore
|
||||
return React.createElement(WrappedComponent, __assign({}, props, { children: renderTarget }));
|
||||
}
|
||||
var Children = React.memo(function (_a) {
|
||||
var stateRef = _a.stateRef, defaultState = _a.defaultState, children = _a.children;
|
||||
var _b = useState(defaultState.current), state = _b[0], setState = _b[1];
|
||||
useEffect(function () {
|
||||
stateRef.current = setState;
|
||||
}, []);
|
||||
return children.apply(void 0, state);
|
||||
}, function () { return true; });
|
||||
return function Combiner(props) {
|
||||
var defaultState = React.useRef(defaults(props));
|
||||
var ref = React.useRef(function (state) { return (defaultState.current = state); });
|
||||
return (React.createElement(React.Fragment, null,
|
||||
React.createElement(State, { stateRef: ref, props: props }),
|
||||
React.createElement(Children, { stateRef: ref, defaultState: defaultState, children: props.children })));
|
||||
};
|
||||
}
|
||||
47
node_modules/use-sidecar/dist/es2015/types.d.ts
generated
vendored
Normal file
47
node_modules/use-sidecar/dist/es2015/types.d.ts
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
import * as React from 'react';
|
||||
export declare type removeCb = () => void;
|
||||
export declare type MediumCallback<T> = (data: T) => any;
|
||||
export declare type MiddlewareCallback<T> = (data: T, assigned: boolean) => T;
|
||||
export declare type SidePush<T> = {
|
||||
length?: number;
|
||||
push(data: T): void;
|
||||
filter(cb: (x: T) => boolean): SidePush<T>;
|
||||
};
|
||||
/**
|
||||
* An object describing side medium
|
||||
*/
|
||||
export interface SideMedium<T> {
|
||||
/**
|
||||
* Pushes effect to the medium
|
||||
* @param effect any information for real handler
|
||||
*/
|
||||
useMedium(effect: T): removeCb;
|
||||
/**
|
||||
* Assigns effect handler to the medium
|
||||
* @param {Function(effect: T)} handler effect handler
|
||||
*/
|
||||
assignMedium(handler: MediumCallback<T>): void;
|
||||
/**
|
||||
* Assigns a synchronous effect handler to the medium, which would be executed right on call
|
||||
* @param {Function(effect: T)} handler effect handler
|
||||
*/
|
||||
assignSyncMedium(handler: MediumCallback<T>): void;
|
||||
/**
|
||||
* reads the data stored in the medium
|
||||
*/
|
||||
read(): T | undefined;
|
||||
options?: Record<string, any>;
|
||||
}
|
||||
export declare type DefaultOrNot<T> = {
|
||||
default: T;
|
||||
} | T;
|
||||
export declare type Importer<T> = () => Promise<DefaultOrNot<React.ComponentType<T>>>;
|
||||
export declare type SideCarMedium<T = {}> = SideMedium<React.ComponentType<T>>;
|
||||
export declare type SideCarHOC<T = {}> = {
|
||||
readonly sideCar: SideCarMedium<T>;
|
||||
};
|
||||
export declare type SideCarComponent<T> = React.FunctionComponent<T & SideCarHOC<T>>;
|
||||
export declare type SideCarMediumOptions = {
|
||||
async?: boolean;
|
||||
ssr?: boolean;
|
||||
};
|
||||
1
node_modules/use-sidecar/dist/es2015/types.js
generated
vendored
Normal file
1
node_modules/use-sidecar/dist/es2015/types.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
5
node_modules/use-sidecar/dist/es2019/config.d.ts
generated
vendored
Normal file
5
node_modules/use-sidecar/dist/es2019/config.d.ts
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
export interface IConfig {
|
||||
onError(e: Error): void;
|
||||
}
|
||||
export declare const config: IConfig;
|
||||
export declare const setConfig: (conf: Partial<IConfig>) => void;
|
||||
6
node_modules/use-sidecar/dist/es2019/config.js
generated
vendored
Normal file
6
node_modules/use-sidecar/dist/es2019/config.js
generated
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
export const config = {
|
||||
onError: e => console.error(e),
|
||||
};
|
||||
export const setConfig = (conf) => {
|
||||
Object.assign(config, conf);
|
||||
};
|
||||
4
node_modules/use-sidecar/dist/es2019/env.d.ts
generated
vendored
Normal file
4
node_modules/use-sidecar/dist/es2019/env.d.ts
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
export declare const env: {
|
||||
isNode: boolean;
|
||||
forceCache: boolean;
|
||||
};
|
||||
5
node_modules/use-sidecar/dist/es2019/env.js
generated
vendored
Normal file
5
node_modules/use-sidecar/dist/es2019/env.js
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
import { isNode } from 'detect-node-es';
|
||||
export const env = {
|
||||
isNode,
|
||||
forceCache: false,
|
||||
};
|
||||
3
node_modules/use-sidecar/dist/es2019/exports.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es2019/exports.d.ts
generated
vendored
Normal file
@ -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>;
|
||||
16
node_modules/use-sidecar/dist/es2019/exports.js
generated
vendored
Normal file
16
node_modules/use-sidecar/dist/es2019/exports.js
generated
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
import * as React from 'react';
|
||||
const SideCar = ({ sideCar, ...rest }) => {
|
||||
if (!sideCar) {
|
||||
throw new Error('Sidecar: please provide `sideCar` property to import the right car');
|
||||
}
|
||||
const Target = sideCar.read();
|
||||
if (!Target) {
|
||||
throw new Error('Sidecar medium not found');
|
||||
}
|
||||
return React.createElement(Target, { ...rest });
|
||||
};
|
||||
SideCar.isSideCarExport = true;
|
||||
export function exportSidecar(medium, exported) {
|
||||
medium.useMedium(exported);
|
||||
return SideCar;
|
||||
}
|
||||
3
node_modules/use-sidecar/dist/es2019/hoc.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es2019/hoc.d.ts
generated
vendored
Normal file
@ -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'>>>;
|
||||
14
node_modules/use-sidecar/dist/es2019/hoc.js
generated
vendored
Normal file
14
node_modules/use-sidecar/dist/es2019/hoc.js
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
import * as React from 'react';
|
||||
import { useSidecar } from './hook';
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
export function sidecar(importer, errorComponent) {
|
||||
const ErrorCase = () => errorComponent;
|
||||
return function Sidecar(props) {
|
||||
const [Car, error] = useSidecar(importer, props.sideCar);
|
||||
if (error && errorComponent) {
|
||||
return ErrorCase;
|
||||
}
|
||||
// @ts-expect-error type shenanigans
|
||||
return Car ? React.createElement(Car, { ...props }) : null;
|
||||
};
|
||||
}
|
||||
2
node_modules/use-sidecar/dist/es2019/hook.d.ts
generated
vendored
Normal file
2
node_modules/use-sidecar/dist/es2019/hook.d.ts
generated
vendored
Normal file
@ -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];
|
||||
41
node_modules/use-sidecar/dist/es2019/hook.js
generated
vendored
Normal file
41
node_modules/use-sidecar/dist/es2019/hook.js
generated
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { env } from './env';
|
||||
const cache = new WeakMap();
|
||||
const NO_OPTIONS = {};
|
||||
export function useSidecar(importer, effect) {
|
||||
const 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) {
|
||||
const options = (effect && effect.options) || NO_OPTIONS;
|
||||
const couldUseCache = env.forceCache || (env.isNode && !!options.ssr) || !options.async;
|
||||
const [Car, setCar] = useState(couldUseCache ? () => cache.get(importer) : undefined);
|
||||
const [error, setError] = useState(null);
|
||||
useEffect(() => {
|
||||
if (!Car) {
|
||||
importer().then((car) => {
|
||||
const resolved = effect ? effect.read() : car.default || car;
|
||||
if (!resolved) {
|
||||
console.error('Sidecar error: with importer', importer);
|
||||
let error;
|
||||
if (effect) {
|
||||
console.error('Sidecar error: with medium', effect);
|
||||
error = new Error('Sidecar medium was not found');
|
||||
}
|
||||
else {
|
||||
error = new Error('Sidecar was not found in exports');
|
||||
}
|
||||
setError(() => error);
|
||||
throw error;
|
||||
}
|
||||
cache.set(importer, resolved);
|
||||
setCar(() => resolved);
|
||||
}, (e) => setError(() => e));
|
||||
}
|
||||
}, []);
|
||||
return [Car, error];
|
||||
}
|
||||
7
node_modules/use-sidecar/dist/es2019/index.d.ts
generated
vendored
Normal file
7
node_modules/use-sidecar/dist/es2019/index.d.ts
generated
vendored
Normal file
@ -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';
|
||||
6
node_modules/use-sidecar/dist/es2019/index.js
generated
vendored
Normal file
6
node_modules/use-sidecar/dist/es2019/index.js
generated
vendored
Normal file
@ -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';
|
||||
3
node_modules/use-sidecar/dist/es2019/medium.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es2019/medium.d.ts
generated
vendored
Normal file
@ -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>>;
|
||||
78
node_modules/use-sidecar/dist/es2019/medium.js
generated
vendored
Normal file
78
node_modules/use-sidecar/dist/es2019/medium.js
generated
vendored
Normal file
@ -0,0 +1,78 @@
|
||||
function ItoI(a) {
|
||||
return a;
|
||||
}
|
||||
function innerCreateMedium(defaults, middleware = ItoI) {
|
||||
let buffer = [];
|
||||
let assigned = false;
|
||||
const medium = {
|
||||
read() {
|
||||
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(data) {
|
||||
const item = middleware(data, assigned);
|
||||
buffer.push(item);
|
||||
return () => {
|
||||
buffer = buffer.filter((x) => x !== item);
|
||||
};
|
||||
},
|
||||
assignSyncMedium(cb) {
|
||||
assigned = true;
|
||||
while (buffer.length) {
|
||||
const cbs = buffer;
|
||||
buffer = [];
|
||||
cbs.forEach(cb);
|
||||
}
|
||||
buffer = {
|
||||
push: (x) => cb(x),
|
||||
filter: () => buffer,
|
||||
};
|
||||
},
|
||||
assignMedium(cb) {
|
||||
assigned = true;
|
||||
let pendingQueue = [];
|
||||
if (buffer.length) {
|
||||
const cbs = buffer;
|
||||
buffer = [];
|
||||
cbs.forEach(cb);
|
||||
pendingQueue = buffer;
|
||||
}
|
||||
const executeQueue = () => {
|
||||
const cbs = pendingQueue;
|
||||
pendingQueue = [];
|
||||
cbs.forEach(cb);
|
||||
};
|
||||
const cycle = () => Promise.resolve().then(executeQueue);
|
||||
cycle();
|
||||
buffer = {
|
||||
push: (x) => {
|
||||
pendingQueue.push(x);
|
||||
cycle();
|
||||
},
|
||||
filter: (filter) => {
|
||||
pendingQueue = pendingQueue.filter(filter);
|
||||
return buffer;
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
return medium;
|
||||
}
|
||||
export function createMedium(defaults, middleware = ItoI) {
|
||||
return innerCreateMedium(defaults, middleware);
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
export function createSidecarMedium(options = {}) {
|
||||
const medium = innerCreateMedium(null);
|
||||
medium.options = {
|
||||
async: true,
|
||||
ssr: false,
|
||||
...options,
|
||||
};
|
||||
return medium;
|
||||
}
|
||||
8
node_modules/use-sidecar/dist/es2019/renderProp.d.ts
generated
vendored
Normal file
8
node_modules/use-sidecar/dist/es2019/renderProp.d.ts
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { SideCarHOC } from './types';
|
||||
declare type CombinedProps<T extends any[], K> = {
|
||||
children: (...prop: T) => any;
|
||||
} & K;
|
||||
declare type RenderPropComponent<T extends any[], K> = React.ComponentType<CombinedProps<T, K>>;
|
||||
export declare function renderCar<T extends any[], K, C = RenderPropComponent<T, K & Partial<SideCarHOC>>>(WrappedComponent: C, defaults: (props: K) => T): (props: CombinedProps<T, K>) => JSX.Element;
|
||||
export {};
|
||||
28
node_modules/use-sidecar/dist/es2019/renderProp.js
generated
vendored
Normal file
28
node_modules/use-sidecar/dist/es2019/renderProp.js
generated
vendored
Normal file
@ -0,0 +1,28 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
|
||||
export function renderCar(WrappedComponent, defaults) {
|
||||
function State({ stateRef, props }) {
|
||||
const renderTarget = useCallback(function SideTarget(...args) {
|
||||
useLayoutEffect(() => {
|
||||
stateRef.current(args);
|
||||
});
|
||||
return null;
|
||||
}, []);
|
||||
// @ts-ignore
|
||||
return React.createElement(WrappedComponent, { ...props, children: renderTarget });
|
||||
}
|
||||
const Children = React.memo(({ stateRef, defaultState, children }) => {
|
||||
const [state, setState] = useState(defaultState.current);
|
||||
useEffect(() => {
|
||||
stateRef.current = setState;
|
||||
}, []);
|
||||
return children(...state);
|
||||
}, () => true);
|
||||
return function Combiner(props) {
|
||||
const defaultState = React.useRef(defaults(props));
|
||||
const ref = React.useRef((state) => (defaultState.current = state));
|
||||
return (React.createElement(React.Fragment, null,
|
||||
React.createElement(State, { stateRef: ref, props: props }),
|
||||
React.createElement(Children, { stateRef: ref, defaultState: defaultState, children: props.children })));
|
||||
};
|
||||
}
|
||||
47
node_modules/use-sidecar/dist/es2019/types.d.ts
generated
vendored
Normal file
47
node_modules/use-sidecar/dist/es2019/types.d.ts
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
import * as React from 'react';
|
||||
export declare type removeCb = () => void;
|
||||
export declare type MediumCallback<T> = (data: T) => any;
|
||||
export declare type MiddlewareCallback<T> = (data: T, assigned: boolean) => T;
|
||||
export declare type SidePush<T> = {
|
||||
length?: number;
|
||||
push(data: T): void;
|
||||
filter(cb: (x: T) => boolean): SidePush<T>;
|
||||
};
|
||||
/**
|
||||
* An object describing side medium
|
||||
*/
|
||||
export interface SideMedium<T> {
|
||||
/**
|
||||
* Pushes effect to the medium
|
||||
* @param effect any information for real handler
|
||||
*/
|
||||
useMedium(effect: T): removeCb;
|
||||
/**
|
||||
* Assigns effect handler to the medium
|
||||
* @param {Function(effect: T)} handler effect handler
|
||||
*/
|
||||
assignMedium(handler: MediumCallback<T>): void;
|
||||
/**
|
||||
* Assigns a synchronous effect handler to the medium, which would be executed right on call
|
||||
* @param {Function(effect: T)} handler effect handler
|
||||
*/
|
||||
assignSyncMedium(handler: MediumCallback<T>): void;
|
||||
/**
|
||||
* reads the data stored in the medium
|
||||
*/
|
||||
read(): T | undefined;
|
||||
options?: Record<string, any>;
|
||||
}
|
||||
export declare type DefaultOrNot<T> = {
|
||||
default: T;
|
||||
} | T;
|
||||
export declare type Importer<T> = () => Promise<DefaultOrNot<React.ComponentType<T>>>;
|
||||
export declare type SideCarMedium<T = {}> = SideMedium<React.ComponentType<T>>;
|
||||
export declare type SideCarHOC<T = {}> = {
|
||||
readonly sideCar: SideCarMedium<T>;
|
||||
};
|
||||
export declare type SideCarComponent<T> = React.FunctionComponent<T & SideCarHOC<T>>;
|
||||
export declare type SideCarMediumOptions = {
|
||||
async?: boolean;
|
||||
ssr?: boolean;
|
||||
};
|
||||
1
node_modules/use-sidecar/dist/es2019/types.js
generated
vendored
Normal file
1
node_modules/use-sidecar/dist/es2019/types.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
5
node_modules/use-sidecar/dist/es5/config.d.ts
generated
vendored
Normal file
5
node_modules/use-sidecar/dist/es5/config.d.ts
generated
vendored
Normal file
@ -0,0 +1,5 @@
|
||||
export interface IConfig {
|
||||
onError(e: Error): void;
|
||||
}
|
||||
export declare const config: IConfig;
|
||||
export declare const setConfig: (conf: Partial<IConfig>) => void;
|
||||
10
node_modules/use-sidecar/dist/es5/config.js
generated
vendored
Normal file
10
node_modules/use-sidecar/dist/es5/config.js
generated
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.setConfig = exports.config = void 0;
|
||||
exports.config = {
|
||||
onError: function (e) { return console.error(e); },
|
||||
};
|
||||
var setConfig = function (conf) {
|
||||
Object.assign(exports.config, conf);
|
||||
};
|
||||
exports.setConfig = setConfig;
|
||||
4
node_modules/use-sidecar/dist/es5/env.d.ts
generated
vendored
Normal file
4
node_modules/use-sidecar/dist/es5/env.d.ts
generated
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
export declare const env: {
|
||||
isNode: boolean;
|
||||
forceCache: boolean;
|
||||
};
|
||||
8
node_modules/use-sidecar/dist/es5/env.js
generated
vendored
Normal file
8
node_modules/use-sidecar/dist/es5/env.js
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.env = void 0;
|
||||
var detect_node_es_1 = require("detect-node-es");
|
||||
exports.env = {
|
||||
isNode: detect_node_es_1.isNode,
|
||||
forceCache: false,
|
||||
};
|
||||
3
node_modules/use-sidecar/dist/es5/exports.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es5/exports.d.ts
generated
vendored
Normal file
@ -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>;
|
||||
22
node_modules/use-sidecar/dist/es5/exports.js
generated
vendored
Normal file
22
node_modules/use-sidecar/dist/es5/exports.js
generated
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.exportSidecar = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var SideCar = function (_a) {
|
||||
var sideCar = _a.sideCar, rest = tslib_1.__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, tslib_1.__assign({}, rest));
|
||||
};
|
||||
SideCar.isSideCarExport = true;
|
||||
function exportSidecar(medium, exported) {
|
||||
medium.useMedium(exported);
|
||||
return SideCar;
|
||||
}
|
||||
exports.exportSidecar = exportSidecar;
|
||||
3
node_modules/use-sidecar/dist/es5/hoc.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es5/hoc.d.ts
generated
vendored
Normal file
@ -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'>>>;
|
||||
19
node_modules/use-sidecar/dist/es5/hoc.js
generated
vendored
Normal file
19
node_modules/use-sidecar/dist/es5/hoc.js
generated
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.sidecar = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var hook_1 = require("./hook");
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
function sidecar(importer, errorComponent) {
|
||||
var ErrorCase = function () { return errorComponent; };
|
||||
return function Sidecar(props) {
|
||||
var _a = (0, hook_1.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, tslib_1.__assign({}, props)) : null;
|
||||
};
|
||||
}
|
||||
exports.sidecar = sidecar;
|
||||
2
node_modules/use-sidecar/dist/es5/hook.d.ts
generated
vendored
Normal file
2
node_modules/use-sidecar/dist/es5/hook.d.ts
generated
vendored
Normal file
@ -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];
|
||||
45
node_modules/use-sidecar/dist/es5/hook.js
generated
vendored
Normal file
45
node_modules/use-sidecar/dist/es5/hook.js
generated
vendored
Normal file
@ -0,0 +1,45 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.useSidecar = void 0;
|
||||
var react_1 = require("react");
|
||||
var env_1 = require("./env");
|
||||
var cache = new WeakMap();
|
||||
var NO_OPTIONS = {};
|
||||
function useSidecar(importer, effect) {
|
||||
var options = (effect && effect.options) || NO_OPTIONS;
|
||||
if (env_1.env.isNode && !options.ssr) {
|
||||
return [null, null];
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
return useRealSidecar(importer, effect);
|
||||
}
|
||||
exports.useSidecar = useSidecar;
|
||||
function useRealSidecar(importer, effect) {
|
||||
var options = (effect && effect.options) || NO_OPTIONS;
|
||||
var couldUseCache = env_1.env.forceCache || (env_1.env.isNode && !!options.ssr) || !options.async;
|
||||
var _a = (0, react_1.useState)(couldUseCache ? function () { return cache.get(importer); } : undefined), Car = _a[0], setCar = _a[1];
|
||||
var _b = (0, react_1.useState)(null), error = _b[0], setError = _b[1];
|
||||
(0, react_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];
|
||||
}
|
||||
7
node_modules/use-sidecar/dist/es5/index.d.ts
generated
vendored
Normal file
7
node_modules/use-sidecar/dist/es5/index.d.ts
generated
vendored
Normal file
@ -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';
|
||||
16
node_modules/use-sidecar/dist/es5/index.js
generated
vendored
Normal file
16
node_modules/use-sidecar/dist/es5/index.js
generated
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.exportSidecar = exports.renderCar = exports.createSidecarMedium = exports.createMedium = exports.setConfig = exports.useSidecar = exports.sidecar = void 0;
|
||||
var hoc_1 = require("./hoc");
|
||||
Object.defineProperty(exports, "sidecar", { enumerable: true, get: function () { return hoc_1.sidecar; } });
|
||||
var hook_1 = require("./hook");
|
||||
Object.defineProperty(exports, "useSidecar", { enumerable: true, get: function () { return hook_1.useSidecar; } });
|
||||
var config_1 = require("./config");
|
||||
Object.defineProperty(exports, "setConfig", { enumerable: true, get: function () { return config_1.setConfig; } });
|
||||
var medium_1 = require("./medium");
|
||||
Object.defineProperty(exports, "createMedium", { enumerable: true, get: function () { return medium_1.createMedium; } });
|
||||
Object.defineProperty(exports, "createSidecarMedium", { enumerable: true, get: function () { return medium_1.createSidecarMedium; } });
|
||||
var renderProp_1 = require("./renderProp");
|
||||
Object.defineProperty(exports, "renderCar", { enumerable: true, get: function () { return renderProp_1.renderCar; } });
|
||||
var exports_1 = require("./exports");
|
||||
Object.defineProperty(exports, "exportSidecar", { enumerable: true, get: function () { return exports_1.exportSidecar; } });
|
||||
3
node_modules/use-sidecar/dist/es5/medium.d.ts
generated
vendored
Normal file
3
node_modules/use-sidecar/dist/es5/medium.d.ts
generated
vendored
Normal file
@ -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>>;
|
||||
83
node_modules/use-sidecar/dist/es5/medium.js
generated
vendored
Normal file
83
node_modules/use-sidecar/dist/es5/medium.js
generated
vendored
Normal file
@ -0,0 +1,83 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.createSidecarMedium = exports.createMedium = void 0;
|
||||
var tslib_1 = require("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;
|
||||
}
|
||||
function createMedium(defaults, middleware) {
|
||||
if (middleware === void 0) { middleware = ItoI; }
|
||||
return innerCreateMedium(defaults, middleware);
|
||||
}
|
||||
exports.createMedium = createMedium;
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
function createSidecarMedium(options) {
|
||||
if (options === void 0) { options = {}; }
|
||||
var medium = innerCreateMedium(null);
|
||||
medium.options = tslib_1.__assign({ async: true, ssr: false }, options);
|
||||
return medium;
|
||||
}
|
||||
exports.createSidecarMedium = createSidecarMedium;
|
||||
8
node_modules/use-sidecar/dist/es5/renderProp.d.ts
generated
vendored
Normal file
8
node_modules/use-sidecar/dist/es5/renderProp.d.ts
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
import * as React from 'react';
|
||||
import { SideCarHOC } from './types';
|
||||
declare type CombinedProps<T extends any[], K> = {
|
||||
children: (...prop: T) => any;
|
||||
} & K;
|
||||
declare type RenderPropComponent<T extends any[], K> = React.ComponentType<CombinedProps<T, K>>;
|
||||
export declare function renderCar<T extends any[], K, C = RenderPropComponent<T, K & Partial<SideCarHOC>>>(WrappedComponent: C, defaults: (props: K) => T): (props: CombinedProps<T, K>) => JSX.Element;
|
||||
export {};
|
||||
39
node_modules/use-sidecar/dist/es5/renderProp.js
generated
vendored
Normal file
39
node_modules/use-sidecar/dist/es5/renderProp.js
generated
vendored
Normal file
@ -0,0 +1,39 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.renderCar = void 0;
|
||||
var tslib_1 = require("tslib");
|
||||
var React = tslib_1.__importStar(require("react"));
|
||||
var react_1 = require("react");
|
||||
function renderCar(WrappedComponent, defaults) {
|
||||
function State(_a) {
|
||||
var stateRef = _a.stateRef, props = _a.props;
|
||||
var renderTarget = (0, react_1.useCallback)(function SideTarget() {
|
||||
var args = [];
|
||||
for (var _i = 0; _i < arguments.length; _i++) {
|
||||
args[_i] = arguments[_i];
|
||||
}
|
||||
(0, react_1.useLayoutEffect)(function () {
|
||||
stateRef.current(args);
|
||||
});
|
||||
return null;
|
||||
}, []);
|
||||
// @ts-ignore
|
||||
return React.createElement(WrappedComponent, tslib_1.__assign({}, props, { children: renderTarget }));
|
||||
}
|
||||
var Children = React.memo(function (_a) {
|
||||
var stateRef = _a.stateRef, defaultState = _a.defaultState, children = _a.children;
|
||||
var _b = (0, react_1.useState)(defaultState.current), state = _b[0], setState = _b[1];
|
||||
(0, react_1.useEffect)(function () {
|
||||
stateRef.current = setState;
|
||||
}, []);
|
||||
return children.apply(void 0, state);
|
||||
}, function () { return true; });
|
||||
return function Combiner(props) {
|
||||
var defaultState = React.useRef(defaults(props));
|
||||
var ref = React.useRef(function (state) { return (defaultState.current = state); });
|
||||
return (React.createElement(React.Fragment, null,
|
||||
React.createElement(State, { stateRef: ref, props: props }),
|
||||
React.createElement(Children, { stateRef: ref, defaultState: defaultState, children: props.children })));
|
||||
};
|
||||
}
|
||||
exports.renderCar = renderCar;
|
||||
47
node_modules/use-sidecar/dist/es5/types.d.ts
generated
vendored
Normal file
47
node_modules/use-sidecar/dist/es5/types.d.ts
generated
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
import * as React from 'react';
|
||||
export declare type removeCb = () => void;
|
||||
export declare type MediumCallback<T> = (data: T) => any;
|
||||
export declare type MiddlewareCallback<T> = (data: T, assigned: boolean) => T;
|
||||
export declare type SidePush<T> = {
|
||||
length?: number;
|
||||
push(data: T): void;
|
||||
filter(cb: (x: T) => boolean): SidePush<T>;
|
||||
};
|
||||
/**
|
||||
* An object describing side medium
|
||||
*/
|
||||
export interface SideMedium<T> {
|
||||
/**
|
||||
* Pushes effect to the medium
|
||||
* @param effect any information for real handler
|
||||
*/
|
||||
useMedium(effect: T): removeCb;
|
||||
/**
|
||||
* Assigns effect handler to the medium
|
||||
* @param {Function(effect: T)} handler effect handler
|
||||
*/
|
||||
assignMedium(handler: MediumCallback<T>): void;
|
||||
/**
|
||||
* Assigns a synchronous effect handler to the medium, which would be executed right on call
|
||||
* @param {Function(effect: T)} handler effect handler
|
||||
*/
|
||||
assignSyncMedium(handler: MediumCallback<T>): void;
|
||||
/**
|
||||
* reads the data stored in the medium
|
||||
*/
|
||||
read(): T | undefined;
|
||||
options?: Record<string, any>;
|
||||
}
|
||||
export declare type DefaultOrNot<T> = {
|
||||
default: T;
|
||||
} | T;
|
||||
export declare type Importer<T> = () => Promise<DefaultOrNot<React.ComponentType<T>>>;
|
||||
export declare type SideCarMedium<T = {}> = SideMedium<React.ComponentType<T>>;
|
||||
export declare type SideCarHOC<T = {}> = {
|
||||
readonly sideCar: SideCarMedium<T>;
|
||||
};
|
||||
export declare type SideCarComponent<T> = React.FunctionComponent<T & SideCarHOC<T>>;
|
||||
export declare type SideCarMediumOptions = {
|
||||
async?: boolean;
|
||||
ssr?: boolean;
|
||||
};
|
||||
2
node_modules/use-sidecar/dist/es5/types.js
generated
vendored
Normal file
2
node_modules/use-sidecar/dist/es5/types.js
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
89
node_modules/use-sidecar/package.json
generated
vendored
Normal file
89
node_modules/use-sidecar/package.json
generated
vendored
Normal file
@ -0,0 +1,89 @@
|
||||
{
|
||||
"name": "use-sidecar",
|
||||
"version": "1.1.2",
|
||||
"description": "Sidecar code splitting utils",
|
||||
"module:es2019": "dist/es2019/index.js",
|
||||
"main": "dist/es5/index.js",
|
||||
"module": "dist/es2015/index.js",
|
||||
"types": "dist/es5/index.d.ts",
|
||||
"devDependencies": {
|
||||
"@size-limit/preset-small-lib": "^2.1.6",
|
||||
"@theuiteam/lib-builder": "^0.1.4",
|
||||
"@types/enzyme-adapter-react-16": "^1.0.6",
|
||||
"enzyme-adapter-react-16": "^1.15.6",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"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"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"sideEffects": [
|
||||
"**/medium.js"
|
||||
],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"keywords": [
|
||||
"code spliting",
|
||||
"react",
|
||||
"sidecar"
|
||||
],
|
||||
"homepage": "https://github.com/theKashey/use-sidecar",
|
||||
"author": "theKashey <thekashey@gmail.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"detect-node-es": "^1.1.0",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/theKashey/use-sidecar"
|
||||
},
|
||||
"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
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user