@cocreate/pwa 1.22.1 → 1.22.2

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/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## [1.22.2](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.22.1...v1.22.2) (2025-04-30)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * added css-loader ([278cf60](https://github.com/CoCreate-app/CoCreate-pwa/commit/278cf6040b9d122e8e26459a4e7e367230154f4a))
7
+ * update query attributes ([dca7463](https://github.com/CoCreate-app/CoCreate-pwa/commit/dca746308c527285c7d6a1bfa17da935cc50db31))
8
+ * updated cocreate modules versions ([a710f90](https://github.com/CoCreate-app/CoCreate-pwa/commit/a710f9049a21e4323577969db76a8c82215112cc))
9
+ * webpack.config and devdependencies ([23eb371](https://github.com/CoCreate-app/CoCreate-pwa/commit/23eb37119f2ae090999cf52b6a597f0b2d272bd7))
10
+
1
11
  ## [1.22.1](https://github.com/CoCreate-app/CoCreate-pwa/compare/v1.22.0...v1.22.1) (2025-04-11)
2
12
 
3
13
 
@@ -29,7 +29,7 @@
29
29
  geolocation="watchPosition"
30
30
  geolocation-key="id"
31
31
  placeholder="id"
32
- input-next
32
+ input-query="$next"
33
33
  input-attribute="value" />
34
34
  <input
35
35
  geolocation="clearWatch"
package/docs/index.html CHANGED
@@ -1,228 +1,228 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <title>CoCreate-pwa Documentation | CoCreateJS</title>
8
- <link
9
- rel="icon"
10
- type="image/png"
11
- sizes="32x32"
12
- href="https://cocreate.app/images/favicon.ico" />
13
- <meta
14
- name="description"
15
- content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16
- <meta
17
- name="keywords"
18
- content="helper classes, utility classes, css framework, css library, inline style classes" />
19
- <meta name="robots" content="index,follow" />
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>CoCreate-pwa Documentation | CoCreateJS</title>
8
+ <link
9
+ rel="icon"
10
+ type="image/png"
11
+ sizes="32x32"
12
+ href="https://cocreate.app/images/favicon.ico" />
13
+ <meta
14
+ name="description"
15
+ content="A simple HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16
+ <meta
17
+ name="keywords"
18
+ content="helper classes, utility classes, css framework, css library, inline style classes" />
19
+ <meta name="robots" content="index,follow" />
20
20
 
21
- <link rel="manifest" href="/manifest.webmanifest" />
22
- </head>
21
+ <link rel="manifest" href="/manifest.webmanifest" />
22
+ </head>
23
23
 
24
- <body>
25
- <div array="" object="" key="" id="cocreate-pwa">
26
- <div
27
- class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
28
- <div class="display:flex align-items:center">
29
- <h2>CoCreate-pwa</h2>
30
- </div>
31
- <div
32
- class="display:flex align-items:center font-size:20px"
33
- share-height="600"
34
- share-width="500"
35
- share-media="https://via.placeholder.com/300/09f/fff.png">
36
- <a
37
- href="https://github.com/CoCreate-app/CoCreate-pwa"
38
- target="_blank"
39
- class="margin-right:15px"
40
- ><i src="/assets/svg/github.svg"></i
41
- ></a>
42
- <a
43
- class="margin-right:15px share"
44
- share-network="twitter"
45
- title="Share on twitter"
46
- ><i src="/assets/svg/twitter.svg"></i
47
- ></a>
48
- <a
49
- class="margin-right:15px share"
50
- share-network="facebook"
51
- title="Share on Facebook"
52
- ><i src="/assets/svg/facebook.svg"></i
53
- ></a>
54
- <a
55
- class="margin-right:15px share"
56
- share-network="instagram"
57
- title="Share on instagram"
58
- ><i src="/assets/svg/instagram.svg"></i
59
- ></a>
60
- <a
61
- class="margin-right:15px share"
62
- share-network="share"
63
- title="Share on share"
64
- ><i src="/assets/svg/share-alt.svg"></i
65
- ></a>
66
- </div>
67
- </div>
68
- <h1 class="max-width:500px margin:20px_10px">
69
- A simple HTML5, CSS and pure javascript component. Easy
70
- configuration using data-attributes and highly styleable.
71
- </h1>
72
- <div id="pwa-section" class="display:flex flex-wrap:wrap">
73
- <div class="flex-grow:1 width:300px padding:20px_10px">
74
- <h2
75
- class="border-bottom:1px_solid_lightgrey padding:5px_0px">
76
- Install
77
- </h2>
78
- <pre
79
- class="margin-top:15px"><code class="language-javascript">npm install cocreate-pwa</code></pre>
80
- <p class="padding:10px_0px">Or you can use cdn link:</p>
81
- <pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-pwa.min.js</code></pre>
24
+ <body>
25
+ <div array="" object="" key="" id="cocreate-pwa">
26
+ <div
27
+ class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
28
+ <div class="display:flex align-items:center">
29
+ <h2>CoCreate-pwa</h2>
30
+ </div>
31
+ <div
32
+ class="display:flex align-items:center font-size:20px"
33
+ share-height="600"
34
+ share-width="500"
35
+ share-media="https://via.placeholder.com/300/09f/fff.png">
36
+ <a
37
+ href="https://github.com/CoCreate-app/CoCreate-pwa"
38
+ target="_blank"
39
+ class="margin-right:15px"
40
+ ><i src="/assets/svg/github.svg"></i
41
+ ></a>
42
+ <a
43
+ class="margin-right:15px share"
44
+ share-network="twitter"
45
+ title="Share on twitter"
46
+ ><i src="/assets/svg/twitter.svg"></i
47
+ ></a>
48
+ <a
49
+ class="margin-right:15px share"
50
+ share-network="facebook"
51
+ title="Share on Facebook"
52
+ ><i src="/assets/svg/facebook.svg"></i
53
+ ></a>
54
+ <a
55
+ class="margin-right:15px share"
56
+ share-network="instagram"
57
+ title="Share on instagram"
58
+ ><i src="/assets/svg/instagram.svg"></i
59
+ ></a>
60
+ <a
61
+ class="margin-right:15px share"
62
+ share-network="share"
63
+ title="Share on share"
64
+ ><i src="/assets/svg/share-alt.svg"></i
65
+ ></a>
66
+ </div>
67
+ </div>
68
+ <h1 class="max-width:500px margin:20px_10px">
69
+ A simple HTML5, CSS and pure javascript component. Easy
70
+ configuration using data-attributes and highly styleable.
71
+ </h1>
72
+ <div id="pwa-section" class="display:flex flex-wrap:wrap">
73
+ <div class="flex-grow:1 width:300px padding:20px_10px">
74
+ <h2
75
+ class="border-bottom:1px_solid_lightgrey padding:5px_0px">
76
+ Install
77
+ </h2>
78
+ <pre
79
+ class="margin-top:15px"><code class="language-javascript">npm install cocreate-pwa</code></pre>
80
+ <p class="padding:10px_0px">Or you can use cdn link:</p>
81
+ <pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-pwa.min.js</code></pre>
82
82
 
83
- <h2
84
- class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
85
- Usage
86
- </h2>
87
- <p class="padding:10px_0px">pwa usage content</p>
88
- <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
83
+ <h2
84
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
85
+ Usage
86
+ </h2>
87
+ <p class="padding:10px_0px">pwa usage content</p>
88
+ <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
89
89
 
90
- <h2
91
- class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
92
- Reference
93
- </h2>
94
- <p class="padding:10px_0px">
95
- This is pwa reference content
96
- </p>
97
- <pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
98
- <p class="padding:10px_0px">
99
- This is pwa reference content
100
- </p>
90
+ <h2
91
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
92
+ Reference
93
+ </h2>
94
+ <p class="padding:10px_0px">
95
+ This is pwa reference content
96
+ </p>
97
+ <pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
98
+ <p class="padding:10px_0px">
99
+ This is pwa reference content
100
+ </p>
101
101
 
102
- <h2
103
- class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
104
- Attributes
105
- </h2>
106
- <ul class="list-style-type:none">
107
- <li
108
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
109
- <h4>
110
- <span>pwa</span>
111
- <span class="cocreate-badge success"
112
- >string</span
113
- >
114
- <span class="cocreate-badge warning"
115
- >optional</span
116
- >
117
- </h4>
118
- <p>pwa-attribute</p>
119
- </li>
120
- <li
121
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
122
- <h4>
123
- <span>pwa</span>
124
- <span class="cocreate-badge success"
125
- >string</span
126
- >
127
- <span class="cocreate-badge warning"
128
- >optional</span
129
- >
130
- </h4>
131
- <p>pwa-attribute</p>
132
- </li>
133
- </ul>
134
- </div>
102
+ <h2
103
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
104
+ Attributes
105
+ </h2>
106
+ <ul class="list-style-type:none">
107
+ <li
108
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
109
+ <h4>
110
+ <span>pwa</span>
111
+ <span class="cocreate-badge success"
112
+ >string</span
113
+ >
114
+ <span class="cocreate-badge warning"
115
+ >optional</span
116
+ >
117
+ </h4>
118
+ <p>pwa-attribute</p>
119
+ </li>
120
+ <li
121
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
122
+ <h4>
123
+ <span>pwa</span>
124
+ <span class="cocreate-badge success"
125
+ >string</span
126
+ >
127
+ <span class="cocreate-badge warning"
128
+ >optional</span
129
+ >
130
+ </h4>
131
+ <p>pwa-attribute</p>
132
+ </li>
133
+ </ul>
134
+ </div>
135
135
 
136
- <div
137
- class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
138
- <!-- SandBox -->
139
- <h2
140
- class="border-bottom:1px_solid_lightgrey padding:5px_0px">
141
- Demo
142
- </h2>
143
- <div
144
- class="position:sticky top:0 padding:10px_0px height:100vh">
145
- <!-- SandBox -->
146
- <div
147
- class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
148
- id="playground">
149
- <div
150
- id="demo-code"
151
- resizable
152
- class="position:relative height:50%">
153
- <textarea
154
- type="code"
155
- lang="html"
156
- array="demos"
157
- object=""
158
- key="demo"
159
- save="false"
160
- id="demo"
161
- class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
162
- <div
163
- resize="bottom"
164
- class="background:lightgrey"></div>
165
- </div>
136
+ <div
137
+ class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
138
+ <!-- SandBox -->
139
+ <h2
140
+ class="border-bottom:1px_solid_lightgrey padding:5px_0px">
141
+ Demo
142
+ </h2>
143
+ <div
144
+ class="position:sticky top:0 padding:10px_0px height:100vh">
145
+ <!-- SandBox -->
146
+ <div
147
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
148
+ id="playground">
149
+ <div
150
+ id="demo-code"
151
+ resizable
152
+ class="position:relative height:50%">
153
+ <textarea
154
+ type="code"
155
+ lang="html"
156
+ array="demos"
157
+ object=""
158
+ key="demo"
159
+ save="false"
160
+ id="demo"
161
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
162
+ <div
163
+ resize="bottom"
164
+ class="background:lightgrey"></div>
165
+ </div>
166
166
 
167
- <div
168
- id="demo-preview"
169
- class="position:relative overflow:auto background-color:white">
170
- <div class="demopreview padding:20px"></div>
171
- </div>
167
+ <div
168
+ id="demo-preview"
169
+ class="position:relative overflow:auto background-color:white">
170
+ <div class="demopreview padding:20px"></div>
171
+ </div>
172
172
 
173
- <div
174
- class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
175
- <a
176
- class="margin-right:10px"
177
- id="eye"
178
- show="#eye-slash"
179
- hide="#eye, #demo-preview"
180
- toggle="code-height"
181
- toggle-selector="#demo-code"
182
- ><i
183
- class="height:18px"
184
- src="/assets/svg/eye.svg"></i
185
- ></a>
186
- <a
187
- class="margin-right:10px"
188
- hidden
189
- id="eye-slash"
190
- show="#eye, #demo-preview"
191
- hide="#eye-slash"
192
- toggle="code-height"
193
- toggle-selector="#demo-code"
194
- ><i src="/assets/svg/eye-slash.svg"></i
195
- ></a>
196
- <a
197
- class="margin-right:10px"
198
- id="code"
199
- show="#code-slash"
200
- hide="#code, #demo-code"
201
- ><i src="/assets/svg/code.svg"></i
202
- ></a>
203
- <a
204
- class="margin-right:10px"
205
- hidden
206
- id="code-slash"
207
- show="#code, #demo-code"
208
- hide="#code-slash"
209
- ><i
210
- class="height:18px"
211
- src="/assets/svg/code.svg"></i
212
- ></a>
213
- <a
214
- class="margin-right:5px"
215
- fullscreen
216
- fullscreen-selector="#playground"></a>
217
- </div>
218
- </div>
219
- <!-- End SandBox -->
220
- </div>
221
- </div>
222
- </div>
223
- </div>
173
+ <div
174
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
175
+ <a
176
+ class="margin-right:10px"
177
+ id="eye"
178
+ show="#eye-slash"
179
+ hide="#eye, #demo-preview"
180
+ toggle="code-height"
181
+ toggle-query="#demo-code"
182
+ ><i
183
+ class="height:18px"
184
+ src="/assets/svg/eye.svg"></i
185
+ ></a>
186
+ <a
187
+ class="margin-right:10px"
188
+ hidden
189
+ id="eye-slash"
190
+ show="#eye, #demo-preview"
191
+ hide="#eye-slash"
192
+ toggle="code-height"
193
+ toggle-query="#demo-code"
194
+ ><i src="/assets/svg/eye-slash.svg"></i
195
+ ></a>
196
+ <a
197
+ class="margin-right:10px"
198
+ id="code"
199
+ show="#code-slash"
200
+ hide="#code, #demo-code"
201
+ ><i src="/assets/svg/code.svg"></i
202
+ ></a>
203
+ <a
204
+ class="margin-right:10px"
205
+ hidden
206
+ id="code-slash"
207
+ show="#code, #demo-code"
208
+ hide="#code-slash"
209
+ ><i
210
+ class="height:18px"
211
+ src="/assets/svg/code.svg"></i
212
+ ></a>
213
+ <a
214
+ class="margin-right:5px"
215
+ fullscreen
216
+ fullscreen-query="#playground"></a>
217
+ </div>
218
+ </div>
219
+ <!-- End SandBox -->
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
224
 
225
- <!--CoCreateJS-->
226
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
227
- </body>
225
+ <!--CoCreateJS-->
226
+ <script src="https://CoCreate.app/dist/CoCreate.js"></script>
227
+ </body>
228
228
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/pwa",
3
- "version": "1.22.1",
3
+ "version": "1.22.2",
4
4
  "description": "A simple pwa component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "pwa",
@@ -46,19 +46,15 @@
46
46
  },
47
47
  "main": "./src/index.js",
48
48
  "devDependencies": {
49
- "@babel/core": "^7.9.6",
50
- "@babel/preset-env": "^7.9.6",
51
- "babel-loader": "^8.1.0",
52
- "clean-webpack-plugin": "^3.0.0",
53
- "file-loader": "^6.2.0",
49
+ "css-loader": "^5.1.3",
50
+ "esbuild": "^0.25.2",
51
+ "esbuild-loader": "^4.3.0",
54
52
  "mini-css-extract-plugin": "^1.5.0",
55
- "style-loader": "^3.3.1",
56
- "terser-webpack-plugin": "^5.1.1",
57
53
  "webpack": "^5.24.4",
58
54
  "webpack-cli": "^4.5.0",
59
55
  "webpack-log": "^3.0.1"
60
56
  },
61
57
  "dependencies": {
62
- "@cocreate/local-storage": "^1.15.0"
58
+ "@cocreate/local-storage": "^1.16.1"
63
59
  }
64
60
  }
package/webpack.config.js CHANGED
@@ -1,91 +1,65 @@
1
- const path = require("path")
2
- const TerserPlugin = require("terser-webpack-plugin")
3
- const MiniCssExtractPlugin = require("mini-css-extract-plugin")
4
- const { CleanWebpackPlugin } = require("clean-webpack-plugin")
5
-
6
- module.exports = (env, argv) => {
7
- let isProduction = false
8
- if (argv.mode === 'production')
9
- isProduction = true
10
-
11
- const config = {
12
- entry: {
13
- "CoCreate-pwa": "./src/index.js",
14
- "service-worker": "./src/service-worker.js",
15
- },
16
- output: {
17
- path: path.resolve(__dirname, "dist"),
18
- filename: isProduction ? "[name].min.js" : "[name].js",
19
- libraryTarget: "umd",
20
- libraryExport: "default",
21
- library: ["CoCreate", "pwa"],
22
- globalObject: "this",
23
- },
24
-
25
- plugins: [
26
- new CleanWebpackPlugin(),
27
- new MiniCssExtractPlugin({
28
- filename: "[name].css",
29
- }),
30
- ],
31
- // Default mode for Webpack is production.
32
- // Depending on mode Webpack will apply different things
33
- // on final bundle. For now we don't need production's JavaScript
34
- // minifying and other thing so let's set mode to development
35
- mode: isProduction ? "production" : "development",
36
- module: {
37
- rules: [
38
- {
39
- test: /.js$/,
40
- exclude: /(node_modules)/,
41
- use: {
42
- loader: "babel-loader",
43
- options: {
44
- plugins: ["@babel/plugin-transform-modules-commonjs"],
45
- },
46
- },
47
- },
48
- {
49
- test: /.css$/i,
50
- use: [
51
- { loader: "style-loader", options: { injectType: "linkTag" } },
52
- "file-loader",
53
- ],
54
- },
55
- ],
56
- },
57
-
58
- // add source map
59
- ...(isProduction ? {} : { devtool: "eval-source-map" }),
60
-
61
- optimization: {
62
- minimize: true,
63
- minimizer: [
64
- new TerserPlugin({
65
- extractComments: true,
66
- // cache: true,
67
- parallel: true,
68
- // sourceMap: true, // Must be set to true if using source-maps in production
69
- terserOptions: {
70
- // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
71
- // extractComments: 'all',
72
- compress: {
73
- drop_console: true,
74
- },
75
- },
76
- }),
77
- ],
78
- splitChunks: {
79
- chunks: "all",
80
- minSize: 200,
81
- // maxSize: 99999,
82
- //minChunks: 1,
83
-
84
- cacheGroups: {
85
- defaultVendors: false,
86
- },
87
- },
88
- },
89
- }
90
- return config
91
- }
1
+ const path = require("path");
2
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3
+ const { EsbuildPlugin } = require("esbuild-loader");
4
+ const { FileUploader } = require("@cocreate/webpack");
5
+
6
+ module.exports = async (env, argv) => {
7
+ const isProduction = argv && argv.mode === "production";
8
+ const config = {
9
+ entry: {
10
+ "CoCreate-pwa": "./src/index.js"
11
+ },
12
+ output: {
13
+ path: path.resolve(__dirname, "dist"),
14
+ filename: isProduction ? "[name].min.js" : "[name].js",
15
+ libraryExport: "default",
16
+ library: ["CoCreate", "pwa"],
17
+ clean: true
18
+ },
19
+ plugins: [
20
+ new MiniCssExtractPlugin({
21
+ filename: isProduction ? "[name].min.css" : "[name].css"
22
+ }),
23
+ new FileUploader(env, argv)
24
+ ],
25
+ mode: isProduction ? "production" : "development",
26
+ devtool: isProduction ? "source-map" : "eval-source-map",
27
+ module: {
28
+ rules: [
29
+ {
30
+ test: /.js$/,
31
+ exclude: /node_modules/,
32
+ use: {
33
+ loader: "esbuild-loader",
34
+ options: {
35
+ loader: "js",
36
+ target: "es2017"
37
+ }
38
+ }
39
+ },
40
+ {
41
+ test: /.css$/i,
42
+ use: [MiniCssExtractPlugin.loader, "css-loader"]
43
+ }
44
+ ]
45
+ },
46
+ optimization: {
47
+ minimize: isProduction,
48
+ minimizer: [
49
+ new EsbuildPlugin({
50
+ target: "es2017",
51
+ css: true
52
+ })
53
+ ],
54
+ splitChunks: {
55
+ cacheGroups: {
56
+ defaultVendors: false
57
+ }
58
+ }
59
+ },
60
+ performance: {
61
+ hints: isProduction ? "warning" : false
62
+ }
63
+ };
64
+ return config;
65
+ };