@techexp/webitem 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +4 -4
- package/dist/webitem-esm.js +8 -7
- package/dist/webitem-script-min.js +5 -5
- package/dist/webitem-script.js +40 -22
- package/package.json +16 -15
- package/scripts/{build.js → build.mjs} +3 -4
- package/scripts/{build.utils.js → build.utils.mjs} +9 -18
- package/scripts/clean.mjs +5 -0
- package/scripts/{console.utils.js → console.utils.mjs} +2 -6
- package/scripts/{server.js → server.mjs} +4 -5
- package/src/test/webitem.test.js +45 -43
- package/scripts/clean.js +0 -5
package/.eslintrc.js
CHANGED
|
@@ -15,7 +15,7 @@ module.exports = {
|
|
|
15
15
|
ecmaVersion: 12,
|
|
16
16
|
sourceType: 'module'
|
|
17
17
|
},
|
|
18
|
-
|
|
18
|
+
|
|
19
19
|
globals: {
|
|
20
20
|
describe: readonly,
|
|
21
21
|
it: readonly,
|
|
@@ -52,11 +52,11 @@ module.exports = {
|
|
|
52
52
|
'key-spacing': [error, {beforeColon: false, afterColon:true}],
|
|
53
53
|
'keyword-spacing': [error],
|
|
54
54
|
'max-depth': [error, 4],
|
|
55
|
-
'max-len': [error, {code:
|
|
56
|
-
'max-lines': [error, {max:
|
|
55
|
+
'max-len': [error, {code: 120, comments: 100, ignoreUrls: true}],
|
|
56
|
+
'max-lines': [error, {max: 250, skipBlankLines: true, skipComments: false}],
|
|
57
57
|
'max-lines-per-function': [error, {max: 200, skipBlankLines: true, skipComments: true, IIFEs: false}],
|
|
58
58
|
'max-nested-callbacks': [error, 4],
|
|
59
|
-
'max-params': [error,
|
|
59
|
+
'max-params': [error, 5],
|
|
60
60
|
'max-statements': [error, 10],
|
|
61
61
|
'max-statements-per-line': [error, {max: 2}],
|
|
62
62
|
'new-cap': [error],
|
package/dist/webitem-esm.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.5.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
|
|
7
8
|
// src/webitem.js
|
|
8
|
-
import {Domer, Objecter, Stringer} from "@techexp/jshelper";
|
|
9
|
+
import { Domer, Objecter, Stringer } from "@techexp/jshelper";
|
|
9
10
|
import bind from "@techexp/data-bind";
|
|
10
11
|
function defineElement({
|
|
11
12
|
nameWithDash,
|
|
@@ -28,11 +29,11 @@ function defineElement({
|
|
|
28
29
|
this.wi.actions = defineActions(this, actionList);
|
|
29
30
|
addEventListeners(this, eventHandlerList);
|
|
30
31
|
this.wi.addProperty = function(name, value, sel, attr, onChange) {
|
|
31
|
-
const prop = {name, value, sel, attr, onChange};
|
|
32
|
+
const prop = { name, value, sel, attr, onChange };
|
|
32
33
|
addProperty(root.wi.properties, prop, root);
|
|
33
34
|
};
|
|
34
35
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action);
|
|
35
|
-
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, {sel, eventName, listener});
|
|
36
|
+
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, { sel, eventName, listener });
|
|
36
37
|
}
|
|
37
38
|
};
|
|
38
39
|
customElements.define(nameWithDash, el);
|
|
@@ -47,7 +48,7 @@ function bindProperties(root, propertyList) {
|
|
|
47
48
|
}
|
|
48
49
|
function addProperty(obj, prop, root) {
|
|
49
50
|
const onChange = createOnChange(prop, root);
|
|
50
|
-
bind({obj, prop: prop.name, sel: prop.sel, attr: prop.attr, root: root.shadowRoot, onChange});
|
|
51
|
+
bind({ obj, prop: prop.name, sel: prop.sel, attr: prop.attr, root: root.shadowRoot, onChange });
|
|
51
52
|
if (prop.value !== void 0) {
|
|
52
53
|
obj[prop.name] = prop.value;
|
|
53
54
|
}
|
|
@@ -87,7 +88,7 @@ function addEventListeners(root, eventHandlerList) {
|
|
|
87
88
|
}
|
|
88
89
|
eventHandlerList.forEach((h) => addHandler(root, h));
|
|
89
90
|
}
|
|
90
|
-
function addHandler(root, {sel, eventName, listener}) {
|
|
91
|
+
function addHandler(root, { sel, eventName, listener }) {
|
|
91
92
|
const elements = Domer.all(sel, root.shadowRoot);
|
|
92
93
|
elements.forEach((el) => {
|
|
93
94
|
el.addEventListener(eventName, (ev) => {
|
|
@@ -97,7 +98,7 @@ function addHandler(root, {sel, eventName, listener}) {
|
|
|
97
98
|
}
|
|
98
99
|
function addHtml(root, html, css, display) {
|
|
99
100
|
html = getHtml(root, html);
|
|
100
|
-
const shadow = root.attachShadow({mode: "open"});
|
|
101
|
+
const shadow = root.attachShadow({ mode: "open" });
|
|
101
102
|
const nodes = Domer.createElements(getCss(css, display) + html);
|
|
102
103
|
shadow.append(...nodes);
|
|
103
104
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.5.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var webitem=(()=>{var
|
|
7
|
+
var webitem=(()=>{var v=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ie=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of re(t))!ie.call(e,i)&&i!==n&&v(e,i,{get:()=>t[i],enumerable:!(r=ne(t,i))||r.enumerable});return e};var fe=e=>oe(v({},"__esModule",{value:!0}),e);var ft={};ue(ft,{defineElement:()=>Ue});var se=Object.defineProperty,g=(e,t)=>{for(var n in t)se(e,n,{get:t[n],enumerable:!0})},l={};g(l,{add:()=>Oe,all:()=>F,classPresentIf:()=>Te,createElement:()=>Se,createElements:()=>M,first:()=>be,getAttributes:()=>ve,id:()=>Ee,removeElements:()=>Ne,setContent:()=>Ce,tag:()=>_});var d={};g(d,{equals:()=>q,forEachEntry:()=>L,has:()=>le,isDate:()=>S,isFunction:()=>R,isInteger:()=>ce,isNil:()=>ae,isNumber:()=>P,isRegExp:()=>j,isString:()=>p});function ae(e){return e==null}function p(e){return m(e,"String")}function R(e){return m(e,"Function")}function S(e){return m(e,"Date")}function P(e){return m(e,"Number")?Number.isNaN(e)?!1:Number.isFinite(e):!p(e)||(e=e.trim(),e==="")?!1:!isNaN(e)}function ce(e){return P(e)?Number.isInteger(Number.parseFloat(e)):!1}function j(e){return m(e,"RegExp")}function m(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function L(e,t){if(!(!e||!t)){if(Array.isArray(e)){e.forEach((n,r)=>{t(r,n)});return}Object.entries(e).forEach(n=>t(n[0],n[1]))}}function le(e,t){return!e||!t?!1:Object.prototype.hasOwnProperty.call(e,t)}function q(e,t){return e===t?!0:e===void 0||t===void 0?!1:de(e,t)}function de(e,t){return N(e)||N(t)?e===t:he(e,t)}var me=new Set(["boolean","number","bigint","string","symbol"]);function N(e){return me.has(typeof e)}function he(e,t){return ge(e,t)?pe(e,t)?!0:ye(e,t):!1}function ge(e,t){return T(e)===T(t)}function T(e){return Object.prototype.toString.call(e)}function pe(e,t){return S(e)&&S(t)?e.getTime()===t.getTime():!1}function ye(e,t){let n=Object.keys(e);return n.length!==Object.keys(t).length?!1:n.every(r=>q(e[r],t[r]))}function Ee(e,t=document){return O(t)&&(t=t.shadowRoot),t.getElementById(e)}function F(e,t=document){return O(t)&&(t=t.shadowRoot),Array.from(t.querySelectorAll(e))}function be(e,t=document){if(O(t)&&(t=t.shadowRoot),!e.includes("/"))return t.querySelector(e);let n=e.split("/").map(r=>r.trim()).filter(r=>r.length>0);for(let r of n)if(t=we(r,t),t===null)break;return t}function we(e,t){return e==="shadowRoot"||e==="shadow-root"?t.shadowRoot:t.querySelector(e)}function O(e){return e&&e.shadowRoot&&e.tagName.includes("-")}function ve(e){let t={},n=e.attributes;if(!n||n.length===0)return t;for(let r=0;r<n.length;r++){let i=n[r];t[i.name]=i.value}return t}function M(e=""){if(e=e.trim(),!e)return[];let t=document.createElement("template");return t.innerHTML=e,Array.from(t.content.childNodes)}function Se(e,t={},n=""){let r=_(e,t,n),i=M(r);return i.length===0?null:i[0]}function _(e,t={},n=""){if(!e)return"";let r=Ae(t);return`<${e}${r}>${n}</${e}>`}function Ae(e){let t=[];return L(e,(r,i)=>{t.push(`${r}="${i}"`)}),(t.length>0?" ":"")+t.join(" ")}var Le=new Set(["beforebegin","afterbegin","beforeend","afterend"]);function Oe(e,t,n="beforeend"){return n=n.toLowerCase(),Le.has(n)?(p(t)?e.insertAdjacentHTML(n,t):xe(e,t,n),!0):!1}function xe(e,t,n){Array.isArray(t)?t.forEach(r=>e.insertAdjacentElement(n,r)):e.insertAdjacentElement(n,t)}function Ce(e,...t){e.innerHTML="",e.append(...t)}function Ne(e,t=document){F(e,t).forEach(r=>{r.parentNode.removeChild(r)})}function Te(e,t,n){if(!e)return;let r=n?"add":"remove";e.classList[r](t)}var h={};g(h,{endsWith:()=>D,indexOf:()=>x,indexOfFirstMatch:()=>$e,indexOfLastMatch:()=>Re,isEmpty:()=>y,removePrefix:()=>H,removeSuffix:()=>I,removeSurrounding:()=>Pe,replaceAll:()=>V,replaceTemplate:()=>Fe,startsWith:()=>W,strip:()=>We,stripEnd:()=>_e,stripStart:()=>Me,substringAfter:()=>je,substringBefore:()=>qe,trim:()=>A});function x(e,t,n=0,r=!1){return e?r?e.toLowerCase().indexOf(t.toLowerCase(),n):e.indexOf(t,n):-1}function $e(e,t){return!t||!e?-1:e.split("").findIndex(t)}function Re(e,t){if(!t||!e)return-1;let n=e.split("");for(let r=n.length;r>=0;--r)if(t(n[r],r))return r;return-1}function W(e="",t=void 0,n=!1){if(n){let r=e.substring(0,t.length).toLowerCase();return t.toLowerCase()===r}return e.startsWith(t)}function D(e,t,n=!1){return n?e.toLowerCase().endsWith(t.toLowerCase()):e.endsWith(t)}function H(e,t,n=!1){return W(e,t,n)&&(e=e.substring(t.length)),e}function I(e,t,n=!1){return D(e,t,n)&&(e=e.substring(0,e.length-t.length)),e}function Pe(e,t,n,r=!1){return I(H(e,t,r),n,r)}function je(e,t,n=!1){if(!t)return e;let r=x(e,t,0,n);return r<0?"":e.substring(r+t.length)}function qe(e,t,n=!1){if(!t)return"";let r=x(e,t,0,n);return r<0?e:e.substring(0,r)}function A(e){return y(e)?"":(p(e)||(e=String(e)),e.trim(e))}function y(e){return e==null||e===""}function V(e,t,n){if(R(String.prototype.replaceAll))return e.replaceAll(t,n);if(j(t))return e.replace(t,n);let r=new RegExp(t,"g");return e.replace(r,n)}function Fe(e="",t={},n="${",r="}"){return L(t,(i,u)=>{u!==void 0&&(i=n+i+r,e=V(e,i,u))}),e}function Me(e,t=""){return y(e)?"":t?k(e,new Set(Array.from(t))):e}function k(e,t){for(let n=0;n<e.length;n++)if(!t.has(e.charAt(n)))return e.substring(n);return""}function _e(e,t=""){return y(e)?"":t?B(e,new Set(Array.from(t))):e}function B(e,t){for(let n=e.length-1;n>=0;n--)if(!t.has(e.charAt(n)))return e.substring(0,n+1);return""}function We(e,t=""){if(e===void 0||e==="")return"";if(!t)return e;let n=new Set(Array.from(t));return e=k(e,n),e?B(e,n):""}var De={};g(De,{compareLines:()=>He});function He(e,t,{trim:n=!0,skipEmpty:r=!0,caseSensitive:i=!0}={trim:!0,skipEmpty:!0,caseSensitive:!0}){if(e=$(e,{trim:n,skipEmpty:r}),t=$(t,{trim:n,skipEmpty:r}),e.length!==t.length)return`t1 has ${e.length} lines(s) while t2 has ${t.length} line(s).`;for(let u=0;u<e.length;u++){let o=Ie(e[u],t[u],u,i);if(o.length>0)return o}return""}function Ie(e,t,n,r){let i=r?e:e.toLowerCase(),u=r?t:t.toLowerCase();return i!==u?`Line #${n+1} mismatch.
|
|
8
8
|
${e}
|
|
9
|
-
${t}`:""}function
|
|
10
|
-
`),t&&(e=e.map(r=>
|
|
9
|
+
${t}`:""}function $(e,{trim:t,skipEmpty:n}){return t&&(e=A(e)),e=e.split(`
|
|
10
|
+
`),t&&(e=e.map(r=>A(r))),n&&(e=e.filter(r=>!!r)),e}function C({obj:e={},prop:t,sel:n,attr:r,root:i=document,getter:u,setter:o,onChange:f}){Qe(t),ke(e,t);let s={};return u||(u=()=>Be({prop:t,sel:n,attr:r,root:i,objNotBound:s})),o||(o=a=>ze({prop:t,value:a,root:i,sel:n,attr:r,objNotBound:s})),Ve({obj:e,prop:t,getter:u,setter:o,onChange:f})}function Ve({obj:e,prop:t,getter:n,setter:r,onChange:i}){return Object.defineProperty(e,t,{get:()=>n(),set:o=>{if(i){let f=n(t);f!==o&&i(f,o)}r(o)},configurable:!0,enumerable:!0}),e}var E=e=>e.type==="checkbox",b=e=>e.type==="radio",G=e=>e.nodeName.toLowerCase()==="select",J=e=>e.nodeName.toLowerCase()==="input-field",K=e=>"value"in e,z=e=>new Set(Array.isArray(e)?e:[e]);function ke(e,t){let n=e[t];return n!==void 0&&(console.info(`Property '${t}' already exists in object. Will override previous definition but retain old value of ${n}.`),e[t]=n),n}function Be({prop:e,root:t,sel:n,attr:r,objNotBound:i}){return n?Ge(t,n,r):i[e]}function ze({prop:e,value:t,root:n,sel:r,attr:i,objNotBound:u}){if(r){Je(n,r,t,i);return}u[e]=t}function Ge(e,t,n){let r=Q(e,t);if(r.length===0)return null;let i=r[0];if(n)return i.getAttribute(n);if(!K(i))return i.innerHTML;if(E(i))return r.filter(u=>E(u)&&u.checked).map(u=>u.value==="on"?u.name:u.value);if(G(i))return[...i.querySelectorAll("option")].filter(o=>o.selected).map(o=>o.value);if(!(b(i)&&(i=r.filter(b).find(u=>u.checked),!i)))return J(i)?i.getAttribute("value"):i.value}function Je(e,t,n,r){let i=Q(e,t);if(i.length===0)return;let u=i[0];if(E(u)){let o=z(n);i.filter(E).forEach(f=>f.checked=o.has(f.value)||o.has(f.name));return}if(G(u)){let o=z(n);u.querySelectorAll("option").forEach(f=>f.selected=o.has(f.value));return}if(b(u)){i.filter(b).forEach(o=>o.checked=o.value===n);return}i.forEach(o=>Ke(o,n,r))}function Ke(e,t,n){n?e.setAttribute(n,t):K(e)?e.value=t:J(e)?e.setAttribute("value",t):e.innerHTML=t}function Q(e,t){let n=e.querySelectorAll(t);return n.length===0&&console.warn(`No elements found matching selector ${t}`),[...n]}function Qe(e){if(typeof e!="string"||e.length===0)throw"'prop' argument must be a String defining the name a property."}function Ue({nameWithDash:e,html:t,css:n,display:r,propertyList:i,actionList:u,eventHandlerList:o}){if(customElements.get(e))return!1;let f=class extends HTMLElement{constructor(){super();let s=this;nt(this,t,n,r),this.wi={},this.wi.properties=Xe(this,i),this.wi.actions=et(this,u),tt(this,o),this.wi.addProperty=function(a,c,w,Z,ee){let te={name:a,value:c,sel:w,attr:Z,onChange:ee};U(s.wi.properties,te,s)},this.wi.addAction=(a,c)=>X(s,s.wi.actions,a,c),this.wi.addEventListener=(a,c,w)=>Y(s,{sel:a,eventName:c,listener:w})}};return customElements.define(e,f),!0}function Xe(e,t){let n={};return Ze(t)&&t.forEach(r=>U(n,r,e)),n}function U(e,t,n){let r=Ye(t,n);C({obj:e,prop:t.name,sel:t.sel,attr:t.attr,root:n.shadowRoot,onChange:r}),t.value!==void 0&&(e[t.name]=t.value)}function Ye(e,t){if(!!e.onChange)return(n,r)=>e.onChange(t,n,r)}function Ze(e){if(!e)return!1;if(!Array.isArray(e))throw"propertyList must be an array of {name, value, [sel], [attr]} objects";return!0}function et(e,t){let n={};return t&&t.forEach(r=>{X(e,n,r.name,r.action)}),n}function X(e,t,n,r){!d.isString(n)||!d.isFunction(r)||(t[n]=r.bind(e))}function tt(e,t){if(!!t){if(!Array.isArray(t))throw"eventHandlerList must be an array of {sel, eventName, listener} objects";t.forEach(n=>Y(e,n))}}function Y(e,{sel:t,eventName:n,listener:r}){l.all(t,e.shadowRoot).forEach(u=>{u.addEventListener(n,o=>{r(o,e)})})}function nt(e,t,n,r){t=rt(e,t);let i=e.attachShadow({mode:"open"}),u=l.createElements(it(n,r)+t);i.append(...u)}function rt(e,t){return d.isFunction(t)?t(e):t}function it(e,t){return ot(t)+ut(e)}function ut(e){return e=h.trim(e),e.length===0?"":(h.startsWith(e,"<style>",!1)||(e=l.tag("style",{},e)),e)}function ot(e){return e=h.trim(e),e.length===0?"":`
|
|
11
11
|
<style>
|
|
12
12
|
:host { display: ${e};}
|
|
13
13
|
:host([hidden]) {display: none;}
|
|
14
14
|
</style>
|
|
15
|
-
`}return
|
|
15
|
+
`}return fe(ft);})();
|
package/dist/webitem-script.js
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
// webitem.js Library to simplify creating HTML5 Custom Elements
|
|
2
2
|
// https://github.com/ahabra/webitem
|
|
3
|
-
// Copyright 2021 (C) Abdul Habra. Version 0.
|
|
3
|
+
// Copyright 2021 (C) Abdul Habra. Version 0.5.0.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
var webitem = (() => {
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
11
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
12
|
var __export = (target, all2) => {
|
|
10
13
|
for (var name in all2)
|
|
11
|
-
__defProp(target, name, {get: all2[name], enumerable: true});
|
|
14
|
+
__defProp(target, name, { get: all2[name], enumerable: true });
|
|
12
15
|
};
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from))
|
|
19
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
20
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
13
25
|
|
|
14
26
|
// src/webitem.js
|
|
15
27
|
var webitem_exports = {};
|
|
@@ -21,7 +33,7 @@ var webitem = (() => {
|
|
|
21
33
|
var __defProp2 = Object.defineProperty;
|
|
22
34
|
var __export2 = (target, all2) => {
|
|
23
35
|
for (var name in all2)
|
|
24
|
-
__defProp2(target, name, {get: all2[name], enumerable: true});
|
|
36
|
+
__defProp2(target, name, { get: all2[name], enumerable: true });
|
|
25
37
|
};
|
|
26
38
|
var Domer_exports = {};
|
|
27
39
|
__export2(Domer_exports, {
|
|
@@ -114,7 +126,7 @@ var webitem = (() => {
|
|
|
114
126
|
return a === b;
|
|
115
127
|
return isEqualCompoundType(a, b);
|
|
116
128
|
}
|
|
117
|
-
var simpleTypes = new Set(["boolean", "number", "bigint", "string", "symbol"]);
|
|
129
|
+
var simpleTypes = /* @__PURE__ */ new Set(["boolean", "number", "bigint", "string", "symbol"]);
|
|
118
130
|
function isSimpleType(v) {
|
|
119
131
|
return simpleTypes.has(typeof v);
|
|
120
132
|
}
|
|
@@ -217,7 +229,7 @@ var webitem = (() => {
|
|
|
217
229
|
const sep = array.length > 0 ? " " : "";
|
|
218
230
|
return sep + array.join(" ");
|
|
219
231
|
}
|
|
220
|
-
var LOCATIONS = new Set(["beforebegin", "afterbegin", "beforeend", "afterend"]);
|
|
232
|
+
var LOCATIONS = /* @__PURE__ */ new Set(["beforebegin", "afterbegin", "beforeend", "afterend"]);
|
|
221
233
|
function add(target, tobeAdded, location = "beforeend") {
|
|
222
234
|
location = location.toLowerCase();
|
|
223
235
|
if (!LOCATIONS.has(location))
|
|
@@ -416,9 +428,9 @@ var webitem = (() => {
|
|
|
416
428
|
__export2(LineCompare_exports, {
|
|
417
429
|
compareLines: () => compareLines
|
|
418
430
|
});
|
|
419
|
-
function compareLines(t1, t2, {trim: trim2 = true, skipEmpty = true, caseSensitive = true} = {trim: true, skipEmpty: true, caseSensitive: true}) {
|
|
420
|
-
t1 = toLines(t1, {trim: trim2, skipEmpty});
|
|
421
|
-
t2 = toLines(t2, {trim: trim2, skipEmpty});
|
|
431
|
+
function compareLines(t1, t2, { trim: trim2 = true, skipEmpty = true, caseSensitive = true } = { trim: true, skipEmpty: true, caseSensitive: true }) {
|
|
432
|
+
t1 = toLines(t1, { trim: trim2, skipEmpty });
|
|
433
|
+
t2 = toLines(t2, { trim: trim2, skipEmpty });
|
|
422
434
|
if (t1.length !== t2.length) {
|
|
423
435
|
return `t1 has ${t1.length} lines(s) while t2 has ${t2.length} line(s).`;
|
|
424
436
|
}
|
|
@@ -440,7 +452,7 @@ ${t2}`;
|
|
|
440
452
|
}
|
|
441
453
|
return "";
|
|
442
454
|
}
|
|
443
|
-
function toLines(t, {trim: trim2, skipEmpty}) {
|
|
455
|
+
function toLines(t, { trim: trim2, skipEmpty }) {
|
|
444
456
|
if (trim2) {
|
|
445
457
|
t = trim(t);
|
|
446
458
|
}
|
|
@@ -469,14 +481,14 @@ ${t2}`;
|
|
|
469
481
|
checkInitialValue(obj, prop);
|
|
470
482
|
const objNotBound = {};
|
|
471
483
|
if (!getter) {
|
|
472
|
-
getter = () => getValue({prop, sel, attr, root, objNotBound});
|
|
484
|
+
getter = () => getValue({ prop, sel, attr, root, objNotBound });
|
|
473
485
|
}
|
|
474
486
|
if (!setter) {
|
|
475
|
-
setter = (value) => setValue({prop, value, root, sel, attr, objNotBound});
|
|
487
|
+
setter = (value) => setValue({ prop, value, root, sel, attr, objNotBound });
|
|
476
488
|
}
|
|
477
|
-
return bindProp({obj, prop, getter, setter, onChange});
|
|
489
|
+
return bindProp({ obj, prop, getter, setter, onChange });
|
|
478
490
|
}
|
|
479
|
-
function bindProp({obj, prop, getter, setter, onChange}) {
|
|
491
|
+
function bindProp({ obj, prop, getter, setter, onChange }) {
|
|
480
492
|
const descriptor = {
|
|
481
493
|
get: () => getter(),
|
|
482
494
|
set: (value) => {
|
|
@@ -496,7 +508,8 @@ ${t2}`;
|
|
|
496
508
|
}
|
|
497
509
|
var isCheckbox = (el) => el.type === "checkbox";
|
|
498
510
|
var isRadio = (el) => el.type === "radio";
|
|
499
|
-
var isSelect = (el) => el.
|
|
511
|
+
var isSelect = (el) => el.nodeName.toLowerCase() === "select";
|
|
512
|
+
var isInputField = (el) => el.nodeName.toLowerCase() === "input-field";
|
|
500
513
|
var isInput = (el) => "value" in el;
|
|
501
514
|
var toSet = (v) => new Set(Array.isArray(v) ? v : [v]);
|
|
502
515
|
function checkInitialValue(obj, prop) {
|
|
@@ -507,12 +520,12 @@ ${t2}`;
|
|
|
507
520
|
}
|
|
508
521
|
return oldValue;
|
|
509
522
|
}
|
|
510
|
-
function getValue({prop, root, sel, attr, objNotBound}) {
|
|
523
|
+
function getValue({ prop, root, sel, attr, objNotBound }) {
|
|
511
524
|
if (sel)
|
|
512
525
|
return getDomVal(root, sel, attr);
|
|
513
526
|
return objNotBound[prop];
|
|
514
527
|
}
|
|
515
|
-
function setValue({prop, value, root, sel, attr, objNotBound}) {
|
|
528
|
+
function setValue({ prop, value, root, sel, attr, objNotBound }) {
|
|
516
529
|
if (sel) {
|
|
517
530
|
setDomVal(root, sel, value, attr);
|
|
518
531
|
return;
|
|
@@ -540,6 +553,9 @@ ${t2}`;
|
|
|
540
553
|
if (!el)
|
|
541
554
|
return void 0;
|
|
542
555
|
}
|
|
556
|
+
if (isInputField(el)) {
|
|
557
|
+
return el.getAttribute("value");
|
|
558
|
+
}
|
|
543
559
|
return el.value;
|
|
544
560
|
}
|
|
545
561
|
function setDomVal(root, sel, val, attr) {
|
|
@@ -568,6 +584,8 @@ ${t2}`;
|
|
|
568
584
|
el.setAttribute(attr, val);
|
|
569
585
|
} else if (isInput(el)) {
|
|
570
586
|
el.value = val;
|
|
587
|
+
} else if (isInputField(el)) {
|
|
588
|
+
el.setAttribute("value", val);
|
|
571
589
|
} else {
|
|
572
590
|
el.innerHTML = val;
|
|
573
591
|
}
|
|
@@ -607,11 +625,11 @@ ${t2}`;
|
|
|
607
625
|
this.wi.actions = defineActions(this, actionList);
|
|
608
626
|
addEventListeners(this, eventHandlerList);
|
|
609
627
|
this.wi.addProperty = function(name, value, sel, attr, onChange) {
|
|
610
|
-
const prop = {name, value, sel, attr, onChange};
|
|
628
|
+
const prop = { name, value, sel, attr, onChange };
|
|
611
629
|
addProperty(root.wi.properties, prop, root);
|
|
612
630
|
};
|
|
613
631
|
this.wi.addAction = (name, action) => addAction(root, root.wi.actions, name, action);
|
|
614
|
-
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, {sel, eventName, listener});
|
|
632
|
+
this.wi.addEventListener = (sel, eventName, listener) => addHandler(root, { sel, eventName, listener });
|
|
615
633
|
}
|
|
616
634
|
};
|
|
617
635
|
customElements.define(nameWithDash, el);
|
|
@@ -626,7 +644,7 @@ ${t2}`;
|
|
|
626
644
|
}
|
|
627
645
|
function addProperty(obj, prop, root) {
|
|
628
646
|
const onChange = createOnChange(prop, root);
|
|
629
|
-
bind({obj, prop: prop.name, sel: prop.sel, attr: prop.attr, root: root.shadowRoot, onChange});
|
|
647
|
+
bind({ obj, prop: prop.name, sel: prop.sel, attr: prop.attr, root: root.shadowRoot, onChange });
|
|
630
648
|
if (prop.value !== void 0) {
|
|
631
649
|
obj[prop.name] = prop.value;
|
|
632
650
|
}
|
|
@@ -666,7 +684,7 @@ ${t2}`;
|
|
|
666
684
|
}
|
|
667
685
|
eventHandlerList.forEach((h) => addHandler(root, h));
|
|
668
686
|
}
|
|
669
|
-
function addHandler(root, {sel, eventName, listener}) {
|
|
687
|
+
function addHandler(root, { sel, eventName, listener }) {
|
|
670
688
|
const elements = Domer_exports.all(sel, root.shadowRoot);
|
|
671
689
|
elements.forEach((el) => {
|
|
672
690
|
el.addEventListener(eventName, (ev) => {
|
|
@@ -676,7 +694,7 @@ ${t2}`;
|
|
|
676
694
|
}
|
|
677
695
|
function addHtml(root, html, css, display) {
|
|
678
696
|
html = getHtml(root, html);
|
|
679
|
-
const shadow = root.attachShadow({mode: "open"});
|
|
697
|
+
const shadow = root.attachShadow({ mode: "open" });
|
|
680
698
|
const nodes = Domer_exports.createElements(getCss(css, display) + html);
|
|
681
699
|
shadow.append(...nodes);
|
|
682
700
|
}
|
|
@@ -706,5 +724,5 @@ ${t2}`;
|
|
|
706
724
|
</style>
|
|
707
725
|
`;
|
|
708
726
|
}
|
|
709
|
-
return webitem_exports;
|
|
727
|
+
return __toCommonJS(webitem_exports);
|
|
710
728
|
})();
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@techexp/webitem",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Library to simplify crerating Web Components/Custom Elements",
|
|
5
5
|
"author": "Abdul Habra",
|
|
6
6
|
"license": "Apache",
|
|
7
7
|
"repository": "ahabra/webitem",
|
|
8
8
|
"main": "dist/webitem-esm.js",
|
|
9
|
+
"type": "commonjs",
|
|
9
10
|
"keywords": [
|
|
10
11
|
"web component",
|
|
11
12
|
"custom element"
|
|
@@ -18,9 +19,9 @@
|
|
|
18
19
|
"access": "public"
|
|
19
20
|
},
|
|
20
21
|
"scripts": {
|
|
21
|
-
"clean": "node scripts/clean.
|
|
22
|
-
"build": "node scripts/build.
|
|
23
|
-
"server": "node scripts/server.
|
|
22
|
+
"clean": "node scripts/clean.mjs",
|
|
23
|
+
"build": "node scripts/build.mjs",
|
|
24
|
+
"server": "node scripts/server.mjs",
|
|
24
25
|
"test": "web-test-runner",
|
|
25
26
|
"test:watch": "web-test-runner --watch",
|
|
26
27
|
"lint": "eslint src --fix",
|
|
@@ -29,18 +30,18 @@
|
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
31
32
|
"@esm-bundle/chai": "^4.3.4",
|
|
32
|
-
"@web/test-runner": "^0.
|
|
33
|
-
"@web/test-runner-commands": "^0.
|
|
34
|
-
"@web/test-runner-puppeteer": "^0.
|
|
35
|
-
"chalk": "^
|
|
36
|
-
"esbuild": "^0.
|
|
37
|
-
"eslint": "^
|
|
38
|
-
"fs-extra": "^10.
|
|
39
|
-
"npm-check-updates": "^
|
|
40
|
-
"serve": "^
|
|
33
|
+
"@web/test-runner": "^0.15.0",
|
|
34
|
+
"@web/test-runner-commands": "^0.6.5",
|
|
35
|
+
"@web/test-runner-puppeteer": "^0.11.0",
|
|
36
|
+
"chalk": "^5.1.2",
|
|
37
|
+
"esbuild": "^0.15.13",
|
|
38
|
+
"eslint": "^8.27.0",
|
|
39
|
+
"fs-extra": "^10.1.0",
|
|
40
|
+
"npm-check-updates": "^16.3.18",
|
|
41
|
+
"serve": "^14.1.1"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@techexp/data-bind": "^0.
|
|
44
|
-
"@techexp/jshelper": "^0.
|
|
44
|
+
"@techexp/data-bind": "^0.9.0",
|
|
45
|
+
"@techexp/jshelper": "^0.6.1"
|
|
45
46
|
}
|
|
46
47
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import * as buildUtils from './build.utils.mjs'
|
|
2
|
+
import { Print } from './console.utils.mjs'
|
|
3
3
|
|
|
4
4
|
if (!buildUtils.checkNodeVersion(15)) {
|
|
5
5
|
Print.error('Build failed.')
|
|
6
|
-
process.
|
|
7
|
-
return
|
|
6
|
+
process.exit(1)
|
|
8
7
|
}
|
|
9
8
|
|
|
10
9
|
buildUtils.clean()
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/** Utilities used by both build.js and server.js */
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import fs from 'fs-extra'
|
|
4
|
+
import esbuild from 'esbuild'
|
|
5
|
+
import { Print } from './console.utils.mjs'
|
|
6
6
|
|
|
7
7
|
const target = 'target'
|
|
8
8
|
const out = `${target}/out`
|
|
@@ -17,20 +17,20 @@ const banner = {
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
function clean() {
|
|
20
|
+
export function clean() {
|
|
21
21
|
fs.rmSync(target, { recursive: true, force: true})
|
|
22
22
|
fs.rmSync(dist, { recursive: true, force: true})
|
|
23
23
|
return [target, dist]
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
function copyIndexHtml() {
|
|
26
|
+
export function copyIndexHtml() {
|
|
27
27
|
let html = fs.readFileSync('src/index.html', {encoding: 'utf8'})
|
|
28
28
|
html = html.replace('<script data-app></script>', '<script data-app src="out/webitem-script.js"></script>')
|
|
29
29
|
fs.mkdirSync(target, {recursive: true})
|
|
30
30
|
fs.writeFileSync(`${target}/index.html`, html)
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
function build({format, minify, external, fileNameSuffix}) {
|
|
33
|
+
export function build({format, minify, external, fileNameSuffix}) {
|
|
34
34
|
const buildOptions = {
|
|
35
35
|
entryPoints: ['src/webitem.js'],
|
|
36
36
|
bundle: true,
|
|
@@ -47,11 +47,11 @@ function build({format, minify, external, fileNameSuffix}) {
|
|
|
47
47
|
return promise
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
function copyDist() {
|
|
50
|
+
export function copyDist() {
|
|
51
51
|
fs.copySync(out, dist)
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
function nodeVersion() {
|
|
54
|
+
export function nodeVersion() {
|
|
55
55
|
let v = process.versions.node.split('.')
|
|
56
56
|
if (v.length < 3) {
|
|
57
57
|
v.unshift('0')
|
|
@@ -64,7 +64,7 @@ function nodeVersion() {
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
function checkNodeVersion(majorMinimum) {
|
|
67
|
+
export function checkNodeVersion(majorMinimum) {
|
|
68
68
|
const version = nodeVersion()
|
|
69
69
|
if (version.major < majorMinimum) {
|
|
70
70
|
Print.error(`Invalid node version. You have ${version.major}. Require ${majorMinimum}.`)
|
|
@@ -72,12 +72,3 @@ function checkNodeVersion(majorMinimum) {
|
|
|
72
72
|
}
|
|
73
73
|
return true
|
|
74
74
|
}
|
|
75
|
-
|
|
76
|
-
module.exports = {
|
|
77
|
-
clean,
|
|
78
|
-
copyIndexHtml,
|
|
79
|
-
build,
|
|
80
|
-
copyDist,
|
|
81
|
-
nodeVersion,
|
|
82
|
-
checkNodeVersion
|
|
83
|
-
}
|
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
import chalk from 'chalk'
|
|
2
2
|
|
|
3
3
|
function print(color, ...args) {
|
|
4
4
|
args = args.map(a => color(a));
|
|
5
5
|
console.log(...args);
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
const Print = {
|
|
8
|
+
export const Print = {
|
|
9
9
|
log: (...args) => print(chalk.white, args),
|
|
10
10
|
info: (...args) => print(chalk.yellowBright, args),
|
|
11
11
|
help: (...args) => print(chalk.green, args),
|
|
12
12
|
error: (...args) => print(chalk.red, args),
|
|
13
13
|
extra: (...args) => print(chalk.gray, args)
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
module.exports = {
|
|
17
|
-
Print
|
|
18
|
-
}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const Print = require('./console.utils').Print
|
|
1
|
+
import handler from 'serve-handler'
|
|
2
|
+
import http from 'http'
|
|
3
|
+
import * as buildUtils from './build.utils.mjs'
|
|
4
|
+
import {Print} from './console.utils.mjs'
|
|
6
5
|
|
|
7
6
|
const serverOptions = {
|
|
8
7
|
public: 'target',
|
package/src/test/webitem.test.js
CHANGED
|
@@ -5,57 +5,59 @@ import {Domer, Objecter} from '@techexp/jshelper'
|
|
|
5
5
|
|
|
6
6
|
describe('webitem.defineElement()', () => {
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
describe('element creattion', () => {
|
|
9
|
+
it('creates a new element', () => {
|
|
10
|
+
const name = 'wi-t1'
|
|
11
|
+
webitem.defineElement({nameWithDash: name})
|
|
12
|
+
createAndAddElement(name)
|
|
13
|
+
createAndAddElement(name)
|
|
14
|
+
const found = document.getElementsByTagName(name)
|
|
15
|
+
|
|
16
|
+
expect(found.length).to.equal(2)
|
|
17
|
+
})
|
|
17
18
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
it('creates element with html and css', () => {
|
|
20
|
+
const nameWithDash = 'wi-t2'
|
|
21
|
+
const html = '<h1>42</h1>'
|
|
22
|
+
const css = 'h1 { color: red; }'
|
|
23
|
+
webitem.defineElement({nameWithDash, html, css})
|
|
24
|
+
createAndAddElement(nameWithDash)
|
|
25
|
+
const found = findElementByName(nameWithDash)
|
|
25
26
|
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
expect(found.shadowRoot.innerHTML).to.equal(`<style>${css}</style>${html}`)
|
|
28
|
+
})
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
30
|
+
it('creates element with html function', () => {
|
|
31
|
+
const nameWithDash = 'wi-t3'
|
|
31
32
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
function html(el) {
|
|
34
|
+
const h = el.innerHTML
|
|
35
|
+
return `<b>${h}</b>`
|
|
36
|
+
}
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
webitem.defineElement({nameWithDash, html})
|
|
39
|
+
createAndAddElement(nameWithDash, 42)
|
|
39
40
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
const found = findElementByName(nameWithDash)
|
|
42
|
+
expect(found.shadowRoot.innerHTML).to.equal('<b>42</b>')
|
|
43
|
+
})
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
45
|
+
it('creates element with simple properties', () => {
|
|
46
|
+
const nameWithDash = 'wi-t4'
|
|
47
|
+
const propertyList = [
|
|
48
|
+
{name: 'p1', value: 'v1'},
|
|
49
|
+
{name: 'p2', value: 'v2'}
|
|
50
|
+
]
|
|
51
|
+
webitem.defineElement({nameWithDash, propertyList})
|
|
52
|
+
createAndAddElement(nameWithDash)
|
|
52
53
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
const found = findElementByName(nameWithDash)
|
|
55
|
+
expect(found.wi.properties.p1).to.equal('v1')
|
|
56
|
+
expect(found.wi.properties.p2).to.equal('v2')
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
found.wi.properties.p1 = 10
|
|
59
|
+
expect(found.wi.properties.p1).to.equal(10)
|
|
60
|
+
})
|
|
59
61
|
})
|
|
60
62
|
|
|
61
63
|
describe('bounded properties', () => {
|
|
@@ -236,7 +238,7 @@ describe('webitem.defineElement()', () => {
|
|
|
236
238
|
webitem.defineElement({nameWithDash, html})
|
|
237
239
|
const el = createAndAddElement(nameWithDash)
|
|
238
240
|
let counter = 0
|
|
239
|
-
el.wi.addEventListener('button', 'click', (
|
|
241
|
+
el.wi.addEventListener('button', 'click', ()=> counter++ )
|
|
240
242
|
|
|
241
243
|
const button = Domer.first('button', el)
|
|
242
244
|
button.click()
|