@github/catalyst - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

lib/attr.d.ts

@@ -1,2 +0,2 @@
-import { CustomElement } from './custom-element';
+import type { CustomElement } from './custom-element.js';
 declare type attrValue = string | number | boolean;
@@ -3,0 +3,0 @@ /**

lib/controller.d.ts

@@ -1,2 +0,2 @@
-import { CustomElement } from './custom-element';
+import type { CustomElement } from './custom-element.js';
 /**
@@ -3,0 +3,0 @@ * Controller is a decorator to be used over a class that extends HTMLElement.

lib/controller.js

@@ -1,5 +0,5 @@
-import { register } from './register';
-import { bind } from './bind';
-import { autoShadowRoot } from './auto-shadow-root';
-import { defineObservedAttributes, initializeAttrs } from './attr';
+import { register } from './register.js';
+import { bind } from './bind.js';
+import { autoShadowRoot } from './auto-shadow-root.js';
+import { defineObservedAttributes, initializeAttrs } from './attr.js';
 /**
@@ -6,0 +6,0 @@ * Controller is a decorator to be used over a class that extends HTMLElement.

lib/index.d.ts

@@ -1,7 +0,7 @@
-export { bind, listenForBind } from './bind';
-export { register } from './register';
-export { findTarget, findTargets } from './findtarget';
-export { target, targets } from './target';
-export { controller } from './controller';
-export { attr } from './attr';
+export { bind, listenForBind } from './bind.js';
+export { register } from './register.js';
+export { findTarget, findTargets } from './findtarget.js';
+export { target, targets } from './target.js';
+export { controller } from './controller.js';
+export { attr } from './attr.js';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -1,7 +0,7 @@
-export { bind, listenForBind } from './bind';
-export { register } from './register';
-export { findTarget, findTargets } from './findtarget';
-export { target, targets } from './target';
-export { controller } from './controller';
-export { attr } from './attr';
+export { bind, listenForBind } from './bind.js';
+export { register } from './register.js';
+export { findTarget, findTargets } from './findtarget.js';
+export { target, targets } from './target.js';
+export { controller } from './controller.js';
+export { attr } from './attr.js';
 //# sourceMappingURL=index.js.map

lib/register.d.ts

@@ -1,2 +0,2 @@
-import { CustomElement } from './custom-element';
+import type { CustomElement } from './custom-element.js';
 /**
@@ -3,0 +3,0 @@ * Register the controller as a custom element.

lib/target.js

@@ -1,2 +0,2 @@
-import { findTarget, findTargets } from './findtarget';
+import { findTarget, findTargets } from './findtarget.js';
 /**
@@ -3,0 +3,0 @@ * Target is a decorator which - when assigned to a property field on the

lib/test.js

@@ -1,1 +0,203 @@
-function t(t,e,n,o){n&&Object.defineProperty(t,e,{enumerable:n.enumerable,configurable:n.configurable,writable:n.writable,value:n.initializer?n.initializer.call(o):void 0})}function e(t,e,n,o,i){var r={};return Object.keys(o).forEach((function(t){r[t]=o[t]})),r.enumerable=!!r.enumerable,r.configurable=!!r.configurable,("value"in r||r.initializer)&&(r.writable=!0),r=n.slice().reverse().reduce((function(n,o){return o(t,e,n)||n}),r),i&&void 0!==r.initializer&&(r.value=r.initializer?r.initializer.call(i):void 0,r.initializer=void 0),void 0===r.initializer&&(Object.defineProperty(t,e,r),r=null),r}const n=new WeakSet,o=new MutationObserver((t=>{for(const e of t)if("attributes"===e.type&&e.target instanceof Element)c(e.target);else if("childList"===e.type&&e.addedNodes.length)for(const t of e.addedNodes)t instanceof Element&&i(t)}));function i(t){for(const e of t.querySelectorAll("[data-action]"))c(e);t instanceof Element&&t.hasAttribute("data-action")&&c(t)}function r(t){const e=t.currentTarget;for(const o of a(e))if(t.type===o.type){const i=e.closest(o.tag);if(i&&n.has(i)){i&&"function"==typeof i[o.method]&&i[o.method](t);const n=e.getRootNode();if(n instanceof ShadowRoot&&n.host.matches(o.tag)){const e=n.host;"function"==typeof e[o.method]&&e[o.method](t)}}}}function*a(t){for(const e of(t.getAttribute("data-action")||"").trim().split(/\s+/)){const t=e.lastIndexOf(":"),n=e.lastIndexOf("#");yield{type:e.slice(0,t),tag:e.slice(t+1,n),method:e.slice(n+1)}}}function c(t){for(const e of a(t))t.addEventListener(e.type,r)}const s=new WeakMap;function l(t){return`data-${t.replace(/([A-Z]($|[a-z]))/g,"-$1")}`.replace(/--/g,"-").toLowerCase()}var u,d,f,b,p;const h=document.createElement("template");h.innerHTML='<style>\n          * {\n            font-size: 200%;\n          }\n\n          span {\n            width: 4rem;\n            display: inline-block;\n            text-align: center;\n          }\n\n          button {\n            width: 4rem;\n            height: 4rem;\n            border: none;\n            border-radius: 10px;\n            background-color: seagreen;\n            color: white;\n          }\n        </style>\n        <button data-action="click:my-counter#dec">-</button>\n        <span data-target="my-counter.value"></span>\n        <button data-action="click:my-counter#inc">+</button>';!function(t){const e=t.prototype.connectedCallback;t.prototype.connectedCallback=function(){this.toggleAttribute("data-catalyst",!0),function(t){for(const e of t.querySelectorAll("template[data-shadowroot]"))e.parentElement===t&&t.attachShadow({mode:"closed"===e.getAttribute("data-shadowroot")?"closed":"open"}).append(e.content.cloneNode(!0))}(this),function(t,e){e||(e=s.get(Object.getPrototypeOf(t))||[]);for(const n of e){const e=t[n],o=l(n);let i={get(){return this.getAttribute(o)||""},set(t){this.setAttribute(o,t||"")}};"number"==typeof e?i={get(){return Number(this.getAttribute(o)||0)},set(t){this.setAttribute(o,t)}}:"boolean"==typeof e&&(i={get(){return this.hasAttribute(o)},set(t){this.toggleAttribute(o,t)}}),Object.defineProperty(t,n,i),n in t&&!t.hasAttribute(o)&&i.set.call(t,e)}}(this),e&&e.call(this),function(t){n.add(t),t.shadowRoot&&(i(t.shadowRoot),o.observe(t.shadowRoot,{childList:!0,subtree:!0,attributeFilter:["data-action"]})),i(t),o.observe(t.ownerDocument,{childList:!0,subtree:!0,attributeFilter:["data-action"]})}(this)},function(t){let e=t.observedAttributes||[];Object.defineProperty(t,"observedAttributes",{get(){const n=s.get(t.prototype);return n?n.map(l).concat(e):e},set(t){e=t}})}(t),function(t){const e=t.name.replace(/([A-Z]($|[a-z]))/g,"-$1").replace(/(^-|-Element$)/g,"").toLowerCase();window.customElements.get(e)||(window[t.name]=t,window.customElements.define(e,t))}(t)}((p=class extends HTMLElement{constructor(...e){super(...e),t(this,"value",f,this),t(this,"count",b,this)}inc(){this.count++}dec(){this.count--}update(){return h}},f=e((d=p).prototype,"value",[function(t,e){Object.defineProperty(t,e,{configurable:!0,get(){return function(t,e){const n=t.tagName.toLowerCase();if(t.shadowRoot)for(const o of t.shadowRoot.querySelectorAll(`[data-target~="${n}.${e}"]`))if(!o.closest(n))return o;for(const o of t.querySelectorAll(`[data-target~="${n}.${e}"]`))if(o.closest(n)===t)return o}(this,e)}})}],{configurable:!0,enumerable:!0,writable:!0,initializer:null}),b=e(d.prototype,"count",[function(t,e){s.has(t)||s.set(t,[]),s.get(t).push(e)}],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return 0}}),e(d.prototype,"update",[view],Object.getOwnPropertyDescriptor(d.prototype,"update"),d.prototype),u=d));
+function t(t, e, n, o) {
+  n &&
+    Object.defineProperty(t, e, {
+      enumerable: n.enumerable,
+      configurable: n.configurable,
+      writable: n.writable,
+      value: n.initializer ? n.initializer.call(o) : void 0
+    })
+}
+function e(t, e, n, o, i) {
+  let r = {}
+  return (
+    Object.keys(o).forEach(function (t) {
+      r[t] = o[t]
+    }),
+    (r.enumerable = !!r.enumerable),
+    (r.configurable = !!r.configurable),
+    ('value' in r || r.initializer) && (r.writable = !0),
+    (r = n
+      .slice()
+      .reverse()
+      .reduce(function (n, o) {
+        return o(t, e, n) || n
+      }, r)),
+    i &&
+      void 0 !== r.initializer &&
+      ((r.value = r.initializer ? r.initializer.call(i) : void 0), (r.initializer = void 0)),
+    void 0 === r.initializer && (Object.defineProperty(t, e, r), (r = null)),
+    r
+  )
+}
+const n = new WeakSet(),
+  o = new MutationObserver(t => {
+    for (const e of t)
+      if ('attributes' === e.type && e.target instanceof Element) c(e.target)
+      else if ('childList' === e.type && e.addedNodes.length) for (const t of e.addedNodes) t instanceof Element && i(t)
+  })
+function i(t) {
+  for (const e of t.querySelectorAll('[data-action]')) c(e)
+  t instanceof Element && t.hasAttribute('data-action') && c(t)
+}
+function r(t) {
+  const e = t.currentTarget
+  for (const o of a(e))
+    if (t.type === o.type) {
+      const i = e.closest(o.tag)
+      if (i && n.has(i)) {
+        i && 'function' == typeof i[o.method] && i[o.method](t)
+        const n = e.getRootNode()
+        if (n instanceof ShadowRoot && n.host.matches(o.tag)) {
+          const e = n.host
+          'function' == typeof e[o.method] && e[o.method](t)
+        }
+      }
+    }
+}
+function* a(t) {
+  for (const e of (t.getAttribute('data-action') || '').trim().split(/\s+/)) {
+    const t = e.lastIndexOf(':'),
+      n = e.lastIndexOf('#')
+    yield {type: e.slice(0, t), tag: e.slice(t + 1, n), method: e.slice(n + 1)}
+  }
+}
+function c(t) {
+  for (const e of a(t)) t.addEventListener(e.type, r)
+}
+const s = new WeakMap()
+function l(t) {
+  return `data-${t.replace(/([A-Z]($|[a-z]))/g, '-$1')}`.replace(/--/g, '-').toLowerCase()
+}
+let u, d, f, b, p
+const h = document.createElement('template')
+h.innerHTML =
+  '<style>\n          * {\n            font-size: 200%;\n          }\n\n          span {\n            width: 4rem;\n            display: inline-block;\n            text-align: center;\n          }\n\n          button {\n            width: 4rem;\n            height: 4rem;\n            border: none;\n            border-radius: 10px;\n            background-color: seagreen;\n            color: white;\n          }\n        </style>\n        <button data-action="click:my-counter#dec">-</button>\n        <span data-target="my-counter.value"></span>\n        <button data-action="click:my-counter#inc">+</button>'
+!(function (t) {
+  const e = t.prototype.connectedCallback
+  ;(t.prototype.connectedCallback = function () {
+    this.toggleAttribute('data-catalyst', !0),
+      (function (t) {
+        for (const e of t.querySelectorAll('template[data-shadowroot]'))
+          e.parentElement === t &&
+            t
+              .attachShadow({mode: 'closed' === e.getAttribute('data-shadowroot') ? 'closed' : 'open'})
+              .append(e.content.cloneNode(!0))
+      })(this),
+      (function (t, e) {
+        e || (e = s.get(Object.getPrototypeOf(t)) || [])
+        for (const n of e) {
+          const e = t[n],
+            o = l(n)
+          let i = {
+            get() {
+              return this.getAttribute(o) || ''
+            },
+            set(t) {
+              this.setAttribute(o, t || '')
+            }
+          }
+          'number' == typeof e
+            ? (i = {
+                get() {
+                  return Number(this.getAttribute(o) || 0)
+                },
+                set(t) {
+                  this.setAttribute(o, t)
+                }
+              })
+            : 'boolean' == typeof e &&
+              (i = {
+                get() {
+                  return this.hasAttribute(o)
+                },
+                set(t) {
+                  this.toggleAttribute(o, t)
+                }
+              }),
+            Object.defineProperty(t, n, i),
+            n in t && !t.hasAttribute(o) && i.set.call(t, e)
+        }
+      })(this),
+      e && e.call(this),
+      (function (t) {
+        n.add(t),
+          t.shadowRoot &&
+            (i(t.shadowRoot), o.observe(t.shadowRoot, {childList: !0, subtree: !0, attributeFilter: ['data-action']})),
+          i(t),
+          o.observe(t.ownerDocument, {childList: !0, subtree: !0, attributeFilter: ['data-action']})
+      })(this)
+  }),
+    (function (t) {
+      let e = t.observedAttributes || []
+      Object.defineProperty(t, 'observedAttributes', {
+        get() {
+          const n = s.get(t.prototype)
+          return n ? n.map(l).concat(e) : e
+        },
+        set(t) {
+          e = t
+        }
+      })
+    })(t),
+    (function (t) {
+      const e = t.name
+        .replace(/([A-Z]($|[a-z]))/g, '-$1')
+        .replace(/(^-|-Element$)/g, '')
+        .toLowerCase()
+      window.customElements.get(e) || ((window[t.name] = t), window.customElements.define(e, t))
+    })(t)
+})(
+  ((p = class extends HTMLElement {
+    constructor(...e) {
+      super(...e), t(this, 'value', f, this), t(this, 'count', b, this)
+    }
+    inc() {
+      this.count++
+    }
+    dec() {
+      this.count--
+    }
+    update() {
+      return h
+    }
+  }),
+  (f = e(
+    (d = p).prototype,
+    'value',
+    [
+      function (t, e) {
+        Object.defineProperty(t, e, {
+          configurable: !0,
+          get() {
+            return (function (t, e) {
+              const n = t.tagName.toLowerCase()
+              if (t.shadowRoot)
+                for (const o of t.shadowRoot.querySelectorAll(`[data-target~="${n}.${e}"]`)) if (!o.closest(n)) return o
+              for (const o of t.querySelectorAll(`[data-target~="${n}.${e}"]`)) if (o.closest(n) === t) return o
+            })(this, e)
+          }
+        })
+      }
+    ],
+    {configurable: !0, enumerable: !0, writable: !0, initializer: null}
+  )),
+  (b = e(
+    d.prototype,
+    'count',
+    [
+      function (t, e) {
+        s.has(t) || s.set(t, []), s.get(t).push(e)
+      }
+    ],
+    {
+      configurable: !0,
+      enumerable: !0,
+      writable: !0,
+      initializer() {
+        return 0
+      }
+    }
+  )),
+  e(d.prototype, 'update', [view], Object.getOwnPropertyDescriptor(d.prototype, 'update'), d.prototype),
+  (u = d))
+)

package.json

 {
   "name": "@github/catalyst",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Helpers for creating HTML Elements as Controllers",
@@ -29,3 +29,3 @@ "homepage": "https://github.github.io/catalyst",
     "build:docs:jekyll": "cd docs && JEKYLL_ENV=production bundle exec jekyll build",
-    "build:docs:reference": "typedoc --json docs/_data/reference.json",
+    "build:docs:reference": "mkdir -p docs/_data && typedoc src/index.ts --json docs/_data/reference.json",
     "clean": "tsc --build --clean",
@@ -40,10 +40,10 @@ "lint": "eslint . --ignore-path .gitignore",
     "@github/prettier-config": "^0.0.4",
-    "@lhci/cli": "^0.6.1",
-    "@typescript-eslint/eslint-plugin": "^4.6.1",
-    "@typescript-eslint/parser": "^4.6.1",
-    "chai": "^4.2.0",
+    "@lhci/cli": "^0.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
+    "chai": "^4.3.0",
     "chai-spies": "^1.0.0",
-    "eslint": "^7.12.1",
+    "eslint": "^7.20.0",
     "eslint-plugin-github": "^4.1.1",
-    "karma": "^5.2.3",
+    "karma": "^6.1.1",
     "karma-chai": "^0.1.0",
@@ -54,7 +54,7 @@ "karma-chai-spies": "^0.1.4",
     "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^8.2.1",
-    "tslib": "^2.0.3",
-    "typedoc": "^0.19.2",
-    "typescript": "^4.0.5"
+    "mocha": "^8.3.0",
+    "tslib": "^2.1.0",
+    "typedoc": "^0.20.28",
+    "typescript": "^4.2.2"
   }
 }

README.md

 # Catalyst
 
-Catalyst is a set of patterns and techniques for developing components within a complex application. At its core, Catalyst simply provides a small library of functions to make developing Web Components easier.
+Catalyst is a set of patterns and techniques for developing components within a complex application. At its core, Catalyst simply provides a small library of functions to make developing [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) easier.
 
 For more see the [Catalyst Website](https://github.github.io/catalyst/) which includes a [Guide To using Catalyst](https://github.github.io/catalyst/guide/introduction).

No alert changes

Improved metrics

Total package byte prevSize

38761

5.66%

Lines of code

626

42.6%

No dependency changes