From 191b25aa46e209debee7dfaedba291a1228ee31f Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 2 Oct 2023 15:12:36 +0200 Subject: [PATCH 01/44] replace custom shadow dom implementation --- .eslintrc.json | 3 + .github/workflows/main.yml | 4 - .github/workflows/pr.yml | 4 - package.json | 35 +- rna.config.js | 10 +- src/ClassDescriptor.ts | 38 + src/Component.ts | 354 +---- src/Context.ts | 77 +- src/CustomElement.ts | 43 + src/CustomElementRegistry.ts | 287 ---- src/DOM.ts | 381 ----- src/JSX.ts | 4 +- src/css.ts | 5 +- src/directives.ts | 4 +- src/env.browser.ts | 1 + src/env.node.ts | 87 ++ src/events.ts | 11 +- src/helpers.ts | 188 +-- src/index.browser.ts | 3 + src/index.node.ts | 3 + src/index.ts | 14 +- src/property.ts | 7 +- src/render.ts | 630 ++++---- src/window.ts | 37 - test/component.spec.js | 257 ++-- test/css.spec.js | 32 +- test/dom.spec.js | 234 --- test/events.spec.js | 106 +- test/integrations/app.js | 26 - test/integrations/lit.spec.js | 99 -- test/integrations/react.spec.js | 82 -- test/integrations/vue.spec.js | 131 -- test/module.spec.js | 24 +- test/property.spec.js | 38 +- test/registry.spec.js | 148 -- test/render.spec.js | 135 +- test/template.spec.js | 103 +- test/typings/Component.ts | 4 +- test/typings/Properties.ts | 13 +- test/typings/render.tsx | 8 +- test/typings/tsconfig.json | 1 + tsconfig.json | 5 +- yarn.lock | 2456 ++++++++++++++----------------- 43 files changed, 2096 insertions(+), 4036 deletions(-) create mode 100644 src/ClassDescriptor.ts create mode 100644 src/CustomElement.ts delete mode 100644 src/CustomElementRegistry.ts delete mode 100644 src/DOM.ts create mode 100644 src/env.browser.ts create mode 100644 src/env.node.ts create mode 100644 src/index.browser.ts create mode 100644 src/index.node.ts delete mode 100644 src/window.ts delete mode 100644 test/dom.spec.js delete mode 100644 test/integrations/app.js delete mode 100644 test/integrations/lit.spec.js delete mode 100644 test/integrations/react.spec.js delete mode 100644 test/integrations/vue.spec.js delete mode 100644 test/registry.spec.js diff --git a/.eslintrc.json b/.eslintrc.json index 844d67c7..b2628994 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,5 +1,8 @@ { "extends": "@chialab/eslint-config/typescript", + "env": { + "browser": true + }, "parserOptions": { "project": false }, diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 9dc01736..834e4ec2 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -136,10 +136,6 @@ jobs: name: DNA path: dist - - name: Run tests - run: yarn test:integrations - continue-on-error: true - test-saucelabs: name: Test SauceLabs runs-on: ubuntu-latest diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index c300b11e..46eea3ee 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -134,10 +134,6 @@ jobs: name: DNA path: dist - - name: Run tests - run: yarn test:integrations - continue-on-error: true - test-saucelabs: name: Test SauceLabs runs-on: ubuntu-latest diff --git a/package.json b/package.json index 7f5a7b66..c1d543f8 100644 --- a/package.json +++ b/package.json @@ -5,15 +5,14 @@ "type": "module", "main": "dist/cjs/dna.js", "module": "dist/esm/dna.js", + "browser": "dist/browser/dna.js", "types": "types/index.d.ts", - "browser": { - "jsdom": false - }, "exports": { ".": { "types": "./types/index.d.ts", - "require": "./dist/cjs/dna.cjs", + "browser": "./dist/browser/dna.js", "node": "./dist/node/dna.js", + "require": "./dist/cjs/dna.cjs", "default": "./dist/esm/dna.js" }, "./jsx-runtime": "./jsx-runtime.js", @@ -48,22 +47,10 @@ "test:browser": "rna test:browser test/*.spec.js --coverage", "test:saucelabs": "rna test:saucelabs test/*.spec.js --browsers 'modern' 'legacy'", "test:node": "rna test:node test/*.spec.js", - "test:integrations": "rna test:browser test/integrations/*.spec.js", "lint": "eslint src test", "docs": "node scripts/apidoc.js", "prepack": "yarn build" }, - "peerDependencies": { - "jsdom": "^17.0.0" - }, - "peerDependenciesMeta": { - "jsdom": { - "optional": true - } - }, - "dependencies": { - "@types/jsdom": "^16.0.0" - }, "devDependencies": { "@babel/runtime": "^7.14.0", "@changesets/cli": "^2.22.0", @@ -74,19 +61,19 @@ "@chialab/rna-bundler": "^0.17.0", "@chialab/rna-node-test-runner": "^0.17.0", "@chialab/rna-saucelabs-test-runner": "^0.17.0", - "@types/jsdom": "^16.0.0", "core-js": "^3.6.4", "eslint": "^8.0.0", "eslint-plugin-jsdoc": "^39.3.2", "htm": "^3.0.3", - "jsdom": "^17.0.0", - "lit": "^2.2.7", "mocha": "^8.4.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", "rimraf": "^3.0.2", - "rxjs": "^6.5.5", - "typescript": "^5.0.0", - "vue": "^3.2.37" + "rxjs": "^7.8.1", + "typescript": "^5.0.0" + }, + "dependencies": { + "@chialab/quantum": "^1.0.0-alpha.0", + "@types/jsdom": "^21.1.3", + "@ungap/custom-elements": "^1.3.0", + "jsdom": "^22.1.0" } } diff --git a/rna.config.js b/rna.config.js index b551b475..919d8610 100644 --- a/rna.config.js +++ b/rna.config.js @@ -7,16 +7,22 @@ const config = { input: 'src/index.ts', output: 'dist/esm/dna.js', format: 'esm', + platform: 'neutral', + }, + { + input: 'src/index.browser.ts', + output: 'dist/browser/dna.js', + format: 'esm', platform: 'browser', }, { - input: 'src/index.ts', + input: 'src/index.node.ts', output: 'dist/node/dna.js', format: 'esm', platform: 'node', }, { - input: 'src/index.ts', + input: 'src/index.node.ts', output: 'dist/cjs/dna.cjs', format: 'cjs', platform: 'node', diff --git a/src/ClassDescriptor.ts b/src/ClassDescriptor.ts new file mode 100644 index 00000000..7908abe0 --- /dev/null +++ b/src/ClassDescriptor.ts @@ -0,0 +1,38 @@ +/** + * Decorator class element descriptor. + */ +export interface ClassElement { + /** + * The kind of the class element. + */ + kind: 'field' | 'method'; + /** + * The name of the element. + */ + key: PropertyKey; + /** + * The type of the element. + */ + placement: 'static' | 'prototype' | 'own'; + /** + * An initializer function. + */ + initializer?: Function; + /** + * The element property descriptor. + */ + descriptor?: PropertyDescriptor; + /** + * The descriptor finisher method. + */ + finisher?: (constructor: Function) => void; +} + +/** + * The class descriptor interface. + */ +export type ClassDescriptor = { + kind: 'class'; + elements: ClassElement[]; + finisher?: (constructor: { new(): T }) => void | { new(): T }; +}; diff --git a/src/Component.ts b/src/Component.ts index 2e9584bb..4368b23e 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -1,29 +1,24 @@ +import { type Realm, attachRealm } from '@chialab/quantum'; import { type Template, type KeyedProperties } from './JSX'; -import { type PropertyConfig, type PropertyObserver, type Props, addObserver, getProperty, reflectPropertyToAttribute, removeObserver, getProperties, reflectAttributeToProperty, getWatched } from './property'; -import { type Constructor, type ClassDescriptor, nativeCustomElements, HTMLElementConstructor, isConnected, hasAttributeImpl, setAttributeImpl, createElementImpl, setPrototypeOf, isElement, defineProperty, cloneChildNodes } from './helpers'; -import { type CustomElementConstructor, customElements, type CustomElement } from './CustomElementRegistry'; -import { DOM } from './DOM'; -import { type DelegatedEventCallback, type ListenerConfig, delegateEventListener, undelegateEventListener, dispatchEvent, dispatchAsyncEvent, getListeners, setListeners } from './events'; -import { type Context, getHostContext, getOrCreateContext, getOrCreateHostContext } from './Context'; +import { type ClassDescriptor } from './ClassDescriptor'; +import { type PropertyConfig, type PropertyObserver, type Props, addObserver, getProperty, reflectPropertyToAttribute, removeObserver, getProperties, reflectAttributeToProperty, getWatched, defineProperties } from './property'; +import { type Constructor, setPrototypeOf, isElement, defineProperty } from './helpers'; +import { type CustomElementConstructor, type CustomElement } from './CustomElement'; +import { type DelegatedEventCallback, type ListenerConfig, delegateEventListener, undelegateEventListener, dispatchEvent, dispatchAsyncEvent, getListeners, setListeners, defineListeners } from './events'; import { internalRender, render } from './render'; import { parseDOM } from './directives'; +import { getRootContext } from './Context'; /** * A symbol which identify components. */ export const COMPONENT_SYMBOL: unique symbol = Symbol(); -/** - * A symbol which identify emulated components. - */ -export const EMULATE_LIFECYCLE_SYMBOL: unique symbol = Symbol(); - /** * An augmented node with component flags. */ export type WithComponentProto = T & { [COMPONENT_SYMBOL]?: boolean; - [EMULATE_LIFECYCLE_SYMBOL]?: boolean; }; /** @@ -39,27 +34,22 @@ export interface ComponentMixin { readonly __jsxProperties__: Props & KeyedProperties; /** - * The defined component name. - * For autonomous custom elements, this is the tag name. + * The realm of the component. */ - readonly is: string; + readonly realm: Realm; /** - * A flag with the connected value of the node. + * The defined component name. + * For autonomous custom elements, this is the tag name. */ - get isConnected(): boolean; + readonly is: string; /** * A list of slot nodes. + * @deprecated Use `realm.childNodes` instead. */ get slotChildNodes(): Node[] | undefined; - /** - * Initialize component properties. - * @deprecated - */ - initialize(): void; - /** * Invoked each time one of a Component's state property is setted, removed, or changed. * @@ -192,19 +182,6 @@ export interface ComponentConstructor(node: T | Node): node i */ export const isComponentConstructor = >(constructor: Function | C): constructor is C => !!constructor.prototype && !!constructor.prototype[COMPONENT_SYMBOL]; -/** - * Should emulate life cycle. - */ -let lifeCycleEmulation = typeof nativeCustomElements === 'undefined'; - -/** - * Flag the element for life cycle emulation. - * @param node The element to flag. - */ -export const emulateLifeCycle = (node: WithComponentProto) => { - lifeCycleEmulation = true; - node[EMULATE_LIFECYCLE_SYMBOL] = true; -}; - -/** - * Life cycle emulation status. - * @returns True if life cycle emulation is enabled. - */ -export const emulatingLifeCycle = () => lifeCycleEmulation; - -/** - * Check if a node require emulated life cycle. - * @param node The node to check. - * @returns The node require emulated life cycle. - */ -export const shouldEmulateLifeCycle = (node: WithComponentProto): node is ComponentInstance => !!node[EMULATE_LIFECYCLE_SYMBOL]; - -/** - * Invoke `connectedCallback` method of a Node (and its descendents). - * It does nothing if life cycle is disabled. - * - * @param node The connected node. - */ -export const connect = (node: Node) => { - if (!isElement(node)) { - return; - } - if (shouldEmulateLifeCycle(node)) { - node.connectedCallback(); - } - const children = cloneChildNodes(node.childNodes); - for (let i = 0, len = children.length; i < len; i++) { - connect(children[i]); - } -}; - -/** - * Invoke `disconnectedCallback` method of a Node (and its descendents). - * It does nothing if life cycle is disabled. - * - * @param node The disconnected node. - */ -export const disconnect = (node: Node) => { - if (!isElement(node)) { - return; - } - if (shouldEmulateLifeCycle(node)) { - node.disconnectedCallback(); - } - const children = cloneChildNodes(node.childNodes); - for (let i = 0, len = children.length; i < len; i++) { - disconnect(children[i]); - } -}; - -/** - * Extract slotted child nodes for initial child nodes. - * @param element The compoonent instance. - * @returns A list of new slotted children. - */ -function initSlotChildNodes>(element: C) { - /* istanbul ignore next */ - if (!element.childNodes.length && element.ownerDocument.readyState === 'loading') { - return; - } - - const context = getHostContext(element) as Context; - const slotChildNodes = cloneChildNodes(element.childNodes); - for (let i = 0, len = slotChildNodes.length; i < len; i++) { - const child = slotChildNodes[i]; - const childContext = getOrCreateContext(child); - DOM.removeChild(element, child, false); - childContext.hosts = [element]; - childContext.parent = context; - } - context.children = slotChildNodes; - return slotChildNodes; -} - /** * Create a base Component class which extends a native constructor. * @param ctor The base HTMLElement constructor to extend. @@ -339,7 +227,7 @@ const mixin = (ctor: Constructor) => { * @returns The list of attributes to observe. */ static get observedAttributes(): string[] { - const propertiesDescriptor = getProperties(this.prototype as ComponentInstance); + const propertiesDescriptor = getProperties(this.prototype as unknown as ComponentInstance); const attributes = []; for (const key in propertiesDescriptor) { const prop = propertiesDescriptor[key as keyof typeof propertiesDescriptor]; @@ -366,19 +254,9 @@ const mixin = (ctor: Constructor) => { }; /** - * Identify shimmed constructors. - * Constructor will skip native constructing when true. + * The realm of the component. */ - static shim?: boolean; - - /** - * Upgrade a plain element prototype. - * @param node The node to upgrade. - * @returns The new prototyped node. - */ - static upgrade(node: HTMLElement) { - return new this(node); - } + readonly realm: Realm; /** * The tag name used for Component definition. @@ -388,20 +266,13 @@ const mixin = (ctor: Constructor) => { return undefined as unknown as string; } - /** - * A flag with the connected value of the node. - * @returns True if the node is connected to the document. - */ - get isConnected(): boolean { - return isConnected.call(this); - } - /** * A list of slot nodes. + * @deprecated Use `realm.childNodes` instead. * @returns The list of slotted nodes. */ get slotChildNodes() { - return (getHostContext(this) as Context).children; + return this.realm.childNodes; } /** @@ -432,11 +303,6 @@ const mixin = (ctor: Constructor) => { const node = isElement(args[0]) && args[0]; const element = (node ? (setPrototypeOf(node, this), node) : this) as this; - const context = getOrCreateHostContext(element); - if (element.parentNode) { - // custom element initialized by the parser - context.parent = context; - } // setup listeners const computedListeners = getListeners(element).map((listener) => ({ @@ -467,28 +333,28 @@ const mixin = (ctor: Constructor) => { } } - initSlotChildNodes(element); - element.initialize(); + const realm = attachRealm(element); + defineProperty(element, 'realm', { + value: realm, + configurable: true, + }); + realm.observe(() => element.forceUpdate()); + return element; } - /** - * Initialize component properties. - * @deprecated - */ - initialize() { } - /** * Invoked each time the Component is appended into a document-connected element. * This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. */ connectedCallback() { - if (!hasAttributeImpl.call(this, ':defined')) { + if (!this.hasAttribute(':defined')) { if (this.is !== this.localName) { // force the is attribute - setAttributeImpl.call(this, 'is', this.is); + this.setAttribute('is', this.is); } - setAttributeImpl.call(this, ':defined', ''); + this.setAttribute(':scope', this.is); + this.setAttribute(':defined', ''); } const listeners = getListeners(this); @@ -651,93 +517,20 @@ const mixin = (ctor: Constructor) => { * @returns The instances of the rendered Components and/or Nodes */ render(): Template | undefined { - return this.slotChildNodes; + return this.realm?.childNodes; } /** * Force an element to re-render. */ forceUpdate() { - const childNodes = this.slotChildNodes || initSlotChildNodes(this); - if (childNodes) { - internalRender( - this, - this.render(), - false, - getOrCreateContext(this), - this - ); + const realm = this.realm; + if (realm) { + realm.requestUpdate(() => { + internalRender(getRootContext(realm.root), this.render(), realm); + }); } } - - /** - * Append a child to the Component. - * - * @param newChild The child to add. - * @returns The appended child. - */ - appendChild(newChild: T): T { - return DOM.appendChild(this, newChild); - } - - /** - * Remove a child from the Component. - * - * @param oldChild The child to remove. - * @returns The removed node. - */ - removeChild(oldChild: T): T { - return DOM.removeChild(this, oldChild); - } - - /** - * Insert a child before another in the Component. - * - * @param newChild The child to insert. - * @param refChild The referred node. - * @returns The inserted child. - */ - insertBefore(newChild: T, refChild: Node | null): T { - return DOM.insertBefore(this, newChild, refChild); - } - - /** - * Replace a child with another in the Component. - * - * @param newChild The child to insert. - * @param oldChild The Node to replace. - * @returns The replaced node. - */ - replaceChild(newChild: Node, oldChild: T): T { - return DOM.replaceChild(this, newChild, oldChild); - } - - /** - * Insert a child at the given position. - * @param position The position of the insertion. - * @param insertedElement The child to insert. - * @returns The inserted child. - */ - insertAdjacentElement(position: InsertPosition, insertedElement: Element): Element | null { - return DOM.insertAdjacentElement(this, position, insertedElement); - } - - /** - * Set a Component attribute. - * @param qualifiedName The attribute name. - * @param value The value to set. - */ - setAttribute(qualifiedName: string, value: string) { - DOM.setAttribute(this, qualifiedName, value); - } - - /** - * Remove a Component attribute. - * @param qualifiedName The attribute name. - */ - removeAttribute(qualifiedName: string) { - DOM.removeAttribute(this, qualifiedName); - } }; defineProperty(Component.prototype, COMPONENT_SYMBOL, { @@ -749,51 +542,12 @@ const mixin = (ctor: Constructor) => { return Component as unknown as ComponentConstructor>; }; -/** - * Create a shim Constructor for Element constructors, in order to extend and instantiate them programmatically, - * because using `new HTMLElement()` in browsers throw `Illegal constructor`. - * - * @param base The constructor or the class to shim. - * @returns A newable constructor with the same prototype. - */ -export const shim = (base: T): T => { - type Component = ComponentInstance>; - type Constrcutor = ComponentConstructor; - - const shim = function ShimComponent(this: Component, ...args: any[]) { - const constructor = this.constructor as Constrcutor; - const is = this.is; - if (!is) { - throw new TypeError('Illegal constructor'); - } - - const tag = customElements.tagNames[is]; - let element: Component; - if (customElements.native && !constructor.shim) { - element = Reflect.construct(base, args, constructor); - if (tag === element.localName) { - return element; - } - } - - element = createElementImpl(tag) as Component; - setPrototypeOf(element, constructor.prototype); - emulateLifeCycle(element); - return element; - } as unknown as T; - setPrototypeOf(shim, base); - (shim as Function).apply = Function.apply; - (shim as Function).call = Function.call; - shim.prototype = base.prototype; - return shim; -}; - /** * Get a native HTMLElement constructor to extend by its name. * @param constructor The constructor (eg. "HTMLAnchorElement") to extend. * @returns A proxy that extends the native constructor. */ -export const extend = (constructor: Constructor) => mixin(shim(constructor)); +export const extend = (constructor: Constructor) => mixin(constructor); /** * The DNA base Component constructor, a Custom Element constructor with @@ -801,7 +555,7 @@ export const extend = (constructor: Constructor) => mi * a complete life cycle implementation. * All DNA components **must** extends this class. */ -export const Component = extend(HTMLElementConstructor); +export const Component = extend(HTMLElement); /** * Decorate a component class in order to watch decorated properties. @@ -846,6 +600,32 @@ export const customElementPrototype = (classOrDe }; }; +/** + * Define a component class. + * @param name The name of the custom element. + * @param constructor The component class to define. + * @param options The custom element options. + * @returns The decorated component class. + * @throws If the name has already been registered. + * @throws An error if the component is already defined. + */ +export function define(name: string, constructor: ComponentConstructor, options?: ElementDefinitionOptions) { + defineProperties(constructor.prototype); + defineListeners(constructor.prototype); + try { + defineProperty(constructor.prototype, 'is', { + writable: false, + configurable: false, + value: name, + }); + } catch { + throw new Error('The registry already contains an entry with the constructor (or is otherwise already defined)'); + } + customElements.define(name, constructor, options); + + return constructor; +} + /** * Decorate and define a component class. * @param name The name of the custom element. @@ -858,9 +638,7 @@ export const customElement = (name: string, options?: ElementDefinitionOptions) (classOrDescriptor: T|ClassDescriptor): any => { if (typeof classOrDescriptor === 'function') { // typescript - const Component = decorateConstructor(classOrDescriptor); - customElements.define(name, Component, options); - return Component; + return define(name, decorateConstructor(classOrDescriptor), options); } // spec 2 @@ -869,9 +647,7 @@ export const customElement = (name: string, options?: ElementDefinitionOptions) kind, elements, finisher(constructor: Function) { - const Component = decorateConstructor(constructor as T); - customElements.define(name, Component, options); - return Component; + return define(name, decorateConstructor(constructor as T), options); }, }; }; diff --git a/src/Context.ts b/src/Context.ts index cd562911..7a202379 100644 --- a/src/Context.ts +++ b/src/Context.ts @@ -1,88 +1,59 @@ import { type Store, type UpdateRequest, type FunctionComponent } from './FunctionComponent'; import { type KeyedProperties, type TreeProperties } from './JSX'; -import { type ComponentInstance } from './Component'; /** * A symbol for node render context. */ const CONTEXT_SYMBOL: unique symbol = Symbol(); -/** - * A symbol for host component render context. - */ -const HOST_CONTEXT_SYMBOL: unique symbol = Symbol(); - /** * Represent a Node with render context symbols. */ export type WithContext = T & { [CONTEXT_SYMBOL]?: Context; - [HOST_CONTEXT_SYMBOL]?: Context; }; /** * The node context interface. */ export type Context = { - children: Node[]; - properties: WeakMap; - renderers: Context[]; - host?: string; - keys?: Map; + node: Node; + root?: Context; + owner?: Context; + children: Context[]; + properties?: KeyedProperties & TreeProperties; fragment?: Context; - oldKeys?: Map; - oldKeyed?: Set; - store?: Store; - Function?: FunctionComponent; - start?: Node; - end?: Node; - parent?: Context; - hosts?: ComponentInstance[]; - currentIndex?: number; namespace?: string; requestUpdate?: UpdateRequest; + keys?: Map; + store?: Store; + end?: Context; + Function?: FunctionComponent; + _keys?: Map; + _keyed?: Set; + _pos: number; }; /** * Create a node context. * @param node The node scope of the context. + * @param root The render root context. + * @param owner The render owner context. * @returns A context object for the node. */ -export const createContext = (node: Node) => { - const context: Context = { - children: [], - renderers: [], - properties: new WeakMap(), - host: (node as unknown as ComponentInstance).is, - }; - - return context; -}; +export const createContext = (node: Node, root?: Context, owner?: Context): Context => ({ + node, + root, + owner, + children: [], + _pos: 0, +}); -/** - * Get the context attached to a node. - * @param node The scope of the context. - * @returns The context object (if it exists). - */ -export const getContext = (node: WithContext) => node[CONTEXT_SYMBOL]; - -/** - * Get (or create) the context attached to a node. - * @param node The scope of the context. - * @returns The context object (if it exists). - */ -export const getOrCreateContext = (node: WithContext) => (node[CONTEXT_SYMBOL] = node[CONTEXT_SYMBOL] || createContext(node)); - -/** - * Get the host context attached to a component. - * @param node The scope of the context. - * @returns The context object (if it exists). - */ -export const getHostContext = (node: WithContext) => node[HOST_CONTEXT_SYMBOL]; +export const getChildNodeContext = (parent: Context, node: Node) => parent.children.find((child) => child.node === node); /** - * Get (or create) the host context attached to a component. + * Get (or create) the root context attached to a node. * @param node The scope of the context. * @returns The context object (if it exists). */ -export const getOrCreateHostContext = (node: WithContext) => (node[HOST_CONTEXT_SYMBOL] = node[HOST_CONTEXT_SYMBOL] || createContext(node)); +export const getRootContext = (node: WithContext) => node[CONTEXT_SYMBOL] = node[CONTEXT_SYMBOL] || createContext(node); diff --git a/src/CustomElement.ts b/src/CustomElement.ts new file mode 100644 index 00000000..c7cbf909 --- /dev/null +++ b/src/CustomElement.ts @@ -0,0 +1,43 @@ +import { type Constructor } from './helpers'; + +/** + * The plain Custom Element interface. + */ +export type CustomElement = T & { + /** + * The tag name used for element definition. + */ + readonly is: string; + + /** + * Invoked each time the element is appended into a document-connected element. + * This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. + */ + connectedCallback(): void; + + /** + * Invoked each time the element is disconnected from the document's DOM. + */ + disconnectedCallback(): void; + + /** + * Invoked each time one of the elements's attributes is added, removed, or changed. + * + * @param attributeName The name of the updated attribute. + * @param oldValue The previous value of the attribute. + * @param newValue The new value for the attribute (null if removed). + */ + attributeChangedCallback(attrName: string, oldValue: null | string, newValue: null | string): void; +} + +/** + * The plain Custom Element constructor. + */ +export type CustomElementConstructor = Constructor & { + /** + * An array containing the names of the attributes to observe. + */ + readonly observedAttributes?: string[]; +} + +export type CustomElementRegistryMap = Record; diff --git a/src/CustomElementRegistry.ts b/src/CustomElementRegistry.ts deleted file mode 100644 index f79297e7..00000000 --- a/src/CustomElementRegistry.ts +++ /dev/null @@ -1,287 +0,0 @@ -import { type Constructor, isConnected, defineProperty, document, nativeCustomElements } from './helpers'; -import { connect, isComponent, isComponentConstructor } from './Component'; -import { defineProperties } from './property'; -import { defineListeners } from './events'; - -/** - * Check the validity of a Custom Element name. - * @param name The name to validate. - * @returns True if the name is valid. - */ -const assertValidateCustomElementName = (name: string): boolean => ( - !!name // missing element name - && name.indexOf('-') >= 1 // custom element names must contain (and must not start with) a hyphen - && /[a-z\-\d]/.test(name) // custom element names can contain lowercase characters, digits and hyphens - && /^[^\d]/i.test(name) // custom element names must not start with a digit -); - -/** - * The plain Custom Element interface. - */ -export type CustomElement = T & { - /** - * The tag name used for element definition. - */ - readonly is: string; - - /** - * Invoked each time the element is appended into a document-connected element. - * This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. - */ - connectedCallback(): void; - - /** - * Invoked each time the element is disconnected from the document's DOM. - */ - disconnectedCallback(): void; - - /** - * Invoked each time one of the elements's attributes is added, removed, or changed. - * - * @param attributeName The name of the updated attribute. - * @param oldValue The previous value of the attribute. - * @param newValue The new value for the attribute (null if removed). - */ - attributeChangedCallback(attrName: string, oldValue: null | string, newValue: null | string): void; -} - -/** - * The plain Custom Element constructor. - */ -export type CustomElementConstructor = Constructor & { - /** - * Should shim constructor. - */ - shim?: boolean; - - /** - * An array containing the names of the attributes to observe. - */ - readonly observedAttributes?: string[]; -} - -export type CustomElementRegistryMap = Record; - -/** - * The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. - */ -export class CustomElementRegistry { - /** - * Support native registry. - */ - readonly native: boolean = !!nativeCustomElements; - - /** - * A global registry. - */ - readonly registry: CustomElementRegistryMap = {}; - - /** - * A map of tag names. - */ - readonly tagNames: { - [key: string]: string; - } = {}; - - /** - * Collect "whenDefined" promises. - */ - readonly queue: { - [key: string]: Array<(value?: unknown) => void>; - } = {}; - - /** - * Document has been already loaded. - */ - protected documentLoaded = false; - - /** - * Create registry instance. - */ - constructor() { - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', () => { - this.upgrade(document.body); - this.documentLoaded = true; - }); - } else { - this.documentLoaded = true; - } - } - - /** - * Get the Custom Element definition for a tag. - * - * @param name The name of the tag. - * @returns The definition for the given tag. - */ - get(name: K): CustomElementRegistryMap[K] { - let constructor = this.registry[name]; - // the native custom elements get method is slow - // assert valid names before calling it. - if (!constructor && nativeCustomElements && assertValidateCustomElementName(name)) { - constructor = nativeCustomElements.get(name) as typeof constructor; - } - return constructor; - } - - /** - * Define a new Custom Element. - * - * @param name The tag name for the element. - * @param constructor The Custom Element constructor. - * @param options A set of definition options, like `extends` for native tag extension. - * @throws If the name is not valid. - * @throws If the constructor is not a function. - * @throws If the name has already been registered. - */ - define(name: keyof CustomElementRegistryMap, constructor: CustomElementConstructor, options: ElementDefinitionOptions = {}) { - if (!assertValidateCustomElementName(name)) { - throw new SyntaxError('The provided name must be a valid Custom Element name'); - } - - if (typeof (constructor as unknown) !== 'function') { - throw new TypeError('The referenced constructor must be a constructor'); - } - - if (this.registry[name]) { - throw new Error('The registry already contains an entry with the same name'); - } - - if (isComponentConstructor(constructor)) { - defineProperties(constructor.prototype); - defineListeners(constructor.prototype); - } - - try { - defineProperty(constructor.prototype, 'is', { - writable: false, - configurable: false, - value: name, - }); - } catch { - throw new Error('The registry already contains an entry with the constructor (or is otherwise already defined)'); - } - - const tagName = (options.extends || name).toLowerCase(); - this.registry[name] = constructor; - this.tagNames[name] = tagName; - - if (nativeCustomElements) { - const forceShim = constructor.shim || false; - let shouldShim = forceShim; - if (tagName !== name) { - shouldShim = constructor.shim = true; - options = { - get extends() { - shouldShim = constructor.shim = forceShim; - return tagName; - }, - }; - } - nativeCustomElements.define(name, constructor, options); - if (shouldShim && this.documentLoaded) { - this.upgrade(document.body); - } - } else { - const queue = this.queue; - if (this.documentLoaded) { - this.upgrade(document.body); - } - const elementQueue = queue[name]; - if (elementQueue) { - for (let i = 0, len = elementQueue.length; i < len; i++) { - elementQueue[i](constructor); - } - } - } - } - - /** - * It returns a Promise that resolves when the named element is defined. - * @param name The Custom Element name. - * @returns A Promise that resolves when the named element is defined. - */ - whenDefined(name: K): Promise { - if (nativeCustomElements) { - return nativeCustomElements - .whenDefined(name) - // not all browsers resolve the constructor class - .then(() => nativeCustomElements.get(name) as CustomElementRegistryMap[K]); - } - if (this.registry[name]) { - return Promise.resolve(this.registry[name]); - } - const queue = this.queue; - const whenDefinedPromise = new Promise((resolve) => { - queue[name] = queue[name] || []; - queue[name].push(resolve); - }); - - return whenDefinedPromise as Promise; - } - - /** - * It upgrades all custom elements in a subtree even before they are connected to the main document. - * @param root A Node instance with descendant elements that are to be upgraded. - */ - upgrade(root: HTMLElement) { - const is = (root.getAttribute('is') || root.tagName).toLowerCase(); - const constructor = this.get(is); - // find all root children - const nodes = root.children; - // iterate all nodes found - for (let i = 0, len = nodes.length; i < len; i++) { - const node = nodes[i] as HTMLElement; - if (node) { - this.upgrade(node); - } - } - if (!constructor) { - return; - } - - if (nativeCustomElements && 'upgrade' in nativeCustomElements) { - // native upgrade - nativeCustomElements.upgrade(root); - } - - // check if already instantiated - if (isComponent(root)) { - root.forceUpdate(); - return; - } - - if (isComponentConstructor(constructor)) { - const attributes: { name: string; value: string }[] = []; - const observed = constructor.observedAttributes || []; - for (let i = 0, len = root.attributes.length; i < len; i++) { - const attr = root.attributes[i]; - if (observed.indexOf(attr.name) !== -1) { - attributes.push({ - name: attr.name, - value: attr.value, - }); - } - } - const element = constructor.upgrade(root); - for (let i = 0, len = attributes.length; i < len; i++) { - const { name, value } = attributes[i]; - if (element.getAttribute(name) === value) { - element.attributeChangedCallback(name, null, value); - } else { - element.setAttribute(name, value); - } - } - if (isConnected.call(element)) { - connect(element); - } - element.forceUpdate(); - } - } -} - -/** - * The global DNA registry instance. - */ -export const customElements = new CustomElementRegistry(); diff --git a/src/DOM.ts b/src/DOM.ts deleted file mode 100644 index 0de3d760..00000000 --- a/src/DOM.ts +++ /dev/null @@ -1,381 +0,0 @@ -import { type Context, getContext, getOrCreateContext, getHostContext } from './Context'; -import { isConnected, appendChildImpl, removeChildImpl, insertBeforeImpl, replaceChildImpl, insertAdjacentElementImpl, getAttributeImpl, hasAttributeImpl, setAttributeImpl, removeAttributeImpl, createDocumentFragmentImpl, createElementImpl, createElementNSImpl, createTextNodeImpl, createCommentImpl, createEventImpl } from './helpers'; -import { type ComponentConstructor, type ComponentInstance, connect, disconnect, shouldEmulateLifeCycle, emulatingLifeCycle, isComponent, isComponentConstructor } from './Component'; -import { customElements } from './CustomElementRegistry'; - -/** - * Remove a slotted node from the old host positions. - * @param newHost The new host parent of the slotted node. - * @param node The slotted node. - * @returns Updated hosts lists. - */ -const removeHosts = (newHost: Node, node: Node) => { - const childContext = getOrCreateContext(node); - const hosts = childContext.hosts; - if (!hosts) { - return childContext.hosts = []; - } - - const parentContext = getHostContext(newHost); - if (!parentContext) { - return hosts; - } - - const parent = parentContext.parent; - for (let i = 0, len = hosts.length; i < len; i++) { - const hostContext = getContext(hosts[i]); - if (!hostContext || parent !== hostContext) { - DOM.removeChild(hosts[i], node); - break; - } - } - - return childContext.hosts = childContext.hosts || []; -}; - -/** - * DOM is a singleton that components uses to access DOM methods. - * By default, it uses browsers' DOM implementation, but it can be set to use a different one. - * For example, in a Node context it is possibile to use DNA thanks to the `jsdom` dom implementation. - * It also handle element life cycle for custom elements unless otherwise specified. - */ -export const DOM = { - /** - * Create a document fragment. - * - * @returns The new DOM fragment. - */ - createDocumentFragment: createDocumentFragmentImpl, - - /** - * Create a new DOM element node for the specified tag. - * @param qualifiedName The specified tag. - * @param options Create element options. - * @returns The new DOM element instance. - */ - createElement(qualifiedName: K, options?: ElementCreationOptions): HTMLElementTagNameMap[K] { - const is = options && options.is; - const name = is || qualifiedName.toLowerCase(); - const node = createElementImpl(qualifiedName); - const constructor = customElements.get(name); - if (constructor && isComponentConstructor(constructor) && !(node instanceof constructor)) { - constructor.upgrade(node); - } - return node; - }, - - /** - * Create a new DOM element node for the specified tag using a namespace. - * @param namespaceURI The namespace of the tag. - * @param qualifiedName The specified tag. - * @returns The new DOM element instance. - */ - createElementNS(namespaceURI: Parameters[0], qualifiedName: Parameters[1]) { - if (namespaceURI === 'http://www.w3.org/1999/xhtml') { - return this.createElement(qualifiedName as keyof HTMLElementTagNameMap); - } - return createElementNSImpl(namespaceURI, qualifiedName as keyof SVGElementTagNameMap); - }, - - /** - * Create a new DOM text node from the specified value. - * - * @param data The specified value. - * @returns The new DOM text instance. - */ - createTextNode: createTextNodeImpl, - - /** - * Create a new DOM comment node from the specified value. - * - * @param data The specified value. - * @returns The new DOM text instance. - */ - createComment(data: string): Comment { - return createCommentImpl(data || ''); - }, - - /** - * Instantiate an Event. - * @param typeArg The name of the event. - * @param eventInitDict A set of options for the event, such as detail and bubbling. - * @returns The new Event instance. - */ - createEvent(typeArg: string, eventInitDict: CustomEventInit = {}) { - return createEventImpl(typeArg, eventInitDict); - }, - - /** - * Append a child to an element. - * - * @param parent The parent element. - * @param newChild The child to add. - * @param slot Should add a slot node. - * @param update Should invoke component update. - * @returns The appended child. - */ - appendChild(parent: Node, newChild: T, slot = isComponent(parent), update = true): T { - const oldParent = newChild.parentNode; - const context = slot ? getHostContext(parent) as Context : getOrCreateContext(parent); - if (slot) { - const slotted = context.children; - const previousIndex = slotted.indexOf(newChild); - if (previousIndex !== -1) { - slotted.splice(previousIndex, 1); - } else { - const hosts = removeHosts(parent, newChild); - hosts.push(parent as ComponentInstance); - } - slotted.push(newChild); - if (update) { - (parent as ComponentInstance).forceUpdate(); - } - return newChild; - } - if (oldParent) { - DOM.removeChild(oldParent, newChild, false); - } - context.children.push(newChild); - appendChildImpl.call(parent, newChild); - if (emulatingLifeCycle() && isConnected.call(newChild)) { - connect(newChild); - } - return newChild; - }, - - /** - * Remove a child from an element. - * - * @param parent The parent element. - * @param oldChild The child to remove. - * @param slot Should remove a slot node. - * @param update Should invoke component update. - * @returns The removed child. - */ - removeChild(parent: Node, oldChild: T, slot = isComponent(parent), update = true): T { - const context = slot ? getHostContext(parent) as Context : getOrCreateContext(parent); - if (slot) { - const oldChildContext = getOrCreateContext(oldChild); - const slotted = context.children; - const io = slotted.indexOf(oldChild); - if (io !== -1) { - const hosts = oldChildContext.hosts; - if (hosts) { - oldChildContext.hosts = hosts.slice(0, hosts.indexOf(parent as ComponentInstance)); - } - slotted.splice(io, 1); - if (update) { - (parent as ComponentInstance).forceUpdate(); - } - } - return oldChild; - } - const connected = isConnected.call(oldChild); - const childNodes = context.children; - const io = childNodes.indexOf(oldChild); - if (io !== -1) { - childNodes.splice(io, 1); - } - removeChildImpl.call(parent, oldChild); - if (emulatingLifeCycle() && connected) { - disconnect(oldChild); - } - return oldChild; - }, - - /** - * Insert a child before another in an element. - * - * @param parent The parent element. - * @param newChild The child to insert. - * @param refChild The referred node. - * @param slot Should insert a slot node. - * @param update Should invoke component update. - * @returns The inserted child. - */ - insertBefore(parent: Node, newChild: T, refChild: Node | null, slot = isComponent(parent), update = true): T { - const context = slot ? getHostContext(parent) as Context : getOrCreateContext(parent); - if (slot) { - const slotted = context.children; - const previousIndex = slotted.indexOf(newChild); - if (previousIndex !== -1) { - slotted.splice(previousIndex, 1); - } else { - const hosts = removeHosts(parent, newChild); - hosts.push(parent as ComponentInstance); - } - - if (refChild) { - const refIndex = slotted.indexOf(refChild); - if (refIndex !== -1) { - slotted.splice(refIndex, 0, newChild); - } - } else { - slotted.push(newChild); - } - if (update) { - (parent as ComponentInstance).forceUpdate(); - } - return newChild; - } - - const parentNode = newChild.parentNode; - if (parentNode) { - DOM.removeChild(parentNode, newChild, false); - } - const childNodes = context.children; - const oldIo = childNodes.indexOf(newChild); - if (oldIo !== -1) { - childNodes.splice(oldIo, 1); - } - const io = refChild ? childNodes.indexOf(refChild) : -1; - if (io !== -1) { - childNodes.splice(io, 0, newChild); - } else { - childNodes.push(newChild); - } - insertBeforeImpl.call(parent, newChild, refChild); - if (emulatingLifeCycle() && isConnected.call(newChild)) { - connect(newChild); - } - return newChild; - }, - - /** - * Replace a child with another in an element. - * - * @param parent The parent element. - * @param newChild The child to insert. - * @param oldChild The node to replace. - * @param slot Should replace a slot node. - * @param update Should invoke component update. - * @returns The replaced child. - */ - replaceChild(parent: Node, newChild: Node, oldChild: T, slot = isComponent(parent), update = true): T { - const context = slot ? getHostContext(parent) as Context : getOrCreateContext(parent); - const parentNode = newChild.parentNode; - - if (slot) { - const slotted = context.children; - const previousIndex = slotted.indexOf(newChild); - if (previousIndex !== -1) { - slotted.splice(previousIndex, 1); - } else { - const hosts = removeHosts(parent, newChild); - hosts.push(parent as ComponentInstance); - } - - const io = slotted.indexOf(oldChild); - slotted.splice(io, 1, newChild); - removeHosts(parent, oldChild); - if (update) { - (parent as ComponentInstance).forceUpdate(); - } - return oldChild; - } - if (parentNode && newChild !== oldChild) { - DOM.removeChild(parentNode, newChild, false); - } - if (emulatingLifeCycle() && isConnected.call(oldChild)) { - disconnect(oldChild); - } - const childNodes = context.children; - const io = childNodes.indexOf(oldChild); - if (io !== -1) { - childNodes.splice(io, 1); - } - replaceChildImpl.call(parent, newChild, oldChild); - if (emulatingLifeCycle() && isConnected.call(newChild)) { - connect(newChild); - } - return oldChild; - }, - - /** - * Insert a child at the given position. - * - * @param parent The parent element. - * @param position The position of the insertion. - * @param insertedElement The child to insert. - * @param slot Should insert a slot node. - * @param update Should invoke component update. - * @returns The inserted child. - */ - insertAdjacentElement(parent: Element, position: InsertPosition, insertedElement: Element, slot = isComponent(parent), update = true): Element | null { - if (position === 'afterbegin') { - const refChild = isComponent(parent) ? (parent.slotChildNodes as Node[])[0] : parent.firstChild; - return DOM.insertBefore(parent, insertedElement, refChild, slot, update); - } - if (position === 'beforeend') { - return DOM.insertBefore(parent, insertedElement, null, slot, update); - } - - return insertAdjacentElementImpl.call(parent, position, insertedElement); - }, - - /** - * Get a Component attribute. - * @param element The node element. - * @param qualifiedName The attribute name. - * @returns The attribute value. - */ - getAttribute(element: Element, qualifiedName: string): string | null { - return getAttributeImpl.call(element, qualifiedName); - }, - - /** - * Check if an element has an attribute. - * @param element The node element to check. - * @param qualifiedName The attribute name to check. - * @returns True if the element has the attribute. - */ - hasAttribute(element: Element, qualifiedName: string): boolean { - return hasAttributeImpl.call(element, qualifiedName); - }, - - /** - * Add/set an attribute to an element. - * @param element The element node to update. - * @param qualifiedName The attribute name to add/set. - * @param value The value to set. - */ - setAttribute(element: Element, qualifiedName: string, value: string): void { - if (shouldEmulateLifeCycle(element)) { - const constructor = element.constructor as ComponentConstructor; - const observedAttributes = constructor.observedAttributes; - const observed = observedAttributes && observedAttributes.indexOf(qualifiedName) !== -1; - if (!observed) { - setAttributeImpl.call(element, qualifiedName, value); - return; - } - - const oldValue = DOM.getAttribute(element, qualifiedName); - setAttributeImpl.call(element, qualifiedName, value); - (element as ComponentInstance).attributeChangedCallback(qualifiedName, oldValue, value); - return; - } - setAttributeImpl.call(element, qualifiedName, value); - }, - - /** - * Remove an element's attribute. - * @param element The element node to update. - * @param qualifiedName The attribute name to remove. - */ - removeAttribute(element: Element, qualifiedName: string): void { - if (shouldEmulateLifeCycle(element)) { - const constructor = element.constructor as ComponentConstructor; - const observedAttributes = constructor.observedAttributes; - const observed = observedAttributes && observedAttributes.indexOf(qualifiedName) !== -1; - if (!observed) { - removeAttributeImpl.call(element, qualifiedName); - return; - } - - const oldValue = DOM.getAttribute(element, qualifiedName); - removeAttributeImpl.call(element, qualifiedName); - (element as ComponentInstance).attributeChangedCallback(qualifiedName, oldValue, null); - } - removeAttributeImpl.call(element, qualifiedName); - }, -}; diff --git a/src/JSX.ts b/src/JSX.ts index 6d462178..be459a7f 100644 --- a/src/JSX.ts +++ b/src/JSX.ts @@ -1,7 +1,6 @@ /* eslint-disable @typescript-eslint/no-namespace, @typescript-eslint/no-empty-interface */ import { type Observable } from './Observable'; import { type FunctionComponent } from './FunctionComponent'; -import { customElements } from './CustomElementRegistry'; import { type HTMLTagNameMap, type SVGTagNameMap } from './Elements'; import { type HTMLAttributes, type IntrinsicElementAttributes } from './Attributes'; import { type Props } from './property'; @@ -329,7 +328,8 @@ export namespace JSXInternal { export interface ElementClass extends HTMLElement { } - export interface ElementAttributesProperty { __jsxProperties__: {} } + // @ts-expect-error Member '__jsxProperties__' implicitly has an 'any' type. + export interface ElementAttributesProperty { __jsxProperties__ } export type IntrinsicElements = { [key: string]: HTMLAttributes & KeyedProperties & TreeProperties & EventProperties & ElementProperties; diff --git a/src/css.ts b/src/css.ts index 312ec9c1..f2c4a7f7 100644 --- a/src/css.ts +++ b/src/css.ts @@ -23,12 +23,11 @@ const CSS_SELECTORS_REGEX = /(#|\*|\.|@|\[|[a-zA-Z])([^{;}]*){/g; * It also converts `:host` selectors for cross browser compatibility. * @param name The component definition name. * @param cssText The CSS string. - * @param extend The builtin element. * @returns A scoped CSS string. * @throws If the scope name is not a string. * @throws If the CSS value is not a string. */ -export const css = (name: string, cssText: string, extend?: string): string => { +export const css = (name: string, cssText: string): string => { if (typeof name !== 'string') { throw new TypeError('The provided name must be a string'); } @@ -37,7 +36,7 @@ export const css = (name: string, cssText: string, extend?: string): string => { } const cached = CACHE[name] = CACHE[name] || {}; - const scope = extend && extend !== name ? `${extend}[is="${name}"]` : name; + const scope = `[:scope="${name}"]`; if (cssText in cached) { return cached[cssText]; } diff --git a/src/directives.ts b/src/directives.ts index 43b1d18e..ce6d1fa8 100644 --- a/src/directives.ts +++ b/src/directives.ts @@ -1,8 +1,6 @@ import { cloneChildNodes } from './helpers'; -import { DOM } from './DOM'; import { type Template, h } from './JSX'; import { type FunctionComponent } from './FunctionComponent'; -import { customElements } from './CustomElementRegistry'; import { getThenableState } from './Thenable'; /** @@ -19,7 +17,7 @@ const DOMParse: FunctionComponent<{ source: string }> = (props, context) => { return store.get('dom') as Node[]; } - const wrapper = DOM.createElement('div'); + const wrapper = document.createElement('div'); wrapper.innerHTML = source; customElements.upgrade(wrapper); const dom = cloneChildNodes(wrapper.childNodes); diff --git a/src/env.browser.ts b/src/env.browser.ts new file mode 100644 index 00000000..3e1b61e5 --- /dev/null +++ b/src/env.browser.ts @@ -0,0 +1 @@ +import '@ungap/custom-elements'; diff --git a/src/env.node.ts b/src/env.node.ts new file mode 100644 index 00000000..8f1bf18d --- /dev/null +++ b/src/env.node.ts @@ -0,0 +1,87 @@ +import JSDOM from 'jsdom'; + +const jsdom = new JSDOM.JSDOM(undefined, { + url: 'http://localhost/', +}); + +globalThis.window = jsdom.window as unknown as Window & typeof globalThis; +globalThis.self = window; +globalThis.document = window.document; +globalThis.customElements = window.customElements; + +globalThis.Node = window.Node; +globalThis.Element = window.Element; +globalThis.HTMLElement = window.HTMLElement; +globalThis.HTMLAnchorElement = window.HTMLAnchorElement; +globalThis.HTMLAreaElement = window.HTMLAreaElement; +globalThis.HTMLAudioElement = window.HTMLAudioElement; +globalThis.HTMLBaseElement = window.HTMLBaseElement; +globalThis.HTMLQuoteElement = window.HTMLQuoteElement; +globalThis.HTMLBodyElement = window.HTMLBodyElement; +globalThis.HTMLBRElement = window.HTMLBRElement; +globalThis.HTMLButtonElement = window.HTMLButtonElement; +globalThis.HTMLCanvasElement = window.HTMLCanvasElement; +globalThis.HTMLTableCaptionElement = window.HTMLTableCaptionElement; +globalThis.HTMLTableColElement = window.HTMLTableColElement; +globalThis.HTMLTableColElement = window.HTMLTableColElement; +globalThis.HTMLDataElement = window.HTMLDataElement; +globalThis.HTMLDataListElement = window.HTMLDataListElement; +globalThis.HTMLModElement = window.HTMLModElement; +globalThis.HTMLDetailsElement = window.HTMLDetailsElement; +globalThis.HTMLDialogElement = window.HTMLDialogElement; +globalThis.HTMLDirectoryElement = window.HTMLDirectoryElement; +globalThis.HTMLDivElement = window.HTMLDivElement; +globalThis.HTMLDListElement = window.HTMLDListElement; +globalThis.HTMLEmbedElement = window.HTMLEmbedElement; +globalThis.HTMLFieldSetElement = window.HTMLFieldSetElement; +globalThis.HTMLFontElement = window.HTMLFontElement; +globalThis.HTMLFormElement = window.HTMLFormElement; +globalThis.HTMLFrameElement = window.HTMLFrameElement; +globalThis.HTMLFrameSetElement = window.HTMLFrameSetElement; +globalThis.HTMLHeadingElement = window.HTMLHeadingElement; +globalThis.HTMLHeadElement = window.HTMLHeadElement; +globalThis.HTMLHRElement = window.HTMLHRElement; +globalThis.HTMLIFrameElement = window.HTMLIFrameElement; +globalThis.HTMLImageElement = window.HTMLImageElement; +globalThis.HTMLInputElement = window.HTMLInputElement; +globalThis.HTMLModElement = window.HTMLModElement; +globalThis.HTMLLabelElement = window.HTMLLabelElement; +globalThis.HTMLLegendElement = window.HTMLLegendElement; +globalThis.HTMLLIElement = window.HTMLLIElement; +globalThis.HTMLLinkElement = window.HTMLLinkElement; +globalThis.HTMLMapElement = window.HTMLMapElement; +globalThis.HTMLMarqueeElement = window.HTMLMarqueeElement; +globalThis.HTMLMenuElement = window.HTMLMenuElement; +globalThis.HTMLMetaElement = window.HTMLMetaElement; +globalThis.HTMLMeterElement = window.HTMLMeterElement; +globalThis.HTMLObjectElement = window.HTMLObjectElement; +globalThis.HTMLOListElement = window.HTMLOListElement; +globalThis.HTMLOptGroupElement = window.HTMLOptGroupElement; +globalThis.HTMLOptionElement = window.HTMLOptionElement; +globalThis.HTMLOutputElement = window.HTMLOutputElement; +globalThis.HTMLParagraphElement = window.HTMLParagraphElement; +globalThis.HTMLParamElement = window.HTMLParamElement; +globalThis.HTMLPictureElement = window.HTMLPictureElement; +globalThis.HTMLPreElement = window.HTMLPreElement; +globalThis.HTMLProgressElement = window.HTMLProgressElement; +globalThis.HTMLQuoteElement = window.HTMLQuoteElement; +globalThis.HTMLScriptElement = window.HTMLScriptElement; +globalThis.HTMLSelectElement = window.HTMLSelectElement; +globalThis.HTMLSlotElement = window.HTMLSlotElement; +globalThis.HTMLSourceElement = window.HTMLSourceElement; +globalThis.HTMLSpanElement = window.HTMLSpanElement; +globalThis.HTMLStyleElement = window.HTMLStyleElement; +globalThis.HTMLTableElement = window.HTMLTableElement; +globalThis.HTMLTableSectionElement = window.HTMLTableSectionElement; +globalThis.HTMLTableCellElement = window.HTMLTableCellElement; +globalThis.HTMLTemplateElement = window.HTMLTemplateElement; +globalThis.HTMLTextAreaElement = window.HTMLTextAreaElement; +globalThis.HTMLTableSectionElement = window.HTMLTableSectionElement; +globalThis.HTMLTableCellElement = window.HTMLTableCellElement; +globalThis.HTMLTableSectionElement = window.HTMLTableSectionElement; +globalThis.HTMLTimeElement = window.HTMLTimeElement; +globalThis.HTMLTitleElement = window.HTMLTitleElement; +globalThis.HTMLTableRowElement = window.HTMLTableRowElement; +globalThis.HTMLTrackElement = window.HTMLTrackElement; +globalThis.HTMLUListElement = window.HTMLUListElement; +globalThis.HTMLVideoElement = window.HTMLVideoElement; diff --git a/src/events.ts b/src/events.ts index 63cfd6c2..676c14f0 100644 --- a/src/events.ts +++ b/src/events.ts @@ -1,6 +1,7 @@ import { type ComponentInstance, type ComponentConstructor } from './Component'; +import { type ClassElement } from './ClassDescriptor'; import { type Methods } from './property'; -import { type Constructor, type ClassElement, HTMLElementConstructor, isElement, isEvent, matchesImpl, createEventImpl, hasOwnProperty, getOwnPropertyDescriptor, getPrototypeOf } from './helpers'; +import { type Constructor, isElement, isEvent, hasOwnProperty, getOwnPropertyDescriptor, getPrototypeOf } from './helpers'; /** * A Symbol which contains all Node delegation. @@ -180,7 +181,7 @@ export const delegateEventListener = (element: Element, eventName: string, selec if (selector) { let target = eventTarget; while (target && target !== element) { - if (isElement(target) && matchesImpl.call(target, selector)) { + if (isElement(target) && target.matches(selector)) { selectorTarget = target; break; } @@ -285,7 +286,7 @@ function initEvent(event: Event | string, detail?: CustomEventInit, bubbles?: bo assertEventCancelable(cancelable); assertEventComposed(composed); - return createEventImpl(event, { + return new window.CustomEvent(event, { detail, bubbles, cancelable, @@ -306,7 +307,7 @@ function initEvent(event: Event | string, detail?: CustomEventInit, bubbles?: bo export const dispatchEvent = (element: Element, event: Event | string, detail?: CustomEventInit['detail'], bubbles: boolean = true, cancelable: boolean = true, composed: boolean = false): boolean => { assertNode(element); event = initEvent(event, detail, bubbles, cancelable, composed); - return HTMLElementConstructor.prototype.dispatchEvent.call(element, event); + return HTMLElement.prototype.dispatchEvent.call(element, event); }; /** @@ -418,7 +419,7 @@ export function defineListener( export const defineListeners = (prototype: T) => { const constructor = prototype.constructor as ComponentConstructor; let ctr = constructor; - while (ctr && ctr.prototype && ctr !== HTMLElementConstructor) { + while (ctr && ctr.prototype && ctr !== HTMLElement) { if (hasOwnProperty.call(ctr.prototype, LISTENERS_SYMBOL)) { break; } diff --git a/src/helpers.ts b/src/helpers.ts index 90795855..c1efc4cc 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -1,44 +1,3 @@ -import { window } from './window'; - -/** - * Decorator class element descriptor. - */ -export interface ClassElement { - /** - * The kind of the class element. - */ - kind: 'field' | 'method'; - /** - * The name of the element. - */ - key: PropertyKey; - /** - * The type of the element. - */ - placement: 'static' | 'prototype' | 'own'; - /** - * An initializer function. - */ - initializer?: Function; - /** - * The element property descriptor. - */ - descriptor?: PropertyDescriptor; - /** - * The descriptor finisher method. - */ - finisher?: (constructor: Function) => void; -} - -/** - * The class descriptor interface. - */ -export type ClassDescriptor = { - kind: 'class'; - elements: ClassElement[]; - finisher?: (constructor: { new(): T }) => void | { new(): T }; -}; - /** * Constructor type helper. */ @@ -47,16 +6,6 @@ export type Constructor = { prototype: T; }; -export const { - Node: NodeConstructor, - HTMLElement: HTMLElementConstructor, - Event: EventConstructor, - CustomEvent: CustomEventConstructor, - document, -} = window; - -export const { DOCUMENT_NODE, TEXT_NODE, COMMENT_NODE, ELEMENT_NODE } = NodeConstructor; - /** * Alias to Array.isArray. */ @@ -108,113 +57,13 @@ export const hasOwnProperty = Object.prototype.hasOwnProperty; */ export const defineProperty = Object.defineProperty; -/** - * Alias to Node.prototype.appendChild. - */ -export const appendChildImpl = NodeConstructor.prototype.appendChild; - -/** - * Alias to Node.prototype.removeChild. - */ -export const removeChildImpl = NodeConstructor.prototype.removeChild; - -/** - * Alias to Node.prototype.insertBefore. - */ -export const insertBeforeImpl = NodeConstructor.prototype.insertBefore; - -/** - * Alias to Node.prototype.replaceChild. - */ -export const replaceChildImpl = NodeConstructor.prototype.replaceChild; - -/** - * Alias to HTMLElement.prototype.insertAdjacentElement. - */ -export const insertAdjacentElementImpl = HTMLElementConstructor.prototype.insertAdjacentElement; - -/** - * Alias to Node.prototype.isConnected. - */ -export const isConnectedImpl = getOwnPropertyDescriptor(NodeConstructor.prototype, 'isConnected'); - -/** - * Alias to HTMLElement.prototype.getAttribute. - */ -export const getAttributeImpl = HTMLElementConstructor.prototype.getAttribute; - -/** - * Alias to HTMLElement.prototype.hasAttribute. - */ -export const hasAttributeImpl = HTMLElementConstructor.prototype.hasAttribute; - -/** - * Alias to HTMLElement.prototype.setAttribute. - */ -export const setAttributeImpl = HTMLElementConstructor.prototype.setAttribute; - -/** - * Alias to HTMLElement.prototype.removeAttribute. - */ -export const removeAttributeImpl = HTMLElementConstructor.prototype.removeAttribute; - -/** - * Alias to HTMLElement.prototype.matches. - */ -export const matchesImpl = HTMLElementConstructor.prototype.matches || - HTMLElementConstructor.prototype.webkitMatchesSelector || - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (HTMLElementConstructor.prototype as any).msMatchesSelector; - -/** - * Alias to document.createDocumentFragment. - */ -export const createDocumentFragmentImpl = document.createDocumentFragment.bind(document); - -/** - * Alias to document.createElement. - */ -export const createElementImpl = document.createElement.bind(document); - -/** - * Alias to document.createElementNS. - */ -export const createElementNSImpl = document.createElementNS.bind(document); - -/** - * Alias to document.createTextNode. - */ -export const createTextNodeImpl = document.createTextNode.bind(document); - -/** - * Alias to document.createComment. - */ -export const createCommentImpl = document.createComment.bind(document); - -/** - * Create a Custom Event. - * @param typeArg The name of the event. - * @param eventInitDict The options of the event. - * @returns The constructed Custom Event. - */ -export const createEventImpl = (typeArg: string, eventInitDict: CustomEventInit = {}): CustomEvent => { - let event; - try { - event = new CustomEventConstructor(typeArg, eventInitDict); - } catch { - event = document.createEvent('CustomEvent'); - event.initCustomEvent(typeArg, eventInitDict.bubbles || false, eventInitDict.cancelable || false, eventInitDict.detail); - } - return event; -}; - /** * Check if the target is a Node instance. * @param target The target to check. * @returns The target is a Node instance. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isNode = (target: any): target is Node => target instanceof NodeConstructor; +export const isNode = (target: any): target is Node => target instanceof Node; /** * Check if a node is a Document instance. @@ -222,7 +71,7 @@ export const isNode = (target: any): target is Node => target instanceof NodeCon * @returns The node is a Document instance. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isDocument = (node: any): node is Document => node && node.nodeType === DOCUMENT_NODE; +export const isDocument = (node: any): node is Document => node && node.nodeType === Node.DOCUMENT_NODE; /** * Check if a node is a Text instance. @@ -230,7 +79,7 @@ export const isDocument = (node: any): node is Document => node && node.nodeType * @returns The node is a Text instance. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isText = (node: any): node is Text => node && node.nodeType === TEXT_NODE; +export const isText = (node: any): node is Text => node && node.nodeType === Node.TEXT_NODE; /** * Check if a node is an Element instance. @@ -238,7 +87,7 @@ export const isText = (node: any): node is Text => node && node.nodeType === TEX * @returns The node is an Element instance. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isElement = (node: any): node is T => node && node.nodeType === ELEMENT_NODE; +export const isElement = (node: any): node is T => node && node.nodeType === Node.ELEMENT_NODE; /** * Check if an object is an Event instance. @@ -246,34 +95,7 @@ export const isElement = (node: any): node is T => node && no * @returns The object is an Event instance. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isEvent = (event: any): event is Event => event instanceof EventConstructor; - -/** - * Check if a Node is connected. - * @param this The Node to check. - * @returns A truthy value for connected targets. - */ -export const isConnected: (this: Node) => boolean = isConnectedImpl ? - (isConnectedImpl.get as (this: Node) => boolean) : - function(this: Node): boolean { - if (isElement(this) || isText(this)) { - const parent = this.parentNode; - if (!parent) { - return false; - } - return isConnected.call(parent); - } - if (isDocument(this)) { - return true; - } - - return false; - }; - -/** - * The native custom elements registry. - */ -export const nativeCustomElements = window.customElements; +export const isEvent = (event: any): event is Event => event instanceof window.Event; /** * Clone an array like instance. diff --git a/src/index.browser.ts b/src/index.browser.ts new file mode 100644 index 00000000..469e1eb5 --- /dev/null +++ b/src/index.browser.ts @@ -0,0 +1,3 @@ +import './env.browser'; + +export * from './index'; diff --git a/src/index.node.ts b/src/index.node.ts new file mode 100644 index 00000000..b42ca719 --- /dev/null +++ b/src/index.node.ts @@ -0,0 +1,3 @@ +import './env.node'; + +export * from './index'; diff --git a/src/index.ts b/src/index.ts index 0e0cf3f2..f49cecd5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,19 +1,9 @@ -export { window } from './window'; -export { - NodeConstructor as Node, - HTMLElementConstructor as HTMLElement, - EventConstructor as Event, - CustomEventConstructor as CustomEvent, - document -} from './helpers'; -export { customElements } from './CustomElementRegistry'; -export { DOM } from './DOM'; export { h, Fragment, jsx, jsxs, jsxDEV } from './JSX'; export { compile, html, render } from './render'; export { css } from './css'; export { listen, delegateEventListener, undelegateEventListener, dispatchEvent, dispatchAsyncEvent, defineListeners } from './events'; export { property, state, observe, getProperty, getProperties, defineProperties, defineProperty } from './property'; -export { connect, disconnect, extend, Component, isComponent, isComponentConstructor, customElement, customElementPrototype } from './Component'; +export { define, extend, Component, isComponent, isComponentConstructor, customElement, customElementPrototype } from './Component'; export { parseDOM, until } from './directives'; export type { @@ -90,11 +80,9 @@ export type { VSlot, VTag } from './JSX'; -export type { CustomElementRegistry } from './CustomElementRegistry'; export type { Observable } from './Observable'; export type { Context } from './Context'; export type { AsyncEvent, DelegatedEventCallback, DelegatedEventDescriptor } from './events'; export type { PropertyDeclaration, PropertyObserver, Props } from './property'; -export type { GlobalNamespace } from './window'; export type { ComponentInstance, ComponentConstructor } from './Component'; export type { FunctionComponent } from './FunctionComponent'; diff --git a/src/property.ts b/src/property.ts index 72af3c1c..f53b92db 100644 --- a/src/property.ts +++ b/src/property.ts @@ -1,4 +1,5 @@ -import { type ClassElement, type Constructor, HTMLElementConstructor, isArray, defineProperty as _defineProperty, getOwnPropertyDescriptor, hasOwnProperty, getPrototypeOf } from './helpers'; +import { type ClassElement } from './ClassDescriptor'; +import { type Constructor, isArray, defineProperty as _defineProperty, getOwnPropertyDescriptor, hasOwnProperty, getPrototypeOf } from './helpers'; import { type ComponentConstructor, type ComponentInstance, isComponent, type ComponentMixin } from './Component'; /** @@ -331,7 +332,7 @@ export const getWatched = (element: WithProperties< * @param isStatic The property definition is static. * @returns The final descriptor. */ -export const defineProperty = (prototype: T, propertyKey: P, declaration: PropertyDeclaration>, symbolKey: symbol, isStatic = false): PropertyDescriptor => { +export const defineProperty = , P extends keyof T>(prototype: T, propertyKey: P, declaration: PropertyDeclaration>, symbolKey: symbol, isStatic = false): PropertyDescriptor => { // eslint-disable-next-line @typescript-eslint/no-explicit-any const symbol: unique symbol = symbolKey as any; const hasAttribute = declaration.attribute || (declaration.attribute == null ? !declaration.state : false); @@ -502,7 +503,7 @@ export const defineProperties = (prototype: T) => { const handled: { [key: string]: boolean } = {}; const constructor = prototype.constructor as ComponentConstructor; let ctr = constructor; - while (ctr && ctr !== HTMLElementConstructor) { + while (ctr && ctr !== HTMLElement) { const propertiesDescriptor = getOwnPropertyDescriptor(ctr, 'properties'); if (propertiesDescriptor) { const descriptorProperties = (propertiesDescriptor.get ? (propertiesDescriptor.get.call(constructor) || {}) : propertiesDescriptor.value) as { diff --git a/src/render.ts b/src/render.ts index 4bbb97f0..71160b71 100644 --- a/src/render.ts +++ b/src/render.ts @@ -1,17 +1,22 @@ import htm from 'htm'; -import { type Context, getHostContext, getContext, getOrCreateContext } from './Context'; +import type { Realm } from '@chialab/quantum'; +import { type Context, getRootContext, createContext, getChildNodeContext } from './Context'; import { isNode, isElement, isText, isArray, getPropertyDescriptor } from './helpers'; import { type TreeProperties, type Template, h, isVFragment, isVObject, isVTag, isVComponent, isVSlot, isVFunction, isVNode, type EventProperties, type ElementProperties, type KeyedProperties } from './JSX'; import { type Store, type UpdateRequest } from './FunctionComponent'; -import { customElements } from './CustomElementRegistry'; -import { type ComponentInstance, isComponent } from './Component'; -import { DOM } from './DOM'; +import { isComponent, type ComponentInstance } from './Component'; import { isThenable, getThenableState } from './Thenable'; import { isObservable, getObservableState } from './Observable'; import { css } from './css'; import { type Props, getProperty } from './property'; -const innerHtml = htm.bind(h); +/** + * Compile a template string into virtual DOM template. + * @param string The string to compile. + * @param values Values to interpolate. + * @returns The virtual DOM template. + */ +export const html = htm.bind(h); /** * Compile a string into virtual DOM template. @@ -21,61 +26,26 @@ const innerHtml = htm.bind(h); export const compile = (string: string): Template => { const array = [string] as string[] & { raw?: string[] }; array.raw = [string]; - return innerHtml(array as unknown as TemplateStringsArray); + return html(array as unknown as TemplateStringsArray); }; -/** - * Create a virtual DOM template. - * @param string The string array to compile. - * @param values Values to interpolate. - * @returns The virtual DOM template. - */ -function html(string: TemplateStringsArray, ...values: unknown[]): Template; -// eslint-disable-next-line jsdoc/require-param, jsdoc/require-returns -/** @deprecated use `compile` function instead. */ -function html(string: string): Template; -/** - * Compile a template string into virtual DOM template. - * @param string The string to compile. - * @param values Values to interpolate. - * @returns The virtual DOM template. - */ -function html(string: string | TemplateStringsArray, ...values: unknown[]): Template { - if (typeof string === 'string') { - return compile(string); - } - return innerHtml(string, ...values); -} - -export { html }; - -/** -* A filter function signature for template items. -* -* @param item The template item to check. -* @returns A truthy value for valid items, a falsy for value for invalid ones. -*/ -export type Filter = (item: Node) => boolean; - /** * Convert strings or classes map to a list of classes. * @param value The value to convert. * @returns A list of classes. */ const convertClasses = (value: string | Record | null | undefined) => { - const classes: string[] = []; if (!value) { - return classes; + return {}; } if (typeof value === 'object') { - for (const k in value) { - if (value[k]) { - classes.push(k); - } - } - return classes; + return value; } - return value.toString().trim().split(' '); + return value.toString().trim().split(' ') + .reduce((acc, key) => { + acc[key] = true; + return acc; + }, {} as Record); }; /** @@ -142,77 +112,65 @@ const isListenerProperty = (propertyKey: string): propertyKey is `on${string}` = /** * Get the current iterating node in rendering context. - * @param context The rendering context. - * @returns A node instance or null. + * @param context The child context. + * @returns A context or null. */ -const getCurrentNode = (context: Context) => (context.children[context.currentIndex as number] || null); +const getCurrentContext = (context: Context) => (context.children[context._pos] || null); /** - * Get the current iterating context in rendering context. - * @param context The rendering context. + * Get the latest iterating node in rendering context. + * @param context The latest child context. * @returns A context or null. */ -const getCurrentContext = (context: Context) => { - const currentNode = getCurrentNode(context); - if (!currentNode) { - return null; - } - return getHostContext(currentNode) || getContext(currentNode) || null; -}; +const getLatestContext = (context: Context) => (context.children[context._pos - 1] || null); /** - * Get a keyed node in the rendering context. + * Get a keyed child context in the rendering context. * @param context The rendering context. * @param key The key to find. * @returns A node instance or null. */ -const getKeyedNode = (context: Context, key: unknown) => { +const getKeyedContext = (context: Context, key: unknown) => { context = context.fragment || context; - return context.oldKeys && context.oldKeys.get(key) || null; + return context._keys && context._keys.get(key) || null; }; /** - * Check if a node instance is keyed in the rendering context. + * Check if a child context instance is keyed in the rendering context. * @param context The rendering context. - * @param node The node to check. + * @param child The child context to check. * @returns True if keyed, false otherwise. */ -const hasKeyedNode = (context: Context, node: Node) => { +const hasKeyedContext = (context: Context, child: Context) => { context = context.fragment || context; - return context.oldKeyed ? context.oldKeyed.has(node) : null; + return context._keyed ? context._keyed.has(child) : null; }; /** - * Add keyed node to rendering context. + * Add keyed child context to rendering context. * @param context The rendering context. - * @param node The node to add. + * @param child The child context to add. * @param key The key to add. */ -const addKeyedNode = (context: Context, node: Node, key: unknown) => { +const addKeyedContext = (context: Context, child: Context, key: unknown) => { context = context.fragment || context; context.keys = context.keys || new Map(); - context.keys.set(key, node); + context.keys.set(key, child); }; /** * Render a a template into the root. - * @param parent The root Node for the render. - * @param slot Should handle slot children. * @param context The render context of the root. - * @param root The render root. * @param rootContext The render root context. * @param template The template to render in Virtual DOM format. - * @param filter The filter function for slotted nodes. + * @param realm The realm to use for the render. * @returns The count of rendered children. */ const renderTemplate = ( - parent: Node, - slot: boolean, context: Context, - root: Node, rootContext: Context, template: Template, - filter?: Filter + realm?: Realm ): number => { if (template == null || template === false) { return 0; @@ -224,19 +182,15 @@ const renderTemplate = ( // call the render function for each child for (let i = 0, len = template.length; i < len; i++) { childCount += renderTemplate( - parent, - slot, context, - root, rootContext, template[i], - filter + realm ); } return childCount; } - let templateNode: Node | undefined; let templateContext: Context | undefined; let templateChildren: Template[] | undefined; let templateNamespace = context.namespace as string; @@ -244,13 +198,10 @@ const renderTemplate = ( if (isObject && isVObject(template)) { if (isVFragment(template)) { return renderTemplate( - parent, - slot, context, - root, rootContext, template.children, - filter + realm ); } @@ -258,29 +209,30 @@ const renderTemplate = ( const { type: Function, key, properties, children } = template; const rootFragment = context.fragment; - let placeholder: Node; - let renderContext: Context; + let rootNode: Node | undefined; if (rootFragment) { - placeholder = rootFragment.start as Node; - renderContext = (getHostContext(placeholder) || getContext(placeholder)) as Context; - } else if (key && (placeholder = getKeyedNode(context, key) as Node)) { - renderContext = getOrCreateContext(placeholder); - } else if (key == null - && (renderContext = getCurrentContext(context) as Context) - && (placeholder = getCurrentNode(context)) - && renderContext.Function === Function - && !hasKeyedNode(context, placeholder) + rootNode = rootFragment.node; + } else if (key) { + rootNode = getKeyedContext(context, key)?.node; + } else if (getCurrentContext(context)?.Function === Function + && !hasKeyedContext(context, getCurrentContext(context)) ) { - // - } else { - placeholder = DOM.createComment(Function.name); - renderContext = getOrCreateContext(placeholder); + rootNode = getCurrentContext(context)?.node; } + + renderTemplate( + context, + rootContext, + rootNode || document.createComment(Function.name), + realm + ); + + const renderContext = getLatestContext(context) as Context; if (key != null) { - addKeyedNode(context, placeholder, key); + addKeyedContext(context, renderContext, key); } - const isAttached = () => context.children.indexOf(placeholder) !== -1; + const isAttached = () => context.children.indexOf(renderContext) !== -1; let running = true; const requestUpdate: UpdateRequest = renderContext.requestUpdate = () => { if (renderContext.requestUpdate !== requestUpdate) { @@ -292,96 +244,80 @@ const renderTemplate = ( if (!isAttached()) { return false; } - internalRender( - parent, - template, - slot, - context, - root, - rootContext, - context.namespace, - renderContext - ); + + if (isComponent(rootContext.node) && realm) { + realm.requestUpdate(() => { + internalRender( + context, + template, + realm, + rootContext, + context.namespace, + renderContext + ); + }); + } else { + internalRender( + context, + template, + realm, + rootContext, + context.namespace, + renderContext + ); + } return true; }; renderContext.Function = Function; - renderContext.start = placeholder; renderContext.store = renderContext.store || new Map(); context.fragment = undefined; const childCount = renderTemplate( - parent, - slot, context, - root, rootContext, - [ - placeholder, - Function( - { - children, - ...properties, - }, - renderContext as Context & { - store: Store; - requestUpdate: UpdateRequest; - }, - requestUpdate, - isAttached, - renderContext - ), - ], - filter + Function( + { + children, + ...properties, + }, + renderContext as Context & { + store: Store; + requestUpdate: UpdateRequest; + }, + requestUpdate, + isAttached, + renderContext + ), + realm ); context.fragment = rootFragment; - renderContext.end = context.children[context.currentIndex as number - 1]; + renderContext.end = context.children[context._pos - 1]; running = false; - return childCount; + return childCount + 1; } // if the current patch is a slot, if (isVSlot(template)) { - const hostContext = getHostContext(root); - if (!hostContext) { + if (!isComponent(rootContext.node) || !realm) { return 0; } - const slotted = hostContext.children; const { properties, children } = template; const name = properties.name; - const filter = (item: Node) => { - const slotContext = getContext(item); - if (!slotContext || !slotContext.hosts || slotContext.hosts[0] === root) { - if (isElement(item)) { - if (!name) { - return !item.getAttribute('slot'); - } - - return item.getAttribute('slot') === name; - } - } - - return !name; - }; - + const slotted = realm.childNodesBySlot(name); const childCount = renderTemplate( - parent, - slot, context, - root, rootContext, slotted, - filter + realm ); if (!childCount) { return renderTemplate( - parent, - slot, context, - root, rootContext, - children + children, + realm ); } return childCount; @@ -390,146 +326,134 @@ const renderTemplate = ( const { key, children, namespace: namespaceURI } = template; templateNamespace = namespaceURI || context.namespace as string; - let currentNode: Node | null; let currentContext: Context | null; - let isNew = false; if (key != null) { - templateNode = getKeyedNode(context, key) as Node; - } else if ((currentNode = getCurrentNode(context)) - && (currentContext = getCurrentContext(context)) - && isElement(currentNode) - && !hasKeyedNode(context, currentNode) - && (!currentContext.parent || currentContext.parent === rootContext) + templateContext = getKeyedContext(context, key) as Context; + } else if ((currentContext = getCurrentContext(context)) + && isElement(currentContext.node) + && !hasKeyedContext(context, currentContext) + && (currentContext.owner === rootContext) ) { - if (isVComponent(template) && currentNode.constructor === template.type) { - templateNode = currentNode; + if (isVComponent(template) && currentContext.node.constructor === template.type) { templateContext = currentContext; - } else if (isVTag(template) && currentNode.tagName.toLowerCase() === template.type.toLowerCase()) { - templateNode = currentNode; + } else if (isVTag(template) && currentContext.node.tagName.toLowerCase() === template.type.toLowerCase()) { templateContext = currentContext; } } - if (!templateNode) { + if (!templateContext) { if (isVNode(template)) { - templateNode = template.type; + templateContext = getChildNodeContext(context, template.type) || createContext(template.type, rootContext); } else if (isVComponent(template)) { - templateNode = new template.type(); - isNew = true; + templateContext = createContext(new template.type(), rootContext, rootContext); } else { - templateNode = DOM.createElementNS(templateNamespace, template.type); - isNew = true; + templateContext = createContext(document.createElementNS(templateNamespace, template.type), rootContext, rootContext); } } - if (key != null) { - addKeyedNode(context, templateNode, key); - } + if (templateContext) { + const templateNode = templateContext.node; + if (key != null) { + addKeyedContext(context, templateContext, key); + } - // update the Node properties - templateContext = templateContext || getHostContext(templateNode) || getOrCreateContext(templateNode); - if (isNew) { - templateContext.parent = rootContext; - } - const oldProperties = templateContext.properties.get(rootContext) as KeyedProperties & TreeProperties & EventProperties & ElementProperties; - const properties = template.properties as KeyedProperties & TreeProperties & EventProperties & ElementProperties; - if (oldProperties) { - for (const key in oldProperties) { - if (!(key in properties)) { - properties[key as keyof typeof properties] = undefined; + // update the Node properties + const oldProperties = (templateContext.properties || {}) as KeyedProperties & TreeProperties & EventProperties & ElementProperties; + const properties = { ...template.properties } as KeyedProperties & TreeProperties & EventProperties & ElementProperties; + if (oldProperties) { + for (const key in oldProperties) { + if (!(key in properties)) { + properties[key as keyof typeof properties] = undefined; + } } } - } - templateContext.properties.set(rootContext, properties); - - let propertyKey: keyof typeof properties; - for (propertyKey in properties) { - const value = properties[propertyKey]; - const oldValue = oldProperties && oldProperties[propertyKey]; - if (oldValue === value) { - if (isRenderingInput(templateNode, propertyKey)) { - setValue(templateNode, propertyKey as unknown as 'value', value); + templateContext.properties = properties; + + let propertyKey: keyof typeof properties; + for (propertyKey in properties) { + const value = properties[propertyKey]; + const oldValue = oldProperties && oldProperties[propertyKey]; + if (oldValue === value) { + if (isRenderingInput(templateNode, propertyKey)) { + setValue(templateNode, propertyKey as unknown as 'value', value); + } + continue; } - continue; - } - if (propertyKey === 'style') { - const style = (templateNode as HTMLElement).style; - const oldStyles = convertStyles(oldValue as string); - const newStyles = convertStyles(value as string); - for (const propertyKey in oldStyles) { - if (!(propertyKey in newStyles)) { - style.removeProperty(propertyKey); + if (propertyKey === 'style') { + const style = (templateNode as HTMLElement).style; + const newStyles = properties.style = convertStyles(value as string); + for (const propertyKey in (oldValue as Record)) { + if (!(propertyKey in newStyles)) { + style.removeProperty(propertyKey); + } } - } - for (const propertyKey in newStyles) { - style.setProperty(propertyKey, newStyles[propertyKey]); - } - continue; - } else if (propertyKey === 'class') { - const classList = (templateNode as HTMLElement).classList; - const newClasses = convertClasses(value as string); - if (oldValue) { - const oldClasses = convertClasses(oldValue as string); - for (let i = 0, len = oldClasses.length; i < len; i++) { - const className = oldClasses[i]; - if (newClasses.indexOf(className) === -1) { - classList.remove(className); + for (const propertyKey in newStyles) { + style.setProperty(propertyKey, newStyles[propertyKey]); + } + continue; + } else if (propertyKey === 'class') { + const classList = (templateNode as HTMLElement).classList; + const newClasses = properties.class = convertClasses(value as string); + if (oldValue) { + for (const className in oldValue) { + if (!newClasses[className]) { + classList.remove(className); + } } } - } - for (let i = 0, len = newClasses.length; i < len; i++) { - const className = newClasses[i]; - if (!classList.contains(className)) { - classList.add(className); + for (const className in newClasses) { + if (newClasses[className] && !classList.contains(className)) { + classList.add(className); + } } + continue; + } else if (isListenerProperty(propertyKey) && !(propertyKey in templateNode.constructor.prototype)) { + const eventName = propertyKey.substring(2); + if (oldValue) { + (templateNode as HTMLElement).removeEventListener(eventName, oldValue as EventListener); + } + if (value) { + (templateNode as HTMLElement).addEventListener(eventName, value as EventListener); + } + continue; } - continue; - } else if (isListenerProperty(propertyKey) && !(propertyKey in templateNode.constructor.prototype)) { - const eventName = propertyKey.substring(2); - if (oldValue) { - (templateNode as HTMLElement).removeEventListener(eventName, oldValue as EventListener); - } - if (value) { - (templateNode as HTMLElement).addEventListener(eventName, value as EventListener); - } - continue; - } - const type = typeof value; - const wasType = typeof oldValue; - const isReference = (value && type === 'object') || type === 'function'; - const wasReference = (oldValue && wasType === 'object') || wasType === 'function'; + const type = typeof value; + const wasType = typeof oldValue; + const isReference = (value && type === 'object') || type === 'function'; + const wasReference = (oldValue && wasType === 'object') || wasType === 'function'; - if (isReference || wasReference || isRenderingInput(templateNode, propertyKey)) { - setValue(templateNode, propertyKey, value); - } else if (isVComponent(template)) { - if (type === 'string') { - const observedAttributes = template.type.observedAttributes; - if (!observedAttributes || observedAttributes.indexOf(propertyKey) === -1) { - const descriptor = (propertyKey in templateNode) && getPropertyDescriptor(templateNode, propertyKey); - if (!descriptor || !descriptor.get || descriptor.set) { - setValue(templateNode, propertyKey, value); + if (isReference || wasReference || isRenderingInput(templateNode, propertyKey)) { + setValue(templateNode, propertyKey, value); + } else if (isVComponent(template)) { + if (type === 'string') { + const observedAttributes = template.type.observedAttributes; + if (!observedAttributes || observedAttributes.indexOf(propertyKey) === -1) { + const descriptor = (propertyKey in templateNode) && getPropertyDescriptor(templateNode, propertyKey); + if (!descriptor || !descriptor.get || descriptor.set) { + setValue(templateNode, propertyKey, value); + } + } else { + const property = getProperty(templateNode as ComponentInstance, propertyKey as keyof Props); + if (property && property.fromAttribute) { + setValue(templateNode, propertyKey, (property.fromAttribute as Function).call(templateNode, value as string)); + } } } else { - const property = getProperty(templateNode as ComponentInstance, propertyKey as keyof Props); - if (property && property.fromAttribute) { - setValue(templateNode, propertyKey, (property.fromAttribute as Function).call(templateNode, value as string)); - } + setValue(templateNode, propertyKey, value); } - } else { - setValue(templateNode, propertyKey, value); } - } - if (value == null || value === false) { - if ((templateNode as HTMLElement).hasAttribute(propertyKey)) { - (templateNode as HTMLElement).removeAttribute(propertyKey); - } - } else if (!isReference) { - const attrValue = value === true ? '' : (value as string).toString(); - if ((templateNode as HTMLElement).getAttribute(propertyKey) !== attrValue) { - (templateNode as HTMLElement).setAttribute(propertyKey, attrValue); + if (value == null || value === false) { + if ((templateNode as HTMLElement).hasAttribute(propertyKey)) { + (templateNode as HTMLElement).removeAttribute(propertyKey); + } + } else if (!isReference) { + const attrValue = value === true ? '' : (value as string).toString(); + if ((templateNode as HTMLElement).getAttribute(propertyKey) !== attrValue) { + (templateNode as HTMLElement).setAttribute(propertyKey, attrValue); + } } } } @@ -537,10 +461,7 @@ const renderTemplate = ( templateChildren = children; } else if (isObject && isThenable(template)) { return renderTemplate( - parent, - slot, context, - root, rootContext, h((props, context) => { const status = getThenableState(template as Promise); @@ -553,15 +474,12 @@ const renderTemplate = ( } return status.result as Template; }, null), - filter + realm ); } else if (isObject && isObservable(template)) { const observable = template; return renderTemplate( - parent, - slot, context, - root, rootContext, h((props, context) => { const status = getObservableState(observable); @@ -584,75 +502,56 @@ const renderTemplate = ( } return status.current as Template; }, null), - filter + realm ); } else if (isObject && isNode(template)) { - templateNode = template; - templateContext = templateContext || getHostContext(templateNode) || getOrCreateContext(templateNode); + templateContext = templateContext || getChildNodeContext(context, template) || createContext(template, rootContext); } else { - const hostContext = getHostContext(root); - if (typeof template === 'string' && hostContext && hostContext.host && (parent as HTMLElement).tagName === 'STYLE') { - template = css(hostContext.host, template as string, customElements.tagNames[hostContext.host]); - (parent as HTMLStyleElement).setAttribute('name', hostContext.host); + if (typeof template === 'string' && isComponent(rootContext.node) && (context.node as HTMLElement).tagName === 'STYLE') { + template = css(rootContext.node.is, template as string); } - let currentNode: Node; let currentContext: Context | null; - if ((currentNode = getCurrentNode(context)) - && (currentContext = getCurrentContext(context)) - && isText(currentNode) - && (!currentContext.parent || currentContext.parent === rootContext) + if ((currentContext = getCurrentContext(context)) + && isText(currentContext.node) + && (currentContext.owner === rootContext) ) { - templateNode = currentNode; templateContext = currentContext; - if (templateNode.textContent != template) { - templateNode.textContent = template as string; + if (templateContext.node.textContent != template) { + templateContext.node.textContent = template as string; } } else { // convert non-Node template into Text - templateNode = DOM.createTextNode(template as string); - templateContext = getOrCreateContext(templateNode); - templateContext.parent = rootContext; + templateContext = createContext(document.createTextNode(template as string), rootContext, rootContext); } } - if (!templateNode || !templateContext || (filter && !filter(templateNode))) { + if (!templateContext) { return 0; } // now, we are confident that the input is a Node, - if (context.children.indexOf(templateNode) !== -1) { + if (context.children.indexOf(templateContext) !== -1) { // the node is already in the child list // remove nodes until the correct instance let currentContext: Context | null; while ((currentContext = getCurrentContext(context)) && (templateContext !== currentContext)) { - DOM.removeChild(parent, getCurrentNode(context), slot, false); + context.node.removeChild(currentContext.node); + context.children.splice(context._pos, 1); } - - (context.currentIndex as number)++; + context._pos++; } else { // we need to insert the new node into the tree - DOM.insertBefore(parent, templateNode, getCurrentNode(context), slot, false); - (context.currentIndex as number)++; + context.node.insertBefore(templateContext.node, getCurrentContext(context)?.node); + context.children.splice(context._pos++, 0, templateContext); } - if (templateNode && templateContext && isElement(templateNode)) { - if (!templateContext.parent) { - templateContext.parent = rootContext; - } - - const isRenderer = templateContext.renderers.indexOf(rootContext) !== -1; - if ((templateChildren && templateChildren.length) || isRenderer) { - // the Node has slotted children, trigger a new render context for them - if (!isRenderer) { - templateContext.renderers.push(rootContext); - } + if (templateContext && isElement(templateContext.node)) { + if ((templateChildren && templateChildren.length) || templateContext.root === rootContext) { internalRender( - templateNode, - templateChildren, - isComponent(templateNode), templateContext, - root, + templateChildren, + realm, rootContext, templateNamespace ); @@ -666,96 +565,87 @@ const renderTemplate = ( * Render a set of nodes into the render root, with some checks for Nodes in order to avoid * useless changes in the tree and to mantain or update the state of compatible Nodes. * - * @param parent The root Node for the render. - * @param template The child (or the children) to render in Virtual DOM format or already generated. - * @param slot Should handle slot children. * @param context The render context of the root. - * @param root The current root node of the render. + * @param template The child (or the children) to render in Virtual DOM format or already generated. + * @param realm The realm to use for the render. * @param rootContext The current root context of the render. * @param namespace The current namespace uri of the render. * @param fragment The fragment context to update. * @returns The resulting child nodes list. */ export const internalRender = ( - parent: Node, - template: Template, - slot = isComponent(parent), context: Context, - root: Node, + template: Template, + realm?: Realm, rootContext: Context = context, - namespace: string = (parent as HTMLElement).namespaceURI || 'http://www.w3.org/1999/xhtml', + namespace: string = context.namespace || 'http://www.w3.org/1999/xhtml', fragment?: Context ) => { - const childNodes = context.children; + const contextChildren = context.children; const previousFragment = context.fragment; const previousNamespace = context.namespace; - const previousIndex = context.currentIndex; + const previousIndex = context._pos; - if (!context.parent) { - context.parent = context; - } context.namespace = namespace; context.fragment = fragment; - let lastNode: Node | undefined; + let endContext: Context | undefined; if (fragment) { - context.currentIndex = context.children.indexOf(fragment.start as Node); - lastNode = fragment.end as Node; + context._pos = context.children.indexOf(fragment); + endContext = fragment.end as Context; if (fragment.keys) { - fragment.oldKeys = fragment.keys; - fragment.oldKeyed = new Set(fragment.keys.values()); + fragment._keys = fragment.keys; + fragment._keyed = new Set(fragment.keys.values()); } delete fragment.keys; } else { - context.currentIndex = 0; + context._pos = 0; if (context.keys) { - context.oldKeys = context.keys; - context.oldKeyed = new Set(context.keys.values()); + context._keys = context.keys; + context._keyed = new Set(context.keys.values()); } delete context.keys; } renderTemplate( - parent, - slot, context, - root, rootContext, - template + template, + realm ); // all children of the root have been handled, // we can start to cleanup the tree // remove all Nodes that are outside the result range - const currentIndex = context.currentIndex as number; - let lastIndex: number; - if (lastNode) { - lastIndex = childNodes.indexOf(lastNode) + 1; + const currentIndex = context._pos; + let end: number; + if (endContext) { + end = contextChildren.indexOf(endContext) + 1; } else { - lastIndex = childNodes.length; + end = contextChildren.length; } - while (currentIndex < lastIndex) { - DOM.removeChild(parent, childNodes[--lastIndex], slot, false); + + while (currentIndex <= --end) { + const [child] = contextChildren.splice(end, 1); + if (child.node.parentNode === context.node || (realm?.open && child.node.parentNode === realm.node && realm.root === context.node)) { + context.node.removeChild(child.node); + } } if (fragment) { - delete fragment.oldKeys; - delete fragment.oldKeyed; + delete fragment._keys; + delete fragment._keyed; context.fragment = previousFragment; context.namespace = previousNamespace; } else { - delete context.oldKeys; - delete context.oldKeyed; + delete context._keys; + delete context._keyed; context.fragment = previousFragment; context.namespace = previousNamespace; - context.currentIndex = previousIndex; - } - - if (slot) { - (parent as ComponentInstance).forceUpdate(); + context._pos = previousIndex; } - return childNodes; + return contextChildren; }; /** @@ -764,20 +654,12 @@ export const internalRender = ( * * @param input The child (or the children) to render in Virtual DOM format or already generated. * @param root The root Node for the render. - * @param slot Should render to slot children. * @returns The resulting child Nodes. */ -export const render = (input: Template, root: Node = DOM.createDocumentFragment(), slot: boolean = true): Node | Node[] | void => { - const isComponentRoot = isComponent(root); - const childNodes = internalRender( - root, - input, - slot && isComponentRoot, - slot && isComponentRoot ? getHostContext(root) as Context : getOrCreateContext(root), - root - ); +export const render = (input: Template, root: Node = document.createDocumentFragment()): Node | Node[] | void => { + const childNodes = internalRender(getRootContext(root), input).map((child) => child.node); if (!isArray(input) && !(input != null && isVObject(input) && isVFragment(input)) && childNodes.length < 2) { return childNodes[0]; } - return childNodes.slice(0); + return childNodes; }; diff --git a/src/window.ts b/src/window.ts deleted file mode 100644 index 0e39c3dd..00000000 --- a/src/window.ts +++ /dev/null @@ -1,37 +0,0 @@ -import jsdom from 'jsdom'; - -export type GlobalNamespace = Window & typeof globalThis & { - _jsdom?: jsdom.JSDOM; -}; - -let namespace: GlobalNamespace; -if (typeof window !== 'undefined') { - /* eslint-env browser */ - namespace = window; -} else if (typeof global !== 'undefined') { - /* eslint-env node */ - const jsd = new jsdom.JSDOM(); - namespace = jsd.window as unknown as GlobalNamespace; - namespace._jsdom = jsd; -} else { - // ¯\_(ツ)_/¯ - const throwPlatform = function() { - throw new Error('Missing DOM implementation.'); - }; - namespace = { - Node: throwPlatform, - HTMLElement: throwPlatform, - Event: throwPlatform, - CustomEvent: throwPlatform, - document: { - createDocumentFragment: throwPlatform, - createElement: throwPlatform, - createElementNS: throwPlatform, - createTextNode: throwPlatform, - createComment: throwPlatform, - addEventListener() { }, - }, - } as unknown as GlobalNamespace; -} - -export { namespace as window }; diff --git a/test/component.spec.js b/test/component.spec.js index 2ccbc1c8..51c9023c 100644 --- a/test/component.spec.js +++ b/test/component.spec.js @@ -10,13 +10,13 @@ describe('Component', function() { let wrapper; beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); - wrapper.ownerDocument.body.appendChild(wrapper); + wrapper = document.createElement('div'); + document.body.appendChild(wrapper); }); afterEach(() => { if (wrapper.parentNode) { - wrapper.ownerDocument.body.removeChild(wrapper); + document.body.removeChild(wrapper); } }); @@ -24,10 +24,10 @@ describe('Component', function() { it('should create a node', () => { const is = getComponentName(); class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement); + DNA.define(is, TestElement); const element = new TestElement(); - expect(element).to.be.an.instanceof(DNA.window.HTMLElement); + expect(element).to.be.an.instanceof(HTMLElement); expect(element.is).to.be.equal(is); expect(element.tagName).to.be.equal(is.toUpperCase()); }); @@ -35,24 +35,24 @@ describe('Component', function() { it('should extend a native node', () => { const is = getComponentName(); class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement, { + DNA.define(is, TestElement, { extends: 'article', }); const element = new TestElement(); - expect(element).to.be.an.instanceof(DNA.window.HTMLElement); + expect(element).to.be.an.instanceof(HTMLElement); expect(element.is).to.be.equal(is); expect(element.tagName).to.be.equal('ARTICLE'); }); it('should create a base class starting from the anchor base class', () => { - const HTMLAnchorElement = DNA.extend(DNA.window.HTMLAnchorElement); + const HTMLAnchorElement = DNA.extend(window.HTMLAnchorElement); class TestElement extends HTMLAnchorElement { } - DNA.customElements.define(getComponentName(), TestElement, { extends: 'a' }); + DNA.define(getComponentName(), TestElement, { extends: 'a' }); const element = new TestElement(); element.href = 'https://www.webcomponents.org/introduction'; - expect(TestElement).to.not.equal(DNA.window.HTMLAnchorElement); - expect(element).to.be.an.instanceof(DNA.window.HTMLAnchorElement); + expect(TestElement).to.not.equal(HTMLAnchorElement); + expect(element).to.be.an.instanceof(HTMLAnchorElement); expect('href' in element).to.be.true; }); @@ -144,7 +144,7 @@ describe('Component', function() { it('should setup properties for extended elements', () => { const _forceUpdate = spy(); - let TestElement = class TestElement extends DNA.extend(DNA.Component) { + let TestElement = class TestElement extends DNA.extend(HTMLElement) { static get properties() { return { myCustomProp1: { @@ -192,7 +192,7 @@ describe('Component', function() { }); it('should setup properties for extended components (ts over ts)', () => { - let BaseElement = class BaseElement extends DNA.extend(DNA.Component) { + let BaseElement = class BaseElement extends DNA.extend(HTMLElement) { static get properties() { return { myCustomProp1: { @@ -255,7 +255,7 @@ describe('Component', function() { }); it('should setup properties for extended components (js over ts)', () => { - let BaseElement = class BaseElement extends DNA.extend(DNA.Component) { + let BaseElement = class BaseElement extends DNA.extend(HTMLElement) { static get properties() { return { myCustomProp1: { @@ -301,7 +301,7 @@ describe('Component', function() { super.forceUpdate(); } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); expect(element).to.have.property('myCustomProp1'); @@ -364,8 +364,8 @@ describe('Component', function() { wrapper.innerHTML = `<${is}>`; expect(connected).to.be.false; - DNA.customElements.define(is, TestElement); - DNA.customElements.upgrade(wrapper); + DNA.define(is, TestElement); + customElements.upgrade(wrapper); expect(connected).to.be.true; }); }); @@ -391,8 +391,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -402,10 +402,10 @@ describe('Component', function() { ].forEach((element) => { expect(element.spyConnectedCallback).to.not.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(element.spyConnectedCallback).to.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.removeChild(wrapper, element); + wrapper.removeChild(element); expect(element.spyDisconnectedCallback).to.have.been.called(); }); }); @@ -432,8 +432,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -441,14 +441,14 @@ describe('Component', function() { new TestElement1(), new TestElement2(), ].forEach((element) => { - const child = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child); + const child = document.createElement('div'); + wrapper.appendChild(child); expect(element.spyConnectedCallback).to.not.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.replaceChild(wrapper, element, child); + wrapper.replaceChild(element, child); expect(element.spyConnectedCallback).to.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.replaceChild(wrapper, child, element); + wrapper.replaceChild(child, element); expect(element.spyConnectedCallback).to.have.been.called(); expect(element.spyDisconnectedCallback).to.have.been.called(); expect(element.spyConnectedCallback).to.have.been.called.once; @@ -478,8 +478,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -487,14 +487,14 @@ describe('Component', function() { new TestElement1(), new TestElement2(), ].forEach((element) => { - const child = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child); + const child = document.createElement('div'); + wrapper.appendChild(child); expect(element.spyConnectedCallback).to.not.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.insertBefore(wrapper, element, child); + wrapper.insertBefore(element, child); expect(element.spyConnectedCallback).to.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.insertBefore(wrapper, child, element); + wrapper.insertBefore(child, element); expect(element.spyConnectedCallback).to.have.been.called.once; expect(element.spyDisconnectedCallback).to.not.have.been.called(); }); @@ -522,8 +522,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -533,10 +533,10 @@ describe('Component', function() { ].forEach((element) => { expect(element.spyConnectedCallback).to.not.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(element.spyConnectedCallback).to.have.been.called(); expect(element.spyDisconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(element.spyConnectedCallback).to.have.been.called.twice; expect(element.spyDisconnectedCallback).to.have.been.called.once; }); @@ -552,8 +552,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -562,7 +562,7 @@ describe('Component', function() { new TestElement2(), ].forEach((element) => { expect(element.innerHTML).to.be.equal(''); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(element.innerHTML).to.be.equal('

test

'); }); }); @@ -572,19 +572,19 @@ describe('Component', function() { it('return `true` if element is connected', () => { const is = getComponentName(); class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement); + DNA.define(is, TestElement); - const element = DNA.DOM.createElement(is); - DNA.DOM.appendChild(wrapper, element); + const element = document.createElement(is); + wrapper.appendChild(element); expect(element.isConnected).to.be.true; }); it('return `false` if element is disconnected', () => { const is = getComponentName(); class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement); + DNA.define(is, TestElement); - const element = DNA.DOM.createElement(is); + const element = document.createElement(is); expect(element.isConnected).to.be.false; }); }); @@ -610,8 +610,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -648,8 +648,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -686,8 +686,8 @@ describe('Component', function() { class TestElement1 extends TestElement {} class TestElement2 extends TestElement {} - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2, { + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2, { extends: 'article', }); @@ -965,10 +965,10 @@ describe('Component', function() { const name = getComponentName(); wrapper.innerHTML = `
`; const element = wrapper.children[0]; - DNA.customElements.define(name, TestElement, { + DNA.define(name, TestElement, { extends: 'section', }); - DNA.customElements.upgrade(element); + customElements.upgrade(element); expect(propertyChangedCallback).to.have.been.called(); expect(propertyChangedCallback).to.have.been.called.with('page', 1, 2); @@ -1034,7 +1034,7 @@ describe('Component', function() { ], TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(element.innerHTML).to.be.equal('

'); element.title = 'test'; expect(element.innerHTML).to.be.equal('

test

'); @@ -1091,7 +1091,7 @@ describe('Component', function() { element.title = 'Test'; element.description = 'Test'; element.author = 'Test'; - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.have.been.called.exactly(4); expect(element.innerHTML).to.be.equal('
Test
Test
Test
Test
0
'); }); @@ -1187,7 +1187,7 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); element.textContent = 'Test'; @@ -1202,13 +1202,17 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); + const realm = element.realm; element.textContent = 'Test'; + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].textContent).to.be.equal('Test'); + realm.dangerouslyClose(); }); }); @@ -1221,10 +1225,11 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); element.innerHTML = 'Test'; + expect(element.innerHTML.indexOf('
')).to.be.equal(0); expect(element.innerHTML.indexOf('Test')).to.not.be.equal(-1); }); @@ -1237,14 +1242,18 @@ describe('Component', function() {
`; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); + const realm = element.realm; element.innerHTML = 'Test'; + + realm.dangerouslyOpen(); expect(element.children).to.have.lengthOf(1); expect(element.children[0].tagName).to.be.equal('DIV'); expect(element.children[0].children[0].tagName).to.be.equal('SPAN'); expect(element.children[0].children[0].textContent).to.be.equal('Test'); + realm.dangerouslyClose(); }); }); @@ -1260,14 +1269,14 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child = new TestChild(); expect(connectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.appendChild(child); expect(connectedCallback).to.have.been.called(); element.appendChild(child); @@ -1290,16 +1299,16 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child = new TestChild(); expect(connectedCallback).to.not.have.been.called(); expect(disconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); - DNA.DOM.appendChild(wrapper, child); + wrapper.appendChild(element); + wrapper.appendChild(child); expect(connectedCallback).to.have.been.called(); expect(disconnectedCallback).to.not.have.been.called(); element.appendChild(child); @@ -1317,14 +1326,18 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + const realm = element.realm; + wrapper.appendChild(element); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('SPAN'); expect(element.childNodes[0].childNodes[0].textContent).to.be.equal('Test'); + realm.dangerouslyClose(); }); it('should append slot item', () => { @@ -1337,15 +1350,19 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - const span = DNA.DOM.createElement('span'); - DNA.DOM.appendChild(wrapper, element); + const realm = element.realm; + const span = document.createElement('span'); + wrapper.appendChild(element); element.appendChild(span); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('SPAN'); + realm.dangerouslyClose(); }); }); @@ -1361,14 +1378,14 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child = new TestChild(); expect(disconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.appendChild(child); expect(disconnectedCallback).to.not.have.been.called(); element.removeChild(child); @@ -1383,19 +1400,27 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - const span = DNA.DOM.createElement('span'); - DNA.DOM.appendChild(wrapper, element); + const realm = element.realm; + const span = document.createElement('span'); + wrapper.appendChild(element); element.appendChild(span); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('SPAN'); + realm.dangerouslyClose(); + element.removeChild(span); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes).to.have.lengthOf(0); + realm.dangerouslyClose(); }); }); @@ -1411,15 +1436,15 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child1 = new TestChild(); const child2 = new TestChild(); expect(connectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.appendChild(child1); element.insertBefore(child2, child1); expect(connectedCallback).to.have.been.called.twice; @@ -1443,8 +1468,8 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child1 = new TestChild(); @@ -1452,8 +1477,8 @@ describe('Component', function() { expect(connectedCallback).to.not.have.been.called(); expect(disconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); - DNA.DOM.appendChild(wrapper, child2); + wrapper.appendChild(element); + wrapper.appendChild(child2); element.appendChild(child1); element.insertBefore(child2, child1); expect(connectedCallback).to.have.been.called.exactly(3); @@ -1468,18 +1493,22 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - const span = DNA.DOM.createElement('span'); - const input = DNA.DOM.createElement('input'); - DNA.DOM.appendChild(wrapper, element); + const realm = element.realm; + const span = document.createElement('span'); + const input = document.createElement('input'); + wrapper.appendChild(element); element.appendChild(span); element.insertBefore(input, span); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('INPUT'); expect(element.childNodes[0].childNodes[1].tagName).to.be.equal('SPAN'); + realm.dangerouslyClose(); }); }); @@ -1500,8 +1529,8 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child1 = new TestChild(); @@ -1509,7 +1538,7 @@ describe('Component', function() { expect(connectedCallback).to.not.have.been.called(); expect(disconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.appendChild(child1); element.replaceChild(child2, child1); expect(connectedCallback).to.have.been.called.twice; @@ -1532,8 +1561,8 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child1 = new TestChild(); @@ -1542,8 +1571,8 @@ describe('Component', function() { expect(connectedCallback).to.not.have.been.called(); expect(disconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); - DNA.DOM.appendChild(wrapper, child2); + wrapper.appendChild(element); + wrapper.appendChild(child2); element.appendChild(child1); element.replaceChild(child2, child1); expect(connectedCallback).to.have.been.called.exactly(3); @@ -1558,17 +1587,21 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - const span = DNA.DOM.createElement('span'); - const input = DNA.DOM.createElement('input'); - DNA.DOM.appendChild(wrapper, element); + const realm = element.realm; + const span = document.createElement('span'); + const input = document.createElement('input'); + wrapper.appendChild(element); element.appendChild(span); element.replaceChild(input, span); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('INPUT'); + realm.dangerouslyClose(); }); }); @@ -1584,15 +1617,15 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child1 = new TestChild(); const child2 = new TestChild(); expect(connectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.appendChild(child1); element.insertAdjacentElement('afterbegin', child2); expect(connectedCallback).to.have.been.called.twice; @@ -1616,8 +1649,8 @@ describe('Component', function() { } } - DNA.customElements.define(getComponentName(), TestElement); - DNA.customElements.define(getComponentName(), TestChild); + DNA.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestChild); const element = new TestElement(); const child1 = new TestChild(); @@ -1625,8 +1658,8 @@ describe('Component', function() { expect(connectedCallback).to.not.have.been.called(); expect(disconnectedCallback).to.not.have.been.called(); - DNA.DOM.appendChild(wrapper, element); - DNA.DOM.appendChild(wrapper, child2); + wrapper.appendChild(element); + wrapper.appendChild(child2); element.appendChild(child1); element.insertAdjacentElement('beforeend', child2); expect(connectedCallback).to.have.been.called.exactly(3); @@ -1641,18 +1674,22 @@ describe('Component', function() { `; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - const span = DNA.DOM.createElement('span'); - const input = DNA.DOM.createElement('input'); - DNA.DOM.appendChild(wrapper, element); + const realm = element.realm; + const span = document.createElement('span'); + const input = document.createElement('input'); + wrapper.appendChild(element); element.appendChild(span); element.insertAdjacentElement('afterbegin', input); + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('INPUT'); expect(element.childNodes[0].childNodes[1].tagName).to.be.equal('SPAN'); + realm.dangerouslyClose(); }); }); diff --git a/test/css.spec.js b/test/css.spec.js index 3496115f..81ae1672 100644 --- a/test/css.spec.js +++ b/test/css.spec.js @@ -7,22 +7,22 @@ describe('css', function() { it('should convert :host selector', () => { const style = DNA.css('test-style', ':host { color: red; }'); - expect(style).to.be.equal('test-style { color: red; }'); + expect(style).to.be.equal('[:scope="test-style"] { color: red; }'); }); it('should convert :host selector with modifiers', () => { const style = DNA.css('test-style', ':host(.test) { color: red; }'); - expect(style).to.be.equal('test-style.test { color: red; }'); + expect(style).to.be.equal('[:scope="test-style"].test { color: red; }'); }); it('should scope a selector', () => { const style = DNA.css('test-style', '.test { color: red; }'); - expect(style).to.be.equal('test-style .test { color: red; }'); + expect(style).to.be.equal('[:scope="test-style"] .test { color: red; }'); }); it('should scope a selector inside a media query', () => { const style = DNA.css('test-style', '@media (min-width: 640px) { .test { color: red; } }'); - expect(style).to.be.equal('@media (min-width: 640px) { test-style .test { color: red; } }'); + expect(style).to.be.equal('@media (min-width: 640px) { [:scope="test-style"] .test { color: red; } }'); }); it('should convert a more complex CSS #1', () => { @@ -80,41 +80,41 @@ h3 { 100% { top: 10px; } }`); expect(style).to.be.equal(`@charset "UTF-8"; -test-style { +[:scope="test-style"] { color: #5F9EA0; } -test-style > * { +[:scope="test-style"] > * { background-color: #5F9EA0; } -test-style.test { +[:scope="test-style"].test { color: #5F9EA0; } -test-style.test > * { +[:scope="test-style"].test > * { background-color: #5F9EA0; } -test-style h3 { +[:scope="test-style"] h3 { color: blue; } -test-style #before1:before { +[:scope="test-style"] #before1:before { content: "Hello"; } -test-style #before2:before { +[:scope="test-style"] #before2:before { content: attr(id); } -test-style #before3:before { +[:scope="test-style"] #before3:before { content: "Hello world"; } -test-style #before4:before { +[:scope="test-style"] #before4:before { content: "attr(id)"; } -test-style #before5:before { +[:scope="test-style"] #before5:before { content: "♜"; } -test-style #before6:before { +[:scope="test-style"] #before6:before { content: "hello-world"; } @media (min-width: 0) { - test-style h1,test-style h2 { + [:scope="test-style"] h1,[:scope="test-style"] h2 { color: inherit; } } diff --git a/test/dom.spec.js b/test/dom.spec.js deleted file mode 100644 index d92889be..00000000 --- a/test/dom.spec.js +++ /dev/null @@ -1,234 +0,0 @@ -// eslint-disable-next-line import/no-unresolved -import * as DNA from '@chialab/dna'; -import { expect } from '@chialab/ginsenghino'; -import { getComponentName } from './helpers.spec.js'; - -describe('DOM', function() { - this.timeout(10 * 1000); - - let wrapper; - beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); - wrapper.ownerDocument.body.appendChild(wrapper); - }); - - afterEach(() => { - if (wrapper.parentNode) { - wrapper.ownerDocument.body.removeChild(wrapper); - } - }); - - describe('#createElement', () => { - it('should create an element', () => { - const element = DNA.DOM.createElement('div'); - expect(element.tagName).to.be.equal('DIV'); - expect(element.namespaceURI).to.be.equal('http://www.w3.org/1999/xhtml'); - }); - - it('should create a defined element', () => { - const is = getComponentName(); - class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement); - - const element = DNA.DOM.createElement(is); - expect(element.is).to.be.equal(is); - expect(element.tagName).to.be.equal(is.toUpperCase()); - }); - - it('should create and extend a native element', () => { - const is = getComponentName(); - class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement, { - extends: 'article', - }); - - const element = DNA.DOM.createElement('article', { is }); - expect(element.is).to.be.equal(is); - expect(element.tagName).to.be.equal('ARTICLE'); - }); - }); - - describe('#createElementNS', () => { - it('should create SVG element', () => { - const element = DNA.DOM.createElementNS('http://www.w3.org/2000/svg', 'svg'); - expect(element.tagName).to.be.equal('svg'); - expect(element.namespaceURI).to.be.equal('http://www.w3.org/2000/svg'); - }); - }); - - describe('#appendChild', () => { - it('should append a child to a parent', () => { - const child = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child); - expect(child.parentNode).to.be.equal(wrapper); - }); - - it('should move a child from a parent to another parent', () => { - const parent = DNA.DOM.createElement('div'); - const child = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(parent, child); - expect(child.parentNode).to.be.equal(parent); - DNA.DOM.appendChild(wrapper, child); - expect(parent.childNodes).to.have.lengthOf(0); - expect(child.parentNode).to.be.equal(wrapper); - }); - }); - - describe('#removeChild', () => { - it('should remove a child from a parent', () => { - const child = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child); - expect(child.parentNode).to.be.equal(wrapper); - DNA.DOM.removeChild(wrapper, child); - expect(child.parentNode).to.be.null; - expect(wrapper.childNodes).to.have.lengthOf(0); - }); - }); - - describe('#insertBefore', () => { - it('should insert a child before another', () => { - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child1); - DNA.DOM.insertBefore(wrapper, child2, child1); - expect(child1.parentNode).to.be.equal(wrapper); - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes[0]).to.be.equal(child2); - expect(wrapper.childNodes[1]).to.be.equal(child1); - }); - - it('should insert a child (and remove it from the previous parent) before another', () => { - const parent = DNA.DOM.createElement('div'); - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(parent, child2); - expect(child2.parentNode).to.be.equal(parent); - DNA.DOM.appendChild(wrapper, child1); - DNA.DOM.insertBefore(wrapper, child2, child1); - expect(parent.childNodes).to.have.lengthOf(0); - expect(child1.parentNode).to.be.equal(wrapper); - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes[0]).to.be.equal(child2); - expect(wrapper.childNodes[1]).to.be.equal(child1); - }); - - it('should do nothing when child is already before another', () => { - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child1); - DNA.DOM.appendChild(wrapper, child2); - DNA.DOM.insertBefore(wrapper, child1, child2); - expect(child1.parentNode).to.be.equal(wrapper); - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes[0]).to.be.equal(child1); - expect(wrapper.childNodes[1]).to.be.equal(child2); - }); - }); - - describe('#replaceChild', () => { - it('should reaplce a child in a parent', () => { - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child1); - expect(child1.parentNode).to.be.equal(wrapper); - DNA.DOM.replaceChild(wrapper, child2, child1); - expect(child1.parentNode).to.be.null; - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes).to.have.lengthOf(1); - expect(wrapper.childNodes[0]).to.be.equal(child2); - }); - - it('should reaplce a child (and remove it from the previous parent) in a parent', () => { - const parent = DNA.DOM.createElement('div'); - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(parent, child2); - expect(child2.parentNode).to.be.equal(parent); - DNA.DOM.appendChild(wrapper, child1); - expect(child1.parentNode).to.be.equal(wrapper); - DNA.DOM.replaceChild(wrapper, child2, child1); - expect(parent.childNodes).to.have.lengthOf(0); - expect(child1.parentNode).to.be.null; - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes).to.have.lengthOf(1); - expect(wrapper.childNodes[0]).to.be.equal(child2); - }); - - it('should do nothing if the node is the same', () => { - const child = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child); - expect(child.parentNode).to.be.equal(wrapper); - DNA.DOM.replaceChild(wrapper, child, child); - expect(child.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes).to.have.lengthOf(1); - }); - }); - - describe('#insertAdjacentElement', () => { - it('should insert a child at first position', () => { - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child1); - DNA.DOM.insertAdjacentElement(wrapper, 'afterbegin', child2); - expect(child1.parentNode).to.be.equal(wrapper); - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes[0]).to.be.equal(child2); - expect(wrapper.childNodes[1]).to.be.equal(child1); - }); - - it('should insert a child at last position', () => { - const child1 = DNA.DOM.createElement('div'); - const child2 = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(wrapper, child1); - DNA.DOM.insertAdjacentElement(wrapper, 'beforeend', child2); - expect(child1.parentNode).to.be.equal(wrapper); - expect(child2.parentNode).to.be.equal(wrapper); - expect(wrapper.childNodes[0]).to.be.equal(child1); - expect(wrapper.childNodes[1]).to.be.equal(child2); - }); - }); - - describe('#getAttribute', () => { - it('should get an empty node attribute', () => { - const element = DNA.DOM.createElement('button'); - expect(DNA.DOM.getAttribute(element, 'type')).to.be.null; - }); - - it('should get a node attribute', () => { - const element = DNA.DOM.createElement('button'); - element.setAttribute('type', '1'); - expect(DNA.DOM.getAttribute(element, 'type')).to.be.equal('1'); - }); - }); - - describe('#setAttribute', () => { - it('should set a node attribute', () => { - const element = DNA.DOM.createElement('button'); - DNA.DOM.setAttribute(element, 'type', '1'); - expect(element.getAttribute('type')).to.be.equal('1'); - }); - }); - - describe('#hasAttribute', () => { - it('should return `true` if node has an attribute', () => { - const element = DNA.DOM.createElement('button'); - DNA.DOM.setAttribute(element, 'type', '1'); - expect(DNA.DOM.hasAttribute(element, 'type')).to.be.true; - }); - - it('should return `false` if node has an attribute', () => { - const element = DNA.DOM.createElement('button'); - expect(DNA.DOM.hasAttribute(element, 'type')).to.be.false; - }); - }); - - describe('#removeAttribute', () => { - it('should remove a node attribute', () => { - const element = DNA.DOM.createElement('button'); - DNA.DOM.setAttribute(element, 'type', '1'); - expect(DNA.DOM.getAttribute(element, 'type')).to.be.equal('1'); - DNA.DOM.removeAttribute(element, 'type'); - expect(DNA.DOM.getAttribute(element, 'type')).to.be.null; - }); - }); -}); diff --git a/test/events.spec.js b/test/events.spec.js index 45d42f57..ffe5f662 100644 --- a/test/events.spec.js +++ b/test/events.spec.js @@ -10,7 +10,7 @@ describe('events', function() { let wrapper; beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); + wrapper = document.createElement('div'); wrapper.ownerDocument.body.appendChild(wrapper); }); @@ -40,8 +40,8 @@ describe('events', function() { it('should dispatch custom events that does bubble', () => { const listener = spy(); const details = {}; - const child = DNA.DOM.createElement('button'); - DNA.DOM.appendChild(wrapper, child); + const child = document.createElement('button'); + wrapper.appendChild(child); wrapper.addEventListener('click', (event) => listener(event.bubbles)); DNA.dispatchEvent(child, 'click', details, true); expect(listener).to.have.been.called(); @@ -52,8 +52,8 @@ describe('events', function() { const listener = spy(); const details = {}; - const child = DNA.DOM.createElement('button'); - DNA.DOM.appendChild(wrapper, child); + const child = document.createElement('button'); + wrapper.appendChild(child); wrapper.addEventListener('click', (event) => listener(event.cancelable)); DNA.dispatchEvent(child, 'click', details, true, true); expect(listener).to.have.been.called(); @@ -64,7 +64,7 @@ describe('events', function() { const listener1 = spy(); const listener2 = spy(); - const button = DNA.DOM.createElement('button'); + const button = document.createElement('button'); wrapper.appendChild(button); wrapper.addEventListener('click', (event) => listener1(event.bubbles)); @@ -80,8 +80,8 @@ describe('events', function() { const listener = spy(); const details = {}; - const child = DNA.DOM.createElement('button'); - DNA.DOM.appendChild(wrapper, child); + const child = document.createElement('button'); + wrapper.appendChild(child); wrapper.addEventListener('click', (event) => listener(event.cancelable)); DNA.dispatchEvent(child, 'click', details, true, false); @@ -131,7 +131,7 @@ describe('events', function() { event.preventDefault(); }); - const button = DNA.DOM.createElement('button'); + const button = document.createElement('button'); wrapper.appendChild(button); DNA.delegateEventListener(wrapper, 'click', 'button', listener); DNA.delegateEventListener(wrapper, 'mouseenter', 'button', listener); @@ -174,8 +174,8 @@ describe('events', function() { event.preventDefault(); }); - const child = DNA.DOM.createElement('div'); - const button = DNA.DOM.createElement('button'); + const child = document.createElement('div'); + const button = document.createElement('button'); wrapper.appendChild(child); child.appendChild(button); DNA.delegateEventListener(child, 'click', 'div', listener1); @@ -205,8 +205,8 @@ describe('events', function() { event.preventDefault(); }); - const child = DNA.DOM.createElement('div'); - const button = DNA.DOM.createElement('button'); + const child = document.createElement('div'); + const button = document.createElement('button'); wrapper.appendChild(child); child.appendChild(button); DNA.delegateEventListener(child, 'click', 'div', listener1); @@ -231,7 +231,7 @@ describe('events', function() { event.preventDefault(); }); - const button = DNA.DOM.createElement('button'); + const button = document.createElement('button'); wrapper.appendChild(button); DNA.delegateEventListener(wrapper, 'click', 'button', listener); DNA.delegateEventListener(wrapper, 'click', 'button', listener2); @@ -244,7 +244,7 @@ describe('events', function() { }); it('should do nothing if there are no delegations', () => { - const button = DNA.DOM.createElement('button'); + const button = document.createElement('button'); expect(() => { DNA.undelegateEventListener(button, 'click', null, (event) => { event.preventDefault(); @@ -253,7 +253,7 @@ describe('events', function() { }); it('should do nothing if there are no delegations for an event', () => { - const button = DNA.DOM.createElement('button'); + const button = document.createElement('button'); DNA.delegateEventListener(button, 'click', null, (event) => { event.preventDefault(); }); @@ -300,15 +300,15 @@ describe('events', function() { } } - DNA.customElements.define(is, TestElement); + DNA.define(is, TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); element.click(); expect(callback).to.have.been.called(); expect(callback).to.have.been.called.with('click', is.toUpperCase()); - element.dispatchEvent(DNA.DOM.createEvent('change', { + element.dispatchEvent(new window.CustomEvent('change', { bubbles: true, cancelable: true, composed: false, @@ -335,10 +335,10 @@ describe('events', function() { } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); element.querySelector('button').click(); expect(callback).to.have.been.called(); @@ -383,17 +383,17 @@ describe('events', function() { } } - DNA.customElements.define(getComponentName(), BaseElement); - DNA.customElements.define(getComponentName(), TestElement1); - DNA.customElements.define(getComponentName(), TestElement2); + DNA.define(getComponentName(), BaseElement); + DNA.define(getComponentName(), TestElement1); + DNA.define(getComponentName(), TestElement2); const element1 = new TestElement1(); - DNA.DOM.appendChild(wrapper, element1); + wrapper.appendChild(element1); expect(callback1).to.not.have.been.called(); expect(callback2).to.not.have.been.called(); expect(callback3).to.not.have.been.called(); element1.querySelector('button').click(); - element1.dispatchEvent(DNA.DOM.createEvent('change', { + element1.dispatchEvent(new window.CustomEvent('change', { bubbles: true, cancelable: true, composed: false, @@ -403,9 +403,9 @@ describe('events', function() { expect(callback3).to.have.been.called(); const element2 = new TestElement2(); - DNA.DOM.appendChild(wrapper, element2); + wrapper.appendChild(element2); element2.querySelector('button').click(); - element2.dispatchEvent(DNA.DOM.createEvent('drop', { + element2.dispatchEvent(new window.CustomEvent('drop', { bubbles: true, cancelable: true, composed: false, @@ -437,7 +437,7 @@ describe('events', function() { ], TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); element.click(); expect(callback).to.have.been.called(); @@ -466,7 +466,7 @@ describe('events', function() { ], TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); element.querySelector('button').click(); expect(callback).to.have.been.called.with('click', 'BUTTON'); @@ -534,12 +534,12 @@ describe('events', function() { ], TestElement2); const element1 = new TestElement1(); - DNA.DOM.appendChild(wrapper, element1); + wrapper.appendChild(element1); expect(callback1).to.not.have.been.called(); expect(callback2).to.not.have.been.called(); expect(callback3).to.not.have.been.called(); element1.querySelector('button').click(); - element1.dispatchEvent(DNA.DOM.createEvent('change', { + element1.dispatchEvent(new window.CustomEvent('change', { bubbles: true, cancelable: true, composed: false, @@ -549,9 +549,9 @@ describe('events', function() { expect(callback3).to.have.been.called(); const element2 = new TestElement2(); - DNA.DOM.appendChild(wrapper, element2); + wrapper.appendChild(element2); element2.querySelector('button').click(); - element2.dispatchEvent(DNA.DOM.createEvent('drop', { + element2.dispatchEvent(new window.CustomEvent('drop', { bubbles: true, cancelable: true, composed: false, @@ -593,7 +593,7 @@ describe('events', function() { }, DNA.Component); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); element.click(); expect(callback).to.have.been.called(); @@ -634,7 +634,7 @@ describe('events', function() { }, DNA.Component); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); element.querySelector('button').click(); expect(callback).to.have.been.called(); @@ -726,12 +726,12 @@ describe('events', function() { }, BaseElement); const element1 = new TestElement1(); - DNA.DOM.appendChild(wrapper, element1); + wrapper.appendChild(element1); expect(callback1).to.not.have.been.called(); expect(callback2).to.not.have.been.called(); expect(callback3).to.not.have.been.called(); element1.querySelector('button').click(); - element1.dispatchEvent(DNA.DOM.createEvent('change', { + element1.dispatchEvent(new window.CustomEvent('change', { bubbles: true, cancelable: true, composed: false, @@ -741,9 +741,9 @@ describe('events', function() { expect(callback3).to.have.been.called(); const element2 = new TestElement2(); - DNA.DOM.appendChild(wrapper, element2); + wrapper.appendChild(element2); element2.querySelector('button').click(); - element2.dispatchEvent(DNA.DOM.createEvent('drop', { + element2.dispatchEvent(new window.CustomEvent('drop', { bubbles: true, cancelable: true, composed: false, @@ -762,10 +762,10 @@ describe('events', function() { }); class TestElement extends DNA.Component {} - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); wrapper.addEventListener('click', callback); expect(callback).to.not.have.been.called(); element.click(); @@ -779,10 +779,10 @@ describe('events', function() { }); class TestElement extends DNA.Component {} - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); wrapper.addEventListener('click', callback); expect(callback).to.not.have.been.called(); element.dispatchEvent('click'); @@ -807,7 +807,7 @@ describe('events', function() { event.respondWith(async () => event.target.tagName); } } - DNA.customElements.define(is, TestElement); + DNA.define(is, TestElement); const element = new TestElement(); const response = await element.dispatchAsyncEvent('click'); @@ -826,10 +826,10 @@ describe('events', function() { return DNA.html``; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.delegateEventListener('click', 'button', callback); expect(callback).to.not.have.been.called(); element.querySelector('button').click(); @@ -848,10 +848,10 @@ describe('events', function() { return DNA.html``; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); element.delegateEventListener('click', 'button', callback); expect(callback).to.not.have.been.called(); element.querySelector('button').click(); @@ -868,7 +868,7 @@ describe('events', function() { event.preventDefault(); }); - const target = DNA.window.document.body; + const target = document.body; class TestElement extends DNA.Component { static get listeners() { return { @@ -879,14 +879,14 @@ describe('events', function() { }; } } - DNA.customElements.define(getComponentName(), TestElement); + DNA.define(getComponentName(), TestElement); const element = new TestElement(); - DNA.DOM.appendChild(wrapper, element); + wrapper.appendChild(element); expect(callback).to.not.have.been.called(); target.click(); expect(callback).to.have.been.called(); - DNA.DOM.removeChild(wrapper, element); + wrapper.removeChild(element); target.click(); expect(callback).to.have.been.called.once; }); diff --git a/test/integrations/app.js b/test/integrations/app.js deleted file mode 100644 index eca9f7eb..00000000 --- a/test/integrations/app.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable-next-line import/no-unresolved */ -import * as DNA from '@chialab/dna'; - -export class TestElement extends DNA.Component { - static get properties() { - return { - prop: { type: String }, - ref: { type: Object }, - }; - } - - render() { - return DNA.html` - - - -
- -
- ${this.prop && DNA.html`

${this.prop}

`} - ${this.ref && DNA.html`

${this.ref.title}

`} - `; - } -} - -DNA.customElements.define('test-element-integration', TestElement); diff --git a/test/integrations/lit.spec.js b/test/integrations/lit.spec.js deleted file mode 100644 index 7e46e7b9..00000000 --- a/test/integrations/lit.spec.js +++ /dev/null @@ -1,99 +0,0 @@ -/* eslint-disable mocha/no-setup-in-describe,mocha/no-hooks-for-single-case */ -import { expect } from '@chialab/ginsenghino'; -/* eslint-disable-next-line import/no-unresolved */ -import * as DNA from '@chialab/dna'; -import './app.js'; - -describe('Lit', () => { - let lit, wrapper; - before(async () => { - lit = await import('lit'); - }); - - beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(DNA.document.body, wrapper); - }); - - afterEach(() => { - DNA.DOM.removeChild(DNA.document.body, wrapper); - }); - - it('should update text content', async () => { - const Template = (text) => lit.html`${text}`; - lit.render(Template('Text'), wrapper); - const element = wrapper.children[0]; - - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - - lit.render(Template('Text update'), wrapper); - expect(wrapper.children[0]).to.be.equal(element); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text update'); - }); - - it('should update text content with multiple text nodes', async () => { - const Template = (text) => lit.html`${text} children`; - lit.render(Template('Text'), wrapper); - const element = wrapper.children[0]; - - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text children'); - expect(element.children[1].tagName).to.be.equal('DIV'); - - lit.render(Template('Update'), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Update children'); - }); - - it('should update named slots', () => { - const Template = (title) => lit.html` - Text - ${title ? lit.html`

Title

` : lit.html`

Subtitle

`} - `; - lit.render(Template(true), wrapper); - const element = wrapper.children[0]; - - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent.trim()).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - expect(element.children[1].children).to.have.lengthOf(1); - expect(element.children[1].children[0].tagName).to.be.equal('H1'); - expect(element.children[1].children[0].textContent.trim()).to.be.equal('Title'); - - lit.render(Template(false), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent.trim()).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - expect(element.children[1].children).to.have.lengthOf(1); - expect(element.children[1].children[0].tagName).to.be.equal('H2'); - expect(element.children[1].children[0].textContent.trim()).to.be.equal('Subtitle'); - }); - - it('should update a textual property', () => { - const Template = (value) => lit.html``; - lit.render(Template('value'), wrapper); - const element = wrapper.children[0]; - - expect(element.prop).to.be.equal('value'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('value'); - - lit.render(Template('value update'), wrapper); - expect(element.prop).to.be.equal('value update'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('value update'); - }); - - it('should update a ref property', () => { - const Template = () => lit.html``; - lit.render(Template(), wrapper); - const element = wrapper.children[0]; - - expect(element.ref).to.be.a('object'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('Title'); - }); -}); diff --git a/test/integrations/react.spec.js b/test/integrations/react.spec.js deleted file mode 100644 index 369360c3..00000000 --- a/test/integrations/react.spec.js +++ /dev/null @@ -1,82 +0,0 @@ -/* eslint-disable mocha/no-setup-in-describe,mocha/no-hooks-for-single-case */ -import { expect } from '@chialab/ginsenghino'; -/* eslint-disable-next-line import/no-unresolved */ -import * as DNA from '@chialab/dna'; -import './app.js'; - -describe('React', () => { - let React, ReactDOM, wrapper; - before(async () => { - React = await import('react'); - ReactDOM = await import('react-dom'); - }); - - beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(DNA.document.body, wrapper); - }); - - afterEach(() => { - DNA.DOM.removeChild(DNA.document.body, wrapper); - }); - - it('should update text content', async () => { - const element = ReactDOM.render(React.createElement('test-element-integration', {}, ['Text']), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - - ReactDOM.render(React.createElement('test-element-integration', {}, ['Text update']), wrapper); - expect(wrapper.children[0]).to.be.equal(element); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text update'); - }); - - it('should update text content with multiple text nodes', async () => { - const element = ReactDOM.render(React.createElement('test-element-integration', {}, ['Text', ' ', 'children']), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text children'); - expect(element.children[1].tagName).to.be.equal('DIV'); - - ReactDOM.render(React.createElement('test-element-integration', {}, ['Update', ' ', 'children']), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Update children'); - }); - - it('should update named slots', () => { - const element = ReactDOM.render(React.createElement('test-element-integration', {}, ['Text', React.createElement('h1', { slot: 'children' }, 'Title')]), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - expect(element.children[1].children).to.have.lengthOf(1); - expect(element.children[1].children[0].tagName).to.be.equal('H1'); - expect(element.children[1].children[0].textContent).to.be.equal('Title'); - - ReactDOM.render(React.createElement('test-element-integration', {}, ['Text', React.createElement('h2', { slot: 'children' }, 'Subtitle')]), wrapper); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - expect(element.children[1].children).to.have.lengthOf(1); - expect(element.children[1].children[0].tagName).to.be.equal('H2'); - expect(element.children[1].children[0].textContent).to.be.equal('Subtitle'); - }); - - it('should update a textual property', () => { - const element = ReactDOM.render(React.createElement('test-element-integration', { prop: 'value' }), wrapper); - expect(element.prop).to.be.equal('value'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('value'); - - ReactDOM.render(React.createElement('test-element-integration', { prop: 'value update' }), wrapper); - expect(element.prop).to.be.equal('value update'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('value update'); - }); - - it('should update a ref property', () => { - const element = ReactDOM.render(React.createElement('test-element-integration', { ref: { title: 'Title' } }), wrapper); - expect(element.ref).to.be.a('object'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('Title'); - }); -}); diff --git a/test/integrations/vue.spec.js b/test/integrations/vue.spec.js deleted file mode 100644 index 5660a3aa..00000000 --- a/test/integrations/vue.spec.js +++ /dev/null @@ -1,131 +0,0 @@ -/* eslint-disable mocha/no-setup-in-describe,mocha/no-hooks-for-single-case */ -import { expect } from '@chialab/ginsenghino'; -/* eslint-disable-next-line import/no-unresolved */ -import * as DNA from '@chialab/dna'; -import './app.js'; - -describe('Vue', () => { - let Vue, wrapper; - - before(async () => { - Vue = await import('vue'); - }); - - beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(DNA.document.body, wrapper); - }); - - afterEach(() => { - DNA.DOM.removeChild(DNA.document.body, wrapper); - }); - - it('should update text content', async () => { - const app = Vue.createApp({ - data() { - return { - text: 'Text', - }; - }, - render() { - return Vue.h('test-element-integration', {}, [this.text]); - }, - methods: { - updateText(value) { - this.text = value; - }, - }, - }); - app.mount(wrapper); - const element = wrapper.children[0]; - - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - - app._instance.proxy.updateText('Text update'); - await Vue.nextTick(); - expect(wrapper.children[0]).to.be.equal(element); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text update'); - }); - - it('should update text content with multiple text nodes', async () => { - const app = Vue.createApp({ - data() { - return { - text: 'Text', - }; - }, - render() { - return Vue.h('test-element-integration', {}, [this.text, ' ', 'children']); - }, - methods: { - updateText(value) { - this.text = value; - }, - }, - }); - app.mount(wrapper); - const element = wrapper.children[0]; - - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text children'); - expect(element.children[1].tagName).to.be.equal('DIV'); - - app._instance.proxy.updateText('Update'); - await Vue.nextTick(); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Update children'); - }); - - it('should update named slots', async () => { - const app = Vue.createApp({ - data() { - return { - title: true, - }; - }, - render() { - return Vue.h('test-element-integration', {}, ['Text', this.title ? Vue.h('h1', { slot: 'children' }, 'Title') : Vue.h('h2', { slot: 'children' }, 'Subtitle')]); - }, - methods: { - updateTitle(value) { - this.title = value; - }, - }, - }); - app.mount(wrapper); - const element = wrapper.children[0]; - - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - expect(element.children[1].children).to.have.lengthOf(1); - expect(element.children[1].children[0].tagName).to.be.equal('H1'); - expect(element.children[1].children[0].textContent).to.be.equal('Title'); - - app._instance.proxy.updateTitle(false); - await Vue.nextTick(); - expect(element.children[0].tagName).to.be.equal('SPAN'); - expect(element.children[0].textContent).to.be.equal('Text'); - expect(element.children[1].tagName).to.be.equal('DIV'); - expect(element.children[1].children).to.have.lengthOf(1); - expect(element.children[1].children[0].tagName).to.be.equal('H2'); - expect(element.children[1].children[0].textContent).to.be.equal('Subtitle'); - }); - - it('should update a ref property', () => { - const app = Vue.createApp({ - render() { - return Vue.h('test-element-integration', { '.ref': { title: 'Title' } }); - }, - }); - app.mount(wrapper); - const element = wrapper.children[0]; - - expect(element.ref).to.be.a('object'); - expect(element.children[2].tagName).to.be.equal('P'); - expect(element.children[2].textContent).to.be.equal('Title'); - }); -}); diff --git a/test/module.spec.js b/test/module.spec.js index ddd64298..53b2ce4d 100644 --- a/test/module.spec.js +++ b/test/module.spec.js @@ -6,18 +6,9 @@ describe('module', function() { this.timeout(10 * 1000); const EXPECTED_EXPORT_MAP = { - window: 'object', - customElements: 'object', customElement: 'function', customElementPrototype: 'function', - Node: 'function', - HTMLElement: 'function', - Event: 'function', - CustomEvent: 'function', - document: 'object', - DOM: 'object', - connect: 'function', - disconnect: 'function', + define: 'function', extend: 'function', render: 'function', Fragment: 'symbol', @@ -50,18 +41,7 @@ describe('module', function() { for (const ref in EXPECTED_EXPORT_MAP) { it(`should export "${ref}"`, () => { - if ([ - 'window', - 'document', - 'Node', - 'HTMLElement', - 'Event', - 'CustomEvent', - ].indexOf(ref) !== -1) { - expect(DNA).to.have.property(ref); - } else { - expect(DNA[ref]).to.be.a(EXPECTED_EXPORT_MAP[ref]); - } + expect(DNA[ref]).to.be.a(EXPECTED_EXPORT_MAP[ref]); }); } diff --git a/test/property.spec.js b/test/property.spec.js index a0075e03..43528877 100644 --- a/test/property.spec.js +++ b/test/property.spec.js @@ -47,11 +47,11 @@ describe('property', function() { ], MyElement); const elem = new MyElement(); - DNA.DOM.appendChild(DNA.window.document.body, elem); + document.body.appendChild(elem); expect(elem.textContent).to.be.equal('42'); elem.testProp = 84; expect(elem.textContent).to.be.equal('84'); - DNA.DOM.removeChild(DNA.window.document.body, elem); + document.body.removeChild(elem); }); it('should not update component on a property change if not requested', () => { @@ -74,11 +74,11 @@ describe('property', function() { ], MyElement); const elem = new MyElement(); - DNA.DOM.appendChild(DNA.window.document.body, elem); + document.body.appendChild(elem); expect(elem.textContent).to.be.equal('42'); elem.testProp = 84; expect(elem.textContent).to.be.equal('42'); - DNA.DOM.removeChild(DNA.window.document.body, elem); + document.body.removeChild(elem); }); it('should define a property with a defaultValue', () => { @@ -466,7 +466,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); expect(new MyElement()).to.have.property('testProp', undefined); }); @@ -482,7 +482,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement(); expect(elem).to.have.property('testProp', 42); @@ -499,7 +499,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement(); expect(() => elem.testProp = 42).to.throw(TypeError); @@ -516,7 +516,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement; elem.testProp = 'string'; @@ -546,7 +546,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement; elem.testProp = 'string'; @@ -573,7 +573,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement(); expect(elem).to.have.property('testProp', 84); @@ -597,7 +597,7 @@ describe('property', function() { } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement(); expect(elem).to.have.property('testProp', 42); @@ -619,7 +619,7 @@ describe('property', function() { }; } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement(); expect(elem).to.have.property('testProp', 42); @@ -645,7 +645,7 @@ describe('property', function() { }; } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const elem = new MyElement(); expect(elem).to.have.property('testProp', 42); @@ -684,7 +684,7 @@ describe('property', function() { }; } } - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); class MyElement2 extends BaseElement { static get properties() { @@ -695,7 +695,7 @@ describe('property', function() { }; } } - DNA.customElements.define(getComponentName(), MyElement2); + DNA.define(getComponentName(), MyElement2); const element = new MyElement(); expect(element).to.have.property('inherit'); @@ -780,7 +780,7 @@ describe('property', function() { }; } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const element = new MyElement(); expect(listener).to.not.have.been.called(); @@ -796,7 +796,7 @@ describe('property', function() { const listener = spy(); const MyElement = class extends DNA.Component {}; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const element = new MyElement(); expect(() => element.observe('testProp', listener)).to.throw(Error, 'Missing property testProp'); @@ -816,7 +816,7 @@ describe('property', function() { }; } }; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const element = new MyElement(); expect(listener).to.not.have.been.called(); @@ -832,7 +832,7 @@ describe('property', function() { const listener = spy(); const MyElement = class extends DNA.Component {}; - DNA.customElements.define(getComponentName(), MyElement); + DNA.define(getComponentName(), MyElement); const element = new MyElement(); expect(() => element.unobserve('testProp', listener)).to.throw(Error, 'Missing property testProp'); diff --git a/test/registry.spec.js b/test/registry.spec.js deleted file mode 100644 index 62fc980e..00000000 --- a/test/registry.spec.js +++ /dev/null @@ -1,148 +0,0 @@ -// eslint-disable-next-line import/no-unresolved -import * as DNA from '@chialab/dna'; -import { expect, wait, spy } from '@chialab/ginsenghino'; -import { getComponentName } from './helpers.spec.js'; - -describe('registry', function() { - this.timeout(10 * 1000); - - describe('#get', () => { - it('should not return undefined component', () => { - expect(DNA.customElements.get(getComponentName())).to.be.undefined; - }); - }); - - describe('#define', () => { - it('should define a tag', () => { - const is = getComponentName(); - class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement); - expect(DNA.customElements.get(is)).to.be.equal(TestElement); - }); - - it('should extend a native tag', () => { - const is = getComponentName(); - class TestElement extends DNA.Component { } - DNA.customElements.define(is, TestElement, { - extends: 'article', - }); - expect(DNA.customElements.get(is)).to.be.equal(TestElement); - }); - - it('should throw if the tag has been already defined', () => { - const is = getComponentName(); - DNA.customElements.define(is, class extends DNA.Component { }); - expect(() => { - DNA.customElements.define(is, class extends DNA.Component { }); - }).to.throw(Error, 'The registry already contains an entry with the same name'); - }); - - it('should throw if the Component has been already defined', () => { - class TestElement extends DNA.Component { } - DNA.customElements.define(getComponentName(), TestElement); - expect(() => { - DNA.customElements.define(getComponentName(), TestElement); - }).to.throw(Error, 'The registry already contains an entry with the constructor (or is otherwise already defined)'); - }); - - it('should validate define input', () => { - expect(() => { - DNA.customElements.define(null, null); - }).to.throw(SyntaxError, 'The provided name must be a valid Custom Element name'); - - expect(() => { - DNA.customElements.define('test', null); - }).to.throw(SyntaxError, 'The provided name must be a valid Custom Element name'); - - expect(() => { - DNA.customElements.define('2-test', null); - }).to.throw(SyntaxError, 'The provided name must be a valid Custom Element name'); - - expect(() => { - DNA.customElements.define(getComponentName(), null); - }).to.throw(TypeError, 'The referenced constructor must be a constructor'); - }); - }); - - describe('#whenDefined', () => { - it('should resolve a promise when an element is defined', async () => { - const is = getComponentName(); - const Constructor = class extends DNA.Component { }; - const promise = DNA.customElements.whenDefined(is); - DNA.customElements.define(is, Constructor); - await expect(promise).to.eventually.be.equal(Constructor); - }); - - it('should return a resolved promise when an element has already been defined', async () => { - const is = getComponentName(); - const Constructor = class extends DNA.Component { }; - DNA.customElements.define(is, Constructor); - const promise = DNA.customElements.whenDefined(is); - await expect(promise).to.eventually.be.equal(Constructor); - }); - - it('should not resolve for undefined element', async () => { - const promise = DNA.customElements.whenDefined(getComponentName()); - expect(promise).not.be.fulfilled; - await wait(2000); - expect(promise).not.be.fulfilled; - }); - }); - - describe('#upgrade', () => { - it('should upgrade a node after an element definition', () => { - const attributeChangedCallback = spy(); - - const is = getComponentName(); - const MyCard = class extends DNA.Component { - static get observedAttributes() { - return ['name']; - } - - attributeChangedCallback(...args) { - super.attributeChangedCallback(...args); - attributeChangedCallback(...args); - } - }; - const wrapper = DNA.DOM.createElement('div'); - const card = DNA.DOM.createElement(is); - card.setAttribute('name', 'Alan'); - wrapper.appendChild(card); - expect(card).to.not.be.an.instanceof(MyCard); - DNA.customElements.define(is, MyCard); - DNA.customElements.upgrade(wrapper); - expect(card).to.be.an.instanceof(MyCard); - expect(attributeChangedCallback).to.have.been.called(); - expect(attributeChangedCallback).to.have.been.called.with('name', null, 'Alan'); - }); - - it('should upgrade a builtin node after an element definition', () => { - const spyAttributeChangedCallback = spy(); - - const is = getComponentName(); - const MyCard = class extends DNA.Component { - static get observedAttributes() { - return ['name']; - } - - attributeChangedCallback(...args) { - super.attributeChangedCallback(...args); - spyAttributeChangedCallback(...args); - } - }; - const wrapper = DNA.DOM.createElement('div'); - const card = DNA.DOM.createElement('article'); - card.setAttribute('is', is); - card.setAttribute('name', 'Alan'); - wrapper.appendChild(card); - expect(card).to.not.be.an.instanceof(MyCard); - DNA.customElements.define(is, MyCard, { - extends: 'article', - }); - DNA.customElements.upgrade(wrapper); - expect(card).to.be.an.instanceof(MyCard); - expect(spyAttributeChangedCallback).to.have.been.called(); - expect(spyAttributeChangedCallback).to.have.been.called.with('name', null, 'Alan'); - }); - }); -}); diff --git a/test/render.spec.js b/test/render.spec.js index f9a8cd8a..4f82bd97 100644 --- a/test/render.spec.js +++ b/test/render.spec.js @@ -7,16 +7,13 @@ describe('render', function() { let wrapper; this.timeout(10 * 1000); - before(async () => { - wrapper = DNA.DOM.createElement('div'); - }); - beforeEach(() => { - DNA.DOM.appendChild(DNA.window.document.body, wrapper); + wrapper = document.createElement('div'); + document.body.appendChild(wrapper); }); afterEach(() => { - DNA.DOM.removeChild(DNA.window.document.body, wrapper); + document.body.removeChild(wrapper); }); describe('render', () => { @@ -55,21 +52,21 @@ describe('render', function() { it('should render component constructor', () => { const name = getComponentName(); class TestElement extends DNA.Component {} - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); expect(DNA.render(DNA.h(TestElement))).to.be.instanceof(TestElement); }); it('should render a text node', () => { - expect(DNA.render(DNA.DOM.createTextNode('Hello')).textContent).to.be.equal('Hello'); + expect(DNA.render(document.createTextNode('Hello')).textContent).to.be.equal('Hello'); }); it('should render an element node', () => { - expect(DNA.render(DNA.DOM.createElement('div')).tagName).to.be.equal('DIV'); + expect(DNA.render(document.createElement('div')).tagName).to.be.equal('DIV'); }); it('should render an element node using the `ref` property', () => { - const div = DNA.DOM.createElement('div'); + const div = document.createElement('div'); div.setAttribute('class', 'test'); div.innerHTML = 'test'; DNA.render(DNA.html`
`); @@ -81,7 +78,7 @@ describe('render', function() { }); it('should render an element node using the `h` helper', () => { - const div = DNA.DOM.createElement('div'); + const div = document.createElement('div'); div.setAttribute('class', 'test'); div.innerHTML = 'test'; DNA.render(DNA.html`
<${div} id="test" />
`); @@ -97,11 +94,11 @@ describe('render', function() { const name2 = getComponentName(); class TestElement extends DNA.Component { render() { - return this.slotChildNodes.map((node) => DNA.html`<${node} id="test" />`); + return this.realm.childNodes.map((node) => DNA.html`<${node} id="test" />`); } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); class TestElement2 extends DNA.Component { render() { @@ -112,7 +109,7 @@ describe('render', function() { } } - DNA.customElements.define(name2, TestElement2); + DNA.define(name2, TestElement2); const root = DNA.render(DNA.h(TestElement2), wrapper); const elem = wrapper.querySelector(name); @@ -138,8 +135,8 @@ describe('render', function() { 'world', true, DNA.h('ul', { class: 'list' }, DNA.h('li', null, 'One'), DNA.h('li', null, 'Two')), - DNA.DOM.createTextNode('Hello'), - DNA.DOM.createElement('div'), + document.createTextNode('Hello'), + document.createElement('div'), ], wrapper); expect(wrapper.childNodes).to.have.lengthOf(6); }); @@ -151,8 +148,8 @@ describe('render', function() { 'world', true, DNA.h('ul', { class: 'list' }, DNA.h('li', null, 'One'), DNA.h('li', null, 'Two')), - DNA.DOM.createTextNode('Hello'), - DNA.DOM.createElement('div'), + document.createTextNode('Hello'), + document.createElement('div'), ]; }; @@ -342,7 +339,7 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); DNA.render(DNA.h(TestElement, { number: '2' }), wrapper); expect(wrapper.querySelector(name).number).to.be.equal(2); @@ -360,7 +357,7 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); DNA.render(DNA.h(TestElement, { string: '2' }), wrapper); expect(wrapper.querySelector(name).string).to.be.equal('2'); @@ -378,7 +375,7 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); DNA.render(DNA.h(TestElement, { number: 2 }), wrapper); expect(wrapper.querySelector(name).number).to.be.equal(2); @@ -398,17 +395,17 @@ describe('render', function() { DNA.render(DNA.h('div', { style: 'color: red;' }), wrapper); const elem = wrapper.children[0]; elem.style.fontFamily = 'sans-serif'; - expect(DNA.window.getComputedStyle(elem).color).to.be.oneOf(['rgb(255, 0, 0)', 'red']); - expect(DNA.window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); + expect(window.getComputedStyle(elem).color).to.be.oneOf(['rgb(255, 0, 0)', 'red']); + expect(window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); DNA.render(DNA.h('div', { style: { backgroundColor: 'blue' } }), wrapper); - expect(DNA.window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); - expect(DNA.window.getComputedStyle(elem).backgroundColor).to.be.oneOf(['rgb(0, 0, 255)', 'blue']); - expect(DNA.window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); + expect(window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); + expect(window.getComputedStyle(elem).backgroundColor).to.be.oneOf(['rgb(0, 0, 255)', 'blue']); + expect(window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); DNA.render(DNA.h('div', { style: 'font-weight: bold;' }), wrapper); - expect(DNA.window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); - expect(DNA.window.getComputedStyle(elem).backgroundColor).to.be.oneOf(['rgba(0, 0, 0, 0)', '', 'transparent']); - expect(DNA.window.getComputedStyle(elem).fontWeight).to.be.oneOf(['700', 'bold']); - expect(DNA.window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); + expect(window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); + expect(window.getComputedStyle(elem).backgroundColor).to.be.oneOf(['rgba(0, 0, 0, 0)', '', 'transparent']); + expect(window.getComputedStyle(elem).fontWeight).to.be.oneOf(['700', 'bold']); + expect(window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); }); it('should render svgs', () => { @@ -455,7 +452,7 @@ describe('render', function() { DNA.render(DNA.h('div'), wrapper); const elem = wrapper.children[0]; expect(elem.childNodes).to.have.lengthOf(0); - elem.appendChild(DNA.DOM.createElement('span')); + elem.appendChild(document.createElement('span')); expect(elem.childNodes).to.have.lengthOf(1); DNA.render(DNA.h('div'), wrapper); expect(elem.childNodes).to.have.lengthOf(1); @@ -482,15 +479,22 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); const elem = DNA.render(DNA.h(TestElement, {}, DNA.h('div', {})), wrapper); - expect(elem.childNodes).to.be.have.lengthOf(3); - const [slotted] = elem.slotChildNodes; + const realm = elem.realm; + + realm.dangerouslyOpen(); + expect(elem.childNodes).to.have.lengthOf(3); + const [slotted] = realm.childNodes; const [div1, div2, div3] = elem.childNodes; + realm.dangerouslyClose(); + DNA.render(DNA.h(TestElement, { oneMore: true }, DNA.h('div', {})), wrapper); - expect(elem.childNodes).to.be.have.lengthOf(4); - const [slotted2] = elem.slotChildNodes; + + realm.dangerouslyOpen(); + expect(elem.childNodes).to.have.lengthOf(4); + const [slotted2] = realm.childNodes; const [div4, div5, div6, div7] = elem.childNodes; expect(slotted).to.be.equal(slotted2); expect(div1).to.be.equal(div4); @@ -500,6 +504,7 @@ describe('render', function() { expect(div5.className).to.be.equal('child2'); expect(div6.className).to.be.equal('child3'); expect(div7.className).to.be.equal(''); + realm.dangerouslyClose(); }); it('should not reuse slotted text', () => { @@ -521,21 +526,33 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); const elem = DNA.render(DNA.h(TestElement, {}, 'Text'), wrapper); - expect(elem.childNodes).to.be.have.lengthOf(1); - const [slotted] = elem.slotChildNodes; + const realm = elem.realm; + + realm.dangerouslyOpen(); + expect(elem.childNodes).to.have.lengthOf(1); + const [slotted] = realm.childNodes; const [textNode] = elem.childNodes; + realm.dangerouslyClose(); + DNA.render(DNA.h(TestElement, { showPrefix: true }, 'Text'), wrapper); - expect(elem.childNodes).to.be.have.lengthOf(2); + + realm.dangerouslyOpen(); + expect(elem.childNodes).to.have.lengthOf(2); const [prefixNode, newTextNode] = elem.childNodes; - expect(slotted).to.be.equal(elem.slotChildNodes[0]); + expect(slotted).to.be.equal(realm.childNodes[0]); expect(textNode).to.be.equal(newTextNode); expect(prefixNode.textContent).to.be.equal('Prefix:'); expect(newTextNode.textContent).to.be.equal('Text'); + realm.dangerouslyClose(); + DNA.render(DNA.h(TestElement, { showPrefix: false }, 'Text'), wrapper); - expect(elem.childNodes).to.be.have.lengthOf(1); + + realm.dangerouslyOpen(); + expect(elem.childNodes).to.have.lengthOf(1); + realm.dangerouslyClose(); }); it('should handle emptied slot nodes', () => { @@ -558,15 +575,23 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); const elem = DNA.render(DNA.h(TestElement, {}, 'Text'), wrapper); + const realm = elem.realm; + + realm.dangerouslyOpen(); const div = elem.childNodes[0]; - expect(elem.slotChildNodes).to.be.have.lengthOf(1); - expect(div.childNodes).to.be.have.lengthOf(1); + expect(realm.childNodes).to.have.lengthOf(1); + expect(div.childNodes).to.have.lengthOf(1); + realm.dangerouslyClose(); + DNA.render(DNA.h(TestElement, { showSlotted: false }, 'Text'), wrapper); - expect(elem.slotChildNodes).to.be.have.lengthOf(1); - expect(div.childNodes).to.be.have.lengthOf(0); + + realm.dangerouslyOpen(); + expect(realm.childNodes).to.have.lengthOf(1); + expect(div.childNodes).to.have.lengthOf(0); + realm.dangerouslyClose(); }); it('should return a shallow clone of child list', () => { @@ -583,7 +608,7 @@ describe('render', function() { class Parent extends DNA.Component { render() { - return this.slotChildNodes.filter((elem) => !!elem.tagName).map((elem) => DNA.html`
`); + return this.realm.childNodes.filter((elem) => !!elem.tagName).map((elem) => DNA.html`
`); } } @@ -593,15 +618,15 @@ describe('render', function() { } } - DNA.customElements.define(name1, Parent); - DNA.customElements.define(name2, Child); + DNA.define(name1, Parent); + DNA.define(name2, Child); - const parent = DNA.DOM.createElement(name1); + const parent = document.createElement(name1); - const child = DNA.DOM.createElement(name2); - child.appendChild(DNA.DOM.createTextNode('Hello')); + const child = document.createElement(name2); + child.appendChild(document.createTextNode('Hello')); parent.insertBefore(child, null); - DNA.DOM.appendChild(wrapper, parent); + wrapper.appendChild(parent); expect(child.textContent).to.be.equal('Hello'); }); @@ -931,7 +956,7 @@ describe('render', function() { } } - DNA.customElements.define(name, TestElement); + DNA.define(name, TestElement); const ref = new TestElement(); diff --git a/test/template.spec.js b/test/template.spec.js index 92da42c5..488a9db6 100644 --- a/test/template.spec.js +++ b/test/template.spec.js @@ -11,12 +11,12 @@ describe('template', function() { this.timeout(10 * 1000); beforeEach(() => { - wrapper = DNA.DOM.createElement('div'); - DNA.DOM.appendChild(DNA.window.document.body, wrapper); + wrapper = document.createElement('div'); + document.body.appendChild(wrapper); }); afterEach(() => { - DNA.DOM.removeChild(DNA.window.document.body, wrapper); + document.body.removeChild(wrapper); }); describe('simple', () => { @@ -207,18 +207,22 @@ describe('template', function() { for (const type in TEMPLATES) { it(type, () => { const rootName = getComponentName(); - class MyElement extends DNA.extend(DNA.window.HTMLDivElement) { + class MyElement extends DNA.extend(HTMLDivElement) { render() { return TEMPLATES[type](); } } - DNA.customElements.define(`${rootName}-${type.toLowerCase()}`, MyElement, { extends: 'div' }); + DNA.define(`${rootName}-${type.toLowerCase()}`, MyElement, { extends: 'div' }); const element = DNA.render(DNA.h(MyElement), wrapper); + const realm = element.realm; + + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].tagName).to.be.equal('STYLE'); - expect(element.childNodes[0].textContent).to.be.equal(`div[is="${rootName}-${type.toLowerCase()}"] .test {}`); + expect(element.childNodes[0].textContent).to.be.equal(`[:scope="${rootName}-${type.toLowerCase()}"] .test {}`); + realm.dangerouslyClose(); }); } }); @@ -257,7 +261,7 @@ describe('template', function() { } } - DNA.customElements.define(`${rootName}-${type.toLowerCase()}`, MyElement); + DNA.define(`${rootName}-${type.toLowerCase()}`, MyElement); class MyTitle extends DNA.Component { render() { @@ -265,13 +269,17 @@ describe('template', function() { } } - DNA.customElements.define(`${titleName}-${type.toLowerCase()}`, MyTitle); + DNA.define(`${titleName}-${type.toLowerCase()}`, MyTitle); const element = DNA.render(DNA.h(`${rootName}-${type.toLowerCase()}`, null, DNA.h('img', { src: IMG }), DNA.h('p', null, 'Body') ), wrapper); + const realm = element.realm; + realm.dangerouslyOpen(); + const innerRealm = element.childNodes[0].childNodes[0].realm; + innerRealm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(2); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].className).to.be.equal('layout-header'); @@ -279,6 +287,8 @@ describe('template', function() { expect(element.childNodes[0].childNodes[0].tagName).to.be.equal(`${titleName}-${type}`.toUpperCase()); expect(element.childNodes[0].childNodes[0].childNodes[0].tagName).to.be.equal('SPAN'); expect(element.childNodes[0].childNodes[0].childNodes[0].textContent).to.be.equal('Untitled'); + innerRealm.dangerouslyClose(); + realm.dangerouslyClose(); DNA.render(DNA.h(`${rootName}-${type.toLowerCase()}`, null, DNA.h('h1', { slot: 'title' }, 'Title'), @@ -286,6 +296,8 @@ describe('template', function() { DNA.h('p', null, 'Body') ), wrapper); + realm.dangerouslyOpen(); + innerRealm.dangerouslyOpen(); expect(element.childNodes[0].childNodes[0].childNodes[0].tagName).to.be.equal('SPAN'); expect(element.childNodes[0].childNodes[0].childNodes[0].textContent).to.be.equal('Title'); expect(element.childNodes[1].tagName).to.be.equal('DIV'); @@ -294,6 +306,8 @@ describe('template', function() { expect(element.childNodes[1].childNodes[0].getAttribute('src')).to.be.equal(IMG); expect(element.childNodes[1].childNodes[1].tagName).to.be.equal('P'); expect(element.childNodes[1].childNodes[1].textContent).to.be.equal('Body'); + innerRealm.dangerouslyClose(); + realm.dangerouslyClose(); }); } }); @@ -335,9 +349,12 @@ describe('template', function() { DNA.h('p', null, 'Body') ), wrapper); - DNA.customElements.define(`${name}-${type.toLowerCase()}`, MyElement); - DNA.customElements.upgrade(element); + DNA.define(`${name}-${type.toLowerCase()}`, MyElement); + customElements.upgrade(element); + + const realm = element.realm; + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(2); expect(element.childNodes[0].tagName).to.be.equal('DIV'); expect(element.childNodes[0].className).to.be.equal('layout-header'); @@ -350,6 +367,7 @@ describe('template', function() { expect(element.childNodes[1].childNodes[0].getAttribute('src')).to.be.equal(IMG); expect(element.childNodes[1].childNodes[1].tagName).to.be.equal('P'); expect(element.childNodes[1].childNodes[1].textContent).to.be.equal('Body'); + realm.dangerouslyClose(); }); } }); @@ -393,7 +411,7 @@ describe('template', function() { } } - DNA.customElements.define(`${cardName}-${type.toLowerCase()}`, MyCard); + DNA.define(`${cardName}-${type.toLowerCase()}`, MyCard); const element = DNA.render(DNA.h(`${name}-${type.toLowerCase()}`, null, DNA.h('h1', {}, 'Title'), @@ -401,9 +419,11 @@ describe('template', function() { DNA.h('p', null, 'Body') ), wrapper); - DNA.customElements.define(`${name}-${type.toLowerCase()}`, MyElement); - DNA.customElements.upgrade(element); + DNA.define(`${name}-${type.toLowerCase()}`, MyElement); + customElements.upgrade(element); + const realm = element.realm; + realm.dangerouslyOpen(); expect(element.childNodes).to.have.lengthOf(1); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('H1'); expect(element.childNodes[0].childNodes[0].textContent).to.be.equal('Title'); @@ -411,22 +431,31 @@ describe('template', function() { expect(element.childNodes[0].childNodes[1].getAttribute('src')).to.be.equal(IMG); expect(element.childNodes[0].childNodes[2].tagName).to.be.equal('P'); expect(element.childNodes[0].childNodes[2].textContent).to.be.equal('Body'); + realm.dangerouslyClose(); + element.collapsed = true; element.forceUpdate(); + + realm.dangerouslyOpen(); expect(element.childNodes[0].tagName).to.be.equal('H1'); expect(element.childNodes[0].textContent).to.be.equal('Title'); expect(element.childNodes[1].tagName).to.be.equal('IMG'); expect(element.childNodes[1].getAttribute('src')).to.be.equal(IMG); expect(element.childNodes[2].tagName).to.be.equal('P'); expect(element.childNodes[2].textContent).to.be.equal('Body'); + realm.dangerouslyClose(); + element.collapsed = false; element.forceUpdate(); + + realm.dangerouslyOpen(); expect(element.childNodes[0].childNodes[0].tagName).to.be.equal('H1'); expect(element.childNodes[0].childNodes[0].textContent).to.be.equal('Title'); expect(element.childNodes[0].childNodes[1].tagName).to.be.equal('IMG'); expect(element.childNodes[0].childNodes[1].getAttribute('src')).to.be.equal(IMG); expect(element.childNodes[0].childNodes[2].tagName).to.be.equal('P'); expect(element.childNodes[0].childNodes[2].textContent).to.be.equal('Body'); + realm.dangerouslyClose(); }); } }); @@ -597,21 +626,23 @@ describe('template', function() { for (const type in TEMPLATES) { it(type, async () => { - const observable$ = new Observable(async (subscriber) => { - await wait(100); - subscriber.next(1); - await wait(100); - subscriber.next(2); - await wait(100); - subscriber.next(3); - await wait(100); - subscriber.next(4); - subscriber.complete(); + const observable$ = new Observable((subscriber) => { + Promise.resolve().then(async () => { + await wait(100); + subscriber.next(1); + await wait(100); + subscriber.next(2); + await wait(100); + subscriber.next(3); + await wait(100); + subscriber.next(4); + subscriber.complete(); + }); }); DNA.render(TEMPLATES[type]({ observable$ }), wrapper); - await wait(100); + await wait(150); expect(wrapper.innerHTML).to.be.equal('
1
'); await wait(100); expect(wrapper.innerHTML).to.be.equal('
2
'); @@ -641,21 +672,23 @@ describe('template', function() { for (const type in TEMPLATES) { it(type, async () => { - const observable$ = new Observable(async (subscriber) => { - await wait(100); - subscriber.next(1); - await wait(100); - subscriber.next(2); - await wait(100); - subscriber.next(3); - await wait(100); - subscriber.next(4); - subscriber.complete(); + const observable$ = new Observable((subscriber) => { + Promise.resolve().then(async () => { + await wait(100); + subscriber.next(1); + await wait(100); + subscriber.next(2); + await wait(100); + subscriber.next(3); + await wait(100); + subscriber.next(4); + subscriber.complete(); + }); }); DNA.render(TEMPLATES[type]({ observable$ }), wrapper); - await wait(100); + await wait(150); expect(wrapper.innerHTML).to.be.equal('
1
'); await wait(100); expect(wrapper.innerHTML).to.be.equal('
2
'); diff --git a/test/typings/Component.ts b/test/typings/Component.ts index b8445b0d..01ea6a2d 100644 --- a/test/typings/Component.ts +++ b/test/typings/Component.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-unresolved -import { window, Component, customElement, extend, property } from '@chialab/dna'; +import { Component, customElement, extend, property } from '@chialab/dna'; @customElement('x-test') export class TestElement extends Component { @@ -20,7 +20,7 @@ export class TestElement extends Component { new TestElement().focus(); @customElement('x-test-builtin', { extends: 'details' }) -export class TestBuiltinElement extends extend(window.HTMLDetailsElement) { +export class TestBuiltinElement extends extend(HTMLDetailsElement) { /** * Active prop. */ diff --git a/test/typings/Properties.ts b/test/typings/Properties.ts index d093e404..6dfd8bf9 100644 --- a/test/typings/Properties.ts +++ b/test/typings/Properties.ts @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-unresolved -import { window, Component, customElement, extend, property, observe } from '@chialab/dna'; +import { Component, customElement, extend, property, observe } from '@chialab/dna'; @customElement('x-test') export class TestElement extends Component { @@ -14,7 +14,7 @@ export class TestElement2 extends Component { } @customElement('x-test3') -export class TestElement3 extends extend(window.HTMLDetailsElement) { +export class TestElement3 extends extend(HTMLDetailsElement) { // override native prop @property() open!: boolean; } @@ -42,6 +42,15 @@ export class TestElement6 extends Component { check(oldValue: String|undefined, newValue: String) { return `${oldValue}/${newValue}`; } + + connectedCallback(): void { + super.connectedCallback(); + + this.observe('sample', () => { }); + + // @ts-expect-error Missing property does not exists + this.observe('missing', () => { }); + } } export class TestElement7 extends Component { diff --git a/test/typings/render.tsx b/test/typings/render.tsx index 95b10584..7a37cee2 100644 --- a/test/typings/render.tsx +++ b/test/typings/render.tsx @@ -1,9 +1,9 @@ // eslint-disable-next-line import/no-unresolved -import { DOM, Fragment, h, render } from '@chialab/dna'; +import { Fragment, h, render } from '@chialab/dna'; import { TestElement, TestBuiltinElement } from './Component'; render(
); -render(
); +render(
); render(); render(); render(
); @@ -12,8 +12,8 @@ render(
); render(); render(h('details', { open: true })); -render(h(DOM.createElement('details'), { open: true })); -render(h('details', { ref: DOM.createElement('details') })); +render(h(document.createElement('details'), { open: true })); +render(h('details', { ref: document.createElement('details') })); render(h('div', { key: {} })); render(h(Fragment)); diff --git a/test/typings/tsconfig.json b/test/typings/tsconfig.json index e50045ca..3b95763d 100644 --- a/test/typings/tsconfig.json +++ b/test/typings/tsconfig.json @@ -7,6 +7,7 @@ "inlineSources": false, "strict": true, "noImplicitAny": true, + "strictPropertyInitialization": false, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "isolatedModules": true, diff --git a/tsconfig.json b/tsconfig.json index 502393a3..4cadf9a2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,6 +12,7 @@ "emitDeclarationOnly": true, "noUnusedLocals": true, "noImplicitReturns": true, + "strictPropertyInitialization": false, "noFallthroughCasesInSwitch": true, "noImplicitAny": true, "noImplicitThis": true, @@ -19,8 +20,8 @@ "checkJs": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, - "isolatedModules": false, - "moduleResolution": "node", + "isolatedModules": true, + "moduleResolution": "node" }, "include": [ "src", diff --git a/yarn.lock b/yarn.lock index 13cbcffc..e6e54dcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15,54 +15,55 @@ "@jridgewell/gen-mapping" "^0.3.0" "@jridgewell/trace-mapping" "^0.3.9" -"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.11", "@babel/code-frame@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658" - integrity sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ== +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.11", "@babel/code-frame@^7.22.13": + version "7.22.13" + resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" + integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== dependencies: - "@babel/highlight" "^7.22.5" + "@babel/highlight" "^7.22.13" + chalk "^2.4.2" -"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz#b1f6c86a02d85d2dd3368a2b67c09add8cd0c255" - integrity sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA== +"@babel/compat-data@^7.22.20", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.20.tgz#8df6e96661209623f1975d66c35ffca66f3306d0" + integrity sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw== "@babel/core@^7.12.16", "@babel/core@^7.14.2": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/core/-/core-7.22.5.tgz#d67d9747ecf26ee7ecd3ebae1ee22225fe902a89" - integrity sha512-SBuTAjg91A3eKOvD+bPEz3LlhHZRNu1nFOVts9lzDJTXshHTjII0BAtDS3Y2DAkdZdDKWVZGVwkDfc4Clxn1dg== + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/core/-/core-7.23.0.tgz#f8259ae0e52a123eb40f552551e647b506a94d83" + integrity sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ== dependencies: "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.22.5" - "@babel/generator" "^7.22.5" - "@babel/helper-compilation-targets" "^7.22.5" - "@babel/helper-module-transforms" "^7.22.5" - "@babel/helpers" "^7.22.5" - "@babel/parser" "^7.22.5" - "@babel/template" "^7.22.5" - "@babel/traverse" "^7.22.5" - "@babel/types" "^7.22.5" - convert-source-map "^1.7.0" + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-module-transforms" "^7.23.0" + "@babel/helpers" "^7.23.0" + "@babel/parser" "^7.23.0" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.23.0" + "@babel/types" "^7.23.0" + convert-source-map "^2.0.0" debug "^4.1.0" gensync "^1.0.0-beta.2" - json5 "^2.2.2" - semver "^6.3.0" + json5 "^2.2.3" + semver "^6.3.1" "@babel/eslint-parser@^7.12.13": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.22.5.tgz#fa032503b9e2d188e25b1b95d29e8b8431042d78" - integrity sha512-C69RWYNYtrgIRE5CmTd77ZiLDXqgBipahJc/jHP3sLcAGj6AJzxNIuKNpVnICqbyK7X3pFUfEvL++rvtbQpZkQ== + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.22.15.tgz#263f059c476e29ca4972481a17b8b660cb025a34" + integrity sha512-yc8OOBIQk1EcRrpizuARSQS0TWAcOMpEJ1aafhNznaeYkeL+OhqnDObGFylB8ka8VFF/sZc+S4RzHyO+3LjQxg== dependencies: "@nicolo-ribaudo/eslint-scope-5-internals" "5.1.1-v1" eslint-visitor-keys "^2.1.0" - semver "^6.3.0" + semver "^6.3.1" -"@babel/generator@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz#1e7bf768688acfb05cf30b2369ef855e82d984f7" - integrity sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA== +"@babel/generator@^7.23.0": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" + integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g== dependencies: - "@babel/types" "^7.22.5" + "@babel/types" "^7.23.0" "@jridgewell/gen-mapping" "^0.3.2" "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" @@ -75,71 +76,70 @@ "@babel/types" "^7.22.5" "@babel/helper-builder-binary-assignment-operator-visitor@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz#a3f4758efdd0190d8927fcffd261755937c71878" - integrity sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw== + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956" + integrity sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw== dependencies: - "@babel/types" "^7.22.5" + "@babel/types" "^7.22.15" -"@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz#fc7319fc54c5e2fa14b2909cf3c5fd3046813e02" - integrity sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw== +"@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.5", "@babel/helper-compilation-targets@^7.22.6": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52" + integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw== dependencies: - "@babel/compat-data" "^7.22.5" - "@babel/helper-validator-option" "^7.22.5" - browserslist "^4.21.3" + "@babel/compat-data" "^7.22.9" + "@babel/helper-validator-option" "^7.22.15" + browserslist "^4.21.9" lru-cache "^5.1.1" - semver "^6.3.0" + semver "^6.3.1" -"@babel/helper-create-class-features-plugin@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz#2192a1970ece4685fbff85b48da2c32fcb130b7c" - integrity sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q== +"@babel/helper-create-class-features-plugin@^7.22.11", "@babel/helper-create-class-features-plugin@^7.22.5": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.15.tgz#97a61b385e57fe458496fad19f8e63b63c867de4" + integrity sha512-jKkwA59IXcvSaiK2UN45kKwSC9o+KuoXsBDvHvU/7BecYIp8GQ2UwrVvFgJASUT+hBnwJx6MhvMCuMzwZZ7jlg== dependencies: "@babel/helper-annotate-as-pure" "^7.22.5" "@babel/helper-environment-visitor" "^7.22.5" "@babel/helper-function-name" "^7.22.5" - "@babel/helper-member-expression-to-functions" "^7.22.5" + "@babel/helper-member-expression-to-functions" "^7.22.15" "@babel/helper-optimise-call-expression" "^7.22.5" - "@babel/helper-replace-supers" "^7.22.5" + "@babel/helper-replace-supers" "^7.22.9" "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.5" - semver "^6.3.0" + "@babel/helper-split-export-declaration" "^7.22.6" + semver "^6.3.1" "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz#bb2bf0debfe39b831986a4efbf4066586819c6e4" - integrity sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A== + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1" + integrity sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w== dependencies: "@babel/helper-annotate-as-pure" "^7.22.5" regexpu-core "^5.3.1" - semver "^6.3.0" + semver "^6.3.1" -"@babel/helper-define-polyfill-provider@^0.4.0": - version "0.4.0" - resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz#487053f103110f25b9755c5980e031e93ced24d8" - integrity sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg== +"@babel/helper-define-polyfill-provider@^0.4.2": + version "0.4.2" + resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.2.tgz#82c825cadeeeee7aad237618ebbe8fa1710015d7" + integrity sha512-k0qnnOqHn5dK9pZpfD5XXZ9SojAITdCKRn2Lp6rnDGzIbaP0rHyMPk/4wsSxVBVz4RfN0q6VpXWP2pDGIoQ7hw== dependencies: - "@babel/helper-compilation-targets" "^7.17.7" - "@babel/helper-plugin-utils" "^7.16.7" + "@babel/helper-compilation-targets" "^7.22.6" + "@babel/helper-plugin-utils" "^7.22.5" debug "^4.1.1" lodash.debounce "^4.0.8" resolve "^1.14.2" - semver "^6.1.2" -"@babel/helper-environment-visitor@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98" - integrity sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q== +"@babel/helper-environment-visitor@^7.22.20", "@babel/helper-environment-visitor@^7.22.5": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167" + integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA== -"@babel/helper-function-name@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz#ede300828905bb15e582c037162f99d5183af1be" - integrity sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ== +"@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759" + integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw== dependencies: - "@babel/template" "^7.22.5" - "@babel/types" "^7.22.5" + "@babel/template" "^7.22.15" + "@babel/types" "^7.23.0" "@babel/helper-hoist-variables@^7.22.5": version "7.22.5" @@ -148,33 +148,30 @@ dependencies: "@babel/types" "^7.22.5" -"@babel/helper-member-expression-to-functions@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz#0a7c56117cad3372fbf8d2fb4bf8f8d64a1e76b2" - integrity sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ== +"@babel/helper-member-expression-to-functions@^7.22.15": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366" + integrity sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA== dependencies: - "@babel/types" "^7.22.5" + "@babel/types" "^7.23.0" -"@babel/helper-module-imports@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c" - integrity sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg== +"@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.22.5": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" + integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== dependencies: - "@babel/types" "^7.22.5" + "@babel/types" "^7.22.15" -"@babel/helper-module-transforms@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz#0f65daa0716961b6e96b164034e737f60a80d2ef" - integrity sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw== +"@babel/helper-module-transforms@^7.22.5", "@babel/helper-module-transforms@^7.23.0": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e" + integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw== dependencies: - "@babel/helper-environment-visitor" "^7.22.5" - "@babel/helper-module-imports" "^7.22.5" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-module-imports" "^7.22.15" "@babel/helper-simple-access" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.5" - "@babel/helper-validator-identifier" "^7.22.5" - "@babel/template" "^7.22.5" - "@babel/traverse" "^7.22.5" - "@babel/types" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/helper-validator-identifier" "^7.22.20" "@babel/helper-optimise-call-expression@^7.22.5": version "7.22.5" @@ -183,32 +180,28 @@ dependencies: "@babel/types" "^7.22.5" -"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": +"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": version "7.22.5" resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg== -"@babel/helper-remap-async-to-generator@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz#14a38141a7bf2165ad38da61d61cf27b43015da2" - integrity sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g== +"@babel/helper-remap-async-to-generator@^7.22.5", "@babel/helper-remap-async-to-generator@^7.22.9": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0" + integrity sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw== dependencies: "@babel/helper-annotate-as-pure" "^7.22.5" - "@babel/helper-environment-visitor" "^7.22.5" - "@babel/helper-wrap-function" "^7.22.5" - "@babel/types" "^7.22.5" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-wrap-function" "^7.22.20" -"@babel/helper-replace-supers@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz#71bc5fb348856dea9fdc4eafd7e2e49f585145dc" - integrity sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg== +"@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793" + integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw== dependencies: - "@babel/helper-environment-visitor" "^7.22.5" - "@babel/helper-member-expression-to-functions" "^7.22.5" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-member-expression-to-functions" "^7.22.15" "@babel/helper-optimise-call-expression" "^7.22.5" - "@babel/template" "^7.22.5" - "@babel/traverse" "^7.22.5" - "@babel/types" "^7.22.5" "@babel/helper-simple-access@^7.22.5": version "7.22.5" @@ -224,10 +217,10 @@ dependencies: "@babel/types" "^7.22.5" -"@babel/helper-split-export-declaration@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz#88cf11050edb95ed08d596f7a044462189127a08" - integrity sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ== +"@babel/helper-split-export-declaration@^7.22.6": + version "7.22.6" + resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" + integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g== dependencies: "@babel/types" "^7.22.5" @@ -236,78 +229,69 @@ resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== -"@babel/helper-validator-identifier@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193" - integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ== +"@babel/helper-validator-identifier@^7.22.20": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" + integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A== -"@babel/helper-validator-option@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac" - integrity sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw== +"@babel/helper-validator-option@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" + integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA== -"@babel/helper-wrap-function@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz#44d205af19ed8d872b4eefb0d2fa65f45eb34f06" - integrity sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw== +"@babel/helper-wrap-function@^7.22.20": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569" + integrity sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw== dependencies: "@babel/helper-function-name" "^7.22.5" - "@babel/template" "^7.22.5" - "@babel/traverse" "^7.22.5" - "@babel/types" "^7.22.5" + "@babel/template" "^7.22.15" + "@babel/types" "^7.22.19" -"@babel/helpers@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.5.tgz#74bb4373eb390d1ceed74a15ef97767e63120820" - integrity sha512-pSXRmfE1vzcUIDFQcSGA5Mr+GxBV9oiRKDuDxXvWQQBCh8HoIjs/2DlDB7H8smac1IVrB9/xdXj2N3Wol9Cr+Q== +"@babel/helpers@^7.23.0": + version "7.23.1" + resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.1.tgz#44e981e8ce2b9e99f8f0b703f3326a4636c16d15" + integrity sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA== dependencies: - "@babel/template" "^7.22.5" - "@babel/traverse" "^7.22.5" - "@babel/types" "^7.22.5" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.23.0" + "@babel/types" "^7.23.0" -"@babel/highlight@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz#aa6c05c5407a67ebce408162b7ede789b4d22031" - integrity sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw== +"@babel/highlight@^7.22.13": + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54" + integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg== dependencies: - "@babel/helper-validator-identifier" "^7.22.5" - chalk "^2.0.0" + "@babel/helper-validator-identifier" "^7.22.20" + chalk "^2.4.2" js-tokens "^4.0.0" -"@babel/parser@^7.20.15", "@babel/parser@^7.21.3", "@babel/parser@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea" - integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q== +"@babel/parser@^7.22.15", "@babel/parser@^7.23.0": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" + integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw== -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e" - integrity sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ== +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.15.tgz#02dc8a03f613ed5fdc29fb2f728397c78146c962" + integrity sha512-FB9iYlz7rURmRJyXRKEnalYPPdn87H5no108cyuQQyMwlpJ2SJtpIUBI27kdTin956pz+LPypkPVPUTlxOmrsg== dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz#fef09f9499b1f1c930da8a0c419db42167d792ca" - integrity sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g== +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.15.tgz#2aeb91d337d4e1a1e7ce85b76a37f5301781200f" + integrity sha512-Hyph9LseGvAeeXzikV88bczhsrLrIZqDPxO+sSmAunMPaGrBGhfMWzCPYTtiW9t+HzSE2wtV8e5cc5P6r1xMDQ== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" - "@babel/plugin-transform-optional-chaining" "^7.22.5" + "@babel/plugin-transform-optional-chaining" "^7.22.15" "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2": version "7.21.0-placeholder-for-preset-env.2" resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703" integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w== -"@babel/plugin-proposal-unicode-property-regex@^7.4.4": - version "7.18.6" - resolved "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e" - integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w== - dependencies: - "@babel/helper-create-regexp-features-plugin" "^7.18.6" - "@babel/helper-plugin-utils" "^7.18.6" - "@babel/plugin-syntax-async-generators@^7.8.4": version "7.8.4" resolved "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d" @@ -449,14 +433,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-async-generator-functions@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.5.tgz#7336356d23380eda9a56314974f053a020dab0c3" - integrity sha512-gGOEvFzm3fWoyD5uZq7vVTD57pPJ3PczPUD/xCFGjzBpUosnklmXyKnGQbbbGs1NPNPskFex0j93yKbHt0cHyg== +"@babel/plugin-transform-async-generator-functions@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.15.tgz#3b153af4a6b779f340d5b80d3f634f55820aefa3" + integrity sha512-jBm1Es25Y+tVoTi5rfd5t1KLmL8ogLKpXszboWOTTtGFGz2RKnQe2yn7HbZ+kb/B8N0FVSGQo874NSlOU1T4+w== dependencies: "@babel/helper-environment-visitor" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" - "@babel/helper-remap-async-to-generator" "^7.22.5" + "@babel/helper-remap-async-to-generator" "^7.22.9" "@babel/plugin-syntax-async-generators" "^7.8.4" "@babel/plugin-transform-async-to-generator@^7.22.5": @@ -475,10 +459,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-block-scoping@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz#8bfc793b3a4b2742c0983fadc1480d843ecea31b" - integrity sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg== +"@babel/plugin-transform-block-scoping@^7.22.15": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.0.tgz#8744d02c6c264d82e1a4bc5d2d501fd8aff6f022" + integrity sha512-cOsrbmIOXmf+5YbL99/S49Y3j46k/T16b9ml8bm9lP6N9US5iQ2yBK7gpui1pg0V/WMcXdkfKbTb7HXq9u+v4g== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -490,28 +474,28 @@ "@babel/helper-create-class-features-plugin" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-class-static-block@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz#3e40c46f048403472d6f4183116d5e46b1bff5ba" - integrity sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA== +"@babel/plugin-transform-class-static-block@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.11.tgz#dc8cc6e498f55692ac6b4b89e56d87cec766c974" + integrity sha512-GMM8gGmqI7guS/llMFk1bJDkKfn3v3C4KHK9Yg1ey5qcHcOlKb0QvcMrgzvxo+T03/4szNh5lghY+fEC98Kq9g== dependencies: - "@babel/helper-create-class-features-plugin" "^7.22.5" + "@babel/helper-create-class-features-plugin" "^7.22.11" "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-class-static-block" "^7.14.5" -"@babel/plugin-transform-classes@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz#635d4e98da741fad814984639f4c0149eb0135e1" - integrity sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ== +"@babel/plugin-transform-classes@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.15.tgz#aaf4753aee262a232bbc95451b4bdf9599c65a0b" + integrity sha512-VbbC3PGjBdE0wAWDdHM9G8Gm977pnYI0XpqMd6LrKISj8/DJXEsWqgRuTYaNE9Bv0JGhTZUzHDlMk18IpOuoqw== dependencies: "@babel/helper-annotate-as-pure" "^7.22.5" - "@babel/helper-compilation-targets" "^7.22.5" + "@babel/helper-compilation-targets" "^7.22.15" "@babel/helper-environment-visitor" "^7.22.5" "@babel/helper-function-name" "^7.22.5" "@babel/helper-optimise-call-expression" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" - "@babel/helper-replace-supers" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.5" + "@babel/helper-replace-supers" "^7.22.9" + "@babel/helper-split-export-declaration" "^7.22.6" globals "^11.1.0" "@babel/plugin-transform-computed-properties@^7.22.5": @@ -522,14 +506,14 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/template" "^7.22.5" -"@babel/plugin-transform-destructuring@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz#d3aca7438f6c26c78cdd0b0ba920a336001b27cc" - integrity sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ== +"@babel/plugin-transform-destructuring@^7.22.15": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.0.tgz#6447aa686be48b32eaf65a73e0e2c0bd010a266c" + integrity sha512-vaMdgNXFkYrB+8lbgniSYWHsgqK5gjaMNcc84bMIOMRLH0L9AqYq3hwMdvnyqj1OPqea8UtjPEuS/DCenah1wg== dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-dotall-regex@^7.22.5", "@babel/plugin-transform-dotall-regex@^7.4.4": +"@babel/plugin-transform-dotall-regex@^7.22.5": version "7.22.5" resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz#dbb4f0e45766eb544e193fb00e65a1dd3b2a4165" integrity sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw== @@ -544,10 +528,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-dynamic-import@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz#d6908a8916a810468c4edff73b5b75bda6ad393e" - integrity sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ== +"@babel/plugin-transform-dynamic-import@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.11.tgz#2c7722d2a5c01839eaf31518c6ff96d408e447aa" + integrity sha512-g/21plo58sfteWjaO0ZNVb+uEOkJNjAaHhbejrnBmu011l/eNDScmkbjCC3l4FKb10ViaGU4aOkFznSu2zRHgA== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-dynamic-import" "^7.8.3" @@ -560,18 +544,18 @@ "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-export-namespace-from@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz#57c41cb1d0613d22f548fddd8b288eedb9973a5b" - integrity sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg== +"@babel/plugin-transform-export-namespace-from@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.11.tgz#b3c84c8f19880b6c7440108f8929caf6056db26c" + integrity sha512-xa7aad7q7OiT8oNZ1mU7NrISjlSkVdMbNxn9IuLZyL9AJEhs1Apba3I+u5riX1dIkdptP5EKDG5XDPByWxtehw== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-export-namespace-from" "^7.8.3" -"@babel/plugin-transform-for-of@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz#ab1b8a200a8f990137aff9a084f8de4099ab173f" - integrity sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A== +"@babel/plugin-transform-for-of@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.15.tgz#f64b4ccc3a4f131a996388fae7680b472b306b29" + integrity sha512-me6VGeHsx30+xh9fbDLLPi0J1HzmeIIyenoOQHuw2D4m2SAU3NrspX5XxJLBpqn5yrLzrlw2Iy3RA//Bx27iOA== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -584,10 +568,10 @@ "@babel/helper-function-name" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-json-strings@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz#14b64352fdf7e1f737eed68de1a1468bd2a77ec0" - integrity sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A== +"@babel/plugin-transform-json-strings@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.11.tgz#689a34e1eed1928a40954e37f74509f48af67835" + integrity sha512-CxT5tCqpA9/jXFlme9xIBCc5RPtdDq3JpkkhgHQqtDdiTnTI0jtZ0QzXhr5DILeYifDPp2wvY2ad+7+hLMW5Pw== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-json-strings" "^7.8.3" @@ -599,10 +583,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-logical-assignment-operators@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz#66ae5f068fd5a9a5dc570df16f56c2a8462a9d6c" - integrity sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA== +"@babel/plugin-transform-logical-assignment-operators@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.11.tgz#24c522a61688bde045b7d9bc3c2597a4d948fc9c" + integrity sha512-qQwRTP4+6xFCDV5k7gZBF3C31K34ut0tbEcTKxlX/0KXxm9GLcO14p570aWxFvVzx6QAfPgq7gaeIHXJC8LswQ== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" @@ -615,31 +599,31 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-transform-modules-amd@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz#4e045f55dcf98afd00f85691a68fc0780704f526" - integrity sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ== + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.0.tgz#05b2bc43373faa6d30ca89214731f76f966f3b88" + integrity sha512-xWT5gefv2HGSm4QHtgc1sYPbseOyf+FFDo2JbpE25GWl5BqTGO9IMwTYJRoIdjsF85GE+VegHxSCUt5EvoYTAw== dependencies: - "@babel/helper-module-transforms" "^7.22.5" + "@babel/helper-module-transforms" "^7.23.0" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-modules-commonjs@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz#7d9875908d19b8c0536085af7b053fd5bd651bfa" - integrity sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA== +"@babel/plugin-transform-modules-commonjs@^7.22.15": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.0.tgz#b3dba4757133b2762c00f4f94590cf6d52602481" + integrity sha512-32Xzss14/UVc7k9g775yMIvkVK8xwKE0DPdP5JTapr3+Z9w4tzeOuLNY6BXDQR6BdnzIlXnCGAzsk/ICHBLVWQ== dependencies: - "@babel/helper-module-transforms" "^7.22.5" + "@babel/helper-module-transforms" "^7.23.0" "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-simple-access" "^7.22.5" -"@babel/plugin-transform-modules-systemjs@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz#18c31410b5e579a0092638f95c896c2a98a5d496" - integrity sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ== +"@babel/plugin-transform-modules-systemjs@^7.22.11": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.0.tgz#77591e126f3ff4132a40595a6cccd00a6b60d160" + integrity sha512-qBej6ctXZD2f+DhlOC9yO47yEYgUh5CZNz/aBoH4j/3NOlRfJXJbY7xDQCqQVf9KbrqGzIWER1f23doHGrIHFg== dependencies: "@babel/helper-hoist-variables" "^7.22.5" - "@babel/helper-module-transforms" "^7.22.5" + "@babel/helper-module-transforms" "^7.23.0" "@babel/helper-plugin-utils" "^7.22.5" - "@babel/helper-validator-identifier" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.20" "@babel/plugin-transform-modules-umd@^7.22.5": version "7.22.5" @@ -664,32 +648,32 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-nullish-coalescing-operator@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz#f8872c65776e0b552e0849d7596cddd416c3e381" - integrity sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA== +"@babel/plugin-transform-nullish-coalescing-operator@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz#debef6c8ba795f5ac67cd861a81b744c5d38d9fc" + integrity sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" -"@babel/plugin-transform-numeric-separator@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz#57226a2ed9e512b9b446517ab6fa2d17abb83f58" - integrity sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g== +"@babel/plugin-transform-numeric-separator@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.11.tgz#498d77dc45a6c6db74bb829c02a01c1d719cbfbd" + integrity sha512-3dzU4QGPsILdJbASKhF/V2TVP+gJya1PsueQCxIPCEcerqF21oEcrob4mzjsp2Py/1nLfF5m+xYNMDpmA8vffg== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-numeric-separator" "^7.10.4" -"@babel/plugin-transform-object-rest-spread@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz#9686dc3447df4753b0b2a2fae7e8bc33cdc1f2e1" - integrity sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ== +"@babel/plugin-transform-object-rest-spread@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.15.tgz#21a95db166be59b91cde48775310c0df6e1da56f" + integrity sha512-fEB+I1+gAmfAyxZcX1+ZUwLeAuuf8VIg67CTznZE0MqVFumWkh8xWtn58I4dxdVf080wn7gzWoF8vndOViJe9Q== dependencies: - "@babel/compat-data" "^7.22.5" - "@babel/helper-compilation-targets" "^7.22.5" + "@babel/compat-data" "^7.22.9" + "@babel/helper-compilation-targets" "^7.22.15" "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-object-rest-spread" "^7.8.3" - "@babel/plugin-transform-parameters" "^7.22.5" + "@babel/plugin-transform-parameters" "^7.22.15" "@babel/plugin-transform-object-super@^7.22.5": version "7.22.5" @@ -699,27 +683,27 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-replace-supers" "^7.22.5" -"@babel/plugin-transform-optional-catch-binding@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz#842080be3076703be0eaf32ead6ac8174edee333" - integrity sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg== +"@babel/plugin-transform-optional-catch-binding@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.11.tgz#461cc4f578a127bb055527b3e77404cad38c08e0" + integrity sha512-rli0WxesXUeCJnMYhzAglEjLWVDF6ahb45HuprcmQuLidBJFWjNnOzssk2kuc6e33FlLaiZhG/kUIzUMWdBKaQ== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" -"@babel/plugin-transform-optional-chaining@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz#1003762b9c14295501beb41be72426736bedd1e0" - integrity sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ== +"@babel/plugin-transform-optional-chaining@^7.22.15": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.0.tgz#73ff5fc1cf98f542f09f29c0631647d8ad0be158" + integrity sha512-sBBGXbLJjxTzLBF5rFWaikMnOGOk/BmK6vVByIdEggZ7Vn6CvWXZyRkkLFK6WE0IF8jSliyOkUN6SScFgzCM0g== dependencies: "@babel/helper-plugin-utils" "^7.22.5" "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" "@babel/plugin-syntax-optional-chaining" "^7.8.3" -"@babel/plugin-transform-parameters@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz#c3542dd3c39b42c8069936e48717a8d179d63a18" - integrity sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg== +"@babel/plugin-transform-parameters@^7.22.15": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.15.tgz#719ca82a01d177af358df64a514d64c2e3edb114" + integrity sha512-hjk7qKIqhyzhhUvRT683TYQOFa/4cQKwQy7ALvTpODswN40MljzNDa0YldevS6tGbxwaEKVn502JmY0dP7qEtQ== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -731,13 +715,13 @@ "@babel/helper-create-class-features-plugin" "^7.22.5" "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-private-property-in-object@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz#07a77f28cbb251546a43d175a1dda4cf3ef83e32" - integrity sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ== +"@babel/plugin-transform-private-property-in-object@^7.22.11": + version "7.22.11" + resolved "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.11.tgz#ad45c4fc440e9cb84c718ed0906d96cf40f9a4e1" + integrity sha512-sSCbqZDBKHetvjSwpyWzhuHkmW5RummxJBVbYLkGkaiTOWGxml7SXt0iWa03bzxFIx7wOj3g/ILRd0RcJKBeSQ== dependencies: "@babel/helper-annotate-as-pure" "^7.22.5" - "@babel/helper-create-class-features-plugin" "^7.22.5" + "@babel/helper-create-class-features-plugin" "^7.22.11" "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-private-property-in-object" "^7.14.5" @@ -748,13 +732,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-regenerator@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz#cd8a68b228a5f75fa01420e8cc2fc400f0fc32aa" - integrity sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw== +"@babel/plugin-transform-regenerator@^7.22.10": + version "7.22.10" + resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.10.tgz#8ceef3bd7375c4db7652878b0241b2be5d0c3cca" + integrity sha512-F28b1mDt8KcT5bUyJc/U9nwzw6cV+UmTeRlXYIl2TNqMMJif0Jeey9/RQ3C4NOd2zp0/TRsDns9ttj2L523rsw== dependencies: "@babel/helper-plugin-utils" "^7.22.5" - regenerator-transform "^0.15.1" + regenerator-transform "^0.15.2" "@babel/plugin-transform-reserved-words@^7.22.5": version "7.22.5" @@ -799,10 +783,10 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" -"@babel/plugin-transform-unicode-escapes@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz#ce0c248522b1cb22c7c992d88301a5ead70e806c" - integrity sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg== +"@babel/plugin-transform-unicode-escapes@^7.22.10": + version "7.22.10" + resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.10.tgz#c723f380f40a2b2f57a62df24c9005834c8616d9" + integrity sha512-lRfaRKGZCBqDlRU3UIFovdp9c9mEvlylmpod0/OatICsSfuQ9YFthRo1tpTkGsklEefZdqlEFdY4A2dwTb6ohg== dependencies: "@babel/helper-plugin-utils" "^7.22.5" @@ -831,16 +815,16 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/preset-env@^7.12.13", "@babel/preset-env@^7.14.2": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.5.tgz#3da66078b181f3d62512c51cf7014392c511504e" - integrity sha512-fj06hw89dpiZzGZtxn+QybifF07nNiZjZ7sazs2aVDcysAZVGjW7+7iFYxg6GLNM47R/thYfLdrXc+2f11Vi9A== + version "7.22.20" + resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.20.tgz#de9e9b57e1127ce0a2f580831717f7fb677ceedb" + integrity sha512-11MY04gGC4kSzlPHRfvVkNAZhUxOvm7DCJ37hPDnUENwe06npjIRAfInEMTGSb4LZK5ZgDFkv5hw0lGebHeTyg== dependencies: - "@babel/compat-data" "^7.22.5" - "@babel/helper-compilation-targets" "^7.22.5" + "@babel/compat-data" "^7.22.20" + "@babel/helper-compilation-targets" "^7.22.15" "@babel/helper-plugin-utils" "^7.22.5" - "@babel/helper-validator-option" "^7.22.5" - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.5" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.5" + "@babel/helper-validator-option" "^7.22.15" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.22.15" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.22.15" "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators" "^7.8.4" "@babel/plugin-syntax-class-properties" "^7.12.13" @@ -861,69 +845,67 @@ "@babel/plugin-syntax-top-level-await" "^7.14.5" "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6" "@babel/plugin-transform-arrow-functions" "^7.22.5" - "@babel/plugin-transform-async-generator-functions" "^7.22.5" + "@babel/plugin-transform-async-generator-functions" "^7.22.15" "@babel/plugin-transform-async-to-generator" "^7.22.5" "@babel/plugin-transform-block-scoped-functions" "^7.22.5" - "@babel/plugin-transform-block-scoping" "^7.22.5" + "@babel/plugin-transform-block-scoping" "^7.22.15" "@babel/plugin-transform-class-properties" "^7.22.5" - "@babel/plugin-transform-class-static-block" "^7.22.5" - "@babel/plugin-transform-classes" "^7.22.5" + "@babel/plugin-transform-class-static-block" "^7.22.11" + "@babel/plugin-transform-classes" "^7.22.15" "@babel/plugin-transform-computed-properties" "^7.22.5" - "@babel/plugin-transform-destructuring" "^7.22.5" + "@babel/plugin-transform-destructuring" "^7.22.15" "@babel/plugin-transform-dotall-regex" "^7.22.5" "@babel/plugin-transform-duplicate-keys" "^7.22.5" - "@babel/plugin-transform-dynamic-import" "^7.22.5" + "@babel/plugin-transform-dynamic-import" "^7.22.11" "@babel/plugin-transform-exponentiation-operator" "^7.22.5" - "@babel/plugin-transform-export-namespace-from" "^7.22.5" - "@babel/plugin-transform-for-of" "^7.22.5" + "@babel/plugin-transform-export-namespace-from" "^7.22.11" + "@babel/plugin-transform-for-of" "^7.22.15" "@babel/plugin-transform-function-name" "^7.22.5" - "@babel/plugin-transform-json-strings" "^7.22.5" + "@babel/plugin-transform-json-strings" "^7.22.11" "@babel/plugin-transform-literals" "^7.22.5" - "@babel/plugin-transform-logical-assignment-operators" "^7.22.5" + "@babel/plugin-transform-logical-assignment-operators" "^7.22.11" "@babel/plugin-transform-member-expression-literals" "^7.22.5" "@babel/plugin-transform-modules-amd" "^7.22.5" - "@babel/plugin-transform-modules-commonjs" "^7.22.5" - "@babel/plugin-transform-modules-systemjs" "^7.22.5" + "@babel/plugin-transform-modules-commonjs" "^7.22.15" + "@babel/plugin-transform-modules-systemjs" "^7.22.11" "@babel/plugin-transform-modules-umd" "^7.22.5" "@babel/plugin-transform-named-capturing-groups-regex" "^7.22.5" "@babel/plugin-transform-new-target" "^7.22.5" - "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.5" - "@babel/plugin-transform-numeric-separator" "^7.22.5" - "@babel/plugin-transform-object-rest-spread" "^7.22.5" + "@babel/plugin-transform-nullish-coalescing-operator" "^7.22.11" + "@babel/plugin-transform-numeric-separator" "^7.22.11" + "@babel/plugin-transform-object-rest-spread" "^7.22.15" "@babel/plugin-transform-object-super" "^7.22.5" - "@babel/plugin-transform-optional-catch-binding" "^7.22.5" - "@babel/plugin-transform-optional-chaining" "^7.22.5" - "@babel/plugin-transform-parameters" "^7.22.5" + "@babel/plugin-transform-optional-catch-binding" "^7.22.11" + "@babel/plugin-transform-optional-chaining" "^7.22.15" + "@babel/plugin-transform-parameters" "^7.22.15" "@babel/plugin-transform-private-methods" "^7.22.5" - "@babel/plugin-transform-private-property-in-object" "^7.22.5" + "@babel/plugin-transform-private-property-in-object" "^7.22.11" "@babel/plugin-transform-property-literals" "^7.22.5" - "@babel/plugin-transform-regenerator" "^7.22.5" + "@babel/plugin-transform-regenerator" "^7.22.10" "@babel/plugin-transform-reserved-words" "^7.22.5" "@babel/plugin-transform-shorthand-properties" "^7.22.5" "@babel/plugin-transform-spread" "^7.22.5" "@babel/plugin-transform-sticky-regex" "^7.22.5" "@babel/plugin-transform-template-literals" "^7.22.5" "@babel/plugin-transform-typeof-symbol" "^7.22.5" - "@babel/plugin-transform-unicode-escapes" "^7.22.5" + "@babel/plugin-transform-unicode-escapes" "^7.22.10" "@babel/plugin-transform-unicode-property-regex" "^7.22.5" "@babel/plugin-transform-unicode-regex" "^7.22.5" "@babel/plugin-transform-unicode-sets-regex" "^7.22.5" - "@babel/preset-modules" "^0.1.5" - "@babel/types" "^7.22.5" - babel-plugin-polyfill-corejs2 "^0.4.3" - babel-plugin-polyfill-corejs3 "^0.8.1" - babel-plugin-polyfill-regenerator "^0.5.0" - core-js-compat "^3.30.2" - semver "^6.3.0" - -"@babel/preset-modules@^0.1.5": - version "0.1.5" - resolved "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz#ef939d6e7f268827e1841638dc6ff95515e115d9" - integrity sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA== + "@babel/preset-modules" "0.1.6-no-external-plugins" + "@babel/types" "^7.22.19" + babel-plugin-polyfill-corejs2 "^0.4.5" + babel-plugin-polyfill-corejs3 "^0.8.3" + babel-plugin-polyfill-regenerator "^0.5.2" + core-js-compat "^3.31.0" + semver "^6.3.1" + +"@babel/preset-modules@0.1.6-no-external-plugins": + version "0.1.6-no-external-plugins" + resolved "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a" + integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA== dependencies: "@babel/helper-plugin-utils" "^7.0.0" - "@babel/plugin-proposal-unicode-property-regex" "^7.4.4" - "@babel/plugin-transform-dotall-regex" "^7.4.4" "@babel/types" "^7.4.4" esutils "^2.0.2" @@ -933,44 +915,44 @@ integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== "@babel/runtime@^7.14.0", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec" - integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA== - dependencies: - regenerator-runtime "^0.13.11" - -"@babel/template@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec" - integrity sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw== - dependencies: - "@babel/code-frame" "^7.22.5" - "@babel/parser" "^7.22.5" - "@babel/types" "^7.22.5" - -"@babel/traverse@^7.22.5": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz#44bd276690db6f4940fdb84e1cb4abd2f729ccd1" - integrity sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ== - dependencies: - "@babel/code-frame" "^7.22.5" - "@babel/generator" "^7.22.5" - "@babel/helper-environment-visitor" "^7.22.5" - "@babel/helper-function-name" "^7.22.5" + version "7.23.1" + resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d" + integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g== + dependencies: + regenerator-runtime "^0.14.0" + +"@babel/template@^7.22.15", "@babel/template@^7.22.5": + version "7.22.15" + resolved "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" + integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/parser" "^7.22.15" + "@babel/types" "^7.22.15" + +"@babel/traverse@^7.23.0": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.0.tgz#18196ddfbcf4ccea324b7f6d3ada00d8c5a99c53" + integrity sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.23.0" "@babel/helper-hoist-variables" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.5" - "@babel/parser" "^7.22.5" - "@babel/types" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.23.0" + "@babel/types" "^7.23.0" debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.22.5", "@babel/types@^7.4.4": - version "7.22.5" - resolved "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe" - integrity sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA== +"@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.4.4": + version "7.23.0" + resolved "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb" + integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg== dependencies: "@babel/helper-string-parser" "^7.22.5" - "@babel/helper-validator-identifier" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" "@changesets/apply-release-plan@^6.1.4": @@ -1311,9 +1293,9 @@ integrity sha512-WWYVgGDpLRDppizhvjssfydFPH+uKKR39d4dEtkxQEhOgAkxkNNfpshLmBh5xPeug8iImccUizT9tXgAcsFEQQ== "@chialab/estransform@^0.17.0", "@chialab/estransform@^0.17.1", "@chialab/estransform@^0.17.3", "@chialab/estransform@^0.17.4": - version "0.17.4" - resolved "https://registry.npmjs.org/@chialab/estransform/-/estransform-0.17.4.tgz#9064563c716aa52780867390a2c9cd0c4af0343d" - integrity sha512-p4nf8ECdmanwbRK6A/X/VYtJfkBk5vgChPh0GiCyZAPt6/mKPbe0v3y9WjLHfFdkv1bzjJzP3pjTJ1SZ1E1U8Q== + version "0.17.5" + resolved "https://registry.npmjs.org/@chialab/estransform/-/estransform-0.17.5.tgz#de99861bd5343f66528493fa507ec4254984b207" + integrity sha512-maJUFkwk0ie0L4VvDO74NDYyRvaTQAI0qmSmrms8bZxUkZ+zQZd1ByWKDCYTRwtR6AOzTvgEOl2ZvEG+OUKv/A== dependencies: "@parcel/source-map" "^2.0.0" @@ -1334,6 +1316,11 @@ resolved "https://registry.npmjs.org/@chialab/node-resolve/-/node-resolve-0.17.1.tgz#ef51948742901d58625cf0275d7b1eb094d4a1b9" integrity sha512-YWaK0MKKeB0FILI6j7qiAlGoSC9MqJZDFXzlAgfOaMCbn8Feqh6njxv7mI3oVkdi7QwV6zPRaTN6hKig/NriMA== +"@chialab/quantum@^1.0.0-alpha.0": + version "1.0.0-alpha.1" + resolved "https://registry.npmjs.org/@chialab/quantum/-/quantum-1.0.0-alpha.1.tgz#ffd03300523ca338270560089e90c156e11b89e1" + integrity sha512-fJy1qMiway1LMkj1Rz9s0a97nr4BagRzVpvZX9lCn1hY2nC01w1D6ltI2q7WtyyncFyOzxc3ETD8hAsoUu7xUg== + "@chialab/rna-browser-test-runner@^0.17.0", "@chialab/rna-browser-test-runner@^0.17.1": version "0.17.4" resolved "https://registry.npmjs.org/@chialab/rna-browser-test-runner/-/rna-browser-test-runner-0.17.4.tgz#621d39c30dc005756a51b6748dfd3b499837da9f" @@ -1371,9 +1358,9 @@ esbuild "^0.15.0" "@chialab/rna-config-loader@^0.17.0", "@chialab/rna-config-loader@^0.17.2": - version "0.17.4" - resolved "https://registry.npmjs.org/@chialab/rna-config-loader/-/rna-config-loader-0.17.4.tgz#124134d64f102e37501b615f3255549aee071420" - integrity sha512-EAv0Rq50jsc62jrpxpqWaTK33Y7I67reKQQx1uXyrBaGoe4mJzK0rzDfYaNdghhf32GibV8u2mmK9uCe5jyeOA== + version "0.17.5" + resolved "https://registry.npmjs.org/@chialab/rna-config-loader/-/rna-config-loader-0.17.5.tgz#f879f42a44d3e373ce0c347ff5ffc85b93c06a15" + integrity sha512-kgm/ShA0Reuev52pKmJTuj20lCLRTS1OG3P0+BAZ8eIndhfKvh11rmCYTF8FLhXePNwgTCsHOH8b6XbHgyJ5QA== dependencies: "@chialab/node-resolve" "^0.17.0" @@ -1513,19 +1500,19 @@ dependencies: eslint-visitor-keys "^3.3.0" -"@eslint-community/regexpp@^4.4.0": - version "4.5.1" - resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz#cdd35dce4fa1a89a4fd42b1599eb35b3af408884" - integrity sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ== +"@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1": + version "4.9.0" + resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.9.0.tgz#7ccb5f58703fa61ffdcbf39e2c604a109e781162" + integrity sha512-zJmuCWj2VLBt4c25CfBIbMZLGLyhkvs7LznyVX5HfpzeocThgIj5XQK4L+g3U36mMcx8bPMhGyPpwCATamC4jQ== -"@eslint/eslintrc@^2.0.3": - version "2.0.3" - resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz#4910db5505f4d503f27774bf356e3704818a0331" - integrity sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ== +"@eslint/eslintrc@^2.1.2": + version "2.1.2" + resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396" + integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g== dependencies: ajv "^6.12.4" debug "^4.3.2" - espree "^9.5.2" + espree "^9.6.0" globals "^13.19.0" ignore "^5.2.0" import-fresh "^3.2.1" @@ -1533,10 +1520,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/js@8.43.0": - version "8.43.0" - resolved "https://registry.npmjs.org/@eslint/js/-/js-8.43.0.tgz#559ca3d9ddbd6bf907ad524320a0d14b85586af0" - integrity sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg== +"@eslint/js@8.50.0": + version "8.50.0" + resolved "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz#9e93b850f0f3fa35f5fa59adfd03adae8488e484" + integrity sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ== "@financial-times/polyfill-useragent-normaliser@^1.10.1": version "1.10.2" @@ -1551,10 +1538,10 @@ resolved "https://registry.npmjs.org/@financial-times/useragent_parser/-/useragent_parser-1.6.3.tgz#338e9d63b77152cda3b7244db7b9b9db996de361" integrity sha512-TlQiXt/vS5ZwY0V3salvlyQzIzMGZEyw9inmJA25A8heL2kBVENbToiEc64R6ETNf5YHa2lwnc2I7iNHP9SqeQ== -"@humanwhocodes/config-array@^0.11.10": - version "0.11.10" - resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2" - integrity sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ== +"@humanwhocodes/config-array@^0.11.11": + version "0.11.11" + resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844" + integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA== dependencies: "@humanwhocodes/object-schema" "^1.2.1" debug "^4.1.1" @@ -1579,45 +1566,28 @@ "@jridgewell/sourcemap-codec" "^1.4.10" "@jridgewell/trace-mapping" "^0.3.9" -"@jridgewell/resolve-uri@3.1.0": - version "3.1.0" - resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78" - integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.1" + resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" + integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== "@jridgewell/set-array@^1.0.1": version "1.1.2" resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== -"@jridgewell/sourcemap-codec@1.4.14": - version "1.4.14" - resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24" - integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw== - -"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13": +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": version "1.4.15" resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9": - version "0.3.18" - resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6" - integrity sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA== - dependencies: - "@jridgewell/resolve-uri" "3.1.0" - "@jridgewell/sourcemap-codec" "1.4.14" - -"@lit-labs/ssr-dom-shim@^1.0.0", "@lit-labs/ssr-dom-shim@^1.1.0": - version "1.1.1" - resolved "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9" - integrity sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ== - -"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0": - version "1.6.2" - resolved "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.2.tgz#c256690f82f2d7d0ffb0b1cdf68dcb1ec86cea28" - integrity sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA== + version "0.3.19" + resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811" + integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw== dependencies: - "@lit-labs/ssr-dom-shim" "^1.0.0" + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" "@manypkg/find-root@^1.1.0": version "1.1.0" @@ -1693,10 +1663,10 @@ dependencies: defer-to-connect "^2.0.0" -"@tootallnate/once@1": - version "1.1.2" - resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" - integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw== +"@tootallnate/once@2": + version "2.0.0" + resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" + integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== "@types/accepts@*": version "1.3.5" @@ -1706,19 +1676,19 @@ "@types/node" "*" "@types/aria-query@^5.0.0": - version "5.0.1" - resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz#3286741fb8f1e1580ac28784add4c7a1d49bdfbc" - integrity sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q== + version "5.0.2" + resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.2.tgz#6f1225829d89794fd9f891989c9ce667422d7f64" + integrity sha512-PHKZuMN+K5qgKIWhBodXzQslTo5P+K/6LqeKXS6O/4liIDdZqaX5RXrCK++LAw+y/nptN48YmUMFiQHRSWYwtQ== "@types/babel__code-frame@^7.0.2": - version "7.0.3" - resolved "https://registry.npmjs.org/@types/babel__code-frame/-/babel__code-frame-7.0.3.tgz#eda94e1b7c9326700a4b69c485ebbc9498a0b63f" - integrity sha512-2TN6oiwtNjOezilFVl77zwdNPwQWaDBBCCWWxyo1ctiO3vAtd7H/aB/CBJdw9+kqq3+latD0SXoedIuHySSZWw== + version "7.0.4" + resolved "https://registry.npmjs.org/@types/babel__code-frame/-/babel__code-frame-7.0.4.tgz#0d14543f70ca91f4d2b0513a60f1eb31432c42e1" + integrity sha512-WBxINLlATjvmpCgBbb9tOPrKtcPfu4A/Yz2iRzmdaodfvjAS/Z0WZJClV9/EXvoC9viI3lgUs7B9Uo7G/RmMGg== "@types/body-parser@*": - version "1.19.2" - resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0" - integrity sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g== + version "1.19.3" + resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.3.tgz#fb558014374f7d9e56c8f34bab2042a3a07d25cd" + integrity sha512-oyl4jvAfTGX9Bt6Or4H9ni1Z447/tQuxnZsytsCaExKlmJiU8sFgnIBRzJUpKwB5eWn9HuBYlUlVA74q/yN0eQ== dependencies: "@types/connect" "*" "@types/node" "*" @@ -1734,9 +1704,9 @@ "@types/responselike" "^1.0.0" "@types/chai-as-promised@^7.1.5": - version "7.1.5" - resolved "https://registry.npmjs.org/@types/chai-as-promised/-/chai-as-promised-7.1.5.tgz#6e016811f6c7a64f2eed823191c3a6955094e255" - integrity sha512-jStwss93SITGBwt/niYrkf2C+/1KTeZCZl1LaeezTlqppAKeoQC7jxyqYuP72sxBGKCIbw7oHgbYssIRzT5FCQ== + version "7.1.6" + resolved "https://registry.npmjs.org/@types/chai-as-promised/-/chai-as-promised-7.1.6.tgz#3b08cbe1e7206567a480dc6538bade374b19e4e1" + integrity sha512-cQLhk8fFarRVZAXUQV1xEnZgMoPxqKojBvRkqPCKPQCzEhpbbSKl1Uu75kDng7k5Ln6LQLUmNBjLlFthCgm1NA== dependencies: "@types/chai" "*" @@ -1748,53 +1718,53 @@ "@types/chai" "*" "@types/chai-spies@^1.0.3": - version "1.0.3" - resolved "https://registry.npmjs.org/@types/chai-spies/-/chai-spies-1.0.3.tgz#a52dc61af3853ec9b80965040811d15dfd401542" - integrity sha512-RBZjhVuK7vrg4rWMt04UF5zHYwfHnpk5mIWu3nQvU3AKGDixXzSjZ6v0zke6pBcaJqMv3IBZ5ibLWPMRDL0sLw== + version "1.0.4" + resolved "https://registry.npmjs.org/@types/chai-spies/-/chai-spies-1.0.4.tgz#2dae4d506012c2549a5901ce481ac10d747902bd" + integrity sha512-HCG1EUGpVYmmqIG9rnSIxkng/tOzARG1HmUIV5miCp55ykqxSnVj2vlXaf6nDwaMm7qzkvNe9SHW15ywPKDqTA== dependencies: "@types/chai" "*" "@types/chai-string@^1.4.2": - version "1.4.2" - resolved "https://registry.npmjs.org/@types/chai-string/-/chai-string-1.4.2.tgz#0f116504a666b6c6a3c42becf86634316c9a19ac" - integrity sha512-ld/1hV5qcPRGuwlPdvRfvM3Ka/iofOk2pH4VkasK4b1JJP1LjNmWWn0LsISf6RRzyhVOvs93rb9tM09e+UuF8Q== + version "1.4.3" + resolved "https://registry.npmjs.org/@types/chai-string/-/chai-string-1.4.3.tgz#06e02d74deed77c2bfccccae44ece6e57a8ecedd" + integrity sha512-bLp5xMQ7Ml0fWa05IPpLjIznTkNbuBE3GtRTzKrp0d10IavlBFcu9vXP2liWaXta79unO693q3kuRxD7g2YYGw== dependencies: "@types/chai" "*" "@types/chai@*", "@types/chai@^4.3.1": - version "4.3.5" - resolved "https://registry.npmjs.org/@types/chai/-/chai-4.3.5.tgz#ae69bcbb1bebb68c4ac0b11e9d8ed04526b3562b" - integrity sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng== + version "4.3.6" + resolved "https://registry.npmjs.org/@types/chai/-/chai-4.3.6.tgz#7b489e8baf393d5dd1266fb203ddd4ea941259e6" + integrity sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw== "@types/co-body@^6.1.0": - version "6.1.0" - resolved "https://registry.npmjs.org/@types/co-body/-/co-body-6.1.0.tgz#b52625390eb0d113c9b697ea92c3ffae7740cdb9" - integrity sha512-3e0q2jyDAnx/DSZi0z2H0yoZ2wt5yRDZ+P7ymcMObvq0ufWRT4tsajyO+Q1VwVWiv9PRR4W3YEjEzBjeZlhF+w== + version "6.1.1" + resolved "https://registry.npmjs.org/@types/co-body/-/co-body-6.1.1.tgz#28d253c95cfbe30c8e8c5d69d4c0dbbcffc101c2" + integrity sha512-I9A1k7o4m8m6YPYJIGb1JyNTLqRWtSPg1JOZPWlE19w8Su2VRgRVp/SkKftQSwoxWHGUxGbON4jltONMumC8bQ== dependencies: "@types/node" "*" "@types/qs" "*" "@types/connect@*": - version "3.4.35" - resolved "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1" - integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ== + version "3.4.36" + resolved "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz#e511558c15a39cb29bd5357eebb57bd1459cd1ab" + integrity sha512-P63Zd/JUGq+PdrM1lv0Wv5SBYeA2+CORvbrXbngriYY0jzLUWfQMQQxOhjONEz/wlHOAxOdY7CY65rgQdTjq2w== dependencies: "@types/node" "*" "@types/content-disposition@*": - version "0.5.5" - resolved "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.5.tgz#650820e95de346e1f84e30667d168c8fd25aa6e3" - integrity sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA== + version "0.5.6" + resolved "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.6.tgz#0f5fa03609f308a7a1a57e0b0afe4b95f1d19740" + integrity sha512-GmShTb4qA9+HMPPaV2+Up8tJafgi38geFi7vL4qAM7k8BwjoelgHZqEUKJZLvughUw22h6vD/wvwN4IUCaWpDA== "@types/convert-source-map@^2.0.0": - version "2.0.0" - resolved "https://registry.npmjs.org/@types/convert-source-map/-/convert-source-map-2.0.0.tgz#a36c2d21963caa18fe32de6cdec3d21a7d2c92b3" - integrity sha512-QUm4YOC/ENo0VjPVl2o8HGyTbHHQGDOw8PCg3rXBucYHKyZN/XjXRbPFAV1tB2FvM0/wyFoDct4cTIctzKrQFg== + version "2.0.1" + resolved "https://registry.npmjs.org/@types/convert-source-map/-/convert-source-map-2.0.1.tgz#e72e8a3de9d6fe3d8e43d5c101c346de2ff6abdf" + integrity sha512-tm5Eb3AwhibN6ULRaad5TbNO83WoXVZLh2YRGAFH+qWkUz48l9Hu1jc+wJswB7T+ACWAG0cFnTeeQGpwedvlNw== "@types/cookies@*": - version "0.7.7" - resolved "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.7.tgz#7a92453d1d16389c05a5301eef566f34946cfd81" - integrity sha512-h7BcvPUogWbKCzBR2lY4oqaZbO3jXZksexYJVFvkrFeLgbZjQkU4x8pRq6eg2MHXQhY0McQdqmmsxRWlVAHooA== + version "0.7.8" + resolved "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.8.tgz#16fccd6d58513a9833c527701a90cc96d216bc18" + integrity sha512-y6KhF1GtsLERUpqOV+qZJrjUGzc0GE6UTa0b5Z/LZ7Nm2mKSdCXmS6Kdnl7fctPNnMSouHjxqEWI12/YqQfk5w== dependencies: "@types/connect" "*" "@types/express" "*" @@ -1802,14 +1772,14 @@ "@types/node" "*" "@types/debounce@^1.2.0": - version "1.2.1" - resolved "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.1.tgz#79b65710bc8b6d44094d286aecf38e44f9627852" - integrity sha512-epMsEE85fi4lfmJUH/89/iV/LI+F5CvNIvmgs5g5jYFPfhO2S/ae8WSsLOKWdwtoaZw9Q2IhJ4tQ5tFCcS/4HA== + version "1.2.2" + resolved "https://registry.npmjs.org/@types/debounce/-/debounce-1.2.2.tgz#8a9fd94003d874b56204526e6686b8a57dc4b278" + integrity sha512-ow0L7we5RXNQocEO9LNBRJCk/ecBc8M0aTg0DLrlg1nsnKAcjvFmYFUbsxujlrbngRslmKIA4mKoOxIJdUElhw== "@types/express-serve-static-core@^4.17.33": - version "4.17.35" - resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz#c95dd4424f0d32e525d23812aa8ab8e4d3906c4f" - integrity sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg== + version "4.17.37" + resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.37.tgz#7e4b7b59da9142138a2aaa7621f5abedce8c7320" + integrity sha512-ZohaCYTgGFcOP7u6aJOhY9uIZQgZ2vxC2yWoArY+FeDXlqeH66ZVBjgvg+RLVAS/DWNq4Ap9ZXu1+SUQiiWYMg== dependencies: "@types/node" "*" "@types/qs" "*" @@ -1817,9 +1787,9 @@ "@types/send" "*" "@types/express@*": - version "4.17.17" - resolved "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz#01d5437f6ef9cfa8668e616e13c2f2ac9a491ae4" - integrity sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q== + version "4.17.18" + resolved "https://registry.npmjs.org/@types/express/-/express-4.17.18.tgz#efabf5c4495c1880df1bdffee604b143b29c4a95" + integrity sha512-Sxv8BSLLgsBYmcnGdGjjEjqET2U+AKAdCRODmMiq02FgjwuV75Ut85DRpvFjyw/Mk0vgUOliGRU0UUmuuZHByQ== dependencies: "@types/body-parser" "*" "@types/express-serve-static-core" "^4.17.33" @@ -1840,19 +1810,19 @@ integrity sha512-FyAOrDuQmBi8/or3ns4rwPno7/9tJTijVW6aQQjK02+kOQ8zmoNg2XJtAuQhvQcy1ASJq38wirX5//9J1EqoUA== "@types/http-cache-semantics@*": - version "4.0.1" - resolved "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812" - integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ== + version "4.0.2" + resolved "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.2.tgz#abe102d06ccda1efdf0ed98c10ccf7f36a785a41" + integrity sha512-FD+nQWA2zJjh4L9+pFXqWOi0Hs1ryBCfI+985NjluQ1p8EYtoLvjLOKidXBtZ4/IcxDX4o8/E8qDS3540tNliw== "@types/http-errors@*": - version "2.0.1" - resolved "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.1.tgz#20172f9578b225f6c7da63446f56d4ce108d5a65" - integrity sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ== + version "2.0.2" + resolved "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.2.tgz#a86e00bbde8950364f8e7846687259ffcd96e8c2" + integrity sha512-lPG6KlZs88gef6aD85z3HNkztpj7w2R7HmR3gygjfXCQmsLloWNARFkMuzKiiY8FGdh1XDpgBdrSf4aKDiA7Kg== "@types/is-ci@^3.0.0": - version "3.0.0" - resolved "https://registry.npmjs.org/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3" - integrity sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ== + version "3.0.1" + resolved "https://registry.npmjs.org/@types/is-ci/-/is-ci-3.0.1.tgz#802da8f2376d9bf5c20ac17c9f869aed2b532297" + integrity sha512-mnb1ngaGQPm6LFZaNdh3xPOoQMkrQb/KBPhPPN2p2Wk8XgeUqWj6xPnvyQ8rvcK/VFritVmQG8tvQuy7g+9/nQ== dependencies: ci-info "^3.1.0" @@ -1862,32 +1832,32 @@ integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g== "@types/istanbul-lib-report@*": - version "3.0.0" - resolved "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686" - integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg== + version "3.0.1" + resolved "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#412e0725ef41cde73bfa03e0e833eaff41e0fd63" + integrity sha512-gPQuzaPR5h/djlAv2apEG1HVOyj1IUs7GpfMZixU0/0KXT3pm64ylHuMUI1/Akh+sq/iikxg6Z2j+fcMDXaaTQ== dependencies: "@types/istanbul-lib-coverage" "*" "@types/istanbul-reports@^3.0.0": - version "3.0.1" - resolved "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff" - integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw== + version "3.0.2" + resolved "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.2.tgz#edc8e421991a3b4df875036d381fc0a5a982f549" + integrity sha512-kv43F9eb3Lhj+lr/Hn6OcLCs/sSM8bt+fIaP11rCYngfV6NVjzWXJ17owQtDQTL9tQ8WSLUrGsSJ6rJz0F1w1A== dependencies: "@types/istanbul-lib-report" "*" -"@types/jsdom@^16.0.0": - version "16.2.15" - resolved "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.15.tgz#6c09990ec43b054e49636cba4d11d54367fc90d6" - integrity sha512-nwF87yjBKuX/roqGYerZZM0Nv1pZDMAT5YhOHYeM/72Fic+VEqJh4nyoqoapzJnW3pUlfxPY5FhgsJtM+dRnQQ== +"@types/jsdom@^21.1.3": + version "21.1.3" + resolved "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.3.tgz#a88c5dc65703e1b10b2a7839c12db49662b43ff0" + integrity sha512-1zzqSP+iHJYV4lB3lZhNBa012pubABkj9yG/GuXuf6LZH1cSPIJBqFDrm5JX65HHt6VOnNYdTui/0ySerRbMgA== dependencies: "@types/node" "*" - "@types/parse5" "^6.0.3" "@types/tough-cookie" "*" + parse5 "^7.0.0" "@types/json-schema@^7.0.9": - version "7.0.12" - resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb" - integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA== + version "7.0.13" + resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85" + integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ== "@types/json5@^0.0.29": version "0.0.29" @@ -1895,9 +1865,9 @@ integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== "@types/keygrip@*": - version "1.0.2" - resolved "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.2.tgz#513abfd256d7ad0bf1ee1873606317b33b1b2a72" - integrity sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw== + version "1.0.3" + resolved "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.3.tgz#2286b16ef71d8dea74dab00902ef419a54341bfe" + integrity sha512-tfzBBb7OV2PbUfKbG6zRE5UbmtdLVCKT/XT364Z9ny6pXNbd9GnIB6aFYpq2A5lZ6mq9bhXgK6h5MFGNwhMmuQ== "@types/keyv@^3.1.4": version "3.1.4" @@ -1907,16 +1877,16 @@ "@types/node" "*" "@types/koa-compose@*": - version "3.2.5" - resolved "https://registry.npmjs.org/@types/koa-compose/-/koa-compose-3.2.5.tgz#85eb2e80ac50be95f37ccf8c407c09bbe3468e9d" - integrity sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ== + version "3.2.6" + resolved "https://registry.npmjs.org/@types/koa-compose/-/koa-compose-3.2.6.tgz#17a077786d0ac5eee04c37a7d6c207b3252f6de9" + integrity sha512-PHiciWxH3NRyAaxUdEDE1NIZNfvhgtPlsdkjRPazHC6weqt90Jr0uLhIQs+SDwC8HQ/jnA7UQP6xOqGFB7ugWw== dependencies: "@types/koa" "*" "@types/koa@*", "@types/koa@^2.11.6": - version "2.13.6" - resolved "https://registry.npmjs.org/@types/koa/-/koa-2.13.6.tgz#6dc14e727baf397310aa6f414ebe5d144983af42" - integrity sha512-diYUfp/GqfWBAiwxHtYJ/FQYIXhlEhlyaU7lB/bWQrx4Il9lCET5UwpFy3StOAohfsxxvEQ11qIJgT1j2tfBvw== + version "2.13.9" + resolved "https://registry.npmjs.org/@types/koa/-/koa-2.13.9.tgz#8d989ac17d7f033475fbe34c4f906c9287c2041a" + integrity sha512-tPX3cN1dGrMn+sjCDEiQqXH2AqlPoPd594S/8zxwUm/ZbPsQXKqHPUypr2gjCPhHUc+nDJLduhh5lXI/1olnGQ== dependencies: "@types/accepts" "*" "@types/content-disposition" "*" @@ -1928,14 +1898,14 @@ "@types/node" "*" "@types/mime@*": - version "3.0.1" - resolved "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10" - integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA== + version "3.0.2" + resolved "https://registry.npmjs.org/@types/mime/-/mime-3.0.2.tgz#c1ae807f13d308ee7511a5b81c74f327028e66e8" + integrity sha512-Wj+fqpTLtTbG7c0tH47dkahefpLKEbB+xAZuLq7b4/IDHPl/n6VoXcyUQ2bypFlbSwvCr0y+bD4euTTqTJsPxQ== "@types/mime@^1": - version "1.3.2" - resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a" - integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw== + version "1.3.3" + resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.3.tgz#bbe64987e0eb05de150c305005055c7ad784a9ce" + integrity sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg== "@types/minimatch@^5.1.2": version "5.1.2" @@ -1943,9 +1913,9 @@ integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA== "@types/minimist@^1.2.0": - version "1.2.2" - resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c" - integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ== + version "1.2.3" + resolved "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.3.tgz#dd249cef80c6fff2ba6a0d4e5beca913e04e25f8" + integrity sha512-ZYFzrvyWUNhaPomn80dsMNgMeXxNWZBdkuG/hWlUvXvbdUH8ZERNBGXnU87McuGcWDsyzX2aChCv/SVN348k3A== "@types/mocha@^8.2.0": version "8.2.3" @@ -1953,9 +1923,9 @@ integrity sha512-ekGvFhFgrc2zYQoX4JeZPmVzZxw6Dtllga7iGHzfbYIYkAMUx/sAFP2GdFpLff+vdHXu5fl7WX9AT+TtqYcsyw== "@types/node@*": - version "20.3.2" - resolved "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz#fa6a90f2600e052a03c18b8cb3fd83dd4e599898" - integrity sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw== + version "20.8.0" + resolved "https://registry.npmjs.org/@types/node/-/node-20.8.0.tgz#10ddf0119cf20028781c06d7115562934e53f745" + integrity sha512-LzcWltT83s1bthcvjBmiBvGJiiUe84NWRHkw+ZV6Fr41z2FbIzvc815dk2nQ3RAKMuN2fkenM/z3Xv2QzEpYxQ== "@types/node@^12.7.1": version "12.20.55" @@ -1963,14 +1933,14 @@ integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ== "@types/node@^18.0.0": - version "18.16.18" - resolved "https://registry.npmjs.org/@types/node/-/node-18.16.18.tgz#85da09bafb66d4bc14f7c899185336d0c1736390" - integrity sha512-/aNaQZD0+iSBAGnvvN2Cx92HqE5sZCPZtx2TsK+4nvV23fFe09jVDvpArXr2j9DnYlzuU9WuoykDDc6wqvpNcw== + version "18.18.1" + resolved "https://registry.npmjs.org/@types/node/-/node-18.18.1.tgz#80b22f3df719f15c9736207980e95f35d01ec1aa" + integrity sha512-3G42sxmm0fF2+Vtb9TJQpnjmP+uKlWvFa8KoEGquh4gqRmoUG/N0ufuhikw6HEsdG2G2oIKhog1GCTfz9v5NdQ== "@types/normalize-package-data@^2.4.0": - version "2.4.1" - resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301" - integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw== + version "2.4.2" + resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.2.tgz#9b0e3e8533fe5024ad32d6637eb9589988b6fdca" + integrity sha512-lqa4UEhhv/2sjjIQgjX8B+RBjj47eo0mzGasklVJ78UKGQY1r0VpB9XHDaZZO9qzEFDdy4MrXLuEaSmPrPSe/A== "@types/parse5@^2.2.34": version "2.2.34" @@ -1979,64 +1949,59 @@ dependencies: "@types/node" "*" -"@types/parse5@^6.0.1", "@types/parse5@^6.0.3": +"@types/parse5@^6.0.1": version "6.0.3" resolved "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb" integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g== "@types/qs@*": - version "6.9.7" - resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" - integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== + version "6.9.8" + resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz#f2a7de3c107b89b441e071d5472e6b726b4adf45" + integrity sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg== "@types/range-parser@*": - version "1.2.4" - resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" - integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== + version "1.2.5" + resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.5.tgz#38bd1733ae299620771bd414837ade2e57757498" + integrity sha512-xrO9OoVPqFuYyR/loIHjnbvvyRZREYKLjxV4+dY6v3FQR3stQ9ZxIGkaclF7YhI9hfjpuTbu14hZEy94qKLtOA== "@types/responselike@^1.0.0": - version "1.0.0" - resolved "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz#251f4fe7d154d2bad125abe1b429b23afd262e29" - integrity sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA== + version "1.0.1" + resolved "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.1.tgz#1dd57e54509b3b95c7958e52709567077019d65d" + integrity sha512-TiGnitEDxj2X0j+98Eqk5lv/Cij8oHd32bU4D/Yw6AOq7vvTk0gSD2GPj0G/HkvhMoVsdlhYF4yqqlyPBTM6Sg== dependencies: "@types/node" "*" "@types/semver@^7.3.12", "@types/semver@^7.5.0": - version "7.5.0" - resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a" - integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw== + version "7.5.3" + resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz#9a726e116beb26c24f1ccd6850201e1246122e04" + integrity sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw== "@types/send@*": - version "0.17.1" - resolved "https://registry.npmjs.org/@types/send/-/send-0.17.1.tgz#ed4932b8a2a805f1fe362a70f4e62d0ac994e301" - integrity sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q== + version "0.17.2" + resolved "https://registry.npmjs.org/@types/send/-/send-0.17.2.tgz#af78a4495e3c2b79bfbdac3955fdd50e03cc98f2" + integrity sha512-aAG6yRf6r0wQ29bkS+x97BIs64ZLxeE/ARwyS6wrldMm3C1MdKwCcnnEwMC1slI8wuxJOpiUH9MioC0A0i+GJw== dependencies: "@types/mime" "^1" "@types/node" "*" "@types/serve-static@*": - version "1.15.2" - resolved "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.2.tgz#3e5419ecd1e40e7405d34093f10befb43f63381a" - integrity sha512-J2LqtvFYCzaj8pVYKw8klQXrLLk7TBZmQ4ShlcdkELFKGwGMfevMLneMMRkMgZxotOD9wg497LpC7O8PcvAmfw== + version "1.15.3" + resolved "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.3.tgz#2cfacfd1fd4520bbc3e292cca432d5e8e2e3ee61" + integrity sha512-yVRvFsEMrv7s0lGhzrggJjNOSmZCdgCjw9xWrPr/kNNLp6FaDfMC1KaYl3TSJ0c58bECwNBMoQrZJ8hA8E1eFg== dependencies: "@types/http-errors" "*" "@types/mime" "*" "@types/node" "*" "@types/tough-cookie@*": - version "4.0.2" - resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397" - integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw== - -"@types/trusted-types@^2.0.2": - version "2.0.3" - resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311" - integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g== + version "4.0.3" + resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90" + integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg== "@types/ua-parser-js@^0.7.33": - version "0.7.36" - resolved "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz#9bd0b47f26b5a3151be21ba4ce9f5fa457c5f190" - integrity sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ== + version "0.7.37" + resolved "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.37.tgz#2e45bf948a6a94391859a1b0682104ae3c13ba72" + integrity sha512-4sOxS3ZWXC0uHJLYcWAaLMxTvjRX3hT96eF4YWUh1ovTaenvibaZOE5uXtIp4mksKMLRwo7YDiCBCw6vBiUPVg== "@types/which@^1.3.2": version "1.3.2" @@ -2051,191 +2016,106 @@ "@types/node" "*" "@types/yauzl@^2.9.1": - version "2.10.0" - resolved "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599" - integrity sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw== + version "2.10.1" + resolved "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.1.tgz#4e8f299f0934d60f36c74f59cb5a8483fd786691" + integrity sha512-CHzgNU3qYBnp/O4S3yv2tXPlvMTq0YWSTVg2/JYLqWZGHwwgJGAwd00poay/11asPq8wLFwHzubyInqHIFmmiw== dependencies: "@types/node" "*" "@typescript-eslint/eslint-plugin@^5.0.0": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.60.1.tgz#81382d6ecb92b8dda70e91f9035611cb2fecd1c3" - integrity sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw== + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db" + integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag== dependencies: "@eslint-community/regexpp" "^4.4.0" - "@typescript-eslint/scope-manager" "5.60.1" - "@typescript-eslint/type-utils" "5.60.1" - "@typescript-eslint/utils" "5.60.1" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/type-utils" "5.62.0" + "@typescript-eslint/utils" "5.62.0" debug "^4.3.4" - grapheme-splitter "^1.0.4" + graphemer "^1.4.0" ignore "^5.2.0" natural-compare-lite "^1.4.0" semver "^7.3.7" tsutils "^3.21.0" "@typescript-eslint/parser@^5.0.0": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.60.1.tgz#0f2f58209c0862a73e3d5a56099abfdfa21d0fd3" - integrity sha512-pHWlc3alg2oSMGwsU/Is8hbm3XFbcrb6P5wIxcQW9NsYBfnrubl/GhVVD/Jm/t8HXhA2WncoIRfBtnCgRGV96Q== + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz#1b63d082d849a2fcae8a569248fbe2ee1b8a56c7" + integrity sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA== dependencies: - "@typescript-eslint/scope-manager" "5.60.1" - "@typescript-eslint/types" "5.60.1" - "@typescript-eslint/typescript-estree" "5.60.1" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/typescript-estree" "5.62.0" debug "^4.3.4" -"@typescript-eslint/scope-manager@5.60.1": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.60.1.tgz#35abdb47f500c68c08f2f2b4f22c7c79472854bb" - integrity sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ== +"@typescript-eslint/scope-manager@5.62.0": + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c" + integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w== dependencies: - "@typescript-eslint/types" "5.60.1" - "@typescript-eslint/visitor-keys" "5.60.1" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" -"@typescript-eslint/type-utils@5.60.1": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.60.1.tgz#17770540e98d65ab4730c7aac618003f702893f4" - integrity sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A== +"@typescript-eslint/type-utils@5.62.0": + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a" + integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew== dependencies: - "@typescript-eslint/typescript-estree" "5.60.1" - "@typescript-eslint/utils" "5.60.1" + "@typescript-eslint/typescript-estree" "5.62.0" + "@typescript-eslint/utils" "5.62.0" debug "^4.3.4" tsutils "^3.21.0" -"@typescript-eslint/types@5.60.1": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.60.1.tgz#a17473910f6b8d388ea83c9d7051af89c4eb7561" - integrity sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg== +"@typescript-eslint/types@5.62.0": + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f" + integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== -"@typescript-eslint/typescript-estree@5.60.1": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.1.tgz#8c71824b7165b64d5ebd7aa42968899525959834" - integrity sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw== +"@typescript-eslint/typescript-estree@5.62.0": + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b" + integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA== dependencies: - "@typescript-eslint/types" "5.60.1" - "@typescript-eslint/visitor-keys" "5.60.1" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/utils@5.60.1": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.60.1.tgz#6861ebedbefba1ac85482d2bdef6f2ff1eb65b80" - integrity sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ== +"@typescript-eslint/utils@5.62.0": + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86" + integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ== dependencies: "@eslint-community/eslint-utils" "^4.2.0" "@types/json-schema" "^7.0.9" "@types/semver" "^7.3.12" - "@typescript-eslint/scope-manager" "5.60.1" - "@typescript-eslint/types" "5.60.1" - "@typescript-eslint/typescript-estree" "5.60.1" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/typescript-estree" "5.62.0" eslint-scope "^5.1.1" semver "^7.3.7" -"@typescript-eslint/visitor-keys@5.60.1": - version "5.60.1" - resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.60.1.tgz#19a877358bf96318ec35d90bfe6bd1445cce9434" - integrity sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw== +"@typescript-eslint/visitor-keys@5.62.0": + version "5.62.0" + resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e" + integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw== dependencies: - "@typescript-eslint/types" "5.60.1" + "@typescript-eslint/types" "5.62.0" eslint-visitor-keys "^3.3.0" +"@ungap/custom-elements@^1.3.0": + version "1.3.0" + resolved "https://registry.npmjs.org/@ungap/custom-elements/-/custom-elements-1.3.0.tgz#c1b7623887f774f274f308a1468098894826c2be" + integrity sha512-f4q/s76+8nOy+fhrNHyetuoPDR01lmlZB5czfCG+OOnBw/Wf+x48DcCDPmMQY7oL8xYFL8qfenMoiS8DUkKBUw== + "@ungap/promise-all-settled@1.1.2": version "1.1.2" resolved "https://registry.npmjs.org/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44" integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q== -"@vue/compiler-core@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz#7fbf591c1c19e1acd28ffd284526e98b4f581128" - integrity sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g== - dependencies: - "@babel/parser" "^7.21.3" - "@vue/shared" "3.3.4" - estree-walker "^2.0.2" - source-map-js "^1.0.2" - -"@vue/compiler-dom@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz#f56e09b5f4d7dc350f981784de9713d823341151" - integrity sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w== - dependencies: - "@vue/compiler-core" "3.3.4" - "@vue/shared" "3.3.4" - -"@vue/compiler-sfc@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz#b19d942c71938893535b46226d602720593001df" - integrity sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ== - dependencies: - "@babel/parser" "^7.20.15" - "@vue/compiler-core" "3.3.4" - "@vue/compiler-dom" "3.3.4" - "@vue/compiler-ssr" "3.3.4" - "@vue/reactivity-transform" "3.3.4" - "@vue/shared" "3.3.4" - estree-walker "^2.0.2" - magic-string "^0.30.0" - postcss "^8.1.10" - source-map-js "^1.0.2" - -"@vue/compiler-ssr@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz#9d1379abffa4f2b0cd844174ceec4a9721138777" - integrity sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ== - dependencies: - "@vue/compiler-dom" "3.3.4" - "@vue/shared" "3.3.4" - -"@vue/reactivity-transform@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz#52908476e34d6a65c6c21cd2722d41ed8ae51929" - integrity sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw== - dependencies: - "@babel/parser" "^7.20.15" - "@vue/compiler-core" "3.3.4" - "@vue/shared" "3.3.4" - estree-walker "^2.0.2" - magic-string "^0.30.0" - -"@vue/reactivity@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz#a27a29c6cd17faba5a0e99fbb86ee951653e2253" - integrity sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ== - dependencies: - "@vue/shared" "3.3.4" - -"@vue/runtime-core@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz#4bb33872bbb583721b340f3088888394195967d1" - integrity sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA== - dependencies: - "@vue/reactivity" "3.3.4" - "@vue/shared" "3.3.4" - -"@vue/runtime-dom@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz#992f2579d0ed6ce961f47bbe9bfe4b6791251566" - integrity sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ== - dependencies: - "@vue/runtime-core" "3.3.4" - "@vue/shared" "3.3.4" - csstype "^3.1.1" - -"@vue/server-renderer@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz#ea46594b795d1536f29bc592dd0f6655f7ea4c4c" - integrity sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ== - dependencies: - "@vue/compiler-ssr" "3.3.4" - "@vue/shared" "3.3.4" - -"@vue/shared@3.3.4": - version "3.3.4" - resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780" - integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ== - "@wdio/config@7.31.1": version "7.31.1" resolved "https://registry.npmjs.org/@wdio/config/-/config-7.31.1.tgz#53550a164c970403628525ecdc5e0c3f96a0ff30" @@ -2429,7 +2309,7 @@ "@web/test-runner-core" "^0.10.20" webdriverio "^7.16.0" -abab@^2.0.5, abab@^2.0.6: +abab@^2.0.6: version "2.0.6" resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA== @@ -2442,33 +2322,15 @@ accepts@^1.3.5: mime-types "~2.1.34" negotiator "0.6.3" -acorn-globals@^6.0.0: - version "6.0.0" - resolved "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45" - integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg== - dependencies: - acorn "^7.1.1" - acorn-walk "^7.1.1" - acorn-jsx@^5.3.2: version "5.3.2" resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ== -acorn-walk@^7.1.1: - version "7.2.0" - resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc" - integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA== - -acorn@^7.1.1: - version "7.4.1" - resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa" - integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A== - -acorn@^8.4.1, acorn@^8.8.0: - version "8.9.0" - resolved "https://registry.npmjs.org/acorn/-/acorn-8.9.0.tgz#78a16e3b2bcc198c10822786fa6679e245db5b59" - integrity sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ== +acorn@^8.9.0: + version "8.10.0" + resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5" + integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw== agent-base@6: version "6.0.2" @@ -2477,7 +2339,7 @@ agent-base@6: dependencies: debug "4" -ajv@^6.10.0, ajv@^6.12.4: +ajv@^6.12.4: version "6.12.6" resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -2564,16 +2426,32 @@ archiver-utils@^2.1.0: normalize-path "^3.0.0" readable-stream "^2.0.0" +archiver-utils@^3.0.4: + version "3.0.4" + resolved "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz#a0d201f1cf8fce7af3b5a05aea0a337329e96ec7" + integrity sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw== + dependencies: + glob "^7.2.3" + graceful-fs "^4.2.0" + lazystream "^1.0.0" + lodash.defaults "^4.2.0" + lodash.difference "^4.5.0" + lodash.flatten "^4.4.0" + lodash.isplainobject "^4.0.6" + lodash.union "^4.6.0" + normalize-path "^3.0.0" + readable-stream "^3.6.0" + archiver@^5.0.0: - version "5.3.1" - resolved "https://registry.npmjs.org/archiver/-/archiver-5.3.1.tgz#21e92811d6f09ecfce649fbefefe8c79e57cbbb6" - integrity sha512-8KyabkmbYrH+9ibcTScQ1xCJC/CGcugdVIwB+53f5sZziXgwUh3iXlAlANMxcZyDEfTHMe6+Z5FofV8nopXP7w== + version "5.3.2" + resolved "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz#99991d5957e53bd0303a392979276ac4ddccf3b0" + integrity sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw== dependencies: archiver-utils "^2.1.0" - async "^3.2.3" + async "^3.2.4" buffer-crc32 "^0.2.1" readable-stream "^3.6.0" - readdir-glob "^1.0.0" + readdir-glob "^1.1.2" tar-stream "^2.2.0" zip-stream "^4.1.0" @@ -2604,15 +2482,15 @@ array-buffer-byte-length@^1.0.0: call-bind "^1.0.2" is-array-buffer "^3.0.1" -array-includes@^3.1.5, array-includes@^3.1.6: - version "3.1.6" - resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz#9e9e720e194f198266ba9e18c29e6a9b0e4b225f" - integrity sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw== +array-includes@^3.1.6: + version "3.1.7" + resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz#8cd2e01b26f7a3086cbc87271593fe921c62abda" + integrity sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" - get-intrinsic "^1.1.3" + define-properties "^1.2.0" + es-abstract "^1.22.1" + get-intrinsic "^1.2.1" is-string "^1.0.7" array-union@^2.1.0: @@ -2620,26 +2498,50 @@ array-union@^2.1.0: resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d" integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== +array.prototype.findlastindex@^1.2.2: + version "1.2.3" + resolved "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz#b37598438f97b579166940814e2c0493a4f50207" + integrity sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA== + dependencies: + call-bind "^1.0.2" + define-properties "^1.2.0" + es-abstract "^1.22.1" + es-shim-unscopables "^1.0.0" + get-intrinsic "^1.2.1" + array.prototype.flat@^1.2.3, array.prototype.flat@^1.3.1: - version "1.3.1" - resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2" - integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA== + version "1.3.2" + resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18" + integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" es-shim-unscopables "^1.0.0" array.prototype.flatmap@^1.3.1: - version "1.3.1" - resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz#1aae7903c2100433cb8261cd4ed310aab5c4a183" - integrity sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ== + version "1.3.2" + resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527" + integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" es-shim-unscopables "^1.0.0" +arraybuffer.prototype.slice@^1.0.2: + version "1.0.2" + resolved "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz#98bd561953e3e74bb34938e77647179dfe6e9f12" + integrity sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw== + dependencies: + array-buffer-byte-length "^1.0.0" + call-bind "^1.0.2" + define-properties "^1.2.0" + es-abstract "^1.22.1" + get-intrinsic "^1.2.1" + is-array-buffer "^3.0.2" + is-shared-array-buffer "^1.0.2" + arrify@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" @@ -2655,7 +2557,7 @@ astral-regex@^2.0.0: resolved "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== -async@^3.2.3: +async@^3.2.4: version "3.2.4" resolved "https://registry.npmjs.org/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c" integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ== @@ -2671,9 +2573,9 @@ available-typed-arrays@^1.0.5: integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== axe-core@^4.3.3, axe-core@^4.6.2: - version "4.7.2" - resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0" - integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g== + version "4.8.2" + resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz#2f6f3cde40935825cf4465e3c1c9e77b240ff6ae" + integrity sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g== axobject-query@^2.2.0: version "2.2.0" @@ -2687,29 +2589,29 @@ axobject-query@^3.1.1: dependencies: dequal "^2.0.3" -babel-plugin-polyfill-corejs2@^0.4.3: - version "0.4.3" - resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz#75044d90ba5043a5fb559ac98496f62f3eb668fd" - integrity sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw== +babel-plugin-polyfill-corejs2@^0.4.5: + version "0.4.5" + resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz#8097b4cb4af5b64a1d11332b6fb72ef5e64a054c" + integrity sha512-19hwUH5FKl49JEsvyTcoHakh6BE0wgXLLptIyKZ3PijHc/Ci521wygORCUCCred+E/twuqRyAkE02BAWPmsHOg== dependencies: - "@babel/compat-data" "^7.17.7" - "@babel/helper-define-polyfill-provider" "^0.4.0" - semver "^6.1.1" + "@babel/compat-data" "^7.22.6" + "@babel/helper-define-polyfill-provider" "^0.4.2" + semver "^6.3.1" -babel-plugin-polyfill-corejs3@^0.8.1: - version "0.8.1" - resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz#39248263c38191f0d226f928d666e6db1b4b3a8a" - integrity sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q== +babel-plugin-polyfill-corejs3@^0.8.3: + version "0.8.4" + resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.4.tgz#1fac2b1dcef6274e72b3c72977ed8325cb330591" + integrity sha512-9l//BZZsPR+5XjyJMPtZSK4jv0BsTO1zDac2GC6ygx9WLGlcsnRd1Co0B2zT5fF5Ic6BZy+9m3HNZ3QcOeDKfg== dependencies: - "@babel/helper-define-polyfill-provider" "^0.4.0" - core-js-compat "^3.30.1" + "@babel/helper-define-polyfill-provider" "^0.4.2" + core-js-compat "^3.32.2" -babel-plugin-polyfill-regenerator@^0.5.0: - version "0.5.0" - resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz#e7344d88d9ef18a3c47ded99362ae4a757609380" - integrity sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g== +babel-plugin-polyfill-regenerator@^0.5.2: + version "0.5.2" + resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.2.tgz#80d0f3e1098c080c8b5a65f41e9427af692dc326" + integrity sha512-tAlOptU0Xj34V1Y2PNTL4Y0FOJMDB6bZmoW39FeCQIhigGLkqu3Fj6uiXpxIf6Ij274ENdYx64y6Au+ZKlb1IA== dependencies: - "@babel/helper-define-polyfill-provider" "^0.4.0" + "@babel/helper-define-polyfill-provider" "^0.4.2" balanced-match@^1.0.0: version "1.0.2" @@ -2821,11 +2723,6 @@ breakword@^1.0.5: dependencies: wcwidth "^1.0.1" -browser-process-hrtime@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" - integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== - browser-stdout@1.3.1: version "1.3.1" resolved "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60" @@ -2842,15 +2739,15 @@ browserslist-useragent@^3.0.3: useragent "^2.3.0" yamlparser "^0.0.2" -browserslist@^4.19.1, browserslist@^4.21.3, browserslist@^4.21.5: - version "4.21.9" - resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.9.tgz#e11bdd3c313d7e2a9e87e8b4b0c7872b13897635" - integrity sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg== +browserslist@^4.19.1, browserslist@^4.21.9, browserslist@^4.22.1: + version "4.22.1" + resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619" + integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ== dependencies: - caniuse-lite "^1.0.30001503" - electron-to-chromium "^1.4.431" - node-releases "^2.0.12" - update-browserslist-db "^1.0.11" + caniuse-lite "^1.0.30001541" + electron-to-chromium "^1.4.535" + node-releases "^2.0.13" + update-browserslist-db "^1.0.13" buffer-alloc-unsafe@^1.1.0: version "1.1.0" @@ -2967,10 +2864,10 @@ camelcase@^6.0.0: resolved "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a" integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA== -caniuse-lite@^1.0.30001503: - version "1.0.30001509" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001509.tgz#2b7ad5265392d6d2de25cd8776d1ab3899570d14" - integrity sha512-2uDDk+TRiTX5hMcUYT/7CSyzMZxjfGu0vAUjS2g0LSD8UoXOv0LtpH4LxGMemsiPq6LCVIUjNwVM0erkOkGCDA== +caniuse-lite@^1.0.30001541: + version "1.0.30001542" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz#823ddb5aed0a70d5e2bfb49126478e84e9514b85" + integrity sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA== capital-case@^1.0.4: version "1.0.4" @@ -2998,7 +2895,7 @@ chai-a11y-axe@^1.4.0: dependencies: axe-core "^4.3.3" -chalk@^2.0.0, chalk@^2.1.0: +chalk@^2.1.0, chalk@^2.4.2: version "2.4.2" resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -3227,10 +3124,10 @@ comment-parser@1.3.1: resolved "https://registry.npmjs.org/comment-parser/-/comment-parser-1.3.1.tgz#3d7ea3adaf9345594aedee6563f422348f165c1b" integrity sha512-B52sN2VNghyq5ofvUsqZjmk6YkihBX5vMSChmSK9v4ShjKf3Vk5Xcmgpw4o+iIgtrnM/u5FiMpz9VKb8lpBveA== -compress-commons@^4.1.0: - version "4.1.1" - resolved "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.1.tgz#df2a09a7ed17447642bad10a85cc9a19e5c42a7d" - integrity sha512-QLdDLCKNV2dtoTorqgxngQCMA+gWXkM/Nwu7FpeBhk/RdkzimqC3jueb/FDmaZeXh+uby1jkBqE3xArsLBE5wQ== +compress-commons@^4.1.2: + version "4.1.2" + resolved "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz#6542e59cb63e1f46a8b21b0e06f9a32e4c8b06df" + integrity sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg== dependencies: buffer-crc32 "^0.2.13" crc32-stream "^4.0.2" @@ -3271,7 +3168,7 @@ content-type@^1.0.4: resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918" integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA== -convert-source-map@^1.6.0, convert-source-map@^1.7.0: +convert-source-map@^1.6.0: version "1.9.0" resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== @@ -3289,17 +3186,17 @@ cookies@~0.8.0: depd "~2.0.0" keygrip "~1.1.0" -core-js-compat@^3.30.1, core-js-compat@^3.30.2: - version "3.31.0" - resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz#4030847c0766cc0e803dcdfb30055d7ef2064bf1" - integrity sha512-hM7YCu1cU6Opx7MXNu0NuumM0ezNeAeRKadixyiQELWY3vT3De9S4J5ZBMraWV2vZnrE1Cirl0GtFtDtMUXzPw== +core-js-compat@^3.31.0, core-js-compat@^3.32.2: + version "3.33.0" + resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.33.0.tgz#24aa230b228406450b2277b7c8bfebae932df966" + integrity sha512-0w4LcLXsVEuNkIqwjjf9rjCoPhK8uqA4tMRh4Ge26vfLtUutshn+aRJU21I9LCJlh2QQHfisNToLjw1XEJLTWw== dependencies: - browserslist "^4.21.5" + browserslist "^4.22.1" core-js@^3.6.4: - version "3.31.0" - resolved "https://registry.npmjs.org/core-js/-/core-js-3.31.0.tgz#4471dd33e366c79d8c0977ed2d940821719db344" - integrity sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ== + version "3.33.0" + resolved "https://registry.npmjs.org/core-js/-/core-js-3.33.0.tgz#70366dbf737134761edb017990cf5ce6c6369c40" + integrity sha512-HoZr92+ZjFEKar5HS6MC776gYslNOKHt75mEBKWKnPeFDpZ6nH5OeF3S6HFT1mUAUZKrzkez05VboaX8myjSuw== core-util-is@~1.0.0: version "1.0.3" @@ -3312,9 +3209,9 @@ crc-32@^1.2.0: integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ== crc32-stream@^4.0.2: - version "4.0.2" - resolved "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.2.tgz#c922ad22b38395abe9d3870f02fa8134ed709007" - integrity sha512-DxFZ/Hk473b/muq1VJ///PMNLj0ZMnzye9thBpmjpJKCc5eMgB95aK8zCGrGfQ90cWo561Te6HK9D+j4KPdM6w== + version "4.0.3" + resolved "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz#85dd677eb78fa7cad1ba17cc506a597d41fc6f33" + integrity sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw== dependencies: crc-32 "^1.2.0" readable-stream "^3.4.0" @@ -3381,27 +3278,12 @@ css-what@^6.1.0: resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== -cssom@^0.5.0: - version "0.5.0" - resolved "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" - integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw== - -cssom@~0.3.6: - version "0.3.8" - resolved "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a" - integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg== - -cssstyle@^2.3.0: - version "2.3.0" - resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852" - integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A== +cssstyle@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a" + integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg== dependencies: - cssom "~0.3.6" - -csstype@^3.1.1: - version "3.1.2" - resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" - integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== + rrweb-cssom "^0.6.0" csv-generate@^3.4.3: version "3.4.3" @@ -3433,14 +3315,14 @@ damerau-levenshtein@^1.0.8: resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== -data-urls@^3.0.0: - version "3.0.2" - resolved "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143" - integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ== +data-urls@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4" + integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g== dependencies: abab "^2.0.6" whatwg-mimetype "^3.0.0" - whatwg-url "^11.0.0" + whatwg-url "^12.0.0" debounce@^1.2.0: version "1.2.1" @@ -3500,7 +3382,7 @@ decamelize@^4.0.0: resolved "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837" integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ== -decimal.js@^10.3.1: +decimal.js@^10.4.3: version "10.4.3" resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23" integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA== @@ -3582,7 +3464,7 @@ deep-equal@~1.0.1: resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5" integrity sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw== -deep-is@^0.1.3, deep-is@~0.1.3: +deep-is@^0.1.3: version "0.1.4" resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== @@ -3604,16 +3486,26 @@ defer-to-connect@^2.0.0: resolved "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz#8016bdb4143e4632b77a3449c6236277de520587" integrity sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg== +define-data-property@^1.0.1: + version "1.1.0" + resolved "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz#0db13540704e1d8d479a0656cf781267531b9451" + integrity sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g== + dependencies: + get-intrinsic "^1.2.1" + gopd "^1.0.1" + has-property-descriptors "^1.0.0" + define-lazy-prop@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f" integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og== define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0: - version "1.2.0" - resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz#52988570670c9eacedd8064f4a990f2405849bd5" - integrity sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA== + version "1.2.1" + resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c" + integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg== dependencies: + define-data-property "^1.0.1" has-property-descriptors "^1.0.0" object-keys "^1.1.1" @@ -3672,10 +3564,10 @@ devtools-protocol@0.0.981744: resolved "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.981744.tgz#9960da0370284577d46c28979a0b32651022bacf" integrity sha512-0cuGS8+jhR67Fy7qG3i3Pc7Aw494sb9yG9QgpG97SFVWwolgYjlhJg7n+UaHxOQT30d1TYu/EYe9k01ivLErIg== -devtools-protocol@^0.0.1161029: - version "0.0.1161029" - resolved "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1161029.tgz#ec118810acf81100101f5fdabde042121c362940" - integrity sha512-kEUDtYEhgfepFC1T5a4F7XD6FzALn6bQa8Lkp7tM2vWXQG0LwXQ/MPS7BwmgW4bW3QGNci+G/mW4grFltFFtZA== +devtools-protocol@^0.0.1182435: + version "0.0.1182435" + resolved "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1182435.tgz#68155464f987d66390fae28b02782a1b9c153a0c" + integrity sha512-EmlkWb62wSbQNE1gRZZsi4KZYRaF5Skpp183LhRU7+sadKR06O1dHCjZmFSEG6Kv7P6S/UYLxcY3NlYwqKM99w== devtools@7.32.0: version "7.32.0" @@ -3745,12 +3637,12 @@ domelementtype@^2.3.0: resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== -domexception@^2.0.1: - version "2.0.1" - resolved "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304" - integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg== +domexception@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673" + integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw== dependencies: - webidl-conversions "^5.0.0" + webidl-conversions "^7.0.0" domhandler@^5.0.2, domhandler@^5.0.3: version "5.0.3" @@ -3812,10 +3704,10 @@ ee-first@1.1.1: resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow== -electron-to-chromium@^1.4.431, electron-to-chromium@^1.4.67: - version "1.4.442" - resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.442.tgz#455f4c5bd6ae73afb634dcffee6f356c26c8e294" - integrity sha512-RkrZF//Ya+0aJq2NM3OdisNh5ZodZq1rdXOS96G8DdDgpDKqKE81yTbbQ3F/4CKm1JBPsGu1Lp/akkna2xO06Q== +electron-to-chromium@^1.4.535, electron-to-chromium@^1.4.67: + version "1.4.537" + resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.537.tgz#aac4101db53066be1e49baedd000a26bc754adc9" + integrity sha512-W1+g9qs9hviII0HAwOdehGYkr+zt7KKdmCcJcjH0mYg6oL8+ioT3Skjmt7BLoAQqXhjf40AXd+HlR4oAWMlXjA== emoji-regex@^10.2.1: version "10.2.1" @@ -3845,11 +3737,12 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1: once "^1.4.0" enquirer@^2.3.0: - version "2.3.6" - resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d" - integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg== + version "2.4.1" + resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56" + integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ== dependencies: ansi-colors "^4.1.1" + strip-ansi "^6.0.1" entities@^4.2.0, entities@^4.4.0: version "4.5.0" @@ -3868,18 +3761,19 @@ errorstacks@^2.2.0: resolved "https://registry.npmjs.org/errorstacks/-/errorstacks-2.4.0.tgz#2155674dd9e741aacda3f3b8b967d9c40a4a0baf" integrity sha512-5ecWhU5gt0a5G05nmQcgCxP5HperSMxLDzvWlT5U+ZSKkuDK0rJ3dbCQny6/vSCIXjwrhwSecXBbw1alr295hQ== -es-abstract@^1.19.0, es-abstract@^1.20.4: - version "1.21.2" - resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz#a56b9695322c8a185dc25975aa3b8ec31d0e7eff" - integrity sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg== +es-abstract@^1.22.1: + version "1.22.2" + resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz#90f7282d91d0ad577f505e423e52d4c1d93c1b8a" + integrity sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA== dependencies: array-buffer-byte-length "^1.0.0" + arraybuffer.prototype.slice "^1.0.2" available-typed-arrays "^1.0.5" call-bind "^1.0.2" es-set-tostringtag "^2.0.1" es-to-primitive "^1.2.1" - function.prototype.name "^1.1.5" - get-intrinsic "^1.2.0" + function.prototype.name "^1.1.6" + get-intrinsic "^1.2.1" get-symbol-description "^1.0.0" globalthis "^1.0.3" gopd "^1.0.1" @@ -3894,24 +3788,28 @@ es-abstract@^1.19.0, es-abstract@^1.20.4: is-regex "^1.1.4" is-shared-array-buffer "^1.0.2" is-string "^1.0.7" - is-typed-array "^1.1.10" + is-typed-array "^1.1.12" is-weakref "^1.0.2" object-inspect "^1.12.3" object-keys "^1.1.1" object.assign "^4.1.4" - regexp.prototype.flags "^1.4.3" + regexp.prototype.flags "^1.5.1" + safe-array-concat "^1.0.1" safe-regex-test "^1.0.0" - string.prototype.trim "^1.2.7" - string.prototype.trimend "^1.0.6" - string.prototype.trimstart "^1.0.6" + string.prototype.trim "^1.2.8" + string.prototype.trimend "^1.0.7" + string.prototype.trimstart "^1.0.7" + typed-array-buffer "^1.0.0" + typed-array-byte-length "^1.0.0" + typed-array-byte-offset "^1.0.0" typed-array-length "^1.0.4" unbox-primitive "^1.0.2" - which-typed-array "^1.1.9" + which-typed-array "^1.1.11" es-module-lexer@^1.0.0: - version "1.3.0" - resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.0.tgz#6be9c9e0b4543a60cd166ff6f8b4e9dae0b0c16f" - integrity sha512-vZK7T0N2CBmBOixhmjdqx2gWVbFZ4DXZ/NyRMZVlJXPa7CyFS+/a4QQsDGDQy9ZfEzxFuNEsMLeQJnKP2p5/JA== + version "1.3.1" + resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.3.1.tgz#c1b0dd5ada807a3b3155315911f364dc4e909db1" + integrity sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q== es-set-tostringtag@^2.0.1: version "2.0.1" @@ -4086,26 +3984,14 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg== -escodegen@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd" - integrity sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw== - dependencies: - esprima "^4.0.1" - estraverse "^5.2.0" - esutils "^2.0.2" - optionator "^0.8.1" - optionalDependencies: - source-map "~0.6.1" - eslint-import-resolver-node@^0.3.7: - version "0.3.7" - resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7" - integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA== + version "0.3.9" + resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac" + integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g== dependencies: debug "^3.2.7" - is-core-module "^2.11.0" - resolve "^1.22.1" + is-core-module "^2.13.0" + resolve "^1.22.4" eslint-import-resolver-typescript@^2.5.0: version "2.7.1" @@ -4118,7 +4004,7 @@ eslint-import-resolver-typescript@^2.5.0: resolve "^1.22.0" tsconfig-paths "^3.14.1" -eslint-module-utils@^2.7.4: +eslint-module-utils@^2.8.0: version "2.8.0" resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49" integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw== @@ -4133,25 +4019,27 @@ eslint-plugin-babel@^5.3.1: eslint-rule-composer "^0.3.0" eslint-plugin-import@^2.24.2: - version "2.27.5" - resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65" - integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow== + version "2.28.1" + resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz#63b8b5b3c409bfc75ebaf8fb206b07ab435482c4" + integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A== dependencies: array-includes "^3.1.6" + array.prototype.findlastindex "^1.2.2" array.prototype.flat "^1.3.1" array.prototype.flatmap "^1.3.1" debug "^3.2.7" doctrine "^2.1.0" eslint-import-resolver-node "^0.3.7" - eslint-module-utils "^2.7.4" + eslint-module-utils "^2.8.0" has "^1.0.3" - is-core-module "^2.11.0" + is-core-module "^2.13.0" is-glob "^4.0.3" minimatch "^3.1.2" + object.fromentries "^2.0.6" + object.groupby "^1.0.0" object.values "^1.1.6" - resolve "^1.22.1" - semver "^6.3.0" - tsconfig-paths "^3.14.1" + semver "^6.3.1" + tsconfig-paths "^3.14.2" eslint-plugin-jsdoc@^39.3.2: version "39.9.1" @@ -4206,9 +4094,9 @@ eslint-plugin-lit-a11y@^2.0.0: requireindex "~1.2.0" eslint-plugin-lit@^1.6.0: - version "1.8.3" - resolved "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.8.3.tgz#f532c2947b503da62efe2d72372ad3df09b8afd4" - integrity sha512-wmeYfBnWPUChbdZagOhG519gaWz9Q7OGT/nCx3YVHuCCrW9q9u0p/IQueQeoaMojUqOSgM/22oSDOaBruYGqag== + version "1.9.1" + resolved "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.9.1.tgz#40cdd1f8d1b565eb5e913eab159c88f6f947bb19" + integrity sha512-XFFVufVxYJwqRB9sLkDXB7SvV1xi9hrC4HRFEdX1h9+iZ3dm4x9uS7EuT9uaXs6zR3DEgcojia1F7pmvWbc4Gg== dependencies: parse5 "^6.0.1" parse5-htmlparser2-tree-adapter "^6.0.1" @@ -4240,10 +4128,10 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1: esrecurse "^4.3.0" estraverse "^4.1.1" -eslint-scope@^7.2.0: - version "7.2.0" - resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz#f21ebdafda02352f103634b96dd47d9f81ca117b" - integrity sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw== +eslint-scope@^7.2.2: + version "7.2.2" + resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f" + integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg== dependencies: esrecurse "^4.3.0" estraverse "^5.2.0" @@ -4265,32 +4153,32 @@ eslint-visitor-keys@^2.1.0: resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303" integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw== -eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1: - version "3.4.1" - resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz#c22c48f48942d08ca824cc526211ae400478a994" - integrity sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA== +eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3: + version "3.4.3" + resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" + integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== eslint@^8.0.0: - version "8.43.0" - resolved "https://registry.npmjs.org/eslint/-/eslint-8.43.0.tgz#3e8c6066a57097adfd9d390b8fc93075f257a094" - integrity sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q== + version "8.50.0" + resolved "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz#2ae6015fee0240fcd3f83e1e25df0287f487d6b2" + integrity sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg== dependencies: "@eslint-community/eslint-utils" "^4.2.0" - "@eslint-community/regexpp" "^4.4.0" - "@eslint/eslintrc" "^2.0.3" - "@eslint/js" "8.43.0" - "@humanwhocodes/config-array" "^0.11.10" + "@eslint-community/regexpp" "^4.6.1" + "@eslint/eslintrc" "^2.1.2" + "@eslint/js" "8.50.0" + "@humanwhocodes/config-array" "^0.11.11" "@humanwhocodes/module-importer" "^1.0.1" "@nodelib/fs.walk" "^1.2.8" - ajv "^6.10.0" + ajv "^6.12.4" chalk "^4.0.0" cross-spawn "^7.0.2" debug "^4.3.2" doctrine "^3.0.0" escape-string-regexp "^4.0.0" - eslint-scope "^7.2.0" - eslint-visitor-keys "^3.4.1" - espree "^9.5.2" + eslint-scope "^7.2.2" + eslint-visitor-keys "^3.4.3" + espree "^9.6.1" esquery "^1.4.2" esutils "^2.0.2" fast-deep-equal "^3.1.3" @@ -4300,7 +4188,6 @@ eslint@^8.0.0: globals "^13.19.0" graphemer "^1.4.0" ignore "^5.2.0" - import-fresh "^3.0.0" imurmurhash "^0.1.4" is-glob "^4.0.0" is-path-inside "^3.0.3" @@ -4310,21 +4197,20 @@ eslint@^8.0.0: lodash.merge "^4.6.2" minimatch "^3.1.2" natural-compare "^1.4.0" - optionator "^0.9.1" + optionator "^0.9.3" strip-ansi "^6.0.1" - strip-json-comments "^3.1.0" text-table "^0.2.0" -espree@^9.5.2: - version "9.5.2" - resolved "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz#e994e7dc33a082a7a82dceaf12883a829353215b" - integrity sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw== +espree@^9.6.0, espree@^9.6.1: + version "9.6.1" + resolved "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f" + integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ== dependencies: - acorn "^8.8.0" + acorn "^8.9.0" acorn-jsx "^5.3.2" eslint-visitor-keys "^3.4.1" -esprima@^4.0.0, esprima@^4.0.1: +esprima@^4.0.0: version "4.0.1" resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== @@ -4353,11 +4239,6 @@ estraverse@^5.1.0, estraverse@^5.2.0: resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123" integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA== -estree-walker@^2.0.2: - version "2.0.2" - resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" - integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== - esutils@^2.0.2: version "2.0.3" resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" @@ -4452,9 +4333,9 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== fast-glob@^3.2.9: - version "3.2.12" - resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" - integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== + version "3.3.1" + resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz#784b4e897340f3dbbef17413b3f11acf03c874c4" + integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg== dependencies: "@nodelib/fs.stat" "^2.0.2" "@nodelib/fs.walk" "^1.2.3" @@ -4467,7 +4348,7 @@ fast-json-stable-stringify@^2.0.0: resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw== -fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: +fast-levenshtein@^2.0.6: version "2.0.6" resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw== @@ -4571,11 +4452,12 @@ find-yarn-workspace-root2@1.2.16: pkg-dir "^4.2.0" flat-cache@^3.0.4: - version "3.0.4" - resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11" - integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg== + version "3.1.0" + resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.1.0.tgz#0e54ab4a1a60fe87e2946b6b00657f1c99e1af3f" + integrity sha512-OHx4Qwrrt0E4jEIcI5/Xb+f+QmJYNj2rrK8wiIdQOIrB9WrrJL8cjZvXdXuBTkkEwEqLycb5BeZDV1o2i9bTew== dependencies: - flatted "^3.1.0" + flatted "^3.2.7" + keyv "^4.5.3" rimraf "^3.0.2" flat@^5.0.2: @@ -4583,10 +4465,10 @@ flat@^5.0.2: resolved "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241" integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ== -flatted@^3.1.0: - version "3.2.7" - resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787" - integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ== +flatted@^3.2.7: + version "3.2.9" + resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf" + integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ== for-each@^0.3.3: version "0.3.3" @@ -4661,27 +4543,32 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== -fsevents@~2.3.1, fsevents@~2.3.2: +fsevents@2.3.2: version "2.3.2" resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== +fsevents@~2.3.1, fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== -function.prototype.name@^1.1.5: - version "1.1.5" - resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621" - integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA== +function.prototype.name@^1.1.6: + version "1.1.6" + resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd" + integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg== dependencies: call-bind "^1.0.2" - define-properties "^1.1.3" - es-abstract "^1.19.0" - functions-have-names "^1.2.2" + define-properties "^1.2.0" + es-abstract "^1.22.1" + functions-have-names "^1.2.3" -functions-have-names@^1.2.2, functions-have-names@^1.2.3: +functions-have-names@^1.2.3: version "1.2.3" resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834" integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ== @@ -4696,7 +4583,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5: resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e" integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg== -get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0: +get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@^1.2.0, get-intrinsic@^1.2.1: version "1.2.1" resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82" integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw== @@ -4779,7 +4666,7 @@ glob@7.1.6: once "^1.3.0" path-is-absolute "^1.0.0" -glob@^7.1.3, glob@^7.1.4, glob@^7.2.0: +glob@^7.1.3, glob@^7.1.4, glob@^7.2.0, glob@^7.2.3: version "7.2.3" resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b" integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== @@ -4808,9 +4695,9 @@ globals@^11.1.0: integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== globals@^13.19.0: - version "13.20.0" - resolved "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz#ea276a1e508ffd4f1612888f9d1bad1e2717bf82" - integrity sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ== + version "13.22.0" + resolved "https://registry.npmjs.org/globals/-/globals-13.22.0.tgz#0c9fcb9c48a2494fbb5edbfee644285543eba9d8" + integrity sha512-H1Ddc/PbZHTDVJSnj8kWptIRSD6AM3pK+mKytuIVF4uoBV7rshFlhhvA58ceJ5wp3Er58w6zj7bykMpYXt3ETw== dependencies: type-fest "^0.20.2" @@ -4994,12 +4881,12 @@ htm@^3.0.3: resolved "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78" integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ== -html-encoding-sniffer@^2.0.1: - version "2.0.1" - resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3" - integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ== +html-encoding-sniffer@^3.0.0: + version "3.0.0" + resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9" + integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA== dependencies: - whatwg-encoding "^1.0.5" + whatwg-encoding "^2.0.0" html-escaper@^2.0.0: version "2.0.2" @@ -5066,12 +4953,12 @@ http-errors@~1.6.2: setprototypeof "1.1.0" statuses ">= 1.4.0 < 2" -http-proxy-agent@^4.0.1: - version "4.0.1" - resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a" - integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg== +http-proxy-agent@^5.0.0: + version "5.0.0" + resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43" + integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w== dependencies: - "@tootallnate/once" "1" + "@tootallnate/once" "2" agent-base "6" debug "4" @@ -5091,7 +4978,7 @@ https-proxy-agent@5.0.0: agent-base "6" debug "4" -https-proxy-agent@5.0.1, https-proxy-agent@^5.0.0: +https-proxy-agent@5.0.1, https-proxy-agent@^5.0.1: version "5.0.1" resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6" integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA== @@ -5111,6 +4998,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" +iconv-lite@0.6.3: + version "0.6.3" + resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" + integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== + dependencies: + safer-buffer ">= 2.1.2 < 3.0.0" + ieee754@^1.1.13: version "1.2.1" resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -5121,7 +5015,7 @@ ignore@^5.2.0: resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324" integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ== -import-fresh@^3.0.0, import-fresh@^3.2.1: +import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== @@ -5242,10 +5136,10 @@ is-ci@^3.0.1: dependencies: ci-info "^3.2.0" -is-core-module@^2.11.0: - version "2.12.1" - resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz#0c0b6885b6f80011c71541ce15c8d66cf5a4f9fd" - integrity sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg== +is-core-module@^2.13.0: + version "2.13.0" + resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db" + integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ== dependencies: has "^1.0.3" @@ -5388,16 +5282,12 @@ is-symbol@^1.0.2, is-symbol@^1.0.3: dependencies: has-symbols "^1.0.2" -is-typed-array@^1.1.10, is-typed-array@^1.1.9: - version "1.1.10" - resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz#36a5b5cb4189b575d1a3e4b08536bfb485801e3f" - integrity sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A== +is-typed-array@^1.1.10, is-typed-array@^1.1.12, is-typed-array@^1.1.9: + version "1.1.12" + resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz#d0bab5686ef4a76f7a73097b95470ab199c57d4a" + integrity sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg== dependencies: - available-typed-arrays "^1.0.5" - call-bind "^1.0.2" - for-each "^0.3.3" - gopd "^1.0.1" - has-tostringtag "^1.0.0" + which-typed-array "^1.1.11" is-weakref@^1.0.2: version "1.0.2" @@ -5418,6 +5308,11 @@ is-wsl@^2.2.0: dependencies: is-docker "^2.0.0" +isarray@^2.0.5: + version "2.0.5" + resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723" + integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw== + isarray@~1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11" @@ -5444,18 +5339,18 @@ istanbul-lib-coverage@^3.0.0: integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw== istanbul-lib-report@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6" - integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw== + version "3.0.1" + resolved "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d" + integrity sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw== dependencies: istanbul-lib-coverage "^3.0.0" - make-dir "^3.0.0" + make-dir "^4.0.0" supports-color "^7.1.0" istanbul-reports@^3.0.2, istanbul-reports@^3.1.1: - version "3.1.5" - resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae" - integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w== + version "3.1.6" + resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.6.tgz#2544bcab4768154281a2f0870471902704ccaa1a" + integrity sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg== dependencies: html-escaper "^2.0.0" istanbul-lib-report "^3.0.0" @@ -5468,7 +5363,7 @@ isurl@^1.0.0-alpha5: has-to-string-tag-x "^1.2.0" is-object "^1.0.1" -"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: +js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== @@ -5500,38 +5395,34 @@ jsdoc-type-pratt-parser@~3.1.0: resolved "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-3.1.0.tgz#a4a56bdc6e82e5865ffd9febc5b1a227ff28e67e" integrity sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw== -jsdom@^17.0.0: - version "17.0.0" - resolved "https://registry.npmjs.org/jsdom/-/jsdom-17.0.0.tgz#3ec82d1d30030649c8defedc45fff6aa3e5d06ae" - integrity sha512-MUq4XdqwtNurZDVeKScENMPHnkgmdIvMzZ1r1NSwHkDuaqI6BouPjr+17COo4/19oLNnmdpFDPOHVpgIZmZ+VA== - dependencies: - abab "^2.0.5" - acorn "^8.4.1" - acorn-globals "^6.0.0" - cssom "^0.5.0" - cssstyle "^2.3.0" - data-urls "^3.0.0" - decimal.js "^10.3.1" - domexception "^2.0.1" - escodegen "^2.0.0" +jsdom@^22.1.0: + version "22.1.0" + resolved "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz#0fca6d1a37fbeb7f4aac93d1090d782c56b611c8" + integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw== + dependencies: + abab "^2.0.6" + cssstyle "^3.0.0" + data-urls "^4.0.0" + decimal.js "^10.4.3" + domexception "^4.0.0" form-data "^4.0.0" - html-encoding-sniffer "^2.0.1" - http-proxy-agent "^4.0.1" - https-proxy-agent "^5.0.0" + html-encoding-sniffer "^3.0.0" + http-proxy-agent "^5.0.0" + https-proxy-agent "^5.0.1" is-potential-custom-element-name "^1.0.1" - nwsapi "^2.2.0" - parse5 "6.0.1" - saxes "^5.0.1" + nwsapi "^2.2.4" + parse5 "^7.1.2" + rrweb-cssom "^0.6.0" + saxes "^6.0.0" symbol-tree "^3.2.4" - tough-cookie "^4.0.0" - w3c-hr-time "^1.0.2" - w3c-xmlserializer "^2.0.0" - webidl-conversions "^6.1.0" - whatwg-encoding "^1.0.5" - whatwg-mimetype "^2.3.0" - whatwg-url "^9.0.0" - ws "^8.0.0" - xml-name-validator "^3.0.0" + tough-cookie "^4.1.2" + w3c-xmlserializer "^4.0.0" + webidl-conversions "^7.0.0" + whatwg-encoding "^2.0.0" + whatwg-mimetype "^3.0.0" + whatwg-url "^12.0.1" + ws "^8.13.0" + xml-name-validator "^4.0.0" jsesc@^2.5.1: version "2.5.2" @@ -5575,7 +5466,7 @@ json5@^1.0.2: dependencies: minimist "^1.2.0" -json5@^2.2.2: +json5@^2.2.3: version "2.2.3" resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== @@ -5597,12 +5488,14 @@ jsonfile@^6.0.1: graceful-fs "^4.1.6" jsx-ast-utils@^3.3.3: - version "3.3.3" - resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea" - integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw== + version "3.3.5" + resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a" + integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ== dependencies: - array-includes "^3.1.5" - object.assign "^4.1.3" + array-includes "^3.1.6" + array.prototype.flat "^1.3.1" + object.assign "^4.1.4" + object.values "^1.1.6" keygrip@~1.1.0: version "1.1.0" @@ -5618,10 +5511,10 @@ keyv@3.0.0: dependencies: json-buffer "3.0.0" -keyv@^4.0.0: - version "4.5.2" - resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.2.tgz#0e310ce73bf7851ec702f2eaf46ec4e3805cce56" - integrity sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g== +keyv@^4.0.0, keyv@^4.5.3: + version "4.5.3" + resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz#00873d2b046df737963157bd04f294ca818c9c25" + integrity sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug== dependencies: json-buffer "3.0.1" @@ -5719,9 +5612,9 @@ language-tags@=1.0.5: language-subtag-registry "~0.3.2" language-tags@^1.0.5: - version "1.0.8" - resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.8.tgz#042b4bdb0d4e771a9f8cc2fdc9bb26a52a367312" - integrity sha512-aWAZwgPLS8hJ20lNPm9HNVs4inexz6S2sQa3wx/+ycuutMNE5/IfYxiWYBbi+9UWCQVaXYCOPUl6gFrPR7+jGg== + version "1.0.9" + resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777" + integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA== dependencies: language-subtag-registry "^0.3.20" @@ -5740,14 +5633,6 @@ levn@^0.4.1: prelude-ls "^1.2.1" type-check "~0.4.0" -levn@~0.3.0: - version "0.3.0" - resolved "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee" - integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA== - dependencies: - prelude-ls "~1.1.2" - type-check "~0.3.2" - lighthouse-logger@^1.0.0: version "1.4.2" resolved "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-1.4.2.tgz#aef90f9e97cd81db367c7634292ee22079280aaa" @@ -5761,31 +5646,6 @@ lines-and-columns@^1.1.6: resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== -lit-element@^3.3.0: - version "3.3.2" - resolved "https://registry.npmjs.org/lit-element/-/lit-element-3.3.2.tgz#9913bf220b85065f0e5f1bb8878cc44f36b50cfa" - integrity sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ== - dependencies: - "@lit-labs/ssr-dom-shim" "^1.1.0" - "@lit/reactive-element" "^1.3.0" - lit-html "^2.7.0" - -lit-html@^2.7.0: - version "2.7.4" - resolved "https://registry.npmjs.org/lit-html/-/lit-html-2.7.4.tgz#6d75001977c206683685b9d76594a516afda2954" - integrity sha512-/Jw+FBpeEN+z8X6PJva5n7+0MzCVAH2yypN99qHYYkq8bI+j7I39GH+68Z/MZD6rGKDK9RpzBw7CocfmHfq6+g== - dependencies: - "@types/trusted-types" "^2.0.2" - -lit@^2.2.7: - version "2.7.5" - resolved "https://registry.npmjs.org/lit/-/lit-2.7.5.tgz#60bc82990cfad169d42cd786999356dcf79b035f" - integrity sha512-i/cH7Ye6nBDUASMnfwcictBnsTN91+aBjXoTHF2xARghXScKxpD4F4WYI+VLXg9lqbMinDfvoI7VnZXjyHgdfQ== - dependencies: - "@lit/reactive-element" "^1.6.0" - lit-element "^3.3.0" - lit-html "^2.7.0" - load-yaml-file@^0.2.0: version "0.2.0" resolved "https://registry.npmjs.org/load-yaml-file/-/load-yaml-file-0.2.0.tgz#af854edaf2bea89346c07549122753c07372f64d" @@ -5892,13 +5752,6 @@ loglevel@^1.6.0: resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.8.1.tgz#5c621f83d5b48c54ae93b6156353f555963377b4" integrity sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg== -loose-envify@^1.1.0: - version "1.4.0" - resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" - integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== - dependencies: - js-tokens "^3.0.0 || ^4.0.0" - lower-case@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28" @@ -5943,13 +5796,6 @@ lru-cache@^6.0.0: dependencies: yallist "^4.0.0" -magic-string@^0.30.0: - version "0.30.0" - resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529" - integrity sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ== - dependencies: - "@jridgewell/sourcemap-codec" "^1.4.13" - make-dir@^1.0.0, make-dir@^1.2.0: version "1.3.0" resolved "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c" @@ -5957,12 +5803,12 @@ make-dir@^1.0.0, make-dir@^1.2.0: dependencies: pify "^3.0.0" -make-dir@^3.0.0: - version "3.1.0" - resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" - integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== +make-dir@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz#c3c2307a771277cd9638305f915c29ae741b614e" + integrity sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw== dependencies: - semver "^6.0.0" + semver "^7.5.3" map-obj@^1.0.0: version "1.0.1" @@ -6166,7 +6012,7 @@ nanoid@3.1.20: resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw== -nanoid@^3.1.25, nanoid@^3.3.6: +nanoid@^3.1.25: version "3.3.6" resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== @@ -6206,10 +6052,10 @@ node-fetch@2.6.7: dependencies: whatwg-url "^5.0.0" -node-releases@^2.0.12: - version "2.0.12" - resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz#35627cc224a23bfb06fb3380f2b3afaaa7eb1039" - integrity sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ== +node-releases@^2.0.13: + version "2.0.13" + resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" + integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== normalize-package-data@^2.5.0: version "2.5.0" @@ -6262,10 +6108,10 @@ nth-check@^2.0.1: dependencies: boolbase "^1.0.0" -nwsapi@^2.2.0: - version "2.2.5" - resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.5.tgz#a52744c61b3889dd44b0a158687add39b8d935e2" - integrity sha512-6xpotnECFy/og7tKSBVmUNft7J3jyXAka4XvG6AUhFWRz+Q/Ljus7znJAA3bxColfQLdS+XsjoodtJfCgeTEFQ== +nwsapi@^2.2.4: + version "2.2.7" + resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30" + integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ== object-assign@^4.0.1, object-assign@^4.1.0: version "4.1.1" @@ -6282,7 +6128,7 @@ object-keys@^1.1.1: resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e" integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA== -object.assign@^4.1.3, object.assign@^4.1.4: +object.assign@^4.1.4: version "4.1.4" resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f" integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ== @@ -6293,31 +6139,41 @@ object.assign@^4.1.3, object.assign@^4.1.4: object-keys "^1.1.1" object.entries@^1.1.6: - version "1.1.6" - resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.6.tgz#9737d0e5b8291edd340a3e3264bb8a3b00d5fa23" - integrity sha512-leTPzo4Zvg3pmbQ3rDK69Rl8GQvIqMWubrkxONG9/ojtFE2rD9fjMKfSI5BxW3osRH1m6VdzmqK8oAY9aT4x5w== + version "1.1.7" + resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz#2b47760e2a2e3a752f39dd874655c61a7f03c131" + integrity sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" object.fromentries@^2.0.6: - version "2.0.6" - resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz#cdb04da08c539cffa912dcd368b886e0904bfa73" - integrity sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg== + version "2.0.7" + resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz#71e95f441e9a0ea6baf682ecaaf37fa2a8d7e616" + integrity sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" + +object.groupby@^1.0.0: + version "1.0.1" + resolved "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz#d41d9f3c8d6c778d9cbac86b4ee9f5af103152ee" + integrity sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ== + dependencies: + call-bind "^1.0.2" + define-properties "^1.2.0" + es-abstract "^1.22.1" + get-intrinsic "^1.2.1" object.values@^1.1.6: - version "1.1.6" - resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz#4abbaa71eba47d63589d402856f908243eea9b1d" - integrity sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw== + version "1.1.7" + resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz#617ed13272e7e1071b43973aa1655d9291b8442a" + integrity sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" obliterator@^2.0.0: version "2.0.4" @@ -6359,19 +6215,7 @@ open@^8.0.2: is-docker "^2.1.1" is-wsl "^2.2.0" -optionator@^0.8.1: - version "0.8.3" - resolved "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495" - integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA== - dependencies: - deep-is "~0.1.3" - fast-levenshtein "~2.0.6" - levn "~0.3.0" - prelude-ls "~1.1.2" - type-check "~0.3.2" - word-wrap "~1.2.3" - -optionator@^0.9.1: +optionator@^0.9.3: version "0.9.3" resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64" integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg== @@ -6524,16 +6368,16 @@ parse5-htmlparser2-tree-adapter@^7.0.0: domhandler "^5.0.2" parse5 "^7.0.0" -parse5@6.0.1, parse5@^6.0.1: - version "6.0.1" - resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b" - integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw== - parse5@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA== +parse5@^6.0.1: + version "6.0.1" + resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b" + integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw== + parse5@^7.0.0, parse5@^7.1.2: version "7.1.2" resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32" @@ -6641,17 +6485,19 @@ pkg-dir@4.2.0, pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" -playwright-core@1.35.1: - version "1.35.1" - resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz#52c1e6ffaa6a8c29de1a5bdf8cce0ce290ffb81d" - integrity sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg== +playwright-core@1.38.1: + version "1.38.1" + resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz#75a3c470aa9576b7d7c4e274de3d79977448ba08" + integrity sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg== playwright@^1.22.2: - version "1.35.1" - resolved "https://registry.npmjs.org/playwright/-/playwright-1.35.1.tgz#f991d0c76ae517d4a0023d9428b09d19d5e87128" - integrity sha512-NbwBeGJLu5m7VGM0+xtlmLAH9VUfWwYOhUi/lSEDyGg46r1CA9RWlvoc5yywxR9AzQb0mOCm7bWtOXV7/w43ZA== + version "1.38.1" + resolved "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz#82ecd9bc4f4f64dbeee8a11c31793748e2528130" + integrity sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow== dependencies: - playwright-core "1.35.1" + playwright-core "1.38.1" + optionalDependencies: + fsevents "2.3.2" polyfill-library@^3.105.0: version "3.111.0" @@ -6667,19 +6513,10 @@ polyfill-library@^3.105.0: stream-to-string "^1.1.0" toposort "^2.0.2" -postcss@^8.1.10: - version "8.4.24" - resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df" - integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg== - dependencies: - nanoid "^3.3.6" - picocolors "^1.0.0" - source-map-js "^1.0.2" - preferred-pm@^3.0.0: - version "3.0.3" - resolved "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.0.3.tgz#1b6338000371e3edbce52ef2e4f65eb2e73586d6" - integrity sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ== + version "3.1.2" + resolved "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.1.2.tgz#aedb70550734a574dffcbf2ce82642bd1753bdd6" + integrity sha512-nk7dKrcW8hfCZ4H6klWcdRknBOXWzNQByJ0oJyX97BOupsYD+FzLS4hflgEu/uPUEHZCuRfMxzCBsuWd7OzT8Q== dependencies: find-up "^5.0.0" find-yarn-workspace-root2 "1.2.16" @@ -6691,11 +6528,6 @@ prelude-ls@^1.2.1: resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prelude-ls@~1.1.2: - version "1.1.2" - resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" - integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w== - prepend-http@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" @@ -6749,7 +6581,7 @@ pump@^3.0.0: end-of-stream "^1.1.0" once "^1.3.1" -punycode@^2.1.0, punycode@^2.1.1: +punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0: version "2.3.0" resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f" integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA== @@ -6853,21 +6685,6 @@ raw-body@^2.3.3: iconv-lite "0.4.24" unpipe "1.0.0" -react-dom@^18.2.0: - version "18.2.0" - resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" - integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== - dependencies: - loose-envify "^1.1.0" - scheduler "^0.23.0" - -react@^18.2.0: - version "18.2.0" - resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" - integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== - dependencies: - loose-envify "^1.1.0" - read-pkg-up@^7.0.1: version "7.0.1" resolved "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507" @@ -6919,7 +6736,7 @@ readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: string_decoder "^1.1.1" util-deprecate "^1.0.1" -readdir-glob@^1.0.0: +readdir-glob@^1.1.2: version "1.1.3" resolved "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz#c3d831f51f5e7bfa62fa2ffbe4b508c640f09584" integrity sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA== @@ -6949,9 +6766,9 @@ redent@^3.0.0: strip-indent "^3.0.0" regenerate-unicode-properties@^10.1.0: - version "10.1.0" - resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c" - integrity sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ== + version "10.1.1" + resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480" + integrity sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q== dependencies: regenerate "^1.4.2" @@ -6960,26 +6777,31 @@ regenerate@^1.4.2: resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a" integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A== -regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7: +regenerator-runtime@^0.13.7: version "0.13.11" resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== -regenerator-transform@^0.15.1: - version "0.15.1" - resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56" - integrity sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg== +regenerator-runtime@^0.14.0: + version "0.14.0" + resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45" + integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA== + +regenerator-transform@^0.15.2: + version "0.15.2" + resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4" + integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg== dependencies: "@babel/runtime" "^7.8.4" -regexp.prototype.flags@^1.4.3: - version "1.5.0" - resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz#fe7ce25e7e4cca8db37b6634c8a2c7009199b9cb" - integrity sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA== +regexp.prototype.flags@^1.5.1: + version "1.5.1" + resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e" + integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg== dependencies: call-bind "^1.0.2" define-properties "^1.2.0" - functions-have-names "^1.2.3" + set-function-name "^2.0.0" regexpu-core@^5.3.1: version "5.3.2" @@ -7043,12 +6865,12 @@ resolve-path@^1.4.0: http-errors "~1.6.2" path-is-absolute "1.0.1" -resolve@^1.10.0, resolve@^1.14.2, resolve@^1.22.0, resolve@^1.22.1: - version "1.22.2" - resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f" - integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g== +resolve@^1.10.0, resolve@^1.14.2, resolve@^1.22.0, resolve@^1.22.4: + version "1.22.6" + resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.6.tgz#dd209739eca3aef739c626fea1b4f3c506195362" + integrity sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw== dependencies: - is-core-module "^2.11.0" + is-core-module "^2.13.0" path-parse "^1.0.7" supports-preserve-symlinks-flag "^1.0.0" @@ -7098,6 +6920,11 @@ rimraf@3.0.2, rimraf@^3.0.2: dependencies: glob "^7.1.3" +rrweb-cssom@^0.6.0: + version "0.6.0" + resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1" + integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw== + run-parallel@^1.1.9: version "1.2.0" resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee" @@ -7105,12 +6932,22 @@ run-parallel@^1.1.9: dependencies: queue-microtask "^1.2.2" -rxjs@^6.5.5: - version "6.6.7" - resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9" - integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ== +rxjs@^7.8.1: + version "7.8.1" + resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543" + integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg== dependencies: - tslib "^1.9.0" + tslib "^2.1.0" + +safe-array-concat@^1.0.1: + version "1.0.1" + resolved "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c" + integrity sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.2.1" + has-symbols "^1.0.3" + isarray "^2.0.5" safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.2.0: version "5.2.1" @@ -7131,7 +6968,7 @@ safe-regex-test@^1.0.0: get-intrinsic "^1.1.3" is-regex "^1.1.4" -"safer-buffer@>= 2.1.2 < 3": +"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0": version "2.1.2" resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -7149,20 +6986,13 @@ saucelabs@~6.1.0: tunnel "0.0.6" yargs "^17.0.1" -saxes@^5.0.1: - version "5.0.1" - resolved "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d" - integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw== +saxes@^6.0.0: + version "6.0.0" + resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5" + integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA== dependencies: xmlchars "^2.2.0" -scheduler@^0.23.0: - version "0.23.0" - resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" - integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== - dependencies: - loose-envify "^1.1.0" - seek-bzip@^1.0.5: version "1.0.6" resolved "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.6.tgz#35c4171f55a680916b52a07859ecf3b5857f21c4" @@ -7183,19 +7013,19 @@ semver-truncate@^1.1.2: semver "^5.3.0" "semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0, semver@^5.6.0: - version "5.7.1" - resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== + version "5.7.2" + resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== -semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0: - version "6.3.0" - resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== +semver@^6.3.0, semver@^6.3.1: + version "6.3.1" + resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== semver@^7.1.1, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3: - version "7.5.3" - resolved "https://registry.npmjs.org/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e" - integrity sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ== + version "7.5.4" + resolved "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== dependencies: lru-cache "^6.0.0" @@ -7227,6 +7057,15 @@ set-blocking@^2.0.0: resolved "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw== +set-function-name@^2.0.0: + version "2.0.1" + resolved "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a" + integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA== + dependencies: + define-data-property "^1.0.1" + functions-have-names "^1.2.3" + has-property-descriptors "^1.0.0" + setprototypeof@1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656" @@ -7330,21 +7169,11 @@ sort-keys@^2.0.0: dependencies: is-plain-obj "^1.0.0" -source-map-js@^1.0.2: - version "1.0.2" - resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" - integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== - source-map@^0.7.3: version "0.7.4" resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656" integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA== -source-map@~0.6.1: - version "0.6.1" - resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" - integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== - spawndamnit@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/spawndamnit/-/spawndamnit-2.0.0.tgz#9f762ac5c3476abb994b42ad592b5ad22bb4b0ad" @@ -7375,9 +7204,9 @@ spdx-expression-parse@^3.0.0, spdx-expression-parse@^3.0.1: spdx-license-ids "^3.0.0" spdx-license-ids@^3.0.0: - version "3.0.13" - resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.13.tgz#7189a474c46f8d47c7b0da4b987bb45e908bd2d5" - integrity sha512-XkD+zwiqXHikFZm4AX/7JSCXA98U5Db4AFd5XUg/+9UNtnH75+Z9KxtpYiJZx36mUDVOwH83pl7yvCer6ewM3w== + version "3.0.15" + resolved "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.15.tgz#142460aabaca062bc7cd4cc87b7d50725ed6a4ba" + integrity sha512-lpT8hSQp9jAKp9mhtBU4Xjon8LPGBvLIuBiSVhMEtmLecTh2mO0tlqrAMp47tBXzMr13NJMQ2lf7RpQGLJ3HsQ== sprintf-js@~1.0.2: version "1.0.3" @@ -7435,32 +7264,32 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.1" -string.prototype.trim@^1.2.7: - version "1.2.7" - resolved "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz#a68352740859f6893f14ce3ef1bb3037f7a90533" - integrity sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg== +string.prototype.trim@^1.2.8: + version "1.2.8" + resolved "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz#f9ac6f8af4bd55ddfa8895e6aea92a96395393bd" + integrity sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" -string.prototype.trimend@^1.0.6: - version "1.0.6" - resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz#c4a27fa026d979d79c04f17397f250a462944533" - integrity sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ== +string.prototype.trimend@^1.0.7: + version "1.0.7" + resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz#1bb3afc5008661d73e2dc015cd4853732d6c471e" + integrity sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" -string.prototype.trimstart@^1.0.6: - version "1.0.6" - resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz#e90ab66aa8e4007d92ef591bbf3cd422c56bdcf4" - integrity sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA== +string.prototype.trimstart@^1.0.7: + version "1.0.7" + resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz#d4cdb44b83a4737ffbac2d406e405d43d0184298" + integrity sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg== dependencies: call-bind "^1.0.2" - define-properties "^1.1.4" - es-abstract "^1.20.4" + define-properties "^1.2.0" + es-abstract "^1.22.1" string_decoder@^1.1.1: version "1.3.0" @@ -7514,7 +7343,7 @@ strip-indent@^3.0.0: dependencies: min-indent "^1.0.0" -strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1: +strip-json-comments@3.1.1, strip-json-comments@^3.1.1: version "3.1.1" resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006" integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig== @@ -7558,9 +7387,9 @@ symbol-tree@^3.2.4: integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== systemjs@^6.9.0: - version "6.14.1" - resolved "https://registry.npmjs.org/systemjs/-/systemjs-6.14.1.tgz#95a580b91b50d0d69ff178ed4816f0ddbcea23c1" - integrity sha512-8ftwWd+XnQtZ/aGbatrN4QFNGrKJzmbtixW+ODpci7pyoTajg4sonPP8aFLESAcuVxaC1FyDESt+SpfFCH9rZQ== + version "6.14.2" + resolved "https://registry.npmjs.org/systemjs/-/systemjs-6.14.2.tgz#e289f959f8c8b407403bd39c6abaa16f2c13f316" + integrity sha512-1TlOwvKWdXxAY9vba+huLu99zrQURDWA8pUTYsRIYDZYQbGyK+pyEP4h4dlySsqo7ozyJBmYD20F+iUHhAltEg== tar-fs@2.1.1: version "2.1.1" @@ -7650,7 +7479,7 @@ toposort@^2.0.2: resolved "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg== -tough-cookie@^4.0.0: +tough-cookie@^4.1.2: version "4.1.3" resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf" integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw== @@ -7660,19 +7489,12 @@ tough-cookie@^4.0.0: universalify "^0.2.0" url-parse "^1.5.3" -tr46@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240" - integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw== - dependencies: - punycode "^2.1.1" - -tr46@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9" - integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA== +tr46@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469" + integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw== dependencies: - punycode "^2.1.1" + punycode "^2.3.0" tr46@~0.0.3: version "0.0.3" @@ -7691,7 +7513,7 @@ trim-repeated@^1.0.0: dependencies: escape-string-regexp "^1.0.2" -tsconfig-paths@^3.14.1: +tsconfig-paths@^3.14.1, tsconfig-paths@^3.14.2: version "3.14.2" resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088" integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g== @@ -7701,15 +7523,15 @@ tsconfig-paths@^3.14.1: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^1.8.1, tslib@^1.9.0: +tslib@^1.8.1: version "1.14.1" resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== -tslib@^2.0.3: - version "2.6.0" - resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3" - integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA== +tslib@^2.0.3, tslib@^2.1.0: + version "2.6.2" + resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== tsscmp@1.0.6: version "1.0.6" @@ -7724,9 +7546,9 @@ tsutils@^3.21.0: tslib "^1.8.1" tty-table@^4.1.5: - version "4.2.1" - resolved "https://registry.npmjs.org/tty-table/-/tty-table-4.2.1.tgz#c06cd76c54542acf4e2b4a0e9a5802984b65cba6" - integrity sha512-xz0uKo+KakCQ+Dxj1D/tKn2FSyreSYWzdkL/BYhgN6oMW808g8QRMuh1atAV9fjTPbWBjfbkKQpI/5rEcnAc7g== + version "4.2.2" + resolved "https://registry.npmjs.org/tty-table/-/tty-table-4.2.2.tgz#2a548db0278be5023ed40280001e1908bb823463" + integrity sha512-2gvCArMZLxgvpZ2NvQKdnYWIFLe7I/z5JClMuhrDXunmKgSZcQKcZRjN9XjAFiToMz2pUo1dEIXyrm0AwgV5Tw== dependencies: chalk "^4.1.2" csv "^5.5.3" @@ -7755,13 +7577,6 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" -type-check@~0.3.2: - version "0.3.2" - resolved "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72" - integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg== - dependencies: - prelude-ls "~1.1.2" - type-fest@^0.13.1: version "0.13.1" resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934" @@ -7795,6 +7610,36 @@ type-is@^1.6.16: media-typer "0.3.0" mime-types "~2.1.24" +typed-array-buffer@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60" + integrity sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw== + dependencies: + call-bind "^1.0.2" + get-intrinsic "^1.2.1" + is-typed-array "^1.1.10" + +typed-array-byte-length@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz#d787a24a995711611fb2b87a4052799517b230d0" + integrity sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA== + dependencies: + call-bind "^1.0.2" + for-each "^0.3.3" + has-proto "^1.0.1" + is-typed-array "^1.1.10" + +typed-array-byte-offset@^1.0.0: + version "1.0.0" + resolved "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz#cbbe89b51fdef9cd6aaf07ad4707340abbc4ea0b" + integrity sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg== + dependencies: + available-typed-arrays "^1.0.5" + call-bind "^1.0.2" + for-each "^0.3.3" + has-proto "^1.0.1" + is-typed-array "^1.1.10" + typed-array-length@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz#89d83785e5c4098bec72e08b319651f0eac9c1bb" @@ -7805,14 +7650,14 @@ typed-array-length@^1.0.4: is-typed-array "^1.1.9" typescript@^5.0.0: - version "5.1.5" - resolved "https://registry.npmjs.org/typescript/-/typescript-5.1.5.tgz#a3ae755082488b6046fe64345d293ef26af08671" - integrity sha512-FOH+WN/DQjUvN6WgW+c4Ml3yi0PH+a/8q+kNIfRehv1wLhWONedw85iu+vQ39Wp49IzTJEsZ2lyLXpBF7mkF1g== + version "5.2.2" + resolved "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" + integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== ua-parser-js@^1.0.1: - version "1.0.35" - resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011" - integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA== + version "1.0.36" + resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.36.tgz#a9ab6b9bd3a8efb90bb0816674b412717b7c428c" + integrity sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw== unbox-primitive@^1.0.2: version "1.0.2" @@ -7875,10 +7720,10 @@ unpipe@1.0.0: resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ== -update-browserslist-db@^1.0.11: - version "1.0.11" - resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940" - integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== +update-browserslist-db@^1.0.13: + version "1.0.13" + resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4" + integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg== dependencies: escalade "^3.1.1" picocolors "^1.0.0" @@ -7938,9 +7783,9 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1: integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw== uuid@^9.0.0: - version "9.0.0" - resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" - integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== + version "9.0.1" + resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30" + integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA== v8-to-istanbul@^8.0.0: version "8.1.1" @@ -7964,30 +7809,12 @@ vary@^1.1.2: resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== -vue@^3.2.37: - version "3.3.4" - resolved "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6" - integrity sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw== - dependencies: - "@vue/compiler-dom" "3.3.4" - "@vue/compiler-sfc" "3.3.4" - "@vue/runtime-dom" "3.3.4" - "@vue/server-renderer" "3.3.4" - "@vue/shared" "3.3.4" - -w3c-hr-time@^1.0.2: - version "1.0.2" - resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" - integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ== - dependencies: - browser-process-hrtime "^1.0.0" - -w3c-xmlserializer@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a" - integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA== +w3c-xmlserializer@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073" + integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw== dependencies: - xml-name-validator "^3.0.0" + xml-name-validator "^4.0.0" wcwidth@^1.0.1: version "1.0.1" @@ -8012,9 +7839,9 @@ webdriver@7.31.1, webdriver@^7.16.0: lodash.merge "^4.6.1" webdriverio@^7.16.0: - version "7.32.0" - resolved "https://registry.npmjs.org/webdriverio/-/webdriverio-7.32.0.tgz#e40e9c1596c36ad0d7e06e50c5d5a9efa7782798" - integrity sha512-bW0JLNx+WbZO/6K52AfJwE9vh+2JAfdgov9JIt2ySrXkRdvFb7TO7dvEE44GP8GP2ppVfzOcr4XzXAxlGyX6ig== + version "7.32.4" + resolved "https://registry.npmjs.org/webdriverio/-/webdriverio-7.32.4.tgz#23e46a6501a0295a2b0bdf3fd76d65b6cf8e2c35" + integrity sha512-l3u5dHHORIGxYJ40XOkTkPdIXg5j3tfN1eGIVcnKyxHyus4a3d3uYacqMmJdX9goV+D8oeAfzd+aI+bAKviVSw== dependencies: "@types/aria-query" "^5.0.0" "@types/node" "^18.0.0" @@ -8029,7 +7856,7 @@ webdriverio@^7.16.0: css-shorthand-properties "^1.1.1" css-value "^0.0.1" devtools "7.32.0" - devtools-protocol "^0.0.1161029" + devtools-protocol "^0.0.1182435" fs-extra "^11.1.1" grapheme-splitter "^1.0.2" lodash.clonedeep "^4.5.0" @@ -8049,44 +7876,29 @@ webidl-conversions@^3.0.0: resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== -webidl-conversions@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff" - integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA== - -webidl-conversions@^6.1.0: - version "6.1.0" - resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514" - integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w== - webidl-conversions@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a" integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g== -whatwg-encoding@^1.0.5: - version "1.0.5" - resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0" - integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw== +whatwg-encoding@^2.0.0: + version "2.0.0" + resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53" + integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg== dependencies: - iconv-lite "0.4.24" - -whatwg-mimetype@^2.3.0: - version "2.3.0" - resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" - integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== + iconv-lite "0.6.3" whatwg-mimetype@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7" integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q== -whatwg-url@^11.0.0: - version "11.0.0" - resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018" - integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ== +whatwg-url@^12.0.0, whatwg-url@^12.0.1: + version "12.0.1" + resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz#fd7bcc71192e7c3a2a97b9a8d6b094853ed8773c" + integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ== dependencies: - tr46 "^3.0.0" + tr46 "^4.1.1" webidl-conversions "^7.0.0" whatwg-url@^5.0.0: @@ -8097,14 +7909,6 @@ whatwg-url@^5.0.0: tr46 "~0.0.3" webidl-conversions "^3.0.0" -whatwg-url@^9.0.0: - version "9.1.0" - resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-9.1.0.tgz#1b112cf237d72cd64fa7882b9c3f6234a1c3050d" - integrity sha512-CQ0UcrPHyomtlOCot1TL77WyMIm/bCwrJ2D6AOKGwEczU9EpyoqAokfqrf/MioU9kHcMsmJZcg1egXix2KYEsA== - dependencies: - tr46 "^2.1.0" - webidl-conversions "^6.1.0" - which-boxed-primitive@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6" @@ -8129,17 +7933,16 @@ which-pm@2.0.0: load-yaml-file "^0.2.0" path-exists "^4.0.0" -which-typed-array@^1.1.9: - version "1.1.9" - resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz#307cf898025848cf995e795e8423c7f337efbde6" - integrity sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA== +which-typed-array@^1.1.11: + version "1.1.11" + resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz#99d691f23c72aab6768680805a271b69761ed61a" + integrity sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew== dependencies: available-typed-arrays "^1.0.5" call-bind "^1.0.2" for-each "^0.3.3" gopd "^1.0.1" has-tostringtag "^1.0.0" - is-typed-array "^1.1.10" which@2.0.2, which@^2.0.1, which@^2.0.2: version "2.0.2" @@ -8162,11 +7965,6 @@ wide-align@1.1.3: dependencies: string-width "^1.0.2 || 2" -word-wrap@~1.2.3: - version "1.2.3" - resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" - integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== - workerpool@6.1.0: version "6.1.0" resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.1.0.tgz#a8e038b4c94569596852de7a8ea4228eefdeb37b" @@ -8210,15 +8008,15 @@ ws@^7.4.2: resolved "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591" integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q== -ws@^8.0.0: - version "8.13.0" - resolved "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" - integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== +ws@^8.13.0: + version "8.14.2" + resolved "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f" + integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g== -xml-name-validator@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" - integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw== +xml-name-validator@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835" + integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw== xmlchars@^2.2.0: version "2.2.0" @@ -8355,10 +8153,10 @@ yocto-queue@^0.1.0: integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== zip-stream@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.0.tgz#51dd326571544e36aa3f756430b313576dc8fc79" - integrity sha512-zshzwQW7gG7hjpBlgeQP9RuyPGNxvJdzR8SUM3QhxCnLjWN2E7j3dOvpeDcQoETfHx0urRS7EtmVToql7YpU4A== + version "4.1.1" + resolved "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz#1337fe974dbaffd2fa9a1ba09662a66932bd7135" + integrity sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ== dependencies: - archiver-utils "^2.1.0" - compress-commons "^4.1.0" + archiver-utils "^3.0.4" + compress-commons "^4.1.2" readable-stream "^3.6.0" From 5650b59a31af05b1e5d736f2b339971420351b68 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 2 Oct 2023 15:29:13 +0200 Subject: [PATCH 02/44] add prettier --- .editorconfig | 3 - .eslintrc.json | 6 +- .github/workflows/codeql-analysis.yml | 26 +- .github/workflows/lint_test.yml | 141 +++++++++ .github/workflows/main.yml | 167 +---------- .github/workflows/pr.yml | 158 +--------- .github/workflows/wiki.yml | 11 +- .prettierignore | 2 + .vscode/extensions.json | 9 + .vscode/settings.json | 33 +++ CHANGELOG.md | 178 ++++++------ README.md | 26 +- docs/Home.md | 25 +- docs/_Footer.md | 2 +- docs/_Header.md | 2 +- docs/_Sidebar.md | 94 +++--- docs/events.md | 28 +- docs/get-started.md | 51 ++-- docs/helpers.md | 5 +- docs/integrations.md | 37 ++- docs/life-cycle.md | 14 +- docs/migrations.md | 50 ++-- docs/properties.md | 42 ++- docs/styling.md | 23 +- docs/templates.md | 194 +++++++------ docs/tools.md | 19 +- jsx-runtime.d.ts | 2 +- package.json | 10 +- prettier.config.cjs | 5 + src/Attributes.ts | 37 ++- src/ClassDescriptor.ts | 2 +- src/Component.ts | 135 +++++++-- src/Context.ts | 8 +- src/CustomElement.ts | 4 +- src/Elements.ts | 358 +++++++++++------------ src/FunctionComponent.ts | 2 +- src/JSX.ts | 235 +++++++++++---- src/Observable.ts | 23 +- src/Thenable.ts | 4 +- src/css.ts | 11 +- src/directives.ts | 4 +- src/events.ts | 101 +++++-- src/helpers.ts | 8 +- src/index.ts | 28 +- src/property.ts | 377 ++++++++++++++---------- src/render.ts | 219 +++++++------- test/component.spec.js | 354 +++++++++-------------- test/css.spec.js | 10 +- test/events.spec.js | 397 ++++++++++++++------------ test/module.spec.js | 2 +- test/property.spec.js | 353 +++++++++++------------ test/render.spec.js | 388 +++++++++++++++++-------- test/template.spec.js | 225 ++++++++++----- test/typings/Component.ts | 3 +- test/typings/Properties.ts | 13 +- test/typings/render.tsx | 52 +++- test/typings/tsconfig.json | 4 +- tsconfig.json | 9 +- yarn.lock | 204 +++++++++---- 59 files changed, 2769 insertions(+), 2164 deletions(-) create mode 100644 .github/workflows/lint_test.yml create mode 100644 .prettierignore create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json create mode 100644 prettier.config.cjs diff --git a/.editorconfig b/.editorconfig index f6ebe6f0..ebbf1a48 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,4 +1,3 @@ -# RNA # EditorConfig is awesome: http://EditorConfig.org # top-most EditorConfig file @@ -32,5 +31,3 @@ indent_size = 4 # Allow trailing whitespaces in markdown for new line statements [*.{md,markdown}] trim_trailing_whitespace = false - -# RNA diff --git a/.eslintrc.json b/.eslintrc.json index b2628994..ccf022c1 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,14 +1,12 @@ { - "extends": "@chialab/eslint-config/typescript", + "extends": "@chialab/eslint-config", "env": { "browser": true }, "parserOptions": { "project": false }, - "plugins": [ - "jsdoc" - ], + "plugins": ["jsdoc"], "rules": { "jsdoc/check-param-names": 1, "jsdoc/check-property-names": 1, diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 42df7785..30099938 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -9,14 +9,14 @@ # the `language` matrix defined below to confirm you have the correct set of # supported CodeQL languages. # -name: "CodeQL" +name: 'CodeQL' on: push: - branches: [ main ] + branches: [main] pull_request: # The branches below must be a subset of the branches above - branches: [ main ] + branches: [main] schedule: - cron: '37 9 * * 2' @@ -32,17 +32,17 @@ jobs: strategy: fail-fast: false matrix: - language: [ 'typescript' ] + language: ['typescript'] steps: - - name: Checkout repository - uses: actions/checkout@v3 + - name: Checkout repository + uses: actions/checkout@v4 - # Initializes the CodeQL tools for scanning. - - name: Initialize CodeQL - uses: github/codeql-action/init@v2 - with: - languages: ${{ matrix.language }} + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v2 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2 diff --git a/.github/workflows/lint_test.yml b/.github/workflows/lint_test.yml new file mode 100644 index 00000000..5b1c8931 --- /dev/null +++ b/.github/workflows/lint_test.yml @@ -0,0 +1,141 @@ +name: Lint and Test +on: + workflow_call: + +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - name: Checkout the repository + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + cache: yarn + + - name: Install project dependencies + run: yarn install + env: + PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true + + - name: Lint + run: yarn lint + + build: + name: Build + runs-on: ubuntu-latest + steps: + - name: Checkout the repository + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + cache: yarn + + - name: Install project dependencies + run: yarn install + env: + PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true + + - name: Run build script + run: yarn build + + - name: Upload build artifacts + uses: actions/upload-artifact@v3 + with: + name: DNA + path: dist + + test-browser: + name: Test Browsers + runs-on: ubuntu-latest + needs: build + steps: + - name: Checkout the repository + uses: actions/checkout@v3 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + cache: yarn + + - name: Install project dependencies + run: yarn install + + - name: Fetch build artifacts + uses: actions/download-artifact@v3 + with: + name: DNA + path: dist + + - name: Run tests + run: yarn test:browser + + - name: Upload coverage to codecov + uses: codecov/codecov-action@v3 + with: + file: coverage/lcov.info + + test-node: + name: Test Node + runs-on: ubuntu-latest + needs: + - build + steps: + - name: Checkout the repository + uses: actions/checkout@v3 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + cache: yarn + + - name: Install project dependencies + run: yarn install + + - name: Fetch build artifacts + uses: actions/download-artifact@v3 + with: + name: DNA + path: dist + + - name: Run tests + run: yarn test:node + + - name: Upload coverage to codecov + uses: codecov/codecov-action@v3 + with: + file: coverage/lcov.info + + test-saucelabs: + name: Test SauceLabs + runs-on: ubuntu-latest + needs: build + concurrency: saucelabs + steps: + - name: Checkout the repository + uses: actions/checkout@v3 + + - name: Setup Node + uses: actions/setup-node@v3 + with: + cache: yarn + + - name: Install project dependencies + run: yarn install + + - name: Fetch build artifacts + uses: actions/download-artifact@v3 + with: + name: DNA + path: dist + + - name: Run tests + run: yarn test:saucelabs + env: + SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }} + SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 834e4ec2..e26237d1 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -2,181 +2,24 @@ name: Main on: workflow_dispatch: push: - branches: - - main + branches: [main] concurrency: group: ${{ github.workflow }} cancel-in-progress: true jobs: - lint: - name: Lint - runs-on: ubuntu-latest - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Lint - run: yarn lint - - build: - name: Build - runs-on: ubuntu-latest - needs: lint - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Run build script - run: yarn build - - - name: Upload build artifacts - uses: actions/upload-artifact@v3 - with: - name: DNA - path: dist - - test-browser: - name: Test Browsers - runs-on: ubuntu-latest - needs: build - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - - name: Run tests - run: yarn test:browser - - - name: Upload coverage to codecov - uses: codecov/codecov-action@v3 - with: - file: coverage/lcov.info - - test-node: - name: Test Node - runs-on: ubuntu-latest - needs: - - build - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - - name: Run tests - run: yarn test:node - - - name: Upload coverage to codecov - uses: codecov/codecov-action@v3 - with: - file: coverage/lcov.info - - test-integrations: - name: Test Integragtions - runs-on: ubuntu-latest - needs: - - build - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - test-saucelabs: - name: Test SauceLabs - runs-on: ubuntu-latest - needs: build - concurrency: saucelabs - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - - name: Run tests - run: yarn test:saucelabs - env: - SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }} - SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }} + lint-test: + uses: ./.github/workflows/lint_test.yml release: name: Release runs-on: ubuntu-latest timeout-minutes: 10 needs: - - test-browser - - test-node - - test-integrations - - test-saucelabs + - lint-test steps: - name: Checkout the repository - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Setup Node uses: actions/setup-node@v3 diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 46eea3ee..d7b1c1c2 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -7,159 +7,5 @@ concurrency: cancel-in-progress: true jobs: - lint: - name: Lint - runs-on: ubuntu-latest - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Lint - run: yarn lint - - build: - name: Build - runs-on: ubuntu-latest - needs: lint - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Run build script - run: yarn build - - - name: Upload build artifacts - uses: actions/upload-artifact@v3 - with: - name: DNA - path: dist - - test-browser: - name: Test Browsers - runs-on: ubuntu-latest - needs: build - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - - name: Run tests - run: yarn test:browser - - - name: Upload coverage to codecov - uses: codecov/codecov-action@v3 - with: - file: coverage/lcov.info - - test-node: - name: Test Node - runs-on: ubuntu-latest - needs: - - build - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - - name: Run tests - run: yarn test:node - - - name: Upload coverage to codecov - uses: codecov/codecov-action@v3 - with: - file: coverage/lcov.info - - test-integrations: - name: Test Integragtions - runs-on: ubuntu-latest - needs: - - build - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - test-saucelabs: - name: Test SauceLabs - runs-on: ubuntu-latest - needs: build - concurrency: saucelabs - steps: - - name: Checkout the repository - uses: actions/checkout@v3 - - - name: Setup Node - uses: actions/setup-node@v3 - with: - cache: yarn - - - name: Install project dependencies - run: yarn install - - - name: Fetch build artifacts - uses: actions/download-artifact@v3 - with: - name: DNA - path: dist - - - name: Run tests - run: yarn test:saucelabs - env: - SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }} - SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }} - + lint-test: + uses: ./.github/workflows/lint_test.yml diff --git a/.github/workflows/wiki.yml b/.github/workflows/wiki.yml index 103474dd..099bc7a4 100644 --- a/.github/workflows/wiki.yml +++ b/.github/workflows/wiki.yml @@ -1,12 +1,9 @@ name: Wiki on: push: - branches: - - main - paths: - - 'docs/**' - tags-ignore: - - '*' + branches: [main] + paths: ['docs/**'] + tags-ignore: ['*'] concurrency: group: ${{ github.workflow }} cancel-in-progress: true @@ -16,7 +13,7 @@ jobs: name: Deploy Wiki runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: Push documentation to wiki env: GITHUB_TOKEN: ${{ secrets.GITHUB_WIKI_TOKEN }} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..009af543 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +dist +coverage diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..13736580 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,9 @@ +{ + "recommendations": [ + "EditorConfig.EditorConfig", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "stylelint.vscode-stylelint", + "unifiedjs.vscode-mdx" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..59b3ee11 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,33 @@ +{ + "editor.formatOnSave": true, + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsonc]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[yaml]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[markdown]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } +} diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f91f434..bc629d84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,240 +4,240 @@ ### Minor Changes -- 98dc11d: Refactored component properties typings for better typecheck perfomances and JSX support. +- 98dc11d: Refactored component properties typings for better typecheck perfomances and JSX support. ### Patch Changes -- c5c7e44: Cleanup component class typings -- 98dc11d: Do not expose internal `watchedProperties` field for components. -- 764669e: Fix parent children renderers +- c5c7e44: Cleanup component class typings +- 98dc11d: Do not expose internal `watchedProperties` field for components. +- 764669e: Fix parent children renderers ## 3.22.0-beta.0 ### Minor Changes -- 98dc11d: Refactored component properties typings for better typecheck perfomances and JSX support. +- 98dc11d: Refactored component properties typings for better typecheck perfomances and JSX support. ### Patch Changes -- 98dc11d: Do not expose internal `watchedProperties` field for components. -- 764669e: Fix parent children renderers +- 98dc11d: Do not expose internal `watchedProperties` field for components. +- 764669e: Fix parent children renderers ## 3.21.8 ### Patch Changes -- f3e5cc4: Correctly upgrade builtin elements in safari on document interactive. +- f3e5cc4: Correctly upgrade builtin elements in safari on document interactive. ## 3.21.7 ### Patch Changes -- f5e062a: Export `jsxDEV` symbol. +- f5e062a: Export `jsxDEV` symbol. ## 3.21.6 ### Patch Changes -- eaf752e: Fixed JSX properties typings. +- eaf752e: Fixed JSX properties typings. ## 3.21.5 ### Patch Changes -- 389291d: Fix previous build. +- 389291d: Fix previous build. ## 3.21.4 ### Patch Changes -- 422ea43: Fix jsx-runtime main module import. +- 422ea43: Fix jsx-runtime main module import. ## 3.21.3 ### Patch Changes -- 496b35a: Preserve fragment keys after multiple renders +- 496b35a: Preserve fragment keys after multiple renders ## 3.21.2 ### Patch Changes -- cf416fb: Correctly move slotted nodes +- cf416fb: Correctly move slotted nodes ## 3.21.1 ### Patch Changes -- 883de6c: Fix context owner for temporary elements +- 883de6c: Fix context owner for temporary elements ## 3.21.0 ### Minor Changes -- a8e3caf: Collect slot children updates +- a8e3caf: Collect slot children updates ### Patch Changes -- 0624242: Fix detection for custom element initialized by the parser +- 0624242: Fix detection for custom element initialized by the parser ## 3.20.9 ### Patch Changes -- f9620f9: Fix SSR-ed components owner +- f9620f9: Fix SSR-ed components owner ## 3.20.8 ### Patch Changes -- 93bb3c2: Fix children rendering with context ownership -- 098d8a4: Handle ts `getDecorators` in analyzer +- 93bb3c2: Fix children rendering with context ownership +- 098d8a4: Handle ts `getDecorators` in analyzer ## 3.20.7 ### Patch Changes -- Fixed render root for SSR-ed components. +- Fixed render root for SSR-ed components. ## 3.20.6 ### Patch Changes -- Create properties prototype chain only during property definition. +- Create properties prototype chain only during property definition. ## 3.20.5 ### Patch Changes -- Fix re-render emptied virtual nodes (again) +- Fix re-render emptied virtual nodes (again) ## 3.20.4 ### Patch Changes -- Fix re-rendering of emptied nodes +- Fix re-rendering of emptied nodes ## 3.20.3 ### Patch Changes -- Fixed render of slotted text with sibling text template +- Fixed render of slotted text with sibling text template ## 3.20.2 ### Patch Changes -- Fix JSX runtime with keyed nodes +- Fix JSX runtime with keyed nodes ## 3.20.1 ### Patch Changes -- Ensure the JSX runtime transformation uses array +- Ensure the JSX runtime transformation uses array ## 3.20.0 ### Minor Changes -- 1b128ec: Render nodes against internal render state instead of actual childNodes +- 1b128ec: Render nodes against internal render state instead of actual childNodes ### Patch Changes -- e5adda7: Refactored root context handling -- 4165871: Introduce the `customElementPrototype` decorator for base Component classes. -- 98c3381: Preserve root render context for properties -- c7f0337: Fix context for slotted items. -- 785d6f0: Render should return a shallow clone of the child list +- e5adda7: Refactored root context handling +- 4165871: Introduce the `customElementPrototype` decorator for base Component classes. +- 98c3381: Preserve root render context for properties +- c7f0337: Fix context for slotted items. +- 785d6f0: Render should return a shallow clone of the child list ## 3.20.0-beta.5 ### Patch Changes -- Introduce the `customElementPrototype` decorator for base Component classes. +- Introduce the `customElementPrototype` decorator for base Component classes. ## 3.20.0-beta.4 ### Patch Changes -- Fix context for slotted items. +- Fix context for slotted items. ## 3.20.0-beta.3 ### Patch Changes -- Preserve root render context for properties +- Preserve root render context for properties ## 3.20.0-beta.2 ### Patch Changes -- Render should return a shallow clone of the child list +- Render should return a shallow clone of the child list ## 3.20.0-beta.1 ### Patch Changes -- Refactored root context handling +- Refactored root context handling ## 3.20.0-beta.0 ### Minor Changes -- 1b128ec: Render nodes against internal render state instead of actual childNodes +- 1b128ec: Render nodes against internal render state instead of actual childNodes ## 3.19.1 ### Patch Changes -- 18f4463: Fix render component instance check +- 18f4463: Fix render component instance check ## 3.19.0 ### Minor Changes -- fce7ac5: Integration fixes, tests and docs +- fce7ac5: Integration fixes, tests and docs ## 3.18.2 ### Patch Changes -- Correctly read properties from slotted contexts. +- Correctly read properties from slotted contexts. ## 3.18.1 ### Patch Changes -- 36c2f17: Revert sideEffects flag +- 36c2f17: Revert sideEffects flag ## 3.18.0 ### Minor Changes -- bcee8c3: Make it fully tree shakable +- bcee8c3: Make it fully tree shakable ### Bug Fixes -- keyed function components re-render ([d436f6b](https://github.com/chialab/dna/commit/d436f6bcdf9a65e52eabd1261dac0061a5f66199)) -- slot default in older browsers ([9104e3a](https://github.com/chialab/dna/commit/9104e3ae2067314c448fd43b9010ae5c6e0899af)) +- keyed function components re-render ([d436f6b](https://github.com/chialab/dna/commit/d436f6bcdf9a65e52eabd1261dac0061a5f66199)) +- slot default in older browsers ([9104e3a](https://github.com/chialab/dna/commit/9104e3ae2067314c448fd43b9010ae5c6e0899af)) # [3.17.0](https://github.com/chialab/dna/compare/v3.16.1...v3.17.0) (2022-04-26) ### Features -- add update config to properties ([ec0e4fc](https://github.com/chialab/dna/commit/ec0e4fc86544308bb73b223f2a68ca83f4c84c51)) +- add update config to properties ([ec0e4fc](https://github.com/chialab/dna/commit/ec0e4fc86544308bb73b223f2a68ca83f4c84c51)) ## [3.16.1](https://github.com/chialab/dna/compare/v3.16.0...v3.16.1) (2022-03-29) ### Bug Fixes -- analyzer attribute name ([58eb34f](https://github.com/chialab/dna/commit/58eb34f4b047f13b4e08a6ac25054a60db39cbfd)) +- analyzer attribute name ([58eb34f](https://github.com/chialab/dna/commit/58eb34f4b047f13b4e08a6ac25054a60db39cbfd)) # [3.16.0](https://github.com/chialab/dna/compare/v3.15.0...v3.16.0) (2022-03-28) ### Features -- expose VAttrs and VProps ([6ac393f](https://github.com/chialab/dna/commit/6ac393f5151fdc2382d62fd7ccd29d5365c4f40b)) +- expose VAttrs and VProps ([6ac393f](https://github.com/chialab/dna/commit/6ac393f5151fdc2382d62fd7ccd29d5365c4f40b)) # [3.15.0](https://github.com/chialab/dna/compare/v3.14.6...v3.15.0) (2022-03-28) @@ -245,37 +245,37 @@ ### Bug Fixes -- do not merge property observers across inheritance ([8a6df78](https://github.com/chialab/dna/commit/8a6df78bc8281377b1785d4b174732306b8c8093)) +- do not merge property observers across inheritance ([8a6df78](https://github.com/chialab/dna/commit/8a6df78bc8281377b1785d4b174732306b8c8093)) ## [3.14.5](https://github.com/chialab/dna/compare/v3.14.4...v3.14.5) (2022-01-13) ### Bug Fixes -- render components document load ([19b57fb](https://github.com/chialab/dna/commit/19b57fb5f3de6f44c6347d87918f169da48d3783)) +- render components document load ([19b57fb](https://github.com/chialab/dna/commit/19b57fb5f3de6f44c6347d87918f169da48d3783)) ## [3.14.4](https://github.com/chialab/dna/compare/v3.14.3...v3.14.4) (2022-01-12) ### Bug Fixes -- prevent unnecessary update ([9537fa2](https://github.com/chialab/dna/commit/9537fa21c749505e773c5ac61ce2abf6d06b1c83)) +- prevent unnecessary update ([9537fa2](https://github.com/chialab/dna/commit/9537fa21c749505e773c5ac61ce2abf6d06b1c83)) ## [3.14.3](https://github.com/chialab/dna/compare/v3.14.2...v3.14.3) (2022-01-03) ### Bug Fixes -- virtual dom for slotted children ([d592401](https://github.com/chialab/dna/commit/d5924011f4181080dfca0cef59415b83fd466639)) +- virtual dom for slotted children ([d592401](https://github.com/chialab/dna/commit/d5924011f4181080dfca0cef59415b83fd466639)) ## [3.14.2](https://github.com/chialab/dna/compare/v3.14.1...v3.14.2) (2022-01-03) ### Bug Fixes -- do not reuse slotted children in vdom ([b4a4fe5](https://github.com/chialab/dna/commit/b4a4fe569036e9c774e464245f00ec6b122ac026)) +- do not reuse slotted children in vdom ([b4a4fe5](https://github.com/chialab/dna/commit/b4a4fe569036e9c774e464245f00ec6b122ac026)) ## [3.14.1](https://github.com/chialab/dna/compare/v3.14.0...v3.14.1) (2021-12-22) ### Bug Fixes -- key function components ([d8f7878](https://github.com/chialab/dna/commit/d8f78783cdb708f2240c8cdd6d92656186019b83)) +- key function components ([d8f7878](https://github.com/chialab/dna/commit/d8f78783cdb708f2240c8cdd6d92656186019b83)) # [3.14.0](https://github.com/chialab/dna/compare/v3.13.6...v3.14.0) (2021-12-17) @@ -283,47 +283,47 @@ ### Bug Fixes -- ts inference for listener ([b5329c9](https://github.com/chialab/dna/commit/b5329c9294e3bab897fbd9b15afc8ce6182571f4)) +- ts inference for listener ([b5329c9](https://github.com/chialab/dna/commit/b5329c9294e3bab897fbd9b15afc8ce6182571f4)) ## [3.13.4](https://github.com/chialab/dna/compare/v3.13.3...v3.13.4) (2021-12-14) ### Bug Fixes -- store properties using rootContext ([5c306ad](https://github.com/chialab/dna/commit/5c306adb1572c8f09617128b15cd76c8b8ec38a5)) -- use isCOnnected helper ([b727ec6](https://github.com/chialab/dna/commit/b727ec6a01137db151196b5699ba0afdc0e12445)) +- store properties using rootContext ([5c306ad](https://github.com/chialab/dna/commit/5c306adb1572c8f09617128b15cd76c8b8ec38a5)) +- use isCOnnected helper ([b727ec6](https://github.com/chialab/dna/commit/b727ec6a01137db151196b5699ba0afdc0e12445)) ## [3.13.3](https://github.com/chialab/dna/compare/v3.13.2...v3.13.3) (2021-10-26) ### Bug Fixes -- do not store global context key ([7a6866e](https://github.com/chialab/dna/commit/7a6866e553761d461e9ef96bd3db8244083b36b8)) +- do not store global context key ([7a6866e](https://github.com/chialab/dna/commit/7a6866e553761d461e9ef96bd3db8244083b36b8)) ## [3.13.2](https://github.com/chialab/dna/compare/v3.13.1...v3.13.2) (2021-10-22) ### Bug Fixes -- contains checks ([4fa1d15](https://github.com/chialab/dna/commit/4fa1d1525dcb397d26a3228ff5a6642ad5284803)) +- contains checks ([4fa1d15](https://github.com/chialab/dna/commit/4fa1d1525dcb397d26a3228ff5a6642ad5284803)) ## [3.13.1](https://github.com/chialab/dna/compare/v3.13.0...v3.13.1) (2021-10-22) ### Bug Fixes -- render root check ([46bbe49](https://github.com/chialab/dna/commit/46bbe493dc138f0c0ad8929cdde5e94621069316)) -- revert render with default context ([4a7436e](https://github.com/chialab/dna/commit/4a7436e9ac5f471e6c16a2405397ecab50837e78)) +- render root check ([46bbe49](https://github.com/chialab/dna/commit/46bbe493dc138f0c0ad8929cdde5e94621069316)) +- revert render with default context ([4a7436e](https://github.com/chialab/dna/commit/4a7436e9ac5f471e6c16a2405397ecab50837e78)) # [3.13.0](https://github.com/chialab/dna/compare/v3.12.1...v3.13.0) (2021-10-21) ### Bug Fixes -- ie11 tests ([c3f436d](https://github.com/chialab/dna/commit/c3f436d211c51f4e59c4af27efcad124bbbf40c9)) -- pass root context to default render fn ([b237b85](https://github.com/chialab/dna/commit/b237b8557be317b59a2e86b5e0d77959f0839f04)) -- root context and multi slots ([14761d0](https://github.com/chialab/dna/commit/14761d0f809f5e53e0e825648ea8489f4c799fb0)) +- ie11 tests ([c3f436d](https://github.com/chialab/dna/commit/c3f436d211c51f4e59c4af27efcad124bbbf40c9)) +- pass root context to default render fn ([b237b85](https://github.com/chialab/dna/commit/b237b8557be317b59a2e86b5e0d77959f0839f04)) +- root context and multi slots ([14761d0](https://github.com/chialab/dna/commit/14761d0f809f5e53e0e825648ea8489f4c799fb0)) ## [3.12.1](https://github.com/chialab/dna/compare/v3.12.0...v3.12.1) (2021-10-05) ### Bug Fixes -- move slot across roots ([41f33c5](https://github.com/chialab/dna/commit/41f33c5bc4fc42e9a8075257d7ba9628d0858a10)) +- move slot across roots ([41f33c5](https://github.com/chialab/dna/commit/41f33c5bc4fc42e9a8075257d7ba9628d0858a10)) # [3.12.0](https://github.com/chialab/dna/compare/v3.11.1...v3.12.0) (2021-10-04) @@ -331,20 +331,20 @@ ### Bug Fixes -- diff for referenced nodes ([1ee38f0](https://github.com/chialab/dna/commit/1ee38f0aba934b1aa72cac4d11c11d2d48a217c4)) -- use global namespace alias ([702eaba](https://github.com/chialab/dna/commit/702eaba0e2406674a5726a85f38b7ff0186d6a11)) +- diff for referenced nodes ([1ee38f0](https://github.com/chialab/dna/commit/1ee38f0aba934b1aa72cac4d11c11d2d48a217c4)) +- use global namespace alias ([702eaba](https://github.com/chialab/dna/commit/702eaba0e2406674a5726a85f38b7ff0186d6a11)) # [3.11.0](https://github.com/chialab/dna/compare/v3.10.1...v3.11.0) (2021-09-30) ### Features -- export common global constructors ([9a89461](https://github.com/chialab/dna/commit/9a894617100b76bbc1726c8f751e1168b83bee52)) +- export common global constructors ([9a89461](https://github.com/chialab/dna/commit/9a894617100b76bbc1726c8f751e1168b83bee52)) ## [3.10.1](https://github.com/chialab/dna/compare/v3.10.0...v3.10.1) (2021-09-29) ### Bug Fixes -- add jsdom typings dependency ([f848bc8](https://github.com/chialab/dna/commit/f848bc8544b09767d73cc3333a571530f970f427)) +- add jsdom typings dependency ([f848bc8](https://github.com/chialab/dna/commit/f848bc8544b09767d73cc3333a571530f970f427)) # [3.10.0](https://github.com/chialab/dna/compare/v3.9.0...v3.10.0) (2021-09-28) @@ -354,81 +354,81 @@ ### Bug Fixes -- improve parseDOM performance by defining a DOMParse component function ([8896ad2](https://github.com/chialab/dna/commit/8896ad201b49f7062bc2ec34611520624df5acaa)) +- improve parseDOM performance by defining a DOMParse component function ([8896ad2](https://github.com/chialab/dna/commit/8896ad201b49f7062bc2ec34611520624df5acaa)) # [3.8.0](https://github.com/chialab/dna/compare/v3.7.0...v3.8.0) (2021-09-01) ### Bug Fixes -- jsx builtin extension ([90821ba](https://github.com/chialab/dna/commit/90821ba80125e914875d6d218b066cea84ab7539)) -- jsx typings for custom elements attributes ([4db9842](https://github.com/chialab/dna/commit/4db98428e52f828113b8a326c5de0a34316d03a3)) +- jsx builtin extension ([90821ba](https://github.com/chialab/dna/commit/90821ba80125e914875d6d218b066cea84ab7539)) +- jsx typings for custom elements attributes ([4db9842](https://github.com/chialab/dna/commit/4db98428e52f828113b8a326c5de0a34316d03a3)) # [3.7.0](https://github.com/chialab/dna/compare/v3.6.1...v3.7.0) (2021-08-30) ### Bug Fixes -- correctly merge vproperties ([e8034f7](https://github.com/chialab/dna/commit/e8034f70716a21a25a2ce079169d90cd8d0eb6bf)) -- do not use deprecated html dialog element ([0cc6737](https://github.com/chialab/dna/commit/0cc673791ff64e7b10d2d2616a8458216d21d9bd)) +- correctly merge vproperties ([e8034f7](https://github.com/chialab/dna/commit/e8034f70716a21a25a2ce079169d90cd8d0eb6bf)) +- do not use deprecated html dialog element ([0cc6737](https://github.com/chialab/dna/commit/0cc673791ff64e7b10d2d2616a8458216d21d9bd)) ### Features -- add event listeners to vproperties ([d36364a](https://github.com/chialab/dna/commit/d36364aa6abfd90cc31c8a268b2032d62a1adb0b)) +- add event listeners to vproperties ([d36364a](https://github.com/chialab/dna/commit/d36364aa6abfd90cc31c8a268b2032d62a1adb0b)) ## [3.6.1](https://github.com/chialab/dna/compare/v3.6.0...v3.6.1) (2021-08-24) ### Bug Fixes -- vstyle and vclasses should accept undefined values ([377279e](https://github.com/chialab/dna/commit/377279ee51a2098320e813be125e3f1caceacb27)) +- vstyle and vclasses should accept undefined values ([377279e](https://github.com/chialab/dna/commit/377279ee51a2098320e813be125e3f1caceacb27)) # [3.6.0](https://github.com/chialab/dna/compare/v3.5.0...v3.6.0) (2021-08-24) ### Bug Fixes -- support single child in jsx templates ([2b63d38](https://github.com/chialab/dna/commit/2b63d38bdf88cb05930c016267684b56a98da123)) +- support single child in jsx templates ([2b63d38](https://github.com/chialab/dna/commit/2b63d38bdf88cb05930c016267684b56a98da123)) ### Features -- jsx runtime typings ([41e1abe](https://github.com/chialab/dna/commit/41e1abee06bb06242982a2ad869c37dd27989a65)) +- jsx runtime typings ([41e1abe](https://github.com/chialab/dna/commit/41e1abee06bb06242982a2ad869c37dd27989a65)) # [3.5.0](https://github.com/chialab/dna/compare/v3.4.8...v3.5.0) (2021-08-23) ### Bug Fixes -- event typings ([3fc4610](https://github.com/chialab/dna/commit/3fc4610ef3875ab7e09f34ea579f9de13cd3c8d8)) -- partial writable ([7e0a6ad](https://github.com/chialab/dna/commit/7e0a6ade79fb4d8c0c56ae63b1a5d4dadfaa9e51)) +- event typings ([3fc4610](https://github.com/chialab/dna/commit/3fc4610ef3875ab7e09f34ea579f9de13cd3c8d8)) +- partial writable ([7e0a6ad](https://github.com/chialab/dna/commit/7e0a6ade79fb4d8c0c56ae63b1a5d4dadfaa9e51)) ### Features -- full jsx typescript support ([eb4b6ef](https://github.com/chialab/dna/commit/eb4b6efa0c47a8dd9afe72a0dec86b2b277aaaa3)) -- reference nodes in jsx using the ref property ([36a3000](https://github.com/chialab/dna/commit/36a3000a543cda34e1e809bb609572dbb4fef27c)) +- full jsx typescript support ([eb4b6ef](https://github.com/chialab/dna/commit/eb4b6efa0c47a8dd9afe72a0dec86b2b277aaaa3)) +- reference nodes in jsx using the ref property ([36a3000](https://github.com/chialab/dna/commit/36a3000a543cda34e1e809bb609572dbb4fef27c)) ## [3.4.8](https://github.com/chialab/dna/compare/v3.4.7...v3.4.8) (2021-08-10) ### Bug Fixes -- avoid functions and symbols serialization ([27ed396](https://github.com/chialab/dna/commit/27ed396d0f267b0eff41d57b448bd00140992984)) +- avoid functions and symbols serialization ([27ed396](https://github.com/chialab/dna/commit/27ed396d0f267b0eff41d57b448bd00140992984)) ## [3.4.7](https://github.com/chialab/dna/compare/v3.4.6...v3.4.7) (2021-08-09) ### Bug Fixes -- context of listeners with target ([7c6c5a2](https://github.com/chialab/dna/commit/7c6c5a267da662116cae0a6993d755d4bb6c9f99)) -- typyings ([7842ddb](https://github.com/chialab/dna/commit/7842ddba9e18663de94943254d0db028ff2003b9)) +- context of listeners with target ([7c6c5a2](https://github.com/chialab/dna/commit/7c6c5a267da662116cae0a6993d755d4bb6c9f99)) +- typyings ([7842ddb](https://github.com/chialab/dna/commit/7842ddba9e18663de94943254d0db028ff2003b9)) ## [3.4.6](https://github.com/chialab/dna/compare/v3.4.5...v3.4.6) (2021-07-16) ### Bug Fixes -- from attribute context in render ([080da1f](https://github.com/chialab/dna/commit/080da1f7385060b9e9016bb1972259899087a81b)) +- from attribute context in render ([080da1f](https://github.com/chialab/dna/commit/080da1f7385060b9e9016bb1972259899087a81b)) ## [3.4.5](https://github.com/chialab/dna/compare/v3.4.4...v3.4.5) (2021-07-08) ### Bug Fixes -- check property descriptor before set ([d3ff1d4](https://github.com/chialab/dna/commit/d3ff1d44fd2e6dc34840c2750cfd7dda6a3aca5c)) +- check property descriptor before set ([d3ff1d4](https://github.com/chialab/dna/commit/d3ff1d44fd2e6dc34840c2750cfd7dda6a3aca5c)) ## [3.4.4](https://github.com/chialab/dna/compare/v3.4.3...v3.4.4) (2021-07-07) ### Bug Fixes -- babel legacy decorator ([daa7d35](https://github.com/chialab/dna/commit/daa7d35881fb944cb8503526c5a55f2dccdccb44)) +- babel legacy decorator ([daa7d35](https://github.com/chialab/dna/commit/daa7d35881fb944cb8503526c5a55f2dccdccb44)) diff --git a/README.md b/README.md index d05438df..63ab96ff 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ This is an example of a Component defined via DNA. Please refer to the [document **Define the component (TypeScript)** ```tsx -import { Component, customElement, property, listen } from '@chialab/dna'; +import { Component, customElement, listen, property } from '@chialab/dna'; @customElement('hello-world') class HelloWorld extends Component { @@ -66,10 +66,15 @@ class HelloWorld extends Component { @property() name: string = ''; render() { - return <> - -

Hello {this.name || 'World'}!

- ; + return ( + <> + +

Hello {this.name || 'World'}!

+ + ); } // delegate an event @@ -83,7 +88,7 @@ class HelloWorld extends Component { **Define the component (JavaScript)** ```ts -import { Component, customElements, html, property, listen } from '@chialab/dna'; +import { Component, customElements, html, listen, property } from '@chialab/dna'; class HelloWorld extends Component { static get properties() { @@ -99,15 +104,17 @@ class HelloWorld extends Component { static get listeners() { return { // delegate an event - 'change input[name="firstName"]': function(event, target) { + 'change input[name="firstName"]': function (event, target) { this.name = target.value; - } + }, }; } render() { return html` - +

Hello ${this.name || 'World'}!

`; } @@ -138,6 +145,7 @@ Tests are run against all ever green browsers, Internet Explorer and old Safari ### Build the project Install the dependencies and run the `build` script: + ``` $ yarn install $ yarn build diff --git a/docs/Home.md b/docs/Home.md index 651d3040..c9e703d8 100644 --- a/docs/Home.md +++ b/docs/Home.md @@ -3,7 +3,7 @@ DNA is a view library with first class support for reactive and functional Web C **Define the component (TypeScript)** ```tsx -import { Component, customElement, property, listen } from '@chialab/dna'; +import { Component, customElement, listen, property } from '@chialab/dna'; @customElement('hello-world') class HelloWorld extends Component { @@ -11,10 +11,15 @@ class HelloWorld extends Component { @property() name: string = ''; render() { - return <> - -

Hello {this.name || 'World'}!

- ; + return ( + <> + +

Hello {this.name || 'World'}!

+ + ); } // delegate an event @@ -28,7 +33,7 @@ class HelloWorld extends Component { **Define the component (JavaScript)** ```ts -import { Component, customElements, html, property, listen } from '@chialab/dna'; +import { Component, customElements, html, listen, property } from '@chialab/dna'; class HelloWorld extends Component { static get properties() { @@ -44,15 +49,17 @@ class HelloWorld extends Component { static get listeners() { return { // delegate an event - 'change input[name="firstName"]': function(event, target) { + 'change input[name="firstName"]': function (event, target) { this.name = target.value; - } + }, }; } render() { return html` - +

Hello ${this.name || 'World'}!

`; } diff --git a/docs/_Footer.md b/docs/_Footer.md index 46fec3e5..d21c25c8 100644 --- a/docs/_Footer.md +++ b/docs/_Footer.md @@ -2,7 +2,7 @@ [![Chialab logo](https://user-images.githubusercontent.com/3907295/178222939-cf2b8994-7a0b-4b78-8458-8ff4d432c5a8.png)](https://www.chialab.it) -[Chialab]((https://www.chialab.it)) is a design company. +[Chialab](<(https://www.chialab.it)>) is a design company. By developing strategy, design, software and content, we generate exciting relationships between brands and people. diff --git a/docs/_Header.md b/docs/_Header.md index 372988ba..f70a1669 100644 --- a/docs/_Header.md +++ b/docs/_Header.md @@ -10,4 +10,4 @@

DNA • Progressive Web Components -

\ No newline at end of file +

diff --git a/docs/_Sidebar.md b/docs/_Sidebar.md index 60fc4757..f1f4a509 100644 --- a/docs/_Sidebar.md +++ b/docs/_Sidebar.md @@ -1,47 +1,47 @@ -* [Introduction](./home) -* [Get started](./get-started) - * [Install](./get-started#get-started) - * [Define a component](./get-started#define-a-component) - * [Extending native elements](./get-started#extending-native-elements) - * [Render a component](./get-started#render-a-component) -* [Templates](./templates) - * [Render](./templates#templates) - * [JSX](./templates#jsx) - * [Expressions](./templates#expressions) - * [Functional components](./templates#functional-components) - * [Nodes and references](./templates#nodes-and-references) - * [Slotted children](./templates#slotted-children) - * [Keyed elements](./templates#keyed-elements) -* [Reactive properties](./properties) - * [Declare a property](./properties#declare-a-property) - * [Declare a state](./properties#declare-a-state) - * [Configuration](./properties#configuration) - * [Accessors](./properties#accessors) - * [Observers](./properties#observers) - * [Attributes](./properties#attributes) -* [Events](./events) - * [Declarative listeners](./events#declarative-listeners) - * [Template listeners](./events#template-listeners) - * [Delegation](./events#delegation) - * [Dispatching events](./events#dispatching-events) - * [Async dispatch](./events#async-dispatch) -* [Life cycle](./life-cycle) - * [connectedCallback](./life-cycle#connectedcallback) - * [disconnectedCallback](./life-cycle#disconnectedcallback) - * [attributeChangedCallback](./life-cycle#attributechangedcallback) - * [propertyChangedCallback](./life-cycle#propertychangedcallback) - * [stateChangedCallback](./life-cycle#statechangedcallback) -* [Styling](./styling) - * [Scoped styles](./styling#scoped-styles) - * [Native CSS modules](./styling#native-css-modules) - * [Other techniques](./styling#other-styling-techniques) -* [Integrations](./integrations) - * [Frameworks](./integrations#frameworks) - * [View libraries](./integrations#view-libraries) - * [Manipulating the DOM](./integrations#manipulating-the-dom) -* [Use in Node.js](./use-in-node) -* [Helpers](./helpers) -* [Tools](./tools) -* [Migrations](./migrations) - * [v3 -> v4](./migrations#from-v3-to-v4) - * [v2 -> v3](./migrations#from-v2-to-v3) +- [Introduction](./home) +- [Get started](./get-started) + - [Install](./get-started#get-started) + - [Define a component](./get-started#define-a-component) + - [Extending native elements](./get-started#extending-native-elements) + - [Render a component](./get-started#render-a-component) +- [Templates](./templates) + - [Render](./templates#templates) + - [JSX](./templates#jsx) + - [Expressions](./templates#expressions) + - [Functional components](./templates#functional-components) + - [Nodes and references](./templates#nodes-and-references) + - [Slotted children](./templates#slotted-children) + - [Keyed elements](./templates#keyed-elements) +- [Reactive properties](./properties) + - [Declare a property](./properties#declare-a-property) + - [Declare a state](./properties#declare-a-state) + - [Configuration](./properties#configuration) + - [Accessors](./properties#accessors) + - [Observers](./properties#observers) + - [Attributes](./properties#attributes) +- [Events](./events) + - [Declarative listeners](./events#declarative-listeners) + - [Template listeners](./events#template-listeners) + - [Delegation](./events#delegation) + - [Dispatching events](./events#dispatching-events) + - [Async dispatch](./events#async-dispatch) +- [Life cycle](./life-cycle) + - [connectedCallback](./life-cycle#connectedcallback) + - [disconnectedCallback](./life-cycle#disconnectedcallback) + - [attributeChangedCallback](./life-cycle#attributechangedcallback) + - [propertyChangedCallback](./life-cycle#propertychangedcallback) + - [stateChangedCallback](./life-cycle#statechangedcallback) +- [Styling](./styling) + - [Scoped styles](./styling#scoped-styles) + - [Native CSS modules](./styling#native-css-modules) + - [Other techniques](./styling#other-styling-techniques) +- [Integrations](./integrations) + - [Frameworks](./integrations#frameworks) + - [View libraries](./integrations#view-libraries) + - [Manipulating the DOM](./integrations#manipulating-the-dom) +- [Use in Node.js](./use-in-node) +- [Helpers](./helpers) +- [Tools](./tools) +- [Migrations](./migrations) + - [v3 -> v4](./migrations#from-v3-to-v4) + - [v2 -> v3](./migrations#from-v2-to-v3) diff --git a/docs/events.md b/docs/events.md index b7861f0b..dc4d2757 100644 --- a/docs/events.md +++ b/docs/events.md @@ -8,7 +8,7 @@ DNA add some extra features like declarative event listeners and delegations. You can declare event listeners on a component using the `listen` decorator: ```ts -import { window, extend, customElement, listen } from '@chialab/dna'; +import { customElement, extend, listen, window } from '@chialab/dna'; @customElement('x-button', { extends: 'button', @@ -29,15 +29,15 @@ class Button extends extend(window.HTMLButtonElement) { Or the `listeners` static accessor: ```ts -import { window, extend, customElements } from '@chialab/dna'; +import { customElements, extend, window } from '@chialab/dna'; class Button extends extend(window.HTMLButtonElement) { static get listeners() { return { - 'click': function(event) { + 'click': function (event) { event.preventDefault(); }, - 'input [name="age"]': function(event, target) { + 'input [name="age"]': function (event, target) { console.log(target.value); }, }; @@ -49,7 +49,7 @@ customElements.define('x-button', Button, { }); ``` -Declarations can be configured with [event listener options]((https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener)): +Declarations can be configured with [event listener options](<(https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener)>): ```ts import { Component, customElement, listen } from '@chialab/dna'; @@ -71,7 +71,7 @@ class Tracker extends Component { import { Component, customElements } from '@chialab/dna'; class Tracker extends Component { - static get listeners(){ + static get listeners() { return { touchmove: { callback(event) { @@ -116,7 +116,7 @@ class Header extends Component { Event listeners are automatically bound with the component. If you need a different target, such as the document or the window, you can pass the target to the declaration. In this case, event listeners are added once the element has been added to the DOM tree and removed once disconnected. ```ts -import { window, Component, customElement, listen } from '@chialab/dna'; +import { Component, customElement, listen, window } from '@chialab/dna'; @customElement('x-tracker') class Tracker extends Component { @@ -132,10 +132,10 @@ class Tracker extends Component {
```ts -import { window, Component, customElements } from '@chialab/dna'; +import { Component, customElements, window } from '@chialab/dna'; class Tracker extends Component { - static get listeners(){ + static get listeners() { return { touchmove: { callback(event) { @@ -161,7 +161,7 @@ DNA supports event delegation for both imperatively and declaratively declaratio Using the `listen` decorator or the `listeners` static getter, you can specify the delegated child selector after the event name in the declaration key: ```ts -import { window, extend, customElement, listen } from '@chialab/dna'; +import { customElement, extend, listen, window } from '@chialab/dna'; @customElement('x-dialog', { extends: 'dialog', @@ -179,7 +179,7 @@ class Dialog extends extend(window.HTMLDialogElement) {
```ts -import { window, extend, customElements } from '@chialab/dna'; +import { customElements, extend, window } from '@chialab/dna'; class Dialog extends extend(window.HTMLDialogElement) { static get listeners() { @@ -191,12 +191,12 @@ class Dialog extends extend(window.HTMLDialogElement) { passive: false, }, }; - }; + } } customElements.define('x-dialog', Dialog, { extends: 'dialog', -}) +}); ```
@@ -262,7 +262,7 @@ button.dispatchEvent('sendEmail', With DNA, you can also dispatch events and await a `Promise` which resolves when all async listeners are completed. This is useful for events based communication with other components: ```ts -import { Component, customElement, listen, DOM } from '@chialab/dna'; +import { Component, customElement, DOM, listen } from '@chialab/dna'; @customElement('x-paginator') class Paginator extends Component { diff --git a/docs/get-started.md b/docs/get-started.md index ee72c86e..ddf5a89e 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -17,7 +17,9 @@ The DNA environment is pretty common (if you are familiar with other libraries l 1. Make sure you have a recent [Node.js](https://nodejs.org/en/) version installed 2. Setup a bundler ([Rollup](https://rollupjs.org) is recommended, but [Webpack](https://webpack.js.org/) and [Parcel](https://parceljs.org/) are equally good choices) 3. Setup Babel ([Rollup](https://github.com/rollup/rollup-plugin-babel), [Webpack](https://github.com/babel/babel-loader), [Parcel](https://parceljs.org/transforms.html#babel)) or TypeScript ([Rollup](https://github.com/rollup/rollup-plugin-typescript), [Webpack](https://webpack.js.org/guides/typescript/), [Parcel](https://parceljs.org/transforms.html#typescript)): - * if your choice is Babel, please make sure all this plugins are loaded in order to use all DNA features: + + - if your choice is Babel, please make sure all this plugins are loaded in order to use all DNA features: + ```sh $ npm i -D \ @babel/plugin-proposal-decorators \ @@ -28,10 +30,7 @@ The DNA environment is pretty common (if you are familiar with other libraries l ```json { - "plugins": [ - "@babel/plugin-proposal-decorators", - "@babel/plugin-proposal-class-properties" - ] + "plugins": ["@babel/plugin-proposal-decorators", "@babel/plugin-proposal-class-properties"] } ``` @@ -42,9 +41,12 @@ The DNA environment is pretty common (if you are familiar with other libraries l ```json { "plugins": [ - ["@babel/plugin-transform-react-jsx", { - "pragma": "h" - }] + [ + "@babel/plugin-transform-react-jsx", + { + "pragma": "h" + } + ] ] } ``` @@ -54,28 +56,35 @@ The DNA environment is pretty common (if you are familiar with other libraries l ```json { "plugins": [ - ["@babel/plugin-transform-react-jsx", { - "runtime": "automatic", - "importSource": "@chialab/dna" - }] + [ + "@babel/plugin-transform-react-jsx", + { + "runtime": "automatic", + "importSource": "@chialab/dna" + } + ] ] } ``` - - Since the DNA `html` method is provided by the [`htm`](https://github.com/developit/htm) module by [Jason Miller](https://github.com/developit), you can also use the [`babel-plugin-htm`](https://www.npmjs.com/package/babel-plugin-htm) to preprocess templates. + + Since the DNA `html` method is provided by the [`htm`](https://github.com/developit/htm) module by [Jason Miller](https://github.com/developit), you can also use the [`babel-plugin-htm`](https://www.npmjs.com/package/babel-plugin-htm) to preprocess templates. ```json { "plugins": [ - ["babel-plugin-htm", { - "pragma": "h", - "import": { - "module": "@chialab/dna" + [ + "babel-plugin-htm", + { + "pragma": "h", + "import": { + "module": "@chialab/dna" + } } - }] + ] ] } ``` + 4. Install DNA ```sh $ npm i @chialab/dna @@ -142,7 +151,7 @@ This is very useful when you want to extend a HTML tag, preserving its semanthic import { Component, customElement, property } from '@chialab/dna'; @customElement('blog-post', { - extends: 'article' + extends: 'article', }) class BlogPost extends Component { @property() title: string = ''; @@ -176,7 +185,7 @@ class BlogPost extends Component { } customElements.define('blog-post', BlogPost, { - extends: 'article' + extends: 'article', }); ``` diff --git a/docs/helpers.md b/docs/helpers.md index 853705e6..f9511d66 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -29,10 +29,9 @@ console.log(a.href); // -> https://my.domain/demo The `css` helper is a method internally used by DNA convert a CSS string into its scoped version. This can be used to add extra manipulation to the CSS string: ```ts -import { DOM, css } from '@chialab/dna'; +import { css, DOM } from '@chialab/dna'; -const cssText = css('x-article', 'h1 { color: red; }') - .replace(/red/g, 'blue'); +const cssText = css('x-article', 'h1 { color: red; }').replace(/red/g, 'blue'); const style = DOM.document.createElement('style'); style.textContent = cssText; diff --git a/docs/integrations.md b/docs/integrations.md index 57d6fa27..0caf7872 100644 --- a/docs/integrations.md +++ b/docs/integrations.md @@ -4,13 +4,12 @@ DNA uses its own render to handle slotted nodes in the light DOM. So, we run tests for integration with other frontend frameworks like React, Angular, Lit and Vue. Here is a list of passing tests and known issues: -| Framwework | Update a property | Slot text | Slot elements | Named | -|------------|:-----------------:|:-------------:|:--------------:|:-------------:| -| React | ⚠️1 | ✅ | ✅ | ✅ | -| Lit | ✅2 | ✅ | ✅ | ⚠️3 | -| Vue | ✅2 | ⚠️5 | ⚠️5 | ⚠️5 | -| Angular | 🚧 | 🚧 | 🚧 | 🚧 | - +| Framwework | Update a property | Slot text | Slot elements | Named | +| ---------- | :---------------: | :------------: | :------------: | :------------: | +| React | ⚠️1 | ✅ | ✅ | ✅ | +| Lit | ✅2 | ✅ | ✅ | ⚠️3 | +| Vue | ✅2 | ⚠️5 | ⚠️5 | ⚠️5 | +| Angular | 🚧 | 🚧 | 🚧 | 🚧 | 1 partial support in React is granted primitive properties, but not for reference values before React 19. @@ -66,18 +65,18 @@ DOM.appendChild(document.body, child); All methods inherit the prototype signature with the context node as first argument: -| `HTMLElement.prototype` | `DOM` helper | -| :------------------- | :------------ | -| `appendChild(newChild)` | `appendChild(parent, newChild)` | -| `removeChild(oldChild)` | `removeChild(parent, oldChild)` | -| `insertBefore(newChild, refChild)` | `insertBefore(parent, newChild, refChild)` | -| `replaceChild(newChild, oldChild)` | `replaceChild(parent, newChild, oldChild)` | +| `HTMLElement.prototype` | `DOM` helper | +| :-------------------------------------------------- | :---------------------------------------------------------- | +| `appendChild(newChild)` | `appendChild(parent, newChild)` | +| `removeChild(oldChild)` | `removeChild(parent, oldChild)` | +| `insertBefore(newChild, refChild)` | `insertBefore(parent, newChild, refChild)` | +| `replaceChild(newChild, oldChild)` | `replaceChild(parent, newChild, oldChild)` | | `insertAdjacentElement(position, instertedElement)` | `insertAdjacentElement(parent, position, instertedElement)` | -| `getAttribute(qualifiedName)` | `getAttribute(element, qualifiedName)` | -| `hasAttribute(qualifiedName)` | `hasAttribute(element, qualifiedName)` | -| `setAttribute(qualifiedName, value)` | `setAttribute(element, qualifiedName, value)` | -| `removeAttribute(qualifiedName)` | `removeAttribute(element, qualifiedName)` | -| `dispatchEvent(event)` | `dispatchEvent(element, event)` | -| `matches(selector)` | `matches(element, selector)` | +| `getAttribute(qualifiedName)` | `getAttribute(element, qualifiedName)` | +| `hasAttribute(qualifiedName)` | `hasAttribute(element, qualifiedName)` | +| `setAttribute(qualifiedName, value)` | `setAttribute(element, qualifiedName, value)` | +| `removeAttribute(qualifiedName)` | `removeAttribute(element, qualifiedName)` | +| `dispatchEvent(event)` | `dispatchEvent(element, event)` | +| `matches(selector)` | `matches(element, selector)` | diff --git a/docs/life-cycle.md b/docs/life-cycle.md index 28a0505d..3aa3b113 100644 --- a/docs/life-cycle.md +++ b/docs/life-cycle.md @@ -1,27 +1,31 @@ # Life cycle DNA components follow the Custom Element life cycle specification, with the addition of the `propertyChangedCallback` and `render` methods. The complete list of methods is: -* [connectedCallback](#connectedcallback) -* [disconnectedCallback](#disconnectedcallback) -* [attributeChangedCallback](#attributechangedcallback) -* [propertyChangedCallback](#propertychangedcallback) -* [stateChangedCallback](#statechangedcallback) + +- [connectedCallback](#connectedcallback) +- [disconnectedCallback](#disconnectedcallback) +- [attributeChangedCallback](#attributechangedcallback) +- [propertyChangedCallback](#propertychangedcallback) +- [stateChangedCallback](#statechangedcallback) Life cycle methods are dispatched by the DNA Virtual DOM implementation by default. When you are not using templates to update the tree, always use the [`DOM`](./render-a-component#manipulating-the-dom) helper. ## connectedCallback From [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks): + > Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. `connectedCallback` may be called once your element is no longer connected, use `Node.isConnected` to make sure. ## disconnectedCallback From [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks): + > Invoked each time the custom element is disconnected from the document's DOM. ## attributeChangedCallback From [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks): + > Invoked each time one of the custom element's attributes is added, removed, or changed. The method receives the attribute name as first argument, as well as the new value and the previous value (default `null`). diff --git a/docs/migrations.md b/docs/migrations.md index c1354dda..e0d68c69 100644 --- a/docs/migrations.md +++ b/docs/migrations.md @@ -2,16 +2,16 @@ **Changes** -* Function Component signature has changed: +- Function Component signature has changed: ```diff - function Card(properties, store, requestUpdate) { + function Card(properties, { store, requestUpdate }) { ``` -* Typings improvements +- Typings improvements -* Using the `compile` function is now the preferred way to compile on the fly an HTML string into a virtual DOM template: +- Using the `compile` function is now the preferred way to compile on the fly an HTML string into a virtual DOM template: ```diff -import { html } from '@chialab/dna'; @@ -27,9 +27,9 @@ Please note that VDOM convertion does not handle HTML entities and it can lead t This is a list of changes requested to completely migrate to the DNA 3.0 version. -* Install and use the new `@chialab/dna` instead of the `@dnajs/idom` module +- Install and use the new `@chialab/dna` instead of the `@dnajs/idom` module -* Extends the `Component` constructor instead of the `BaseComponent` class +- Extends the `Component` constructor instead of the `BaseComponent` class ```diff - import { BaseComponent } from '@dnajs/idom'; @@ -39,42 +39,42 @@ This is a list of changes requested to completely migrate to the DNA 3.0 version + class Card extends Component { ``` -* Convert `template` getter to `render` method. +- Convert `template` getter to `render` method. -* Convert `css` getter to `

Alan Turing

-
+
``` In the resulting HTML of the example above, the first `H1` color will not be affected by the scoped style declaration. @@ -48,13 +53,17 @@ In the resulting HTML of the example above, the first `H1` color will not be aff DNA uses the component definition name to prefix all CSS rules with an unique selector for the element. For example, the rule ```css -h1 { color: cadetblue; } +h1 { + color: cadetblue; +} ``` is transformed into ```css -[is="x-card"] h1 { color: cadetblue; } +[is='x-card'] h1 { + color: cadetblue; +} ``` ### The `:host` pseudo selector @@ -119,7 +128,9 @@ x-card .title { ``` ```html - + ``` ### CSS Modules diff --git a/docs/templates.md b/docs/templates.md index f3928edd..35080e76 100644 --- a/docs/templates.md +++ b/docs/templates.md @@ -33,10 +33,13 @@ Please rember to configure the `@babel/plugin-transform-react-jsx` in roder to u ```json { "plugins": [ - ["@babel/plugin-transform-react-jsx", { - "pragma": "h", - "pragmaFrag": "Fragment", - }] + [ + "@babel/plugin-transform-react-jsx", + { + "pragma": "h", + "pragmaFrag": "Fragment" + } + ] ] } ``` @@ -45,22 +48,22 @@ Please rember to configure the `@babel/plugin-transform-react-jsx` in roder to u When interpolating an expression, the following rules (based on the type of the result and context) are applied: -| Type | Content | Attribute | -| ---- | ---- | --------- | -| `string` | Add/update as Text node | Add as value | -| `number` | Add/update as Text node | Add as value | -| `boolean` | / | Add/remove attribute, reference as property | -| `null` | / | Remove attribute | -| `undefined` | / | Remove attribute | -| `Node` | Add/update node | `.toString()` as value, reference as property | -| `array` | Add/update iterated content | `.toString()` as value, reference as property | -| `object` | `.toString()` as Text node | `.toString()` as value, reference as property | -| `function` | `.toString()` as Text node | `.toString()` as value, reference as property | +| Type | Content | Attribute | +| ----------- | --------------------------- | --------------------------------------------- | +| `string` | Add/update as Text node | Add as value | +| `number` | Add/update as Text node | Add as value | +| `boolean` | / | Add/remove attribute, reference as property | +| `null` | / | Remove attribute | +| `undefined` | / | Remove attribute | +| `Node` | Add/update node | `.toString()` as value, reference as property | +| `array` | Add/update iterated content | `.toString()` as value, reference as property | +| `object` | `.toString()` as Text node | `.toString()` as value, reference as property | +| `function` | `.toString()` as Text node | `.toString()` as value, reference as property | ### Content expression ```ts -html`${this.firstName} ${this.lastName}` +html`${this.firstName} ${this.lastName}`; ```
@@ -79,15 +82,19 @@ html`${this.firstName} ${this.lastName}`
```ts -h('span', null, this.firstName, ' ', this.lastName) +h('span', null, this.firstName, ' ', this.lastName); ``` +
### Attribute expression ```ts -html`` +html``; ```
@@ -105,10 +112,10 @@ html`` Raw
- ```ts -h('input', { name: this.name, disabled: this.disabled, required: true }) +h('input', { name: this.name, disabled: this.disabled, required: true }); ``` +
@@ -119,7 +126,7 @@ When using loops it is necessary to keep in mind the [expressions](#expressions) ```ts html`
    ${this.items.map((item, index) => html`
  • ${index}. ${item}
    • `)} -
` +`; ```
@@ -139,12 +146,14 @@ html`
    Raw
    - ```ts -h('ul', null, this.items.map((item, index) => - h('li', null, index, '. ', item) -)) +h( + 'ul', + null, + this.items.map((item, index) => h('li', null, index, '. ', item)) +); ``` +
@@ -156,11 +165,8 @@ You can create conditional expressions based on a boolean value using ternary op html` ${this.avatar && html``}

${this.title || 'Untitled'}

- ${this.members.length ? - html`${this.members.length} members` : - 'No members' - } -` + ${this.members.length ? html`${this.members.length} members` : 'No members'} +`; ```
@@ -185,16 +191,16 @@ html` Raw
- ```ts -h(Fragment, null, - this.avatar && h('img', { 'src': this.avatar }), +h( + Fragment, + null, + this.avatar && h('img', { src: this.avatar }), h('h1', null, this.title || 'Untitled'), - this.members.length ? - `${this.members.length} members` : - 'No members' -) + this.members.length ? `${this.members.length} members` : 'No members' +); ``` +
@@ -210,12 +216,15 @@ const json = fetch('/data.json') .then((data) => data.map(({ name }) => html`
  • ${name}
    • `)); html` - ${until(json, 'Loading...')} - ${json - .then((data) => html`
      ${data}
    `) - .catch((error) => html`
    Error: ${error}
    `) - } -` + ${until(json, 'Loading...')} ${json + .then( + (data) => + html`
      ${data}
    ` + ) + .catch((error) => html`
    Error: ${error}
    `)} +`; ```
    @@ -240,15 +249,15 @@ import { until } from '@chialab/dna'; Raw
    - ```ts -h(Fragment, null, +h( + Fragment, + null, until(json, 'Loading...'), - json - .then((data) => h('ul', null, data)) - .catch((error) => h('div', null, 'Error ', error)), -) + json.then((data) => h('ul', null, data)).catch((error) => h('div', null, 'Error ', error)) +); ``` +
    @@ -257,16 +266,13 @@ h(Fragment, null, As well as `Promise`s, DNA treats [`Observable`](https://rxjs-dev.firebaseapp.com/)s like as first class references. You can interpolate [`Observable`]s' values or pipe a template: ```ts -import { timer, interval } from 'rxjs'; +import { interval, timer } from 'rxjs'; import { take } from 'rxjs/operators'; const clock$ = timer(Date.now()); const numbers$ = interval(1000).pipe(take(4)); -html` - Timer: ${timer$}, - Numbers: ${numbers$.pipe((val) => val % 2 ? html`${val}` : val)} -` +html` Timer: ${timer$}, Numbers: ${numbers$.pipe((val) => (val % 2 ? html`${val}` : val))} `; ```
    @@ -287,15 +293,17 @@ html` Raw
    - ```ts -h(Fragment, null, +h( + Fragment, + null, 'Timer: ', timer$, ', Numbers', - numbers$.pipe((val) => val % 2 ? h('strong', null, val) : val) -) + numbers$.pipe((val) => (val % 2 ? h('strong', null, val) : val)) +); ``` +
    @@ -318,8 +326,6 @@ const content = '

    Hello

    '; Sometimes, you may want to break up templates in smaller parts without having to define new Custom Elements. In this cases, you can use functional components. Function components have first class support in many frameworks like React and Vue, but they require hooks in order to update DOM changes. Since DNA's state is reflected to the DOM and a "current context" is missing, the implemention is slightly different and does not require extra abstraction. - - ```ts function Row({ children, id }, { store, requestUpdate }) { const selected = store.get('selcted') ?? false; @@ -328,17 +334,25 @@ function Row({ children, id }, { store, requestUpdate }) { requestUpdate(); }; - return html`${children}>${children}`; + return html`${children}>${children}`; } html` - ${items.map((item) => html`<${Row} ...${item}> - - - `)} + ${items.map( + (item) => + html`<${Row} ...${item}> + + + ` + )} -
    ${item.id}${item.label}${item.id}${item.label}
    ` +`; ```
    @@ -373,7 +387,6 @@ function Row({ children, id }, { store, requestUpdate }) { Raw
    - ```ts function Row({ children, id }, { store, requestUpdate }) { const selected = store.get('selcted') ?? false; @@ -394,6 +407,7 @@ h('table', null, ), ) ``` +
    @@ -423,16 +437,22 @@ will render: If you want to add some properties to the instance, you can pass it as an hyper node using the `ref` property. This is useful if you want to reference some nodes in your component: ```tsx -import { DOM, Component, customElement, listen } from '@chialab/dna'; +import { Component, customElement, DOM, listen } from '@chialab/dna'; @customElement('x-form') class Form extends Component { input = DOM.createElement('input'); render() { - return
    - -
    ; + return ( +
    + +
    + ); } @listen('change', this.input) @@ -449,7 +469,7 @@ Slotted children are nodes that semantically are children of the component, but For example, we may declare a custom `` tag with some layout features: ```tsx -import { window, extend, customElement, property } from '@chialab/dna'; +import { customElement, extend, property, window } from '@chialab/dna'; @customElement('x-dialog', { extends: 'dialog', @@ -459,22 +479,22 @@ class Dialog extends extend(window.HTMLDialogElement) { @property() content: string = ''; render() { - return
    -
    -

    {this.title}

    -
    -
    - {this.content} + return ( +
    +
    +

    {this.title}

    +
    +
    {this.content}
    -
    ; + ); } } ``` This example has two problems: -* content is passed as property, which is not good for semantic -* body is interpolated as string, so HTML code is rendered as plain text. +- content is passed as property, which is not good for semantic +- body is interpolated as string, so HTML code is rendered as plain text. DNA solves those two issues, rendering "soft" children of an element into the `` tag: @@ -574,12 +594,14 @@ DNA optimizes rendering re-using elements when possible, comparing the tag name ```ts html` -` +`; ``` In this example, once the last `
    -In the example above, a new instance of `BlogPost` inherits all class methods and properties, but its `tagName` will be `ARTICLE`. +In the example above, a new instance of `AlertDialog` inherits all class methods and properties, but its `tagName` will be `DIALOG`. > **Note** > Extending builtin elements also preserves accessibility and usability features: extending the `BUTTON` element will make the component reachable and clickable via keyboard navigation without setting `role` and `tabindex`. diff --git a/docs/helpers.md b/docs/helpers.md deleted file mode 100644 index 2af159b4..00000000 --- a/docs/helpers.md +++ /dev/null @@ -1,40 +0,0 @@ -# Helpers - -The DNA module exports a set of useful methods too. Sometimes those methods are based on Custom Elements specification, others they are internally used helpers with a completly custom logic. - -## extend - -This function extends a native `HTMLElement` constructor with all DNA prototype capabilities. This is useful to extend native constructors instead of using the default `Component` class: - -```ts -import { window, extend } from '@chialab/dna'; - -// mix DNA features with the base class -export class AnchorComponent extends extend(window.HTMLAnchorElement) { - ... -} - -// the component inherit the HTMLAnchorElement's href behavior -const a = new AnchorComponent(); -a.setAttribute('href', '/demo'); - -console.log(a.href); // -> https://my.domain/demo -``` - -> **Note** -> Use the `window` namespace instead of the global constructor to make sure to write compatible components with the NodeJS environment. - -## css - -The `css` helper is a method internally used by DNA convert a CSS string into its scoped version. This can be used to add extra manipulation to the CSS string: - -```ts -import { css, document } from '@chialab/dna'; - -const cssText = css('x-article', 'h1 { color: red; }').replace(/red/g, 'blue'); - -const style = document.createElement('style'); -style.textContent = cssText; - -DOM.appendChild(document.head, style); -``` diff --git a/docs/integrations.md b/docs/integrations.md index 0caf7872..f95692d9 100644 --- a/docs/integrations.md +++ b/docs/integrations.md @@ -4,22 +4,12 @@ DNA uses its own render to handle slotted nodes in the light DOM. So, we run tests for integration with other frontend frameworks like React, Angular, Lit and Vue. Here is a list of passing tests and known issues: -| Framwework | Update a property | Slot text | Slot elements | Named | -| ---------- | :---------------: | :------------: | :------------: | :------------: | -| React | ⚠️1 | ✅ | ✅ | ✅ | -| Lit | ✅2 | ✅ | ✅ | ⚠️3 | -| Vue | ✅2 | ⚠️5 | ⚠️5 | ⚠️5 | -| Angular | 🚧 | 🚧 | 🚧 | 🚧 | - -1 partial support in React is granted primitive properties, but not for reference values before React 19. - -2 support in Lit is granted using [property expressions](https://lit.dev/docs/templates/expressions/#property-expressions). - -3 partial support in Lit is granted for first render, but inserting/removing children may lead to render issues. - -4 support in Vue is granted using [property expressions](https://vuejs.org/guide/extras/render-function.html). - -5 partial support in Vue is granted for first render and insterted children, but removing children may lead to render issues. +| Framwework | Update a property | Slot text | Slot elements | Named | +| ---------- | :---------------: | :-------: | :-----------: | :---: | +| React | 🚧 | 🚧 | 🚧 | 🚧 | +| Lit | 🚧 | 🚧 | 🚧 | 🚧 | +| Vue | 🚧 | 🚧 | 🚧 | 🚧 | +| Angular | 🚧 | 🚧 | 🚧 | 🚧 | ## View libraries @@ -46,37 +36,3 @@ export class ColorPicker extends Component { } } ``` - -## Manipulating the DOM - -Since DNA does not require any Custom Elements polyfill, the [life cycle](./life-cycle) is delegated to the render cycle which uses the `DOM` helper under the hood. This helper invokes the life cycle methods for each DOM operation like `appendChild`, `removeChild` etc. -If you want to manipulate the DOM tree outside of a render cycle, always use `DOM` methods instead of the `HTMLElement` prototype: - -```ts -import { ChildComponent } from './child-component'; - -const child = new ChildComponent(); - -// ✘ DON'T -document.body.appendChild(child); -// ✔︎ DO! -DOM.appendChild(document.body, child); -``` - -All methods inherit the prototype signature with the context node as first argument: - -| `HTMLElement.prototype` | `DOM` helper | -| :-------------------------------------------------- | :---------------------------------------------------------- | -| `appendChild(newChild)` | `appendChild(parent, newChild)` | -| `removeChild(oldChild)` | `removeChild(parent, oldChild)` | -| `insertBefore(newChild, refChild)` | `insertBefore(parent, newChild, refChild)` | -| `replaceChild(newChild, oldChild)` | `replaceChild(parent, newChild, oldChild)` | -| `insertAdjacentElement(position, instertedElement)` | `insertAdjacentElement(parent, position, instertedElement)` | -| `getAttribute(qualifiedName)` | `getAttribute(element, qualifiedName)` | -| `hasAttribute(qualifiedName)` | `hasAttribute(element, qualifiedName)` | -| `setAttribute(qualifiedName, value)` | `setAttribute(element, qualifiedName, value)` | -| `removeAttribute(qualifiedName)` | `removeAttribute(element, qualifiedName)` | -| `dispatchEvent(event)` | `dispatchEvent(element, event)` | -| `matches(selector)` | `matches(element, selector)` | - - diff --git a/docs/properties.md b/docs/properties.md index be85fc77..5ce259f5 100644 --- a/docs/properties.md +++ b/docs/properties.md @@ -20,7 +20,7 @@ class Card extends Component { Or using the static `properties` getter: ```ts -import { Component, customElements } from '@chialab/dna'; +import { Component, define } from '@chialab/dna'; class Card extends Component { static get properties() { @@ -30,7 +30,7 @@ class Card extends Component { } } -customElements.define('x-card', Card); +define('x-card', Card); ``` Once defined, the computed `observedAttributes` of the Card component will include the `age` attribute. @@ -51,7 +51,7 @@ class Card extends Component { Or using the static `properties` getter and configuring the field: ```ts -import { Component, customElements } from '@chialab/dna'; +import { Component, define } from '@chialab/dna'; class Card extends Component { static get properties() { @@ -64,7 +64,7 @@ class Card extends Component { } } -customElements.define('x-card', Card); +define('x-card', Card); ``` ## Configuration @@ -202,7 +202,7 @@ The returned value of the getter does not represent the actual property value, b The **setter** function is invoked _before_ property validation and observers and it receives the assigned value as first argument. Any returned value will be use to update the inner property value. ```ts -import { Component, customElements } from '@chialab/dna'; +import { Component, define } from '@chialab/dna'; class Card extends Component { static get properties() { @@ -223,7 +223,7 @@ class Card extends Component { } } -customElements.define('x-card', Card); +define('x-card', Card); ``` ## Observers diff --git a/docs/styling.md b/docs/styling.md index 102d315e..3241cc06 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -158,3 +158,18 @@ class Card extends Component { } } ``` + +## The `css` helper + +The `css` helper is a method internally used by DNA convert a CSS string into its scoped version. This can be used to add extra manipulation to the CSS string: + +```ts +import { css } from '@chialab/dna'; + +const cssText = css('x-article', 'h1 { color: red; }').replace(/red/g, 'blue'); + +const style = document.createElement('style'); +style.textContent = cssText; + +DOM.appendChild(document.head, style); +``` diff --git a/docs/templates.md b/docs/templates.md index 60c6911b..ad10583b 100644 --- a/docs/templates.md +++ b/docs/templates.md @@ -418,9 +418,9 @@ h('table', null, DNA can handle `Node` instances as children and hyper nodes as well. When passed as children, the very same node is positioned "as is" to the right place in the template: ```ts -import { DOM, render } from '@chialab/dna'; +import { render } from '@chialab/dna'; -let paragraph = DOM.createElement('p'); +let paragraph = document.createElement('p'); paragraph.textContent = 'Lorem Ipsum'; render(html`
    ${paragraph}
    `, document.body); @@ -439,11 +439,11 @@ will render: If you want to add some properties to the instance, you can pass it as an hyper node using the `ref` property. This is useful if you want to reference some nodes in your component: ```tsx -import { Component, customElement, DOM, listen } from '@chialab/dna'; +import { Component, customElement, listen } from '@chialab/dna'; @customElement('x-form') class Form extends Component { - input = DOM.createElement('input'); + input = this.onwenrDocument.createElement('input'); render() { return ( @@ -471,12 +471,12 @@ Slotted children are nodes that semantically are children of the component, but For example, we may declare a custom `` tag with some layout features: ```tsx -import { customElement, extend, property, window } from '@chialab/dna'; +import { builtin, customElement, property } from '@chialab/dna'; @customElement('x-dialog', { extends: 'dialog', }) -class Dialog extends extend(window.HTMLDialogElement) { +class Dialog extends builtin.HTMLDialogElement { @property() title: string = ''; @property() content: string = ''; diff --git a/docs/tools.md b/docs/tools.md index 82d51f1a..92c6b6f9 100644 --- a/docs/tools.md +++ b/docs/tools.md @@ -97,7 +97,7 @@ TypeScript supports JSX syntax, and it is able to provide typechecking and hints **x-card.tsx** ```ts -import { Component, extend, window, customElement } from '@chialab/dna'; +import { Component, builtin, customElement } from '@chialab/dna'; @customElement('x-card') class Card extends Component { @@ -107,7 +107,7 @@ class Card extends Component { @customElement('x-card', { extends: 'a', }) -class Link extends extend(window.HTMLAnchorElement) { +class Link extends builtin.HTMLAnchorElement { ... } diff --git a/docs/use-in-node.md b/docs/use-in-node.md deleted file mode 100644 index 08c375c2..00000000 --- a/docs/use-in-node.md +++ /dev/null @@ -1,29 +0,0 @@ -# Use in Node.js - -DNA is a component library based on the [Document Object Model](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). In order to work in Node.js it uses the [`jsdom`](https://github.com/jsdom/jsdom) library to create a DOM environment. - -```sh -$ npm i @chialab/dna jsdom -$ yarn add @chialab/dna jsdom -``` - -**Sample:** - -```ts -import { Component, customElements, html, render } from '@chialab/dna'; - -class HelloWorld extends Component { - render() { - return html`

    Hello world!

    `; - } -} - -customElements.define('hello-world', HelloWorld); - -const card = render(html`<${HelloWorld} />`); - -console.log(card.outerHTML); -// -> "

    Hello world!

    " -``` - -The `card` reference in the example above is a Node instance, so you can use any `HTMLElement.prototype` methods or update a property and get the re-render result with `.outerHTML`. diff --git a/package.json b/package.json index bbc1dadc..d657a874 100644 --- a/package.json +++ b/package.json @@ -40,12 +40,12 @@ }, "scripts": { "build": "rimraf 'dist' 'types' && yarn types && yarn build:browser && yarn build:node:esm && yarn build:node:cjs", - "build:browser": "esbuild src/index.ts --outfile=dist/browser/dna.js --platform=browser --format=esm --bundle --packages=external --sourcemap", - "build:node:esm": "esbuild src/index.ts --outfile=dist/node/dna.js --platform=node --alias:\\$env=./src/env.node.ts --format=esm --bundle --packages=external --sourcemap", - "build:node:cjs": "esbuild src/index.ts --outfile=dist/node/dna.cjs --platform=node --alias:\\$env=./src/env.node.ts --format=cjs --bundle --packages=external --sourcemap", + "build:browser": "esbuild src/index.ts --outfile=dist/browser/dna.js --platform=browser --format=esm --bundle --packages=external --minify --sourcemap", + "build:node:esm": "esbuild src/index.ts --outfile=dist/node/dna.js --platform=node --format=esm --bundle --packages=external --minify --sourcemap", + "build:node:cjs": "esbuild src/index.ts --outfile=dist/node/dna.cjs --platform=node --format=cjs --bundle --packages=external --minify --sourcemap", "types": "tsc", "test": "yarn test:typings && yarn test:browser && yarn test:node", - "test:typings": "tsc -p test/typings --noEmit", + "test:typings": "tsc -p test-typings --noEmit", "test:browser": "vitest run --config vitest.browser.ts", "test:saucelabs": "vitest run --config vitest.saucelabs.ts", "test:node": "vitest run --config vitest.node.ts", @@ -77,8 +77,6 @@ "webdriverio": "^8.17.0" }, "dependencies": { - "@chialab/quantum": "^1.0.0-alpha.0", - "@types/jsdom": "^21.1.3", - "jsdom": "^22.1.0" + "@chialab/quantum": "^1.0.0-alpha.0" } } diff --git a/src/Component.ts b/src/Component.ts index 9e06dd45..4b536941 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -1,8 +1,8 @@ import { attachRealm, type Realm } from '@chialab/quantum'; -import { customElements, HTMLElement } from '$env'; import { type ClassDescriptor } from './ClassDescriptor'; import { type CustomElement, type CustomElementConstructor } from './CustomElement'; import { $parse } from './directives'; +import * as HtmlElements from './Elements'; import { defineListeners, delegateEventListener, @@ -14,7 +14,7 @@ import { type DelegatedEventCallback, type ListenerConfig, } from './events'; -import { defineProperty, setPrototypeOf, type Constructor } from './helpers'; +import { defineProperty, isBrowser, setPrototypeOf, type Constructor } from './helpers'; import { type KeyedProperties, type Template } from './JSX'; import { addObserver, @@ -388,6 +388,9 @@ const mixin = (ctor: Constructor) => { super(); const element = (args.length ? (setPrototypeOf(args[0], this), args[0]) : this) as this; + if (!isBrowser) { + return element; + } // setup listeners const computedListeners = getListeners(element).map((listener) => ({ @@ -713,13 +716,35 @@ const mixin = (ctor: Constructor) => { */ export const extend = (constructor: Constructor) => mixin(constructor); +/** + * A collection of extended builtin HTML constructors. + */ +export const builtin = new Proxy({} as Record, { + get(target, name: keyof typeof HtmlElements) { + const constructor = Reflect.get(target, name); + if (constructor) { + return constructor; + } + + if (name in HtmlElements) { + const constructor = extend(HtmlElements[name] as Constructor); + return (target[name] = constructor); + } + + return null; + }, + set(target, name: keyof typeof HtmlElements, value: ComponentConstructor) { + return Reflect.set(target, name, value); + }, +}); + /** * The DNA base Component constructor, a Custom Element constructor with * declarative properties and event delegations, custom template and * a complete life cycle implementation. * All DNA components **must** extends this class. */ -export const Component = extend(HTMLElement); +export const Component = builtin.HTMLElement; /** * Decorate a component class in order to watch decorated properties. @@ -788,7 +813,10 @@ export function define(name: string, constructor: ComponentConstructor, options? 'The registry already contains an entry with the constructor (or is otherwise already defined)' ); } - customElements.define(name, constructor, options); + + if (typeof customElements !== 'undefined') { + customElements.define(name, constructor, options); + } return constructor; } diff --git a/src/Elements.ts b/src/Elements.ts index 0d08445a..331f3209 100644 --- a/src/Elements.ts +++ b/src/Elements.ts @@ -1,3 +1,5 @@ +import { isBrowser } from './helpers'; + export interface HTMLTagNameMap { a: HTMLAnchorElement; abbr: HTMLElement; @@ -182,3 +184,144 @@ export interface SVGTagNameMap { use: SVGUseElement; view: SVGViewElement; } + +const Element = class {}; +const _HTMLElement = (isBrowser ? HTMLElement : Element) as typeof HTMLElement; +const _HTMLAnchorElement = (isBrowser ? HTMLAnchorElement : Element) as typeof HTMLAnchorElement; +const _HTMLAreaElement = (isBrowser ? HTMLAreaElement : Element) as typeof HTMLAreaElement; +const _HTMLAudioElement = (isBrowser ? HTMLAudioElement : Element) as typeof HTMLAudioElement; +const _HTMLBaseElement = (isBrowser ? HTMLBaseElement : Element) as typeof HTMLBaseElement; +const _HTMLQuoteElement = (isBrowser ? HTMLQuoteElement : Element) as typeof HTMLQuoteElement; +const _HTMLBodyElement = (isBrowser ? HTMLBodyElement : Element) as typeof HTMLBodyElement; +const _HTMLBRElement = (isBrowser ? HTMLBRElement : Element) as typeof HTMLBRElement; +const _HTMLButtonElement = (isBrowser ? HTMLButtonElement : Element) as typeof HTMLButtonElement; +const _HTMLCanvasElement = (isBrowser ? HTMLCanvasElement : Element) as typeof HTMLCanvasElement; +const _HTMLTableCaptionElement = (isBrowser ? HTMLTableCaptionElement : Element) as typeof HTMLTableCaptionElement; +const _HTMLTableColElement = (isBrowser ? HTMLTableColElement : Element) as typeof HTMLTableColElement; +const _HTMLDataElement = (isBrowser ? HTMLDataElement : Element) as typeof HTMLDataElement; +const _HTMLDataListElement = (isBrowser ? HTMLDataListElement : Element) as typeof HTMLDataListElement; +const _HTMLModElement = (isBrowser ? HTMLModElement : Element) as typeof HTMLModElement; +const _HTMLDetailsElement = (isBrowser ? HTMLDetailsElement : Element) as typeof HTMLDetailsElement; +const _HTMLDialogElement = (isBrowser ? HTMLDialogElement : Element) as typeof HTMLDialogElement; +const _HTMLDirectoryElement = (isBrowser ? HTMLDirectoryElement : Element) as typeof HTMLDirectoryElement; +const _HTMLDivElement = (isBrowser ? HTMLDivElement : Element) as typeof HTMLDivElement; +const _HTMLDListElement = (isBrowser ? HTMLDListElement : Element) as typeof HTMLDListElement; +const _HTMLEmbedElement = (isBrowser ? HTMLEmbedElement : Element) as typeof HTMLEmbedElement; +const _HTMLFieldSetElement = (isBrowser ? HTMLFieldSetElement : Element) as typeof HTMLFieldSetElement; +const _HTMLFontElement = (isBrowser ? HTMLFontElement : Element) as typeof HTMLFontElement; +const _HTMLFormElement = (isBrowser ? HTMLFormElement : Element) as typeof HTMLFormElement; +const _HTMLFrameElement = (isBrowser ? HTMLFrameElement : Element) as typeof HTMLFrameElement; +const _HTMLFrameSetElement = (isBrowser ? HTMLFrameSetElement : Element) as typeof HTMLFrameSetElement; +const _HTMLHeadingElement = (isBrowser ? HTMLHeadingElement : Element) as typeof HTMLHeadingElement; +const _HTMLHeadElement = (isBrowser ? HTMLHeadElement : Element) as typeof HTMLHeadElement; +const _HTMLHRElement = (isBrowser ? HTMLHRElement : Element) as typeof HTMLHRElement; +const _HTMLIFrameElement = (isBrowser ? HTMLIFrameElement : Element) as typeof HTMLIFrameElement; +const _HTMLImageElement = (isBrowser ? HTMLImageElement : Element) as typeof HTMLImageElement; +const _HTMLInputElement = (isBrowser ? HTMLInputElement : Element) as typeof HTMLInputElement; +const _HTMLLabelElement = (isBrowser ? HTMLLabelElement : Element) as typeof HTMLLabelElement; +const _HTMLLegendElement = (isBrowser ? HTMLLegendElement : Element) as typeof HTMLLegendElement; +const _HTMLLIElement = (isBrowser ? HTMLLIElement : Element) as typeof HTMLLIElement; +const _HTMLLinkElement = (isBrowser ? HTMLLinkElement : Element) as typeof HTMLLinkElement; +const _HTMLMapElement = (isBrowser ? HTMLMapElement : Element) as typeof HTMLMapElement; +const _HTMLMarqueeElement = (isBrowser ? HTMLMarqueeElement : Element) as typeof HTMLMarqueeElement; +const _HTMLMenuElement = (isBrowser ? HTMLMenuElement : Element) as typeof HTMLMenuElement; +const _HTMLMetaElement = (isBrowser ? HTMLMetaElement : Element) as typeof HTMLMetaElement; +const _HTMLMeterElement = (isBrowser ? HTMLMeterElement : Element) as typeof HTMLMeterElement; +const _HTMLObjectElement = (isBrowser ? HTMLObjectElement : Element) as typeof HTMLObjectElement; +const _HTMLOListElement = (isBrowser ? HTMLOListElement : Element) as typeof HTMLOListElement; +const _HTMLOptGroupElement = (isBrowser ? HTMLOptGroupElement : Element) as typeof HTMLOptGroupElement; +const _HTMLOptionElement = (isBrowser ? HTMLOptionElement : Element) as typeof HTMLOptionElement; +const _HTMLOutputElement = (isBrowser ? HTMLOutputElement : Element) as typeof HTMLOutputElement; +const _HTMLParagraphElement = (isBrowser ? HTMLParagraphElement : Element) as typeof HTMLParagraphElement; +const _HTMLParamElement = (isBrowser ? HTMLParamElement : Element) as typeof HTMLParamElement; +const _HTMLPictureElement = (isBrowser ? HTMLPictureElement : Element) as typeof HTMLPictureElement; +const _HTMLPreElement = (isBrowser ? HTMLPreElement : Element) as typeof HTMLPreElement; +const _HTMLProgressElement = (isBrowser ? HTMLProgressElement : Element) as typeof HTMLProgressElement; +const _HTMLScriptElement = (isBrowser ? HTMLScriptElement : Element) as typeof HTMLScriptElement; +const _HTMLSelectElement = (isBrowser ? HTMLSelectElement : Element) as typeof HTMLSelectElement; +const _HTMLSlotElement = (isBrowser ? HTMLSlotElement : Element) as typeof HTMLSlotElement; +const _HTMLSourceElement = (isBrowser ? HTMLSourceElement : Element) as typeof HTMLSourceElement; +const _HTMLSpanElement = (isBrowser ? HTMLSpanElement : Element) as typeof HTMLSpanElement; +const _HTMLStyleElement = (isBrowser ? HTMLStyleElement : Element) as typeof HTMLStyleElement; +const _HTMLTableElement = (isBrowser ? HTMLTableElement : Element) as typeof HTMLTableElement; +const _HTMLTableSectionElement = (isBrowser ? HTMLTableSectionElement : Element) as typeof HTMLTableSectionElement; +const _HTMLTableCellElement = (isBrowser ? HTMLTableCellElement : Element) as typeof HTMLTableCellElement; +const _HTMLTemplateElement = (isBrowser ? HTMLTemplateElement : Element) as typeof HTMLTemplateElement; +const _HTMLTextAreaElement = (isBrowser ? HTMLTextAreaElement : Element) as typeof HTMLTextAreaElement; +const _HTMLTimeElement = (isBrowser ? HTMLTimeElement : Element) as typeof HTMLTimeElement; +const _HTMLTitleElement = (isBrowser ? HTMLTitleElement : Element) as typeof HTMLTitleElement; +const _HTMLTableRowElement = (isBrowser ? HTMLTableRowElement : Element) as typeof HTMLTableRowElement; +const _HTMLTrackElement = (isBrowser ? HTMLTrackElement : Element) as typeof HTMLTrackElement; +const _HTMLUListElement = (isBrowser ? HTMLUListElement : Element) as typeof HTMLUListElement; +const _HTMLVideoElement = (isBrowser ? HTMLVideoElement : Element) as typeof HTMLVideoElement; + +export { + _HTMLElement as HTMLElement, + _HTMLAnchorElement as HTMLAnchorElement, + _HTMLAreaElement as HTMLAreaElement, + _HTMLAudioElement as HTMLAudioElement, + _HTMLBaseElement as HTMLBaseElement, + _HTMLQuoteElement as HTMLQuoteElement, + _HTMLBodyElement as HTMLBodyElement, + _HTMLBRElement as HTMLBRElement, + _HTMLButtonElement as HTMLButtonElement, + _HTMLCanvasElement as HTMLCanvasElement, + _HTMLTableCaptionElement as HTMLTableCaptionElement, + _HTMLTableColElement as HTMLTableColElement, + _HTMLDataElement as HTMLDataElement, + _HTMLDataListElement as HTMLDataListElement, + _HTMLModElement as HTMLModElement, + _HTMLDetailsElement as HTMLDetailsElement, + _HTMLDialogElement as HTMLDialogElement, + _HTMLDirectoryElement as HTMLDirectoryElement, + _HTMLDivElement as HTMLDivElement, + _HTMLDListElement as HTMLDListElement, + _HTMLEmbedElement as HTMLEmbedElement, + _HTMLFieldSetElement as HTMLFieldSetElement, + _HTMLFontElement as HTMLFontElement, + _HTMLFormElement as HTMLFormElement, + _HTMLFrameElement as HTMLFrameElement, + _HTMLFrameSetElement as HTMLFrameSetElement, + _HTMLHeadingElement as HTMLHeadingElement, + _HTMLHeadElement as HTMLHeadElement, + _HTMLHRElement as HTMLHRElement, + _HTMLIFrameElement as HTMLIFrameElement, + _HTMLImageElement as HTMLImageElement, + _HTMLInputElement as HTMLInputElement, + _HTMLLabelElement as HTMLLabelElement, + _HTMLLegendElement as HTMLLegendElement, + _HTMLLIElement as HTMLLIElement, + _HTMLLinkElement as HTMLLinkElement, + _HTMLMapElement as HTMLMapElement, + _HTMLMarqueeElement as HTMLMarqueeElement, + _HTMLMenuElement as HTMLMenuElement, + _HTMLMetaElement as HTMLMetaElement, + _HTMLMeterElement as HTMLMeterElement, + _HTMLObjectElement as HTMLObjectElement, + _HTMLOListElement as HTMLOListElement, + _HTMLOptGroupElement as HTMLOptGroupElement, + _HTMLOptionElement as HTMLOptionElement, + _HTMLOutputElement as HTMLOutputElement, + _HTMLParagraphElement as HTMLParagraphElement, + _HTMLParamElement as HTMLParamElement, + _HTMLPictureElement as HTMLPictureElement, + _HTMLPreElement as HTMLPreElement, + _HTMLProgressElement as HTMLProgressElement, + _HTMLScriptElement as HTMLScriptElement, + _HTMLSelectElement as HTMLSelectElement, + _HTMLSlotElement as HTMLSlotElement, + _HTMLSourceElement as HTMLSourceElement, + _HTMLSpanElement as HTMLSpanElement, + _HTMLStyleElement as HTMLStyleElement, + _HTMLTableElement as HTMLTableElement, + _HTMLTableSectionElement as HTMLTableSectionElement, + _HTMLTableCellElement as HTMLTableCellElement, + _HTMLTemplateElement as HTMLTemplateElement, + _HTMLTextAreaElement as HTMLTextAreaElement, + _HTMLTimeElement as HTMLTimeElement, + _HTMLTitleElement as HTMLTitleElement, + _HTMLTableRowElement as HTMLTableRowElement, + _HTMLTrackElement as HTMLTrackElement, + _HTMLUListElement as HTMLUListElement, + _HTMLVideoElement as HTMLVideoElement, +}; diff --git a/src/JSX.ts b/src/JSX.ts index 80ff9e44..29341407 100644 --- a/src/JSX.ts +++ b/src/JSX.ts @@ -1,10 +1,8 @@ /* eslint-disable @typescript-eslint/no-namespace, @typescript-eslint/no-empty-interface */ -import { customElements } from '$env'; import htm from 'htm'; import { type HTMLAttributes, type IntrinsicElementAttributes } from './Attributes'; import { isComponentConstructor, type ComponentConstructor } from './Component'; import { type HTMLTagNameMap, type SVGTagNameMap } from './Elements'; -import { isNode } from './helpers'; import { type Observable } from './Observable'; import { type Props } from './property'; import { type Context } from './render'; @@ -261,7 +259,7 @@ export const isVComponent = (target: VObject): target is VComponent => isNode(target.type); +export const isVNode = (target: VObject): target is VElement => target.type instanceof Node; /** * Check if the current virtual node is a slot element. diff --git a/src/directives.ts b/src/directives.ts index 345c7d0f..61e61700 100644 --- a/src/directives.ts +++ b/src/directives.ts @@ -1,4 +1,3 @@ -import { customElements, DOMParser } from '$env'; import { h, type FunctionComponent, type Template } from './JSX'; import { getObservableState, type Observable } from './Observable'; import { getThenableState } from './Thenable'; diff --git a/src/env.browser.ts b/src/env.browser.ts deleted file mode 100644 index 17e72a5d..00000000 --- a/src/env.browser.ts +++ /dev/null @@ -1,14 +0,0 @@ -import './polyfill'; -import '@chialab/quantum'; - -const global = window; - -export { global as window }; -export const document = window.document; -export const customElements = window.customElements; -export const Event = window.Event; -export const CustomEvent = window.CustomEvent; -export const Node = window.Node; -export const Element = window.Element; -export const HTMLElement = window.HTMLElement; -export const DOMParser = window.DOMParser; diff --git a/src/env.node.ts b/src/env.node.ts deleted file mode 100644 index fef87aad..00000000 --- a/src/env.node.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { extend } from '@chialab/quantum'; -import JSDOM from 'jsdom'; - -const jsdom = new JSDOM.JSDOM(undefined, { - url: 'http://localhost/', -}); - -export const window = jsdom.window as unknown as Window & typeof globalThis; -export const document = window.document; -export const customElements = window.customElements; -export const Event = window.Event; -export const CustomEvent = window.CustomEvent; -export const Node = window.Node; -export const Element = window.Element; -export const HTMLElement = window.HTMLElement; -export const DOMParser = window.DOMParser; -extend(window); diff --git a/src/events.ts b/src/events.ts index aa74e8a4..b0a9daf5 100644 --- a/src/events.ts +++ b/src/events.ts @@ -1,14 +1,7 @@ -import { CustomEvent, HTMLElement } from '$env'; import { type ClassElement } from './ClassDescriptor'; import { type ComponentConstructor, type ComponentInstance } from './Component'; -import { - getOwnPropertyDescriptor, - getPrototypeOf, - hasOwnProperty, - isElement, - isEvent, - type Constructor, -} from './helpers'; +import { HTMLElement } from './Elements'; +import { getOwnPropertyDescriptor, getPrototypeOf, hasOwnProperty, type Constructor } from './helpers'; import { type Methods } from './property'; /** @@ -84,6 +77,9 @@ type WithEventDelegations = { }; }; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const isElement = (node: any): node is Element => node && node.nodeType === Node.ELEMENT_NODE; + const assertNode = (element: unknown) => { if (!isElement(element)) { throw new TypeError('The provided element must be a Node'); @@ -91,7 +87,7 @@ const assertNode = (element: unknown) => { }; const assertEvent = (event: unknown) => { - if (!isEvent(event)) { + if (!(event instanceof Event)) { throw new TypeError('The provided object must be an Event'); } }; diff --git a/src/helpers.ts b/src/helpers.ts index aa21c583..5da8579c 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -1,5 +1,3 @@ -import { Event, Node } from '$env'; - /** * Constructor type helper. */ @@ -63,41 +61,6 @@ export const defineProperty = Object.defineProperty; export const createObject = Object.create; /** - * Check if the target is a Node instance. - * @param target The target to check. - * @returns The target is a Node instance. - */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isNode = (target: any): target is Node => target instanceof Node; - -/** - * Check if a node is a Document instance. - * @param node The node to check. - * @returns The node is a Document instance. - */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isDocument = (node: any): node is Document => node && node.nodeType === Node.DOCUMENT_NODE; - -/** - * Check if a node is a Text instance. - * @param node The node to check. - * @returns The node is a Text instance. + * Check if runtime has DOM specs. */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isText = (node: any): node is Text => node && node.nodeType === Node.TEXT_NODE; - -/** - * Check if a node is an Element instance. - * @param node The node to check. - * @returns The node is an Element instance. - */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isElement = (node: any): node is T => node && node.nodeType === Node.ELEMENT_NODE; - -/** - * Check if an object is an Event instance. - * @param event The target to check. - * @returns The object is an Event instance. - */ -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export const isEvent = (event: any): event is Event => event instanceof Event; +export const isBrowser = typeof HTMLElement !== 'undefined'; diff --git a/src/index.ts b/src/index.ts index b43f50f6..1b13fdc2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,5 @@ -export { window, document, customElements, Event, CustomEvent, Node, Element, HTMLElement } from '$env'; +import './polyfill'; + export { h, compile, html, Fragment, jsx, jsxs, jsxDEV } from './JSX'; export { render } from './render'; export { css } from './css'; @@ -14,6 +15,7 @@ export { property, state, observe, getProperty, getProperties, defineProperties, export { define, extend, + builtin, Component, isComponent, isComponentConstructor, diff --git a/src/polyfill.ts b/src/polyfill.ts index c2c1723c..3af95725 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -1,4 +1,6 @@ import type { CustomElement, CustomElementConstructor } from './CustomElement'; +import * as HtmlElements from './Elements'; +import { isBrowser } from './helpers'; /** * Register a polyfill for Customized built-in elements. @@ -9,76 +11,6 @@ function polyfillBuiltin() { const tagNames: Record = {}; const CE_SYMBOL = Symbol(); const nativeCreateElement = document.createElement.bind(document); - const BUILTIN_HTML_CONSTRUCTORS = [ - win.HTMLElement, - win.HTMLAnchorElement, - win.HTMLAreaElement, - win.HTMLAudioElement, - win.HTMLBaseElement, - win.HTMLQuoteElement, - win.HTMLBodyElement, - win.HTMLBRElement, - win.HTMLButtonElement, - win.HTMLCanvasElement, - win.HTMLTableCaptionElement, - win.HTMLTableColElement, - win.HTMLDataElement, - win.HTMLDataListElement, - win.HTMLModElement, - win.HTMLDetailsElement, - win.HTMLDialogElement, - win.HTMLDirectoryElement, - win.HTMLDivElement, - win.HTMLDListElement, - win.HTMLEmbedElement, - win.HTMLFieldSetElement, - win.HTMLFontElement, - win.HTMLFormElement, - win.HTMLFrameElement, - win.HTMLFrameSetElement, - win.HTMLHeadingElement, - win.HTMLHeadElement, - win.HTMLHRElement, - win.HTMLIFrameElement, - win.HTMLImageElement, - win.HTMLInputElement, - win.HTMLLabelElement, - win.HTMLLegendElement, - win.HTMLLIElement, - win.HTMLLinkElement, - win.HTMLMapElement, - win.HTMLMarqueeElement, - win.HTMLMenuElement, - win.HTMLMetaElement, - win.HTMLMeterElement, - win.HTMLObjectElement, - win.HTMLOListElement, - win.HTMLOptGroupElement, - win.HTMLOptionElement, - win.HTMLOutputElement, - win.HTMLParagraphElement, - win.HTMLParamElement, - win.HTMLPictureElement, - win.HTMLPreElement, - win.HTMLProgressElement, - win.HTMLScriptElement, - win.HTMLSelectElement, - win.HTMLSlotElement, - win.HTMLSourceElement, - win.HTMLSpanElement, - win.HTMLStyleElement, - win.HTMLTableElement, - win.HTMLTableSectionElement, - win.HTMLTableCellElement, - win.HTMLTemplateElement, - win.HTMLTextAreaElement, - win.HTMLTimeElement, - win.HTMLTitleElement, - win.HTMLTableRowElement, - win.HTMLTrackElement, - win.HTMLUListElement, - win.HTMLVideoElement, - ]; const customElements = win.customElements; const define = customElements.define.bind(customElements); const upgrade = customElements.upgrade.bind(customElements); @@ -129,7 +61,7 @@ function polyfillBuiltin() { let CurrentConstructor = constructor; let ParentCostructor = Object.getPrototypeOf(CurrentConstructor) as CustomElementConstructor; - while (BUILTIN_HTML_CONSTRUCTORS.indexOf(ParentCostructor) === -1) { + while (ParentCostructor.name in HtmlElements) { CurrentConstructor = ParentCostructor; if (Object.hasOwnProperty.call(CurrentConstructor, '__shim')) { return; @@ -268,6 +200,6 @@ function checkBuiltin() { return document.createElement('br', { is: name }) instanceof Constructor; } -if (!checkBuiltin()) { +if (isBrowser && !checkBuiltin()) { polyfillBuiltin(); } diff --git a/src/property.ts b/src/property.ts index 80f72718..df88d4f3 100644 --- a/src/property.ts +++ b/src/property.ts @@ -1,6 +1,11 @@ -import { HTMLElement } from '$env'; import { type ClassElement } from './ClassDescriptor'; -import { isComponent, type ComponentConstructor, type ComponentInstance, type ComponentMixin } from './Component'; +import { + isComponent, + isComponentConstructor, + type ComponentConstructor, + type ComponentInstance, + type ComponentMixin, +} from './Component'; import { defineProperty as _defineProperty, createObject, @@ -550,7 +555,7 @@ export const defineProperties = (prototype: T) => { const handled: { [key: string]: boolean } = {}; const constructor = prototype.constructor as ComponentConstructor; let ctr = constructor; - while (ctr && ctr !== HTMLElement) { + while (isComponentConstructor(ctr)) { const propertiesDescriptor = getOwnPropertyDescriptor(ctr, 'properties'); if (propertiesDescriptor) { const descriptorProperties = ( diff --git a/src/render.ts b/src/render.ts index a1339ffe..1f3860ac 100644 --- a/src/render.ts +++ b/src/render.ts @@ -1,8 +1,7 @@ import type { Realm } from '@chialab/quantum'; -import { document } from '$env'; import { isComponent, type ComponentConstructor, type ComponentInstance } from './Component'; import { css } from './css'; -import { getPropertyDescriptor, isArray, isNode } from './helpers'; +import { getPropertyDescriptor, isArray } from './helpers'; import { isVComponent, isVFragment, @@ -325,6 +324,7 @@ const renderTemplate = ( return; } + const document = context.node.ownerDocument as Document; const currentChildren = context.children; if (isVObject(template)) { @@ -540,7 +540,7 @@ const renderTemplate = ( } return; } - if (isNode(template)) { + if (template instanceof Node) { insertNode( context, currentChildren.find((child) => child.node === template) || diff --git a/test-node/component.spec.js b/test-node/component.spec.js new file mode 100644 index 00000000..3d7a9f31 --- /dev/null +++ b/test-node/component.spec.js @@ -0,0 +1,45 @@ +import * as DNA from '@chialab/dna'; +import { describe, expect, it } from 'vitest'; + +let count = 0; + +/** + * Create unique custom element name. + * @returns Unique custom element name. + */ +export function getComponentName() { + return `test-element-${count++}`; +} + +describe( + 'Component', + () => { + describe('#new', () => { + it('should create a node', () => { + expect(() => { + const is = getComponentName(); + class TestElement extends DNA.Component {} + DNA.define(is, TestElement); + }).not.toThrow(); + }); + + it('should extend a native node', () => { + expect(() => { + const is = getComponentName(); + class TestElement extends DNA.Component {} + DNA.define(is, TestElement, { + extends: 'article', + }); + }).not.toThrow(); + }); + + it('should create a base class starting from the anchor base class', () => { + expect(() => { + class TestElement extends DNA.builtin.HTMLAnchorElement {} + DNA.define(getComponentName(), TestElement, { extends: 'a' }); + }).not.toThrow(); + }); + }); + }, + 10 * 1000 +); diff --git a/test-node/module.spec.js b/test-node/module.spec.js new file mode 100644 index 00000000..bcc7cb00 --- /dev/null +++ b/test-node/module.spec.js @@ -0,0 +1,61 @@ +import * as DNA from '@chialab/dna'; +import { describe, expect, it } from 'vitest'; + +describe( + 'module', + () => { + const EXPECTED_EXPORT_MAP = { + customElement: 'function', + customElementPrototype: 'function', + define: 'function', + builtin: 'object', + extend: 'function', + render: 'function', + Fragment: 'symbol', + h: 'function', + jsx: 'function', + jsxDEV: 'function', + jsxs: 'function', + compile: 'function', + html: 'function', + css: 'function', + defineListeners: 'function', + delegateEventListener: 'function', + undelegateEventListener: 'function', + dispatchEvent: 'function', + dispatchAsyncEvent: 'function', + defineProperty: 'function', + defineProperties: 'function', + getProperty: 'function', + getProperties: 'function', + property: 'function', + state: 'function', + observe: 'function', + listen: 'function', + isComponent: 'function', + isComponentConstructor: 'function', + Component: 'function', + $parse: 'function', + $await: 'function', + $until: 'function', + $pipe: 'function', + }; + + for (const ref in EXPECTED_EXPORT_MAP) { + it(`should export "${ref}"`, () => { + expect(DNA[ref]).toBeTypeOf(EXPECTED_EXPORT_MAP[ref]); + }); + } + + it('should not export other references', () => { + const actual = Object.keys(DNA).sort(); + // default export may be added by the bundler, ignore it. + if (actual.indexOf('default') !== -1) { + actual.splice(actual.indexOf('default'), 1); + } + const expected = Object.keys(EXPECTED_EXPORT_MAP).sort(); + expect(actual).toStrictEqual(expected); + }); + }, + 10 * 1000 +); diff --git a/test/typings/Component.ts b/test-typings/Component.ts similarity index 100% rename from test/typings/Component.ts rename to test-typings/Component.ts diff --git a/test/typings/Properties.ts b/test-typings/Properties.ts similarity index 100% rename from test/typings/Properties.ts rename to test-typings/Properties.ts diff --git a/test/typings/render.tsx b/test-typings/render.tsx similarity index 100% rename from test/typings/render.tsx rename to test-typings/render.tsx diff --git a/test/typings/tsconfig.json b/test-typings/tsconfig.json similarity index 84% rename from test/typings/tsconfig.json rename to test-typings/tsconfig.json index ef0da046..e180716c 100644 --- a/test/typings/tsconfig.json +++ b/test-typings/tsconfig.json @@ -17,8 +17,7 @@ "baseUrl": ".", "rootDir": "../..", "paths": { - "@chialab/dna": ["../../src/index.ts"], - "$env": ["../../src/env.browser.ts"] + "@chialab/dna": ["../src/index.ts"] } } } diff --git a/test/component.spec.js b/test/component.spec.js index 86edb5f5..d2edc78e 100644 --- a/test/component.spec.js +++ b/test/component.spec.js @@ -9,13 +9,13 @@ describe( () => { let wrapper; beforeEach(() => { - wrapper = DNA.document.createElement('div'); - DNA.document.body.appendChild(wrapper); + wrapper = document.createElement('div'); + document.body.appendChild(wrapper); }); afterEach(() => { if (wrapper.parentNode) { - DNA.document.body.removeChild(wrapper); + document.body.removeChild(wrapper); } }); @@ -26,7 +26,7 @@ describe( DNA.define(is, TestElement); const element = new TestElement(); - expect(element).to.be.an.instanceof(DNA.HTMLElement); + expect(element).toBeInstanceOf(window.HTMLElement); expect(element.is).toBe(is); expect(element.tagName).toBe(is.toUpperCase()); }); @@ -39,19 +39,18 @@ describe( }); const element = new TestElement(); - expect(element).to.be.an.instanceof(DNA.HTMLElement); + expect(element).toBeInstanceOf(window.HTMLElement); expect(element.is).toBe(is); expect(element.tagName).toBe('ARTICLE'); }); it('should create a base class starting from the anchor base class', () => { - const HTMLAnchorElement = DNA.extend(DNA.window.HTMLAnchorElement); - class TestElement extends HTMLAnchorElement {} + class TestElement extends DNA.builtin.HTMLAnchorElement {} DNA.define(getComponentName(), TestElement, { extends: 'a' }); const element = new TestElement(); element.href = 'https://www.webcomponents.org/introduction'; - expect(TestElement).to.not.equal(HTMLAnchorElement); - expect(element).to.be.an.instanceof(HTMLAnchorElement); + expect(TestElement).not.toBe(HTMLAnchorElement); + expect(element).toBeInstanceOf(HTMLAnchorElement); expect('href' in element).toBe(true); }); @@ -82,10 +81,10 @@ describe( TestElement = __decorate([DNA.customElement(getComponentName())], TestElement); const element = new TestElement(); - expect(element).to.have.property('myCustomProp1'); - expect(element).to.have.property('myCustomProp2'); - expect(element).to.have.property('myCustomProp3'); - expect(element).to.not.have.property('myCustomProp4'); + expect(element).toHaveProperty('myCustomProp1'); + expect(element).toHaveProperty('myCustomProp2'); + expect(element).toHaveProperty('myCustomProp3'); + expect(element).not.toHaveProperty('myCustomProp4'); }); it('should setup properties with babel decorator', () => { @@ -137,15 +136,15 @@ describe( ); const element = new TestElement(); - expect(element).to.have.property('myCustomProp1'); - expect(element).to.have.property('myCustomProp2'); - expect(element).to.have.property('myCustomProp3'); - expect(element).to.not.have.property('myCustomProp4'); + expect(element).toHaveProperty('myCustomProp1'); + expect(element).toHaveProperty('myCustomProp2'); + expect(element).toHaveProperty('myCustomProp3'); + expect(element).not.toHaveProperty('myCustomProp4'); }); it('should setup properties for extended elements', () => { const _forceUpdate = vi.fn(); - let TestElement = class TestElement extends DNA.extend(DNA.HTMLElement) { + let TestElement = class TestElement extends DNA.Component { static get properties() { return { myCustomProp1: { @@ -175,10 +174,10 @@ describe( TestElement = __decorate([DNA.customElement(getComponentName(), { extends: 'article' })], TestElement); const element = new TestElement(); - expect(element).to.have.property('myCustomProp1'); - expect(element).to.have.property('myCustomProp2'); - expect(element).to.have.property('myCustomProp3'); - expect(element).to.not.have.property('myCustomProp4'); + expect(element).toHaveProperty('myCustomProp1'); + expect(element).toHaveProperty('myCustomProp2'); + expect(element).toHaveProperty('myCustomProp3'); + expect(element).not.toHaveProperty('myCustomProp4'); expect(_forceUpdate).not.toHaveBeenCalled(); element.myCustomProp1 = 'Hello'; @@ -187,7 +186,7 @@ describe( }); it('should setup properties for extended components (ts over ts)', () => { - let BaseElement = class BaseElement extends DNA.extend(DNA.HTMLElement) { + let BaseElement = class BaseElement extends DNA.Component { static get properties() { return { myCustomProp1: { @@ -227,11 +226,11 @@ describe( TestElement = __decorate([DNA.customElement(getComponentName())], TestElement); const element = new TestElement(); - expect(element).to.have.property('myCustomProp1'); - expect(element).to.have.property('myCustomProp2'); - expect(element).to.have.property('myCustomProp3'); - expect(element).to.have.property('myCustomProp4'); - expect(element).to.not.have.property('myCustomProp5'); + expect(element).toHaveProperty('myCustomProp1'); + expect(element).toHaveProperty('myCustomProp2'); + expect(element).toHaveProperty('myCustomProp3'); + expect(element).toHaveProperty('myCustomProp4'); + expect(element).not.toHaveProperty('myCustomProp5'); expect(_forceUpdate).not.toHaveBeenCalled(); element.myCustomProp1 = 'Hello'; @@ -240,7 +239,7 @@ describe( }); it('should setup properties for extended components (js over ts)', () => { - let BaseElement = class BaseElement extends DNA.extend(DNA.HTMLElement) { + let BaseElement = class BaseElement extends DNA.Component { static get properties() { return { myCustomProp1: { @@ -283,11 +282,11 @@ describe( DNA.define(getComponentName(), TestElement); const element = new TestElement(); - expect(element).to.have.property('myCustomProp1'); - expect(element).to.have.property('myCustomProp2'); - expect(element).to.have.property('myCustomProp3'); - expect(element).to.have.property('myCustomProp4'); - expect(element).to.not.have.property('myCustomProp5'); + expect(element).toHaveProperty('myCustomProp1'); + expect(element).toHaveProperty('myCustomProp2'); + expect(element).toHaveProperty('myCustomProp3'); + expect(element).toHaveProperty('myCustomProp4'); + expect(element).not.toHaveProperty('myCustomProp5'); expect(_forceUpdate).not.toHaveBeenCalled(); element.myCustomProp1 = 'Hello'; @@ -308,7 +307,7 @@ describe( wrapper.innerHTML = `<${is}>`; expect(connected).to.be.false; DNA.define(is, TestElement); - DNA.customElements.upgrade(wrapper); + window.customElements.upgrade(wrapper); expect(connected).toBe(true); }); }); @@ -390,7 +389,7 @@ describe( }); const custom = new TestElement1(); - const child = DNA.document.createElement('div'); + const child = document.createElement('div'); wrapper.appendChild(child); await new Promise((r) => setTimeout(r, 0)); expect(custom.spyConnectedCallback).not.toHaveBeenCalled(); @@ -407,7 +406,7 @@ describe( expect(custom.spyDisconnectedCallback).toHaveBeenCalledOnce(); const builtin = new TestElement2(); - const child2 = DNA.document.createElement('div'); + const child2 = document.createElement('div'); wrapper.appendChild(child2); await new Promise((r) => setTimeout(r, 0)); expect(builtin.spyConnectedCallback).not.toHaveBeenCalled(); @@ -452,7 +451,7 @@ describe( }); const custom = new TestElement1(); - const child = DNA.document.createElement('div'); + const child = document.createElement('div'); wrapper.appendChild(child); await new Promise((r) => setTimeout(r, 0)); expect(custom.spyConnectedCallback).not.toHaveBeenCalled(); @@ -467,7 +466,7 @@ describe( expect(custom.spyDisconnectedCallback).not.toHaveBeenCalled(); const builtin = new TestElement2(); - const child2 = DNA.document.createElement('div'); + const child2 = document.createElement('div'); wrapper.appendChild(child2); await new Promise((r) => setTimeout(r, 0)); expect(builtin.spyConnectedCallback).not.toHaveBeenCalled(); @@ -569,7 +568,7 @@ describe( class TestElement extends DNA.Component {} DNA.define(is, TestElement); - const element = DNA.document.createElement(is); + const element = document.createElement(is); wrapper.appendChild(element); expect(element.isConnected).toBe(true); }); @@ -579,7 +578,7 @@ describe( class TestElement extends DNA.Component {} DNA.define(is, TestElement); - const element = DNA.document.createElement(is); + const element = document.createElement(is); expect(element.isConnected).to.be.false; }); }); @@ -978,7 +977,7 @@ describe( DNA.define(name, TestElement, { extends: 'section', }); - DNA.customElements.upgrade(element); + window.customElements.upgrade(element); await new Promise((r) => setTimeout(r, 0)); expect(propertyChangedCallback).toHaveBeenCalled(); @@ -1377,7 +1376,7 @@ describe( const element = new TestElement(); const realm = element.realm; - const span = DNA.document.createElement('span'); + const span = document.createElement('span'); wrapper.appendChild(element); element.appendChild(span); @@ -1427,7 +1426,7 @@ describe( const element = new TestElement(); const realm = element.realm; - const span = DNA.document.createElement('span'); + const span = document.createElement('span'); wrapper.appendChild(element); element.appendChild(span); @@ -1520,8 +1519,8 @@ describe( const element = new TestElement(); const realm = element.realm; - const span = DNA.document.createElement('span'); - const input = DNA.document.createElement('input'); + const span = document.createElement('span'); + const input = document.createElement('input'); wrapper.appendChild(element); element.appendChild(span); element.insertBefore(input, span); @@ -1614,8 +1613,8 @@ describe( const element = new TestElement(); const realm = element.realm; - const span = DNA.document.createElement('span'); - const input = DNA.document.createElement('input'); + const span = document.createElement('span'); + const input = document.createElement('input'); wrapper.appendChild(element); element.appendChild(span); element.replaceChild(input, span); @@ -1701,8 +1700,8 @@ describe( const element = new TestElement(); const realm = element.realm; - const span = DNA.document.createElement('span'); - const input = DNA.document.createElement('input'); + const span = document.createElement('span'); + const input = document.createElement('input'); wrapper.appendChild(element); element.appendChild(span); element.insertAdjacentElement('afterbegin', input); diff --git a/test/events.spec.js b/test/events.spec.js index 5769e5e4..0c34e09a 100644 --- a/test/events.spec.js +++ b/test/events.spec.js @@ -9,7 +9,7 @@ describe( () => { let wrapper; beforeEach(() => { - wrapper = DNA.document.createElement('div'); + wrapper = document.createElement('div'); wrapper.ownerDocument.body.appendChild(wrapper); }); @@ -39,7 +39,7 @@ describe( it('should dispatch custom events that does bubble', () => { const listener = vi.fn(); const details = {}; - const child = DNA.document.createElement('button'); + const child = document.createElement('button'); wrapper.appendChild(child); wrapper.addEventListener('click', (event) => listener(event.bubbles)); DNA.dispatchEvent(child, 'click', details, true); @@ -51,7 +51,7 @@ describe( const listener = vi.fn(); const details = {}; - const child = DNA.document.createElement('button'); + const child = document.createElement('button'); wrapper.appendChild(child); wrapper.addEventListener('click', (event) => listener(event.cancelable)); DNA.dispatchEvent(child, 'click', details, true, true); @@ -63,7 +63,7 @@ describe( const listener1 = vi.fn(); const listener2 = vi.fn(); - const button = DNA.document.createElement('button'); + const button = document.createElement('button'); wrapper.appendChild(button); wrapper.addEventListener('click', (event) => listener1(event.bubbles)); @@ -79,7 +79,7 @@ describe( const listener = vi.fn(); const details = {}; - const child = DNA.document.createElement('button'); + const child = document.createElement('button'); wrapper.appendChild(child); wrapper.addEventListener('click', (event) => listener(event.cancelable)); DNA.dispatchEvent(child, 'click', details, true, false); @@ -130,7 +130,7 @@ describe( event.preventDefault(); }); - const button = DNA.document.createElement('button'); + const button = document.createElement('button'); wrapper.appendChild(button); DNA.delegateEventListener(wrapper, 'click', 'button', listener); DNA.delegateEventListener(wrapper, 'mouseenter', 'button', listener); @@ -173,8 +173,8 @@ describe( event.preventDefault(); }); - const child = DNA.document.createElement('div'); - const button = DNA.document.createElement('button'); + const child = document.createElement('div'); + const button = document.createElement('button'); wrapper.appendChild(child); child.appendChild(button); DNA.delegateEventListener(child, 'click', 'div', listener1); @@ -204,8 +204,8 @@ describe( event.preventDefault(); }); - const child = DNA.document.createElement('div'); - const button = DNA.document.createElement('button'); + const child = document.createElement('div'); + const button = document.createElement('button'); wrapper.appendChild(child); child.appendChild(button); DNA.delegateEventListener(child, 'click', 'div', listener1); @@ -230,7 +230,7 @@ describe( event.preventDefault(); }); - const button = DNA.document.createElement('button'); + const button = document.createElement('button'); wrapper.appendChild(button); DNA.delegateEventListener(wrapper, 'click', 'button', listener); DNA.delegateEventListener(wrapper, 'click', 'button', listener2); @@ -243,7 +243,7 @@ describe( }); it('should do nothing if there are no delegations', () => { - const button = DNA.document.createElement('button'); + const button = document.createElement('button'); expect(() => { DNA.undelegateEventListener(button, 'click', null, (event) => { event.preventDefault(); @@ -252,7 +252,7 @@ describe( }); it('should do nothing if there are no delegations for an event', () => { - const button = DNA.document.createElement('button'); + const button = document.createElement('button'); DNA.delegateEventListener(button, 'click', null, (event) => { event.preventDefault(); }); @@ -307,13 +307,11 @@ describe( element.click(); expect(callback).toHaveBeenCalled(); expect(callback).toHaveBeenCalledWith('click', is.toUpperCase()); - element.dispatchEvent( - new DNA.CustomEvent('change', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element.dispatchEvent('change', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback).toHaveBeenCalledWith('change', is.toUpperCase()); expect(callback).toHaveBeenCalledTimes(2); }); @@ -394,13 +392,11 @@ describe( expect(callback2).not.toHaveBeenCalled(); expect(callback3).not.toHaveBeenCalled(); element1.querySelector('button').click(); - element1.dispatchEvent( - new DNA.CustomEvent('change', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element1.dispatchEvent('change', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback1).toHaveBeenCalled(); expect(callback2).toHaveBeenCalled(); expect(callback3).toHaveBeenCalled(); @@ -408,13 +404,11 @@ describe( const element2 = new TestElement2(); wrapper.appendChild(element2); element2.querySelector('button').click(); - element2.dispatchEvent( - new DNA.CustomEvent('drop', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element2.dispatchEvent('drop', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback1).toHaveBeenCalledTimes(2); expect(callback2).toHaveBeenCalledOnce(); expect(callback3).toHaveBeenCalledOnce(); @@ -522,13 +516,11 @@ describe( expect(callback2).not.toHaveBeenCalled(); expect(callback3).not.toHaveBeenCalled(); element1.querySelector('button').click(); - element1.dispatchEvent( - new DNA.CustomEvent('change', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element1.dispatchEvent('change', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback1).toHaveBeenCalled(); expect(callback2).toHaveBeenCalled(); expect(callback3).toHaveBeenCalled(); @@ -536,13 +528,11 @@ describe( const element2 = new TestElement2(); wrapper.appendChild(element2); element2.querySelector('button').click(); - element2.dispatchEvent( - new DNA.CustomEvent('drop', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element2.dispatchEvent('drop', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback1).toHaveBeenCalledTimes(2); expect(callback2).toHaveBeenCalledOnce(); expect(callback3).toHaveBeenCalledOnce(); @@ -745,13 +735,11 @@ describe( expect(callback2).not.toHaveBeenCalled(); expect(callback3).not.toHaveBeenCalled(); element1.querySelector('button').click(); - element1.dispatchEvent( - new DNA.CustomEvent('change', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element1.dispatchEvent('change', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback1).toHaveBeenCalled(); expect(callback2).toHaveBeenCalled(); expect(callback3).toHaveBeenCalled(); @@ -759,13 +747,11 @@ describe( const element2 = new TestElement2(); wrapper.appendChild(element2); element2.querySelector('button').click(); - element2.dispatchEvent( - new DNA.CustomEvent('drop', { - bubbles: true, - cancelable: true, - composed: false, - }) - ); + element2.dispatchEvent('drop', { + bubbles: true, + cancelable: true, + composed: false, + }); expect(callback1).toHaveBeenCalledTimes(2); expect(callback2).toHaveBeenCalledOnce(); expect(callback3).toHaveBeenCalledOnce(); @@ -886,7 +872,7 @@ describe( event.preventDefault(); }); - const target = DNA.document.body; + const target = document.body; class TestElement extends DNA.Component { static get listeners() { return { diff --git a/test/module.spec.js b/test/module.spec.js index 3518f7be..bcc7cb00 100644 --- a/test/module.spec.js +++ b/test/module.spec.js @@ -5,18 +5,10 @@ describe( 'module', () => { const EXPECTED_EXPORT_MAP = { - window: 'object', - document: 'object', - customElements: 'object', - Event: 'function', - CustomEvent: 'function', - Node: 'function', - Element: 'function', - HTMLElement: 'function', - customElement: 'function', customElementPrototype: 'function', define: 'function', + builtin: 'object', extend: 'function', render: 'function', Fragment: 'symbol', @@ -51,22 +43,7 @@ describe( for (const ref in EXPECTED_EXPORT_MAP) { it(`should export "${ref}"`, () => { - if ( - [ - 'window', - 'document', - 'customElements', - 'Event', - 'CustomEvent', - 'Node', - 'Element', - 'HTMLElement', - ].indexOf(ref) !== -1 - ) { - expect(DNA).to.have.property(ref); - } else { - expect(DNA[ref]).to.be.a(EXPECTED_EXPORT_MAP[ref]); - } + expect(DNA[ref]).toBeTypeOf(EXPECTED_EXPORT_MAP[ref]); }); } diff --git a/test/property.spec.js b/test/property.spec.js index ed4c7c94..19b12060 100644 --- a/test/property.spec.js +++ b/test/property.spec.js @@ -38,11 +38,11 @@ describe( MyElement = __decorate([DNA.customElement(getComponentName())], MyElement); const elem = new MyElement(); - DNA.document.body.appendChild(elem); + document.body.appendChild(elem); expect(elem.textContent).toBe('42'); elem.testProp = 84; expect(elem.textContent).toBe('84'); - DNA.document.body.removeChild(elem); + document.body.removeChild(elem); }); it('should not update component on a property change if not requested', () => { @@ -61,11 +61,11 @@ describe( MyElement = __decorate([DNA.customElement(getComponentName())], MyElement); const elem = new MyElement(); - DNA.document.body.appendChild(elem); + document.body.appendChild(elem); expect(elem.textContent).toBe('42'); elem.testProp = 84; expect(elem.textContent).toBe('42'); - DNA.document.body.removeChild(elem); + document.body.removeChild(elem); }); it('should define a property with a defaultValue', () => { diff --git a/test/render.spec.js b/test/render.spec.js index 2cb2bc91..7d9c7ce9 100644 --- a/test/render.spec.js +++ b/test/render.spec.js @@ -7,12 +7,12 @@ describe( () => { let wrapper; beforeEach(() => { - wrapper = DNA.document.createElement('div'); - DNA.document.body.appendChild(wrapper); + wrapper = document.createElement('div'); + document.body.appendChild(wrapper); }); afterEach(() => { - DNA.document.body.removeChild(wrapper); + document.body.removeChild(wrapper); }); describe('render', () => { @@ -59,15 +59,15 @@ describe( }); it('should render a text node', () => { - expect(DNA.render(DNA.document.createTextNode('Hello')).textContent).toBe('Hello'); + expect(DNA.render(document.createTextNode('Hello')).textContent).toBe('Hello'); }); it('should render an element node', () => { - expect(DNA.render(DNA.document.createElement('div')).tagName).toBe('DIV'); + expect(DNA.render(document.createElement('div')).tagName).toBe('DIV'); }); it('should render an element node using the `ref` property', () => { - const div = DNA.document.createElement('div'); + const div = document.createElement('div'); div.setAttribute('class', 'test'); div.innerHTML = 'test'; DNA.render(DNA.html`
    `); @@ -79,7 +79,7 @@ describe( }); it('should render an element node using the `h` helper', () => { - const div = DNA.document.createElement('div'); + const div = document.createElement('div'); div.setAttribute('class', 'test'); div.innerHTML = 'test'; DNA.render(DNA.html`
    <${div} id="test" />
    `); @@ -139,8 +139,8 @@ describe( 'world', true, DNA.h('ul', { class: 'list' }, DNA.h('li', null, 'One'), DNA.h('li', null, 'Two')), - DNA.document.createTextNode('Hello'), - DNA.document.createElement('div'), + document.createTextNode('Hello'), + document.createElement('div'), ], wrapper ); @@ -154,8 +154,8 @@ describe( 'world', true, DNA.h('ul', { class: 'list' }, DNA.h('li', null, 'One'), DNA.h('li', null, 'Two')), - DNA.document.createTextNode('Hello'), - DNA.document.createElement('div'), + document.createTextNode('Hello'), + document.createElement('div'), ]; }; @@ -434,21 +434,21 @@ describe( DNA.render(DNA.h('div', { style: 'color: red;' }), wrapper); const elem = wrapper.children[0]; elem.style.fontFamily = 'sans-serif'; - expect(DNA.window.getComputedStyle(elem).color).to.be.oneOf(['rgb(255, 0, 0)', 'red']); - expect(DNA.window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); + expect(window.getComputedStyle(elem).color).to.be.oneOf(['rgb(255, 0, 0)', 'red']); + expect(window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); DNA.render(DNA.h('div', { style: { backgroundColor: 'blue' } }), wrapper); - expect(DNA.window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); - expect(DNA.window.getComputedStyle(elem).backgroundColor).to.be.oneOf(['rgb(0, 0, 255)', 'blue']); - expect(DNA.window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); + expect(window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); + expect(window.getComputedStyle(elem).backgroundColor).to.be.oneOf(['rgb(0, 0, 255)', 'blue']); + expect(window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); DNA.render(DNA.h('div', { style: 'font-weight: bold;' }), wrapper); - expect(DNA.window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); - expect(DNA.window.getComputedStyle(elem).backgroundColor).to.be.oneOf([ + expect(window.getComputedStyle(elem).color).to.be.oneOf(['rgb(0, 0, 0)', '']); + expect(window.getComputedStyle(elem).backgroundColor).to.be.oneOf([ 'rgba(0, 0, 0, 0)', '', 'transparent', ]); - expect(DNA.window.getComputedStyle(elem).fontWeight).to.be.oneOf(['700', 'bold']); - expect(DNA.window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); + expect(window.getComputedStyle(elem).fontWeight).to.be.oneOf(['700', 'bold']); + expect(window.getComputedStyle(elem).fontFamily).to.be.oneOf(['sans-serif']); }); it('should render svgs', () => { @@ -515,7 +515,7 @@ describe( DNA.render(DNA.h('div'), wrapper); const elem = wrapper.children[0]; expect(elem.childNodes).toHaveLength(0); - elem.appendChild(DNA.document.createElement('span')); + elem.appendChild(document.createElement('span')); expect(elem.childNodes).toHaveLength(1); DNA.render(DNA.h('div'), wrapper); expect(elem.childNodes).toHaveLength(1); @@ -683,10 +683,10 @@ describe( DNA.define(name1, Parent); DNA.define(name2, Child); - const parent = DNA.document.createElement(name1); + const parent = document.createElement(name1); - const child = DNA.document.createElement(name2); - child.appendChild(DNA.document.createTextNode('Hello')); + const child = document.createElement(name2); + child.appendChild(document.createTextNode('Hello')); parent.insertBefore(child, null); wrapper.appendChild(parent); diff --git a/test/template.spec.js b/test/template.spec.js index f2ff5cd3..63ee96be 100644 --- a/test/template.spec.js +++ b/test/template.spec.js @@ -10,12 +10,12 @@ describe( () => { let wrapper; beforeEach(() => { - wrapper = DNA.document.createElement('div'); - DNA.document.body.appendChild(wrapper); + wrapper = document.createElement('div'); + document.body.appendChild(wrapper); }); afterEach(() => { - DNA.document.body.removeChild(wrapper); + document.body.removeChild(wrapper); }); describe('simple', () => { @@ -215,7 +215,7 @@ describe( for (const type in TEMPLATES) { it(type, async () => { const rootName = getComponentName(); - class MyElement extends DNA.extend(DNA.window.HTMLDivElement) { + class MyElement extends DNA.builtin.HTMLDivElement { render() { return TEMPLATES[type](); } @@ -380,7 +380,7 @@ describe( ); DNA.define(`${name}-${type.toLowerCase()}`, MyElement); - DNA.customElements.upgrade(element); + window.customElements.upgrade(element); const realm = element.realm; @@ -453,7 +453,7 @@ describe( ); DNA.define(`${name}-${type.toLowerCase()}`, MyElement); - DNA.customElements.upgrade(element); + window.customElements.upgrade(element); const realm = element.realm; realm.dangerouslyOpen(); diff --git a/tsconfig.json b/tsconfig.json index 4ca7235c..2a99f542 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,8 +24,7 @@ "isolatedModules": true, "moduleResolution": "node", "paths": { - "@chialab/dna": ["./src/index.ts"], - "$env": ["./src/env.browser.ts"] + "@chialab/dna": ["./src/index.ts"] } }, "include": ["src"] diff --git a/vitest.browser.ts b/vitest.browser.ts index f944bfd7..10e77b4a 100644 --- a/vitest.browser.ts +++ b/vitest.browser.ts @@ -4,11 +4,6 @@ import vitestConfig from './vitest.config'; export default mergeConfig( vitestConfig, defineConfig({ - resolve: { - alias: { - $env: './src/env.browser.ts', - }, - }, test: { coverage: { provider: 'istanbul', diff --git a/vitest.node.ts b/vitest.node.ts index 9ad360c2..770693d9 100644 --- a/vitest.node.ts +++ b/vitest.node.ts @@ -4,13 +4,9 @@ import vitestConfig from './vitest.config'; export default mergeConfig( vitestConfig, defineConfig({ - resolve: { - alias: { - $env: './src/env.node.ts', - }, - }, test: { environment: 'node', + dir: './test-node', }, }) ); diff --git a/vitest.saucelabs.ts b/vitest.saucelabs.ts index d4b0f005..43878494 100644 --- a/vitest.saucelabs.ts +++ b/vitest.saucelabs.ts @@ -5,11 +5,6 @@ import './test/providers/vitest-saucelabs-provider.d'; export default mergeConfig( vitestConfig, defineConfig({ - resolve: { - alias: { - $env: './src/env.browser.ts', - }, - }, test: { coverage: { provider: 'istanbul', diff --git a/yarn.lock b/yarn.lock index 5b8bbdc5..cacebc57 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1675,11 +1675,6 @@ dependencies: defer-to-connect "^2.0.1" -"@tootallnate/once@2": - version "2.0.0" - resolved "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" - integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== - "@tootallnate/quickjs-emscripten@^0.23.0": version "0.23.0" resolved "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz#db4ecfd499a9765ab24002c3b696d02e6d32a12c" @@ -1729,15 +1724,6 @@ resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#fdfdd69fa16d530047d9963635bd77c71a08c068" integrity sha512-zONci81DZYCZjiLe0r6equvZut0b+dBRPBN5kBDjsONnutYNtJMoWQ9uR2RkL1gLG9NMTzvf+29e5RFfPbeKhQ== -"@types/jsdom@^21.1.3": - version "21.1.4" - resolved "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.4.tgz#82105c8fb5a1072265dde1a180336ca74a8fbabf" - integrity sha512-NzAMLEV0KQ4cBaDx3Ls8VfJUElyDUm1xrtYRmcMK0gF8L5xYbujFVaQlJ50yinQ/d47j2rEP1XUzkiYrw4YRFA== - dependencies: - "@types/node" "*" - "@types/tough-cookie" "*" - parse5 "^7.0.0" - "@types/json-schema@^7.0.9": version "7.0.14" resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.14.tgz#74a97a5573980802f32c8e47b663530ab3b6b7d1" @@ -1796,11 +1782,6 @@ resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.3.tgz#9a726e116beb26c24f1ccd6850201e1246122e04" integrity sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw== -"@types/tough-cookie@*": - version "4.0.3" - resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90" - integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg== - "@types/which@^2.0.1": version "2.0.2" resolved "https://registry.npmjs.org/@types/which/-/which-2.0.2.tgz#54541d02d6b1daee5ec01ac0d1b37cecf37db1ae" @@ -2050,11 +2031,6 @@ split2 "^4.2.0" wait-port "^1.0.4" -abab@^2.0.6: - version "2.0.6" - resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291" - integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA== - acorn-jsx@^5.3.2: version "5.3.2" resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937" @@ -2070,13 +2046,6 @@ acorn@^8.10.0, acorn@^8.9.0: resolved "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5" integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw== -agent-base@6: - version "6.0.2" - resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77" - integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ== - dependencies: - debug "4" - agent-base@^7.0.2, agent-base@^7.1.0: version "7.1.0" resolved "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz#536802b76bc0b34aa50195eb2442276d613e3434" @@ -2810,13 +2779,6 @@ css-value@^0.0.1: resolved "https://registry.npmjs.org/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea" integrity sha512-FUV3xaJ63buRLgHrLQVlVgQnQdR4yqdLGaDu7g8CQcWjInDfM9plBTPI9FRfpahju1UBSaMckeb2/46ApS/V1Q== -cssstyle@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a" - integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg== - dependencies: - rrweb-cssom "^0.6.0" - csv-generate@^3.4.3: version "3.4.3" resolved "https://registry.npmjs.org/csv-generate/-/csv-generate-3.4.3.tgz#bc42d943b45aea52afa896874291da4b9108ffff" @@ -2857,15 +2819,6 @@ data-uri-to-buffer@^6.0.0: resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.1.tgz#540bd4c8753a25ee129035aebdedf63b078703c7" integrity sha512-MZd3VlchQkp8rdend6vrx7MmVDJzSNTBvghvKjirLkD+WTChA3KUf0jkE68Q4UyctNqI11zZO9/x2Yx+ub5Cvg== -data-urls@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4" - integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g== - dependencies: - abab "^2.0.6" - whatwg-mimetype "^3.0.0" - whatwg-url "^12.0.0" - debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: version "4.3.4" resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" @@ -2898,11 +2851,6 @@ decamelize@^6.0.0: resolved "https://registry.npmjs.org/decamelize/-/decamelize-6.0.0.tgz#8cad4d916fde5c41a264a43d0ecc56fe3d31749e" integrity sha512-Fv96DCsdOgB6mdGl67MT5JaTNKRzrzill5OH5s8bjYJXVlcXyPYGyPsUkWyGV5p1TXI5esYIYMMeDJL0hEIwaA== -decimal.js@^10.4.3: - version "10.4.3" - resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23" - integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA== - decode-uri-component@^0.2.2: version "0.2.2" resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9" @@ -3031,13 +2979,6 @@ dom5@^3.0.1: clone "^2.1.0" parse5 "^4.0.0" -domexception@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673" - integrity sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw== - dependencies: - webidl-conversions "^7.0.0" - dot-case@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751" @@ -4138,13 +4079,6 @@ htm@^3.0.3: resolved "https://registry.npmjs.org/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78" integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ== -html-encoding-sniffer@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9" - integrity sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA== - dependencies: - whatwg-encoding "^2.0.0" - html-escaper@^2.0.0: version "2.0.2" resolved "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" @@ -4155,15 +4089,6 @@ http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.1: resolved "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a" integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ== -http-proxy-agent@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43" - integrity sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w== - dependencies: - "@tootallnate/once" "2" - agent-base "6" - debug "4" - http-proxy-agent@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz#e9096c5afd071a3fce56e6252bb321583c124673" @@ -4188,14 +4113,6 @@ http2-wrapper@^2.1.10: quick-lru "^5.1.1" resolve-alpn "^1.2.0" -https-proxy-agent@^5.0.1: - version "5.0.1" - resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6" - integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA== - dependencies: - agent-base "6" - debug "4" - https-proxy-agent@^7.0.0, https-proxy-agent@^7.0.1, https-proxy-agent@^7.0.2: version "7.0.2" resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.2.tgz#e2645b846b90e96c6e6f347fb5b2e41f1590b09b" @@ -4209,13 +4126,6 @@ human-id@^1.0.2: resolved "https://registry.npmjs.org/human-id/-/human-id-1.0.2.tgz#e654d4b2b0d8b07e45da9f6020d8af17ec0a5df3" integrity sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw== -iconv-lite@0.6.3: - version "0.6.3" - resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" - integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw== - dependencies: - safer-buffer ">= 2.1.2 < 3.0.0" - iconv-lite@^0.4.24: version "0.4.24" resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" @@ -4406,11 +4316,6 @@ is-plain-obj@^4.1.0: resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0" integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg== -is-potential-custom-element-name@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5" - integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ== - is-regex@^1.1.4: version "1.1.4" resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958" @@ -4562,35 +4467,6 @@ jsdoc-type-pratt-parser@~3.1.0: resolved "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-3.1.0.tgz#a4a56bdc6e82e5865ffd9febc5b1a227ff28e67e" integrity sha512-MgtD0ZiCDk9B+eI73BextfRrVQl0oyzRG8B2BjORts6jbunj4ScKPcyXGTbB6eXL4y9TzxCm6hyeLq/2ASzNdw== -jsdom@^22.1.0: - version "22.1.0" - resolved "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz#0fca6d1a37fbeb7f4aac93d1090d782c56b611c8" - integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw== - dependencies: - abab "^2.0.6" - cssstyle "^3.0.0" - data-urls "^4.0.0" - decimal.js "^10.4.3" - domexception "^4.0.0" - form-data "^4.0.0" - html-encoding-sniffer "^3.0.0" - http-proxy-agent "^5.0.0" - https-proxy-agent "^5.0.1" - is-potential-custom-element-name "^1.0.1" - nwsapi "^2.2.4" - parse5 "^7.1.2" - rrweb-cssom "^0.6.0" - saxes "^6.0.0" - symbol-tree "^3.2.4" - tough-cookie "^4.1.2" - w3c-xmlserializer "^4.0.0" - webidl-conversions "^7.0.0" - whatwg-encoding "^2.0.0" - whatwg-mimetype "^3.0.0" - whatwg-url "^12.0.1" - ws "^8.13.0" - xml-name-validator "^4.0.0" - jsesc@^2.5.1: version "2.5.2" resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" @@ -5180,11 +5056,6 @@ npm-packlist@^5.1.3: npm-bundled "^2.0.0" npm-normalize-package-bin "^2.0.0" -nwsapi@^2.2.4: - version "2.2.7" - resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30" - integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ== - object-inspect@^1.12.3, object-inspect@^1.9.0: version "1.13.0" resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.0.tgz#42695d3879e1cd5bda6df5062164d80c996e23e2" @@ -5416,7 +5287,7 @@ parse5@^6.0.1: resolved "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b" integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw== -parse5@^7.0.0, parse5@^7.1.2: +parse5@^7.1.2: version "7.1.2" resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32" integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw== @@ -5628,11 +5499,6 @@ pseudomap@^1.0.2: resolved "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ== -psl@^1.1.33: - version "1.9.0" - resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7" - integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag== - publint@^0.2.3: version "0.2.4" resolved "https://registry.npmjs.org/publint/-/publint-0.2.4.tgz#1218278e24355cd1000e4becdee499ef03771fbf" @@ -5650,7 +5516,7 @@ pump@^3.0.0: end-of-stream "^1.1.0" once "^1.3.1" -punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0: +punycode@^2.1.0: version "2.3.0" resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f" integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA== @@ -5682,11 +5548,6 @@ query-string@^7.1.3: split-on-first "^1.0.0" strict-uri-encode "^2.0.0" -querystringify@^2.1.1: - version "2.2.0" - resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" - integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== - queue-microtask@^1.2.2: version "1.2.3" resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" @@ -5869,11 +5730,6 @@ requireindex@^1.2.0, requireindex@~1.2.0: resolved "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef" integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww== -requires-port@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" - integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== - resolve-alpn@^1.0.0, resolve-alpn@^1.2.0: version "1.2.1" resolved "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9" @@ -5962,11 +5818,6 @@ rollup@^3.27.1: optionalDependencies: fsevents "~2.3.2" -rrweb-cssom@^0.6.0: - version "0.6.0" - resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1" - integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw== - run-parallel@^1.1.9: version "1.2.0" resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee" @@ -6022,7 +5873,7 @@ safe-regex-test@^1.0.0: get-intrinsic "^1.1.3" is-regex "^1.1.4" -"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0": +"safer-buffer@>= 2.1.2 < 3": version "2.1.2" resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== @@ -6041,13 +5892,6 @@ saucelabs@^7.4.0: tunnel "^0.0.6" yargs "^17.2.1" -saxes@^6.0.0: - version "6.0.0" - resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5" - integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA== - dependencies: - xmlchars "^2.2.0" - "semver@2 || 3 || 4 || 5": version "5.7.2" resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" @@ -6414,11 +6258,6 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== -symbol-tree@^3.2.4: - version "3.2.4" - resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" - integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== - tapable@^2.2.0: version "2.2.1" resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0" @@ -6523,23 +6362,6 @@ totalist@^3.0.0: resolved "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8" integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ== -tough-cookie@^4.1.2: - version "4.1.3" - resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf" - integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw== - dependencies: - psl "^1.1.33" - punycode "^2.1.1" - universalify "^0.2.0" - url-parse "^1.5.3" - -tr46@^4.1.1: - version "4.1.1" - resolved "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469" - integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw== - dependencies: - punycode "^2.3.0" - tr46@~0.0.3: version "0.0.3" resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" @@ -6752,11 +6574,6 @@ universalify@^0.1.0: resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== -universalify@^0.2.0: - version "0.2.0" - resolved "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0" - integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg== - unzipper@^0.10.14: version "0.10.14" resolved "https://registry.npmjs.org/unzipper/-/unzipper-0.10.14.tgz#d2b33c977714da0fbc0f82774ad35470a7c962b1" @@ -6802,14 +6619,6 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -url-parse@^1.5.3: - version "1.5.10" - resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1" - integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ== - dependencies: - querystringify "^2.1.1" - requires-port "^1.0.0" - userhome@1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/userhome/-/userhome-1.0.0.tgz#b6491ff12d21a5e72671df9ccc8717e1c6688c0b" @@ -6890,13 +6699,6 @@ vitest@^0.34.6: vite-node "0.34.6" why-is-node-running "^2.2.2" -w3c-xmlserializer@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073" - integrity sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw== - dependencies: - xml-name-validator "^4.0.0" - wait-port@^1.0.4: version "1.1.0" resolved "https://registry.npmjs.org/wait-port/-/wait-port-1.1.0.tgz#e5d64ee071118d985e2b658ae7ad32b2ce29b6b5" @@ -6970,31 +6772,6 @@ webidl-conversions@^3.0.0: resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== -webidl-conversions@^7.0.0: - version "7.0.0" - resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a" - integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g== - -whatwg-encoding@^2.0.0: - version "2.0.0" - resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz#e7635f597fd87020858626805a2729fa7698ac53" - integrity sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg== - dependencies: - iconv-lite "0.6.3" - -whatwg-mimetype@^3.0.0: - version "3.0.0" - resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7" - integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q== - -whatwg-url@^12.0.0, whatwg-url@^12.0.1: - version "12.0.1" - resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz#fd7bcc71192e7c3a2a97b9a8d6b094853ed8773c" - integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ== - dependencies: - tr46 "^4.1.1" - webidl-conversions "^7.0.0" - whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" @@ -7104,21 +6881,11 @@ ws@8.13.0: resolved "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0" integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA== -ws@^8.13.0, ws@^8.8.0: +ws@^8.8.0: version "8.14.2" resolved "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f" integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g== -xml-name-validator@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835" - integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw== - -xmlchars@^2.2.0: - version "2.2.0" - resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" - integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== - xtend@^4.0.0: version "4.0.2" resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" From b349b35e9b5a1be98920db19f9529601e6087bca Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Thu, 2 Nov 2023 16:06:40 +0100 Subject: [PATCH 29/44] Fix builtin elements access --- src/Elements.ts | 139 ++++++++++++++++++++++++------------------------ 1 file changed, 70 insertions(+), 69 deletions(-) diff --git a/src/Elements.ts b/src/Elements.ts index 331f3209..e46ef450 100644 --- a/src/Elements.ts +++ b/src/Elements.ts @@ -185,75 +185,76 @@ export interface SVGTagNameMap { view: SVGViewElement; } -const Element = class {}; -const _HTMLElement = (isBrowser ? HTMLElement : Element) as typeof HTMLElement; -const _HTMLAnchorElement = (isBrowser ? HTMLAnchorElement : Element) as typeof HTMLAnchorElement; -const _HTMLAreaElement = (isBrowser ? HTMLAreaElement : Element) as typeof HTMLAreaElement; -const _HTMLAudioElement = (isBrowser ? HTMLAudioElement : Element) as typeof HTMLAudioElement; -const _HTMLBaseElement = (isBrowser ? HTMLBaseElement : Element) as typeof HTMLBaseElement; -const _HTMLQuoteElement = (isBrowser ? HTMLQuoteElement : Element) as typeof HTMLQuoteElement; -const _HTMLBodyElement = (isBrowser ? HTMLBodyElement : Element) as typeof HTMLBodyElement; -const _HTMLBRElement = (isBrowser ? HTMLBRElement : Element) as typeof HTMLBRElement; -const _HTMLButtonElement = (isBrowser ? HTMLButtonElement : Element) as typeof HTMLButtonElement; -const _HTMLCanvasElement = (isBrowser ? HTMLCanvasElement : Element) as typeof HTMLCanvasElement; -const _HTMLTableCaptionElement = (isBrowser ? HTMLTableCaptionElement : Element) as typeof HTMLTableCaptionElement; -const _HTMLTableColElement = (isBrowser ? HTMLTableColElement : Element) as typeof HTMLTableColElement; -const _HTMLDataElement = (isBrowser ? HTMLDataElement : Element) as typeof HTMLDataElement; -const _HTMLDataListElement = (isBrowser ? HTMLDataListElement : Element) as typeof HTMLDataListElement; -const _HTMLModElement = (isBrowser ? HTMLModElement : Element) as typeof HTMLModElement; -const _HTMLDetailsElement = (isBrowser ? HTMLDetailsElement : Element) as typeof HTMLDetailsElement; -const _HTMLDialogElement = (isBrowser ? HTMLDialogElement : Element) as typeof HTMLDialogElement; -const _HTMLDirectoryElement = (isBrowser ? HTMLDirectoryElement : Element) as typeof HTMLDirectoryElement; -const _HTMLDivElement = (isBrowser ? HTMLDivElement : Element) as typeof HTMLDivElement; -const _HTMLDListElement = (isBrowser ? HTMLDListElement : Element) as typeof HTMLDListElement; -const _HTMLEmbedElement = (isBrowser ? HTMLEmbedElement : Element) as typeof HTMLEmbedElement; -const _HTMLFieldSetElement = (isBrowser ? HTMLFieldSetElement : Element) as typeof HTMLFieldSetElement; -const _HTMLFontElement = (isBrowser ? HTMLFontElement : Element) as typeof HTMLFontElement; -const _HTMLFormElement = (isBrowser ? HTMLFormElement : Element) as typeof HTMLFormElement; -const _HTMLFrameElement = (isBrowser ? HTMLFrameElement : Element) as typeof HTMLFrameElement; -const _HTMLFrameSetElement = (isBrowser ? HTMLFrameSetElement : Element) as typeof HTMLFrameSetElement; -const _HTMLHeadingElement = (isBrowser ? HTMLHeadingElement : Element) as typeof HTMLHeadingElement; -const _HTMLHeadElement = (isBrowser ? HTMLHeadElement : Element) as typeof HTMLHeadElement; -const _HTMLHRElement = (isBrowser ? HTMLHRElement : Element) as typeof HTMLHRElement; -const _HTMLIFrameElement = (isBrowser ? HTMLIFrameElement : Element) as typeof HTMLIFrameElement; -const _HTMLImageElement = (isBrowser ? HTMLImageElement : Element) as typeof HTMLImageElement; -const _HTMLInputElement = (isBrowser ? HTMLInputElement : Element) as typeof HTMLInputElement; -const _HTMLLabelElement = (isBrowser ? HTMLLabelElement : Element) as typeof HTMLLabelElement; -const _HTMLLegendElement = (isBrowser ? HTMLLegendElement : Element) as typeof HTMLLegendElement; -const _HTMLLIElement = (isBrowser ? HTMLLIElement : Element) as typeof HTMLLIElement; -const _HTMLLinkElement = (isBrowser ? HTMLLinkElement : Element) as typeof HTMLLinkElement; -const _HTMLMapElement = (isBrowser ? HTMLMapElement : Element) as typeof HTMLMapElement; -const _HTMLMarqueeElement = (isBrowser ? HTMLMarqueeElement : Element) as typeof HTMLMarqueeElement; -const _HTMLMenuElement = (isBrowser ? HTMLMenuElement : Element) as typeof HTMLMenuElement; -const _HTMLMetaElement = (isBrowser ? HTMLMetaElement : Element) as typeof HTMLMetaElement; -const _HTMLMeterElement = (isBrowser ? HTMLMeterElement : Element) as typeof HTMLMeterElement; -const _HTMLObjectElement = (isBrowser ? HTMLObjectElement : Element) as typeof HTMLObjectElement; -const _HTMLOListElement = (isBrowser ? HTMLOListElement : Element) as typeof HTMLOListElement; -const _HTMLOptGroupElement = (isBrowser ? HTMLOptGroupElement : Element) as typeof HTMLOptGroupElement; -const _HTMLOptionElement = (isBrowser ? HTMLOptionElement : Element) as typeof HTMLOptionElement; -const _HTMLOutputElement = (isBrowser ? HTMLOutputElement : Element) as typeof HTMLOutputElement; -const _HTMLParagraphElement = (isBrowser ? HTMLParagraphElement : Element) as typeof HTMLParagraphElement; -const _HTMLParamElement = (isBrowser ? HTMLParamElement : Element) as typeof HTMLParamElement; -const _HTMLPictureElement = (isBrowser ? HTMLPictureElement : Element) as typeof HTMLPictureElement; -const _HTMLPreElement = (isBrowser ? HTMLPreElement : Element) as typeof HTMLPreElement; -const _HTMLProgressElement = (isBrowser ? HTMLProgressElement : Element) as typeof HTMLProgressElement; -const _HTMLScriptElement = (isBrowser ? HTMLScriptElement : Element) as typeof HTMLScriptElement; -const _HTMLSelectElement = (isBrowser ? HTMLSelectElement : Element) as typeof HTMLSelectElement; -const _HTMLSlotElement = (isBrowser ? HTMLSlotElement : Element) as typeof HTMLSlotElement; -const _HTMLSourceElement = (isBrowser ? HTMLSourceElement : Element) as typeof HTMLSourceElement; -const _HTMLSpanElement = (isBrowser ? HTMLSpanElement : Element) as typeof HTMLSpanElement; -const _HTMLStyleElement = (isBrowser ? HTMLStyleElement : Element) as typeof HTMLStyleElement; -const _HTMLTableElement = (isBrowser ? HTMLTableElement : Element) as typeof HTMLTableElement; -const _HTMLTableSectionElement = (isBrowser ? HTMLTableSectionElement : Element) as typeof HTMLTableSectionElement; -const _HTMLTableCellElement = (isBrowser ? HTMLTableCellElement : Element) as typeof HTMLTableCellElement; -const _HTMLTemplateElement = (isBrowser ? HTMLTemplateElement : Element) as typeof HTMLTemplateElement; -const _HTMLTextAreaElement = (isBrowser ? HTMLTextAreaElement : Element) as typeof HTMLTextAreaElement; -const _HTMLTimeElement = (isBrowser ? HTMLTimeElement : Element) as typeof HTMLTimeElement; -const _HTMLTitleElement = (isBrowser ? HTMLTitleElement : Element) as typeof HTMLTitleElement; -const _HTMLTableRowElement = (isBrowser ? HTMLTableRowElement : Element) as typeof HTMLTableRowElement; -const _HTMLTrackElement = (isBrowser ? HTMLTrackElement : Element) as typeof HTMLTrackElement; -const _HTMLUListElement = (isBrowser ? HTMLUListElement : Element) as typeof HTMLUListElement; -const _HTMLVideoElement = (isBrowser ? HTMLVideoElement : Element) as typeof HTMLVideoElement; +const ns = (isBrowser ? window : {}) as unknown as typeof window; +const FallbackElement = class FallbackElement {}; +const _HTMLElement = (ns.HTMLElement ?? FallbackElement) as typeof HTMLElement; +const _HTMLAnchorElement = (ns.HTMLAnchorElement ?? FallbackElement) as typeof HTMLAnchorElement; +const _HTMLAreaElement = (ns.HTMLAreaElement ?? FallbackElement) as typeof HTMLAreaElement; +const _HTMLAudioElement = (ns.HTMLAudioElement ?? FallbackElement) as typeof HTMLAudioElement; +const _HTMLBaseElement = (ns.HTMLBaseElement ?? FallbackElement) as typeof HTMLBaseElement; +const _HTMLQuoteElement = (ns.HTMLQuoteElement ?? FallbackElement) as typeof HTMLQuoteElement; +const _HTMLBodyElement = (ns.HTMLBodyElement ?? FallbackElement) as typeof HTMLBodyElement; +const _HTMLBRElement = (ns.HTMLBRElement ?? FallbackElement) as typeof HTMLBRElement; +const _HTMLButtonElement = (ns.HTMLButtonElement ?? FallbackElement) as typeof HTMLButtonElement; +const _HTMLCanvasElement = (ns.HTMLCanvasElement ?? FallbackElement) as typeof HTMLCanvasElement; +const _HTMLTableCaptionElement = (ns.HTMLTableCaptionElement ?? FallbackElement) as typeof HTMLTableCaptionElement; +const _HTMLTableColElement = (ns.HTMLTableColElement ?? FallbackElement) as typeof HTMLTableColElement; +const _HTMLDataElement = (ns.HTMLDataElement ?? FallbackElement) as typeof HTMLDataElement; +const _HTMLDataListElement = (ns.HTMLDataListElement ?? FallbackElement) as typeof HTMLDataListElement; +const _HTMLModElement = (ns.HTMLModElement ?? FallbackElement) as typeof HTMLModElement; +const _HTMLDetailsElement = (ns.HTMLDetailsElement ?? FallbackElement) as typeof HTMLDetailsElement; +const _HTMLDialogElement = (ns.HTMLDialogElement ?? FallbackElement) as typeof HTMLDialogElement; +const _HTMLDirectoryElement = (ns.HTMLDirectoryElement ?? FallbackElement) as typeof HTMLDirectoryElement; +const _HTMLDivElement = (ns.HTMLDivElement ?? FallbackElement) as typeof HTMLDivElement; +const _HTMLDListElement = (ns.HTMLDListElement ?? FallbackElement) as typeof HTMLDListElement; +const _HTMLEmbedElement = (ns.HTMLEmbedElement ?? FallbackElement) as typeof HTMLEmbedElement; +const _HTMLFieldSetElement = (ns.HTMLFieldSetElement ?? FallbackElement) as typeof HTMLFieldSetElement; +const _HTMLFontElement = (ns.HTMLFontElement ?? FallbackElement) as typeof HTMLFontElement; +const _HTMLFormElement = (ns.HTMLFormElement ?? FallbackElement) as typeof HTMLFormElement; +const _HTMLFrameElement = (ns.HTMLFrameElement ?? FallbackElement) as typeof HTMLFrameElement; +const _HTMLFrameSetElement = (ns.HTMLFrameSetElement ?? FallbackElement) as typeof HTMLFrameSetElement; +const _HTMLHeadingElement = (ns.HTMLHeadingElement ?? FallbackElement) as typeof HTMLHeadingElement; +const _HTMLHeadElement = (ns.HTMLHeadElement ?? FallbackElement) as typeof HTMLHeadElement; +const _HTMLHRElement = (ns.HTMLHRElement ?? FallbackElement) as typeof HTMLHRElement; +const _HTMLIFrameElement = (ns.HTMLIFrameElement ?? FallbackElement) as typeof HTMLIFrameElement; +const _HTMLImageElement = (ns.HTMLImageElement ?? FallbackElement) as typeof HTMLImageElement; +const _HTMLInputElement = (ns.HTMLInputElement ?? FallbackElement) as typeof HTMLInputElement; +const _HTMLLabelElement = (ns.HTMLLabelElement ?? FallbackElement) as typeof HTMLLabelElement; +const _HTMLLegendElement = (ns.HTMLLegendElement ?? FallbackElement) as typeof HTMLLegendElement; +const _HTMLLIElement = (ns.HTMLLIElement ?? FallbackElement) as typeof HTMLLIElement; +const _HTMLLinkElement = (ns.HTMLLinkElement ?? FallbackElement) as typeof HTMLLinkElement; +const _HTMLMapElement = (ns.HTMLMapElement ?? FallbackElement) as typeof HTMLMapElement; +const _HTMLMarqueeElement = (ns.HTMLMarqueeElement ?? FallbackElement) as typeof HTMLMarqueeElement; +const _HTMLMenuElement = (ns.HTMLMenuElement ?? FallbackElement) as typeof HTMLMenuElement; +const _HTMLMetaElement = (ns.HTMLMetaElement ?? FallbackElement) as typeof HTMLMetaElement; +const _HTMLMeterElement = (ns.HTMLMeterElement ?? FallbackElement) as typeof HTMLMeterElement; +const _HTMLObjectElement = (ns.HTMLObjectElement ?? FallbackElement) as typeof HTMLObjectElement; +const _HTMLOListElement = (ns.HTMLOListElement ?? FallbackElement) as typeof HTMLOListElement; +const _HTMLOptGroupElement = (ns.HTMLOptGroupElement ?? FallbackElement) as typeof HTMLOptGroupElement; +const _HTMLOptionElement = (ns.HTMLOptionElement ?? FallbackElement) as typeof HTMLOptionElement; +const _HTMLOutputElement = (ns.HTMLOutputElement ?? FallbackElement) as typeof HTMLOutputElement; +const _HTMLParagraphElement = (ns.HTMLParagraphElement ?? FallbackElement) as typeof HTMLParagraphElement; +const _HTMLParamElement = (ns.HTMLParamElement ?? FallbackElement) as typeof HTMLParamElement; +const _HTMLPictureElement = (ns.HTMLPictureElement ?? FallbackElement) as typeof HTMLPictureElement; +const _HTMLPreElement = (ns.HTMLPreElement ?? FallbackElement) as typeof HTMLPreElement; +const _HTMLProgressElement = (ns.HTMLProgressElement ?? FallbackElement) as typeof HTMLProgressElement; +const _HTMLScriptElement = (ns.HTMLScriptElement ?? FallbackElement) as typeof HTMLScriptElement; +const _HTMLSelectElement = (ns.HTMLSelectElement ?? FallbackElement) as typeof HTMLSelectElement; +const _HTMLSlotElement = (ns.HTMLSlotElement ?? FallbackElement) as typeof HTMLSlotElement; +const _HTMLSourceElement = (ns.HTMLSourceElement ?? FallbackElement) as typeof HTMLSourceElement; +const _HTMLSpanElement = (ns.HTMLSpanElement ?? FallbackElement) as typeof HTMLSpanElement; +const _HTMLStyleElement = (ns.HTMLStyleElement ?? FallbackElement) as typeof HTMLStyleElement; +const _HTMLTableElement = (ns.HTMLTableElement ?? FallbackElement) as typeof HTMLTableElement; +const _HTMLTableSectionElement = (ns.HTMLTableSectionElement ?? FallbackElement) as typeof HTMLTableSectionElement; +const _HTMLTableCellElement = (ns.HTMLTableCellElement ?? FallbackElement) as typeof HTMLTableCellElement; +const _HTMLTemplateElement = (ns.HTMLTemplateElement ?? FallbackElement) as typeof HTMLTemplateElement; +const _HTMLTextAreaElement = (ns.HTMLTextAreaElement ?? FallbackElement) as typeof HTMLTextAreaElement; +const _HTMLTimeElement = (ns.HTMLTimeElement ?? FallbackElement) as typeof HTMLTimeElement; +const _HTMLTitleElement = (ns.HTMLTitleElement ?? FallbackElement) as typeof HTMLTitleElement; +const _HTMLTableRowElement = (ns.HTMLTableRowElement ?? FallbackElement) as typeof HTMLTableRowElement; +const _HTMLTrackElement = (ns.HTMLTrackElement ?? FallbackElement) as typeof HTMLTrackElement; +const _HTMLUListElement = (ns.HTMLUListElement ?? FallbackElement) as typeof HTMLUListElement; +const _HTMLVideoElement = (ns.HTMLVideoElement ?? FallbackElement) as typeof HTMLVideoElement; export { _HTMLElement as HTMLElement, From 5657a537cea55dbd2d765f3d3a602dce23ccf3e6 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Thu, 2 Nov 2023 16:49:59 +0100 Subject: [PATCH 30/44] Use proxy for builtin elements --- package.json | 10 +-- src/Component.ts | 38 ++++---- src/Elements.ts | 220 +++++++++++++++++------------------------------ src/events.ts | 6 +- src/polyfill.ts | 7 +- 5 files changed, 112 insertions(+), 169 deletions(-) diff --git a/package.json b/package.json index d657a874..dcfd2e1c 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,9 @@ }, "scripts": { "build": "rimraf 'dist' 'types' && yarn types && yarn build:browser && yarn build:node:esm && yarn build:node:cjs", - "build:browser": "esbuild src/index.ts --outfile=dist/browser/dna.js --platform=browser --format=esm --bundle --packages=external --minify --sourcemap", - "build:node:esm": "esbuild src/index.ts --outfile=dist/node/dna.js --platform=node --format=esm --bundle --packages=external --minify --sourcemap", - "build:node:cjs": "esbuild src/index.ts --outfile=dist/node/dna.cjs --platform=node --format=cjs --bundle --packages=external --minify --sourcemap", + "build:browser": "esbuild src/index.ts --outfile=dist/browser/dna.js --platform=browser --format=esm --bundle --minify --sourcemap", + "build:node:esm": "esbuild src/index.ts --outfile=dist/node/dna.js --platform=node --format=esm --bundle --minify --sourcemap", + "build:node:cjs": "esbuild src/index.ts --outfile=dist/node/dna.cjs --platform=node --format=cjs --bundle --minify --sourcemap", "types": "tsc", "test": "yarn test:typings && yarn test:browser && yarn test:node", "test:typings": "tsc -p test-typings --noEmit", @@ -58,6 +58,7 @@ "@changesets/cli": "^2.22.0", "@chialab/eslint-config": "^4.0.0", "@chialab/prettier-config": "^1.2.2", + "@chialab/quantum": "^1.0.0-alpha.0", "@vitest/browser": "^0.34.6", "@vitest/coverage-istanbul": "^0.34.6", "@vitest/coverage-v8": "^0.34.6", @@ -75,8 +76,5 @@ "typescript": "^5.0.0", "vitest": "^0.34.6", "webdriverio": "^8.17.0" - }, - "dependencies": { - "@chialab/quantum": "^1.0.0-alpha.0" } } diff --git a/src/Component.ts b/src/Component.ts index 4b536941..2e98cdf1 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -2,7 +2,7 @@ import { attachRealm, type Realm } from '@chialab/quantum'; import { type ClassDescriptor } from './ClassDescriptor'; import { type CustomElement, type CustomElementConstructor } from './CustomElement'; import { $parse } from './directives'; -import * as HtmlElements from './Elements'; +import { elements, type Elements } from './Elements'; import { defineListeners, delegateEventListener, @@ -719,24 +719,28 @@ export const extend = (constructor: Constructor) => mi /** * A collection of extended builtin HTML constructors. */ -export const builtin = new Proxy({} as Record, { - get(target, name: keyof typeof HtmlElements) { - const constructor = Reflect.get(target, name); - if (constructor) { - return constructor; - } +export const builtin = new Proxy( + {} as { + [K in keyof Elements]: ComponentConstructor>>; + }, + { + get(target: any, name: keyof Elements) { + const constructor = Reflect.get(target, name); + if (constructor) { + return constructor; + } - if (name in HtmlElements) { - const constructor = extend(HtmlElements[name] as Constructor); - return (target[name] = constructor); - } + if (elements[name]) { + return (target[name] = extend(elements[name])); + } - return null; - }, - set(target, name: keyof typeof HtmlElements, value: ComponentConstructor) { - return Reflect.set(target, name, value); - }, -}); + return null; + }, + set(target, name: keyof Elements, value: ComponentConstructor) { + return Reflect.set(target, name, value); + }, + } +); /** * The DNA base Component constructor, a Custom Element constructor with diff --git a/src/Elements.ts b/src/Elements.ts index e46ef450..26de3daa 100644 --- a/src/Elements.ts +++ b/src/Elements.ts @@ -185,144 +185,86 @@ export interface SVGTagNameMap { view: SVGViewElement; } -const ns = (isBrowser ? window : {}) as unknown as typeof window; const FallbackElement = class FallbackElement {}; -const _HTMLElement = (ns.HTMLElement ?? FallbackElement) as typeof HTMLElement; -const _HTMLAnchorElement = (ns.HTMLAnchorElement ?? FallbackElement) as typeof HTMLAnchorElement; -const _HTMLAreaElement = (ns.HTMLAreaElement ?? FallbackElement) as typeof HTMLAreaElement; -const _HTMLAudioElement = (ns.HTMLAudioElement ?? FallbackElement) as typeof HTMLAudioElement; -const _HTMLBaseElement = (ns.HTMLBaseElement ?? FallbackElement) as typeof HTMLBaseElement; -const _HTMLQuoteElement = (ns.HTMLQuoteElement ?? FallbackElement) as typeof HTMLQuoteElement; -const _HTMLBodyElement = (ns.HTMLBodyElement ?? FallbackElement) as typeof HTMLBodyElement; -const _HTMLBRElement = (ns.HTMLBRElement ?? FallbackElement) as typeof HTMLBRElement; -const _HTMLButtonElement = (ns.HTMLButtonElement ?? FallbackElement) as typeof HTMLButtonElement; -const _HTMLCanvasElement = (ns.HTMLCanvasElement ?? FallbackElement) as typeof HTMLCanvasElement; -const _HTMLTableCaptionElement = (ns.HTMLTableCaptionElement ?? FallbackElement) as typeof HTMLTableCaptionElement; -const _HTMLTableColElement = (ns.HTMLTableColElement ?? FallbackElement) as typeof HTMLTableColElement; -const _HTMLDataElement = (ns.HTMLDataElement ?? FallbackElement) as typeof HTMLDataElement; -const _HTMLDataListElement = (ns.HTMLDataListElement ?? FallbackElement) as typeof HTMLDataListElement; -const _HTMLModElement = (ns.HTMLModElement ?? FallbackElement) as typeof HTMLModElement; -const _HTMLDetailsElement = (ns.HTMLDetailsElement ?? FallbackElement) as typeof HTMLDetailsElement; -const _HTMLDialogElement = (ns.HTMLDialogElement ?? FallbackElement) as typeof HTMLDialogElement; -const _HTMLDirectoryElement = (ns.HTMLDirectoryElement ?? FallbackElement) as typeof HTMLDirectoryElement; -const _HTMLDivElement = (ns.HTMLDivElement ?? FallbackElement) as typeof HTMLDivElement; -const _HTMLDListElement = (ns.HTMLDListElement ?? FallbackElement) as typeof HTMLDListElement; -const _HTMLEmbedElement = (ns.HTMLEmbedElement ?? FallbackElement) as typeof HTMLEmbedElement; -const _HTMLFieldSetElement = (ns.HTMLFieldSetElement ?? FallbackElement) as typeof HTMLFieldSetElement; -const _HTMLFontElement = (ns.HTMLFontElement ?? FallbackElement) as typeof HTMLFontElement; -const _HTMLFormElement = (ns.HTMLFormElement ?? FallbackElement) as typeof HTMLFormElement; -const _HTMLFrameElement = (ns.HTMLFrameElement ?? FallbackElement) as typeof HTMLFrameElement; -const _HTMLFrameSetElement = (ns.HTMLFrameSetElement ?? FallbackElement) as typeof HTMLFrameSetElement; -const _HTMLHeadingElement = (ns.HTMLHeadingElement ?? FallbackElement) as typeof HTMLHeadingElement; -const _HTMLHeadElement = (ns.HTMLHeadElement ?? FallbackElement) as typeof HTMLHeadElement; -const _HTMLHRElement = (ns.HTMLHRElement ?? FallbackElement) as typeof HTMLHRElement; -const _HTMLIFrameElement = (ns.HTMLIFrameElement ?? FallbackElement) as typeof HTMLIFrameElement; -const _HTMLImageElement = (ns.HTMLImageElement ?? FallbackElement) as typeof HTMLImageElement; -const _HTMLInputElement = (ns.HTMLInputElement ?? FallbackElement) as typeof HTMLInputElement; -const _HTMLLabelElement = (ns.HTMLLabelElement ?? FallbackElement) as typeof HTMLLabelElement; -const _HTMLLegendElement = (ns.HTMLLegendElement ?? FallbackElement) as typeof HTMLLegendElement; -const _HTMLLIElement = (ns.HTMLLIElement ?? FallbackElement) as typeof HTMLLIElement; -const _HTMLLinkElement = (ns.HTMLLinkElement ?? FallbackElement) as typeof HTMLLinkElement; -const _HTMLMapElement = (ns.HTMLMapElement ?? FallbackElement) as typeof HTMLMapElement; -const _HTMLMarqueeElement = (ns.HTMLMarqueeElement ?? FallbackElement) as typeof HTMLMarqueeElement; -const _HTMLMenuElement = (ns.HTMLMenuElement ?? FallbackElement) as typeof HTMLMenuElement; -const _HTMLMetaElement = (ns.HTMLMetaElement ?? FallbackElement) as typeof HTMLMetaElement; -const _HTMLMeterElement = (ns.HTMLMeterElement ?? FallbackElement) as typeof HTMLMeterElement; -const _HTMLObjectElement = (ns.HTMLObjectElement ?? FallbackElement) as typeof HTMLObjectElement; -const _HTMLOListElement = (ns.HTMLOListElement ?? FallbackElement) as typeof HTMLOListElement; -const _HTMLOptGroupElement = (ns.HTMLOptGroupElement ?? FallbackElement) as typeof HTMLOptGroupElement; -const _HTMLOptionElement = (ns.HTMLOptionElement ?? FallbackElement) as typeof HTMLOptionElement; -const _HTMLOutputElement = (ns.HTMLOutputElement ?? FallbackElement) as typeof HTMLOutputElement; -const _HTMLParagraphElement = (ns.HTMLParagraphElement ?? FallbackElement) as typeof HTMLParagraphElement; -const _HTMLParamElement = (ns.HTMLParamElement ?? FallbackElement) as typeof HTMLParamElement; -const _HTMLPictureElement = (ns.HTMLPictureElement ?? FallbackElement) as typeof HTMLPictureElement; -const _HTMLPreElement = (ns.HTMLPreElement ?? FallbackElement) as typeof HTMLPreElement; -const _HTMLProgressElement = (ns.HTMLProgressElement ?? FallbackElement) as typeof HTMLProgressElement; -const _HTMLScriptElement = (ns.HTMLScriptElement ?? FallbackElement) as typeof HTMLScriptElement; -const _HTMLSelectElement = (ns.HTMLSelectElement ?? FallbackElement) as typeof HTMLSelectElement; -const _HTMLSlotElement = (ns.HTMLSlotElement ?? FallbackElement) as typeof HTMLSlotElement; -const _HTMLSourceElement = (ns.HTMLSourceElement ?? FallbackElement) as typeof HTMLSourceElement; -const _HTMLSpanElement = (ns.HTMLSpanElement ?? FallbackElement) as typeof HTMLSpanElement; -const _HTMLStyleElement = (ns.HTMLStyleElement ?? FallbackElement) as typeof HTMLStyleElement; -const _HTMLTableElement = (ns.HTMLTableElement ?? FallbackElement) as typeof HTMLTableElement; -const _HTMLTableSectionElement = (ns.HTMLTableSectionElement ?? FallbackElement) as typeof HTMLTableSectionElement; -const _HTMLTableCellElement = (ns.HTMLTableCellElement ?? FallbackElement) as typeof HTMLTableCellElement; -const _HTMLTemplateElement = (ns.HTMLTemplateElement ?? FallbackElement) as typeof HTMLTemplateElement; -const _HTMLTextAreaElement = (ns.HTMLTextAreaElement ?? FallbackElement) as typeof HTMLTextAreaElement; -const _HTMLTimeElement = (ns.HTMLTimeElement ?? FallbackElement) as typeof HTMLTimeElement; -const _HTMLTitleElement = (ns.HTMLTitleElement ?? FallbackElement) as typeof HTMLTitleElement; -const _HTMLTableRowElement = (ns.HTMLTableRowElement ?? FallbackElement) as typeof HTMLTableRowElement; -const _HTMLTrackElement = (ns.HTMLTrackElement ?? FallbackElement) as typeof HTMLTrackElement; -const _HTMLUListElement = (ns.HTMLUListElement ?? FallbackElement) as typeof HTMLUListElement; -const _HTMLVideoElement = (ns.HTMLVideoElement ?? FallbackElement) as typeof HTMLVideoElement; +export interface Elements { + HTMLElement: typeof HTMLElement; + HTMLAnchorElement: typeof HTMLAnchorElement; + HTMLAreaElement: typeof HTMLAreaElement; + HTMLAudioElement: typeof HTMLAudioElement; + HTMLBaseElement: typeof HTMLBaseElement; + HTMLQuoteElement: typeof HTMLQuoteElement; + HTMLBodyElement: typeof HTMLBodyElement; + HTMLBRElement: typeof HTMLBRElement; + HTMLButtonElement: typeof HTMLButtonElement; + HTMLCanvasElement: typeof HTMLCanvasElement; + HTMLTableCaptionElement: typeof HTMLTableCaptionElement; + HTMLTableColElement: typeof HTMLTableColElement; + HTMLDataElement: typeof HTMLDataElement; + HTMLDataListElement: typeof HTMLDataListElement; + HTMLModElement: typeof HTMLModElement; + HTMLDetailsElement: typeof HTMLDetailsElement; + HTMLDialogElement: typeof HTMLDialogElement; + HTMLDirectoryElement: typeof HTMLDirectoryElement; + HTMLDivElement: typeof HTMLDivElement; + HTMLDListElement: typeof HTMLDListElement; + HTMLEmbedElement: typeof HTMLEmbedElement; + HTMLFieldSetElement: typeof HTMLFieldSetElement; + HTMLFontElement: typeof HTMLFontElement; + HTMLFormElement: typeof HTMLFormElement; + HTMLFrameElement: typeof HTMLFrameElement; + HTMLFrameSetElement: typeof HTMLFrameSetElement; + HTMLHeadingElement: typeof HTMLHeadingElement; + HTMLHeadElement: typeof HTMLHeadElement; + HTMLHRElement: typeof HTMLHRElement; + HTMLIFrameElement: typeof HTMLIFrameElement; + HTMLImageElement: typeof HTMLImageElement; + HTMLInputElement: typeof HTMLInputElement; + HTMLLabelElement: typeof HTMLLabelElement; + HTMLLegendElement: typeof HTMLLegendElement; + HTMLLIElement: typeof HTMLLIElement; + HTMLLinkElement: typeof HTMLLinkElement; + HTMLMapElement: typeof HTMLMapElement; + HTMLMarqueeElement: typeof HTMLMarqueeElement; + HTMLMenuElement: typeof HTMLMenuElement; + HTMLMetaElement: typeof HTMLMetaElement; + HTMLMeterElement: typeof HTMLMeterElement; + HTMLObjectElement: typeof HTMLObjectElement; + HTMLOListElement: typeof HTMLOListElement; + HTMLOptGroupElement: typeof HTMLOptGroupElement; + HTMLOptionElement: typeof HTMLOptionElement; + HTMLOutputElement: typeof HTMLOutputElement; + HTMLParagraphElement: typeof HTMLParagraphElement; + HTMLParamElement: typeof HTMLParamElement; + HTMLPictureElement: typeof HTMLPictureElement; + HTMLPreElement: typeof HTMLPreElement; + HTMLProgressElement: typeof HTMLProgressElement; + HTMLScriptElement: typeof HTMLScriptElement; + HTMLSelectElement: typeof HTMLSelectElement; + HTMLSlotElement: typeof HTMLSlotElement; + HTMLSourceElement: typeof HTMLSourceElement; + HTMLSpanElement: typeof HTMLSpanElement; + HTMLStyleElement: typeof HTMLStyleElement; + HTMLTableElement: typeof HTMLTableElement; + HTMLTableSectionElement: typeof HTMLTableSectionElement; + HTMLTableCellElement: typeof HTMLTableCellElement; + HTMLTemplateElement: typeof HTMLTemplateElement; + HTMLTextAreaElement: typeof HTMLTextAreaElement; + HTMLTimeElement: typeof HTMLTimeElement; + HTMLTitleElement: typeof HTMLTitleElement; + HTMLTableRowElement: typeof HTMLTableRowElement; + HTMLTrackElement: typeof HTMLTrackElement; + HTMLUListElement: typeof HTMLUListElement; + HTMLVideoElement: typeof HTMLVideoElement; +} -export { - _HTMLElement as HTMLElement, - _HTMLAnchorElement as HTMLAnchorElement, - _HTMLAreaElement as HTMLAreaElement, - _HTMLAudioElement as HTMLAudioElement, - _HTMLBaseElement as HTMLBaseElement, - _HTMLQuoteElement as HTMLQuoteElement, - _HTMLBodyElement as HTMLBodyElement, - _HTMLBRElement as HTMLBRElement, - _HTMLButtonElement as HTMLButtonElement, - _HTMLCanvasElement as HTMLCanvasElement, - _HTMLTableCaptionElement as HTMLTableCaptionElement, - _HTMLTableColElement as HTMLTableColElement, - _HTMLDataElement as HTMLDataElement, - _HTMLDataListElement as HTMLDataListElement, - _HTMLModElement as HTMLModElement, - _HTMLDetailsElement as HTMLDetailsElement, - _HTMLDialogElement as HTMLDialogElement, - _HTMLDirectoryElement as HTMLDirectoryElement, - _HTMLDivElement as HTMLDivElement, - _HTMLDListElement as HTMLDListElement, - _HTMLEmbedElement as HTMLEmbedElement, - _HTMLFieldSetElement as HTMLFieldSetElement, - _HTMLFontElement as HTMLFontElement, - _HTMLFormElement as HTMLFormElement, - _HTMLFrameElement as HTMLFrameElement, - _HTMLFrameSetElement as HTMLFrameSetElement, - _HTMLHeadingElement as HTMLHeadingElement, - _HTMLHeadElement as HTMLHeadElement, - _HTMLHRElement as HTMLHRElement, - _HTMLIFrameElement as HTMLIFrameElement, - _HTMLImageElement as HTMLImageElement, - _HTMLInputElement as HTMLInputElement, - _HTMLLabelElement as HTMLLabelElement, - _HTMLLegendElement as HTMLLegendElement, - _HTMLLIElement as HTMLLIElement, - _HTMLLinkElement as HTMLLinkElement, - _HTMLMapElement as HTMLMapElement, - _HTMLMarqueeElement as HTMLMarqueeElement, - _HTMLMenuElement as HTMLMenuElement, - _HTMLMetaElement as HTMLMetaElement, - _HTMLMeterElement as HTMLMeterElement, - _HTMLObjectElement as HTMLObjectElement, - _HTMLOListElement as HTMLOListElement, - _HTMLOptGroupElement as HTMLOptGroupElement, - _HTMLOptionElement as HTMLOptionElement, - _HTMLOutputElement as HTMLOutputElement, - _HTMLParagraphElement as HTMLParagraphElement, - _HTMLParamElement as HTMLParamElement, - _HTMLPictureElement as HTMLPictureElement, - _HTMLPreElement as HTMLPreElement, - _HTMLProgressElement as HTMLProgressElement, - _HTMLScriptElement as HTMLScriptElement, - _HTMLSelectElement as HTMLSelectElement, - _HTMLSlotElement as HTMLSlotElement, - _HTMLSourceElement as HTMLSourceElement, - _HTMLSpanElement as HTMLSpanElement, - _HTMLStyleElement as HTMLStyleElement, - _HTMLTableElement as HTMLTableElement, - _HTMLTableSectionElement as HTMLTableSectionElement, - _HTMLTableCellElement as HTMLTableCellElement, - _HTMLTemplateElement as HTMLTemplateElement, - _HTMLTextAreaElement as HTMLTextAreaElement, - _HTMLTimeElement as HTMLTimeElement, - _HTMLTitleElement as HTMLTitleElement, - _HTMLTableRowElement as HTMLTableRowElement, - _HTMLTrackElement as HTMLTrackElement, - _HTMLUListElement as HTMLUListElement, - _HTMLVideoElement as HTMLVideoElement, -}; +/** + * Builtin constructors for DOM elements. + */ +export const elements: Elements = new Proxy({} as unknown as Elements, { + get(target, name: keyof Elements) { + if (!isBrowser) { + return class extends FallbackElement {}; + } + return window[name]; + }, +}); diff --git a/src/events.ts b/src/events.ts index b0a9daf5..267e3726 100644 --- a/src/events.ts +++ b/src/events.ts @@ -1,6 +1,6 @@ import { type ClassElement } from './ClassDescriptor'; import { type ComponentConstructor, type ComponentInstance } from './Component'; -import { HTMLElement } from './Elements'; +import { elements } from './Elements'; import { getOwnPropertyDescriptor, getPrototypeOf, hasOwnProperty, type Constructor } from './helpers'; import { type Methods } from './property'; @@ -335,7 +335,7 @@ export const dispatchEvent = ( ): boolean => { assertNode(element); event = initEvent(event, detail, bubbles, cancelable, composed); - return HTMLElement.prototype.dispatchEvent.call(element, event); + return elements.HTMLElement.prototype.dispatchEvent.call(element, event); }; /** @@ -454,7 +454,7 @@ export function defineListener( export const defineListeners = (prototype: T) => { const constructor = prototype.constructor as ComponentConstructor; let ctr = constructor; - while (ctr && ctr.prototype && ctr !== HTMLElement) { + while (ctr && ctr.prototype && ctr !== elements.HTMLElement) { if (hasOwnProperty.call(ctr.prototype, LISTENERS_SYMBOL)) { break; } diff --git a/src/polyfill.ts b/src/polyfill.ts index 3af95725..1dc11bb0 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -1,5 +1,4 @@ import type { CustomElement, CustomElementConstructor } from './CustomElement'; -import * as HtmlElements from './Elements'; import { isBrowser } from './helpers'; /** @@ -61,7 +60,7 @@ function polyfillBuiltin() { let CurrentConstructor = constructor; let ParentCostructor = Object.getPrototypeOf(CurrentConstructor) as CustomElementConstructor; - while (ParentCostructor.name in HtmlElements) { + while (ParentCostructor.name in window) { CurrentConstructor = ParentCostructor; if (Object.hasOwnProperty.call(CurrentConstructor, '__shim')) { return; @@ -95,7 +94,7 @@ function polyfillBuiltin() { if (!attributeName) { return; } - if (observedAttributes.indexOf(attributeName) === -1) { + if (!observedAttributes.includes(attributeName)) { return; } @@ -150,7 +149,7 @@ function polyfillBuiltin() { const observed = (constructor as CustomElementConstructor).observedAttributes || []; for (let i = 0, len = root.attributes.length; i < len; i++) { const attr = root.attributes[i]; - if (observed.indexOf(attr.name) !== -1) { + if (observed.includes(attr.name)) { attributes.push({ name: attr.name, value: attr.value, From 7ecdbc0953058e32f4a651b6645541f22384108a Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Thu, 2 Nov 2023 17:08:36 +0100 Subject: [PATCH 31/44] Agttempt to fix polyfill --- src/Component.ts | 12 ++-- src/Elements.ts | 151 ++++++++++++++++++++++------------------------- src/events.ts | 6 +- src/polyfill.ts | 3 +- 4 files changed, 81 insertions(+), 91 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 2e98cdf1..371fd677 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -2,7 +2,7 @@ import { attachRealm, type Realm } from '@chialab/quantum'; import { type ClassDescriptor } from './ClassDescriptor'; import { type CustomElement, type CustomElementConstructor } from './CustomElement'; import { $parse } from './directives'; -import { elements, type Elements } from './Elements'; +import * as Elements from './Elements'; import { defineListeners, delegateEventListener, @@ -721,22 +721,22 @@ export const extend = (constructor: Constructor) => mi */ export const builtin = new Proxy( {} as { - [K in keyof Elements]: ComponentConstructor>>; + [K in keyof typeof Elements]: ComponentConstructor>>; }, { - get(target: any, name: keyof Elements) { + get(target: any, name: keyof typeof Elements) { const constructor = Reflect.get(target, name); if (constructor) { return constructor; } - if (elements[name]) { - return (target[name] = extend(elements[name])); + if (Elements[name]) { + return (target[name] = extend(Elements[name])); } return null; }, - set(target, name: keyof Elements, value: ComponentConstructor) { + set(target, name: keyof typeof Elements, value: ComponentConstructor) { return Reflect.set(target, name, value); }, } diff --git a/src/Elements.ts b/src/Elements.ts index 26de3daa..62a55df3 100644 --- a/src/Elements.ts +++ b/src/Elements.ts @@ -186,85 +186,74 @@ export interface SVGTagNameMap { } const FallbackElement = class FallbackElement {}; -export interface Elements { - HTMLElement: typeof HTMLElement; - HTMLAnchorElement: typeof HTMLAnchorElement; - HTMLAreaElement: typeof HTMLAreaElement; - HTMLAudioElement: typeof HTMLAudioElement; - HTMLBaseElement: typeof HTMLBaseElement; - HTMLQuoteElement: typeof HTMLQuoteElement; - HTMLBodyElement: typeof HTMLBodyElement; - HTMLBRElement: typeof HTMLBRElement; - HTMLButtonElement: typeof HTMLButtonElement; - HTMLCanvasElement: typeof HTMLCanvasElement; - HTMLTableCaptionElement: typeof HTMLTableCaptionElement; - HTMLTableColElement: typeof HTMLTableColElement; - HTMLDataElement: typeof HTMLDataElement; - HTMLDataListElement: typeof HTMLDataListElement; - HTMLModElement: typeof HTMLModElement; - HTMLDetailsElement: typeof HTMLDetailsElement; - HTMLDialogElement: typeof HTMLDialogElement; - HTMLDirectoryElement: typeof HTMLDirectoryElement; - HTMLDivElement: typeof HTMLDivElement; - HTMLDListElement: typeof HTMLDListElement; - HTMLEmbedElement: typeof HTMLEmbedElement; - HTMLFieldSetElement: typeof HTMLFieldSetElement; - HTMLFontElement: typeof HTMLFontElement; - HTMLFormElement: typeof HTMLFormElement; - HTMLFrameElement: typeof HTMLFrameElement; - HTMLFrameSetElement: typeof HTMLFrameSetElement; - HTMLHeadingElement: typeof HTMLHeadingElement; - HTMLHeadElement: typeof HTMLHeadElement; - HTMLHRElement: typeof HTMLHRElement; - HTMLIFrameElement: typeof HTMLIFrameElement; - HTMLImageElement: typeof HTMLImageElement; - HTMLInputElement: typeof HTMLInputElement; - HTMLLabelElement: typeof HTMLLabelElement; - HTMLLegendElement: typeof HTMLLegendElement; - HTMLLIElement: typeof HTMLLIElement; - HTMLLinkElement: typeof HTMLLinkElement; - HTMLMapElement: typeof HTMLMapElement; - HTMLMarqueeElement: typeof HTMLMarqueeElement; - HTMLMenuElement: typeof HTMLMenuElement; - HTMLMetaElement: typeof HTMLMetaElement; - HTMLMeterElement: typeof HTMLMeterElement; - HTMLObjectElement: typeof HTMLObjectElement; - HTMLOListElement: typeof HTMLOListElement; - HTMLOptGroupElement: typeof HTMLOptGroupElement; - HTMLOptionElement: typeof HTMLOptionElement; - HTMLOutputElement: typeof HTMLOutputElement; - HTMLParagraphElement: typeof HTMLParagraphElement; - HTMLParamElement: typeof HTMLParamElement; - HTMLPictureElement: typeof HTMLPictureElement; - HTMLPreElement: typeof HTMLPreElement; - HTMLProgressElement: typeof HTMLProgressElement; - HTMLScriptElement: typeof HTMLScriptElement; - HTMLSelectElement: typeof HTMLSelectElement; - HTMLSlotElement: typeof HTMLSlotElement; - HTMLSourceElement: typeof HTMLSourceElement; - HTMLSpanElement: typeof HTMLSpanElement; - HTMLStyleElement: typeof HTMLStyleElement; - HTMLTableElement: typeof HTMLTableElement; - HTMLTableSectionElement: typeof HTMLTableSectionElement; - HTMLTableCellElement: typeof HTMLTableCellElement; - HTMLTemplateElement: typeof HTMLTemplateElement; - HTMLTextAreaElement: typeof HTMLTextAreaElement; - HTMLTimeElement: typeof HTMLTimeElement; - HTMLTitleElement: typeof HTMLTitleElement; - HTMLTableRowElement: typeof HTMLTableRowElement; - HTMLTrackElement: typeof HTMLTrackElement; - HTMLUListElement: typeof HTMLUListElement; - HTMLVideoElement: typeof HTMLVideoElement; -} -/** - * Builtin constructors for DOM elements. - */ -export const elements: Elements = new Proxy({} as unknown as Elements, { - get(target, name: keyof Elements) { - if (!isBrowser) { - return class extends FallbackElement {}; - } - return window[name]; - }, -}); +export const { + HTMLElement = FallbackElement as (typeof globalThis)['HTMLElement'], + HTMLAnchorElement = HTMLElement as (typeof globalThis)['HTMLAnchorElement'], + HTMLAreaElement = HTMLElement as (typeof globalThis)['HTMLAreaElement'], + HTMLAudioElement = HTMLElement as (typeof globalThis)['HTMLAudioElement'], + HTMLBaseElement = HTMLElement as (typeof globalThis)['HTMLBaseElement'], + HTMLQuoteElement = HTMLElement as (typeof globalThis)['HTMLQuoteElement'], + HTMLBodyElement = HTMLElement as (typeof globalThis)['HTMLBodyElement'], + HTMLBRElement = HTMLElement as (typeof globalThis)['HTMLBRElement'], + HTMLButtonElement = HTMLElement as (typeof globalThis)['HTMLButtonElement'], + HTMLCanvasElement = HTMLElement as (typeof globalThis)['HTMLCanvasElement'], + HTMLTableCaptionElement = HTMLElement as (typeof globalThis)['HTMLTableCaptionElement'], + HTMLTableColElement = HTMLElement as (typeof globalThis)['HTMLTableColElement'], + HTMLDataElement = HTMLElement as (typeof globalThis)['HTMLDataElement'], + HTMLDataListElement = HTMLElement as (typeof globalThis)['HTMLDataListElement'], + HTMLModElement = HTMLElement as (typeof globalThis)['HTMLModElement'], + HTMLDetailsElement = HTMLElement as (typeof globalThis)['HTMLDetailsElement'], + HTMLDialogElement = HTMLElement as (typeof globalThis)['HTMLDialogElement'], + HTMLDirectoryElement = HTMLElement as (typeof globalThis)['HTMLDirectoryElement'], + HTMLDivElement = HTMLElement as (typeof globalThis)['HTMLDivElement'], + HTMLDListElement = HTMLElement as (typeof globalThis)['HTMLDListElement'], + HTMLEmbedElement = HTMLElement as (typeof globalThis)['HTMLEmbedElement'], + HTMLFieldSetElement = HTMLElement as (typeof globalThis)['HTMLFieldSetElement'], + HTMLFontElement = HTMLElement as (typeof globalThis)['HTMLFontElement'], + HTMLFormElement = HTMLElement as (typeof globalThis)['HTMLFormElement'], + HTMLFrameElement = HTMLElement as (typeof globalThis)['HTMLFrameElement'], + HTMLFrameSetElement = HTMLElement as (typeof globalThis)['HTMLFrameSetElement'], + HTMLHeadingElement = HTMLElement as (typeof globalThis)['HTMLHeadingElement'], + HTMLHeadElement = HTMLElement as (typeof globalThis)['HTMLHeadElement'], + HTMLHRElement = HTMLElement as (typeof globalThis)['HTMLHRElement'], + HTMLIFrameElement = HTMLElement as (typeof globalThis)['HTMLIFrameElement'], + HTMLImageElement = HTMLElement as (typeof globalThis)['HTMLImageElement'], + HTMLInputElement = HTMLElement as (typeof globalThis)['HTMLInputElement'], + HTMLLabelElement = HTMLElement as (typeof globalThis)['HTMLLabelElement'], + HTMLLegendElement = HTMLElement as (typeof globalThis)['HTMLLegendElement'], + HTMLLIElement = HTMLElement as (typeof globalThis)['HTMLLIElement'], + HTMLLinkElement = HTMLElement as (typeof globalThis)['HTMLLinkElement'], + HTMLMapElement = HTMLElement as (typeof globalThis)['HTMLMapElement'], + HTMLMarqueeElement = HTMLElement as (typeof globalThis)['HTMLMarqueeElement'], + HTMLMenuElement = HTMLElement as (typeof globalThis)['HTMLMenuElement'], + HTMLMetaElement = HTMLElement as (typeof globalThis)['HTMLMetaElement'], + HTMLMeterElement = HTMLElement as (typeof globalThis)['HTMLMeterElement'], + HTMLObjectElement = HTMLElement as (typeof globalThis)['HTMLObjectElement'], + HTMLOListElement = HTMLElement as (typeof globalThis)['HTMLOListElement'], + HTMLOptGroupElement = HTMLElement as (typeof globalThis)['HTMLOptGroupElement'], + HTMLOptionElement = HTMLElement as (typeof globalThis)['HTMLOptionElement'], + HTMLOutputElement = HTMLElement as (typeof globalThis)['HTMLOutputElement'], + HTMLParagraphElement = HTMLElement as (typeof globalThis)['HTMLParagraphElement'], + HTMLParamElement = HTMLElement as (typeof globalThis)['HTMLParamElement'], + HTMLPictureElement = HTMLElement as (typeof globalThis)['HTMLPictureElement'], + HTMLPreElement = HTMLElement as (typeof globalThis)['HTMLPreElement'], + HTMLProgressElement = HTMLElement as (typeof globalThis)['HTMLProgressElement'], + HTMLScriptElement = HTMLElement as (typeof globalThis)['HTMLScriptElement'], + HTMLSelectElement = HTMLElement as (typeof globalThis)['HTMLSelectElement'], + HTMLSlotElement = HTMLElement as (typeof globalThis)['HTMLSlotElement'], + HTMLSourceElement = HTMLElement as (typeof globalThis)['HTMLSourceElement'], + HTMLSpanElement = HTMLElement as (typeof globalThis)['HTMLSpanElement'], + HTMLStyleElement = HTMLElement as (typeof globalThis)['HTMLStyleElement'], + HTMLTableElement = HTMLElement as (typeof globalThis)['HTMLTableElement'], + HTMLTableSectionElement = HTMLElement as (typeof globalThis)['HTMLTableSectionElement'], + HTMLTableCellElement = HTMLElement as (typeof globalThis)['HTMLTableCellElement'], + HTMLTemplateElement = HTMLElement as (typeof globalThis)['HTMLTemplateElement'], + HTMLTextAreaElement = HTMLElement as (typeof globalThis)['HTMLTextAreaElement'], + HTMLTimeElement = HTMLElement as (typeof globalThis)['HTMLTimeElement'], + HTMLTitleElement = HTMLElement as (typeof globalThis)['HTMLTitleElement'], + HTMLTableRowElement = HTMLElement as (typeof globalThis)['HTMLTableRowElement'], + HTMLTrackElement = HTMLElement as (typeof globalThis)['HTMLTrackElement'], + HTMLUListElement = HTMLElement as (typeof globalThis)['HTMLUListElement'], + HTMLVideoElement = HTMLElement as (typeof globalThis)['HTMLVideoElement'], +} = (isBrowser ? window : {}) as unknown as typeof window; diff --git a/src/events.ts b/src/events.ts index 267e3726..b0a9daf5 100644 --- a/src/events.ts +++ b/src/events.ts @@ -1,6 +1,6 @@ import { type ClassElement } from './ClassDescriptor'; import { type ComponentConstructor, type ComponentInstance } from './Component'; -import { elements } from './Elements'; +import { HTMLElement } from './Elements'; import { getOwnPropertyDescriptor, getPrototypeOf, hasOwnProperty, type Constructor } from './helpers'; import { type Methods } from './property'; @@ -335,7 +335,7 @@ export const dispatchEvent = ( ): boolean => { assertNode(element); event = initEvent(event, detail, bubbles, cancelable, composed); - return elements.HTMLElement.prototype.dispatchEvent.call(element, event); + return HTMLElement.prototype.dispatchEvent.call(element, event); }; /** @@ -454,7 +454,7 @@ export function defineListener( export const defineListeners = (prototype: T) => { const constructor = prototype.constructor as ComponentConstructor; let ctr = constructor; - while (ctr && ctr.prototype && ctr !== elements.HTMLElement) { + while (ctr && ctr.prototype && ctr !== HTMLElement) { if (hasOwnProperty.call(ctr.prototype, LISTENERS_SYMBOL)) { break; } diff --git a/src/polyfill.ts b/src/polyfill.ts index 1dc11bb0..aea73c45 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -1,4 +1,5 @@ import type { CustomElement, CustomElementConstructor } from './CustomElement'; +import * as Elements from './Elements'; import { isBrowser } from './helpers'; /** @@ -60,7 +61,7 @@ function polyfillBuiltin() { let CurrentConstructor = constructor; let ParentCostructor = Object.getPrototypeOf(CurrentConstructor) as CustomElementConstructor; - while (ParentCostructor.name in window) { + while (Object.values(Elements).includes(ParentCostructor)) { CurrentConstructor = ParentCostructor; if (Object.hasOwnProperty.call(CurrentConstructor, '__shim')) { return; From 7342c89cbca56d54673a78106984e84f048cc8c5 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Fri, 3 Nov 2023 08:29:13 +0100 Subject: [PATCH 32/44] Fix safari polyfill --- src/Component.ts | 22 ++++++++--------- src/polyfill.ts | 3 ++- test-node/component.spec.js | 47 +++++++++++++++++++------------------ 3 files changed, 37 insertions(+), 35 deletions(-) diff --git a/src/Component.ts b/src/Component.ts index 371fd677..c15ba448 100644 --- a/src/Component.ts +++ b/src/Component.ts @@ -386,12 +386,11 @@ const mixin = (ctor: Constructor) => { constructor(...args: any[]) { super(); - - const element = (args.length ? (setPrototypeOf(args[0], this), args[0]) : this) as this; if (!isBrowser) { - return element; + throw new Error('Components can be used only in browser environment'); } + const element = (args.length ? (setPrototypeOf(args[0], this), args[0]) : this) as this; // setup listeners const computedListeners = getListeners(element).map((listener) => ({ ...listener, @@ -721,24 +720,25 @@ export const extend = (constructor: Constructor) => mi */ export const builtin = new Proxy( {} as { - [K in keyof typeof Elements]: ComponentConstructor>>; + readonly [K in keyof typeof Elements]: ComponentConstructor< + ComponentInstance> + >; }, { - get(target: any, name: keyof typeof Elements) { + get(target, name) { const constructor = Reflect.get(target, name); if (constructor) { return constructor; } - if (Elements[name]) { - return (target[name] = extend(Elements[name])); + if (name in Elements) { + const constructor = extend(Elements[name as keyof typeof Elements]); + Reflect.set(target, name, constructor); + return constructor; } return null; }, - set(target, name: keyof typeof Elements, value: ComponentConstructor) { - return Reflect.set(target, name, value); - }, } ); @@ -818,7 +818,7 @@ export function define(name: string, constructor: ComponentConstructor, options? ); } - if (typeof customElements !== 'undefined') { + if (isBrowser) { customElements.define(name, constructor, options); } diff --git a/src/polyfill.ts b/src/polyfill.ts index aea73c45..0094d872 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -11,6 +11,7 @@ function polyfillBuiltin() { const tagNames: Record = {}; const CE_SYMBOL = Symbol(); const nativeCreateElement = document.createElement.bind(document); + const builtin = Object.values(Elements); const customElements = win.customElements; const define = customElements.define.bind(customElements); const upgrade = customElements.upgrade.bind(customElements); @@ -61,7 +62,7 @@ function polyfillBuiltin() { let CurrentConstructor = constructor; let ParentCostructor = Object.getPrototypeOf(CurrentConstructor) as CustomElementConstructor; - while (Object.values(Elements).includes(ParentCostructor)) { + while (!builtin.includes(ParentCostructor)) { CurrentConstructor = ParentCostructor; if (Object.hasOwnProperty.call(CurrentConstructor, '__shim')) { return; diff --git a/test-node/component.spec.js b/test-node/component.spec.js index 3d7a9f31..a10e99a9 100644 --- a/test-node/component.spec.js +++ b/test-node/component.spec.js @@ -14,31 +14,32 @@ export function getComponentName() { describe( 'Component', () => { - describe('#new', () => { - it('should create a node', () => { - expect(() => { - const is = getComponentName(); - class TestElement extends DNA.Component {} - DNA.define(is, TestElement); - }).not.toThrow(); - }); + it('should define a component', () => { + expect(() => { + const is = getComponentName(); + class TestElement extends DNA.Component {} + DNA.define(is, TestElement); + }).not.toThrow(); + }); + + it('should define a builtin component', () => { + expect(() => { + const is = getComponentName(); + class TestElement extends DNA.Component {} + DNA.define(is, TestElement, { + extends: 'article', + }); + }).not.toThrow(); + }); - it('should extend a native node', () => { - expect(() => { - const is = getComponentName(); - class TestElement extends DNA.Component {} - DNA.define(is, TestElement, { - extends: 'article', - }); - }).not.toThrow(); - }); + it('should throw on construct', () => { + expect(() => { + const is = getComponentName(); + class TestElement extends DNA.Component {} + DNA.define(is, TestElement); - it('should create a base class starting from the anchor base class', () => { - expect(() => { - class TestElement extends DNA.builtin.HTMLAnchorElement {} - DNA.define(getComponentName(), TestElement, { extends: 'a' }); - }).not.toThrow(); - }); + new TestElement(); + }).toThrow(); }); }, 10 * 1000 From 2e70540adb6c2d3bc7cd4e307b2d0e6ac6aec6d7 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Fri, 3 Nov 2023 09:08:21 +0100 Subject: [PATCH 33/44] Use helpers in polyfill --- src/helpers.ts | 5 ----- src/polyfill.ts | 14 ++++++-------- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/helpers.ts b/src/helpers.ts index 5da8579c..79dbc778 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -40,11 +40,6 @@ export const getPrototypeOf = Object.getPrototypeOf; */ export const setPrototypeOf = Object.setPrototypeOf; -/** - * Alias to Object.prototype.toString. - */ -export const toString = Object.prototype.toString; - /** * Alias to Object.prototype.hasOwnProperty. */ diff --git a/src/polyfill.ts b/src/polyfill.ts index 0094d872..185341f9 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -1,18 +1,16 @@ import type { CustomElement, CustomElementConstructor } from './CustomElement'; import * as Elements from './Elements'; -import { isBrowser } from './helpers'; +import { getPrototypeOf, hasOwnProperty, isBrowser, setPrototypeOf } from './helpers'; /** * Register a polyfill for Customized built-in elements. */ function polyfillBuiltin() { - const win = window; - const setPrototypeOf = Object.setPrototypeOf; const tagNames: Record = {}; const CE_SYMBOL = Symbol(); const nativeCreateElement = document.createElement.bind(document); const builtin = Object.values(Elements); - const customElements = win.customElements; + const customElements = window.customElements; const define = customElements.define.bind(customElements); const upgrade = customElements.upgrade.bind(customElements); let childListObserver: MutationObserver; @@ -61,16 +59,16 @@ function polyfillBuiltin() { } let CurrentConstructor = constructor; - let ParentCostructor = Object.getPrototypeOf(CurrentConstructor) as CustomElementConstructor; + let ParentCostructor = getPrototypeOf(CurrentConstructor) as CustomElementConstructor; while (!builtin.includes(ParentCostructor)) { CurrentConstructor = ParentCostructor; - if (Object.hasOwnProperty.call(CurrentConstructor, '__shim')) { + if (hasOwnProperty.call(CurrentConstructor, '__shim')) { return; } - ParentCostructor = Object.getPrototypeOf(CurrentConstructor) as CustomElementConstructor; + ParentCostructor = getPrototypeOf(CurrentConstructor) as CustomElementConstructor; } - if (Object.hasOwnProperty.call(CurrentConstructor, '__shim')) { + if (hasOwnProperty.call(CurrentConstructor, '__shim')) { return; } From ecbbecc0a550a352b0a937fe102e4f5d2f609ff1 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 6 Nov 2023 11:20:56 +0100 Subject: [PATCH 34/44] Update docs --- README.md | 94 +++++++++++---------------------------------- docs/Home.md | 64 +++++------------------------- docs/get-started.md | 4 +- 3 files changed, 34 insertions(+), 128 deletions(-) diff --git a/README.md b/README.md index 3e211e15..85102fdb 100644 --- a/README.md +++ b/README.md @@ -12,51 +12,46 @@ NPM

    ---- +## Features -DNA is a view library with first class support for reactive and functional Web Components. No polyfills are required: DNA uses its template engine to handle Custom Elements life cycle, resulting more efficient, reliable and light. +DNA aims to unleash the true power of [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) through a declarative definition API, with builtin elements extension support and a simpler composition mechanism (yes, it does not use ShadowDOM). -### Design Web Components +### Customized built-in elements -DNA does not introduce any custom pattern for Component definitions, since it is based on the standard Custom Elements specifications, so the life cycle is almost the same, with some helper methods. +DNA simplifies and promotes the usage of customized built-in elements. Customized built-in elements inherit methods and properties from standard HTML, preserving usability and accessibility features / [more ➪](./docs/get-started.md#Extending-native-elements) -### Fast and reliable +### Properties, states and attributes -In order to be fast, predictive and easier to install, DNA uses a custom template engine. Components automatically re-render when the state change and only the necessary patches are applied to the DOM tree thanks to an in-place diffing algorithm. +DNA provides `@property` and `@state` decorators to add reactivity to component's class fields. Every change is reflected to the component's template. Properties and states can be watched, synced with attributes and dispatch changes as events / [more ➪](./docs/properties.md) -### Tagged templates and JSX +### Listeners and async events -If you are familiar with JSX, you can write your templates using the React syntax, but if you prefer to use standard JavaScript you can also use template strings to avoid the build step in your workflow. +DNA uses event delegation to listen events from component's elements or slotted contents. It also provides a `@listen` decorator to simplify the event delegation process. Events can be async and can be dispatched from the component's class / [more ➪](./docs/events.md) -### Properties, slots, Promises and Observables! +### Slots -DNA comes with a lot of features in a very small package. You can use `` elements, observe properties changes and delegate events. It can also resolve `Promise`s, pipe `Observable`s and subscribe `Signal`s directly in the template. +DNA does not use ShadowDOM to render slotted children, but a custom implementation named **Quantum**. This simplifies the usage of custom elements inside forms and provides a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can use `` even inside buttons / [more ➪](./docs/templates.md#slotted-children) ## Get the library Usage via [unpkg.com](https://unpkg.com/) as ES6 module: ```js -import { Component, customElements, html, ... } from 'https://unpkg.com/@chialab/dna?module'; +import { Component, define, html, ... } from 'https://unpkg.com/@chialab/dna?module'; ``` -Install via NPM: +Or install via NPM: -```sh -$ npm i @chialab/dna -$ yarn add @chialab/dna +``` +npm i @chialab/dna ``` -```ts -import { Component, customElements, html, ... } from '@chialab/dna'; +``` +yarn add @chialab/dna ``` ## Define a Component -This is an example of a Component defined via DNA. Please refer to the [documentation](https://www.chialab.io/p/dna) for more examples and cases of use. - -**Define the component (TypeScript)** - ```tsx import { Component, customElement, listen, property } from '@chialab/dna'; @@ -85,58 +80,12 @@ class HelloWorld extends Component { } ``` -**Define the component (JavaScript)** - -```ts -import { Component, customElements, html, listen, property } from '@chialab/dna'; - -class HelloWorld extends Component { - static get properties() { - return { - // define an observed property - name: { - type: String, - defaultValue: '', - }, - }; - } - - static get listeners() { - return { - // delegate an event - 'change input[name="firstName"]': function (event, target) { - this.name = target.value; - }, - }; - } - - render() { - return html` - -

    Hello ${this.name || 'World'}!

    - `; - } -} - -customElements.define('hello-world', HelloWorld); -``` - Then use the element in your HTML: ```html ``` -## Browsers support - -Tests are run against all ever green browsers, Internet Explorer and old Safari versions. DNA itself does not require any polyfill and it is distribute as ES6 module (with untranspiled classes and `async`/`await` statements), but some Babel helpers if you want to use decorators need support for `Symbol`, `Object.assign` and `Array.prototype.find`. Also, a polyfill for `Promise` is required in IE11 if you are using async methods or the registry's `whenDefined` method. - -[![Sauce Test Status](https://saucelabs.com/browser-matrix/chialab-sl-003.svg)](https://app.saucelabs.com/u/chialab-sl-003) - ---- - ## Development [![Build status](https://github.com/chialab/dna/workflows/Main/badge.svg)](https://github.com/chialab/dna/actions?query=workflow%3AMain) @@ -147,18 +96,21 @@ Tests are run against all ever green browsers, Internet Explorer and old Safari Install the dependencies and run the `build` script: ``` -$ yarn install -$ yarn build +yarn install +``` + +``` +yarn build ``` -This will generate the the ESM bundles in the `dist` folder, as well as the declaration files. +This will generate the bundles in the `dist` folder, as well as the declaration files. ### Test the project Run the `test` script: ``` -$ yarn test +yarn test ``` --- diff --git a/docs/Home.md b/docs/Home.md index 63700122..ebf4cc11 100644 --- a/docs/Home.md +++ b/docs/Home.md @@ -1,6 +1,4 @@ -DNA is a view library with first class support for reactive and functional Web Components. No polyfills are required: DNA uses its template engine to handle Custom Elements life cycle, resulting more efficient, reliable and light. - -**Define the component (TypeScript)** +DNA aims to unleash the true power of [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) through a declarative definition API, with builtin elements extension support and a simpler composition mechanism (yes, it does not use ShadowDOM). ```tsx import { Component, customElement, listen, property } from '@chialab/dna'; @@ -30,44 +28,6 @@ class HelloWorld extends Component { } ``` -**Define the component (JavaScript)** - -```ts -import { Component, define, html, listen, property } from '@chialab/dna'; - -class HelloWorld extends Component { - static get properties() { - return { - // define an observed property - name: { - type: String, - defaultValue: '', - }, - }; - } - - static get listeners() { - return { - // delegate an event - 'change input[name="firstName"]': function (event, target) { - this.name = target.value; - }, - }; - } - - render() { - return html` - -

    Hello ${this.name || 'World'}!

    - `; - } -} - -define('hello-world', HelloWorld); -``` - Then use the element in your HTML: ```html @@ -76,27 +36,21 @@ Then use the element in your HTML: ## Features -### Web Components Design - -DNA does not introduce any custom pattern for component definitions, since it is based on the standard Custom Elements specifications, so the life cycle is almost the same, with some helper methods. - -### Fast and reliable - -In order to be fast, predictive and easier to install, DNA uses a custom template engine. Components automatically re-render when the state change and only the necessary patches are applied to the DOM tree thanks to an in-place diffing algorithm. +### Customized built-in elements -### Tagged templates and JSX +DNA simplifies and promotes the usage of customized built-in elements. Customized built-in elements inherit methods and properties from standard HTML, preserving usability and accessibility features / [more ➪](./get-started#extending-native-elements) -If you are familiar with JSX, you can write your templates using the React syntax, but if you prefer to use standard JavaScript you can also use [template strings](./templates) to avoid the build step in your workflow. +### Properties, states and attributes -### Properties, slots, Promises, Observables and Signals! +DNA provides `@property` and `@state` decorators to add reactivity to component's class fields. Every change is reflected to the component's template. Properties and states can be watched, synced with attributes and dispatch changes as events / [more ➪](./properties) -DNA comes with a lot of features in a very small package. You can use `` elements, observe properties changes and delegate events. It can also resolve `Promise`s, pipe `Observable`s and subscribe `Signal`s directly in the template. +### Listeners and async events -## Browsers support +DNA uses event delegation to listen events from component's elements or slotted contents. It also provides a `@listen` decorator to simplify the event delegation process. Events can be async and can be dispatched from the component's class / [more ➪](./events) -Tests are run against all supported browsers, including old Safari 12 and Edge 17 versions. DNA itself does not require any polyfill and it is distribute as ES6 module (with untranspiled classes and `async`/`await` statements). +### Slots -![Browser compaitibility table](https://app.saucelabs.com/browser-matrix/chialab-sl-003.svg) +DNA does not use ShadowDOM to render slotted children, but a custom implementation named **Quantum**. This simplifies the usage of custom elements inside forms and provides a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can use `` even inside buttons / [more ➪](./templates#slotted-children) ## Ok, I'm in! diff --git a/docs/get-started.md b/docs/get-started.md index 44093f08..3d575634 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -12,7 +12,7 @@ import { Component, define } from 'https://unpkg.com/@chialab/dna?module'; ### Setup a bundler -The DNA environment is pretty common (if you are familiar with other libraries like React, Angular, LitElement etc.): +The DNA environment is pretty common (if you are familiar with other libraries like React, Angular, Lit etc.): 1. Make sure you have a recent [Node.js](https://nodejs.org/en/) version installed 2. Setup a bundler ([Rollup](https://rollupjs.org) is recommended, but [Webpack](https://webpack.js.org/) and [Parcel](https://parceljs.org/) are equally good choices) @@ -97,7 +97,7 @@ DNA components are classes which extends the base HTMLElement with helpers for [ Defining a component means to link a HTML tag with the element's constructor, as described by the Custom Elements specification. In this example we are going to use the `customElement` decorator method to register the component in the DNA registry: -```ts +```tsx import { Component, customElement, property } from '@chialab/dna'; @customElement('hello-world') From 804609d67be014f4d99961fa20cd2067b0965626 Mon Sep 17 00:00:00 2001 From: Edoardo Cavazza Date: Mon, 6 Nov 2023 15:43:08 +0100 Subject: [PATCH 35/44] Refactored docs --- .eslintignore | 2 + .github/workflows/pages.yml | 50 ++ .github/workflows/wiki.yml | 29 -- .gitignore | 2 + .prettierignore | 2 + README.md | 8 +- docs/.vitepress/config.js | 84 ++++ .../theme/components/HomeFeatures.vue | 74 +++ .../.vitepress/theme/components/HomeFrame.vue | 85 ++++ docs/.vitepress/theme/index.js | 14 + docs/.vitepress/theme/theme.css | 7 + docs/Home.md | 57 --- docs/_Footer.md | 8 - docs/_Header.md | 13 - docs/_Sidebar.md | 45 -- docs/get-started.md | 253 ----------- docs/{ => guide}/events.md | 67 ++- docs/guide/index.md | 226 ++++++++++ docs/{ => guide}/integrations.md | 12 +- docs/{ => guide}/life-cycle.md | 2 - docs/{ => guide}/properties.md | 51 ++- docs/{templates.md => guide/rendering.md} | 359 +++++---------- docs/{ => guide}/styling.md | 25 +- docs/{ => guide}/tools.md | 78 ++-- docs/index.md | 16 + package.json | 5 +- .../vitest-browserstack-provider.d.ts | 13 + .../providers/vitest-browserstack-provider.ts | 177 ++++++++ vitest.browserstack.ts | 103 +++++ yarn.lock | 426 +++++++++++++++++- 30 files changed, 1540 insertions(+), 753 deletions(-) create mode 100644 .github/workflows/pages.yml delete mode 100644 .github/workflows/wiki.yml create mode 100644 docs/.vitepress/config.js create mode 100644 docs/.vitepress/theme/components/HomeFeatures.vue create mode 100644 docs/.vitepress/theme/components/HomeFrame.vue create mode 100644 docs/.vitepress/theme/index.js create mode 100644 docs/.vitepress/theme/theme.css delete mode 100644 docs/Home.md delete mode 100644 docs/_Footer.md delete mode 100644 docs/_Header.md delete mode 100644 docs/_Sidebar.md delete mode 100644 docs/get-started.md rename docs/{ => guide}/events.md (93%) create mode 100644 docs/guide/index.md rename docs/{ => guide}/integrations.md (92%) rename docs/{ => guide}/life-cycle.md (90%) rename docs/{ => guide}/properties.md (93%) rename docs/{templates.md => guide/rendering.md} (77%) rename docs/{ => guide}/styling.md (91%) rename docs/{ => guide}/tools.md (86%) create mode 100644 docs/index.md create mode 100644 test/providers/vitest-browserstack-provider.d.ts create mode 100644 test/providers/vitest-browserstack-provider.ts create mode 100644 vitest.browserstack.ts diff --git a/.eslintignore b/.eslintignore index 009af543..aefa5cdf 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,4 @@ dist coverage +docs/.vitepress/dist +docs/.vitepress/cache diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml new file mode 100644 index 00000000..43150fcf --- /dev/null +++ b/.github/workflows/pages.yml @@ -0,0 +1,50 @@ +name: Pages +on: + workflow_call: + +jobs: + build: + name: Build + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - name: Checkout the repository + uses: actions/checkout@v4 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + cache: yarn + + - name: Setup Pages + id: pages + uses: actions/configure-pages@v3 + + - name: Install project dependencies + run: yarn install + + - name: Build Documentation + run: yarn docs:build + + - name: Upload artifact + uses: actions/upload-pages-artifact@v1 + with: + path: public + + deploy: + name: Deploy + runs-on: ubuntu-latest + needs: build + + permissions: + pages: write + id-token: write + + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 diff --git a/.github/workflows/wiki.yml b/.github/workflows/wiki.yml deleted file mode 100644 index 099bc7a4..00000000 --- a/.github/workflows/wiki.yml +++ /dev/null @@ -1,29 +0,0 @@ -name: Wiki -on: - push: - branches: [main] - paths: ['docs/**'] - tags-ignore: ['*'] -concurrency: - group: ${{ github.workflow }} - cancel-in-progress: true - -jobs: - deploy: - name: Deploy Wiki - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Push documentation to wiki - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_WIKI_TOKEN }} - run: | - git config --global user.email "dev@chialab.io" - git config --global user.name "chialab-io" - git clone https://${GITHUB_TOKEN}@github.com/chialab/dna.wiki.git wiki - cd wiki - cp -rf ../docs/* . - git add . - git diff-index --quiet HEAD || git commit -m "Lastest api reference auto-pushed to wiki" - git push --set-upstream origin --follow-tags - cd .. diff --git a/.gitignore b/.gitignore index 177575b5..80c2d3c9 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ coverage types dist tsconfig.tsbuildinfo +docs/.vitepress/dist +docs/.vitepress/cache diff --git a/.prettierignore b/.prettierignore index 009af543..aefa5cdf 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,4 @@ dist coverage +docs/.vitepress/dist +docs/.vitepress/cache diff --git a/README.md b/README.md index 85102fdb..e154dda6 100644 --- a/README.md +++ b/README.md @@ -18,19 +18,19 @@ DNA aims to unleash the true power of [Custom Elements](https://developer.mozill ### Customized built-in elements -DNA simplifies and promotes the usage of customized built-in elements. Customized built-in elements inherit methods and properties from standard HTML, preserving usability and accessibility features / [more ➪](./docs/get-started.md#Extending-native-elements) +DNA simplifies and promotes the usage of customized built-in elements. Customized built-in elements inherit methods and properties from standard HTML, preserving usability and accessibility features. ### Properties, states and attributes -DNA provides `@property` and `@state` decorators to add reactivity to component's class fields. Every change is reflected to the component's template. Properties and states can be watched, synced with attributes and dispatch changes as events / [more ➪](./docs/properties.md) +DNA provides `@property` and `@state` decorators to add reactivity to component's class fields. Every change is reflected to the component's template. Properties and states can be watched, synced with attributes and dispatch changes as events. ### Listeners and async events -DNA uses event delegation to listen events from component's elements or slotted contents. It also provides a `@listen` decorator to simplify the event delegation process. Events can be async and can be dispatched from the component's class / [more ➪](./docs/events.md) +DNA uses event delegation to listen events from component's elements or slotted contents. It also provides a `@listen` decorator to simplify the event delegation process. Events can be async and can be dispatched from the component's class. ### Slots -DNA does not use ShadowDOM to render slotted children, but a custom implementation named **Quantum**. This simplifies the usage of custom elements inside forms and provides a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can use `` even inside buttons / [more ➪](./docs/templates.md#slotted-children) +DNA does not use ShadowDOM to render slotted children, but a custom implementation named [**Quantum**](https://chialab.github.io/quantum/). This simplifies the usage of custom elements inside forms and provides a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can use `` even inside buttons. ## Get the library diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js new file mode 100644 index 00000000..e0294ac1 --- /dev/null +++ b/docs/.vitepress/config.js @@ -0,0 +1,84 @@ +import { defineConfig } from 'vitepress'; + +// https://vitepress.dev/reference/site-config +export default defineConfig({ + title: 'DNA', + description: 'Progressive Web Components', + base: '/dna/', + outDir: '../public', + + head: [['link', { rel: 'icon', href: 'https://www.chialab.it/favicon.png' }]], + + themeConfig: { + logo: 'https://raw.githubusercontent.com/chialab/dna/main/logo.svg', + + // https://vitepress.dev/reference/default-theme-config + nav: [ + { + text: 'Home', + link: '/', + }, + { + text: 'Guide', + link: '/guide/', + }, + { + text: 'Chialab.io', + link: 'https://www.chialab.io', + }, + ], + + sidebar: [ + { + text: 'Guide', + items: [ + { + text: 'Get started', + link: '/guide/', + }, + { + text: 'Reactive properties', + link: '/guide/properties', + }, + { + text: 'Life cycle', + link: '/guide/life-cycle', + }, + { + text: 'Events', + link: '/guide/events', + }, + { + text: 'Rendering', + link: '/guide/rendering', + }, + { + text: 'Styling', + link: '/guide/styling', + }, + { + text: 'Integrations', + link: '/guide/integrations', + }, + { + text: 'Tools', + link: '/guide/tools', + }, + ], + }, + ], + + socialLinks: [ + { + icon: 'github', + link: 'https://github.com/chialab/dna', + }, + ], + + footer: { + message: 'Released under the MIT License.', + copyright: 'Copyright © 2023 - DNA project - Chialab', + }, + }, + lastUpdated: true, +}); diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue new file mode 100644 index 00000000..c93240d7 --- /dev/null +++ b/docs/.vitepress/theme/components/HomeFeatures.vue @@ -0,0 +1,74 @@ + + + diff --git a/docs/.vitepress/theme/components/HomeFrame.vue b/docs/.vitepress/theme/components/HomeFrame.vue new file mode 100644 index 00000000..426ea407 --- /dev/null +++ b/docs/.vitepress/theme/components/HomeFrame.vue @@ -0,0 +1,85 @@ + + + diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js new file mode 100644 index 00000000..b739adaf --- /dev/null +++ b/docs/.vitepress/theme/index.js @@ -0,0 +1,14 @@ +import DefaultTheme from 'vitepress/theme'; +import { h } from 'vue'; +import HomeFeatures from './components/HomeFeatures.vue'; +import HomeFrame from './components/HomeFrame.vue'; +import './theme.css'; + +export default { + extends: DefaultTheme, + Layout() { + return h(DefaultTheme.Layout, null, { + 'home-features-after': () => [h(HomeFeatures), h(HomeFrame)], + }); + }, +}; diff --git a/docs/.vitepress/theme/theme.css b/docs/.vitepress/theme/theme.css new file mode 100644 index 00000000..e7d34f88 --- /dev/null +++ b/docs/.vitepress/theme/theme.css @@ -0,0 +1,7 @@ +:root { + --vp-c-brand-1: #f07c00; + --vp-c-brand-2: #d56e00; + --vp-button-brand-bg: var(--vp-c-brand-1); + --vp-button-brand-hover-bg: #d56e00; + --vp-button-brand-active-bg: #ce5900; +} diff --git a/docs/Home.md b/docs/Home.md deleted file mode 100644 index ebf4cc11..00000000 --- a/docs/Home.md +++ /dev/null @@ -1,57 +0,0 @@ -DNA aims to unleash the true power of [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) through a declarative definition API, with builtin elements extension support and a simpler composition mechanism (yes, it does not use ShadowDOM). - -```tsx -import { Component, customElement, listen, property } from '@chialab/dna'; - -@customElement('hello-world') -class HelloWorld extends Component { - // define an observed property - @property() name: string = ''; - - render() { - return ( - <> - -

    Hello {this.name || 'World'}!

    - - ); - } - - // delegate an event - @listen('change', 'input[name="firstName"]') - private onChange(event: Event, target: HTMLInputElement) { - this.name = target.value; - } -} -``` - -Then use the element in your HTML: - -```html - -``` - -## Features - -### Customized built-in elements - -DNA simplifies and promotes the usage of customized built-in elements. Customized built-in elements inherit methods and properties from standard HTML, preserving usability and accessibility features / [more ➪](./get-started#extending-native-elements) - -### Properties, states and attributes - -DNA provides `@property` and `@state` decorators to add reactivity to component's class fields. Every change is reflected to the component's template. Properties and states can be watched, synced with attributes and dispatch changes as events / [more ➪](./properties) - -### Listeners and async events - -DNA uses event delegation to listen events from component's elements or slotted contents. It also provides a `@listen` decorator to simplify the event delegation process. Events can be async and can be dispatched from the component's class / [more ➪](./events) - -### Slots - -DNA does not use ShadowDOM to render slotted children, but a custom implementation named **Quantum**. This simplifies the usage of custom elements inside forms and provides a more flexible management of slotted contents. In fact, you can iterate, wrap, map or alter slotted elements. And differently from ShadowDOM, it also works for builtin elements, so you can use `` even inside buttons / [more ➪](./templates#slotted-children) - -## Ok, I'm in! - -Read the [Get started](./get-started) page or try out DNA in the [sandbox](https://stackblitz.com/edit/dna-sandbox?embed=1&file=HelloWorld.ts&hideExplorer=1&hideNavigation=1)! diff --git a/docs/_Footer.md b/docs/_Footer.md deleted file mode 100644 index d21c25c8..00000000 --- a/docs/_Footer.md +++ /dev/null @@ -1,8 +0,0 @@ -
    - -[![Chialab logo](https://user-images.githubusercontent.com/3907295/178222939-cf2b8994-7a0b-4b78-8458-8ff4d432c5a8.png)](https://www.chialab.it) - -[Chialab](<(https://www.chialab.it)>) is a design company. -By developing strategy, design, software and content, we generate exciting relationships between brands and people. - -
    diff --git a/docs/_Header.md b/docs/_Header.md deleted file mode 100644 index f70a1669..00000000 --- a/docs/_Header.md +++ /dev/null @@ -1,13 +0,0 @@ -

    - - - - - - - -

    - -

    - DNA • Progressive Web Components -

    diff --git a/docs/_Sidebar.md b/docs/_Sidebar.md deleted file mode 100644 index 1d821786..00000000 --- a/docs/_Sidebar.md +++ /dev/null @@ -1,45 +0,0 @@ -- [Introduction](./home) -- [Get started](./get-started) - - [Install](./get-started#get-started) - - [Define a component](./get-started#define-a-component) - - [Extending native elements](./get-started#extending-native-elements) - - [Render a component](./get-started#render-a-component) -- [Templates](./templates) - - [Render](./templates#templates) - - [JSX](./templates#jsx) - - [Expressions](./templates#expressions) - - [Functional components](./templates#functional-components) - - [Nodes and references](./templates#nodes-and-references) - - [Slotted children](./templates#slotted-children) - - [Keyed elements](./templates#keyed-elements) -- [Reactive properties](./properties) - - [Declare a property](./properties#declare-a-property) - - [Declare a state](./properties#declare-a-state) - - [Configuration](./properties#configuration) - - [Accessors](./properties#accessors) - - [Observers](./properties#observers) - - [Attributes](./properties#attributes) -- [Events](./events) - - [Declarative listeners](./events#declarative-listeners) - - [Template listeners](./events#template-listeners) - - [Delegation](./events#delegation) - - [Dispatching events](./events#dispatching-events) - - [Async dispatch](./events#async-dispatch) -- [Life cycle](./life-cycle) - - [connectedCallback](./life-cycle#connectedcallback) - - [disconnectedCallback](./life-cycle#disconnectedcallback) - - [attributeChangedCallback](./life-cycle#attributechangedcallback) - - [propertyChangedCallback](./life-cycle#propertychangedcallback) - - [stateChangedCallback](./life-cycle#statechangedcallback) -- [Styling](./styling) - - [Scoped styles](./styling#scoped-styles) - - [Native CSS modules](./styling#native-css-modules) - - [Other techniques](./styling#other-styling-techniques) - - [The `css` helper](./styling#the-css-helper) -- [Integrations](./integrations) - - [Frameworks](./integrations#frameworks) - - [View libraries](./integrations#view-libraries) -- [Tools](./tools) -- [Migrations](./migrations) - - [v3 -> v4](./migrations#from-v3-to-v4) - - [v2 -> v3](./migrations#from-v2-to-v3) diff --git a/docs/get-started.md b/docs/get-started.md deleted file mode 100644 index 3d575634..00000000 --- a/docs/get-started.md +++ /dev/null @@ -1,253 +0,0 @@ -# Get started - -The recommended way to use DNA is to setup a project with Babel or TypeScript which has a lot of life saver features like modules, decorators and typechecking, but it also works untranspiled in the browser. - -### Use a CDN - -You can use DNA via CDN thanks to the [Unpkg](https://unpkg.com/): - -```ts -import { Component, define } from 'https://unpkg.com/@chialab/dna?module'; -``` - -### Setup a bundler - -The DNA environment is pretty common (if you are familiar with other libraries like React, Angular, Lit etc.): - -1. Make sure you have a recent [Node.js](https://nodejs.org/en/) version installed -2. Setup a bundler ([Rollup](https://rollupjs.org) is recommended, but [Webpack](https://webpack.js.org/) and [Parcel](https://parceljs.org/) are equally good choices) -3. Setup Babel ([Rollup](https://github.com/rollup/rollup-plugin-babel), [Webpack](https://github.com/babel/babel-loader), [Parcel](https://parceljs.org/transforms.html#babel)) or TypeScript ([Rollup](https://github.com/rollup/rollup-plugin-typescript), [Webpack](https://webpack.js.org/guides/typescript/), [Parcel](https://parceljs.org/transforms.html#typescript)): - - - if your choice is Babel, please make sure all this plugins are loaded in order to use all DNA features: - - ```sh - $ npm i -D \ - @babel/plugin-proposal-decorators \ - @babel/plugin-proposal-class-properties - ``` - - **.babelrc** - - ```json - { - "plugins": ["@babel/plugin-proposal-decorators", "@babel/plugin-proposal-class-properties"] - } - ``` - - If you want to use React JSX instead of template strings, you will also need to install the [`@babel/plugin-transform-react-jsx`](https://www.npmjs.com/package/@babel/plugin-transform-react-jsx): - - **Classic** - - ```json - { - "plugins": [ - [ - "@babel/plugin-transform-react-jsx", - { - "pragma": "h" - } - ] - ] - } - ``` - - **Automatic** - - ```json - { - "plugins": [ - [ - "@babel/plugin-transform-react-jsx", - { - "runtime": "automatic", - "importSource": "@chialab/dna" - } - ] - ] - } - ``` - - Since the DNA `html` method is provided by the [`htm`](https://github.com/developit/htm) module by [Jason Miller](https://github.com/developit), you can also use the [`babel-plugin-htm`](https://www.npmjs.com/package/babel-plugin-htm) to preprocess templates. - - ```json - { - "plugins": [ - [ - "babel-plugin-htm", - { - "pragma": "h", - "import": { - "module": "@chialab/dna" - } - } - ] - ] - } - ``` - -4. Install DNA - ```sh - $ npm i @chialab/dna - ``` - -## Define a component - -DNA components are classes which extends the base HTMLElement with helpers for [templating](./templates), [styling](./styles), [events delegation](./events) and [life cycle](./life-cycle). - -Defining a component means to link a HTML tag with the element's constructor, as described by the Custom Elements specification. -In this example we are going to use the `customElement` decorator method to register the component in the DNA registry: - -```tsx -import { Component, customElement, property } from '@chialab/dna'; - -@customElement('hello-world') -class HelloWorld extends Component { - @property() name: string = ''; - - // define a template - render() { - return

    Hello {this.name || 'world'}!

    ; - } -} -``` - -
    -JavaScript -
    - -You can use the class decorator if you are using TypeScript or this Babel plugin, otherwise you have to fallback directly using `customElements.define`: - -```ts -import { Component, define, html } from '@chialab/dna'; - -class HelloWorld extends Component { - static get properties() { - return { - name: { - type: String, - defaultValue: '', - }, - }; - } - - // define a template - render() { - return html`

    Hello ${this.name || 'world'}!

    `; - } -} - -define('hello-world', HelloWorld); -``` - -
    -
    - -### Extending native elements - -Custom Element specification allows to define an element using the `is` attribute instead of the tag. -This is very useful when you want to extend a HTML tag, preserving its semanthic meaning. For example: - -```tsx -import { builtin, customElement, property } from '@chialab/dna'; - -@customElement('alert-dialog', { - extends: 'dialog', -}) -class AlertDialog extends builtin.HTMLDialogElement { - @property() title: string = ''; - - render() { - return

    {this.title}

    ; - } -} -``` - -
    -JavaScript -
    - -```ts -import { builtin, define, html } from '@chialab/dna'; - -class AlertDialog extends builtin.HTMLDialogElement { - static get properties() { - return { - title: { - type: String, - defaultValue: '', - }, - }; - } - - render() { - return html`

    ${this.title}

    `; - } -} - -define('alert-dialog', AlertDialog, { - extends: 'dialog', -}); -``` - -
    -
    - -In the example above, a new instance of `AlertDialog` inherits all class methods and properties, but its `tagName` will be `DIALOG`. - -> **Note** -> Extending builtin elements also preserves accessibility and usability features: extending the `BUTTON` element will make the component reachable and clickable via keyboard navigation without setting `role` and `tabindex`. - -## Render a component - -The `render` helper is used by DNA components to generate their templates, but it can be used to add a component or a template in a specific point of the DOM tree, for example to instantiate the root component of your application: - -```ts -import { Component, customElement, render } from '@chialab/dna'; - -@customElement('x-card') -class Card extends Component { - ... -} - -render(, document.body); -``` - -During the render cycle, DNA execs an in-place DOM diffing to update already existing nodes and remove the unused ones, so you can safely re-render a template. At the end of the render cycle, DNA will remove any node outside the template, including elements and texts of the original HTML document. - -This function accepts the template as first argument and an optional render root node as second one. You can also use bound tag name instead of constructor reference: - -```ts -import { Component, customElement, render } from '@chialab/dna'; - -@customElement('x-card') -class Card extends Component { - ... -} - -render(, document.body); -``` - -It also work for extended native tags: - -```ts -import { Component, customElement, render } from '@chialab/dna'; - -@customElement('x-article', { - extends: 'article', -}) -class Article extends Component { - ... -} - -render(
    , document.body); -``` - -You can use the `render` method to inject more complex templates too: - -```ts -import { render } from '@chialab/dna'; - -render(
    -

    Title

    -
    , document.body); -``` diff --git a/docs/events.md b/docs/guide/events.md similarity index 93% rename from docs/events.md rename to docs/guide/events.md index 50fff34b..b66184d2 100644 --- a/docs/events.md +++ b/docs/guide/events.md @@ -5,9 +5,11 @@ DNA add some extra features like declarative event listeners and delegations. ## Declarative listeners -You can declare event listeners on a component using the `listen` decorator: +You can declare event listeners on a component using the `listen` decorator or the `listeners` static accessor: -```ts +::: code-group + +```ts [@listen] import { builtin, customElement, listen } from '@chialab/dna'; @customElement('x-button', { @@ -26,9 +28,7 @@ class Button extends builtin.HTMLButtonElement { } ``` -Or the `listeners` static accessor: - -```ts +```ts [get listeners] import { builtin, define } from '@chialab/dna'; class Button extends builtin.HTMLButtonElement { @@ -49,9 +49,13 @@ define('x-button', Button, { }); ``` +::: + Declarations can be configured with [event listener options](<(https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener)>): -```ts +::: code-group + +```ts [@listen] import { Component, customElement, listen } from '@chialab/dna'; @customElement('x-tracker') @@ -63,11 +67,7 @@ class Tracker extends Component { } ``` -
    -JavaScript -
    - -```ts +```ts [get listeners] import { Component, define } from '@chialab/dna'; class Tracker extends Component { @@ -86,14 +86,13 @@ class Tracker extends Component { define('x-tracker', Tracker); ``` -
    -
    +::: ## Template listeners Listeners can be added via a template attribute named as the event with the `on` prefix: -```ts +```tsx import { Component, customElement } from '@chialab/dna'; @customElement('x-header', { @@ -101,12 +100,14 @@ import { Component, customElement } from '@chialab/dna'; }) class Header extends Component { render() { - return <> -

    {this.title}

    - - ; + return ( + <> +

    {this.title}

    + + + ); } } ``` @@ -115,7 +116,9 @@ class Header extends Component { Event listeners are automatically bound with the component. If you need a different target, such as the document or the window, you can pass the target to the declaration. In this case, event listeners are added once the element has been added to the DOM tree and removed once disconnected. -```ts +::: code-group + +```ts [@listen] import { Component, customElement, listen } from '@chialab/dna'; @customElement('x-tracker') @@ -127,11 +130,7 @@ class Tracker extends Component { } ``` -
    -JavaScript -
    - -```ts +```ts [get listeners] import { Component, define } from '@chialab/dna'; class Tracker extends Component { @@ -151,8 +150,7 @@ class Tracker extends Component { define('x-tracker', Tracker); ``` -
    -
    +::: ## Delegation @@ -160,7 +158,9 @@ DNA supports event delegation for both imperatively and declaratively declaratio Using the `listen` decorator or the `listeners` static getter, you can specify the delegated child selector after the event name in the declaration key: -```ts +::: code-group + +```ts [@listen] import { builtin, customElement, listen } from '@chialab/dna'; @customElement('x-dialog', { @@ -174,11 +174,7 @@ class Dialog extends builtin.HTMLDialogElement { } ``` -
    -JavaScript -
    - -```ts +```ts [get listeners] import { builtin, define } from '@chialab/dna'; class Dialog extends builtin.HTMLDialogElement { @@ -199,8 +195,7 @@ define('x-dialog', Dialog, { }); ``` -
    -
    +::: You can also use `delegateEventListener` and `undelegateEventListener` methods: diff --git a/docs/guide/index.md b/docs/guide/index.md new file mode 100644 index 00000000..9d93c42b --- /dev/null +++ b/docs/guide/index.md @@ -0,0 +1,226 @@ +# Get started + +The recommended way to use DNA is to setup a project with Babel or TypeScript which has a lot of life saver features like modules, decorators and typechecking, but it also works untranspiled in the browser. + +## Install + +DNA is published to the NPM registry + +::: code-group + +```bash [npm] +npm install @chialab/dna +``` + +```bash [yarn] +yarn add @chialab/dna +``` + +```bash [pnpm] +pnpm add @chialab/dna +``` + +::: + +### or use a CDN + +You can use DNA via CDN thanks to [unpkg](https://unpkg.com/): + +```ts +import { Component, define } from 'https://unpkg.com/@chialab/dna?module'; +``` + +## Configure JSX + +### Typescript + +::: code-group + +```json [tsconfig.json] +{ + "compilerOptions": { + "experimentalDecorators": true, + "jsx": "react-jsx", + "jsxImportSource": "@chialab/dna" + } +} +``` + +::: + +### Babel + +::: code-group + +```json [babel.config.json] +{ + "plugins": [ + [ + "@babel/plugin-transform-react-jsx", + { + "pragma": "h", + "pragmaFrag": "Fragment" + } + ] + ] +} +``` + +::: + +## Define a component + +DNA components are classes which extends the base HTMLElement with helpers for [templating](./templates), [styling](./styles), [events delegation](./events) and [life cycle](./life-cycle). + +Defining a component means to link a HTML tag with the element's constructor, as described by the Custom Elements specification. +In this example we are going to use the `customElement` decorator method to register the component in the DNA registry: + +::: code-group + +```tsx [TypeScript] +import { Component, customElement, property } from '@chialab/dna'; + +@customElement('hello-world') +class HelloWorld extends Component { + @property() name: string = ''; + + render() { + return

    Hello {this.name || 'world'}!

    ; + } +} +``` + +```ts [JavaScript] +import { Component, define, html } from '@chialab/dna'; + +class HelloWorld extends Component { + static get properties() { + return { + name: { + type: String, + defaultValue: '', + }, + }; + } + + render() { + return html`

    Hello ${this.name || 'world'}!

    `; + } +} + +define('hello-world', HelloWorld); +``` + +::: + +### Extending native elements + +Custom Element specification allows to define an element using the `is` attribute instead of the tag. +This is very useful when you want to extend a HTML tag, preserving its semanthic meaning. For example: + +::: code-group + +```tsx [TypeScript] +import { builtin, customElement, property } from '@chialab/dna'; + +@customElement('alert-dialog', { + extends: 'dialog', +}) +class AlertDialog extends builtin.HTMLDialogElement { + @property() title: string = ''; + + render() { + return

    {this.title}

    ; + } +} +``` + +```ts [JavaScript] +import { builtin, define, html } from '@chialab/dna'; + +class AlertDialog extends builtin.HTMLDialogElement { + static get properties() { + return { + title: { + type: String, + defaultValue: '', + }, + }; + } + + render() { + return html`

    ${this.title}

    `; + } +} + +define('alert-dialog', AlertDialog, { + extends: 'dialog', +}); +``` + +::: + +In the example above, a new instance of `AlertDialog` inherits all class methods and properties, but its `tagName` will be `DIALOG`. + +::: info + +Extending builtin elements also preserves accessibility and usability features: extending `HTMLButtonElement` will make the component reachable and clickable via keyboard navigation without setting `role` and `tabindex`. + +::: + +## Render a component + +The `render` helper is used by DNA components to generate their templates, but it can be used to add a component or a template in a specific point of the DOM tree, for example to instantiate the root component of your application: + +```tsx +import { Component, customElement, render } from '@chialab/dna'; + +@customElement('x-card') +class Card extends Component { + ... +} + +render(, document.body); +``` + +During the render cycle, DNA execs an in-place DOM diffing to update already existing nodes and remove the unused ones, so you can safely re-render a template. At the end of the render cycle, DNA will remove any node outside the template, including elements and texts of the original HTML document. + +This function accepts the template as first argument and an optional render root node as second one. You can also use bound tag name instead of constructor reference: + +::: code-group + +```tsx [main.tsx] +import { render } from '@chialab/dna'; +import './Card'; +import './Article'; + +render( + <> + +
    + , + document.body +); +``` + +```tsx [Card.tsx] +import { Component, customElement } from '@chialab/dna'; + +@customElement('x-card') +class Card extends Component { + // ... +} +``` + +```tsx [Article.tsx] +import { Component, customElement } from '@chialab/dna'; + +@customElement('x-article', { + extends: 'article', +}) +class Article extends Component { + // ... +} +``` + +::: diff --git a/docs/integrations.md b/docs/guide/integrations.md similarity index 92% rename from docs/integrations.md rename to docs/guide/integrations.md index f95692d9..4f6cd75d 100644 --- a/docs/integrations.md +++ b/docs/guide/integrations.md @@ -4,12 +4,12 @@ DNA uses its own render to handle slotted nodes in the light DOM. So, we run tests for integration with other frontend frameworks like React, Angular, Lit and Vue. Here is a list of passing tests and known issues: -| Framwework | Update a property | Slot text | Slot elements | Named | -| ---------- | :---------------: | :-------: | :-----------: | :---: | -| React | 🚧 | 🚧 | 🚧 | 🚧 | -| Lit | 🚧 | 🚧 | 🚧 | 🚧 | -| Vue | 🚧 | 🚧 | 🚧 | 🚧 | -| Angular | 🚧 | 🚧 | 🚧 | 🚧 | +| Framwework | Update a property | Slot text | Slot elements | Named slots | +| ---------- | :---------------: | :-------: | :-----------: | :---------: | +| React | 🚧 | 🚧 | 🚧 | 🚧 | +| Lit | 🚧 | 🚧 | 🚧 | 🚧 | +| Vue | 🚧 | 🚧 | 🚧 | 🚧 | +| Angular | 🚧 | 🚧 | 🚧 | 🚧 | ## View libraries diff --git a/docs/life-cycle.md b/docs/guide/life-cycle.md similarity index 90% rename from docs/life-cycle.md rename to docs/guide/life-cycle.md index 3aa3b113..f6f53e47 100644 --- a/docs/life-cycle.md +++ b/docs/guide/life-cycle.md @@ -8,8 +8,6 @@ DNA components follow the Custom Element life cycle specification, with the addi - [propertyChangedCallback](#propertychangedcallback) - [stateChangedCallback](#statechangedcallback) -Life cycle methods are dispatched by the DNA Virtual DOM implementation by default. When you are not using templates to update the tree, always use the [`DOM`](./render-a-component#manipulating-the-dom) helper. - ## connectedCallback From [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks): diff --git a/docs/properties.md b/docs/guide/properties.md similarity index 93% rename from docs/properties.md rename to docs/guide/properties.md index 5ce259f5..aa14959e 100644 --- a/docs/properties.md +++ b/docs/guide/properties.md @@ -1,14 +1,16 @@ # Reactive properties -Properties are class fields that are automatically in sync with element's DOM attributes. Every property change triggers a re-render of the component. Properties can be updated imperatively via JavaScript assignments or declaratively via template attributes. Every time a property had been update, it trigger the [`propertyChangedCallback`](./life-cycle#propertychangedcallback) method of the component. +Properties are class fields that are automatically in sync with element's DOM attributes. Every property change triggers a re-render of the component. Properties can be updated imperatively via JavaScript assignments or declaratively via template attributes. Every time a property had been update, it triggers the [`propertyChangedCallback`](./life-cycle#propertychangedcallback) method of the component. State properties store component's data that can't be configured from the outside using attributes. Like properties, states changes trigger a new render cycle and they have the dedicated [`stateChangedCallback`](./life-cycle#statechangedcallback) method callback ## Declare a property -Properties can be defined using the `property` decorator on a class field declaration: +Properties can be defined using the `property` decorator on a class field declaration or using the static `properties` getter: -```ts +::: code-group + +```ts [@property] import { Component, customElement, property } from '@chialab/dna'; @customElement('x-card') @@ -17,9 +19,7 @@ class Card extends Component { } ``` -Or using the static `properties` getter: - -```ts +```ts [get properties] import { Component, define } from '@chialab/dna'; class Card extends Component { @@ -33,13 +33,21 @@ class Card extends Component { define('x-card', Card); ``` -Once defined, the computed `observedAttributes` of the Card component will include the `age` attribute. +::: + +::: info + +Once defined, the computed `observedAttributes` of the `Card` component will include the `age` attribute. + +::: ## Declare a state -States can be defined using the `state` decorator on a class field declaration: +States can be defined using the `state` decorator on a class field declaration or using the static `properties` getter and configuring the field: -```ts +::: code-group + +```ts [@state] import { Component, customElement, state } from '@chialab/dna'; @customElement('x-card') @@ -48,9 +56,7 @@ class Card extends Component { } ``` -Or using the static `properties` getter and configuring the field: - -```ts +```ts [get properties] import { Component, define } from '@chialab/dna'; class Card extends Component { @@ -67,6 +73,8 @@ class Card extends Component { define('x-card', Card); ``` +::: + ## Configuration Properties can be configured passing a configuration object to the `property` decorator or as field value in the `properties` dictionary: @@ -116,8 +124,11 @@ class Card extends Component { The initial value of the property. -> **Note** -> If you are using class fields and decorators, probably you won't use this configuration key. +::: info + +If you are using class fields and decorators, probably you won't use this configuration key. + +::: #### type @@ -163,7 +174,6 @@ class Toggle extends Component { }) active: boolean; } -ì; ``` ## Accessors @@ -308,7 +318,7 @@ class Card extends Component { ## Attributes -Attributes can be used to update the component properties and viceversa. Every time an attribute is added, removed or changed in a render cycle or using the [`DOM`](./render-a-component#manipulating-the-dom) helper. +Attributes can be used to update the component properties and viceversa. Every time an attribute is added, removed or changed in a render cycle or using the `.setAttribute` method. ### Template and JSX attributes @@ -387,10 +397,11 @@ class Card extends Component { @property({ type: Boolean }) married: boolean = false; } -const card = new Card(); -card.firstName = 'Alan'; -card.age = 24; -card.married = true; +const card = new Card().assign({ + firstName: 'Alan', + age: 24, + married: true, +}); ``` will result in the DOM like: diff --git a/docs/templates.md b/docs/guide/rendering.md similarity index 77% rename from docs/templates.md rename to docs/guide/rendering.md index ad10583b..ecbd6cbf 100644 --- a/docs/templates.md +++ b/docs/guide/rendering.md @@ -1,48 +1,32 @@ -# Templates +# Rendering -Templates are the main part of a component definition because they are used to render the state as well as instantiate and update child elements. During a render cycle, DNA uses an in-place DOM diffing algorithm to check which nodes are to update, create or remove. In order to efficiently compare DOM nodes, templates cannot be plain HTML strings. Use the `render` method and the `html` helper to return the template for the element: +Templates are the main part of a component definition because they are used to render the state as well as instantiate and update child elements. During a render cycle, DNA uses an in-place DOM diffing algorithm to check which nodes are to update, create or remove. In order to efficiently compare DOM nodes, templates cannot be plain HTML strings and must be espressed using jsx or tagged template literals. -```ts -import { Component, customElement, html } from '@chialab/dna'; +::: code-group + +```tsx [jsx] +import { Component, customElement, h } from '@chialab/dna'; @customElement('hello-world') class HelloWorld extends Component { render() { - return html`

    Hello world!

    `; + return

    Hello world!

    ; } } ``` -### JSX - -If you familiar with JSX, you can also use it since DNA templates are 100% compatible with JSX transpiled output: - -```ts -import { Component, customElement, h } from '@chialab/dna'; +```ts [html] +import { Component, customElement, html } from '@chialab/dna'; @customElement('hello-world') class HelloWorld extends Component { render() { - return

    Hello world!

    ; + return html`

    Hello world!

    `; } } ``` -Please rember to configure the `@babel/plugin-transform-react-jsx` in roder to use the DNA's `h` and `Fragment` helpers: - -```json -{ - "plugins": [ - [ - "@babel/plugin-transform-react-jsx", - { - "pragma": "h", - "pragmaFrag": "Fragment" - } - ] - ] -} -``` +::: ## Expressions @@ -62,91 +46,72 @@ When interpolating an expression, the following rules (based on the type of the ### Content expression -```ts -html`${this.firstName} ${this.lastName}`; -``` - -
    -JSX -
    +::: code-group -```ts -{this.firstName} {this.lastName} +```tsx [jsx] + + {this.firstName} {this.lastName} + ``` -
    -
    - -
    -Raw -
    +```ts [html] +html`${this.firstName} ${this.lastName}`; +``` -```ts +```ts [vdom] h('span', null, this.firstName, ' ', this.lastName); ``` -
    -
    +::: ### Attribute expression -```ts +::: code-group + +```tsx [jsx] + +``` + +```ts [html] html``; ``` -
    -JSX -
    - -```ts - -``` - -
    -
    - -
    -Raw -
    - -```ts +```ts [vdom] h('input', { name: this.name, disabled: this.disabled, required: true }); ``` -
    -
    +::: ### Loops When using loops it is necessary to keep in mind the [expressions](#expressions): in order to correctly render a table or a list of data, we need to interpolate an array of templates: -```ts -html`
      - ${this.items.map((item, index) => html`
    • ${index}. ${item}
      • `)} -
    `; -``` - -
    -JSX -
    +::: code-group -```ts +```tsx [jsx]
      - {this.items.map((item, index) =>
    • {index}. {item}
      • )} + {this.items.map((item, index) => ( +
    • + {index}. {item} +
      • + ))}
    ``` -
    -
    - -
    -Raw -
    +```ts [html] +html`
      + ${this.items.map((item, index) => html`
    • ${index}. ${item}
      • `)} +
    `; +``` -```ts +```ts [vdom] h( 'ul', null, @@ -154,44 +119,31 @@ h( ); ``` -
    -
    +::: ### Conditionals You can create conditional expressions based on a boolean value using ternary operator or logical expression which results in a template or any other value: -```ts -html` - ${this.avatar && html``} -

    ${this.title || 'Untitled'}

    - ${this.members.length ? html`${this.members.length} members` : 'No members'} -`; -``` - -
    -JSX -
    +::: code-group -```ts +```tsx [jsx] <> {this.avatar && }

    {this.title || 'Untitled'}

    - {this.members.length ? - `${this.members.length} members` : - 'No members' - } + {this.members.length ? `${this.members.length} members` : 'No members'} ``` -
    -
    - -
    -Raw -
    +```ts [html] +html` + ${this.avatar && html``} +

    ${this.title || 'Untitled'}

    + ${this.members.length ? html`${this.members.length} members` : 'No members'} +`; +``` -```ts +```ts [vdom] h( Fragment, null, @@ -201,114 +153,42 @@ h( ); ``` -
    -
    +::: ### Promises DNA exposes two directives to handle promises: the `$await` directive can be used to render a `Promise` result in the template as if you were using the `await` statement, while the `$until` directive is useful for status handling. -```ts -import { $await, $until, html } from '@chialab/dna'; +```tsx +import { $await, $until } from '@chialab/dna'; const json = fetch('/data.json') .then(() => response.json()) .then((data) => data.map(({ name }) => html`
  • ${name}
    • `)); -html` - ${$until(json, 'Loading...')} ${$await( - json - .then( - (data) => - html`
      ${data}
    ` - ) - .catch((error) => html`
    Error: ${error}
    `) - )} -`; -``` - -
    -JSX -
    - -```tsx <> {$until(json, 'Loading...')} {$await(json.then((data) =>
      {data}
    ).catch((error) =>
    Error: {error}
    ))} - -``` - -
    -
    - -
    -Raw -
    - -```ts -h( - Fragment, - null, - $until(json, 'Loading...'), - $await(json.then((data) => h('ul', null, data)).catch((error) => h('div', null, 'Error ', error))) -); +; ``` -
    -
    - ### Observables DNA has also a directive to `$pipe` [`Observable`](https://rxjs-dev.firebaseapp.com/)s like as first class references. You can interpolate [`Observable`]s' values or pipe a template: -```ts -import { $pipe, html } from '@chialab/dna'; +```tsx +import { $pipe } from '@chialab/dna'; import { interval, timer } from 'rxjs'; import { take } from 'rxjs/operators'; const clock$ = timer(Date.now()); const numbers$ = interval(1000).pipe(take(4)); -html` - Timer: ${$pipe(timer$)}, Numbers: ${numbers$.pipe((val) => - val % 2 ? html`${$pipe(val)}` : $pipe(val) - )} -`; -``` - -
    -JSX -
    - -```tsx <> Timer: {$pipe(timer$)}, Numbers: {numbers$.pipe((val) => (val % 2 ? {$pipe(val)} : $pipe(val)))} - +; ``` -
    -
    - -
    -Raw -
    - -```ts -h( - Fragment, - null, - 'Timer: ', - $pipe(timer$), - ', Numbers', - numbers$.pipe((val) => (val % 2 ? h('strong', null, $pipe(val)) : $pipe(val))) -); -``` - -
    -
    - ## HTML content By default, HTML strings will be interpolated as plain content. It means that a property `content` valorized as `"

    Hello

    "` will not create a H1 element, but it will print the code as is. In order to render dynamic html content, you can use the `$parse` directive: @@ -322,13 +202,49 @@ const content = '

    Hello

    '; +html`${$parse(content)}`; ``` -⚠️ Injecting uncontrolled HTML content may exposes your application to XSS vulnerabilities. Always make sure you are rendering secure code! +::: warning + +Injecting uncontrolled HTML content may exposes your application to XSS vulnerabilities. Always make sure you are rendering secure code! + +::: ## Function components Sometimes, you may want to break up templates in smaller parts without having to define new Custom Elements. In this cases, you can use functional components. Function components have first class support in many frameworks like React and Vue, but they require hooks in order to update DOM changes. Since DNA's state is reflected to the DOM and a "current context" is missing, the implemention is slightly different and does not require extra abstraction. -```ts +::: code-group + +```tsx [jsx] +function Row({ children, id }, { store, requestUpdate }) { + const selected = store.get('selcted') ?? false; + const toggle = () => { + store.set('selected', !selected); + requestUpdate(); + }; + + return ( + + {...children} + + ); +} + + + + {items.map((item) => ( + + + + + ))} + +
    {item.id}{item.label}
    ; +``` + +```ts [html] function Row({ children, id }, { store, requestUpdate }) { const selected = store.get('selcted') ?? false; const toggle = () => { @@ -357,39 +273,7 @@ html`
    `; ``` -
    -JSX -
    - -```ts -function Row({ children, id }, { store, requestUpdate }) { - const selected = store.get('selcted') ?? false; - const toggle = () => { - store.set('selected', !selected); - requestUpdate(); - }; - - return {...children}; -} - - - - {items.map((item) => - - - )} - -
    {item.id}{item.label}
    -``` - -
    -
    - -
    -Raw -
    - -```ts +```ts [vdom] function Row({ children, id }, { store, requestUpdate }) { const selected = store.get('selcted') ?? false; const toggle = () => { @@ -410,20 +294,19 @@ h('table', null, ) ``` -
    -
    +::: ## Nodes and references DNA can handle `Node` instances as children and hyper nodes as well. When passed as children, the very same node is positioned "as is" to the right place in the template: -```ts +```tsx import { render } from '@chialab/dna'; -let paragraph = document.createElement('p'); +const paragraph = document.createElement('p'); paragraph.textContent = 'Lorem Ipsum'; -render(html`
    ${paragraph}
    `, document.body); +render(
    {paragraph}
    , document.body); ``` will render: @@ -593,17 +476,21 @@ Now the resulting DOM would be: DNA optimizes rendering re-using elements when possible, comparing the tag name for elements, content for text nodes and constructor for components. Sometimes, you may prefer re-create a node instead of reusing the previous one. In this cases, you can use the `key` attribute to define an unique slug for the component that will be used for comparisons. -```ts -html` - + {this.items.map((item) => ( - -`; + key={item} + value={item}> + {item} + + ))} + + ``` In this example, once the last `