[{"_1":2,"_175":-5,"_176":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","ef37a308353f563442d856329c6afc7d307fa444","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_150":151,"_172":173,"_174":-5},"handle","postpostscript","name","custom-registry","path","src/scoped-custom-element-registry.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":73,"_111":-5,"_12":112,"_113":114,"_115":116,"_117":116,"_118":-5,"_119":32,"_14":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":130,"_133":134,"_136":137,"_149":20},"id","76691c60-56f1-11f0-a160-f69ea79377d9","createdAt",["D",1751425552216],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","4bfb99a9-2008-40e0-bacb-7c7d84227cee","pinnedFileId","c2ee23c8-56f1-11f0-a52f-f69ea79377d9","pinPreview",true,"pinMigrated","screenshotVersion","likeCount","1073b191-f665-405d-9530-545465c93575","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_131":132},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJjdlhaRXl0WXVNSlhZcWU0ckI2c1BOMjNhQSJ9","org",{"_94":95,"_135":132,"_12":112},"avatar","branch",{"_138":139,"_96":44,"_102":140,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":97,"_148":95},"version",247,"76698042-56f1-11f0-a160-f69ea79377d9","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":152,"_96":153,"_154":155,"_156":157,"_158":140,"_159":160,"_161":116,"_104":162,"_138":163,"_164":165,"_166":167,"_168":20,"_169":-5,"_98":170},"29ab7fe8-5742-11f0-ba4f-f69ea79377d9","scoped-custom-element-registry.ts","fileId","4e69050e-573c-11f0-b48d-f69ea79377d9","parentId","aeb97d2e-56fd-11f0-a9af-f69ea79377d9","branchId","branchVersion",246,"latest",["D",1751460212693],10,"fileType","script","content","/**\n * @license\n * Copyright (c) 2020 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n\n/**\n * Note: this file is a script, not a module, so toplevel\n * interfaces are global. This is relevent because those named\n * after existing global TypeScript types actually add to those\n * types, as though they were declared in a `declare global` in a module.\n */\n\ndeclare interface PolyfillWindow {\n CustomElementRegistryPolyfill: {\n formAssociated: Set;\n };\n}\n\nconst polyfillWindow = window as unknown as PolyfillWindow;\n\n/**\n * Polyfill helper object. This is global and distinct from\n * `CustomElementRegistry`because the polyfill does not use modules and\n * so that it is clearly polyfill-specific and not related to the native\n * feature.\n *\n * The `formAssociated` setting cannot be properly scoped and can only be set\n * once per name. This is determined by how it is set on the first defined\n * tag name. However, adding the name to\n * `CustomElementsRegistryPolyfill.add(tagName)` reserves the given tag\n * so it's always formAssociated.\n */\nif (\n polyfillWindow[\"CustomElementRegistryPolyfill\"]?.[\"formAssociated\"] ===\n undefined\n) {\n polyfillWindow[\"CustomElementRegistryPolyfill\"] = {\n [\"formAssociated\"]: new Set(),\n };\n}\n\ninterface CustomElementConstructor {\n observedAttributes?: Array;\n formAssociated?: boolean;\n\n new (...params: unknown[]): CustomHTMLElement;\n}\n\ninterface CustomHTMLElement {\n connectedCallback?(): void;\n disconnectedCallback?(): void;\n adoptedCallback?(): void;\n attributeChangedCallback?(\n name: string,\n oldValue?: string | null,\n newValue?: string | null,\n namespace?: string | null\n ): void;\n formAssociatedCallback?(form: HTMLFormElement | null): void;\n formDisabledCallback?(disabled: boolean): void;\n formResetCallback?(): void;\n formStateRestoreCallback?(\n state: File | string | FormData | null,\n mode: string\n ): void;\n}\n\ninterface CustomElementRegistry {\n _getDefinition(tagName: string): CustomElementDefinition | undefined;\n}\n\ninterface CustomElementDefinition {\n elementClass: CustomElementConstructor;\n tagName: string;\n /**\n * We hold onto the versions of callbacks at registration time, because\n * that's the specc'd behavior.\n */\n connectedCallback?: CustomHTMLElement[\"connectedCallback\"];\n disconnectedCallback?: CustomHTMLElement[\"disconnectedCallback\"];\n adoptedCallback?: CustomHTMLElement[\"adoptedCallback\"];\n attributeChangedCallback?: CustomHTMLElement[\"attributeChangedCallback\"];\n formAssociated?: boolean;\n formAssociatedCallback?: CustomHTMLElement[\"formAssociatedCallback\"];\n formDisabledCallback?: CustomHTMLElement[\"formDisabledCallback\"];\n formResetCallback?: CustomHTMLElement[\"formResetCallback\"];\n formStateRestoreCallback?: CustomHTMLElement[\"formStateRestoreCallback\"];\n observedAttributes: Set;\n /**\n * The class that's registered on the global custom element registry for this\n * element definition. Only present if this definition is registered on the\n * global registry, though all definitions do have a standin.\n */\n standInClass?: CustomElementConstructor;\n}\n\n// Note, `registry` matches proposal but `customElements` was previously\n// proposed. It's supported for back compat.\ninterface ShadowRootWithSettableCustomElements extends ShadowRoot {\n registry?: CustomElementRegistry;\n customElements?: CustomElementRegistry;\n}\n\ninterface ShadowRootInitWithSettableCustomElements extends ShadowRootInit {\n registry?: CustomElementRegistry;\n customElements?: CustomElementRegistry;\n}\n\ntype ParametersOf<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n T extends ((...args: any) => any) | undefined\n> = T extends Function ? Parameters : never;\n\nconst NativeHTMLElement = window.HTMLElement;\nconst nativeDefine = window.customElements.define;\nconst nativeGet = window.customElements.get;\nconst nativeRegistry = window.customElements;\n\nconst definitionForElement = new WeakMap<\n HTMLElement,\n CustomElementDefinition\n>();\nconst pendingRegistryForElement = new WeakMap<\n HTMLElement,\n ShimmedCustomElementsRegistry\n>();\nconst globalDefinitionForConstructor = new WeakMap<\n CustomElementConstructor,\n CustomElementDefinition\n>();\n// TBD: This part of the spec proposal is unclear:\n// > Another option for looking up registries is to store an element's\n// > originating registry with the element. The Chrome DOM team was concerned\n// > about the small additional memory overhead on all elements. Looking up the\n// > root avoids this.\nconst scopeForElement = new WeakMap();\n\nclass AsyncInfo {\n readonly promise: Promise;\n readonly resolve: (val: T) => void;\n constructor() {\n let resolve: (val: T) => void;\n this.promise = new Promise((r) => {\n resolve = r;\n });\n this.resolve = resolve!;\n }\n}\n\n// Constructable CE registry class, which uses the native CE registry to\n// register stand-in elements that can delegate out to CE classes registered\n// in scoped registries\nclass ShimmedCustomElementsRegistry implements CustomElementRegistry {\n private readonly _definitionsByTag = new Map<\n string,\n CustomElementDefinition\n >();\n private readonly _definitionsByClass = new Map<\n CustomElementConstructor,\n CustomElementDefinition\n >();\n private readonly _whenDefinedPromises = new Map<\n string,\n AsyncInfo\n >();\n private readonly _awaitingUpgrade = new Map>();\n\n define(tagName: string, elementClass: CustomElementConstructor) {\n tagName = tagName.toLowerCase();\n if (this._getDefinition(tagName) !== undefined) {\n throw new DOMException(\n `Failed to execute 'define' on 'CustomElementRegistry': the name \"${tagName}\" has already been used with this registry`\n );\n }\n if (this._definitionsByClass.get(elementClass) !== undefined) {\n throw new DOMException(\n `Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry`\n );\n }\n // Since observedAttributes can't change, we approximate it by patching\n // set/remove/toggleAttribute on the user's class\n const attributeChangedCallback =\n elementClass.prototype.attributeChangedCallback;\n const observedAttributes = new Set(\n elementClass.observedAttributes || []\n );\n patchAttributes(elementClass, observedAttributes, attributeChangedCallback);\n // Register a stand-in class which will handle the registry lookup & delegation\n let standInClass = nativeGet.call(nativeRegistry, tagName);\n // `formAssociated` cannot be scoped so it's set to true if\n // the first defined element sets it or it's reserved in\n // `CustomElementRegistryPolyfill.formAssociated`.\n const formAssociated =\n standInClass?.formAssociated ??\n (elementClass[\"formAssociated\"] ||\n polyfillWindow[\"CustomElementRegistryPolyfill\"][\"formAssociated\"].has(\n tagName\n ));\n if (formAssociated) {\n polyfillWindow[\"CustomElementRegistryPolyfill\"][\"formAssociated\"].add(\n tagName\n );\n }\n // Sync the class value to the definition value for easier debuggability\n if (formAssociated != elementClass[\"formAssociated\"]) {\n try {\n elementClass[\"formAssociated\"] = formAssociated;\n } catch (e) {\n // squelch\n }\n }\n // Register the definition\n const definition: CustomElementDefinition = {\n tagName,\n elementClass,\n connectedCallback: elementClass.prototype.connectedCallback,\n disconnectedCallback: elementClass.prototype.disconnectedCallback,\n adoptedCallback: elementClass.prototype.adoptedCallback,\n attributeChangedCallback,\n formAssociated: formAssociated,\n formAssociatedCallback: elementClass.prototype[\"formAssociatedCallback\"],\n formDisabledCallback: elementClass.prototype[\"formDisabledCallback\"],\n formResetCallback: elementClass.prototype[\"formResetCallback\"],\n formStateRestoreCallback:\n elementClass.prototype[\"formStateRestoreCallback\"],\n observedAttributes,\n };\n this._definitionsByTag.set(tagName, definition);\n this._definitionsByClass.set(elementClass, definition);\n\n if (!standInClass) {\n standInClass = createStandInElement(tagName);\n nativeDefine.call(nativeRegistry, tagName, standInClass);\n }\n if (this === window.customElements) {\n globalDefinitionForConstructor.set(elementClass, definition);\n definition.standInClass = standInClass;\n }\n // Upgrade any elements created in this scope before define was called\n const awaiting = this._awaitingUpgrade.get(tagName);\n if (awaiting) {\n this._awaitingUpgrade.delete(tagName);\n for (const element of awaiting) {\n pendingRegistryForElement.delete(element);\n customize(element, definition, true);\n }\n }\n // Flush whenDefined callbacks\n const info = this._whenDefinedPromises.get(tagName);\n if (info !== undefined) {\n info.resolve(elementClass);\n this._whenDefinedPromises.delete(tagName);\n }\n return elementClass;\n }\n\n upgrade(...args: Parameters) {\n creationContext.push(this);\n nativeRegistry.upgrade(...args);\n creationContext.pop();\n }\n\n get(tagName: string) {\n const definition = this._definitionsByTag.get(tagName);\n return definition?.elementClass;\n }\n\n getName(elementClass: CustomElementConstructor) {\n const definition = this._definitionsByClass.get(elementClass);\n return definition?.tagName ?? null;\n }\n\n _getDefinition(tagName: string) {\n return this._definitionsByTag.get(tagName);\n }\n\n [\"whenDefined\"](tagName: string) {\n const definition = this._getDefinition(tagName);\n if (definition !== undefined) {\n return Promise.resolve(definition.elementClass);\n }\n let info = this._whenDefinedPromises.get(tagName);\n if (info === undefined) {\n info = new AsyncInfo();\n this._whenDefinedPromises.set(tagName, info);\n }\n return info.promise;\n }\n\n _upgradeWhenDefined(\n element: HTMLElement,\n tagName: string,\n shouldUpgrade: boolean\n ) {\n let awaiting = this._awaitingUpgrade.get(tagName);\n if (!awaiting) {\n this._awaitingUpgrade.set(tagName, (awaiting = new Set()));\n }\n if (shouldUpgrade) {\n awaiting.add(element);\n } else {\n awaiting.delete(element);\n }\n }\n}\n\n// User extends this HTMLElement, which returns the CE being upgraded\nlet upgradingInstance: HTMLElement | undefined;\nwindow.HTMLElement = function HTMLElement(this: HTMLElement) {\n // Upgrading case: the StandInElement constructor was run by the browser's\n // native custom elements and we're in the process of running the\n // \"constructor-call trick\" on the natively constructed instance, so just\n // return that here\n let instance = upgradingInstance;\n if (instance) {\n upgradingInstance = undefined;\n return instance;\n }\n // Construction case: we need to construct the StandInElement and return\n // it; note the current spec proposal only allows new'ing the constructor\n // of elements registered with the global registry\n const definition = globalDefinitionForConstructor.get(\n this.constructor as CustomElementConstructor\n );\n if (!definition) {\n throw new TypeError(\n \"Illegal constructor (custom element class must be registered with global customElements registry to be newable)\"\n );\n }\n instance = Reflect.construct(NativeHTMLElement, [], definition.standInClass);\n Object.setPrototypeOf(instance, this.constructor.prototype);\n definitionForElement.set(instance!, definition);\n return instance;\n} as unknown as typeof HTMLElement;\nwindow.HTMLElement.prototype = NativeHTMLElement.prototype;\n\n// Helpers to return the scope for a node where its registry would be located\nconst isValidScope = (node: Node) =>\n node === document || node instanceof ShadowRoot;\nconst registryForNode = (node: Node): ShimmedCustomElementsRegistry | null => {\n return;\n // TODO: the algorithm for finding the scope is a bit up in the air; assigning\n // a one-time scope at creation time would require walking every tree ever\n // created, which is avoided for now\n let scope = node.getRootNode();\n // If we're not attached to the document (i.e. in a disconnected tree or\n // fragment), we need to get the scope from the creation context; that should\n // be a Document or ShadowRoot, unless it was created via innerHTML\n if (!isValidScope(scope)) {\n const context = creationContext[creationContext.length - 1];\n console.log({ context });\n // When upgrading via registry.upgrade(), the registry itself is put on the\n // creationContext stack\n if (context instanceof CustomElementRegistry) {\n return context as ShimmedCustomElementsRegistry;\n }\n // Otherwise, get the root node of the element this was created from\n scope = context.getRootNode();\n // The creation context wasn't a Document or ShadowRoot or in one; this\n // means we're being innerHTML'ed into a disconnected element; for now, we\n // hope that root node was created imperatively, where we stash _its_\n // scopeForElement. Beyond that, we'd need more costly tracking.\n if (!isValidScope(scope)) {\n scope = scopeForElement.get(scope)?.getRootNode() || document;\n }\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (scope as any)[\"registry\"] as ShimmedCustomElementsRegistry | null;\n};\n\n// Helper to create stand-in element for each tagName registered that delegates\n// out to the registry for the given element\nconst createStandInElement = (tagName: string): CustomElementConstructor => {\n return class ScopedCustomElementBase {\n // Note, this cannot be scoped so it's set based on a polyfill config\n // option. When this config option isn't specified, it is set\n // if the first defining element is formAssociated.\n static get [\"formAssociated\"]() {\n return polyfillWindow[\"CustomElementRegistryPolyfill\"][\n \"formAssociated\"\n ].has(tagName);\n }\n constructor() {\n // Create a raw HTMLElement first\n const instance = Reflect.construct(\n NativeHTMLElement,\n [],\n this.constructor\n );\n // We need to install the minimum HTMLElement prototype so that\n // scopeForNode can use DOM API to determine our construction scope;\n // upgrade will eventually install the full CE prototype\n Object.setPrototypeOf(instance, HTMLElement.prototype);\n // Get the node's scope, and its registry (falls back to global registry)\n const registry =\n registryForNode(instance) ||\n (window.customElements as ShimmedCustomElementsRegistry);\n const definition = registry._getDefinition(tagName);\n if (definition) {\n customize(instance, definition);\n } else {\n pendingRegistryForElement.set(instance, registry);\n }\n return instance;\n }\n\n connectedCallback(\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n ensureAttributesCustomized(this);\n const definition = definitionForElement.get(this);\n if (definition) {\n // Delegate out to user callback\n definition.connectedCallback &&\n definition.connectedCallback.apply(this, args);\n } else {\n // Register for upgrade when defined (only when connected, so we don't leak)\n pendingRegistryForElement\n .get(this)!\n ._upgradeWhenDefined(this, tagName, true);\n }\n }\n\n disconnectedCallback(\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n const definition = definitionForElement.get(this);\n if (definition) {\n // Delegate out to user callback\n definition.disconnectedCallback &&\n definition.disconnectedCallback.apply(this, args);\n } else {\n // Un-register for upgrade when defined (so we don't leak)\n pendingRegistryForElement\n .get(this)!\n ._upgradeWhenDefined(this, tagName, false);\n }\n }\n\n adoptedCallback(\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n const definition = definitionForElement.get(this);\n definition?.adoptedCallback?.apply(this, args);\n }\n\n // Form-associated custom elements lifecycle methods\n [\"formAssociatedCallback\"](\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n const definition = definitionForElement.get(this);\n if (definition?.[\"formAssociated\"]) {\n definition?.[\"formAssociatedCallback\"]?.apply(this, args);\n }\n }\n\n [\"formDisabledCallback\"](\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n const definition = definitionForElement.get(this);\n if (definition?.[\"formAssociated\"]) {\n definition?.[\"formDisabledCallback\"]?.apply(this, args);\n }\n }\n\n [\"formResetCallback\"](\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n const definition = definitionForElement.get(this);\n if (definition?.[\"formAssociated\"]) {\n definition?.[\"formResetCallback\"]?.apply(this, args);\n }\n }\n\n [\"formStateRestoreCallback\"](\n this: HTMLElement,\n ...args: ParametersOf\n ) {\n const definition = definitionForElement.get(this);\n if (definition?.[\"formAssociated\"]) {\n definition?.[\"formStateRestoreCallback\"]?.apply(this, args);\n }\n }\n\n // no attributeChangedCallback or observedAttributes since these\n // are simulated via setAttribute/removeAttribute patches\n } as unknown as CustomElementConstructor;\n};\nwindow.CustomElementRegistry = ShimmedCustomElementsRegistry;\n\n// Helper to patch CE class setAttribute/getAttribute/toggleAttribute to\n// implement attributeChangedCallback\nconst patchAttributes = (\n elementClass: CustomElementConstructor,\n observedAttributes: Set,\n attributeChangedCallback?: CustomHTMLElement[\"attributeChangedCallback\"]\n) => {\n if (observedAttributes.size === 0 || attributeChangedCallback === undefined) {\n return;\n }\n const setAttribute = elementClass.prototype.setAttribute;\n if (setAttribute) {\n elementClass.prototype.setAttribute = function (n: string, value: string) {\n ensureAttributesCustomized(this);\n const name = n.toLowerCase();\n if (observedAttributes.has(name)) {\n const old = this.getAttribute(name);\n setAttribute.call(this, name, value);\n attributeChangedCallback.call(this, name, old, value);\n } else {\n setAttribute.call(this, name, value);\n }\n };\n }\n const removeAttribute = elementClass.prototype.removeAttribute;\n if (removeAttribute) {\n elementClass.prototype.removeAttribute = function (n: string) {\n ensureAttributesCustomized(this);\n const name = n.toLowerCase();\n if (observedAttributes.has(name)) {\n const old = this.getAttribute(name);\n removeAttribute.call(this, name);\n attributeChangedCallback.call(this, name, old, null);\n } else {\n removeAttribute.call(this, name);\n }\n };\n }\n const toggleAttribute = elementClass.prototype.toggleAttribute;\n if (toggleAttribute) {\n elementClass.prototype.toggleAttribute = function (\n n: string,\n force?: boolean\n ) {\n ensureAttributesCustomized(this);\n const name = n.toLowerCase();\n if (observedAttributes.has(name)) {\n const old = this.getAttribute(name);\n toggleAttribute.call(this, name, force);\n const newValue = this.getAttribute(name);\n if (old !== newValue) {\n attributeChangedCallback.call(this, name, old, newValue);\n }\n } else {\n toggleAttribute.call(this, name, force);\n }\n };\n }\n};\n\n// Helper to defer initial attribute processing for parser generated\n// custom elements. These elements are created without attributes\n// so attributes cannot be processed in the constructor. Instead,\n// these elements are customized at the first opportunity:\n// 1. when the element is connected\n// 2. when any attribute API is first used\n// 3. when the document becomes readyState === interactive (the parser is done)\nlet elementsPendingAttributes: Set | undefined;\nif (document.readyState === \"loading\") {\n elementsPendingAttributes = new Set();\n document.addEventListener(\n \"readystatechange\",\n () => {\n elementsPendingAttributes!.forEach((instance) =>\n customizeAttributes(instance, definitionForElement.get(instance)!)\n );\n },\n { once: true }\n );\n}\n\nconst ensureAttributesCustomized = (\n instance: CustomHTMLElement & HTMLElement\n) => {\n if (!elementsPendingAttributes?.has(instance)) {\n return;\n }\n customizeAttributes(instance, definitionForElement.get(instance)!);\n};\n\n// Approximate observedAttributes from the user class, since the stand-in element had none\nconst customizeAttributes = (\n instance: CustomHTMLElement & HTMLElement,\n definition: CustomElementDefinition\n) => {\n elementsPendingAttributes?.delete(instance);\n if (!definition.attributeChangedCallback) {\n return;\n }\n definition.observedAttributes.forEach((attr: string) => {\n if (!instance.hasAttribute(attr)) {\n return;\n }\n definition.attributeChangedCallback!.call(\n instance,\n attr,\n null,\n instance.getAttribute(attr)\n );\n });\n};\n\n// Helper to patch CE class hierarchy changing those CE classes created before applying the polyfill\n// to make them work with the new patched CustomElementsRegistry\nconst patchHTMLElement = (elementClass: CustomElementConstructor): unknown => {\n console.log(\"patch\", elementClass);\n const parentClass = Object.getPrototypeOf(elementClass);\n\n if (parentClass !== window.HTMLElement) {\n if (parentClass === NativeHTMLElement) {\n return Object.setPrototypeOf(elementClass, window.HTMLElement);\n }\n\n return patchHTMLElement(parentClass);\n }\n return;\n};\n\n// Helper to upgrade an instance with a CE definition using \"constructor call trick\"\nconst customize = (\n instance: HTMLElement,\n definition: CustomElementDefinition,\n isUpgrade = false\n) => {\n console.log(\"customize\", instance, definition, isUpgrade);\n Object.setPrototypeOf(instance, definition.elementClass.prototype);\n definitionForElement.set(instance, definition);\n upgradingInstance = instance;\n try {\n console.log(definition.elementClass);\n new definition.elementClass();\n } catch (_) {\n patchHTMLElement(definition.elementClass);\n new definition.elementClass();\n }\n if (definition.attributeChangedCallback) {\n // Note, these checks determine if the element is being parser created.\n // and has no attributes when created. In this case, it may have attributes\n // in HTML that are immediately processed. To handle this, the instance\n // is added to a set and its attributes are customized at first\n // opportunity (e.g. when connected or when the parser completes and the\n // document becomes interactive).\n if (elementsPendingAttributes !== undefined && !instance.hasAttributes()) {\n elementsPendingAttributes.add(instance);\n } else {\n customizeAttributes(instance, definition);\n }\n }\n if (isUpgrade && definition.connectedCallback && instance.isConnected) {\n definition.connectedCallback.call(instance);\n }\n};\n\n// Patch attachShadow to set customElements on shadowRoot when provided\nconst nativeAttachShadow = Element.prototype.attachShadow;\nElement.prototype.attachShadow = function (\n init: ShadowRootInitWithSettableCustomElements,\n ...args: Array\n) {\n // Note, We must remove `registry` from the init object to avoid passing it to\n // the native implementation. Use string keys to avoid renaming in Closure.\n const {\n customElements: customElements,\n registry: registry = customElements,\n ...nativeInit\n } = init;\n const shadowRoot = nativeAttachShadow.call(\n this,\n nativeInit,\n ...(args as [])\n ) as ShadowRootWithSettableCustomElements;\n if (registry !== undefined) {\n const descriptor = {\n value: registry,\n configurable: true,\n writable: true,\n };\n Object.defineProperty(shadowRoot, \"customElements\", descriptor);\n Object.defineProperty(shadowRoot, \"registry\", descriptor);\n }\n return shadowRoot;\n};\n\n// Install scoped creation API on Element & ShadowRoot\nconst creationContext: Array<\n Document | CustomElementRegistry | Element | ShadowRoot\n> = [document];\nconst installScopedCreationMethod = (\n ctor: Function,\n method: string,\n from?: Document\n) => {\n const native = (from ? Object.getPrototypeOf(from) : ctor.prototype)[method];\n ctor.prototype[method] = function (\n this: Element | ShadowRoot,\n ...args: Array\n ) {\n creationContext.push(this);\n const ret = native.apply(from || this, args);\n // For disconnected elements, note their creation scope so that e.g.\n // innerHTML into them will use the correct scope; note that\n // insertAdjacentHTML doesn't return an element, but that's fine since\n // it will have a parent that should have a scope\n if (ret !== undefined) {\n scopeForElement.set(ret, this);\n }\n creationContext.pop();\n return ret;\n };\n};\ninstallScopedCreationMethod(ShadowRoot, \"createElement\", document);\ninstallScopedCreationMethod(ShadowRoot, \"createElementNS\", document);\ninstallScopedCreationMethod(ShadowRoot, \"importNode\", document);\ninstallScopedCreationMethod(Element, \"insertAdjacentHTML\");\n\n// Install scoped innerHTML on Element & ShadowRoot\nconst installScopedCreationSetter = (ctor: Function, name: string) => {\n const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, name)!;\n Object.defineProperty(ctor.prototype, name, {\n ...descriptor,\n set(value) {\n creationContext.push(this);\n descriptor.set!.call(this, value);\n creationContext.pop();\n },\n });\n};\ninstallScopedCreationSetter(Element, \"innerHTML\");\ninstallScopedCreationSetter(ShadowRoot, \"innerHTML\");\n\n// Install global registry\nObject.defineProperty(window, \"customElements\", {\n value: new CustomElementRegistry(),\n configurable: true,\n writable: true,\n});\n\nif (\n !!window[\"ElementInternals\"] &&\n !!window[\"ElementInternals\"].prototype[\"setFormValue\"]\n) {\n const internalsToHostMap = new WeakMap();\n const attachInternals = HTMLElement.prototype[\"attachInternals\"];\n const methods: Array = [\n \"setFormValue\",\n \"setValidity\",\n \"checkValidity\",\n \"reportValidity\",\n ];\n\n HTMLElement.prototype[\"attachInternals\"] = function (...args) {\n const internals = attachInternals.call(this, ...args);\n internalsToHostMap.set(internals, this);\n return internals;\n };\n\n methods.forEach((method) => {\n const proto = window[\"ElementInternals\"].prototype;\n const originalMethod = proto[method] as Function;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (proto as any)[method] = function (...args: Array) {\n const host = internalsToHostMap.get(this);\n const definition = definitionForElement.get(host!);\n if (\n (definition as { formAssociated?: boolean })[\"formAssociated\"] === true\n ) {\n return originalMethod?.call(this, ...args);\n } else {\n throw new DOMException(\n `Failed to execute ${originalMethod} on 'ElementInternals': The target element is not a form-associated custom element.`\n );\n }\n };\n });\n\n // Emulate the native RadioNodeList object\n const RadioNodeList = class\n extends Array\n implements Omit\n {\n private _elements: Array;\n\n constructor(elements: Array) {\n super(...elements);\n this._elements = elements;\n }\n [index: number]: Node;\n\n item(index: number): Node | null {\n return this[index];\n }\n\n get [\"value\"]() {\n return (\n this._elements.find((element) => element[\"checked\"] === true)?.value ||\n \"\"\n );\n }\n } as unknown as { new (elements: Array): RadioNodeList };\n\n // Emulate the native HTMLFormControlsCollection object\n const HTMLFormControlsCollection = class\n implements HTMLFormControlsCollection\n {\n length: number;\n\n constructor(elements: Array) {\n const entries = new Map();\n elements.forEach((element, index) => {\n const name = element.getAttribute(\"name\");\n const nameReference = entries.get(name) || [];\n this[+index] = element;\n nameReference.push(element);\n entries.set(name, nameReference);\n });\n this[\"length\"] = elements.length;\n entries.forEach((value, name) => {\n if (!value) return;\n if (name === \"length\" || name === \"item\" || name === \"namedItem\")\n return;\n if (value.length === 1) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this as any)[name!] = value[0];\n } else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (this as any)[name!] = new RadioNodeList(value as HTMLInputElement[]);\n }\n });\n }\n\n [index: number]: Element;\n\n [\"item\"](index: number): Element | null {\n return this[index] ?? null;\n }\n\n [Symbol.iterator](): IterableIterator {\n throw new Error(\"Method not implemented.\");\n }\n\n [\"namedItem\"](key: string): RadioNodeList | Element | null {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n return (this as any)[key] ?? null;\n }\n };\n\n // Override the built-in HTMLFormElements.prototype.elements getter\n const formElementsDescriptor = Object.getOwnPropertyDescriptor(\n HTMLFormElement.prototype,\n \"elements\"\n )!;\n\n Object.defineProperty(HTMLFormElement.prototype, \"elements\", {\n get: function () {\n const nativeElements = formElementsDescriptor.get!.call(this);\n\n const include: Array = [];\n\n for (const element of nativeElements) {\n const definition = definitionForElement.get(element);\n\n // Only purposefully formAssociated elements or built-ins will feature in elements\n if (!definition || definition[\"formAssociated\"] === true) {\n include.push(element);\n }\n }\n\n return new HTMLFormControlsCollection(include);\n },\n });\n}\n","deleted","label",[171,153],"src","permalink","https://www.val.town/x/postpostscript/custom-registry/code/src/scoped-custom-element-registry.ts","extension","actionData","errors"]