@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/src/mirror/shipper/observers.js

@@ -0,0 +1,441 @@
+import { ChangeType } from "../constants.js";
+import { propertySpy, ShipperHelper } from "./utils.js";
+import { originalOf } from "../../proxy.js";
+
+
+
+
+class Mutations extends ShipperHelper {
+    init() {
+        this.observer = new MutationObserver(this.onMutations);
+        this.observeElement(this.document);
+        this.createAttachShadowSpy();
+        this.observeExistingShadowRoots(this.document);
+    }
+    cleanup() {
+        var _this_observer;
+        (_this_observer = this.observer) == null ? void 0 : _this_observer.disconnect();
+        this.observer = null;
+    }
+    observeElement(element) {
+        this.observer.observe(element, {
+            childList: true,
+            characterData: true,
+            attributes: true,
+            subtree: true
+        });
+    }
+    // Shadow root handling
+    observeExistingShadowRoots(root, param) {
+        let { skipRoot = false } = param === void 0 ? {} : param;
+        const walker = this.document.createTreeWalker(root, this.window.NodeFilter.SHOW_ELEMENT);
+        let current = skipRoot ? walker.nextNode() : walker.currentNode;
+        while(current){
+            this.observeShadowRootNode(current);
+            current = walker.nextNode();
+        }
+    }
+    createAttachShadowSpy() {
+        this.callOnDispose(propertySpy(this.window.Element, "attachShadow", "value", this.onAttachShadow, {
+            timing: "after",
+            async: true
+        }));
+    }
+    constructor(...args){
+        super(...args), this.onMutations = (mutations)=>{
+            let enqueuedChange = false;
+            for(let i = 0; i < mutations.length; i++){
+                const mutationRecord = mutations[i];
+                const { type, target } = mutationRecord;
+                switch(type){
+                    case "childList":
+                        {
+                            const { nextSibling, addedNodes, removedNodes } = mutationRecord;
+                            this.changeQueue.nodeTreeChanged(target, removedNodes, nextSibling, addedNodes);
+                            addedNodes.forEach(this.observeShadowRootNode);
+                            enqueuedChange = true;
+                            break;
+                        }
+                    case "attributes":
+                        {
+                            const { attributeName } = mutationRecord;
+                            this.changeQueue.nodeAttributeChanged(target, attributeName);
+                            enqueuedChange = true;
+                            break;
+                        }
+                    case "characterData":
+                        {
+                            this.changeQueue.nodeDataChanged(target);
+                            enqueuedChange = true;
+                            break;
+                        }
+                }
+            }
+            if (enqueuedChange) {
+                this.shipper.sendFrame();
+            }
+        }, this.observeShadowRootNode = (node)=>{
+            const shadowRoot = node instanceof this.window.ShadowRoot ? node : node.shadowRoot;
+            if (shadowRoot) {
+                this.observeElement(shadowRoot);
+                // Look for nested shadow roots
+                this.observeExistingShadowRoots(shadowRoot, {
+                    skipRoot: true
+                });
+            }
+        }, // Trigger a fake mutation since mutation observer doesn't fire for shadow roots
+        this.onAttachShadow = (element)=>{
+            if (element.shadowRoot) {
+                this.onMutations([
+                    {
+                        type: "childList",
+                        target: element,
+                        addedNodes: [
+                            element.shadowRoot
+                        ],
+                        removedNodes: [],
+                        nextSibling: null
+                    }
+                ]);
+            }
+        };
+    }
+}
+class InputValueObserver extends ShipperHelper {
+    init() {
+        this.addPassiveDocumentListener("input", this.onInputEvent);
+    }
+    constructor(shipper){
+        super(shipper), this.onInputEvent = (event)=>{
+            const { target } = event;
+            if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
+                this.onInputValueChange(target);
+            }
+        }, this.onInputValueChange = (element)=>{
+            this.changeQueue.nodePropertyChanged(element, "value");
+            this.shipper.sendFrame();
+        };
+        // Unlike other handlers, these need to be installed early because if
+        // there's other code (e.g. React) that overrides the same property
+        // descriptors we want to make sure that they pick up our overrides
+        if (this.shipper.observeInputValue) {
+            [
+                this.window.HTMLInputElement,
+                this.window.HTMLTextAreaElement
+            ].forEach((constructor)=>{
+                this.callOnDispose(propertySpy(constructor, "value", "set", this.onInputValueChange, {
+                    timing: "after",
+                    async: true
+                }));
+            });
+        }
+    }
+}
+class StylesheetRulesObserver extends ShipperHelper {
+    init() {
+        const { CSSStyleSheet } = this.window;
+        [
+            "insertRule",
+            "deleteRule"
+        ].forEach((property)=>{
+            this.callOnDispose(propertySpy(CSSStyleSheet, property, "value", this.onCSSRuleChange, {
+                timing: "after",
+                async: true
+            }));
+        });
+    }
+    constructor(...args){
+        super(...args), this.onCSSRuleChange = (element)=>{
+            const styleNode = element == null ? void 0 : element.ownerNode, textNode = styleNode == null ? void 0 : styleNode.childNodes[0];
+            if (styleNode && textNode) {
+                this.changeQueue.nodeDataChanged(textNode);
+                this.shipper.sendFrame();
+            }
+        };
+    }
+}
+class MediaStateObserver extends ShipperHelper {
+    init() {
+        this.addPassiveDocumentListener("play", this.onPlayStateChange, true);
+        this.addPassiveDocumentListener("pause", this.onPlayStateChange, true);
+    }
+    constructor(...args){
+        super(...args), this.onPlayStateChange = (event)=>{
+            if (event.target) {
+                this.changeQueue.nodePropertyChanged(event.target, "paused");
+                this.changeQueue.nodePropertyChanged(event.target, "currentTime");
+                this.shipper.sendFrame();
+            }
+        };
+    }
+}
+class GlobalState extends ShipperHelper {
+    changed() {
+        this.changeQueue.globalChanged(this);
+        this.shipper.sendFrame();
+    }
+}
+GlobalState.includedInKeyframe = true;
+class ScrollListener extends ShipperHelper {
+    init() {
+        this.addPassiveDocumentListener("scroll", this.onScroll, true);
+    }
+    constructor(shipper, onDocumentScroll){
+        super(shipper), this.onScroll = (event)=>{
+            const element = event.target;
+            if (!element || element === this.document) {
+                this.onDocumentScroll();
+            } else {
+                this.changeQueue.nodePropertyChanged(element, "scrollLeft");
+                this.changeQueue.nodePropertyChanged(element, "scrollTop");
+                this.shipper.sendFrame();
+            }
+        };
+        this.onDocumentScroll = onDocumentScroll;
+    }
+}
+class DocumentScroll extends GlobalState {
+    init() {
+        this.scrollListener.init();
+    }
+    cleanup() {
+        this.scrollListener.dispose();
+        super.cleanup();
+    }
+    serialize() {
+        // Standard window scroll, viewer and visitors might use HTML vs BODY for
+        // scrollingElement (Edge vs Chrome), so we set this as global state, so the Receiver
+        // choses according to their browser.
+        const scroller = this.document.scrollingElement || this.document.documentElement;
+        return [
+            ChangeType.DocumentScroll,
+            scroller ? [
+                scroller.scrollLeft,
+                scroller.scrollTop
+            ] : [
+                0,
+                0
+            ]
+        ];
+    }
+    constructor(shipper){
+        super(shipper), this.onScroll = ()=>{
+            this.changed();
+        };
+        this.scrollListener = new ScrollListener(shipper, this.onScroll);
+    }
+}
+class MousePosition extends GlobalState {
+    init() {
+        this.addPassiveDocumentListener("mousemove", this.onMouseMove);
+        this.addPassiveDocumentListener("mouseleave", this.onMouseLeave);
+    }
+    serialize() {
+        return [
+            ChangeType.Mouse,
+            [
+                this.x,
+                this.y,
+                this.target ? this.serializer.nodeToId(this.target) : 0
+            ]
+        ];
+    }
+    constructor(...args){
+        super(...args), this.x = -1, this.y = -1, this.target = null, this.onMouseMove = (event)=>{
+            this.x = event.clientX;
+            this.y = event.clientY;
+            this.target = event.target;
+            this.changed();
+        }, this.onMouseLeave = ()=>{
+            this.x = this.y = -1;
+            this.target = null;
+            this.changed();
+        };
+    }
+}
+class MouseClick extends ShipperHelper {
+    init() {
+        this.addPassiveDocumentListener("mousedown", this.onMouseDown, true);
+    }
+    constructor(...args){
+        super(...args), this.onMouseDown = (event)=>{
+            this.changeQueue.eventHappened([
+                ChangeType.Click,
+                [
+                    event.clientX,
+                    event.clientY
+                ]
+            ]);
+            this.shipper.sendFrame();
+        };
+    }
+}
+class Dimensions extends GlobalState {
+    init() {
+        this.addPassiveWindowListener("resize", this.onResize);
+    }
+    serialize() {
+        // Docking intentionally proxies innerWidth/innerHeight to the host content area (viewport
+        // minus the docked panel) for customer layout code. Liveview must send the real browser
+        // viewport or the receiver applies the docked shrink a second time, so read through the
+        // pre-patch view (a no-op on pages where docking never patched anything).
+        const viewport = originalOf(this.window);
+        return [
+            ChangeType.Dimensions,
+            [
+                viewport.innerWidth,
+                viewport.innerHeight
+            ]
+        ];
+    }
+    constructor(...args){
+        super(...args), this.onResize = ()=>{
+            this.changed();
+        };
+    }
+}
+class Visibility extends GlobalState {
+    init() {
+        this.addPassiveDocumentListener("visibilitychange", this.onVisibilityChange);
+        this.addPassiveWindowListener("pagehide", this.onPageHide);
+    }
+    get isVisible() {
+        return this.document.visibilityState === "visible";
+    }
+    serialize() {
+        return [
+            ChangeType.Visibility,
+            [
+                this.isVisible | 0
+            ]
+        ];
+    }
+    constructor(...args){
+        super(...args), this.navigating = false, this.onVisibilityChange = ()=>{
+            if (!this.navigating) {
+                this.changed();
+            }
+        }, // On navigation, browser will set visibility to hidden, but we don't want the receiver to get
+        // that because the tab isn't really hidden, it's just transitioning. pagehide comes before
+        // that visibilitychange.
+        this.onPageHide = ()=>{
+            this.navigating = true;
+        };
+    }
+}
+class WindowFocus extends GlobalState {
+    init() {
+        this.addPassiveWindowListener("focus", this.onWindowFocus);
+        this.addPassiveWindowListener("blur", this.onWindowBlur);
+    }
+    serialize() {
+        return [
+            ChangeType.WindowFocus,
+            [
+                this.document.hasFocus() | 0
+            ]
+        ];
+    }
+    constructor(...args){
+        super(...args), this.onWindowFocus = ()=>{
+            this.changed();
+        }, this.onWindowBlur = ()=>{
+            this.changed();
+        };
+    }
+}
+class Selection extends GlobalState {
+    init() {
+        this.addPassiveDocumentListener("selectionchange", this.onSelectionChange);
+    }
+    serialize() {
+        const selection = this.document.getSelection();
+        if (selection && selection.rangeCount !== 0 && !selection.isCollapsed) {
+            const range = selection.getRangeAt(0);
+            return [
+                ChangeType.Selection,
+                [
+                    this.serializer.nodeToId(range.startContainer),
+                    range.startOffset,
+                    this.serializer.nodeToId(range.endContainer),
+                    range.endOffset
+                ]
+            ];
+        } else {
+            return [
+                ChangeType.Selection,
+                [
+                    0
+                ]
+            ];
+        }
+    }
+    constructor(...args){
+        super(...args), this.onSelectionChange = ()=>{
+            this.changed();
+        };
+    }
+}
+class ElementFocus extends GlobalState {
+    init() {
+        this.addPassiveDocumentListener("focus", this.onFocus, true);
+        this.addPassiveDocumentListener("blur", this.onBlur, true);
+    }
+    serialize() {
+        return [
+            ChangeType.ElementFocus,
+            [
+                this.target ? this.serializer.nodeToId(this.target) : 0
+            ]
+        ];
+    }
+    constructor(...args){
+        super(...args), this.target = null // TODO: Or document.activeElement != null or body?
+        , this.onFocus = (event)=>{
+            this.target = event.target;
+            this.changed();
+        }, this.onBlur = ()=>{
+            this.target = null;
+            this.changed();
+        };
+    }
+}
+class Location extends GlobalState {
+    init() {
+        this.updateBaseLocation();
+    }
+    serialize() {
+        return [
+            ChangeType.Location,
+            [
+                this.baseLocation,
+                this.document.location.href
+            ]
+        ];
+    }
+    constructor(...args){
+        super(...args), this.onLocationChange = ()=>{
+            // Callback fn but called by page_mirror.ts when it detects a location change at sendMessage.
+            // This is currently not an event listener's callback because an appropriate event listener is not available:
+            //    - Navigation API is not yet available in Firefox/Safari.
+            //    - History API does not extend an event listener for pushState and we'd like to avoid monkey patching it.
+            this.updateBaseLocation();
+            this.changed();
+        }, this.updateBaseLocation = ()=>{
+            this.baseLocation = (this.document.getElementsByTagName("base")[0] || {}).href || // Existing <base> tag
+            this.document.location.href.match(/^(.*\/)[^/]*$/)[1];
+        };
+    }
+}
+class DocumentTree extends GlobalState {
+    serialize() {
+        return [
+            ChangeType.DocumentTree,
+            [
+                this.serializer.idTree(this.document)
+            ]
+        ];
+    }
+}
+
+export { Dimensions, DocumentScroll, DocumentTree, ElementFocus, InputValueObserver, Location, MediaStateObserver, MouseClick, MousePosition, Mutations, Selection, StylesheetRulesObserver, Visibility, WindowFocus };

