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

@bikeshaving/crank

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@bikeshaving/crank - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

umd/src/dom.d.ts
umd/src/html.d.ts
umd/src/index.d.ts

7

cjs/dom.d.ts
import { Children, Context, ElementValue, Renderer, TagProps } from "./index";
declare module "index" {
declare module "./index" {
interface EventMap extends GlobalEventHandlersEventMap {
}
}
declare class DOMRenderer extends Renderer<Node, string | undefined> {
export declare class DOMRenderer extends Renderer<Node, string | undefined> {
render(children: Children, root: Node, ctx?: Context): Promise<ElementValue<Node>> | ElementValue<Node>;

@@ -14,3 +14,2 @@ parse(text: string): DocumentFragment;

}
declare const renderer: DOMRenderer;
export { DOMRenderer, renderer };
export declare const renderer: DOMRenderer;

0

cjs/dom.js

@@ -0,0 +0,0 @@ 'use strict';

8

cjs/html.d.ts
import { ElementValue, Renderer } from "./index";
declare module "index" {
declare module "./index" {
interface EventMap extends GlobalEventHandlersEventMap {

@@ -9,3 +9,3 @@ }

}
declare class StringRenderer extends Renderer<Node | string, undefined, unknown, string> {
export declare class StringRenderer extends Renderer<Node | string, undefined, unknown, string> {
create(): Node;

@@ -16,3 +16,3 @@ escape(text: string): string;

}
declare const renderer: StringRenderer;
export { StringRenderer, renderer };
export declare const renderer: StringRenderer;
export {};

0

cjs/html.js

@@ -0,0 +0,0 @@ 'use strict';

236

cjs/index.d.ts

@@ -7,3 +7,3 @@ /**

*/
type Tag = string | symbol | Component;
export declare type Tag = string | symbol | Component;
/**

@@ -14,3 +14,3 @@ * Maps the tag of an element to its expected props.

*/
type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : unknown;
export declare type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : unknown;
/***

@@ -26,4 +26,4 @@ * SPECIAL TAGS

*/
declare const Fragment = "";
type Fragment = typeof Fragment;
export declare const Fragment = "";
export declare type Fragment = typeof Fragment;
/**

@@ -35,4 +35,4 @@ * A special element tag for creating a new element subtree with a different root, passed via the root prop.

*/
declare const Portal: any;
type Portal = typeof Portal;
export declare const Portal: any;
export declare type Portal = typeof Portal;
/**

@@ -44,4 +44,4 @@ * A special element tag which copies whatever child appeared previously in the element’s position.

*/
declare const Copy: any;
type Copy = typeof Copy;
export declare const Copy: any;
export declare type Copy = typeof Copy;
/**

@@ -53,4 +53,4 @@ * A special element tag for injecting raw nodes into an element tree via its value prop.

*/
declare const Raw: any;
type Raw = typeof Raw;
export declare const Raw: any;
export declare type Raw = typeof Raw;
/**

@@ -62,3 +62,3 @@ * Describes all valid singular values of an element tree.

*/
type Child = Element | string | number | boolean | null | undefined;
export declare type Child = Element | string | number | boolean | null | undefined;
interface ChildIterable extends Iterable<Child | ChildIterable> {

@@ -69,3 +69,3 @@ }

*/
type Children = Child | ChildIterable;
export declare type Children = Child | ChildIterable;
/**

@@ -79,8 +79,8 @@ * Represents all functions which can be used as a component.

*/
type Component<TProps = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
export declare type Component<TProps = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
/**
* All nodes in the element tree are narrowed from the union in Child to NarrowedChild. This greatly simplifies element diffing.
*/
type NarrowedChild = Element | string | undefined;
type Key = unknown;
declare type NarrowedChild = Element | string | undefined;
declare type Key = unknown;
declare const ElementSymbol: unique symbol;

@@ -105,4 +105,15 @@ /**

*/
declare class Element<TTag extends Tag = Tag> {
export declare class Element<TTag extends Tag = Tag> {
/**
* @internal
* A unique symbol to identify elements as elements across versions and realms, and to protect against basic injection attacks.
* https://overreacted.io/why-do-react-elements-have-typeof-property/
*/
$$typeof: typeof ElementSymbol;
/**
* @internal
* flags - A bitmask. See ELEMENT FLAGS.
*/
_f: number;
/**
* The tag of the element. Can be a function, string or symbol depending on the kind of element.

@@ -134,11 +145,13 @@ */

* @internal
* A unique symbol to identify elements as elements across versions and realms, and to protect against basic injection attacks.
* https://overreacted.io/why-do-react-elements-have-typeof-property/
* children - The rendered children of the element.
*/
$$typeof: typeof ElementSymbol;
_ch: Array<NarrowedChild> | NarrowedChild;
/**
* @internal
* flags - A bitmask. See ELEMENT FLAGS.
* node - The node associated with the element.
*
* @remarks
* Set by Renderer.prototype.create when the component is mounted. This property will only be set for host elements.
*/
_f: number;
_n: any;
/**

@@ -154,15 +167,2 @@ * @internal

* @internal
* children - The rendered children of the element.
*/
_ch: Array<NarrowedChild> | NarrowedChild;
/**
* @internal
* node - The node associated with the element.
*
* @remarks
* Set by Renderer.prototype.create when the component is mounted. This property will only be set for host elements.
*/
_n: any;
/**
* @internal
* fallback - The value of the element while it has never committed.

@@ -189,3 +189,3 @@ *

}
declare function isElement(value: any): value is Element;
export declare function isElement(value: any): value is Element;
/**

@@ -197,3 +197,4 @@ * Creates an element with the specified tag, props and children.

*/
declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, children?: unknown): Element<TTag>;
/**

@@ -205,3 +206,3 @@ * Clones a given element.

*/
declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
/*** ELEMENT VALUE UTILITIES ***/

@@ -216,3 +217,3 @@ /**

*/
type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
export declare type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
/**

@@ -226,3 +227,3 @@ * An abstract class which is subclassed to render to different target environments. This class is responsible for kicking off the rendering process, caching previous trees by root, and creating/mutating/disposing the nodes of the target environment.

*/
declare class Renderer<TNode, TScope, TRoot = TNode, TResult = ElementValue<TNode>> {
export declare class Renderer<TNode, TScope, TRoot = TNode, TResult = ElementValue<TNode>> {
/**

@@ -243,11 +244,2 @@ * @internal

*/
/**
* Renders an element tree into a specific root.
*
* @param children - An element tree. You can render null with a previously used root to delete the previously rendered element tree from the cache.
* @param root - The node to be rendered into. The renderer will cache element trees per root.
* @param ctx - An optional context that will be the ancestor context of all elements in the tree. Useful for connecting renderers which call each other so that events/provisions properly propagate. The context for a given root must be the same or an error will be thrown.
*
* @returns The read result of rendering the children, or a possible promise of the read result if the element tree renders asynchronously.
*/
render(children: Children, root?: TRoot | undefined, ctx?: Context | undefined): Promise<TResult> | TResult;

@@ -264,12 +256,2 @@ /**

*/
/**
* Called when an element’s value is exposed via render, schedule, refresh, refs, or generator yield expressions.
*
* @param value - The value of the element being read. Can be a node, a string, undefined, or an array of nodes and strings, depending on the element.
* @returns Varies according to the specific renderer subclass. By default, it exposes the element’s value.
*
* @remarks
* This is useful for renderers which don’t want to expose their internal nodes. For instance, the HTML renderer will convert all internal nodes to strings.
*
*/
read(value: ElementValue<TNode>): TResult;

@@ -291,17 +273,2 @@ /**

*/
/**
* Called in a preorder traversal for each host element.
*
* @remarks
* Useful for passing data down the element tree. For instance, the DOM renderer uses this method to keep track of whether we’re in an SVG subtree.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param scope - The current scope.
*
* @returns The scope to be passed to create and patch for child host elements.
*
* @remarks
* This method sets the scope for child host elements, not the current host element.
*/
scope<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, scope: TScope | undefined): TScope;

@@ -319,13 +286,2 @@ /**

*/
/**
* Called for each string in an element tree.
*
* @param text - The string child.
* @param scope - The current scope.
*
* @returns The escaped string.
*
* @remarks
* Rather than returning text nodes for whatever environment we’re rendering to, we defer that step for Renderer.prototype.arrange. We do this so that adjacent strings can be concatenated and the actual element tree can be rendered in a normalized form.
*/
escape(text: string, _scope: TScope): string;

@@ -340,10 +296,2 @@ /**

*/
/**
* Called for each Raw element whose value prop is a string.
*
* @param text - The string child.
* @param scope - The current scope.
*
* @returns The parsed node or string.
*/
parse(text: string, _scope: TScope): TNode | string;

@@ -359,11 +307,2 @@ /**

*/
/**
* Called for each host element when it is committed for the first time.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param scope - The current scope.
*
* @returns A “node” which determines the value of the host element.
*/
create<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _scope: TScope): TNode;

@@ -383,15 +322,2 @@ /**

*/
/**
* Called for each host element when it is committed.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
* @param scope - The current scope.
*
* @returns The return value is ignored.
*
* @remarks
* Used to mutate the node associated with an element when new props are passed.
*/
patch<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _node: TNode, _scope: TScope | undefined): unknown;

@@ -411,16 +337,2 @@ /**

*/
// TODO: pass hints into arrange about where the dirty children start and end
/**
* Called for each host element after its children have committed with the actual values of the children.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
* @param children - An array of nodes and strings from child elements.
*
* @returns The return value is ignored.
*
* @remarks
* This method is also called by child components contexts as the last step of a refresh.
*/
arrange<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _parent: TNode | TRoot, _children: Array<TNode | string>): unknown;

@@ -436,12 +348,2 @@ /**

*/
// TODO: remove(): a method which is called to remove a child from a parent to optimize arrange
/**
* Called for each host element when it is unmounted.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
*
* @returns The return value is ignored.
*/
dispose<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _node: TNode): unknown;

@@ -455,9 +357,2 @@ /**

*/
/**
* Called at the end of the rendering process for each root of the tree.
*
* @param root - The root prop passed to portals or the render method.
*
* @returns The return value is ignored.
*/
complete(_root: TRoot): unknown;

@@ -468,7 +363,7 @@ }

*/
interface EventMap {
export interface EventMap {
[type: string]: Event;
}
type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
declare type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
declare type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
handleEvent: MappedEventListener<T>;

@@ -485,3 +380,3 @@ };

*/
interface ProvisionMap {
export interface ProvisionMap {
}

@@ -493,3 +388,3 @@ /**

*/
declare class Context<TProps = any, TResult = any> implements EventTarget {
export declare class Context<TProps = any, TResult = any> implements EventTarget {
/**

@@ -507,12 +402,2 @@ * @internal

* @internal
* el - The associated component element.
*/
_el: Element<Component>;
/**
* @internal
* parent - The parent context.
*/
_pa: Context<unknown, TResult> | undefined;
/**
* @internal
* root - The root node set by an ancestor’s Portal prop.

@@ -530,2 +415,7 @@ */

* @internal
* parent - The parent context.
*/
_pa: Context<unknown, TResult> | undefined;
/**
* @internal
* scope - The value of the scope at the point of element’s creation.

@@ -536,2 +426,7 @@ */

* @internal
* el - The associated component element.
*/
_el: Element<Component>;
/**
* @internal
* iterator - The iterator returned by the component function.

@@ -588,8 +483,7 @@ */

*/
/**
* @internal
*/
constructor(renderer: Renderer<unknown, unknown, unknown, TResult>, root: unknown, host: Element<string | symbol>, parent: Context<unknown, TResult> | undefined, scope: unknown, el: Element<Component>);
get<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
get(key: unknown): any;
set<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
set(key: unknown, value: any): void;
/**

@@ -619,10 +513,2 @@ * The current props of the associated element.

*/
/**
* Re-executes the component.
*
* @returns The rendered value of the component or a promise of the rendered value if the component or its children execute asynchronously.
*
* @remarks
* The refresh method works a little differently for async generator components, in that it will resume the Context async iterator rather than resuming execution. This is because async generator components are perpetually resumed independent of updates/refresh.
*/
refresh(): Promise<TResult> | TResult;

@@ -632,5 +518,2 @@ /**

*/
/**
* Registers a callback which fires when the component commits. Will only fire once per callback and update.
*/
schedule(callback: (value: TResult) => unknown): void;

@@ -640,5 +523,2 @@ /**

*/
/**
* Registers a callback which fires when the component unmounts. Will only fire once per callback.
*/
cleanup(callback: (value: TResult) => unknown): void;

@@ -659,2 +539,2 @@ addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;

}
export { Tag, TagProps, Fragment, Portal, Copy, Raw, Child, Children, Component, Element, isElement, createElement, cloneElement, ElementValue, Renderer, EventMap, ProvisionMap, Context };
export {};

30

cjs/index.js

@@ -7,3 +7,3 @@ 'use strict';

function wrap(value) {
return !value ? [] : Array.isArray(value) ? value : [value];
return value === undefined ? [] : Array.isArray(value) ? value : [value];
}

@@ -108,2 +108,5 @@ function unwrap(arr) {

this.ref = ref;
this._ch = undefined;
this._n = undefined;
this._ctx = undefined;
}

@@ -217,3 +220,3 @@ }

}
else if (typeof child === "object") {
else if (typeof child !== "undefined") {
values.push(getValue(child));

@@ -266,3 +269,3 @@ }

}
if (!portal) {
if (portal === undefined) {
portal = createElement(Portal, { children, root });

@@ -568,3 +571,3 @@ portal._ctx = ctx;

}
if (typeof newKey === "undefined") {
if (newKey === undefined) {
while (oldChild !== undefined && oldKey !== undefined) {

@@ -744,9 +747,9 @@ i++;

el._f |= Committed;
if (el.ref) {
if (typeof el.ref === "function") {
el.ref(renderer.read(value));
}
if (el._inf) {
if (typeof el._inf !== "undefined") {
el._inf = undefined;
}
if (el._fb) {
if (typeof el._fb !== "undefined") {
el._fb = undefined;

@@ -1329,3 +1332,2 @@ }

if (isPromiseLike(value)) {
// Because
return [value.catch(() => { }), value];

@@ -1354,3 +1356,5 @@ }

function handleChildError(ctx, err) {
if (ctx._f & Finished || !ctx._it || typeof ctx._it.throw !== "function") {
if (ctx._f & Finished ||
typeof ctx._it !== "object" ||
typeof ctx._it.throw !== "function") {
throw err;

@@ -1383,3 +1387,3 @@ }

ctx._f & Finished ||
!ctx._it ||
typeof ctx._it !== "object" ||
typeof ctx._it.throw !== "function") {

@@ -1460,3 +1464,3 @@ throw err;

ctx._f &= ~Updating;
if (!!ctx._ss && ctx._ss.size > 0) {
if (typeof ctx._ss === "object" && ctx._ss.size > 0) {
// NOTE: We have to clear the set of callbacks before calling them, because a callback which refreshes the component would otherwise cause a stack overflow.

@@ -1475,3 +1479,3 @@ const callbacks = Array.from(ctx._ss);

clearEventListeners(ctx);
if (ctx._cs) {
if (typeof ctx._cs === "object") {
const value = ctx._re.read(getValue(ctx._el));

@@ -1486,3 +1490,3 @@ for (const cleanup of ctx._cs) {

resume(ctx);
if (!!ctx._it && typeof ctx._it.return === "function") {
if (typeof ctx._it === "object" && typeof ctx._it.return === "function") {
let iteration;

@@ -1489,0 +1493,0 @@ try {

7

dom.d.ts
import { Children, Context, ElementValue, Renderer, TagProps } from "./index";
declare module "index" {
declare module "./index" {
interface EventMap extends GlobalEventHandlersEventMap {
}
}
declare class DOMRenderer extends Renderer<Node, string | undefined> {
export declare class DOMRenderer extends Renderer<Node, string | undefined> {
render(children: Children, root: Node, ctx?: Context): Promise<ElementValue<Node>> | ElementValue<Node>;

@@ -14,3 +14,2 @@ parse(text: string): DocumentFragment;

}
declare const renderer: DOMRenderer;
export { DOMRenderer, renderer };
export declare const renderer: DOMRenderer;

0

dom.js

@@ -0,0 +0,0 @@ import { Renderer, Portal } from './index.js';

8

html.d.ts
import { ElementValue, Renderer } from "./index";
declare module "index" {
declare module "./index" {
interface EventMap extends GlobalEventHandlersEventMap {

@@ -9,3 +9,3 @@ }

}
declare class StringRenderer extends Renderer<Node | string, undefined, unknown, string> {
export declare class StringRenderer extends Renderer<Node | string, undefined, unknown, string> {
create(): Node;

@@ -16,3 +16,3 @@ escape(text: string): string;

}
declare const renderer: StringRenderer;
export { StringRenderer, renderer };
export declare const renderer: StringRenderer;
export {};

0

html.js

@@ -0,0 +0,0 @@ import { Renderer, Portal } from './index.js';

236

index.d.ts

@@ -7,3 +7,3 @@ /**

*/
type Tag = string | symbol | Component;
export declare type Tag = string | symbol | Component;
/**

@@ -14,3 +14,3 @@ * Maps the tag of an element to its expected props.

*/
type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : unknown;
export declare type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : unknown;
/***

@@ -26,4 +26,4 @@ * SPECIAL TAGS

*/
declare const Fragment = "";
type Fragment = typeof Fragment;
export declare const Fragment = "";
export declare type Fragment = typeof Fragment;
/**

@@ -35,4 +35,4 @@ * A special element tag for creating a new element subtree with a different root, passed via the root prop.

*/
declare const Portal: any;
type Portal = typeof Portal;
export declare const Portal: any;
export declare type Portal = typeof Portal;
/**

@@ -44,4 +44,4 @@ * A special element tag which copies whatever child appeared previously in the element’s position.

*/
declare const Copy: any;
type Copy = typeof Copy;
export declare const Copy: any;
export declare type Copy = typeof Copy;
/**

@@ -53,4 +53,4 @@ * A special element tag for injecting raw nodes into an element tree via its value prop.

*/
declare const Raw: any;
type Raw = typeof Raw;
export declare const Raw: any;
export declare type Raw = typeof Raw;
/**

@@ -62,3 +62,3 @@ * Describes all valid singular values of an element tree.

*/
type Child = Element | string | number | boolean | null | undefined;
export declare type Child = Element | string | number | boolean | null | undefined;
interface ChildIterable extends Iterable<Child | ChildIterable> {

@@ -69,3 +69,3 @@ }

*/
type Children = Child | ChildIterable;
export declare type Children = Child | ChildIterable;
/**

@@ -79,8 +79,8 @@ * Represents all functions which can be used as a component.

*/
type Component<TProps = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
export declare type Component<TProps = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
/**
* All nodes in the element tree are narrowed from the union in Child to NarrowedChild. This greatly simplifies element diffing.
*/
type NarrowedChild = Element | string | undefined;
type Key = unknown;
declare type NarrowedChild = Element | string | undefined;
declare type Key = unknown;
declare const ElementSymbol: unique symbol;

@@ -105,4 +105,15 @@ /**

*/
declare class Element<TTag extends Tag = Tag> {
export declare class Element<TTag extends Tag = Tag> {
/**
* @internal
* A unique symbol to identify elements as elements across versions and realms, and to protect against basic injection attacks.
* https://overreacted.io/why-do-react-elements-have-typeof-property/
*/
$$typeof: typeof ElementSymbol;
/**
* @internal
* flags - A bitmask. See ELEMENT FLAGS.
*/
_f: number;
/**
* The tag of the element. Can be a function, string or symbol depending on the kind of element.

@@ -134,11 +145,13 @@ */

* @internal
* A unique symbol to identify elements as elements across versions and realms, and to protect against basic injection attacks.
* https://overreacted.io/why-do-react-elements-have-typeof-property/
* children - The rendered children of the element.
*/
$$typeof: typeof ElementSymbol;
_ch: Array<NarrowedChild> | NarrowedChild;
/**
* @internal
* flags - A bitmask. See ELEMENT FLAGS.
* node - The node associated with the element.
*
* @remarks
* Set by Renderer.prototype.create when the component is mounted. This property will only be set for host elements.
*/
_f: number;
_n: any;
/**

@@ -154,15 +167,2 @@ * @internal

* @internal
* children - The rendered children of the element.
*/
_ch: Array<NarrowedChild> | NarrowedChild;
/**
* @internal
* node - The node associated with the element.
*
* @remarks
* Set by Renderer.prototype.create when the component is mounted. This property will only be set for host elements.
*/
_n: any;
/**
* @internal
* fallback - The value of the element while it has never committed.

@@ -189,3 +189,3 @@ *

}
declare function isElement(value: any): value is Element;
export declare function isElement(value: any): value is Element;
/**

@@ -197,3 +197,4 @@ * Creates an element with the specified tag, props and children.

*/
declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, children?: unknown): Element<TTag>;
/**

@@ -205,3 +206,3 @@ * Clones a given element.

*/
declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
/*** ELEMENT VALUE UTILITIES ***/

@@ -216,3 +217,3 @@ /**

*/
type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
export declare type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
/**

@@ -226,3 +227,3 @@ * An abstract class which is subclassed to render to different target environments. This class is responsible for kicking off the rendering process, caching previous trees by root, and creating/mutating/disposing the nodes of the target environment.

*/
declare class Renderer<TNode, TScope, TRoot = TNode, TResult = ElementValue<TNode>> {
export declare class Renderer<TNode, TScope, TRoot = TNode, TResult = ElementValue<TNode>> {
/**

@@ -243,11 +244,2 @@ * @internal

*/
/**
* Renders an element tree into a specific root.
*
* @param children - An element tree. You can render null with a previously used root to delete the previously rendered element tree from the cache.
* @param root - The node to be rendered into. The renderer will cache element trees per root.
* @param ctx - An optional context that will be the ancestor context of all elements in the tree. Useful for connecting renderers which call each other so that events/provisions properly propagate. The context for a given root must be the same or an error will be thrown.
*
* @returns The read result of rendering the children, or a possible promise of the read result if the element tree renders asynchronously.
*/
render(children: Children, root?: TRoot | undefined, ctx?: Context | undefined): Promise<TResult> | TResult;

@@ -264,12 +256,2 @@ /**

*/
/**
* Called when an element’s value is exposed via render, schedule, refresh, refs, or generator yield expressions.
*
* @param value - The value of the element being read. Can be a node, a string, undefined, or an array of nodes and strings, depending on the element.
* @returns Varies according to the specific renderer subclass. By default, it exposes the element’s value.
*
* @remarks
* This is useful for renderers which don’t want to expose their internal nodes. For instance, the HTML renderer will convert all internal nodes to strings.
*
*/
read(value: ElementValue<TNode>): TResult;

@@ -291,17 +273,2 @@ /**

*/
/**
* Called in a preorder traversal for each host element.
*
* @remarks
* Useful for passing data down the element tree. For instance, the DOM renderer uses this method to keep track of whether we’re in an SVG subtree.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param scope - The current scope.
*
* @returns The scope to be passed to create and patch for child host elements.
*
* @remarks
* This method sets the scope for child host elements, not the current host element.
*/
scope<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, scope: TScope | undefined): TScope;

@@ -319,13 +286,2 @@ /**

*/
/**
* Called for each string in an element tree.
*
* @param text - The string child.
* @param scope - The current scope.
*
* @returns The escaped string.
*
* @remarks
* Rather than returning text nodes for whatever environment we’re rendering to, we defer that step for Renderer.prototype.arrange. We do this so that adjacent strings can be concatenated and the actual element tree can be rendered in a normalized form.
*/
escape(text: string, _scope: TScope): string;

@@ -340,10 +296,2 @@ /**

*/
/**
* Called for each Raw element whose value prop is a string.
*
* @param text - The string child.
* @param scope - The current scope.
*
* @returns The parsed node or string.
*/
parse(text: string, _scope: TScope): TNode | string;

@@ -359,11 +307,2 @@ /**

*/
/**
* Called for each host element when it is committed for the first time.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param scope - The current scope.
*
* @returns A “node” which determines the value of the host element.
*/
create<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _scope: TScope): TNode;

@@ -383,15 +322,2 @@ /**

*/
/**
* Called for each host element when it is committed.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
* @param scope - The current scope.
*
* @returns The return value is ignored.
*
* @remarks
* Used to mutate the node associated with an element when new props are passed.
*/
patch<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _node: TNode, _scope: TScope | undefined): unknown;

@@ -411,16 +337,2 @@ /**

*/
// TODO: pass hints into arrange about where the dirty children start and end
/**
* Called for each host element after its children have committed with the actual values of the children.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
* @param children - An array of nodes and strings from child elements.
*
* @returns The return value is ignored.
*
* @remarks
* This method is also called by child components contexts as the last step of a refresh.
*/
arrange<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _parent: TNode | TRoot, _children: Array<TNode | string>): unknown;

@@ -436,12 +348,2 @@ /**

*/
// TODO: remove(): a method which is called to remove a child from a parent to optimize arrange
/**
* Called for each host element when it is unmounted.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
*
* @returns The return value is ignored.
*/
dispose<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _node: TNode): unknown;

@@ -455,9 +357,2 @@ /**

*/
/**
* Called at the end of the rendering process for each root of the tree.
*
* @param root - The root prop passed to portals or the render method.
*
* @returns The return value is ignored.
*/
complete(_root: TRoot): unknown;

@@ -468,7 +363,7 @@ }

*/
interface EventMap {
export interface EventMap {
[type: string]: Event;
}
type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
declare type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
declare type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
handleEvent: MappedEventListener<T>;

@@ -485,3 +380,3 @@ };

*/
interface ProvisionMap {
export interface ProvisionMap {
}

@@ -493,3 +388,3 @@ /**

*/
declare class Context<TProps = any, TResult = any> implements EventTarget {
export declare class Context<TProps = any, TResult = any> implements EventTarget {
/**

@@ -507,12 +402,2 @@ * @internal

* @internal
* el - The associated component element.
*/
_el: Element<Component>;
/**
* @internal
* parent - The parent context.
*/
_pa: Context<unknown, TResult> | undefined;
/**
* @internal
* root - The root node set by an ancestor’s Portal prop.

@@ -530,2 +415,7 @@ */

* @internal
* parent - The parent context.
*/
_pa: Context<unknown, TResult> | undefined;
/**
* @internal
* scope - The value of the scope at the point of element’s creation.

@@ -536,2 +426,7 @@ */

* @internal
* el - The associated component element.
*/
_el: Element<Component>;
/**
* @internal
* iterator - The iterator returned by the component function.

@@ -588,8 +483,7 @@ */

*/
/**
* @internal
*/
constructor(renderer: Renderer<unknown, unknown, unknown, TResult>, root: unknown, host: Element<string | symbol>, parent: Context<unknown, TResult> | undefined, scope: unknown, el: Element<Component>);
get<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
get(key: unknown): any;
set<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
set(key: unknown, value: any): void;
/**

@@ -619,10 +513,2 @@ * The current props of the associated element.

*/
/**
* Re-executes the component.
*
* @returns The rendered value of the component or a promise of the rendered value if the component or its children execute asynchronously.
*
* @remarks
* The refresh method works a little differently for async generator components, in that it will resume the Context async iterator rather than resuming execution. This is because async generator components are perpetually resumed independent of updates/refresh.
*/
refresh(): Promise<TResult> | TResult;

@@ -632,5 +518,2 @@ /**

*/
/**
* Registers a callback which fires when the component commits. Will only fire once per callback and update.
*/
schedule(callback: (value: TResult) => unknown): void;

@@ -640,5 +523,2 @@ /**

*/
/**
* Registers a callback which fires when the component unmounts. Will only fire once per callback.
*/
cleanup(callback: (value: TResult) => unknown): void;

@@ -659,2 +539,2 @@ addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;

}
export { Tag, TagProps, Fragment, Portal, Copy, Raw, Child, Children, Component, Element, isElement, createElement, cloneElement, ElementValue, Renderer, EventMap, ProvisionMap, Context };
export {};

30

index.js
/*** UTILITIES ***/
function wrap(value) {
return !value ? [] : Array.isArray(value) ? value : [value];
return value === undefined ? [] : Array.isArray(value) ? value : [value];
}

@@ -103,2 +103,5 @@ function unwrap(arr) {

this.ref = ref;
this._ch = undefined;
this._n = undefined;
this._ctx = undefined;
}

@@ -212,3 +215,3 @@ }

}
else if (typeof child === "object") {
else if (typeof child !== "undefined") {
values.push(getValue(child));

@@ -261,3 +264,3 @@ }

}
if (!portal) {
if (portal === undefined) {
portal = createElement(Portal, { children, root });

@@ -563,3 +566,3 @@ portal._ctx = ctx;

}
if (typeof newKey === "undefined") {
if (newKey === undefined) {
while (oldChild !== undefined && oldKey !== undefined) {

@@ -739,9 +742,9 @@ i++;

el._f |= Committed;
if (el.ref) {
if (typeof el.ref === "function") {
el.ref(renderer.read(value));
}
if (el._inf) {
if (typeof el._inf !== "undefined") {
el._inf = undefined;
}
if (el._fb) {
if (typeof el._fb !== "undefined") {
el._fb = undefined;

@@ -1324,3 +1327,2 @@ }

if (isPromiseLike(value)) {
// Because
return [value.catch(() => { }), value];

@@ -1349,3 +1351,5 @@ }

function handleChildError(ctx, err) {
if (ctx._f & Finished || !ctx._it || typeof ctx._it.throw !== "function") {
if (ctx._f & Finished ||
typeof ctx._it !== "object" ||
typeof ctx._it.throw !== "function") {
throw err;

@@ -1378,3 +1382,3 @@ }

ctx._f & Finished ||
!ctx._it ||
typeof ctx._it !== "object" ||
typeof ctx._it.throw !== "function") {

@@ -1455,3 +1459,3 @@ throw err;

ctx._f &= ~Updating;
if (!!ctx._ss && ctx._ss.size > 0) {
if (typeof ctx._ss === "object" && ctx._ss.size > 0) {
// NOTE: We have to clear the set of callbacks before calling them, because a callback which refreshes the component would otherwise cause a stack overflow.

@@ -1470,3 +1474,3 @@ const callbacks = Array.from(ctx._ss);

clearEventListeners(ctx);
if (ctx._cs) {
if (typeof ctx._cs === "object") {
const value = ctx._re.read(getValue(ctx._el));

@@ -1481,3 +1485,3 @@ for (const cleanup of ctx._cs) {

resume(ctx);
if (!!ctx._it && typeof ctx._it.return === "function") {
if (typeof ctx._it === "object" && typeof ctx._it.return === "function") {
let iteration;

@@ -1484,0 +1488,0 @@ try {

4

package.json
{
"name": "@bikeshaving/crank",
"version": "0.2.0",
"version": "0.2.1",
"description": "Write JSX-driven components with functions, promises and generators.",

@@ -111,3 +111,2 @@ "homepage": "https://crank.js.org",

"@typescript-eslint/parser": "^3.5.0",
"@wessberg/rollup-plugin-ts": "^1.2.27",
"core-js": "^3.6.5",

@@ -124,2 +123,3 @@ "eslint": "^7.3.1",

"rollup": "^2.18.1",
"rollup-plugin-typescript2": "^0.27.1",
"shx": "^0.3.2",

@@ -126,0 +126,0 @@ "ts-jest": "^26.1.1",

636

umd/umd.d.ts

@@ -1,633 +0,3 @@

/**
* Represents all valid values which can be used for the tag of an element.
*
* @remarks
* Elements whose tags are strings or symbols are called “host” or “intrinsic” elements, and their behavior is determined by the renderer, while elements whose tags are components are called “component” elements, and their behavior is determined by the execution of the component.
*/
type Tag = string | symbol | Component; /**
* Maps the tag of an element to its expected props.
*
* @typeparam TTag - The element’s tag.
*/
/**
* Maps the tag of an element to its expected props.
*
* @typeparam TTag - The element’s tag.
*/
type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : unknown; /***
* SPECIAL TAGS
* Crank provides a couple tags which have special meaning for the renderer.
***/
/**
* A special element tag for grouping multiple children within a parent.
*
* @remarks
* All iterables which appear in the element tree are implicitly wrapped in fragments. The Fragment tag is just the empty string, and you can use the empty string in createElement calls/transpiler options to avoid having to reference the Fragment export directly.
*/
/***
* SPECIAL TAGS
* Crank provides a couple tags which have special meaning for the renderer.
***/
/**
* A special element tag for grouping multiple children within a parent.
*
* @remarks
* All iterables which appear in the element tree are implicitly wrapped in fragments. The Fragment tag is just the empty string, and you can use the empty string in createElement calls/transpiler options to avoid having to reference the Fragment export directly.
*/
declare const Fragment = "";
type Fragment = typeof Fragment; // NOTE: We assert the following symbol tags to be any because typescript support for symbol tags in JSX does not exist yet.
// https://github.com/microsoft/TypeScript/issues/38367
/**
* A special element tag for creating a new element subtree with a different root, passed via the root prop.
*
* @remarks
* This element tag is useful for creating element trees with multiple roots. Renderer.prototype.render will implicitly wrap the children which have been passed in in an implicit Portal element.
*/
// NOTE: We assert the following symbol tags to be any because typescript support for symbol tags in JSX does not exist yet.
// https://github.com/microsoft/TypeScript/issues/38367
/**
* A special element tag for creating a new element subtree with a different root, passed via the root prop.
*
* @remarks
* This element tag is useful for creating element trees with multiple roots. Renderer.prototype.render will implicitly wrap the children which have been passed in in an implicit Portal element.
*/
declare const Portal: any;
type Portal = typeof Portal; /**
* A special element tag which copies whatever child appeared previously in the element’s position.
*
* @remarks
* Copy elements are useful when you want to prevent a subtree from updating as a performance optimization.
*/
/**
* A special element tag which copies whatever child appeared previously in the element’s position.
*
* @remarks
* Copy elements are useful when you want to prevent a subtree from updating as a performance optimization.
*/
declare const Copy: any;
type Copy = typeof Copy; /**
* A special element tag for injecting raw nodes into an element tree via its value prop.
*
* @remarks
* If the value prop is a string, Renderer.prototype.parse will be called on the string and the element’s rendered value will be the result.
*/
/**
* A special element tag for injecting raw nodes into an element tree via its value prop.
*
* @remarks
* If the value prop is a string, Renderer.prototype.parse will be called on the string and the element’s rendered value will be the result.
*/
declare const Raw: any;
type Raw = typeof Raw; /**
* Describes all valid singular values of an element tree.
*
* @remarks
* Arbitrary objects can also be safely rendered but they will be converted to a string using the toString method. We exclude them from this type to catch potential type errors.
*/
/**
* Describes all valid singular values of an element tree.
*
* @remarks
* Arbitrary objects can also be safely rendered but they will be converted to a string using the toString method. We exclude them from this type to catch potential type errors.
*/
type Child = Element | string | number | boolean | null | undefined; // NOTE: we use a recursive interface rather than making the Children type directly recursive because recursive type aliases were only added in TypeScript 3.7.
// NOTE: we use a recursive interface rather than making the Children type directly recursive because recursive type aliases were only added in TypeScript 3.7.
interface ChildIterable extends Iterable<Child | ChildIterable> {
} /**
* Describes all valid values of an element tree, including arbitrarily nested iterables of such values.
*/
/**
* Describes all valid values of an element tree, including arbitrarily nested iterables of such values.
*/
type Children = Child | ChildIterable; /**
* Represents all functions which can be used as a component.
*
* @typeparam TProps - The expected props for the component.
*
* @remarks
* The return type of iterator objects returned from components has to be void because typescript will infer most generators as having a void return type.
*/
/**
* Represents all functions which can be used as a component.
*
* @typeparam TProps - The expected props for the component.
*
* @remarks
* The return type of iterator objects returned from components has to be void because typescript will infer most generators as having a void return type.
*/
type Component<TProps = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>; // WHAT ARE WE DOING TO THE CHILDREN???
/**
* All nodes in the element tree are narrowed from the union in Child to NarrowedChild. This greatly simplifies element diffing.
*/
// WHAT ARE WE DOING TO THE CHILDREN???
/**
* All nodes in the element tree are narrowed from the union in Child to NarrowedChild. This greatly simplifies element diffing.
*/
type NarrowedChild = Element | string | undefined;
type Key = unknown;
declare const ElementSymbol: unique symbol; /*** ELEMENT FLAGS ***/
/**
* A flag which is set when the component has been mounted. Used mainly to detect whether an element is being reused so that it can be cloned.
*/
/*** ELEMENT FLAGS ***/
/**
* A flag which is set when the component has been mounted. Used mainly to detect whether an element is being reused so that it can be cloned.
*/
/*** ELEMENT FLAGS ***/
/**
* A flag which is set when the component has been mounted. Used mainly to detect whether an element is being reused so that it can be cloned.
*/
// NOTE: To save on filesize, we mangle the internal properties of Crank classes by hand. These internal properties are prefixed with an underscore. Refer to their definitions to see their unabbreviated names.
// NOTE: to maximize compatibility between Crank versions, starting with 0.2.0, the $$typeof property and the non-internal properties will not be changed, and any change to these properties will be considered a breaking change. This is to ensure maximum compatibility between components which use different Crank versions.
/**
* Elements are the basic building blocks of Crank applications. They are JavaScript objects which are interpreted by special classes called renderers to produce and manage stateful nodes.
*
* @typeparam TTag - the type of the tag of the element.
*
* @example
* // specific element types
* let div: Element<"div">;
* let portal: Element<Portal>;
* let myEl: Element<MyComponent>;
*
* // general element types
* let host: Element<string | symbol>;
* let component: Element<Component>;
*
* @remarks
* Typically, you use the createElement function to create elements and not this class directly.
*/
declare class Element<TTag extends Tag = Tag> {
/**
* The tag of the element. Can be a function, string or symbol depending on the kind of element.
*/
tag: TTag;
/**
* An object containing the “properties” of an element. These correspond to the attributes of the element when using JSX syntax.
*
* @remarks
* The props of an object are passed to most renderer host methods, and as the first argument to components.
*/
props: TagProps<TTag>;
/**
* A value which uniquely identifies an element from its siblings so that it can be added/updated/moved/removed by the identity of the key rather than its position within the parent.
*
* @remarks
* Passed to the element as the prop "crank-key".
*/
key: Key;
/**
* A callback which is called with the element’s value when the value is committed.
*
* @remarks
* Passed to the element as the prop "crank-ref".
*/
ref: Function | undefined;
/**
* @internal
* A unique symbol to identify elements as elements across versions and realms, and to protect against basic injection attacks.
* https://overreacted.io/why-do-react-elements-have-typeof-property/
*/
$$typeof: typeof ElementSymbol;
/**
* @internal
* flags - A bitmask. See ELEMENT FLAGS.
*/
_f: number;
/**
* @internal
* context - The Context object associated with this element.
*
* @remarks
* Created and assigned by the Renderer for component elements when it mounts the element tree.
*/
_ctx: Context<TagProps<TTag>> | undefined;
/**
* @internal
* children - The rendered children of the element.
*/
_ch: Array<NarrowedChild> | NarrowedChild;
/**
* @internal
* node - The node associated with the element.
*
* @remarks
* Set by Renderer.prototype.create when the component is mounted. This property will only be set for host elements.
*/
_n: any;
/**
* @internal
* fallback - The value of the element while it has never committed.
*
* @remarks
* If an element takes place of a previously rendered value but renders asynchronously, this property is set to the previously rendered value until the element commits. This allows asynchronously updating element trees to show something while pending.
*/
_fb: any;
/**
* @internal
* inflightPromise - The current pending async run of the element.
*
* @remarks
* This value is used to make sure element copies do not fulfill immediately, to set the fallback of the next element when the previous element commits, and as the yield value of async generator components with async children. It is unset when the element is committed.
*/
_inf: Promise<any> | undefined;
/**
* @internal
* onNewValues - the resolve function of a promise which represents the next child result. See the chase function for more info.
*/
_onv: Function | undefined;
constructor(tag: TTag, props: TagProps<TTag>, key: Key, ref: Function | undefined);
}
declare function isElement(value: any): value is Element; /**
* Creates an element with the specified tag, props and children.
*
* @remarks
* This function is usually used as a transpilation target for JSX transpilers, but it can also be called directly. It additionally extracts the crank-key and crank-ref props so they aren’t accessible to the renderer methods or components, and assigns the children prop according to the remaining arguments passed to the function.
*/
/**
* Creates an element with the specified tag, props and children.
*
* @remarks
* This function is usually used as a transpilation target for JSX transpilers, but it can also be called directly. It additionally extracts the crank-key and crank-ref props so they aren’t accessible to the renderer methods or components, and assigns the children prop according to the remaining arguments passed to the function.
*/
declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
/**
* Clones a given element.
*
* @remarks
* Mainly used internally to make sure we don’t accidentally reuse elements in an element tree, because elements are directly mutated by the renderer.
*/
declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>; /*** ELEMENT VALUE UTILITIES ***/
/**
* A helper type which repesents all the possible rendered values of an element.
*
* @typeparam TNode - The node type for the element assigned by the renderer.
*
* @remarks
* When asking the question, what is the value of a specific element, the answer varies depending on the type of the element. For host or Raw elements, the answer is simply the nodes (DOM nodes in the case of the DOM renderer) created for the element. For fragments, the values are usually an array of nodes. For portals, the value is undefined, because a Portal element’s root and children are opaque to parents. For components, the value can be any of the above, because the value of a component is determined by its children. Rendered values can also be strings or arrays of nodes and strings, in the case of a component or fragment with strings for children. All of these possible values are reflected in this utility type.
*/
type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined; /**
* Takes an array of element values and normalizes the output as an array of nodes and strings.
*
* @remarks
* Normalize will flatten only one level of nested arrays, because it is designed to be called once at each level of the tree. It will also concatenate adjacent strings and remove all undefineds.
*/
/**
* Takes an array of element values and normalizes the output as an array of nodes and strings.
*
* @remarks
* Normalize will flatten only one level of nested arrays, because it is designed to be called once at each level of the tree. It will also concatenate adjacent strings and remove all undefineds.
*/
/**
* Takes an array of element values and normalizes the output as an array of nodes and strings.
*
* @remarks
* Normalize will flatten only one level of nested arrays, because it is designed to be called once at each level of the tree. It will also concatenate adjacent strings and remove all undefineds.
*/
declare class Renderer<TNode, TScope, TRoot = TNode, TResult = ElementValue<TNode>> {
/**
* @internal
* A weakmap which stores element trees by root.
*/
_cache: WeakMap<object, Element<Portal>>;
constructor();
/**
* Renders an element tree into a specific root.
*
* @param children - An element tree. You can render null with a previously used root to delete the previously rendered element tree from the cache.
* @param root - The node to be rendered into. The renderer will cache element trees per root.
* @param ctx - An optional context that will be the ancestor context of all elements in the tree. Useful for connecting renderers which call each other so that events/provisions properly propagate. The context for a given root must be the same or an error will be thrown.
*
* @returns The read result of rendering the children, or a possible promise of the read result if the element tree renders asynchronously.
*/
render(children: Children, root?: TRoot | undefined, ctx?: Context | undefined): Promise<TResult> | TResult;
/**
* Called when an element’s value is exposed via render, schedule, refresh, refs, or generator yield expressions.
*
* @param value - The value of the element being read. Can be a node, a string, undefined, or an array of nodes and strings, depending on the element.
* @returns Varies according to the specific renderer subclass. By default, it exposes the element’s value.
*
* @remarks
* This is useful for renderers which don’t want to expose their internal nodes. For instance, the HTML renderer will convert all internal nodes to strings.
*
*/
read(value: ElementValue<TNode>): TResult;
/**
* Called in a preorder traversal for each host element.
*
* @remarks
* Useful for passing data down the element tree. For instance, the DOM renderer uses this method to keep track of whether we’re in an SVG subtree.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param scope - The current scope.
*
* @returns The scope to be passed to create and patch for child host elements.
*
* @remarks
* This method sets the scope for child host elements, not the current host element.
*/
scope<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, scope: TScope | undefined): TScope;
/**
* Called for each string in an element tree.
*
* @param text - The string child.
* @param scope - The current scope.
*
* @returns The escaped string.
*
* @remarks
* Rather than returning text nodes for whatever environment we’re rendering to, we defer that step for Renderer.prototype.arrange. We do this so that adjacent strings can be concatenated and the actual element tree can be rendered in a normalized form.
*/
escape(text: string, _scope: TScope): string;
/**
* Called for each Raw element whose value prop is a string.
*
* @param text - The string child.
* @param scope - The current scope.
*
* @returns The parsed node or string.
*/
parse(text: string, _scope: TScope): TNode | string;
/**
* Called for each host element when it is committed for the first time.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param scope - The current scope.
*
* @returns A “node” which determines the value of the host element.
*/
create<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _scope: TScope): TNode;
/**
* Called for each host element when it is committed.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
* @param scope - The current scope.
*
* @returns The return value is ignored.
*
* @remarks
* Used to mutate the node associated with an element when new props are passed.
*/
patch<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _node: TNode, _scope: TScope | undefined): unknown;
// TODO: pass hints into arrange about where the dirty children start and end
/**
* Called for each host element after its children have committed with the actual values of the children.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
* @param children - An array of nodes and strings from child elements.
*
* @returns The return value is ignored.
*
* @remarks
* This method is also called by child components contexts as the last step of a refresh.
*/
arrange<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _parent: TNode | TRoot, _children: Array<TNode | string>): unknown;
// TODO: remove(): a method which is called to remove a child from a parent to optimize arrange
/**
* Called for each host element when it is unmounted.
*
* @param tag - The tag of the host element.
* @param props - The props of the host element.
* @param node - The node associated with the host element.
*
* @returns The return value is ignored.
*/
dispose<TTag extends string | symbol>(_tag: TTag, _props: TagProps<TTag>, _node: TNode): unknown;
/**
* Called at the end of the rendering process for each root of the tree.
*
* @param root - The root prop passed to portals or the render method.
*
* @returns The return value is ignored.
*/
complete(_root: TRoot): unknown;
} /*** PRIVATE RENDERER FUNCTIONS ***/
// NOTE: to aid in the mangling of this module, we use functions rather than methods for internal logic.
/*** PRIVATE RENDERER FUNCTIONS ***/
// NOTE: to aid in the mangling of this module, we use functions rather than methods for internal logic.
/*** PRIVATE RENDERER FUNCTIONS ***/
// NOTE: to aid in the mangling of this module, we use functions rather than methods for internal logic.
/**
* A map of event type strings to Event subclasses. Can be extended via TypeScript module augmentation to have strongly typed event listeners.
*/
interface EventMap {
[type: string]: Event;
}
type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
handleEvent: MappedEventListener<T>;
};
interface EventListenerRecord {
type: string;
listener: MappedEventListenerOrEventListenerObject<any>;
callback: MappedEventListener<any>;
options: AddEventListenerOptions;
}
interface ProvisionMap {
} // CONTEXT FLAGS
/**
* A flag which is set when the component is being updated by the parent and cleared when the component has committed. Used to determine whether the nearest host ancestor needs to be rearranged.
*/
// CONTEXT FLAGS
/**
* A flag which is set when the component is being updated by the parent and cleared when the component has committed. Used to determine whether the nearest host ancestor needs to be rearranged.
*/
// CONTEXT FLAGS
/**
* A flag which is set when the component is being updated by the parent and cleared when the component has committed. Used to determine whether the nearest host ancestor needs to be rearranged.
*/
declare class Context<TProps = any, TResult = any> implements EventTarget {
/**
* @internal
* flags - A bitmask. See CONTEXT FLAGS above.
*/
_f: number;
/**
* @internal
* renderer - The renderer which created this context.
*/
_re: Renderer<unknown, unknown, unknown, TResult>;
/**
* @internal
* el - The associated component element.
*/
_el: Element<Component>;
/**
* @internal
* parent - The parent context.
*/
_pa: Context<unknown, TResult> | undefined;
/**
* @internal
* root - The root node set by an ancestor’s Portal prop.
*/
_rt: unknown;
/**
* @internal
* host - The nearest ancestor host element.
* @remarks
* When refresh is called, the host element will be arranged as the last step of the commit, to make sure the parent’s children properly reflects the components’s children.
*/
_ho: Element<string | symbol>;
/**
* @internal
* scope - The value of the scope at the point of element’s creation.
*/
_sc: unknown;
/**
* @internal
* iterator - The iterator returned by the component function.
*/
_it: Iterator<Children, Children | void, unknown> | AsyncIterator<Children, Children | void, unknown> | undefined;
/**
* @internal
* onProps - A callback used in conjunction with the Available flag to implement the props async iterator. See the Symbol.asyncIterator method and the resume function.
*/
_op: ((props: any) => unknown) | undefined;
// See the run/step/advance functions for more notes on inflight/enqueued pending/value.
/**
* @internal
* inflightPending
*/
_ip: Promise<unknown> | undefined;
/**
* @internal
* inflightValue
*/
_iv: Promise<ElementValue<any>> | undefined;
/**
* @internal
* enqueuedPending
*/
_ep: Promise<unknown> | undefined;
/**
* @internal
* enqueuedValue
*/
_ev: Promise<ElementValue<any>> | undefined;
/**
* @internal
* listeners - An array of event listeners added to the context via Context.prototype.addEventListener
*/
_ls: Array<EventListenerRecord> | undefined;
/**
* @internal
* provisions - A map of values which can be set via Context.prototype.set and read from child contexts via Context.prototype.get
*/
_ps: Map<unknown, unknown> | undefined;
/**
* @internal
* schedules - a set of callbacks registered via Context.prototype.schedule, which fire when the component has committed.
*/
_ss: Set<(value: TResult) => unknown> | undefined;
/**
* @internal
* cleanups - a set of callbacks registered via Context.prototype.cleanup, which fire when the component has unmounted.
*/
_cs: Set<(value: TResult) => unknown> | undefined;
/**
* @internal
*/
constructor(renderer: Renderer<unknown, unknown, unknown, TResult>, root: unknown, host: Element<string | symbol>, parent: Context<unknown, TResult> | undefined, scope: unknown, el: Element<Component>);
get<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
set<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
/**
* The current props of the associated element.
*
* @remarks
* Typically, you should read props either via the first parameter of the component or via the context iterator methods. This property is mainly for plugins or utilities which wrap contexts.
*/
get props(): TProps;
/**
* The current value of the associated element.
*
* @remarks
* Typically, you should read values via refs, generator yield expressions, or the refresh, schedule or cleanup methods. This property is mainly for plugins or utilities which wrap contexts.
*/
get value(): TResult;
[Symbol.iterator](): Generator<TProps>;
[Symbol.asyncIterator](): AsyncGenerator<TProps>;
/**
* Re-executes the component.
*
* @returns The rendered value of the component or a promise of the rendered value if the component or its children execute asynchronously.
*
* @remarks
* The refresh method works a little differently for async generator components, in that it will resume the Context async iterator rather than resuming execution. This is because async generator components are perpetually resumed independent of updates/refresh.
*/
refresh(): Promise<TResult> | TResult;
/**
* Registers a callback which fires when the component commits. Will only fire once per callback and update.
*/
schedule(callback: (value: TResult) => unknown): void;
/**
* Registers a callback which fires when the component unmounts. Will only fire once per callback.
*/
cleanup(callback: (value: TResult) => unknown): void;
addEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: boolean | AddEventListenerOptions): void;
removeEventListener<T extends string>(type: T, listener: MappedEventListenerOrEventListenerObject<T> | null, options?: EventListenerOptions | boolean): void;
dispatchEvent(ev: Event): boolean;
} /*** PRIVATE CONTEXT FUNCTIONS ***/
/**
* Called to make props available to the Context async iterator for async generator components.
*/
/*** PRIVATE CONTEXT FUNCTIONS ***/
/**
* Called to make props available to the Context async iterator for async generator components.
*/
/*** PRIVATE CONTEXT FUNCTIONS ***/
/**
* Called to make props available to the Context async iterator for async generator components.
*/
// TODO: uncomment and use in the Element interface below
// type CrankElement = Element;
declare global {
module JSX {
// TODO: JSX Element type (the result of JSX expressions) don’t work because TypeScript demands that all Components return JSX elements for some reason.
// interface Element extends CrankElement {}
interface IntrinsicElements {
[tag: string]: any;
}
interface ElementChildrenAttribute {
children: {};
}
}
}
declare namespace dom {
module "src/index" {
interface EventMap extends GlobalEventHandlersEventMap {
}
}
class DOMRenderer extends Renderer<Node, string | undefined> {
render(children: Children, root: Node, ctx?: Context): Promise<ElementValue<Node>> | ElementValue<Node>;
parse(text: string): DocumentFragment;
scope(tag: string | symbol, props: Record<string, any>, scope: string | undefined): string | undefined;
create<TTag extends string | symbol>(tag: TTag, props: Record<string, any>, ns: string | undefined): Node;
patch<TTag extends string | symbol>(tag: TTag, props: TagProps<TTag>, el: Element, ns: string | undefined): void;
arrange<TTag extends string | symbol>(tag: TTag, props: Record<string, any>, parent: Node, children: Array<Node | string>): void;
}
const renderer: DOMRenderer;
}
declare namespace html {
module "src/index" {
interface EventMap extends GlobalEventHandlersEventMap {
}
}
interface Node {
value: string;
}
class StringRenderer extends Renderer<Node | string, undefined, unknown, string> {
create(): Node;
escape(text: string): string;
read(value: ElementValue<Node>): string;
arrange(tag: any, props: Record<string, any>, node: Node, children: Array<Node | string>): void;
}
const renderer: StringRenderer;
}
export { Tag, TagProps, Fragment, Portal, Copy, Raw, Child, Children, Component, Element, isElement, createElement, cloneElement, ElementValue, Renderer, EventMap, ProvisionMap, Context, dom, html };
export * from "./src/index";
export * as dom from "./src/dom";
export * as html from "./src/html";
cjs/dom.js.map

Sorry, the diff of this file is not supported yet

cjs/html.js.map

Sorry, the diff of this file is not supported yet

cjs/index.js.map

Sorry, the diff of this file is not supported yet

dom.js.map

Sorry, the diff of this file is not supported yet

html.js.map

Sorry, the diff of this file is not supported yet

index.js.map

Sorry, the diff of this file is not supported yet

umd/umd.js

Sorry, the diff of this file is too big to display

umd/umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc