├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── cjs
    ├── index.js
    └── package.json
├── es.js
├── esm
    └── index.js
├── index.d.tx
├── index.js
├── min.js
├── package.json
├── rollup
    ├── babel.config.js
    └── es.config.js
└── test
    ├── dual.html
    ├── ie
        └── index.html
    ├── index.html
    ├── index.js
    ├── package.json
    └── perf.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | coverage/
4 | package-lock.json
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | coverage/*
 2 | node_modules/*
 3 | test/*
 4 | _config.yml
 5 | .DS_Store
 6 | .gitignore
 7 | .travis.yml
 8 | package-lock.json
 9 | rollup.config.js
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ISC License
 2 | 
 3 | Copyright (c) 2018-2020, Andrea Giammarchi, @WebReflection
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted, provided that the above
 7 | copyright notice and this permission notice appear in all copies.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
14 | OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15 | PERFORMANCE OF THIS SOFTWARE.
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # regularElements
 2 | 
 3 | - - -
 4 | 
 5 | **V1 Breaking Changes**
 6 | 
 7 |   * the definition now follows standard naming convention
 8 |   * callbacks are callbacks, not even driven anymore
 9 |   * if present, `observedAttributes` must contain at least one attribute name
10 |   * browsers older than IE 11 might not work as expected
11 |   * the minified gzipped size is now *~0.9K*
12 | 
13 | - - -
14 | 
15 | Everything I love about Custom Elements made available for any node, and through CSS selectors.
16 | 
17 | No Custom Elements, no Shadow DOM, and no polyfills are needed.
18 | 
19 | ```js
20 | // if loaded as <script>, it's exposed as global regularElements
21 | import {define} from 'regular-elements';
22 | 
23 | define('button.alive', {
24 |   // lifecycle callbacks
25 |   connectedCallback() {
26 |     this.disabled = false;
27 |     this.classList.add('fade-in');
28 |   },
29 |   disconnectedCallback() {
30 |     console.log('goodbye');
31 |   },
32 | 
33 |   // attributes notifications
34 |   observedAttributes: ['only', 'these', 'attrs'],
35 |   attributeChangedCallback(attributeName, oldValue, newValue) {
36 |     console.log(attributeName, oldValue, newValue);
37 |   }
38 | });
39 | 
40 | 
41 | define('#any > sel-ector[you=like]', {
42 |   // ...
43 | });
44 | ```
45 | 
46 | The module exports the same _API_ found in [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry): `define(selector, definition)`, `get(selector)`, `upgrade(node)`, and `whenDefined(selector)`.
47 | 
48 | 
49 | 
50 | ## Best Practices
51 | 
52 | Since, like it is for Custom Elements, you can define one selector per time,
53 | it is suggested to not use too generic selectors such `a` or `button` in case you'd like to compose behaviors.
54 | 
55 | A single node can indeed behave in various way, as long as it matches one or more defined selector.
56 | 
57 | ```js
58 | regularElements.define('.clicker', {
59 |   connectedCallback() {
60 |     this.addEventListener('click', theClicker);
61 |   }
62 | });
63 | regularElements.define('.hi-five', {
64 |   connectedCallback() {
65 |     this.textContent += ' 🖐 ';
66 |   }
67 | });
68 | ```
69 | 
70 | Whenever an element with either the class `clicker`, or `hi-five`, or both is created or found live on the DOM, it will be setup once per behavior, as [demoed here](https://webreflection.github.io/regular-elements/test/multi.html).
71 | 


--------------------------------------------------------------------------------
/cjs/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | const Lie = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('@webreflection/lie'));
 3 | const QSAO = (m => /* c8 ignore start */ m.__esModule ? m.default : m /* c8 ignore stop */)(require('qsa-observer'));
 4 | 
 5 | const attributes = new WeakMap;
 6 | const query = [];
 7 | const config = {};
 8 | const defined = {};
 9 | 
10 | const attributeChanged = (records, o) => {
11 |   for (let h = attributes.get(o), i = 0, {length} = records; i < length; i++) {
12 |     const {target, attributeName, oldValue} = records[i];
13 |     const newValue = target.getAttribute(attributeName);
14 |     h.call(target, attributeName, oldValue, newValue);
15 |   }
16 | };
17 | 
18 | const {flush, parse} = QSAO({
19 |   query,
20 |   handle(element, connected, selector) {
21 |     const {m, o} = config[selector];
22 |     if (!m.has(element)) {
23 |       m.set(element, o);
24 |       const {
25 |         observedAttributes,
26 |         attributeChangedCallback
27 |       } = o;
28 |       if (observedAttributes) {
29 |         const mo = new MutationObserver(attributeChanged);
30 |         mo.observe(element, {
31 |           attributes: true,
32 |           attributeOldValue: true,
33 |           attributeFilter: observedAttributes.map(attributeName => {
34 |             if (element.hasAttribute(attributeName))
35 |               attributeChangedCallback.call(
36 |                 element,
37 |                 attributeName,
38 |                 null,
39 |                 element.getAttribute(attributeName)
40 |               );
41 |             return attributeName;
42 |           })
43 |         });
44 |         attributes.set(mo, attributeChangedCallback);
45 |       }
46 |     }
47 |     const method = o[(connected ? '' : 'dis') + 'connectedCallback'];
48 |     if (method)
49 |       method.call(element);
50 |   }
51 | });
52 | 
53 | const get = selector => (config[selector] || attributes).o;
54 | exports.get = get;
55 | 
56 | const define = (selector, options) => {
57 |   if (get(selector))
58 |     throw new Error('duplicated: ' + selector);
59 |   flush();
60 |   query.push(selector);
61 |   config[selector] = {o: options, m: new WeakMap};
62 |   parse(document.querySelectorAll(selector));
63 |   whenDefined(selector);
64 |   defined[selector]._();
65 | };
66 | exports.define = define;
67 | 
68 | const upgrade = element => {
69 |   if (query.length) {
70 |     flush();
71 |     parse([element]);
72 |   }
73 | };
74 | exports.upgrade = upgrade;
75 | 
76 | const whenDefined = selector => {
77 |   if (!(selector in defined)) {
78 |     let _, $ = new Lie($ => { _ = $; });
79 |     defined[selector] = {_, $};
80 |   }
81 |   return defined[selector].$;
82 | };
83 | exports.whenDefined = whenDefined;
84 | 


--------------------------------------------------------------------------------
/cjs/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/es.js:
--------------------------------------------------------------------------------
1 | self.regularElements=function(e){"use strict";var t="function"==typeof Promise?Promise:function(e){let t,r=[],l=0;return e((e=>{t=e,l=1,r.splice(0).forEach(n)})),{then:n};function n(e){return l?setTimeout(e,0,t):r.push(e),this}};const r=!0,l=!1,n="querySelectorAll";function o(e){this.observe(e,{subtree:r,childList:r})}const a="querySelectorAll",{document:s,Element:c,MutationObserver:d,Set:u,WeakMap:i}=self,h=e=>a in e,{filter:f}=[];const b=new WeakMap,g=[],p={},m={},w=(e,t)=>{for(let r=b.get(t),l=0,{length:n}=e;l<n;l++){const{target:t,attributeName:n,oldValue:o}=e[l],a=t.getAttribute(n);r.call(t,n,o,a)}},{flush:v,parse:S}=(e=>{const t=new i,b=(r,l)=>{let n;if(l)for(let o,a=(e=>e.matches||e.webkitMatchesSelector||e.msMatchesSelector)(r),s=0,{length:c}=p;s<c;s++)a.call(r,o=p[s])&&(t.has(r)||t.set(r,new u),n=t.get(r),n.has(o)||(n.add(o),e.handle(r,l,o)));else t.has(r)&&(n=t.get(r),t.delete(r),n.forEach((t=>{e.handle(r,l,t)})))},g=(e,t=!0)=>{for(let r=0,{length:l}=e;r<l;r++)b(e[r],t)},{query:p}=e,m=e.root||s,w=((e,t,a)=>{const s=(t,l,o,a,c)=>{for(let d=0,{length:u}=t;d<u;d++){const u=t[d];(c||n in u)&&(a?l.has(u)||(l.add(u),o.delete(u),e(u,a)):o.has(u)||(o.add(u),l.delete(u),e(u,a)),c||s(u[n]("*"),l,o,a,r))}},c=new(a||MutationObserver)((e=>{for(let t=new Set,n=new Set,o=0,{length:a}=e;o<a;o++){const{addedNodes:a,removedNodes:c}=e[o];s(c,t,n,l,l),s(a,t,n,r,l)}}));return c.add=o,c.add(t||document),c})(b,m,d),{attachShadow:v}=c.prototype;return v&&(c.prototype.attachShadow=function(e){const t=v.call(this,e);return w.add(t),t}),p.length&&g(m[a](p)),{drop:e=>{for(let r=0,{length:l}=e;r<l;r++)t.delete(e[r])},flush:()=>{const e=w.takeRecords();for(let t=0,{length:r}=e;t<r;t++)g(f.call(e[t].removedNodes,h),!1),g(f.call(e[t].addedNodes,h),!0)},observer:w,parse:g}})({query:g,handle(e,t,r){const{m:l,o:n}=p[r];if(!l.has(e)){l.set(e,n);const{observedAttributes:t,attributeChangedCallback:r}=n;if(t){const l=new MutationObserver(w);l.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:t.map((t=>(e.hasAttribute(t)&&r.call(e,t,null,e.getAttribute(t)),t)))}),b.set(l,r)}}const o=n[(t?"":"dis")+"connectedCallback"];o&&o.call(e)}}),y=e=>(p[e]||b).o,M=e=>{if(!(e in m)){let r,l=new t((e=>{r=e}));m[e]={_:r,$:l}}return m[e].$};return e.define=(e,t)=>{if(y(e))throw new Error("duplicated: "+e);v(),g.push(e),p[e]={o:t,m:new WeakMap},S(document.querySelectorAll(e)),M(e),m[e]._()},e.get=y,e.upgrade=e=>{g.length&&(v(),S([e]))},e.whenDefined=M,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
2 | 


--------------------------------------------------------------------------------
/esm/index.js:
--------------------------------------------------------------------------------
 1 | import Lie from '@webreflection/lie';
 2 | import QSAO from 'qsa-observer';
 3 | 
 4 | const attributes = new WeakMap;
 5 | const query = [];
 6 | const config = {};
 7 | const defined = {};
 8 | 
 9 | const attributeChanged = (records, o) => {
10 |   for (let h = attributes.get(o), i = 0, {length} = records; i < length; i++) {
11 |     const {target, attributeName, oldValue} = records[i];
12 |     const newValue = target.getAttribute(attributeName);
13 |     h.call(target, attributeName, oldValue, newValue);
14 |   }
15 | };
16 | 
17 | const {flush, parse} = QSAO({
18 |   query,
19 |   handle(element, connected, selector) {
20 |     const {m, o} = config[selector];
21 |     if (!m.has(element)) {
22 |       m.set(element, o);
23 |       const {
24 |         observedAttributes,
25 |         attributeChangedCallback
26 |       } = o;
27 |       if (observedAttributes) {
28 |         const mo = new MutationObserver(attributeChanged);
29 |         mo.observe(element, {
30 |           attributes: true,
31 |           attributeOldValue: true,
32 |           attributeFilter: observedAttributes.map(attributeName => {
33 |             if (element.hasAttribute(attributeName))
34 |               attributeChangedCallback.call(
35 |                 element,
36 |                 attributeName,
37 |                 null,
38 |                 element.getAttribute(attributeName)
39 |               );
40 |             return attributeName;
41 |           })
42 |         });
43 |         attributes.set(mo, attributeChangedCallback);
44 |       }
45 |     }
46 |     const method = o[(connected ? '' : 'dis') + 'connectedCallback'];
47 |     if (method)
48 |       method.call(element);
49 |   }
50 | });
51 | 
52 | export const get = selector => (config[selector] || attributes).o;
53 | 
54 | export const define = (selector, options) => {
55 |   if (get(selector))
56 |     throw new Error('duplicated: ' + selector);
57 |   flush();
58 |   query.push(selector);
59 |   config[selector] = {o: options, m: new WeakMap};
60 |   parse(document.querySelectorAll(selector));
61 |   whenDefined(selector);
62 |   defined[selector]._();
63 | };
64 | 
65 | export const upgrade = element => {
66 |   if (query.length) {
67 |     flush();
68 |     parse([element]);
69 |   }
70 | };
71 | 
72 | export const whenDefined = selector => {
73 |   if (!(selector in defined)) {
74 |     let _, $ = new Lie($ => { _ = $; });
75 |     defined[selector] = {_, $};
76 |   }
77 |   return defined[selector].$;
78 | };
79 | 


--------------------------------------------------------------------------------
/index.d.tx:
--------------------------------------------------------------------------------
 1 | declare module "regular-elements" {
 2 |   export interface RegularElementAttributeChangeEvent extends Event {
 3 |     attributeName: string;
 4 |     oldValue: string;
 5 |     newValue: string;
 6 |   }
 7 | 
 8 |   interface regularElementsOptions {
 9 |     onconnected?(): void;
10 |     ondisconnected?(): void;
11 |     onattributechanged?(event: RegularElementAttributeChangeEvent): void;
12 |     attributeFilter?: string[];
13 |   }
14 | 
15 |   const regularElements: {
16 |     define(selector: string, options: regularElementsOptions): void;
17 |     get(selector: string): regularElementsOptions;
18 |     whenDefined(selector: string): Promise<regularElementsOptions>;
19 |   };
20 |   export default regularElements;
21 | }
22 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | self.regularElements = (function (exports) {
  2 |   'use strict';
  3 | 
  4 |   var Lie = typeof Promise === 'function' ? Promise : function (fn) {
  5 |     var queue = [],
  6 |         resolved = 0,
  7 |         value;
  8 |     fn(function ($) {
  9 |       value = $;
 10 |       resolved = 1;
 11 |       queue.splice(0).forEach(then);
 12 |     });
 13 |     return {
 14 |       then: then
 15 |     };
 16 | 
 17 |     function then(fn) {
 18 |       return resolved ? setTimeout(fn, 0, value) : queue.push(fn), this;
 19 |     }
 20 |   };
 21 | 
 22 |   var TRUE = true,
 23 |       FALSE = false;
 24 |   var QSA$1 = 'querySelectorAll';
 25 | 
 26 |   function add(node) {
 27 |     this.observe(node, {
 28 |       subtree: TRUE,
 29 |       childList: TRUE
 30 |     });
 31 |   }
 32 |   /**
 33 |    * Start observing a generic document or root element.
 34 |    * @param {Function} callback triggered per each dis/connected node
 35 |    * @param {Element?} root by default, the global document to observe
 36 |    * @param {Function?} MO by default, the global MutationObserver
 37 |    * @returns {MutationObserver}
 38 |    */
 39 | 
 40 | 
 41 |   var notify = function notify(callback, root, MO) {
 42 |     var loop = function loop(nodes, added, removed, connected, pass) {
 43 |       for (var i = 0, length = nodes.length; i < length; i++) {
 44 |         var node = nodes[i];
 45 | 
 46 |         if (pass || QSA$1 in node) {
 47 |           if (connected) {
 48 |             if (!added.has(node)) {
 49 |               added.add(node);
 50 |               removed["delete"](node);
 51 |               callback(node, connected);
 52 |             }
 53 |           } else if (!removed.has(node)) {
 54 |             removed.add(node);
 55 |             added["delete"](node);
 56 |             callback(node, connected);
 57 |           }
 58 | 
 59 |           if (!pass) loop(node[QSA$1]('*'), added, removed, connected, TRUE);
 60 |         }
 61 |       }
 62 |     };
 63 | 
 64 |     var observer = new (MO || MutationObserver)(function (records) {
 65 |       for (var added = new Set(), removed = new Set(), i = 0, length = records.length; i < length; i++) {
 66 |         var _records$i = records[i],
 67 |             addedNodes = _records$i.addedNodes,
 68 |             removedNodes = _records$i.removedNodes;
 69 |         loop(removedNodes, added, removed, FALSE, FALSE);
 70 |         loop(addedNodes, added, removed, TRUE, FALSE);
 71 |       }
 72 |     });
 73 |     observer.add = add;
 74 |     observer.add(root || document);
 75 |     return observer;
 76 |   };
 77 | 
 78 |   var QSA = 'querySelectorAll';
 79 |   var _self = self,
 80 |       document$1 = _self.document,
 81 |       Element = _self.Element,
 82 |       MutationObserver$1 = _self.MutationObserver,
 83 |       Set$1 = _self.Set,
 84 |       WeakMap$1 = _self.WeakMap;
 85 | 
 86 |   var elements = function elements(element) {
 87 |     return QSA in element;
 88 |   };
 89 | 
 90 |   var filter = [].filter;
 91 |   var QSAO = (function (options) {
 92 |     var live = new WeakMap$1();
 93 | 
 94 |     var drop = function drop(elements) {
 95 |       for (var i = 0, length = elements.length; i < length; i++) {
 96 |         live["delete"](elements[i]);
 97 |       }
 98 |     };
 99 | 
100 |     var flush = function flush() {
101 |       var records = observer.takeRecords();
102 | 
103 |       for (var i = 0, length = records.length; i < length; i++) {
104 |         parse(filter.call(records[i].removedNodes, elements), false);
105 |         parse(filter.call(records[i].addedNodes, elements), true);
106 |       }
107 |     };
108 | 
109 |     var matches = function matches(element) {
110 |       return element.matches || element.webkitMatchesSelector || element.msMatchesSelector;
111 |     };
112 | 
113 |     var notifier = function notifier(element, connected) {
114 |       var selectors;
115 | 
116 |       if (connected) {
117 |         for (var q, m = matches(element), i = 0, length = query.length; i < length; i++) {
118 |           if (m.call(element, q = query[i])) {
119 |             if (!live.has(element)) live.set(element, new Set$1());
120 |             selectors = live.get(element);
121 | 
122 |             if (!selectors.has(q)) {
123 |               selectors.add(q);
124 |               options.handle(element, connected, q);
125 |             }
126 |           }
127 |         }
128 |       } else if (live.has(element)) {
129 |         selectors = live.get(element);
130 |         live["delete"](element);
131 |         selectors.forEach(function (q) {
132 |           options.handle(element, connected, q);
133 |         });
134 |       }
135 |     };
136 | 
137 |     var parse = function parse(elements) {
138 |       var connected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
139 | 
140 |       for (var i = 0, length = elements.length; i < length; i++) {
141 |         notifier(elements[i], connected);
142 |       }
143 |     };
144 | 
145 |     var query = options.query;
146 |     var root = options.root || document$1;
147 |     var observer = notify(notifier, root, MutationObserver$1);
148 |     var attachShadow = Element.prototype.attachShadow;
149 |     if (attachShadow) Element.prototype.attachShadow = function (init) {
150 |       var shadowRoot = attachShadow.call(this, init);
151 |       observer.add(shadowRoot);
152 |       return shadowRoot;
153 |     };
154 |     if (query.length) parse(root[QSA](query));
155 |     return {
156 |       drop: drop,
157 |       flush: flush,
158 |       observer: observer,
159 |       parse: parse
160 |     };
161 |   });
162 | 
163 |   var attributes = new WeakMap();
164 |   var query = [];
165 |   var config = {};
166 |   var defined = {};
167 | 
168 |   var attributeChanged = function attributeChanged(records, o) {
169 |     for (var h = attributes.get(o), i = 0, length = records.length; i < length; i++) {
170 |       var _records$i = records[i],
171 |           target = _records$i.target,
172 |           attributeName = _records$i.attributeName,
173 |           oldValue = _records$i.oldValue;
174 |       var newValue = target.getAttribute(attributeName);
175 |       h.call(target, attributeName, oldValue, newValue);
176 |     }
177 |   };
178 | 
179 |   var _QSAO = QSAO({
180 |     query: query,
181 |     handle: function handle(element, connected, selector) {
182 |       var _config$selector = config[selector],
183 |           m = _config$selector.m,
184 |           o = _config$selector.o;
185 | 
186 |       if (!m.has(element)) {
187 |         m.set(element, o);
188 |         var observedAttributes = o.observedAttributes,
189 |             attributeChangedCallback = o.attributeChangedCallback;
190 | 
191 |         if (observedAttributes) {
192 |           var mo = new MutationObserver(attributeChanged);
193 |           mo.observe(element, {
194 |             attributes: true,
195 |             attributeOldValue: true,
196 |             attributeFilter: observedAttributes.map(function (attributeName) {
197 |               if (element.hasAttribute(attributeName)) attributeChangedCallback.call(element, attributeName, null, element.getAttribute(attributeName));
198 |               return attributeName;
199 |             })
200 |           });
201 |           attributes.set(mo, attributeChangedCallback);
202 |         }
203 |       }
204 | 
205 |       var method = o[(connected ? '' : 'dis') + 'connectedCallback'];
206 |       if (method) method.call(element);
207 |     }
208 |   }),
209 |       flush = _QSAO.flush,
210 |       parse = _QSAO.parse;
211 | 
212 |   var get = function get(selector) {
213 |     return (config[selector] || attributes).o;
214 |   };
215 |   var define = function define(selector, options) {
216 |     if (get(selector)) throw new Error('duplicated: ' + selector);
217 |     flush();
218 |     query.push(selector);
219 |     config[selector] = {
220 |       o: options,
221 |       m: new WeakMap()
222 |     };
223 |     parse(document.querySelectorAll(selector));
224 |     whenDefined(selector);
225 | 
226 |     defined[selector]._();
227 |   };
228 |   var upgrade = function upgrade(element) {
229 |     if (query.length) {
230 |       flush();
231 |       parse([element]);
232 |     }
233 |   };
234 |   var whenDefined = function whenDefined(selector) {
235 |     if (!(selector in defined)) {
236 |       var _,
237 |           $ = new Lie(function ($) {
238 |         _ = $;
239 |       });
240 | 
241 |       defined[selector] = {
242 |         _: _,
243 |         $: $
244 |       };
245 |     }
246 | 
247 |     return defined[selector].$;
248 |   };
249 | 
250 |   exports.define = define;
251 |   exports.get = get;
252 |   exports.upgrade = upgrade;
253 |   exports.whenDefined = whenDefined;
254 | 
255 |   Object.defineProperty(exports, '__esModule', { value: true });
256 | 
257 |   return exports;
258 | 
259 | }({}));
260 | 


--------------------------------------------------------------------------------
/min.js:
--------------------------------------------------------------------------------
1 | self.regularElements=function(e){"use strict";var t="function"==typeof Promise?Promise:function(e){var t,r=[],n=0;return e((function(e){t=e,n=1,r.splice(0).forEach(a)})),{then:a};function a(e){return n?setTimeout(e,0,t):r.push(e),this}},r=!0,n=!1,a="querySelectorAll";function o(e){this.observe(e,{subtree:r,childList:r})}var u="querySelectorAll",l=self,i=l.document,c=l.Element,d=l.MutationObserver,s=l.Set,f=l.WeakMap,h=function(e){return u in e},v=[].filter,b=new WeakMap,g=[],p={},m={},w=function(e,t){for(var r=b.get(t),n=0,a=e.length;n<a;n++){var o=e[n],u=o.target,l=o.attributeName,i=o.oldValue,c=u.getAttribute(l);r.call(u,l,i,c)}},S=function(e){var t=new f,l=function(r,n){var a;if(n)for(var o,u=function(e){return e.matches||e.webkitMatchesSelector||e.msMatchesSelector}(r),l=0,i=g.length;l<i;l++)u.call(r,o=g[l])&&(t.has(r)||t.set(r,new s),(a=t.get(r)).has(o)||(a.add(o),e.handle(r,n,o)));else t.has(r)&&(a=t.get(r),t.delete(r),a.forEach((function(t){e.handle(r,n,t)})))},b=function(e){for(var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=0,n=e.length;r<n;r++)l(e[r],t)},g=e.query,p=e.root||i,m=function(e,t,u){var l=function t(n,o,u,l,i){for(var c=0,d=n.length;c<d;c++){var s=n[c];(i||a in s)&&(l?o.has(s)||(o.add(s),u.delete(s),e(s,l)):u.has(s)||(u.add(s),o.delete(s),e(s,l)),i||t(s[a]("*"),o,u,l,r))}},i=new(u||MutationObserver)((function(e){for(var t=new Set,a=new Set,o=0,u=e.length;o<u;o++){var i=e[o],c=i.addedNodes,d=i.removedNodes;l(d,t,a,n,n),l(c,t,a,r,n)}}));return i.add=o,i.add(t||document),i}(l,p,d),w=c.prototype.attachShadow;return w&&(c.prototype.attachShadow=function(e){var t=w.call(this,e);return m.add(t),t}),g.length&&b(p[u](g)),{drop:function(e){for(var r=0,n=e.length;r<n;r++)t.delete(e[r])},flush:function(){for(var e=m.takeRecords(),t=0,r=e.length;t<r;t++)b(v.call(e[t].removedNodes,h),!1),b(v.call(e[t].addedNodes,h),!0)},observer:m,parse:b}}({query:g,handle:function(e,t,r){var n=p[r],a=n.m,o=n.o;if(!a.has(e)){a.set(e,o);var u=o.observedAttributes,l=o.attributeChangedCallback;if(u){var i=new MutationObserver(w);i.observe(e,{attributes:!0,attributeOldValue:!0,attributeFilter:u.map((function(t){return e.hasAttribute(t)&&l.call(e,t,null,e.getAttribute(t)),t}))}),b.set(i,l)}}var c=o[(t?"":"dis")+"connectedCallback"];c&&c.call(e)}}),y=S.flush,M=S.parse,k=function(e){return(p[e]||b).o},A=function(e){if(!(e in m)){var r,n=new t((function(e){r=e}));m[e]={_:r,$:n}}return m[e].$};return e.define=function(e,t){if(k(e))throw new Error("duplicated: "+e);y(),g.push(e),p[e]={o:t,m:new WeakMap},M(document.querySelectorAll(e)),A(e),m[e]._()},e.get=k,e.upgrade=function(e){g.length&&(y(),M([e]))},e.whenDefined=A,Object.defineProperty(e,"__esModule",{value:!0}),e}({});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "regular-elements",
 3 |   "version": "1.2.3",
 4 |   "description": "Custom Elements made available for any node, and through CSS selectors",
 5 |   "main": "./cjs/index.js",
 6 |   "scripts": {
 7 |     "build": "npm run cjs && npm run rollup:es && npm run rollup:babel && npm run min && npm run size",
 8 |     "cjs": "ascjs esm cjs",
 9 |     "rollup:es": "rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck",
10 |     "rollup:babel": "rollup --config rollup/babel.config.js && sed -i.bck 's/^var /self./' index.js && rm -rf index.js.bck",
11 |     "min": "terser index.js --comments='/^!/' -c -m -o min.js",
12 |     "size": "cat min.js | gzip -9 | wc -c && cat min.js | brotli | wc -c && cat es.js | gzip -9 | wc -c && cat es.js | brotli | wc -c"
13 |   },
14 |   "keywords": [
15 |     "dom",
16 |     "custom",
17 |     "regular",
18 |     "elements",
19 |     "define",
20 |     "behavior"
21 |   ],
22 |   "author": "Andrea Giammarchi",
23 |   "license": "ISC",
24 |   "devDependencies": {
25 |     "@babel/core": "^7.14.6",
26 |     "@babel/preset-env": "^7.14.5",
27 |     "@rollup/plugin-babel": "^5.3.0",
28 |     "@rollup/plugin-node-resolve": "^13.0.0",
29 |     "@ungap/degap": "^0.2.6",
30 |     "ascjs": "^5.0.1",
31 |     "rollup": "^2.51.2",
32 |     "rollup-plugin-includepaths": "^0.2.4",
33 |     "rollup-plugin-terser": "^7.0.2",
34 |     "terser": "^5.7.0"
35 |   },
36 |   "module": "./esm/index.js",
37 |   "type": "module",
38 |   "exports": {
39 |     "import": "./esm/index.js",
40 |     "default": "./cjs/index.js"
41 |   },
42 |   "unpkg": "min.js",
43 |   "dependencies": {
44 |     "@webreflection/lie": "^0.1.1",
45 |     "qsa-observer": "^2.0.2"
46 |   },
47 |   "repository": {
48 |     "type": "git",
49 |     "url": "git+https://github.com/WebReflection/regular-elements.git"
50 |   },
51 |   "bugs": {
52 |     "url": "https://github.com/WebReflection/regular-elements/issues"
53 |   },
54 |   "homepage": "https://github.com/WebReflection/regular-elements#readme"
55 | }
56 | 