package/src/mirror/shipper/utils.js

@@ -0,0 +1,98 @@
+import { __webpack_require__ } from "../../../js/runtime.js";
+import { addEventListener } from "../../dom.js";
+import "../../../widget/utils/native_globals.js";
+import { Disposable } from "../../mixins/disposable.js";
+
+/* provided dependency */ var utils_setTimeout = __webpack_require__(68034).pS;
+
+
+// Add a spy that gets called each time an object's property is invoked.
+// Returns a disposer that removes the spy.
+//
+function propertySpy(constructor, property, descriptorAttribute, callback, param) {
+    let { // Callback options:
+    timing = "after", async = true } = param;
+    const proto = constructor.prototype;
+    const descriptor = Object.getOwnPropertyDescriptor(proto, property);
+    const originalAttribute = descriptor[descriptorAttribute];
+    // Old Safari's won't let us observe certain setters.
+    if (!descriptor || typeof originalAttribute !== "function") {
+        return ()=>{};
+    }
+    const runCallback = async ? function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        try {
+            utils_setTimeout(()=>callback(...args), 0);
+        } catch (e) {
+        /* IGNORED */ }
+    } : function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        try {
+            callback(...args);
+        } catch (e) {
+        /* IGNORED */ }
+    };
+    let newAttribute;
+    if (timing === "before") {
+        newAttribute = function newAttribute() {
+            runCallback(this, ...arguments); // eslint-disable-line prefer-rest-params
+            return originalAttribute.apply(this, arguments); // eslint-disable-line prefer-rest-params
+        };
+    } else {
+        newAttribute = function newAttribute() {
+            const ret = originalAttribute.apply(this, arguments); // eslint-disable-line prefer-rest-params
+            runCallback(this, ...arguments); // eslint-disable-line prefer-rest-params
+            return ret;
+        };
+    }
+    descriptor[descriptorAttribute] = newAttribute;
+    Object.defineProperty(proto, property, descriptor);
+    return ()=>{
+        // Refetch in case anything's changed in the meantime.
+        const proto = constructor.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(proto, property);
+        descriptor[descriptorAttribute] = originalAttribute;
+        Object.defineProperty(proto, property, descriptor);
+    };
+}
+// Base class for helper classes controlled by Shipper.
+class ShipperHelper extends Disposable(Object) {
+    init() {}
+    addPassiveDocumentListener(event, listener, capture) {
+        if (capture === void 0) capture = false;
+        this.callOnDispose(addEventListener(this.shipper.document, event, listener, {
+            capture,
+            passive: true
+        }));
+    }
+    addPassiveWindowListener(event, listener, capture) {
+        if (capture === void 0) capture = false;
+        this.callOnDispose(addEventListener(this.shipper.window, event, listener, {
+            capture,
+            passive: true
+        }));
+    }
+    // Delegations to shipper
+    get document() {
+        return this.shipper.document;
+    }
+    get window() {
+        return this.shipper.window;
+    }
+    get changeQueue() {
+        return this.shipper.changeQueue;
+    }
+    get serializer() {
+        return this.shipper.serializer;
+    }
+    constructor(shipper){
+        super();
+        this.shipper = shipper;
+    }
+}
+
+export { ShipperHelper, propertySpy };

