@b9g/crank - npm Package Compare versions

Comparing version 0.5.0-beta.6 to 0.5.0-beta.7

crank.d.ts

@@ -1,2 +0,486 @@
-export * from "./core.js";
-export * from "./tags.js";
+/**
+ * A type which represents all valid values for an element tag.
+ */
+export type Tag = string | symbol | Component;
+/**
+ * A helper type to map the tag of an element to its expected props.
+ *
+ * @template TTag - The tag associated with the props. Can be a string, symbol
+ * or a component function.
+ */
+export type TagProps<TTag extends Tag> = TTag extends string ? JSX.IntrinsicElements[TTag] : TTag extends Component<infer TProps> ? TProps : Record<string, unknown>;
+/***
+ * SPECIAL TAGS
+ *
+ * Crank provides a couple tags which have special meaning for the renderer.
+ ***/
+/**
+ * A special tag for grouping multiple children within the same parent.
+ *
+ * All non-string iterables which appear in the element tree are implicitly
+ * wrapped in a fragment element.
+ *
+ * This tag is just the empty string, and you can use the empty string in
+ * createElement calls or transpiler options directly to avoid having to
+ * reference this export.
+ */
+export declare const Fragment = "";
+export type Fragment = typeof Fragment;
+/**
+ * A special tag for rendering into a new root node via a root prop.
+ *
+ * This tag is useful for creating element trees with multiple roots, for
+ * things like modals or tooltips.
+ *
+ * Renderer.prototype.render() will implicitly wrap top-level element trees in
+ * a Portal element.
+ */
+export declare const Portal: any;
+export type Portal = typeof Portal;
+/**
+ * A special tag which preserves whatever was previously rendered in the
+ * element’s position.
+ *
+ * Copy elements are useful for when you want to prevent a subtree from
+ * rerendering as a performance optimization. Copy elements can also be keyed,
+ * in which case the previously rendered keyed element will be copied.
+ */
+export declare const Copy: any;
+export type Copy = typeof Copy;
+/**
+ * A special tag for injecting raw nodes or strings via a value prop.
+ *
+ * Renderer.prototype.raw() is called with the value prop.
+ */
+export declare const Raw: any;
+export type Raw = typeof Raw;
+/**
+ * Describes all valid values of an element tree, excluding iterables.
+ *
+ * Arbitrary objects can also be safely rendered, but will be converted to a
+ * string using the toString() method. We exclude them from this type to catch
+ * potential mistakes.
+ */
+export type Child = Element | string | number | boolean | null | undefined;
+/**
+ * An arbitrarily nested iterable of Child values.
+ *
+ * We use a recursive interface here rather than making the Children type
+ * directly recursive because recursive type aliases were added in TypeScript
+ * 3.7.
+ *
+ * You should avoid referencing this type directly, as it is mainly exported to
+ * prevent TypeScript errors.
+ */
+export interface ChildIterable extends Iterable<Child | ChildIterable> {
+}
+/**
+ * Describes all valid values of an element tree, including arbitrarily nested
+ * iterables of such values.
+ */
+export type Children = Child | ChildIterable;
+/**
+ * Represents all functions which can be used as a component.
+ *
+ * @template [TProps=*] - The expected props for the component.
+ */
+export type Component<TProps extends Record<string, unknown> = any> = (this: Context<TProps>, props: TProps) => Children | PromiseLike<Children> | Iterator<Children, Children | void, any> | AsyncIterator<Children, Children | void, any>;
+/**
+ * A type to keep track of keys. Any value can be a key, though null and
+ * undefined are ignored.
+ */
+type Key = unknown;
+declare const ElementSymbol: unique symbol;
+export interface 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/
+     *
+     * This property is defined on the element prototype rather than per
+     * instance, because it is the same for every Element.
+     */
+    $$typeof: typeof ElementSymbol;
+    /**
+     * The tag of the element. Can be a string, symbol or function.
+     */
+    tag: TTag;
+    /**
+     * An object containing the “properties” of an element. These correspond to
+     * the attribute syntax from JSX.
+     */
+    props: TagProps<TTag>;
+    /**
+     * A value which uniquely identifies an element from its siblings so that it
+     * can be added/updated/moved/removed by key rather than position.
+     *
+     * Passed in createElement() as the prop "c-key".
+     */
+    key: Key;
+    /**
+     * A callback which is called with the element’s result when it is committed.
+     *
+     * Passed in createElement() as the prop "c-ref".
+     */
+    ref: ((value: unknown) => unknown) | undefined;
+    /**
+     * A possible boolean which indicates that element should NOT be rerendered.
+     * If the element has never been rendered, this property has no effect.
+     *
+     * Passed in createElement() as the prop "c-static".
+     */
+    static_: boolean | undefined;
+}
+/**
+ * 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.
+ *
+ * @template {Tag} [TTag=Tag] - 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>;
+ *
+ * Typically, you use a helper function like createElement to create elements
+ * rather than instatiating this class directly.
+ */
+export declare class Element<TTag extends Tag = Tag> {
+    constructor(tag: TTag, props: TagProps<TTag>, key: Key, ref?: ((value: unknown) => unknown) | undefined, static_?: boolean | undefined);
+}
+export declare function isElement(value: any): value is Element;
+/**
+ * Creates an element with the specified tag, props and children.
+ *
+ * This function is usually used as a transpilation target for JSX transpilers,
+ * but it can also be called directly. It additionally extracts special props so
+ * they aren’t accessible to renderer methods or components, and assigns the
+ * children prop according to any additional arguments passed to the function.
+ */
+export declare function createElement<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null | undefined, ...children: Array<unknown>): Element<TTag>;
+/** Clones a given element, shallowly copying the props object. */
+export declare function cloneElement<TTag extends Tag>(el: Element<TTag>): Element<TTag>;
+/**
+ * A helper type which repesents all possible rendered values of an element.
+ *
+ * @template TNode - The node type for the element provided by the renderer.
+ *
+ * When asking the question, what is the “value” of a specific element, the
+ * answer varies depending on the tag:
+ *
+ * For host elements, the value is the nodes created for the element.
+ *
+ * For fragments, the value is usually an array of nodes.
+ *
+ * For portals, the value is undefined, because a Portal element’s root and
+ * children are opaque to its parent.
+ *
+ * For components, the value can be any of the above, because the value of a
+ * component is determined by its immediate children.
+ *
+ * Rendered values can also be strings or arrays of nodes and strings, in the
+ * case of component or fragment elements with strings or multiple children.
+ *
+ * All of these possible values are reflected in this utility type.
+ */
+export type ElementValue<TNode> = Array<TNode | string> | TNode | string | undefined;
+/**
+ * @internal
+ * The internal nodes which are cached and diffed against new elements when
+ * rendering element trees.
+ */
+declare class Retainer<TNode> {
+    /**
+     * The element associated with this retainer.
+     */
+    el: Element;
+    /**
+     * The context associated with this element. Will only be defined for
+     * component elements.
+     */
+    ctx: ContextImpl<TNode> | undefined;
+    /**
+     * The retainer children of this element. Retainers form a tree which mirrors
+     * elements. Can be a single child or undefined as a memory optimization.
+     */
+    children: Array<RetainerChild<TNode>> | RetainerChild<TNode>;
+    /**
+     * The value associated with this element.
+     */
+    value: ElementValue<TNode>;
+    /**
+     * The cached child values of this element. Only host and component elements
+     * will use this property.
+     */
+    cachedChildValues: ElementValue<TNode>;
+    /**
+     * The child which this retainer replaces. This property is used when an
+     * async retainer tree replaces previously rendered elements, so that the
+     * previously rendered elements can remain visible until the async tree
+     * fulfills. Will be set to undefined once this subtree fully renders.
+     */
+    fallbackValue: RetainerChild<TNode>;
+    inflightValue: Promise<ElementValue<TNode>> | undefined;
+    onNextValues: Function | undefined;
+    constructor(el: Element);
+}
+/**
+ * The retainer equivalent of ElementValue
+ */
+type RetainerChild<TNode> = Retainer<TNode> | string | undefined;
+export interface HydrationData<TNode> {
+    props: Record<string, unknown>;
+    children: Array<TNode | string>;
+}
+export interface RendererImpl<TNode, TScope, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
+    scope<TTag extends string | symbol>(scope: TScope | undefined, tag: TTag, props: TagProps<TTag>): TScope | undefined;
+    create<TTag extends string | symbol>(tag: TTag, props: TagProps<TTag>, scope: TScope | undefined): TNode;
+    hydrate<TTag extends string | symbol>(tag: TTag, node: TNode | TRoot, props: TagProps<TTag>): HydrationData<TNode> | undefined;
+    /**
+     * Called when an element’s rendered 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.
+     *
+     * 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 for each string in an element tree.
+     *
+     * @param text - The string child.
+     * @param scope - The current scope.
+     *
+     * @returns A string to be passed to arrange.
+     *
+     * Rather than returning Text nodes as we would in the DOM case, for example,
+     * we delay 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 normalized form.
+     */
+    text(text: string, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): 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.
+     */
+    raw(value: string | TNode, scope: TScope | undefined, hydration: HydrationData<TNode> | undefined): ElementValue<TNode>;
+    patch<TTag extends string | symbol, TName extends string>(tag: TTag, node: TNode, name: TName, value: TagProps<TTag>[TName], oldValue: TagProps<TTag>[TName] | undefined, scope: TScope): unknown;
+    arrange<TTag extends string | symbol>(tag: TTag, node: TNode, props: TagProps<TTag>, children: Array<TNode | string>, oldProps: TagProps<TTag> | undefined, oldChildren: Array<TNode | string> | undefined): unknown;
+    dispose<TTag extends string | symbol>(tag: TTag, node: TNode, props: TagProps<TTag>): unknown;
+    flush(root: TRoot): unknown;
+}
+declare const _RendererImpl: unique symbol;
+/**
+ * An abstract class which is subclassed to render to different target
+ * environments. This class is responsible for kicking off the rendering
+ * process and caching previous trees by root.
+ *
+ * @template TNode - The type of the node for a rendering environment.
+ * @template TScope - Data which is passed down the tree.
+ * @template TRoot - The type of the root for a rendering environment.
+ * @template TResult - The type of exposed values.
+ */
+export declare class Renderer<TNode extends object = object, TScope = unknown, TRoot extends TNode = TNode, TResult = ElementValue<TNode>> {
+    /**
+     * @internal
+     * A weakmap which stores element trees by root.
+     */
+    cache: WeakMap<object, Retainer<TNode>>;
+    [_RendererImpl]: RendererImpl<TNode, TScope, TRoot, TResult>;
+    constructor(impl: Partial<RendererImpl<TNode, TScope, TRoot, TResult>>);
+    /**
+     * 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 bridge - An optional context that will be the ancestor context of all
+     * elements in the tree. Useful for connecting different renderers so that
+     * events/provisions properly propagate. The context for a given root must be
+     * the same or an error will be thrown.
+     *
+     * @returns The result of rendering the children, or a possible promise of
+     * the result if the element tree renders asynchronously.
+     */
+    render(children: Children, root?: TRoot | undefined, bridge?: Context | undefined): Promise<TResult> | TResult;
+    hydrate(children: Children, root: TRoot, bridge?: Context | undefined): Promise<TResult> | TResult;
+}
+export interface Context extends Crank.Context {
+}
+/**
+ * An interface which can be extended to provide strongly typed provisions.
+ * See Context.prototype.consume and Context.prototype.provide.
+ */
+export interface ProvisionMap extends Crank.ProvisionMap {
+}
+/**
+ * @internal
+ * The internal class which holds context data.
+ */
+declare class ContextImpl<TNode = unknown, TScope = unknown, TRoot extends TNode = TNode, TResult = unknown> {
+    /** A bitmask. See CONTEXT FLAGS above. */
+    f: number;
+    /** The actual context associated with this impl. */
+    owner: Context<unknown, TResult>;
+    /**
+     * The renderer which created this context.
+     */
+    renderer: RendererImpl<TNode, TScope, TRoot, TResult>;
+    /** The root node as set by the nearest ancestor portal. */
+    root: TRoot | undefined;
+    /**
+     * The nearest ancestor host or portal retainer.
+     *
+     * 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.
+     */
+    host: Retainer<TNode>;
+    /** The parent context impl. */
+    parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined;
+    /** The value of the scope at the point of element’s creation. */
+    scope: TScope | undefined;
+    /** The internal node associated with this context. */
+    ret: Retainer<TNode>;
+    /**
+     * The iterator returned by the component function.
+     *
+     * Existence of this property implies that the component is a generator
+     * component. It is deleted when a component is returned.
+     */
+    iterator: Iterator<Children, Children | void, unknown> | AsyncIterator<Children, Children | void, unknown> | undefined;
+    inflightBlock: Promise<unknown> | undefined;
+    inflightValue: Promise<ElementValue<TNode>> | undefined;
+    enqueuedBlock: Promise<unknown> | undefined;
+    enqueuedValue: Promise<ElementValue<TNode>> | undefined;
+    onProps: ((props: Record<string, any>) => unknown) | undefined;
+    onPropsRequested: Function | undefined;
+    constructor(renderer: RendererImpl<TNode, TScope, TRoot, TResult>, root: TRoot | undefined, host: Retainer<TNode>, parent: ContextImpl<TNode, TScope, TRoot, TResult> | undefined, scope: TScope | undefined, ret: Retainer<TNode>);
+}
+declare const _ContextImpl: unique symbol;
+type ComponentProps<T> = T extends (props: infer U) => any ? U : T;
+/**
+ * A class which is instantiated and passed to every component as its this
+ * value. Contexts form a tree just like elements and all components in the
+ * element tree are connected via contexts. Components can use this tree to
+ * communicate data upwards via events and downwards via provisions.
+ *
+ * @template [TProps=*] - The expected shape of the props passed to the
+ * component. Used to strongly type the Context iterator methods.
+ * @template [TResult=*] - The readable element value type. It is used in
+ * places such as the return value of refresh and the argument passed to
+ * schedule and cleanup callbacks.
+ */
+export declare class Context<TProps = any, TResult = any> implements EventTarget {
+    /**
+     * @internal
+     */
+    [_ContextImpl]: ContextImpl<unknown, unknown, unknown, TResult>;
+    constructor(impl: ContextImpl<unknown, unknown, unknown, TResult>);
+    /**
+     * The current props of the associated element.
+     *
+     * 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(): ComponentProps<TProps>;
+    /**
+     * The current value of the associated element.
+     *
+     * Typically, you should read values via refs, generator yield expressions,
+     * or the refresh, schedule, cleanup, or flush methods. This property is
+     * mainly for plugins or utilities which wrap contexts.
+     */
+    get value(): TResult;
+    [Symbol.iterator](): Generator<ComponentProps<TProps>>;
+    [Symbol.asyncIterator](): AsyncGenerator<ComponentProps<TProps>>;
+    /**
+     * Re-executes a component.
+     *
+     * @returns The rendered value of the component or a promise thereof if the
+     * component or its children execute asynchronously.
+     *
+     * The refresh method works a little differently for async generator
+     * components, in that it will resume the Context’s props async iterator
+     * rather than resuming execution. This is because async generator components
+     * are perpetually resumed independent of updates, and rely on the props
+     * async iterator to suspend.
+     */
+    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’s children are
+     * rendered into the root. Will only fire once per callback and render.
+     */
+    flush(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;
+    consume<TKey extends keyof ProvisionMap>(key: TKey): ProvisionMap[TKey];
+    consume(key: unknown): any;
+    provide<TKey extends keyof ProvisionMap>(key: TKey, value: ProvisionMap[TKey]): void;
+    provide(key: unknown, value: any): 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;
+}
+/**
+ * A map of event type strings to Event subclasses. Can be extended via
+ * TypeScript module augmentation to have strongly typed event listeners.
+ */
+export interface EventMap extends Crank.EventMap {
+    [type: string]: Event;
+}
+type MappedEventListener<T extends string> = (ev: EventMap[T]) => unknown;
+type MappedEventListenerOrEventListenerObject<T extends string> = MappedEventListener<T> | {
+    handleEvent: MappedEventListener<T>;
+};
+declare global {
+    namespace Crank {
+        interface EventMap {
+        }
+        interface ProvisionMap {
+        }
+        interface Context {
+        }
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            [tag: string]: any;
+        }
+        interface ElementChildrenAttribute {
+            children: {};
+        }
+    }
+}
+declare const _default: {
+    createElement: typeof createElement;
+    Fragment: string;
+};
+export default _default;

