@techexp/webitem 0.4.2 → 0.5.1
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 +2 -1
- package/dist/webitem-script-min.js +5 -5
- package/dist/webitem-script.js +16 -4
- package/package.json +17 -16
- 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,9 +1,10 @@
|
|
|
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.1.
|
|
4
4
|
// Apache License Version 2.0
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
|
|
7
8
|
// src/webitem.js
|
|
8
9
|
import { Domer, Objecter, Stringer } from "@techexp/jshelper";
|
|
9
10
|
import bind from "@techexp/data-bind";
|
|
@@ -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.1.
|
|
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.1.
|
|
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
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 = {};
|
|
@@ -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))
|
|
@@ -712,5 +724,5 @@ ${t2}`;
|
|
|
712
724
|
</style>
|
|
713
725
|
`;
|
|
714
726
|
}
|
|
715
|
-
return webitem_exports;
|
|
727
|
+
return __toCommonJS(webitem_exports);
|
|
716
728
|
})();
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@techexp/webitem",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Library to simplify
|
|
3
|
+
"version": "0.5.1",
|
|
4
|
+
"description": "Library to simplify creating 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.5
|
|
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()
|