package/src/mixins/disposable.js

@@ -0,0 +1,125 @@
+import { _class_private_field_loose_base, _class_private_field_loose_key } from "../../js/4101.js";
+import { forEachCatchErrors } from "../arrays.js";
+
+
+
+
+// Mixin for classes that require a disposal lifecycle. Classes should implement a "cleanup" method
+// which is called by dispose.
+//
+function Disposable(superclass) {
+    var _disposerQueue;
+    return _disposerQueue = /*#__PURE__*/ _class_private_field_loose_key("_disposerQueue"), class extends superclass {
+        // Classes should override this method to do their cleanup
+        cleanup() {}
+        // External callers use this to initiate the disposal process.
+        dispose() {
+            if (!this.isDisposed) {
+                // In case the queue callbacks somehow call dispose of this object again, we mark right away.
+                this.isDisposed = true;
+                const errors = forEachCatchErrors(_class_private_field_loose_base(this, _disposerQueue)[_disposerQueue], (disposer)=>disposer());
+                _class_private_field_loose_base(this, _disposerQueue)[_disposerQueue] = [];
+                this.cleanup == null ? void 0 : this.cleanup.call(this);
+                super.dispose == null ? void 0 : super.dispose.call(this);
+                if (errors.length > 0) {
+                    throw new Error("Dispose errors: " + errors.join(", "));
+                }
+            }
+        }
+        // Best-effort cleanup
+        tryDispose() {
+            try {
+                this.dispose();
+            } catch (unused) {
+            /* IGNORE */ }
+        }
+        // Call the given function when the object is disposed.
+        // (Analagous to mobx-utils's disposeOnUnmount for React components.)
+        callOnDispose(func) {
+            _class_private_field_loose_base(this, _disposerQueue)[_disposerQueue].push(func);
+        }
+        constructor(...args){
+            super(...args), Object.defineProperty(this, _disposerQueue, {
+                writable: true,
+                value: void 0
+            }), this.isDisposed = false, _class_private_field_loose_base(this, _disposerQueue)[_disposerQueue] = [];
+        }
+    };
+}
+// Method decorator for ignoring invocations if the object is disposed. Useful
+// for async event handlers.
+//
+// Examples:
+//
+//   @ignoreIfDisposed sendMessage() { ... }
+//   @ignoreIfDisposed onEvent = (event) => { ... }
+//
+function ignoreIfDisposed(target, property, descriptor) {
+    // Support legacy TypeScript property decorators which provide no descriptor
+    if (!descriptor) {
+        const prop = property;
+        Object.defineProperty(target, prop, {
+            configurable: true,
+            get () {
+                var _this = this;
+                const own = Object.getOwnPropertyDescriptor(this, prop);
+                const original = own == null ? void 0 : own.value;
+                if (typeof original !== "function") return original;
+                const wrapped = function wrapped() {
+                    for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                        args[_key] = arguments[_key];
+                    }
+                    if (!_this.isDisposed) {
+                        return original.apply(_this, args);
+                    }
+                };
+                Object.defineProperty(this, prop, {
+                    value: wrapped,
+                    configurable: true,
+                    writable: true
+                });
+                return wrapped;
+            },
+            set (value) {
+                Object.defineProperty(this, prop, {
+                    value,
+                    configurable: true,
+                    writable: true
+                });
+            }
+        });
+        return;
+    }
+    if (descriptor.value) {
+        // Method descriptor
+        const method = descriptor.value;
+        descriptor.value = function() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            if (!this.isDisposed) {
+                return method.apply(this, args);
+            }
+        };
+    } else if (descriptor.initializer) {
+        // Property descriptor. Assuming the initializer returns a function.
+        const { initializer } = descriptor;
+        descriptor.initializer = function() {
+            var _this = this;
+            const method = initializer.call(this);
+            return function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                if (!_this.isDisposed) {
+                    return method.apply(_this, args);
+                }
+            };
+        };
+    } else {
+        throw new Error("Bad descriptor.");
+    }
+    return descriptor;
+}
+
+export { Disposable, ignoreIfDisposed };

