redgin 0.1.5 → 0.1.7

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 (3) hide show
  1. package/README.md +44 -34
  2. package/package.json +12 -11
  3. package/server.js +0 -25
package/README.md CHANGED
@@ -2,9 +2,9 @@
2
2
  # Simplified library for building [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
3
3
 
4
4
  * Javascript [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) for Template syntax
5
- * Introduced Reactive Tags, Directives (watch, div, span, ...)
6
- * Getters/Setters is handled by RedGin
7
- * Inline Events
5
+ * Introduced Reactive Tags, Directives (watch)
6
+ * Getters/Setters, Prop reflection is handled by RedGin
7
+ * Inline Events, Custom Events
8
8
  * Vanilla JS, Works on all JS framework
9
9
 
10
10
 
@@ -14,20 +14,43 @@
14
14
 
15
15
  <!DOCTYPE html>
16
16
  <html lang="en">
17
- <head>
18
- <script src="https://josnin.sgp1.digitaloceanspaces.com/redgin/dist/redgin.js"></script>
17
+ <head>
18
+ <meta charset="UTF-8">
19
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
20
+ <title>RedGin</title>
21
+ <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">
19
22
  </head>
20
23
  <body>
21
- <app-root></app-root>
22
-
23
- <script type="module">
24
- class AppRoot extends RedGin {
25
- render() {
26
- return ` This is app root! `
27
- }
28
- }
29
- customElements.define('app-root', AppRoot);
30
- </script>
24
+
25
+
26
+ <script type="module">
27
+
28
+ /* to handle flicker add spinner?? */
29
+ document.body.innerHTML = `
30
+ <div class="spinner-grow" role="status">
31
+ <span class="visually-hidden">Loading...</span>
32
+ </div>
33
+ `
34
+
35
+ import("https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js")
36
+ .then( ({ injectStyles }) => {
37
+ /*
38
+ * inject global styles to all components
39
+ */
40
+ 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">')
41
+
42
+ /* load components */
43
+ import('./bootStrap.js')
44
+
45
+ /* to handle flicker */
46
+ document.body.innerHTML = `
47
+ <btn-bootstrap></btn-bootstrap>
48
+ `
49
+
50
+ })
51
+ .catch((err) => console.log(err))
52
+
53
+ </script>
31
54
 
32
55
  </body>
33
56
  </html>
@@ -39,7 +62,7 @@
39
62
  ### Inline Events
40
63
  it uses events tag ( click ) to create event listener behind the scene and automatically clear once the component is remove from DOM
41
64
  ```js
42
- import { RedGin, click } from 'red-gin.js';
65
+ import { RedGin, click } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js';
43
66
 
44
67
  class Event extends RedGin {
45
68
  render() {
@@ -56,7 +79,7 @@ customElements.define('sample-event', Event);
56
79
  * dynamically create reactive props define in observedAttributes()
57
80
  * its uses watch directives to rerender inside html when value change
58
81
  ```js
59
- import { RedGin, watch } from 'red-gin.js';
82
+ import { RedGin, watch } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js';
60
83
 
61
84
  class Loop extends RedGin {
62
85
 
@@ -89,7 +112,7 @@ customElements.define('sample-loop', Loop);
89
112
 
90
113
  ### IF condition (Static)
91
114
  ```js
92
- import { RedGin } from 'red-gin.js';
115
+ import { RedGin } from 'https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js';
93
116
 
94
117
  class If extends RedGin {
95
118
  isDisabled = true
@@ -110,7 +133,7 @@ customElements.define('sample-if', If);
110
133
  * dynamically create reactive props define in observedAttributes()
111
134
  * its uses directive watch to rerender inside html when value change
112
135
  ```js
113
- import { RedGin, watch } from "./red-gin.js";
136
+ import { RedGin, watch } from "https://josnin.sgp1.cdn.digitaloceanspaces.com/redgin/redgin.min.js";
114
137
 
115
138
  class If extends RedGin {
116
139
 
@@ -138,7 +161,7 @@ customElements.define('sample-if', If);
138
161
  * recommend to use watch directive when rendering obj
139
162
  ```js
140
163
 
141
- obj = setget({
164
+ obj = getset({
142
165
  id:1,
143
166
  name:'John Doe'
144
167
  }, { forWatch: false } ) // forWatch default is true, for complex just define a setter/getter manually?
@@ -165,20 +188,7 @@ render() {
165
188
  }
166
189
  ```
167
190
 
168
- ### Render with Simplified tag (Reactive)
169
- * recommend to use div (span, etc.) directives for simple display of value
170
- ```js
171
- onInit(): void {
172
- this.id = 1;
173
- this.name = 'Joh Doe'
174
- }
175
-
176
- render() {
177
- return `
178
- ${ div('id') }
179
- ${ div('name') }`
180
- }
181
- ```
191
+
182
192
 
183
193
  ### PropReflect Custom
184
194
  Can only define single variable to each attr
package/package.json CHANGED
@@ -1,17 +1,24 @@
1
1
  {
2
2
  "name": "redgin",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "description": "Simplified library for building web components",
5
+ "keywords": [
6
+ "redgin",
7
+ "web components",
8
+ "custom elements"
9
+ ],
5
10
  "main": "dist/redgin.min.js",
6
11
  "types": "dist/redgin.d.ts",
7
12
  "type": "module",
8
13
  "engines": {
9
- "node": ">=16"
14
+ "node": ">=16.0.0"
10
15
  },
11
16
  "scripts": {
12
17
  "test": "echo \"Error: no test specified\" && exit 1",
13
18
  "build": "tsc -w",
14
- "start": "node server.js"
19
+ "bundle": "npx esbuild --bundle src/redgin.js --minify --sourcemap --format=esm --outfile=dist/redgin.min.js --target=es2022",
20
+ "bundle_ts": "npx esbuild --bundle src/redgin.ts --minify --sourcemap --outfile=dist/redgin.min.ts",
21
+ "dev": "node node_modules/vite/bin/vite.js"
15
22
  },
16
23
  "repository": {
17
24
  "type": "git",
@@ -24,19 +31,13 @@
24
31
  },
25
32
  "homepage": "https://github.com/josnin/redgin#readme",
26
33
  "dependencies": {
27
- "@fastify/static": "^5.0.0",
28
- "@types/node": "^18.11.14",
29
- "codelyzer": "^6.0.2",
30
- "esbuild": "^0.16.4",
31
- "fastify": "^3.21.0",
32
- "typescript": "^4.9.4"
34
+ "typescript": "^4.9.4",
35
+ "vite": "^4.0.4"
33
36
  },
34
37
  "devDependencies": {
35
- "@fastify/static": "^5.0.0",
36
38
  "@types/node": "^18.11.14",
37
39
  "codelyzer": "^6.0.2",
38
40
  "esbuild": "^0.16.4",
39
- "fastify": "^3.21.0",
40
41
  "typescript": "^4.9.4"
41
42
  }
42
43
  }
package/server.js DELETED
@@ -1,25 +0,0 @@
1
- const fastify = require('fastify')({ logger: true })
2
- const path = require('path');
3
-
4
- fastify.register(require('@fastify/static'), {
5
- root: path.join(__dirname, 'src'),
6
- wildcard: false
7
- })
8
-
9
- // Declare route
10
- fastify.get('/*', async (request, reply) => {
11
- return await reply.sendFile("index.html");
12
- })
13
-
14
- // run server
15
- const start = async () => {
16
- try {
17
- await fastify.listen( { port: 5068 })
18
- } catch (err) {
19
- fastify.log.error(err)
20
- process.exit(1)
21
- }
22
- }
23
-
24
- start()
25
-