@b9g/crank 0.4.3 → 0.5.0-beta.0

package/crank.d.ts

@@ -166,9 +166,9 @@ export declare function isElement(value: any): value is Element;
  * 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.
- */
+/** A single-letter alias for createElement */
+export declare const c: typeof createElement;
+/** 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.

package/crank.js

@@ -105,6 +105,7 @@ class Element {
         this.static_ = static_;
     }
 }
+// See Element interface
 Element.prototype.$$typeof = ElementSymbol;
 function isElement(value) {
     return value != null && value.$$typeof === ElementSymbol;
@@ -127,6 +128,7 @@ function createElement(tag, props, ...children) {
             switch (name) {
                 case "crank-key":
                 case "c-key":
+                case "$key":
                     // We have to make sure we don’t assign null to the key because we
                     // don’t check for null keys in the diffing functions.
                     if (props[name] != null) {
@@ -135,12 +137,14 @@ function createElement(tag, props, ...children) {
                     break;
                 case "crank-ref":
                 case "c-ref":
+                case "$ref":
                     if (typeof props[name] === "function") {
                         ref = props[name];
                     }
                     break;
                 case "crank-static":
                 case "c-static":
+                case "$static":
                     static_ = !!props[name];
                     break;
                 default:
@@ -154,11 +158,27 @@ function createElement(tag, props, ...children) {
     else if (children.length === 1) {
         props1.children = children[0];
     }
+    // string aliases for the special tags
+    // TODO: Does this logic belong here, or in the Element constructor
+    switch (tag) {
+        case "$FRAGMENT":
+            tag = Fragment;
+            break;
+        case "$PORTAL":
+            tag = Portal;
+            break;
+        case "$COPY":
+            tag = Copy;
+            break;
+        case "$RAW":
+            tag = Raw;
+            break;
+    }
     return new Element(tag, props1, key, ref, static_);
 }
-/**
- * Clones a given element, shallowly copying the props object.
- */
+/** A single-letter alias for createElement */
+const c = createElement;
+/** Clones a given element, shallowly copying the props object. */
 function cloneElement(el) {
     if (!isElement(el)) {
         throw new TypeError("Cannot clone non-element");
@@ -732,9 +752,9 @@ const IsDone = 1 << 4;
  *
  * NOTE: This is mainly used to prevent some false positives in component
  * yields or returns undefined warnings. The reason we’re using this versus
- * IsUnmounted is a very troubling jest test (cascades sync generator parent
- * and sync generator child) where synchronous code causes a stack overflow
- * error in a non-deterministic way. Deeply disturbing stuff.
+ * IsUnmounted is a very troubling test (cascades sync generator parent and
+ * sync generator child) where synchronous code causes a stack overflow error
+ * in a non-deterministic way. Deeply disturbing stuff.
  */
 const IsErrored = 1 << 5;
 /**
@@ -955,13 +975,170 @@ class Context {
         provisions.set(key, value);
     }
     addEventListener(type, listener, options) {
-        return addEventListener(this[$ContextImpl], type, listener, options);
+        const impl = this[$ContextImpl];
+        let listeners;
+        if (!isListenerOrListenerObject(listener)) {
+            return;
+        }
+        else {
+            const listeners1 = listenersMap.get(impl);
+            if (listeners1) {
+                listeners = listeners1;
+            }
+            else {
+                listeners = [];
+                listenersMap.set(impl, listeners);
+            }
+        }
+        options = normalizeListenerOptions(options);
+        let callback;
+        if (typeof listener === "object") {
+            callback = () => listener.handleEvent.apply(listener, arguments);
+        }
+        else {
+            callback = listener;
+        }
+        const record = { type, callback, listener, options };
+        if (options.once) {
+            record.callback = function () {
+                const i = listeners.indexOf(record);
+                if (i !== -1) {
+                    listeners.splice(i, 1);
+                }
+                return callback.apply(this, arguments);
+            };
+        }
+        if (listeners.some((record1) => record.type === record1.type &&
+            record.listener === record1.listener &&
+            !record.options.capture === !record1.options.capture)) {
+            return;
+        }
+        listeners.push(record);
+        // TODO: is it possible to separate out the EventTarget delegation logic
+        for (const value of getChildValues(impl.ret)) {
+            if (isEventTarget(value)) {
+                value.addEventListener(record.type, record.callback, record.options);
+            }
+        }
     }
     removeEventListener(type, listener, options) {
-        return removeEventListener(this[$ContextImpl], type, listener, options);
+        const impl = this[$ContextImpl];
+        const listeners = listenersMap.get(impl);
+        if (listeners == null || !isListenerOrListenerObject(listener)) {
+            return;
+        }
+        const options1 = normalizeListenerOptions(options);
+        const i = listeners.findIndex((record) => record.type === type &&
+            record.listener === listener &&
+            !record.options.capture === !options1.capture);
+        if (i === -1) {
+            return;
+        }
+        const record = listeners[i];
+        listeners.splice(i, 1);
+        // TODO: is it possible to separate out the EventTarget delegation logic
+        for (const value of getChildValues(impl.ret)) {
+            if (isEventTarget(value)) {
+                value.removeEventListener(record.type, record.callback, record.options);
+            }
+        }
     }
     dispatchEvent(ev) {
-        return dispatchEvent(this[$ContextImpl], ev);
+        const impl = this[$ContextImpl];
+        const path = [];
+        for (let parent = impl.parent; parent !== undefined; parent = parent.parent) {
+            path.push(parent);
+        }
+        // We patch the stopImmediatePropagation method because ev.cancelBubble
+        // only informs us if stopPropagation was called and there are no
+        // properties which inform us if stopImmediatePropagation was called.
+        let immediateCancelBubble = false;
+        const stopImmediatePropagation = ev.stopImmediatePropagation;
+        setEventProperty(ev, "stopImmediatePropagation", () => {
+            immediateCancelBubble = true;
+            return stopImmediatePropagation.call(ev);
+        });
+        setEventProperty(ev, "target", impl.ctx);
+        // The only possible errors in this block are errors thrown by callbacks,
+        // and dispatchEvent will only log these errors rather than throwing
+        // them. Therefore, we place all code in a try block, log errors in the
+        // catch block, and use an unsafe return statement in the finally block.
+        //
+        // Each early return within the try block returns true because while the
+        // return value is overridden in the finally block, TypeScript
+        // (justifiably) does not recognize the unsafe return statement.
+        //
+        // TODO: Run all callbacks even if one of them errors
+        try {
+            setEventProperty(ev, "eventPhase", CAPTURING_PHASE);
+            for (let i = path.length - 1; i >= 0; i--) {
+                const target = path[i];
+                const listeners = listenersMap.get(target);
+                if (listeners) {
+                    setEventProperty(ev, "currentTarget", target.ctx);
+                    for (const record of listeners) {
+                        if (record.type === ev.type && record.options.capture) {
+                            record.callback.call(target.ctx, ev);
+                            if (immediateCancelBubble) {
+                                return true;
+                            }
+                        }
+                    }
+                }
+                if (ev.cancelBubble) {
+                    return true;
+                }
+            }
+            {
+                const listeners = listenersMap.get(impl);
+                if (listeners) {
+                    setEventProperty(ev, "eventPhase", AT_TARGET);
+                    setEventProperty(ev, "currentTarget", impl.ctx);
+                    for (const record of listeners) {
+                        if (record.type === ev.type) {
+                            record.callback.call(impl.ctx, ev);
+                            if (immediateCancelBubble) {
+                                return true;
+                            }
+                        }
+                    }
+                    if (ev.cancelBubble) {
+                        return true;
+                    }
+                }
+            }
+            if (ev.bubbles) {
+                setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
+                for (let i = 0; i < path.length; i++) {
+                    const target = path[i];
+                    const listeners = listenersMap.get(target);
+                    if (listeners) {
+                        setEventProperty(ev, "currentTarget", target.ctx);
+                        for (const record of listeners) {
+                            if (record.type === ev.type && !record.options.capture) {
+                                record.callback.call(target.ctx, ev);
+                                if (immediateCancelBubble) {
+                                    return true;
+                                }
+                            }
+                        }
+                    }
+                    if (ev.cancelBubble) {
+                        return true;
+                    }
+                }
+            }
+        }
+        catch (err) {
+            // TODO: Use setTimeout to rethrow the error.
+            console.error(err);
+        }
+        finally {
+            setEventProperty(ev, "eventPhase", NONE);
+            setEventProperty(ev, "currentTarget", null);
+            // eslint-disable-next-line no-unsafe-finally
+            return !ev.defaultPrevented;
+        }
     }
 }
 /*** PRIVATE CONTEXT FUNCTIONS ***/
@@ -1362,168 +1539,11 @@ const CAPTURING_PHASE = 1;
 const AT_TARGET = 2;
 const BUBBLING_PHASE = 3;
 const listenersMap = new WeakMap();
-function addEventListener(ctx, type, listener, options) {
-    let listeners;
-    if (listener == null) {
-        return;
-    }
-    else {
-        const listeners1 = listenersMap.get(ctx);
-        if (listeners1) {
-            listeners = listeners1;
-        }
-        else {
-            listeners = [];
-            listenersMap.set(ctx, listeners);
-        }
-    }
-    options = normalizeListenerOptions(options);
-    let callback;
-    if (typeof listener === "object") {
-        callback = () => listener.handleEvent.apply(listener, arguments);
-    }
-    else {
-        callback = listener;
-    }
-    const record = { type, callback, listener, options };
-    if (options.once) {
-        record.callback = function () {
-            const i = listeners.indexOf(record);
-            if (i !== -1) {
-                listeners.splice(i, 1);
-            }
-            return callback.apply(this, arguments);
-        };
-    }
-    if (listeners.some((record1) => record.type === record1.type &&
-        record.listener === record1.listener &&
-        !record.options.capture === !record1.options.capture)) {
-        return;
-    }
-    listeners.push(record);
-    // TODO: is it possible to separate out the EventTarget delegation logic
-    for (const value of getChildValues(ctx.ret)) {
-        if (isEventTarget(value)) {
-            value.addEventListener(record.type, record.callback, record.options);
-        }
-    }
-}
-function removeEventListener(ctx, type, listener, options) {
-    const listeners = listenersMap.get(ctx);
-    if (listener == null || listeners == null) {
-        return;
-    }
-    const options1 = normalizeListenerOptions(options);
-    const i = listeners.findIndex((record) => record.type === type &&
-        record.listener === listener &&
-        !record.options.capture === !options1.capture);
-    if (i === -1) {
-        return;
-    }
-    const record = listeners[i];
-    listeners.splice(i, 1);
-    // TODO: is it possible to separate out the EventTarget delegation logic
-    for (const value of getChildValues(ctx.ret)) {
-        if (isEventTarget(value)) {
-            value.removeEventListener(record.type, record.callback, record.options);
-        }
-    }
-}
-function dispatchEvent(ctx, ev) {
-    const path = [];
-    for (let parent = ctx.parent; parent !== undefined; parent = parent.parent) {
-        path.push(parent);
-    }
-    // We patch the stopImmediatePropagation method because ev.cancelBubble
-    // only informs us if stopPropagation was called and there are no
-    // properties which inform us if stopImmediatePropagation was called.
-    let immediateCancelBubble = false;
-    const stopImmediatePropagation = ev.stopImmediatePropagation;
-    setEventProperty(ev, "stopImmediatePropagation", () => {
-        immediateCancelBubble = true;
-        return stopImmediatePropagation.call(ev);
-    });
-    setEventProperty(ev, "target", ctx.ctx);
-    // The only possible errors in this block are errors thrown by callbacks,
-    // and dispatchEvent will only log these errors rather than throwing
-    // them. Therefore, we place all code in a try block, log errors in the
-    // catch block, and use an unsafe return statement in the finally block.
-    //
-    // Each early return within the try block returns true because while the
-    // return value is overridden in the finally block, TypeScript
-    // (justifiably) does not recognize the unsafe return statement.
-    //
-    // TODO: Run all callbacks even if one of them errors
-    try {
-        setEventProperty(ev, "eventPhase", CAPTURING_PHASE);
-        for (let i = path.length - 1; i >= 0; i--) {
-            const target = path[i];
-            const listeners = listenersMap.get(target);
-            if (listeners) {
-                setEventProperty(ev, "currentTarget", target.ctx);
-                for (const record of listeners) {
-                    if (record.type === ev.type && record.options.capture) {
-                        record.callback.call(target.ctx, ev);
-                        if (immediateCancelBubble) {
-                            return true;
-                        }
-                    }
-                }
-            }
-            if (ev.cancelBubble) {
-                return true;
-            }
-        }
-        {
-            const listeners = listenersMap.get(ctx);
-            if (listeners) {
-                setEventProperty(ev, "eventPhase", AT_TARGET);
-                setEventProperty(ev, "currentTarget", ctx.ctx);
-                for (const record of listeners) {
-                    if (record.type === ev.type) {
-                        record.callback.call(ctx.ctx, ev);
-                        if (immediateCancelBubble) {
-                            return true;
-                        }
-                    }
-                }
-                if (ev.cancelBubble) {
-                    return true;
-                }
-            }
-        }
-        if (ev.bubbles) {
-            setEventProperty(ev, "eventPhase", BUBBLING_PHASE);
-            for (let i = 0; i < path.length; i++) {
-                const target = path[i];
-                const listeners = listenersMap.get(target);
-                if (listeners) {
-                    setEventProperty(ev, "currentTarget", target.ctx);
-                    for (const record of listeners) {
-                        if (record.type === ev.type && !record.options.capture) {
-                            record.callback.call(target.ctx, ev);
-                            if (immediateCancelBubble) {
-                                return true;
-                            }
-                        }
-                    }
-                }
-                if (ev.cancelBubble) {
-                    return true;
-                }
-            }
-        }
-    }
-    catch (err) {
-        // TODO: Use setTimeout to rethrow the error.
-        console.error(err);
-    }
-    finally {
-        setEventProperty(ev, "eventPhase", NONE);
-        setEventProperty(ev, "currentTarget", null);
-        // eslint-disable-next-line no-unsafe-finally
-        return !ev.defaultPrevented;
-    }
+function isListenerOrListenerObject(value) {
+    return (typeof value === "function" ||
+        (value !== null &&
+            typeof value === "object" &&
+            typeof value.handleEvent === "function"));
 }
 function normalizeListenerOptions(options) {
     if (typeof options === "boolean") {
@@ -1635,5 +1655,5 @@ function propagateError(ctx, err) {
 // default export. Prefer named exports when importing directly.
 var crank = { createElement, Fragment };
 
-export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, cloneElement, createElement, crank as default, isElement };
+export { Context, Copy, Element, Fragment, Portal, Raw, Renderer, c, cloneElement, createElement, crank as default, isElement };
 //# sourceMappingURL=crank.js.map