package/src/mixins/injectable.js

@@ -0,0 +1,37 @@
+import { createPropertyDecorator } from "../decorators.js";
+
+
+// Mixin for classes following DI conventions.
+//
+function Injectable(superclass) {
+    return class extends superclass {
+        constructor(...args){
+            super(...args);
+            // Objects passed to this mixin are expected to be used via Container
+            const { container, name, singleton } = args[0];
+            this.container = container;
+            if (singleton) {
+                container.set(name, this);
+            }
+        // Since this is a base class, @inject on properties will run after this constructor but before
+        // the derived class constructor. That's important to how @inject's initializer works.
+        // See https://www.typescriptlang.org/docs/handbook/2/classes.html#initialization-order
+        }
+    };
+}
+// Annotate fields for an Injectable class with @inject or @inject("dependencyName") to
+// automatically resolve dependencies.
+//
+// If no dependency name is given, the field's name is used as dependency name.
+const inject = createPropertyDecorator((dependency, _target, property, descriptor)=>{
+    const name = dependency != null ? dependency : property;
+    // Use a lazy getter to work reliably with SWC legacy decorators
+    // This avoids relying on initializer semantics that can differ across compilers
+    // and ensures resolution happens after the container is available.
+    descriptor.get = function() {
+        return this.container.resolve(name);
+    };
+    return descriptor;
+});
+
+export { Injectable, inject };