redgin 0.1.11 → 0.1.12
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/README.md +35 -38
- package/dist/props/directives.d.ts +5 -0
- package/dist/props/events.d.ts +4 -0
- package/dist/props/watch.d.ts +2 -0
- package/dist/redgin.d.ts +4 -2
- package/dist/redgin.min.js +5 -5
- package/package.json +4 -3
- package/dist/directives/index.d.ts +0 -3
- package/dist/props/index.d.ts +0 -3
package/README.md
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
# ~5.3kb Simplified library for building [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components), works on Vanilla JS / all JS framework
|
|
3
3
|
|
|
4
4
|
* Use Javascript [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) for Template syntax
|
|
5
|
-
* Rerender element with [
|
|
6
|
-
* Create getter/setters with [
|
|
7
|
-
* Create Property reflection with [
|
|
8
|
-
* Create Inline Events with [
|
|
9
|
-
* Create custom events with [
|
|
10
|
-
* Inject Global Styles with [
|
|
5
|
+
* Rerender element with [`watch`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)
|
|
6
|
+
* Create getter/setters with [`getset`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)
|
|
7
|
+
* Create Property reflection with [`propReflect`](https://stackblitz.com/edit/typescript-hlms7u?file=index.html)
|
|
8
|
+
* Create Inline Events with [`event`](https://stackblitz.com/edit/typescript-t3fqo8?file=sampleWatch.ts)
|
|
9
|
+
* Create custom events with [`emit`](https://stackblitz.com/edit/redgin-childtoparent?file=index.ts)
|
|
10
|
+
* Inject Global Styles with [`injectStyles`](https://stackblitz.com/edit/redgin-bootstrap?file=index.ts)
|
|
11
11
|
* [Support Typescript](https://stackblitz.com/edit/typescript-ue61k6?file=index.ts)
|
|
12
12
|
|
|
13
13
|
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
### Plug & Play, Import directly from cdn
|
|
17
17
|
|
|
18
18
|
```js
|
|
19
|
-
import { RedGin } from 'https://cdn.jsdelivr.net/gh/josnin/redgin@v0.1.
|
|
19
|
+
import { RedGin } from 'https://cdn.jsdelivr.net/gh/josnin/redgin@v0.1.12/dist/redgin.min.js'
|
|
20
20
|
|
|
21
21
|
```
|
|
22
22
|
|
|
@@ -29,7 +29,7 @@ npm i redgin
|
|
|
29
29
|
#### then import the library, helpers
|
|
30
30
|
|
|
31
31
|
```js
|
|
32
|
-
import { Redgin } from 'redgin'
|
|
32
|
+
import { Redgin, propReflect, getset, watch, event, emit, html, css } from 'redgin'
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
|
|
@@ -37,83 +37,70 @@ import { Redgin } from 'redgin'
|
|
|
37
37
|
### Inline Events
|
|
38
38
|
it uses <code>event</code> directive to create event listener behind the scene and automatically clear once the component is remove from DOM
|
|
39
39
|
```js
|
|
40
|
-
import { RedGin, event } from 'redgin'
|
|
41
|
-
|
|
42
40
|
class Event extends RedGin {
|
|
43
41
|
render() {
|
|
44
|
-
return `<button
|
|
42
|
+
return html`<button
|
|
43
|
+
${ event('click', () => alert('Click Me') )}
|
|
44
|
+
>Submit</button>`
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
|
|
48
47
|
customElements.define('sample-event', Event);
|
|
49
|
-
|
|
50
48
|
```
|
|
51
49
|
|
|
52
50
|
### List Render (Reactive)
|
|
53
51
|
* its uses <code>propReflect</code> to dynamically create reactive props reflection define in observedAttributes()
|
|
54
52
|
* its uses <code>watch</code> directives to rerender inside html when value change
|
|
55
53
|
```js
|
|
56
|
-
import { RedGin, watch, propReflect } from 'redgin';
|
|
57
|
-
|
|
58
54
|
class Loop extends RedGin {
|
|
59
|
-
|
|
60
55
|
arr = propReflect([1, 2, 3])
|
|
61
|
-
static
|
|
62
|
-
|
|
56
|
+
static observedAttributes = ['arr']
|
|
57
|
+
|
|
63
58
|
render() {
|
|
64
|
-
return `<ul> ${ watch(['arr'], () =>
|
|
59
|
+
return html`<ul> ${ watch(['arr'], () =>
|
|
65
60
|
this.arr.map( e => `Number: ${e}`)
|
|
66
61
|
).join('')
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
}
|
|
63
|
+
</ul>`
|
|
69
64
|
}
|
|
70
65
|
}
|
|
71
|
-
|
|
72
66
|
customElements.define('sample-loop', Loop);
|
|
73
|
-
|
|
74
67
|
```
|
|
75
68
|
|
|
76
69
|
### IF condition (Reactive)
|
|
77
70
|
* its uses <code>propReflect</code> to dynamically create reactive props reflection define in observedAttributes()
|
|
78
71
|
* its uses <code>watch</code> directives to rerender inside html when value change
|
|
79
72
|
```js
|
|
80
|
-
import { RedGin, watch, propReflect } from 'redgin'
|
|
81
|
-
|
|
82
73
|
class If extends RedGin {
|
|
83
74
|
isDisable = propReflect(false)
|
|
84
|
-
static
|
|
75
|
+
static observedAttributes = ['is-disable']
|
|
85
76
|
|
|
86
77
|
render() {
|
|
87
78
|
return `
|
|
88
|
-
${ watch(['isDisable'], () =>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
</button>
|
|
79
|
+
${ watch(['isDisable'], () => html`
|
|
80
|
+
<button
|
|
81
|
+
${ this.isDisable ?? `disable`}
|
|
82
|
+
> Submit</button>`
|
|
93
83
|
)
|
|
94
84
|
}
|
|
95
85
|
`
|
|
96
86
|
}
|
|
97
|
-
|
|
98
87
|
}
|
|
99
|
-
|
|
100
88
|
customElements.define('sample-if', If);
|
|
101
89
|
```
|
|
102
90
|
|
|
103
91
|
### Render Obj (Reactive)
|
|
104
92
|
* recommend to use watch directive when rendering obj
|
|
105
93
|
```js
|
|
106
|
-
|
|
107
94
|
obj = getset({
|
|
108
95
|
id:1,
|
|
109
96
|
name:'John Doe'
|
|
110
|
-
}
|
|
97
|
+
}) //for complex just define a setter/getter manually?
|
|
111
98
|
|
|
112
99
|
|
|
113
100
|
render() {
|
|
114
101
|
return `${ watch(['obj'], () =>
|
|
115
|
-
`<div>${ this.obj.id }</div>
|
|
116
|
-
|
|
102
|
+
html`<div>${ this.obj.id }</div>
|
|
103
|
+
<div>${ this.obj.name }</div>`
|
|
117
104
|
) }`
|
|
118
105
|
}
|
|
119
106
|
```
|
|
@@ -126,11 +113,21 @@ onInit() {
|
|
|
126
113
|
|
|
127
114
|
render() {
|
|
128
115
|
return `${ watch(['obj'], () => this.obj.map( (e: any) =>
|
|
129
|
-
`<span>ID:${e.id} Name:${e.name}</span>`)
|
|
116
|
+
html`<span>ID:${e.id} Name:${e.name}</span>`)
|
|
130
117
|
) }`
|
|
131
118
|
}
|
|
132
119
|
```
|
|
133
120
|
|
|
121
|
+
## For VSCode Syntax Highlight template literals
|
|
122
|
+
|
|
123
|
+
### Install extension [inline-html](https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html)
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
render() {
|
|
127
|
+
return html`<div>with syntax highlighted</div>`
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
134
131
|
|
|
135
132
|
|
|
136
133
|
## Reference
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const event: (type: string, fn: any) => string;
|
|
2
|
+
export declare function emit(this: any, customEvent: string, value: any, options?: CustomEvent): void;
|
|
3
|
+
export declare function applyEventListeners(this: any): void;
|
|
4
|
+
export declare function removeEventListeners(this: any): void;
|
package/dist/redgin.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export { event, emit, watch, customDirectives } from './directives/index';
|
|
2
2
|
export { getset, propReflect, customPropsBehavior } from './props/index';
|
|
3
3
|
export declare const attachShadow: ShadowRootInit;
|
|
4
|
-
export declare
|
|
5
|
-
export declare
|
|
4
|
+
export declare let injectStyles: string[];
|
|
5
|
+
export declare let defaultStyles: string[];
|
|
6
|
+
export declare const html: (raw: TemplateStringsArray, ...values: any[]) => string;
|
|
7
|
+
export declare const css: (raw: TemplateStringsArray, ...values: any[]) => string;
|
|
6
8
|
export declare class RedGin extends HTMLElement {
|
|
7
9
|
constructor();
|
|
8
10
|
connectedCallback(): void;
|
package/dist/redgin.min.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var D=Object.defineProperty;var L=(s,t,e)=>t in s?D(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var d=(s,t,e)=>(L(s,typeof t!="symbol"?t+"":t,e),e);var x=()=>crypto.randomUUID().split("-")[0],
|
|
2
|
-
DOM already provided built-in props reflection for this attribute.`);break}}return t};function B(s,t){if(t===void 0||t.name!="propReflect")return;let{type:e,value:o,serializerFn:n,deserializerFn:i}=t,l=this.constructor.observedAttributes,w=u(s),r=
|
|
3
|
-
Please add '${r}' in the observedAttributes of ${this.constructor.name} component`);return}!k(r)||Object.defineProperty(this,w,{configurable:!0,set(a){if(i)return i.call(this,r,e,o,a);(e===Boolean||typeof a=="boolean"||
|
|
1
|
+
var D=Object.defineProperty;var L=(s,t,e)=>t in s?D(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var d=(s,t,e)=>(L(s,typeof t!="symbol"?t+"":t,e),e);var x=()=>crypto.randomUUID().split("-")[0],S=s=>s.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),u=s=>s.replace(/-./g,t=>t[1].toUpperCase());function v(s){let t=[];for(let e of h.reg)t.push(e.call(this,s));return t.filter(e=>e===!0).length>0}var m=class{static define(t){m.reg.push(t)}},h=m;d(h,"reg",[]);var p={},b=class extends HTMLElement{};customElements.get("in-watch")||customElements.define("in-watch",b);var _=(s,t)=>{let e=document.createElement("in-watch"),o=x();for(let n of s)Object.hasOwn(p,n)||(p[n]={}),p[n][o]=t;return e.dataset.watch__=o,e.outerHTML};function T(s){let t=u(s),e=!1;if(Object.hasOwn(p,t)){for(let o of Object.keys(p[t]))if(this.shadowRoot){let n=this.shadowRoot.querySelector(`[data-watch__="${o}"]`);n&&(n.innerHTML=p[t][o]?p[t][o].call(this):this[t],e=!0)}}return e}h.define(T);var A=()=>crypto.randomUUID().split("-")[0];var U=[],f;(function(s){s[s.ADD=0]="ADD",s[s.REMOVE=1]="REMOVE"})(f||(f={}));var j=(s,t)=>{let e=A();return U.push([s,t,e]),`data-evt__=${e}`};function I(s,t,e){let o={detail:t,composed:!0},n=new CustomEvent(s,{...o,...e});this.shadowRoot&&this.shadowRoot.dispatchEvent(n)}function E(s){for(let t of U){let[e,o,n]=t;if(this.shadowRoot){let i=this.shadowRoot.querySelector(`[data-evt__="${n}"]`);i&&(s===f.ADD?i.addEventListener(e,o):i.removeEventListener(e,o))}}}function R(){E.call(this,f.ADD)}function O(){E.call(this,f.REMOVE)}function $(s,t){for(let e of c.reg)e.call(this,s,t)}var g=class{static define(t){g.reg.push(t)}},c=g;d(c,"reg",[]);var P=["^class$","^style$","^className$","^classList$","^id$","^dataset$","^data-","^aria-"],y=["disabled"],k=s=>{let t=!0;for(let e of P){let o=new RegExp(e,"g");if(s.match(o)){t=!1,console.error(`Please remove attribute '${s}' in the observedAttributes,
|
|
2
|
+
DOM already provided built-in props reflection for this attribute.`);break}}return t};function B(s,t){if(t===void 0||t.name!="propReflect")return;let{type:e,value:o,serializerFn:n,deserializerFn:i}=t,l=this.constructor.observedAttributes,w=u(s),r=S(s);if(l===void 0||!l.includes(r)){console.error(`Unable to apply propReflect '${w}' for attribute '${r}',
|
|
3
|
+
Please add '${r}' in the observedAttributes of ${this.constructor.name} component`);return}!k(r)||Object.defineProperty(this,w,{configurable:!0,set(a){if(i)return i.call(this,r,e,o,a);(e===Boolean||typeof a=="boolean"||y.includes(r))&&a===!0?this.setAttribute(r,""):(e===Boolean||y.includes(r))&&a===!1?this.removeAttribute(r):([Object,Array].includes(e)||["object","array"].includes(typeof a))&&a?this.setAttribute(r,JSON.stringify(a)):([String,Number].includes(e)||["string","number"].includes(typeof a))&&a?this.setAttribute(r,a):this.removeAttribute(r)},get(){if(n)return n.call(this,r,e,o);if(r in y||e===Boolean||typeof o=="boolean")return this.hasAttribute(r);if(([String,Array,Object].includes(e)||["number","string","array","object"].includes(typeof o))&&!this.hasAttribute(r))return o;if((e===String||typeof o=="string")&&this.hasAttribute(r))return this.getAttribute(r);if((e===Number||typeof o=="number")&&this.hasAttribute(r))return Number(this.getAttribute(r));if(([Array,Object].includes(e)||["array","object"].includes(typeof o))&&this.hasAttribute(r))return JSON.parse(this.getAttribute(r))}})}function M(s,t){return{value:s,...t,name:"propReflect"}}c.define(B);function N(s,t){if(t===void 0||t.name!="getset")return;let{value:e,forWatch:o}=t;this[`#${s}`]=e,Object.defineProperty(this,s,{configurable:!0,set(n){this[`#${s}`]=n,o&&this.updateContents(s)},get(){return this[`#${s}`]}})}function q(s,t){return{value:s,...{forWatch:!0},...t,name:"getset"}}c.define(N);var F={mode:"open",delegatesFocus:!0},H=[],K=[` /* Custom elements are display: inline by default,
|
|
4
4
|
* so setting their width or height will have no effect
|
|
5
5
|
*/
|
|
6
6
|
:host { display: block; }
|
|
7
|
-
`],C=class extends HTMLElement{constructor(){super(),this.attachShadow(F)}connectedCallback(){this._onInit(),this._onDoUpdate()}attributeChangedCallback(t,e,o){if(e===o)return;this.updateContents(t)&&this._onUpdated()}disconnectedCallback(){O.call(this)}updateContents(t){return
|
|
7
|
+
`],W=(s,...t)=>String.raw({raw:s},...t),wt=W,C=class extends HTMLElement{constructor(){super(),this.attachShadow(F)}connectedCallback(){this._onInit(),this._onDoUpdate()}attributeChangedCallback(t,e,o){if(e===o)return;this.updateContents(t)&&this._onUpdated()}disconnectedCallback(){O.call(this)}updateContents(t){return v.call(this,t)}setEventListeners(){R.call(this)}setPropsBehavior(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t){let o=this[e];$.call(this,e,o)}}getStyles(t){let e=[],o=[],n=this.shadowRoot?.adoptedStyleSheets;for(let i of t)if(i.startsWith("<link"))e.push(i);else if(i.startsWith("@import")||!n){let l=document.createElement("style");l.innerHTML=i,e.push(l.outerHTML)}else{let l=new CSSStyleSheet;l.replaceSync(i),o.push(l)}return this.shadowRoot&&o.length>0&&(this.shadowRoot.adoptedStyleSheets=[...this.shadowRoot.adoptedStyleSheets,...o]),e.join("")}_onInit(){this.setPropsBehavior(),this.shadowRoot&&(this.shadowRoot.innerHTML=`
|
|
8
8
|
${this.getStyles(H)}
|
|
9
9
|
${this.getStyles(K)}
|
|
10
10
|
${this.getStyles(this.styles)}
|
|
11
11
|
${this.render()}
|
|
12
|
-
`),this.onInit()}_onDoUpdate(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t)this.updateContents(e)&&this._onUpdated();this.setEventListeners(),this.onDoUpdate()}_onUpdated(){this.setEventListeners(),this.onUpdated()}onInit(){}onDoUpdate(){}onUpdated(){}styles=[];render(){return""}};export{C as RedGin,F as attachShadow,h as customDirectives,c as customPropsBehavior,K as defaultStyles,I as emit,j as event,q as getset,H as injectStyles,M as propReflect,_ as watch};
|
|
12
|
+
`),this.onInit()}_onDoUpdate(){let t=Object.getOwnPropertyNames(this).filter(e=>e!="styles");for(let e of t)this.updateContents(e)&&this._onUpdated();this.setEventListeners(),this.onDoUpdate()}_onUpdated(){this.setEventListeners(),this.onUpdated()}onInit(){}onDoUpdate(){}onUpdated(){}styles=[];render(){return""}};export{C as RedGin,F as attachShadow,wt as css,h as customDirectives,c as customPropsBehavior,K as defaultStyles,I as emit,j as event,q as getset,W as html,H as injectStyles,M as propReflect,_ as watch};
|
|
13
13
|
//# sourceMappingURL=redgin.min.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "redgin",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"description": "~5.3kb Simplified library for building Web Components, works on Vanilla JS / all JS framework",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"redgin",
|
|
@@ -15,9 +15,10 @@
|
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
17
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
18
|
-
"clean": "rimraf src/*.js src/*/*.js samples/*.js samples/*/*.js src/*.d.ts src/*/*.d.ts",
|
|
18
|
+
"clean": "rimraf src/*.js src/*/*.js samples/*.js samples/*/*.js *.d.ts src/*.d.ts src/*/*.d.ts",
|
|
19
19
|
"build": "npm run clean && tsc -w",
|
|
20
|
-
"bundle": "npx esbuild --bundle src/redgin.js --minify --sourcemap --format=esm --outfile=dist/redgin.min.js --target=es2022",
|
|
20
|
+
"bundle": "npx esbuild --bundle src/redgin.js --minify --sourcemap --format=esm --outfile=dist/redgin.min.js --target=es2022 && npm run copy",
|
|
21
|
+
"copy": "cp -rvf src/*.d.ts dist/. && cp -rfv src/*/*.d.ts dist/*/.",
|
|
21
22
|
"dev": "node node_modules/vite/bin/vite.js"
|
|
22
23
|
},
|
|
23
24
|
"repository": {
|
package/dist/props/index.d.ts
DELETED