--------------------------------------------------------------------------------
/rollup/babel.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import babel from '@rollup/plugin-babel';
 3 | export default {
 4 |   input: './esm/index.js',
 5 |   plugins: [
 6 |     nodeResolve(),
 7 |     babel({
 8 |       presets: ['@babel/preset-env'],
 9 |       babelHelpers: 'bundled'
10 |     })
11 |   ],
12 |   context: 'null',
13 |   moduleContext: 'null',
14 |   output: {
15 |     exports: 'named',
16 |     file: './index.js',
17 |     format: 'iife',
18 |     name: 'regularElements'
19 |   }
20 | };
21 | 


--------------------------------------------------------------------------------
/rollup/es.config.js:
--------------------------------------------------------------------------------
 1 | import {nodeResolve} from '@rollup/plugin-node-resolve';
 2 | import {terser} from 'rollup-plugin-terser';
 3 | export default {
 4 |   input: './esm/index.js',
 5 |   plugins: [
 6 |     nodeResolve(),
 7 |     terser()
 8 |   ],
 9 |   context: 'null',
10 |   moduleContext: 'null',
11 |   output: {
12 |     exports: 'named',
13 |     file: './es.js',
14 |     format: 'iife',
15 |     name: 'regularElements'
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/test/dual.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>regular-elements</title>
 7 |   <script type="module">
 8 |   import(
 9 |     /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
10 |     '../esm/index.js' :
11 |     'https://unpkg.com/regular-elements?module'
12 |   )
13 |   .then(({define, get, whenDefined}) => {
14 |     whenDefined('button').then(() => {
15 |       console.log('button', get('button'));
16 |     });
17 |     whenDefined('body > .test').then(() => {
18 |       console.log('body > .test', get('body > .test'));
19 |     });
20 |     define('button', {
21 |       connectedCallback() {
22 |         console.log('button', 'connected');
23 |       }
24 |     });
25 |     define('body > .test', {
26 |       connectedCallback() {
27 |         console.log('body > .test', 'connected');
28 |       },
29 |       disconnectedCallback() {
30 |         console.log('body > .test', 'disconnected');
31 |       }
32 |     });
33 |     setTimeout(() => {
34 |       document.querySelector('button').remove();
35 |     }, 1000);
36 |   });
37 |   </script>
38 | </head>
39 | <body>
40 |   <button class="test">OK</button>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/test/ie/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>Regular Elements</title>
 7 |   <script src="../../index.js"></script>
 8 |   <script>
 9 |   this.onload = function () {
10 |     regularElements.whenDefined('button').then(function () {
11 |       console.log('button', regularElements.get('button'));
12 |     });
13 |     regularElements.define('button', {
14 |       connectedCallback: function () {
15 |         this.textContent += ' live! Click me to erase the body';
16 |         this.addEventListener('click', function () {
17 |           document.body.textContent = '';
18 |         });
19 |       },
20 |       disconnectedCallback: function () {
21 |         document.body.appendChild(
22 |           document.createElement('p')
23 |         ).textContent = 'bye bye';
24 |       },
25 |       observedAttributes: ['test'],
26 |       attributeChangedCallback: function (attributeName, oldValue, newValue) {
27 |         document.body.appendChild(
28 |           document.createElement('p')
29 |         ).textContent = [
30 |           'attribute changed:',
31 |           attributeName,
32 |           oldValue == null ? 'null' : oldValue,
33 |           newValue == null ? 'null' : newValue
34 |         ].join(' ');
35 |       }
36 |     });
37 |     var button = document.querySelector('button');
38 |     button.setAttribute('test', 'OK');
39 |     button.setAttribute('nope', 'OK');
40 |   };
41 |   </script>
42 | </head>
43 | <body>
44 |   <button>OK</button>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>regular-elements</title>
 7 |   <script type="module">
 8 |   import(
 9 |     /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
10 |     '../esm/index.js' :
11 |     'https://unpkg.com/regular-elements?module'
12 |   )
13 |   .then(({define, get, whenDefined}) => {
14 |     whenDefined('button').then(() => {
15 |       console.log('button', get('button'));
16 |     });
17 |     define('button', {
18 |       connectedCallback() {
19 |         this.textContent += ' live! Click me to erase the body';
20 |         this.addEventListener('click', function () {
21 |           document.body.textContent = '';
22 |         });
23 |       },
24 |       disconnectedCallback() {
25 |         document.body.appendChild(
26 |           document.createElement('p')
27 |         ).textContent = 'bye bye';
28 |       },
29 |       observedAttributes: ['test'],
30 |       attributeChangedCallback(attributeName, oldValue, newValue) {
31 |         document.body.appendChild(
32 |           document.createElement('p')
33 |         ).textContent = [
34 |           'attribute changed:',
35 |           attributeName,
36 |           oldValue == null ? 'null' : oldValue,
37 |           newValue == null ? 'null' : newValue
38 |         ].join(' ');
39 |       }
40 |     });
41 |     const button = document.querySelector('button');
42 |     button.setAttribute('test', 'OK');
43 |     button.setAttribute('nope', 'OK');
44 |   });
45 |   </script>
46 | </head>
47 | <body>
48 |   <button>OK</button>
49 | </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/test/index.js:
--------------------------------------------------------------------------------
1 | require('../cjs');


--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {"type":"commonjs"}


--------------------------------------------------------------------------------
/test/perf.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <script type="module">
 7 |     import(
 8 |       /^(?:localhost|[::1]|127(?:.d+){3})$/.test(location.hostname) ?
 9 |       '../esm/index.js' :
10 |       'https://unpkg.com/regular-elements?module'
11 |     ).then(regularElements => {
12 |       regularElements.define('tr', {
13 |         connectedCallback: function () {
14 |           this.classList.add('live');
15 |         },
16 |         disconnectedCallback: function () {
17 |           this.classList.remove('live');
18 |         }
19 |       });
20 |       regularElements.define('td', {
21 |         connectedCallback: function () {
22 |           this.classList.add('live');
23 |         },
24 |         observedAttributes: ['class'],
25 |         attributeChangedCallback: function () {
26 |           var dataset = this.dataset;
27 |           dataset.changes = parseInt(dataset.changes || 0) + 1;
28 |         }
29 |       });
30 |       //*/
31 |       var table = document.querySelector('table');
32 |       for (var i = 0; i < 1000; i++) {
33 |         var tr = table.appendChild(document.createElement('tr'));
34 |         for (var j = 0; j < 5; j++)
35 |           tr.appendChild(document.createElement('td')).textContent = 'td ' + (j + 1);
36 |       }
37 |       setTimeout(function () {
38 |         document.body.removeChild(table);
39 |         setTimeout(function () {
40 |           document.body.appendChild(table);
41 |         }, 100);
42 |       }, 100);
43 |     });
44 |   </script>
45 | </head>
46 | <body>
47 |   <table></table>
48 | </body>
49 | </html>
50 | 


--------------------------------------------------------------------------------