dom.d.ts

@@ -1,2 +0,2 @@
-import { Children, Context, ElementValue, Renderer, RendererImpl } from "./core.js";
+import { Children, Context, ElementValue, Renderer, RendererImpl } from "./crank.js";
 export declare const impl: Partial<RendererImpl<Node, string>>;
@@ -6,2 +6,3 @@ export declare class DOMRenderer extends Renderer<Node, string> {
     render(children: Children, root: Node, ctx?: Context): Promise<ElementValue<Node>> | ElementValue<Node>;
+    hydrate(children: Children, root: Node, ctx?: Context): Promise<ElementValue<Node>> | ElementValue<Node>;
 }
@@ -8,0 +9,0 @@ export declare const renderer: DOMRenderer;

dom.js

 /// <reference types="dom.d.ts" />
-import { Portal, Renderer } from './core.js';
+import { Portal, Renderer } from './crank.js';
 
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 const impl = {
-    parse(text) {
-        if (typeof document.createRange === "function") {
-            const fragment = document.createRange().createContextualFragment(text);
-            return Array.from(fragment.childNodes);
-        }
-        else {
-            const childNodes = new DOMParser().parseFromString(text, "text/html").body
-                .childNodes;
-            return Array.from(childNodes);
-        }
-    },
-    scope(scope, tag) {
+    scope(xmlns, tag) {
         // TODO: Should we handle xmlns???
@@ -22,10 +11,11 @@ switch (tag) {
             case "foreignObject":
-                return undefined;
+                xmlns = undefined;
+                break;
             case "svg":
-                return SVG_NAMESPACE;
-            default:
-                return scope;
+                xmlns = SVG_NAMESPACE;
+                break;
         }
+        return xmlns;
     },
-    create(tag, _props, ns) {
+    create(tag, _props, xmlns) {
         if (typeof tag !== "string") {
@@ -35,6 +25,30 @@ throw new Error(`Unknown tag: ${tag.toString()}`);
         else if (tag.toLowerCase() === "svg") {
-            ns = SVG_NAMESPACE;
+            xmlns = SVG_NAMESPACE;
         }
-        return ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+        return xmlns
+            ? document.createElementNS(xmlns, tag)
+            : document.createElement(tag);
     },
+    hydrate(tag, node, props) {
+        if (typeof tag !== "string" && tag !== Portal) {
+            throw new Error(`Unknown tag: ${tag.toString()}`);
+        }
+        if (typeof tag === "string" &&
+            tag.toUpperCase() !== node.tagName) {
+            console.error(`Expected <${tag}> while hydrating but found:`, node);
+            return undefined;
+        }
+        const children = [];
+        for (let i = 0; i < node.childNodes.length; i++) {
+            const child = node.childNodes[i];
+            if (child.nodeType === Node.TEXT_NODE) {
+                children.push(child.data);
+            }
+            else if (child.nodeType === Node.ELEMENT_NODE) {
+                children.push(child);
+            }
+        }
+        // TODO: extract props from nodes
+        return { props, children };
+    },
     patch(_tag, 
@@ -44,4 +58,4 @@ // TODO: Why does this assignment work?
     // TODO: Stricter typings?
-    value, oldValue, scope) {
-        const isSVG = scope === SVG_NAMESPACE;
+    value, oldValue, xmlns) {
+        const isSVG = xmlns === SVG_NAMESPACE;
         switch (name) {
@@ -122,3 +136,5 @@ case "style": {
                         (descriptor.writable === true || descriptor.set !== undefined)) {
-                        node[name] = value;
+                        if (node[name] !== value) {
+                            node[name] = value;
+                        }
                         return;
@@ -210,2 +226,56 @@ }
     },
+    text(text, _scope, hydrationData) {
+        if (hydrationData != null) {
+            let value = hydrationData.children.shift();
+            if (typeof value !== "string" || !value.startsWith(text)) {
+                console.error(`Expected "${text}" while hydrating but found:`, value);
+            }
+            else if (text.length < value.length) {
+                value = value.slice(text.length);
+                hydrationData.children.unshift(value);
+            }
+        }
+        return text;
+    },
+    raw(value, xmlns, hydrationData) {
+        let result;
+        if (typeof value === "string") {
+            const el = xmlns == null
+                ? document.createElement("div")
+                : document.createElementNS(xmlns, "svg");
+            el.innerHTML = value;
+            if (el.childNodes.length === 0) {
+                result = undefined;
+            }
+            else if (el.childNodes.length === 1) {
+                result = el.childNodes[0];
+            }
+            else {
+                result = Array.from(el.childNodes);
+            }
+        }
+        else {
+            result = value;
+        }
+        if (hydrationData != null) {
+            // TODO: maybe we should warn on incorrect values
+            if (Array.isArray(result)) {
+                for (let i = 0; i < result.length; i++) {
+                    const node = result[i];
+                    if (typeof node !== "string" &&
+                        (node.nodeType === Node.ELEMENT_NODE ||
+                            node.nodeType === Node.TEXT_NODE)) {
+                        hydrationData.children.shift();
+                    }
+                }
+            }
+            else if (result != null && typeof result !== "string") {
+                if (result.nodeType === Node.ELEMENT_NODE ||
+                    result.nodeType === Node.TEXT_NODE) {
+                    hydrationData.children.shift();
+                }
+            }
+        }
+        return result;
+    },
 };
@@ -217,8 +287,16 @@ class DOMRenderer extends Renderer {
     render(children, root, ctx) {
-        if (root == null || typeof root.nodeType !== "number") {
-            throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
-        }
+        validateRoot(root);
         return super.render(children, root, ctx);
     }
+    hydrate(children, root, ctx) {
+        validateRoot(root);
+        return super.hydrate(children, root, ctx);
+    }
 }
+function validateRoot(root) {
+    if (root === null ||
+        (typeof root === "object" && typeof root.nodeType !== "number")) {
+        throw new TypeError(`Render root is not a node. Received: ${JSON.stringify(root && root.toString())}`);
+    }
+}
 const renderer = new DOMRenderer();
@@ -225,0 +303,0 @@

html.d.ts

@@ -1,3 +0,3 @@
-import { Renderer } from "./core.js";
-import type { RendererImpl } from "./core.js";
+import { Renderer } from "./crank.js";
+import type { RendererImpl } from "./crank.js";
 interface Node {
@@ -4,0 +4,0 @@ value: string;

html.js

 /// <reference types="html.d.ts" />
-import { Portal, Renderer } from './core.js';
+import { Portal, Renderer } from './crank.js';
 
@@ -97,3 +97,3 @@ const voidTags = new Set([
     },
-    escape(text) {
+    text(text) {
         return escape(text);
@@ -100,0 +100,0 @@ },

jsx-runtime.d.ts

@@ -1,2 +0,2 @@
-declare function jsxAdapter(tag: any, props: Record<string, any>, key: any): import("./core.js").Element<any>;
+declare function jsxAdapter(tag: any, props: Record<string, any>, key: any): import("./crank.js").Element<any>;
 export declare const Fragment = "";
@@ -3,0 +3,0 @@ export declare const jsx: typeof jsxAdapter;

jsx-runtime.js

 /// <reference types="jsx-runtime.d.ts" />
-import { createElement } from './core.js';
+import { createElement } from './crank.js';
 
@@ -4,0 +4,0 @@ // This file is provided for compatibility reasons with the JSX automatic

package.json

 {
   "name": "@b9g/crank",
-  "version": "0.5.0-beta.6",
+  "version": "0.5.0-beta.7",
   "description": "Write JSX-driven components with functions, promises and generators.",
@@ -44,10 +44,2 @@ "homepage": "https://crank.js.org",
     },
-    "./core": {
-      "import": "./core.js",
-      "require": "./core.cjs"
-    },
-    "./core.js": {
-      "import": "./core.js",
-      "require": "./core.cjs"
-    },
     "./jsx-runtime": {
@@ -61,10 +53,18 @@ "import": "./jsx-runtime.js",
     },
+    "./jsx-tag": {
+      "import": "./jsx-tag.js",
+      "require": "./jsx-tag.cjs"
+    },
+    "./jsx-tag.js": {
+      "import": "./jsx-tag.js",
+      "require": "./jsx-tag.cjs"
+    },
     "./package.json": "./package.json",
-    "./tags": {
-      "import": "./tags.js",
-      "require": "./tags.cjs"
+    "./standalone": {
+      "import": "./standalone.js",
+      "require": "./standalone.cjs"
     },
-    "./tags.js": {
-      "import": "./tags.js",
-      "require": "./tags.cjs"
+    "./standalone.js": {
+      "import": "./standalone.js",
+      "require": "./standalone.cjs"
     },
@@ -83,18 +83,18 @@ "./umd": {
     "@arkweid/lefthook": "^0.7.7",
-    "@types/sinon": "^10.0.12",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@types/sinon": "^10.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
-    "magic-string": "^0.26.2",
-    "playwright-test": "^8.1.1",
-    "prettier": "^2.7.1",
-    "rollup": "^2.76.0",
-    "rollup-plugin-typescript2": "^0.32.1",
+    "eslint-plugin-react": "^7.32.0",
+    "magic-string": "^0.27.0",
+    "playwright-test": "^8.1.2",
+    "prettier": "^2.8.3",
+    "rollup": "^3.10.0",
+    "rollup-plugin-typescript2": "^0.34.1",
     "shx": "^0.3.4",
-    "sinon": "^14.0.0",
-    "ts-node": "^10.9.0",
-    "typescript": "^4.7.4",
+    "sinon": "^15.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
     "uvu": "^0.5.6"
@@ -105,2 +105,2 @@ },
   }
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1206852

increased by5.19%

Lines of code

8615

increased by2.54%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes