Merge pull request #199 from github/marky-mark

Introduce extension API

Author: koddsson

src/attr.ts

@@ -1,6 +1,7 @@
 import type {CustomElement} from './custom-element.js'
+import {meta} from './core.js'
 
-const attrs = new WeakMap<Record<PropertyKey, unknown>, string[]>()
+const attrKey = 'attr'
 type attrValue = string | number | boolean
 
 /**
@@ -11,8 +12,7 @@ type attrValue = string | number | boolean
  * Number or Boolean. This matches the behavior of `initializeAttrs`.
  */
 export function attr<K extends string>(proto: Record<K, attrValue>, key: K): void {
-  if (!attrs.has(proto)) attrs.set(proto, [])
-  attrs.get(proto)!.push(key)
+  meta(proto, attrKey).add(key)
 }
 
 /**
@@ -38,7 +38,7 @@ const initialized = new WeakSet<Element>()
 export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>): void {
   if (initialized.has(instance)) return
   initialized.add(instance)
-  if (!names) names = getAttrNames(Object.getPrototypeOf(instance))
+  if (!names) names = meta(Object.getPrototypeOf(instance), attrKey)
   for (const key of names) {
     const value = (<Record<PropertyKey, unknown>>(<unknown>instance))[key]
     const name = attrToAttributeName(key)
@@ -79,19 +79,6 @@ export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>)
   }
 }
 
-function getAttrNames(classObjectProto: Record<PropertyKey, unknown>): Set<string> {
-  const names: Set<string> = new Set()
-  let proto: Record<PropertyKey, unknown> | typeof HTMLElement = classObjectProto
-
-  while (proto && proto !== HTMLElement) {
-    const attrNames = attrs.get(<Record<PropertyKey, unknown>>proto) || []
-    for (const name of attrNames) names.add(name)
-    proto = Object.getPrototypeOf(proto)
-  }
-
-  return names
-}
-
 function attrToAttributeName(name: string): string {
   return `data-${name.replace(/([A-Z]($|[a-z]))/g, '-$1')}`.replace(/--/g, '-').toLowerCase()
 }
@@ -101,8 +88,7 @@ export function defineObservedAttributes(classObject: CustomElement): void {
   Object.defineProperty(classObject, 'observedAttributes', {
     configurable: true,
     get() {
-      const attrMap = getAttrNames(classObject.prototype)
-      return [...attrMap].map(attrToAttributeName).concat(observed)
+      return [...meta(classObject.prototype, attrKey)].map(attrToAttributeName).concat(observed)
     },
     set(attributes: string[]) {
       observed = attributes

src/core.ts

@@ -5,6 +5,7 @@ import {defineObservedAttributes, initializeAttrs} from './attr.js'
 import type {CustomElement} from './custom-element.js'
 
 const instances = new WeakSet<Element>()
+const symbol = Symbol.for('catalyst')
 
 export function initializeInstance(instance: HTMLElement, connect?: (this: HTMLElement) => void): void {
   instance.toggleAttribute('data-catalyst', true)
@@ -38,3 +39,18 @@ export function initializeClass(classObject: CustomElement): void {
 export function initialized(el: Element): boolean {
   return instances.has(el)
 }
+
+export function meta(proto: Record<PropertyKey, unknown>, name: string): Set<string> {
+  if (!Object.prototype.hasOwnProperty.call(proto, symbol)) {
+    const parent = proto[symbol] as Map<string, Set<string>> | undefined
+    const map = (proto[symbol] = new Map<string, Set<string>>())
+    if (parent) {
+      for (const [key, value] of parent) {
+        map.set(key, new Set(value))
+      }
+    }
+  }
+  const map = proto[symbol] as Map<string, Set<string>>
+  if (!map.has(name)) map.set(name, new Set<string>())
+  return map.get(name)!
+}

src/target.ts

@@ -1,4 +1,5 @@
 import {findTarget, findTargets} from './findtarget.js'
+import {meta} from './core.js'
 
 /**
  * Target is a decorator which - when assigned to a property field on the
@@ -8,6 +9,7 @@ import {findTarget, findTargets} from './findtarget.js'
  * `findTarget(this, 'foo')`.
  */
 export function target<K extends string>(proto: Record<K, unknown>, key: K): void {
+  meta(proto, 'target').add(key)
   Object.defineProperty(proto, key, {
     configurable: true,
     get() {
@@ -24,6 +26,7 @@ export function target<K extends string>(proto: Record<K, unknown>, key: K): voi
  * `findTargets(this, 'foo')`.
  */
 export function targets<K extends string>(proto: Record<K, unknown>, key: K): void {
+  meta(proto, 'targets').add(key)
   Object.defineProperty(proto, key, {
     configurable: true,
     get() {

test/attr.js

@@ -183,7 +183,7 @@ describe('attr', () => {
     expect(instance).to.have.property('foo', '')
     expect(instance).to.have.property('bar', 'hello')
     expect(instance).to.have.property('baz', 'world')
-    expect(instance.getAttributeNames()).to.eql(['data-baz', 'data-foo', 'data-bar'])
+    expect(instance.getAttributeNames()).to.eql(['data-foo', 'data-bar', 'data-baz'])
     expect(instance.getAttribute('data-foo')).to.equal('')
     expect(instance.getAttribute('data-bar')).to.equal('hello')
     expect(instance.getAttribute('data-baz')).to.equal('world')