redgin 0.1.8 → 0.1.9

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.
Files changed (2) hide show
  1. package/README.md +30 -100
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -11,68 +11,38 @@
11
11
  * [Support Typescript](https://stackblitz.com/edit/typescript-ue61k6?file=index.ts)
12
12
 
13
13
 
14
+ ## Install
14
15
 
15
- ## Use directly in browser
16
+ ### Plug & Play, Import directly from cdn
16
17
 
17
- ```html
18
-
19
- <!DOCTYPE html>
20
- <html lang="en">
21
- <head>
22
- <meta charset="UTF-8">
23
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
24
- <title>RedGin</title>
25
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
26
- </head>
27
- <body>
28
-
29
-
30
- <script type="module">
31
-
32
- /* to handle flicker add spinner?? */
33
- document.body.innerHTML = `
34
- <div class="spinner-grow" role="status">
35
- <span class="visually-hidden">Loading...</span>
36
- </div>
37
- `
38
-
39
- import("https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js")
40
- .then( ({ injectStyles }) => {
41
- /*
42
- * inject global styles to all components
43
- */
44
- injectStyles.push('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">')
45
-
46
- /* load components */
47
- import('./bootStrap.js')
18
+ ```js
19
+ import { RedGin } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js'
20
+
21
+ ```
48
22
 
49
- /* to handle flicker */
50
- document.body.innerHTML = `
51
- <btn-bootstrap></btn-bootstrap>
52
- `
23
+ ### Or Install using NPM
53
24
 
54
- })
55
- .catch((err) => console.log(err))
25
+ ```js
26
+ npm i redgin
27
+ ```
56
28
 
57
- </script>
58
-
59
- </body>
60
- </html>
29
+ #### then import the library, helpers
61
30
 
31
+ ```js
32
+ import { Redgin } from 'redgin'
62
33
  ```
63
34
 
64
35
 
65
- ## How to?
36
+ ## How to use?
66
37
  ### Inline Events
67
- it uses events tag ( click ) to create event listener behind the scene and automatically clear once the component is remove from DOM
38
+ it uses <code>event</code> directive to create event listener behind the scene and automatically clear once the component is remove from DOM
68
39
  ```js
69
- import { RedGin, click } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js';
40
+ import { RedGin, event } from 'redgin'
70
41
 
71
42
  class Event extends RedGin {
72
43
  render() {
73
- return `<button ${ click( () => alert('Click Me') )} >Submit</button>`
74
- }
75
-
44
+ return `<button ${ event('click', () => alert('Click Me') )} >Submit</button>`
45
+ }
76
46
  }
77
47
 
78
48
  customElements.define('sample-event', Event);
@@ -80,14 +50,15 @@ customElements.define('sample-event', Event);
80
50
  ```
81
51
 
82
52
  ### List Render (Reactive)
83
- * dynamically create reactive props define in observedAttributes()
84
- * its uses watch directives to rerender inside html when value change
53
+ * its uses <code>propReflect</code> to dynamically create reactive props reflection define in observedAttributes()
54
+ * its uses <code>watch</code> directives to rerender inside html when value change
85
55
  ```js
86
- import { RedGin, watch } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js';
56
+ import { RedGin, watch, propReflect } from 'redgin';
87
57
 
88
58
  class Loop extends RedGin {
89
59
 
90
- static get observedAttributes() { return ['arr'] } // dynamically create reactive props this.arr
60
+ arr = propReflect([1, 2, 3])
61
+ static get observedAttributes() { return ['arr'] }
91
62
 
92
63
  render() {
93
64
  return `<ul> ${ watch(['arr'], () =>
@@ -100,49 +71,17 @@ class Loop extends RedGin {
100
71
 
101
72
  customElements.define('sample-loop', Loop);
102
73
 
103
- ```
104
- #### results
105
- ```html
106
-
107
- <ul>
108
- <li>Number: 1</li>
109
- <li>Number: 2</li>
110
- <li>Number: 3</li>
111
- </ul>
112
-
113
- ```
114
-
115
-
116
-
117
- ### IF condition (Static)
118
- ```js
119
- import { RedGin } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js';
120
-
121
- class If extends RedGin {
122
- isDisabled = true
123
-
124
- render() {
125
- return `<button
126
- ${ this.isDisabled ? `disabled` : ``}
127
- > Submit
128
- </button>
129
- }
130
- }
131
-
132
- customElements.define('sample-if', If);
133
-
134
74
  ```
135
75
 
136
76
  ### IF condition (Reactive)
137
- * dynamically create reactive props define in observedAttributes()
138
- * its uses directive watch to rerender inside html when value change
77
+ * its uses <code>propReflect</code> to dynamically create reactive props reflection define in observedAttributes()
78
+ * its uses <code>watch</code> directives to rerender inside html when value change
139
79
  ```js
140
- import { RedGin, watch } from "https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js";
80
+ import { RedGin, watch, propReflect } from 'redgin'
141
81
 
142
82
  class If extends RedGin {
143
-
83
+ isDisable = propReflect(false)
144
84
  static get observedAttributes() { return ['is-disable']; }
145
- // dynamically create camelCase props. ie. this.isDisable
146
85
 
147
86
  render() {
148
87
  return `
@@ -181,7 +120,7 @@ render() {
181
120
 
182
121
  ### Render List of Obj (Reactive)
183
122
  ```js
184
- onInit(): void {
123
+ onInit() {
185
124
  this.obj = [{id:1, name:'John Doe'}]
186
125
  }
187
126
 
@@ -194,26 +133,17 @@ render() {
194
133
 
195
134
 
196
135
 
197
- ### PropReflect Custom
198
- Can only define single variable to each attr
199
- IF define , auto creation of attr props is ignored
200
- ```js
201
- msg = propReflect('Hello?', { type: String } )
202
- ```
203
-
204
136
  ## Reference
205
137
  https://web.dev/custom-elements-best-practices/
206
138
 
207
139
  https://web.dev/shadowdom-v1/
208
140
 
209
- ## Installation
210
- ```
211
- npm install
212
- ```
213
141
 
214
142
  ## How to run development server?
215
143
  ```
144
+ git clone git@github.com:josnin/redgin.git
216
145
  cd ~/Documents/redgin/
146
+ npm install
217
147
  npm run dev
218
148
  ```
219
149
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "redgin",
3
- "version": "0.1.8",
4
- "description": "Simplified library for building web components",
3
+ "version": "0.1.9",
4
+ "description": "~5.3kb Simplified library for building Web Components, works on Vanilla JS / all JS framework",
5
5
  "keywords": [
6
6
  "redgin",
7
7
  "web components",