New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

concave

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

concave - npm Package Compare versions

Comparing version

0.1.0
to
0.2.0

LICENSE

59

dist/index.d.ts
declare type AnyObject = {
[key: string | number | symbol]: JSON;
[key: string | number | symbol]: any;
};
declare type AnyArray = JSON[];
declare type AnyArray = any[];
declare type AnyPrimitive = number | bigint | string | boolean | null | void | symbol;
declare type JSON = AnyArray | AnyObject | AnyPrimitive;
declare type AnyConnection = Connection<any, any>;
declare type Listener = () => void;
declare type Unsubscribe = () => void;
declare type Updater<A> = (a: A) => A;
declare type Update<A> = (fn: Updater<A>) => void;
declare type Update<A> = (updater: Updater<A>) => void;
declare type Store<A> = {
getSnapshot(): A;
setSnapshot(next: A): boolean;
subscribe(onStoreChange?: Listener): Unsubscribe;
};
interface Breakable {
connect(): void;
disconnect(): void;
}
declare class SuspendedClosure<A> implements Breakable {
private resolution;
private breaker;
private onReady;
private ready;
constructor();
getSnapshot(): A;
setSnapshot(value: A): void;
/**
* Connect the entry to the store by passing a subscribe function. Only
* allow this in transitioning from unresolved to resolved.
*/
load(subscribe: () => Unsubscribe): void;
connect(): void;
disconnect(): void;
}
declare type ValueCache<A> = {
[cacheKey: string]: A;
};
declare type InsertConnection<A, I> = (store: Store<A>, input: I, cacheKey: string) => SuspendedClosure<A>;
declare const INSERT: unique symbol;
declare const CACHE: unique symbol;
declare type Connection<A, I = void> = {
[INSERT]: InsertConnection<A, I>;
[CACHE]: ValueCache<A>;
};
declare const connection: <A, I = void>(create: (store: Store<A>, input: I) => Unsubscribe | void) => Connection<A, I>;
declare type BaseProxyValue<A> = {

@@ -30,8 +70,2 @@ toJSON(): A;

declare type Store<A> = {
getSnapshot(): A;
subscribe(onStoreChange: Listener): Unsubscribe;
update(updater: Updater<A>): void;
};
declare type BaseProxyLens<A> = {

@@ -60,2 +94,3 @@ /**

};
declare type ConnectionProxyLens<A> = BaseProxyLens<A> & (A extends Connection<infer B, infer I> ? (input: I) => ProxyLens<B> : {});
declare type ArrayProxyLens<A extends AnyArray> = BaseProxyLens<A> & {

@@ -68,3 +103,3 @@ [K in number]: ProxyLens<A[K]>;

declare type PrimitiveProxyLens<A extends AnyPrimitive> = BaseProxyLens<A>;
declare type ProxyLens<A> = A extends AnyArray ? ArrayProxyLens<A> : A extends AnyObject ? ObjectProxyLens<A> : A extends AnyPrimitive ? PrimitiveProxyLens<A> : never;
declare type ProxyLens<A> = A extends AnyConnection ? ConnectionProxyLens<A> : A extends AnyObject ? ObjectProxyLens<A> : A extends AnyArray ? ArrayProxyLens<A> : A extends AnyPrimitive ? PrimitiveProxyLens<A> : never;

@@ -77,2 +112,2 @@ declare const createLens: <S>(initialState: S) => ProxyLens<S>;

export { Lens, Store, createLens, useCreateLens };
export { Connection, Lens, Store, connection, createLens, useCreateLens };

531

dist/index.js

@@ -5,18 +5,5 @@ var __create = Object.create;

var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop2 in b || (b = {}))
if (__hasOwnProp.call(b, prop2))
__defNormalProp(a, prop2, b[prop2]);
if (__getOwnPropSymbols)
for (var prop2 of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop2))
__defNormalProp(a, prop2, b[prop2]);
}
return a;
};
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });

@@ -44,2 +31,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });

})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};

@@ -49,2 +40,3 @@ // src/index.ts

__export(src_exports, {
connection: () => connection,
createLens: () => createLens,

@@ -58,5 +50,18 @@ useCreateLens: () => useCreateLens

// src/shallow-copy.ts
var DO_NOT_SHALLOW_COPY = Symbol();
var doNotShallowCopy = /* @__PURE__ */ __name((obj) => {
Object.defineProperty(obj, DO_NOT_SHALLOW_COPY, {
configurable: true,
enumerable: false,
writable: false,
value: true
});
return obj;
}, "doNotShallowCopy");
var shallowCopy = /* @__PURE__ */ __name((obj) => {
if (Reflect.has(obj, DO_NOT_SHALLOW_COPY)) {
return obj;
}
if (isObject(obj)) {
return __spreadValues({}, obj);
return { ...obj };
} else if (Array.isArray(obj)) {

@@ -99,2 +104,163 @@ return [...obj];

// src/lens-focus.ts
function refineLensFocus(focus, keys) {
const keyPath = [...focus.keyPath, ...keys];
let lens = focus.lens;
for (const key of keys) {
lens = prop(lens, key);
}
return { keyPath, lens };
}
__name(refineLensFocus, "refineLensFocus");
var rootLensFocus = /* @__PURE__ */ __name(() => {
return {
keyPath: [],
lens: basicLens()
};
}, "rootLensFocus");
// src/breaker.ts
var Breaker = class {
constructor(subscribe) {
this.subscribe = subscribe;
__publicField(this, "state", { connected: false });
}
static noop() {
return new Breaker(() => () => {
});
}
get connected() {
return this.state.connected;
}
connect() {
if (this.state.connected) {
return;
}
const unsubscribe = this.subscribe.call(null);
this.state = {
connected: true,
unsubscribe
};
}
disconnect() {
if (!this.state.connected) {
return;
}
this.state.unsubscribe();
this.state = {
connected: false
};
}
};
__name(Breaker, "Breaker");
// src/suspended-closure.ts
var SuspendedClosure = class {
constructor() {
__publicField(this, "resolution", { status: "unresolved" });
__publicField(this, "breaker", Breaker.noop());
__publicField(this, "onReady");
__publicField(this, "ready");
let ready = /* @__PURE__ */ __name(() => {
}, "ready");
this.onReady = new Promise((resolve) => {
ready = resolve;
});
this.ready = () => ready();
}
getSnapshot() {
if (this.resolution.status !== "resolved") {
throw this.onReady;
}
return this.resolution.value;
}
setSnapshot(value) {
switch (this.resolution.status) {
case "unresolved": {
return;
}
case "loading": {
this.resolution = { status: "resolved", value };
this.ready();
return;
}
case "resolved": {
this.resolution.value = value;
return;
}
}
}
load(subscribe) {
if (this.resolution.status !== "unresolved") {
return;
}
this.resolution = { status: "loading" };
const isAlreadyConnected = this.breaker.connected;
this.breaker = new Breaker(subscribe);
if (isAlreadyConnected) {
this.breaker.connect();
}
}
connect() {
this.breaker.connect();
}
disconnect() {
this.breaker.disconnect();
}
};
__name(SuspendedClosure, "SuspendedClosure");
// src/connection.ts
var INSERT = Symbol();
var CACHE = Symbol();
var connection = /* @__PURE__ */ __name((create) => {
const connectionCache = {};
const stub = doNotShallowCopy({});
const cache2 = new Proxy(stub, {
get(_target, _key) {
let key = _key;
let cached = connectionCache[key] ?? (connectionCache[key] = new SuspendedClosure());
return cached.getSnapshot();
},
set(_target, _key, value) {
let key = _key;
let conn2 = connectionCache[key];
if (conn2 === void 0) {
return false;
}
conn2.setSnapshot(value);
return true;
}
});
const insert2 = /* @__PURE__ */ __name((store, input, cacheKey) => {
let conn2 = connectionCache[cacheKey] ?? (connectionCache[cacheKey] = new SuspendedClosure());
conn2.load(() => create(store, input) ?? (() => {
}));
return conn2;
}, "insert");
const conn = doNotShallowCopy({});
Object.defineProperties(conn, {
[INSERT]: {
configurable: true,
enumerable: false,
writable: false,
value: insert2
},
[CACHE]: {
configurable: true,
enumerable: false,
writable: true,
value: cache2
}
});
return conn;
}, "connection");
var focusToCache = /* @__PURE__ */ __name((focus, cacheKey) => refineLensFocus(focus, [CACHE, cacheKey]), "focusToCache");
var insert = /* @__PURE__ */ __name((conn, store, input, cacheKey) => {
return conn[INSERT](store, input, cacheKey);
}, "insert");
var isConnection = /* @__PURE__ */ __name((conn) => {
return isObject(conn) && Reflect.has(conn, INSERT) && Reflect.has(conn, CACHE);
}, "isConnection");
// src/key-path-to-string.ts

@@ -126,9 +292,8 @@ var cache = /* @__PURE__ */ new WeakMap();

get(target, key) {
var _a, _b;
if (key === "toJSON") {
(_a = target.toJSON) != null ? _a : target.toJSON = () => target.data;
target.toJSON ?? (target.toJSON = () => target.data);
return target.toJSON;
}
if (key === "toLens") {
(_b = target.toLens) != null ? _b : target.toLens = () => target.lens;
target.toLens ?? (target.toLens = () => target.lens);
return target.toLens;

@@ -267,7 +432,27 @@ }

}, "getSnapshot");
const state = import_react.default.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
const setState = store.update;
const subscribe = import_react.default.useMemo(() => {
let listeners = [];
const unsubscribe = store.subscribe(() => {
listeners.forEach((fn) => fn());
});
return (listener) => {
listeners.push(listener);
return () => {
unsubscribe();
listeners = [];
};
};
}, [store]);
const state = import_react.default.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
const update = import_react.default.useCallback((updater) => {
const prev = store.getSnapshot();
const next = updater(prev);
if (Object.is(prev, next)) {
return;
}
store.setSnapshot(next);
}, [store]);
prevStateRef.current = state;
const value = import_react.default.useMemo(() => proxyValue(state, proxy), [state, proxy]);
return [value, setState];
return [value, update];
}, "useLens"), "createUseLens");

@@ -288,86 +473,30 @@ function useCreateLens(initialState) {

isCalledInsideReactDevtools: () => {
var _a;
const err = new Error();
return (_a = err.stack) == null ? void 0 : _a.includes("react_devtools_backend");
return err.stack?.includes("react_devtools_backend");
}
};
// src/proxy-lens.ts
var THROW_ON_COPY = Symbol();
var focusProp = /* @__PURE__ */ __name((focus, key) => {
// src/awaitable.ts
var isPromiseLike = /* @__PURE__ */ __name((obj) => {
return isObject(obj) && Reflect.has(obj, "then");
}, "isPromiseLike");
var awaitable = /* @__PURE__ */ __name((get) => () => {
return {
keyPath: [...focus.keyPath, key],
lens: prop(focus.lens, key)
};
}, "focusProp");
var specialKeys = ["use", "getStore", "$key"];
var proxyLens = /* @__PURE__ */ __name((storeFactory, focus = { lens: basicLens(), keyPath: [] }) => {
const proxy = new Proxy({}, {
get(target, key) {
var _a, _b, _c, _d;
if (key === "$$typeof") {
return void 0;
then(onfulfilled) {
const value = get();
onfulfilled ?? (onfulfilled = null);
if (onfulfilled === null) {
throw new Error("Unexpected error. Do not use awaitable(value).then()");
}
if (key === "$key") {
(_a = target.$key) != null ? _a : target.$key = keyPathToString(focus.keyPath);
return target.$key;
if (isPromiseLike(value)) {
return value.then(onfulfilled);
}
if (key === "use") {
(_b = target.use) != null ? _b : target.use = createUseLens(proxy);
return target.use;
const result = onfulfilled(value);
if (isPromiseLike(result)) {
return result;
}
if (key === "getStore") {
(_c = target.getStore) != null ? _c : target.getStore = () => storeFactory(focus);
return target.getStore;
}
(_d = target.cache) != null ? _d : target.cache = {};
if (target.cache[key] === void 0) {
const nextFocus = focusProp(focus, key);
const nextProxy = proxyLens(storeFactory, nextFocus);
target.cache[key] = nextProxy;
}
return target.cache[key];
},
ownKeys(_target) {
return [...specialKeys, THROW_ON_COPY];
},
has(_target, key) {
return specialKeys.includes(key);
},
getOwnPropertyDescriptor(_target, key) {
if (specialKeys.includes(key)) {
return {
configurable: true,
enumerable: true,
writable: false,
value: proxy[key]
};
}
if (ReactDevtools.isCalledInsideReactDevtools()) {
return {
configurable: true,
enumerable: false,
value: void 0
};
}
throw new Error("ProxyLens threw because you tried to access all property descriptors\u2014probably through `{ ...lens }` or `Object.assign({}, lens)`. Doing this will break the type safety offered by this library so it is forbidden. Sorry, buddy pal.");
},
getPrototypeOf() {
return null;
},
preventExtensions() {
return true;
},
isExtensible() {
return false;
},
set() {
throw new Error("Cannot set property on ProxyLens");
},
deleteProperty() {
throw new Error("Cannot delete property on ProxyLens");
return awaitable(() => result)();
}
});
return proxy;
}, "proxyLens");
};
}, "awaitable");

@@ -379,2 +508,5 @@ // src/subscription-graph.ts

this.keyPath = keyPath;
__publicField(this, "listeners", /* @__PURE__ */ new Set());
__publicField(this, "id");
__publicField(this, "ancestor");
this.id = id(keyPath);

@@ -387,5 +519,2 @@ if (keyPath.length === 0) {

}
listeners = /* @__PURE__ */ new Set();
id;
ancestor;
subscribe(listener) {

@@ -404,5 +533,7 @@ this.listeners.add(listener);

var SubscriptionGraph = class {
nodes = /* @__PURE__ */ new Map();
parents = /* @__PURE__ */ new Map();
children = /* @__PURE__ */ new Map();
constructor() {
__publicField(this, "nodes", /* @__PURE__ */ new Map());
__publicField(this, "parents", /* @__PURE__ */ new Map());
__publicField(this, "children", /* @__PURE__ */ new Map());
}
notify(keyPath) {

@@ -456,5 +587,4 @@ const nodeId = id(keyPath);

notifySelfAndChildren(node) {
var _a;
node.notify();
const children = (_a = this.children.get(node.id)) != null ? _a : /* @__PURE__ */ new Set();
const children = this.children.get(node.id) ?? /* @__PURE__ */ new Set();
for (const child of children) {

@@ -465,4 +595,3 @@ this.notifySelfAndChildren(child);

clean(node) {
var _a, _b;
const children = (_a = this.children.get(node.id)) != null ? _a : /* @__PURE__ */ new Set();
const children = this.children.get(node.id) ?? /* @__PURE__ */ new Set();
if (children.size > 0 || node.size > 0) {

@@ -476,3 +605,3 @@ return;

this.parents.delete(node.id);
const siblings = (_b = this.children.get(parent.id)) != null ? _b : /* @__PURE__ */ new Set();
const siblings = this.children.get(parent.id) ?? /* @__PURE__ */ new Set();
siblings.delete(node);

@@ -486,6 +615,9 @@ this.clean(parent);

// src/store.ts
var createStoreFactory = /* @__PURE__ */ __name((initialState) => {
var noop = /* @__PURE__ */ __name(() => {
}, "noop");
var createRootStoreFactory = /* @__PURE__ */ __name((initialState) => {
const graph = new SubscriptionGraph();
const focus = rootLensFocus();
let snapshot = initialState;
return ({ keyPath, lens }) => {
const factory = /* @__PURE__ */ __name(({ keyPath, lens }) => {
return {

@@ -495,22 +627,182 @@ getSnapshot() {

},
subscribe(listener) {
subscribe(listener = noop) {
return graph.subscribe(keyPath, listener);
},
update(updater) {
const prev = lens.get(snapshot);
const next = updater(prev);
if (Object.is(next, prev)) {
return;
}
setSnapshot(next) {
snapshot = lens.set(snapshot, next);
graph.notify(keyPath);
return true;
}
};
};
}, "createStoreFactory");
}, "factory");
return [factory, focus];
}, "createRootStoreFactory");
var noopBreakable = { connect() {
}, disconnect() {
} };
var createConnectionStoreFactory = /* @__PURE__ */ __name((storeFactory, connFocus, input) => {
const cacheKey = `connection([${keyPathToString(connFocus.keyPath)}], ${JSON.stringify(input ?? {})})`;
const cacheKeyFocus = focusToCache(connFocus, cacheKey);
const rootStore = storeFactory(connFocus);
const cacheEntryStore = storeFactory(cacheKeyFocus);
const getBreakable = awaitable(() => {
try {
const conn = rootStore.getSnapshot();
if (isConnection(conn)) {
return insert(conn, cacheEntryStore, input, cacheKey);
} else {
return noopBreakable;
}
} catch (err) {
if (err instanceof Promise) {
return err.then(getBreakable);
}
throw err;
}
});
const breaker = new Breaker(() => {
let connected = true;
let prevConn = noopBreakable;
getBreakable().then((conn) => {
if (connected) {
conn.connect();
}
prevConn = conn;
});
const unsubscribe = rootStore.subscribe(() => {
getBreakable().then((nextConn) => {
if (nextConn !== prevConn) {
prevConn.disconnect();
prevConn = nextConn;
if (connected) {
nextConn.connect();
}
}
});
});
return () => {
connected = false;
prevConn.disconnect();
unsubscribe();
};
});
let currentSubscribers = 0;
const connectionStoreFactory = /* @__PURE__ */ __name((refinedFocus) => {
const store = storeFactory(refinedFocus);
return {
...store,
subscribe(listener) {
const unsubscribe = store.subscribe(listener);
currentSubscribers += 1;
breaker.connect();
return () => {
unsubscribe();
currentSubscribers = Math.max(currentSubscribers - 1, 0);
if (currentSubscribers <= 0) {
breaker.disconnect();
}
};
}
};
}, "connectionStoreFactory");
return [connectionStoreFactory, cacheKeyFocus];
}, "createConnectionStoreFactory");
// src/proxy-lens.ts
var THROW_ON_COPY = Symbol();
var specialKeys = ["use", "getStore", "$key"];
var functionTrapKeys = ["arguments", "caller", "prototype"];
var proxyLens = /* @__PURE__ */ __name((storeFactory, focus) => {
let keyCache;
let connectionCache;
let $key;
let use;
let getStore;
const proxy = new Proxy(function() {
}, {
apply(_target, _thisArg, argsArray) {
const connCache = connectionCache ?? (connectionCache = {});
const [input] = argsArray;
const cacheKey = JSON.stringify(input);
let next = connCache[cacheKey];
if (!next) {
const [nextFactory, nextFocus] = createConnectionStoreFactory(storeFactory, focus, input);
next = connCache[cacheKey] = proxyLens(nextFactory, nextFocus);
}
return next;
},
get(_target, key) {
if (key === "$$typeof") {
return void 0;
}
if (key === "$key") {
$key ?? ($key = keyPathToString(focus.keyPath));
return $key;
}
if (key === "use") {
use ?? (use = createUseLens(proxy));
return use;
}
if (key === "getStore") {
getStore ?? (getStore = () => storeFactory(focus));
return getStore;
}
keyCache ?? (keyCache = {});
if (keyCache[key] === void 0) {
const nextFocus = refineLensFocus(focus, [key]);
const nextProxy = proxyLens(storeFactory, nextFocus);
keyCache[key] = nextProxy;
}
return keyCache[key];
},
ownKeys(_target) {
return [...specialKeys, ...functionTrapKeys, THROW_ON_COPY];
},
has(_target, key) {
return specialKeys.includes(key);
},
getOwnPropertyDescriptor(target, key) {
if (specialKeys.includes(key)) {
return {
configurable: true,
enumerable: true,
writable: false,
value: proxy[key]
};
}
if (functionTrapKeys.includes(key)) {
return Reflect.getOwnPropertyDescriptor(target, key);
}
if (ReactDevtools.isCalledInsideReactDevtools()) {
return {
configurable: true,
enumerable: false,
value: void 0
};
}
throw new Error("ProxyLens threw because you tried to access all property descriptors\u2014probably through `{ ...lens }` or `Object.assign({}, lens)`. Doing this will break the type safety offered by this library so it is forbidden. Sorry, buddy pal.");
},
getPrototypeOf() {
return null;
},
preventExtensions() {
return true;
},
isExtensible() {
return false;
},
set() {
throw new Error("Cannot set property on ProxyLens");
},
deleteProperty() {
throw new Error("Cannot delete property on ProxyLens");
}
});
return proxy;
}, "proxyLens");
// src/create-lens.ts
var createLens = /* @__PURE__ */ __name((initialState) => {
const factory = createStoreFactory(initialState);
return proxyLens(factory);
const [factory, focus] = createRootStoreFactory(initialState);
return proxyLens(factory, focus);
}, "createLens");

@@ -520,2 +812,3 @@ module.exports = __toCommonJS(src_exports);

0 && (module.exports = {
connection,
createLens,

@@ -522,0 +815,0 @@ useCreateLens

2

package.json
{
"name": "concave",
"version": "0.1.0",
"version": "0.2.0",
"description": "Lens-like state management (for React)",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

186

README.md

@@ -16,3 +16,3 @@ <p align="center">

- [From Selectors](#from-selectors)
- [A lens is just a "getter" and "setter" pair that are "refined" together](#a-lens-is-just-a-getter-and-setter-pair-that-are-refined-together)
- [Now kiss!](#now-kiss)
- [Looking recursively](#looking-recursively)

@@ -28,3 +28,6 @@ - [Installation](#installation)

- [Store](#store)
- [connection](#connection)
- [Connection](#connection)
- [useCreateLens](#usecreatelens)
- [Use without TypeScript](#use-without-typescript)

@@ -35,3 +38,3 @@ <!-- END doctoc generated TOC please keep comment here to allow auto update -->

Concave is a state management library. Concave is not a general purpose state management library. It is intended for highly interactive UIs where the shape of the state is recursive and/or closely reflects the shape of the UI. Specifically, Concave is an strong candidate for page/form/diagram builder-type applications (written in React).
Concave is not a general purpose state management library. It is intended for highly interactive UIs where the shape of the state is recursive and/or closely reflects the shape of the UI. Specifically, Concave is an strong candidate for page/form/diagram builder-type applications (written in React).

@@ -125,21 +128,23 @@ ### Why use Concave?

<>
{/* When creating a new TODO, append it to the list of existing todos. */}
<NewTodoForm onCreate={(todo) => updateTodos((prev) => [...prev, todo])} />
{incomplete.map((todo) => {
/**
* Tranform data back into `Lens<Todo>`.
*/
const lens = todo.toLens();
return (
<>
{/* When creating a new TODO, append it to the list of existing todos. */}
<NewTodoForm onCreate={(todo) => updateTodos((prev) => [...prev, todo])} />
{incomplete.map((todo) => {
/**
* Tranform data back into `Lens<Todo>`.
*/
const lens = todo.toLens();
/**
* Render using the unique `lens.$key` as the key.
*/
return <Todo state={lens} key={lens.$key} />;
})}
{complete.map((todo) => {
const lens = todo.toLens();
return <Todo state={lens} key={lens.$key} />;
})}
</>;
/**
* Render using the unique `lens.$key` as the key.
*/
return <Todo state={lens} key={lens.$key} />;
})}
{complete.map((todo) => {
const lens = todo.toLens();
return <Todo state={lens} key={lens.$key} />;
})}
</>
);
});

@@ -192,3 +197,3 @@ ```

In Redux, state applications occur through dispatching actions. Lets consider how could look with explicit "setters" (... "setlectors"? :troll:).
In Redux, state updates occur through dispatching actions. Lets consider how could look with explicit "setters" (... "setlectors"? :trollface:).

@@ -221,5 +226,5 @@ ```ts

### A lens is just a "getter" and "setter" pair that are "refined" together
### Now kiss!
In the most basic sense, a lens is a getter and setter pair where their refinements are explicitly coupled to each other. Starting from the global state, each refinement _focuses_ in on a smaller piece of data—which is why they are called lenses.
In the most basic sense, a lens is just a getter and setter pair where their refinements are explicitly coupled to each other. When we define a way to get the user's name, lets also define the way to set it. Starting from the global state, each refinement _focuses_ in on a smaller piece of data—which is why they are called lenses.

@@ -416,4 +421,5 @@ Lets start by writing a basic lens for the entire state.

*/
accountStore.update((account) => {
return { ...account, email };
accountStore.setSnapshot({
...accountStore.getSnapshot(),
email,
});

@@ -616,5 +622,5 @@ ```

getSnapshot(): A;
setSnapshot(next: A): void;
subscribe(listener: Listener): Unsubscribe;
update((current: A) => A): void;
}
};

@@ -625,4 +631,124 @@ type Listener = () => void;

Returned by `lens.getStore()`. Mostly useful outside of the React component life cycle.
Returned by `lens.getStore()`. Used to make imperative operations easy to do. Get and set the data directly as well as subscribe to updates.
Stores are used by [`connection`](#connection) to allow for complex async behaviors directly in the lens. As such, calling `getSnapshot()` on a store belonging to a connection before it has received at least one value will throw a Promise.
### connection
```ts
declare function connection<A, I>(create: (store: Store<A>, input: I) => Unsubscribe | void): Connection<A, I>;
```
A connection takes a `create` callback that receives a [`Store<A>`](#store) and some input `I`. Connections can be embedded inside a monolithic `Lens<S>` and following the protocol for [React Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html) so that accessing data inside the connection is written as if it is synchronous.
```ts
const timer = connection<number, { startTime: number; interval: number }>((store, input) => {
/**
* This store is identical to any other store.
*/
store.setSnapshot(input.startTime);
const intervalId = setInterval(() => {
const prev = store.getSnapshot();
store.setSnapshot(prev + 1);
}, input.interval);
return () => {
clearInterval(intervalId);
};
});
const state = {
// ...
count: timer,
};
export const lens = createLens(state);
```
And then in a component, the connection can be collapsed into a lens given some input.
```tsx
type Props = {
state: Lens<{ count: Connection<number, number> }>;
};
const App = (props: Props) => {
/**
* As part of the lens, `count` is a function that takes the input for the connection
* and returns a new lens.
*/
const [count, updateCount] = props.state.count({ startTime: 10, interval: 1000 }).use();
// ...
};
```
`count` and `updateCount` work exactly as they would for any other lens, meaning that you could, for example, subtract 20 seconds off of the timer by calling `updateCount(prev => prev - 20)`.
Connections only automatically share state _if_ they exist at the same keyPath _and_ the same input. The input is serialized as a key with `JSON.stringify`, so changing the order of keys or including extraneous values will create a new cached value.
Furthermore, `connection` can store any value. Walking that value, even if there is no data yet, happens with the `Lens` as if the data is already present.
```tsx
type Props = {
/**
* Imagine we have a lens with the following
*/
state: Lens<{
me: {
/**
* This `Connection` does not have a second type variable because it doesn't take any input
*/
profile: Connection<{
account: {
emailPreferences: {
subscribed: boolean;
};
};
}>;
};
}>;
};
export const EmailPreferencesApp = (props: Props) => {
const [subscribed, setSubscribed] = props.state.me.profile().account.emailPreferences.subscribed.use();
// ...
};
```
This component `EmailPreferencesApp` will be suspended until the profile connection has resolved a value. The connection itself might look something like this.
```ts
type Profile = {
account: {
emailPreferences: {
subscribed: boolean;
};
};
};
const profile = connection<Profile, void>((store) => {
fetch("/profile")
.then((resp) => resp.json())
.then((data) => {
store.setSnapshot(data);
});
});
```
:warning: Calling `.use()` on a connection—for example, `props.state.me.profile.use()` will return the raw `Connection` which you should not attempt to replace or write to. It is a special object with magical powers, so just don't. :warning:
### Connection
```ts
type Connection<A, I = void> = {};
```
The type returned by `connection`. It is useless outside of the library internals, but necessary for typing your state/lens.
- `A`: The data kept inside of the store.
- `I`: The input data provided to the store.
### useCreateLens

@@ -635,1 +761,5 @@

A convenience wrapper that memoizes a call to `createLens`. If passed a function, it will call it once when creating the `Lens<S>`.
## Use without TypeScript
This library relies heavily on the meta-programming capabilities afforded by TypeScript + Proxy. I really do not recommend using this without TypeScript. It's 2021. Why aren't you writing TypeScript, bud?
dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet