@cocreate/webpack 1.3.6 → 1.4.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/CHANGELOG.md +22 -0
- package/demo/index.html +19 -19
- package/docs/index.html +336 -336
- package/package.json +1 -1
- package/prettier.config.js +16 -0
- package/src/index.js +182 -113
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,25 @@
|
|
|
1
|
+
## [1.4.1](https://github.com/CoCreate-app/CoCreate-webpack/compare/v1.4.0...v1.4.1) (2025-04-30)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* added comments ([f48117a](https://github.com/CoCreate-app/CoCreate-webpack/commit/f48117a6e6b322c5701c89e2fd9d992a15de95a0))
|
|
7
|
+
* update query attributes ([9deaf7f](https://github.com/CoCreate-app/CoCreate-webpack/commit/9deaf7fe574d0a0d33992b7bde9460bad9008f5e))
|
|
8
|
+
* updated cocreate modules versions ([6483d6a](https://github.com/CoCreate-app/CoCreate-webpack/commit/6483d6a02c18343f1eb8a42596fcb3fac42fd544))
|
|
9
|
+
|
|
10
|
+
# [1.4.0](https://github.com/CoCreate-app/CoCreate-webpack/compare/v1.3.6...v1.4.0) (2024-11-04)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* pretier.config.js and file formating ([8921a99](https://github.com/CoCreate-app/CoCreate-webpack/commit/8921a99579a95ae06e1e24361cee1ac7ca6d2939))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* add prettier.config.js and format files ([924fe7f](https://github.com/CoCreate-app/CoCreate-webpack/commit/924fe7fe931802b0818496e8ac344fab5fe9fffc))
|
|
21
|
+
* add prettier.config.js and format files ([fae1d78](https://github.com/CoCreate-app/CoCreate-webpack/commit/fae1d78c9fa5cf941b24e0b0d90aa9b6c6570218))
|
|
22
|
+
|
|
1
23
|
## [1.3.6](https://github.com/CoCreate-app/CoCreate-webpack/compare/v1.3.5...v1.3.6) (2024-06-12)
|
|
2
24
|
|
|
3
25
|
|
package/demo/index.html
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
<head>
|
|
4
|
+
<title>webpack | CoCreateJS</title>
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
6
|
+
<!-- CoCreate Favicon -->
|
|
7
|
+
<link
|
|
8
|
+
rel="icon"
|
|
9
|
+
type="image/png"
|
|
10
|
+
sizes="32x32"
|
|
11
|
+
href="../assets/favicon.ico" />
|
|
12
|
+
</head>
|
|
13
|
+
<body>
|
|
14
|
+
<form>
|
|
15
|
+
<textarea webpack="message"></textarea>
|
|
16
|
+
<button actions="webpack, reset">click</button>
|
|
17
|
+
</form>
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
<!-- <div
|
|
20
20
|
array="users"
|
|
21
21
|
array="interviews"
|
|
22
22
|
object
|
|
23
23
|
filter-sort-key="name"
|
|
24
24
|
filter-sort-direction="asc"
|
|
25
|
-
render-
|
|
25
|
+
render-query="[template]">
|
|
26
26
|
<div
|
|
27
27
|
class="border-bottom:1px_solid_darkgray"
|
|
28
28
|
template
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
</div>
|
|
33
33
|
</div> -->
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
<!-- <script src="../src/CoCreate-webpack.js"></script> -->
|
|
36
|
+
<script src="./dist/CoCreate.js"></script>
|
|
37
|
+
</body>
|
|
38
38
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -1,351 +1,351 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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-webpack 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 convenient chain handler allows user to chain multiple components together. When one webpack is complete next one will start untill all webpack completed." />
|
|
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
|
+
<meta
|
|
21
|
+
property="og:image"
|
|
22
|
+
content="https://cdn.cocreate.app/docs/webpack.png" />
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
<link
|
|
25
|
+
rel="stylesheet"
|
|
26
|
+
href="../index.css"
|
|
27
|
+
array="files"
|
|
28
|
+
object="60888216117c640e7596303f"
|
|
29
|
+
key="src"
|
|
30
|
+
type="text/css"
|
|
31
|
+
save="true" />
|
|
32
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
33
|
+
</head>
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
35
|
+
<body>
|
|
36
|
+
<!-- Navbar -->
|
|
37
|
+
<nav
|
|
38
|
+
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
|
|
39
|
+
content_id="content"
|
|
40
|
+
scroll="sticky-nav,"
|
|
41
|
+
scroll-up="5"
|
|
42
|
+
scroll-down="5"
|
|
43
|
+
path="../"
|
|
44
|
+
src="../components/navbar.html"></nav>
|
|
45
|
+
<sidenav
|
|
46
|
+
id="menuL"
|
|
47
|
+
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
|
|
48
|
+
resizable
|
|
49
|
+
resize-query="[content_id='content']"
|
|
50
|
+
resize-property="margin-left"
|
|
51
|
+
resize-value="width">
|
|
52
|
+
<menu
|
|
53
|
+
array="files"
|
|
54
|
+
object="603717b07de7fb350ae9fec8"
|
|
55
|
+
key="src"></menu>
|
|
56
|
+
<div resize="right"></div>
|
|
57
|
+
</sidenav>
|
|
58
|
+
<main
|
|
59
|
+
class="padding-top:15px padding:15px@lg@xl"
|
|
60
|
+
content_id="content"
|
|
61
|
+
id="cocreate-webpack">
|
|
62
|
+
<div
|
|
63
|
+
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
|
|
64
|
+
<div class="display:flex align-items:center">
|
|
65
|
+
<h2>CoCreate-webpack</h2>
|
|
66
|
+
</div>
|
|
67
|
+
<div
|
|
68
|
+
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
|
|
69
|
+
<div
|
|
70
|
+
class="display:flex align-items:center transition:0.3s padding-left:10px"
|
|
71
|
+
share-network="true"
|
|
72
|
+
share-text="A convenient chain handler allows user to chain multiple components together. When one webpack is complete next one will start untill all webpack completed."
|
|
73
|
+
share-title="CoCreate webpack"
|
|
74
|
+
share-height="600"
|
|
75
|
+
share-width="700"
|
|
76
|
+
share-media="https://cdn.cocreate.app/docs/webpack.png"
|
|
77
|
+
hover="display:block!important"
|
|
78
|
+
hover-query=".social-networks">
|
|
79
|
+
<div class="display:none social-networks">
|
|
80
|
+
<a
|
|
81
|
+
class="margin-right:15px"
|
|
82
|
+
share-network="twitter"
|
|
83
|
+
title="Share on twitter"
|
|
84
|
+
><i src="/assets/svg/twitter.svg"></i
|
|
85
|
+
></a>
|
|
86
|
+
<a
|
|
87
|
+
class="margin-right:15px"
|
|
88
|
+
share-network="facebook"
|
|
89
|
+
title="Share on Facebook"
|
|
90
|
+
><i src="/assets/svg/facebook.svg"></i
|
|
91
|
+
></a>
|
|
92
|
+
<a
|
|
93
|
+
class="margin-right:15px"
|
|
94
|
+
share-network="instagram"
|
|
95
|
+
title="Share on instagram"
|
|
96
|
+
><i src="/assets/svg/instagram.svg"></i
|
|
97
|
+
></a>
|
|
98
|
+
</div>
|
|
99
|
+
<a
|
|
100
|
+
class="margin-right:15px"
|
|
101
|
+
share-network="share"
|
|
102
|
+
title="Share on share"
|
|
103
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
104
|
+
></a>
|
|
105
|
+
</div>
|
|
106
|
+
<a
|
|
107
|
+
class="margin-right:15px"
|
|
108
|
+
share-network="share"
|
|
109
|
+
title="Share on share"
|
|
110
|
+
><i src="/assets/svg/share-alt.svg"></i
|
|
111
|
+
></a>
|
|
112
|
+
</div>
|
|
113
|
+
<a
|
|
114
|
+
href="https://github.com/CoCreate-app/CoCreate-webpack"
|
|
115
|
+
target="_blank"
|
|
116
|
+
class=""
|
|
117
|
+
><i src="/assets/svg/github.svg"></i
|
|
118
|
+
></a>
|
|
119
|
+
</div>
|
|
120
120
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
121
|
+
<h1
|
|
122
|
+
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
|
|
123
|
+
A convenient chain handler allows user to chain multiple
|
|
124
|
+
CoCreate components together. When one webpack is complete next
|
|
125
|
+
one will start. The sequence goes untill all webpack completed.
|
|
126
|
+
Grounded on Vanilla javascript, easily configured using HTML5
|
|
127
|
+
attributes and/or JavaScript API.
|
|
128
|
+
</h1>
|
|
129
|
+
<div id="webpack-section" class="display:flex flex-wrap:wrap">
|
|
130
|
+
<div
|
|
131
|
+
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
|
|
132
|
+
<div
|
|
133
|
+
id="webpack-install"
|
|
134
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
135
|
+
scroll
|
|
136
|
+
scroll-intersect="color:dodgerblue"
|
|
137
|
+
scroll-query="#webpack-install-section">
|
|
138
|
+
<span
|
|
139
|
+
class="display:flex align-items:center width:fit-content"
|
|
140
|
+
hover="display:block!important"
|
|
141
|
+
hover-query="[href='#webpack-install']">
|
|
142
|
+
<h2 class="padding:5px_0px">Install</h2>
|
|
143
|
+
<a
|
|
144
|
+
class="margin-left:10px display:none"
|
|
145
|
+
href="#webpack-install"
|
|
146
|
+
><i src="/assets/svg/link.svg"></i
|
|
147
|
+
></a>
|
|
148
|
+
</span>
|
|
149
|
+
</div>
|
|
150
150
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
151
|
+
<pre><code class="language-bash">npm i @cocreate/webpack</code></pre>
|
|
152
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
153
|
+
Or you can use cdn link:
|
|
154
|
+
</p>
|
|
155
|
+
<pre><code class="language-html"><script>https://cdn.cocreate.app/webpack/latest/CoCreate-webpack.min.js</script></code></pre>
|
|
156
156
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
157
|
+
<div
|
|
158
|
+
id="webpack-usage"
|
|
159
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
160
|
+
scroll
|
|
161
|
+
scroll-intersect="color:dodgerblue"
|
|
162
|
+
scroll-query="#webpack-usage-section">
|
|
163
|
+
<span
|
|
164
|
+
class="display:flex align-items:center width:fit-content"
|
|
165
|
+
hover="display:block!important"
|
|
166
|
+
hover-query="[href='#webpack-usage']">
|
|
167
|
+
<h2 class="padding:5px_0px">Usage</h2>
|
|
168
|
+
<a
|
|
169
|
+
class="margin-left:10px display:none"
|
|
170
|
+
href="#webpack-usage"
|
|
171
|
+
><i src="/assets/svg/link.svg"></i
|
|
172
|
+
></a>
|
|
173
|
+
</span>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="">
|
|
176
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
177
|
+
This is webpack usage
|
|
178
|
+
</p>
|
|
179
179
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
180
|
+
<div class="flex-grow:1 min-width:300px width:100%">
|
|
181
|
+
<pre><code class="language-html"><div></div></code></pre>
|
|
182
|
+
</div>
|
|
183
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
184
|
+
This is webpack usage
|
|
185
|
+
</p>
|
|
186
|
+
<p class="padding:10px_0px line-height:1.5">
|
|
187
|
+
This is webpack usage
|
|
188
|
+
</p>
|
|
189
|
+
</div>
|
|
190
190
|
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
191
|
+
<div
|
|
192
|
+
id="webpack-attributes"
|
|
193
|
+
class="margin-top:80px border-bottom:1px_solid_lightgrey"
|
|
194
|
+
scroll
|
|
195
|
+
scroll-intersect="color:dodgerblue"
|
|
196
|
+
scroll-query="#webpack-attributes-section">
|
|
197
|
+
<span
|
|
198
|
+
class="display:flex align-items:center width:fit-content"
|
|
199
|
+
hover="display:block!important"
|
|
200
|
+
hover-query="[href='#webpack-attributes']">
|
|
201
|
+
<h2 class="padding:5px_0px">Attributes</h2>
|
|
202
|
+
<a
|
|
203
|
+
class="margin-left:10px display:none"
|
|
204
|
+
href="#webpack-attributes"
|
|
205
|
+
><i src="/assets/svg/link.svg"></i
|
|
206
|
+
></a>
|
|
207
|
+
</span>
|
|
208
|
+
</div>
|
|
209
209
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
210
|
+
<ul class="list-style-type:none">
|
|
211
|
+
<li
|
|
212
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
213
|
+
<h4>
|
|
214
|
+
<span>webpack</span>
|
|
215
|
+
<span class="cocreate-badge success"
|
|
216
|
+
>string</span
|
|
217
|
+
>
|
|
218
|
+
<span class="cocreate-badge warning"
|
|
219
|
+
>optional</span
|
|
220
|
+
>
|
|
221
|
+
</h4>
|
|
222
|
+
<p>webpack-attribute</p>
|
|
223
|
+
</li>
|
|
224
|
+
<li
|
|
225
|
+
class="padding:15px_0px border-bottom:1px_solid_lightgrey">
|
|
226
|
+
<h4>
|
|
227
|
+
<span>webpack</span>
|
|
228
|
+
<span class="cocreate-badge success"
|
|
229
|
+
>string</span
|
|
230
|
+
>
|
|
231
|
+
<span class="cocreate-badge warning"
|
|
232
|
+
>optional</span
|
|
233
|
+
>
|
|
234
|
+
</h4>
|
|
235
|
+
<p>webpack-attribute</p>
|
|
236
|
+
</li>
|
|
237
|
+
</ul>
|
|
238
|
+
</div>
|
|
239
239
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
240
|
+
<div
|
|
241
|
+
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
|
|
242
|
+
<!-- SandBox -->
|
|
243
|
+
<div
|
|
244
|
+
id="webpack-demo"
|
|
245
|
+
class="border-bottom:1px_solid_lightgrey"
|
|
246
|
+
scroll
|
|
247
|
+
scroll-intersect="color:dodgerblue"
|
|
248
|
+
scroll-query="#webpack-demo-section">
|
|
249
|
+
<span
|
|
250
|
+
class="display:flex align-items:center width:fit-content"
|
|
251
|
+
hover="display:block!important"
|
|
252
|
+
hover-query="[href='#webpack-demo']">
|
|
253
|
+
<h2 class="padding:5px_0px">Demo</h2>
|
|
254
|
+
<a
|
|
255
|
+
class="margin-left:10px display:none"
|
|
256
|
+
href="#webpack-demo"
|
|
257
|
+
><i src="/assets/svg/link.svg"></i
|
|
258
|
+
></a>
|
|
259
|
+
</span>
|
|
260
|
+
</div>
|
|
261
261
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
262
|
+
<div
|
|
263
|
+
class="position:sticky top:0 padding:15px_0px height:100vh">
|
|
264
|
+
<!-- SandBox -->
|
|
265
|
+
<div
|
|
266
|
+
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
|
|
267
|
+
id="playground">
|
|
268
|
+
<div
|
|
269
|
+
id="demo-code"
|
|
270
|
+
resizable
|
|
271
|
+
class="position:relative height:50%">
|
|
272
|
+
<textarea
|
|
273
|
+
type="code"
|
|
274
|
+
lang="html"
|
|
275
|
+
array="demos"
|
|
276
|
+
object=""
|
|
277
|
+
key="demo"
|
|
278
|
+
save="false"
|
|
279
|
+
id="demo"
|
|
280
|
+
class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
|
|
281
|
+
<div
|
|
282
|
+
resize="bottom"
|
|
283
|
+
class="background:lightgrey"></div>
|
|
284
|
+
</div>
|
|
285
285
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
286
|
+
<div
|
|
287
|
+
id="demo-preview"
|
|
288
|
+
class="position:relative overflow:auto background-color:white">
|
|
289
|
+
<div class="demopreview padding:20px"></div>
|
|
290
|
+
</div>
|
|
291
291
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
292
|
+
<div
|
|
293
|
+
class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
|
|
294
|
+
<a
|
|
295
|
+
class="margin-right:10px"
|
|
296
|
+
id="eye"
|
|
297
|
+
show="#eye-slash"
|
|
298
|
+
hide="#eye, #demo-preview"
|
|
299
|
+
toggle="code-height"
|
|
300
|
+
toggle-query="#demo-code"
|
|
301
|
+
><i
|
|
302
|
+
class="height:18px"
|
|
303
|
+
src="/assets/svg/eye.svg"></i
|
|
304
|
+
></a>
|
|
305
|
+
<a
|
|
306
|
+
class="margin-right:10px"
|
|
307
|
+
hidden
|
|
308
|
+
id="eye-slash"
|
|
309
|
+
show="#eye, #demo-preview"
|
|
310
|
+
hide="#eye-slash"
|
|
311
|
+
toggle="code-height"
|
|
312
|
+
toggle-query="#demo-code"
|
|
313
|
+
><i src="/assets/svg/eye-slash.svg"></i
|
|
314
|
+
></a>
|
|
315
|
+
<a
|
|
316
|
+
class="margin-right:10px"
|
|
317
|
+
id="code"
|
|
318
|
+
show="#code-slash"
|
|
319
|
+
hide="#code, #demo-code"
|
|
320
|
+
><i src="/assets/svg/code.svg"></i
|
|
321
|
+
></a>
|
|
322
|
+
<a
|
|
323
|
+
class="margin-right:10px"
|
|
324
|
+
hidden
|
|
325
|
+
id="code-slash"
|
|
326
|
+
show="#code, #demo-code"
|
|
327
|
+
hide="#code-slash"
|
|
328
|
+
><i
|
|
329
|
+
class="height:18px"
|
|
330
|
+
src="/assets/svg/code.svg"></i
|
|
331
|
+
></a>
|
|
332
|
+
<a
|
|
333
|
+
class="margin-right:5px"
|
|
334
|
+
fullscreen
|
|
335
|
+
fullscreen-query="#playground"></a>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<!-- End SandBox -->
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
<button
|
|
343
|
+
href="https://github.com/CoCreate-app/CoCreate-webpack/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
344
|
+
target="_blank"
|
|
345
|
+
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
346
|
+
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
347
|
+
</button>
|
|
348
|
+
</main>
|
|
349
|
+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
|
350
|
+
</body>
|
|
351
351
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/webpack",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.4.1",
|
|
4
4
|
"description": "A Webpack integration tool for CoCreate applications, enabling file watching, automated chunking, lazy loading, and file uploading. It leverages CoCreate.config for streamlined project builds and development workflows.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"webpack",
|
package/src/index.js
CHANGED
|
@@ -1,125 +1,194 @@
|
|
|
1
|
-
|
|
2
|
-
const
|
|
1
|
+
// Import 'fs' for file system operations and 'path' for path operations
|
|
2
|
+
const fs = require("fs");
|
|
3
|
+
const path = require("path");
|
|
3
4
|
|
|
4
|
-
|
|
5
|
+
// Import 'upload' function from CoCreate CLI to handle uploads
|
|
6
|
+
const upload = require("@cocreate/cli/src/commands/upload.js");
|
|
5
7
|
|
|
8
|
+
/**
|
|
9
|
+
* Class representing a Module Generator.
|
|
10
|
+
* Generates module files based on a configuration and applies them to the Webpack compiler.
|
|
11
|
+
*/
|
|
6
12
|
class ModuleGenerator {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Creates an instance of ModuleGenerator.
|
|
15
|
+
* @param {Object} modulesConfig - The configuration for the modules.
|
|
16
|
+
*/
|
|
17
|
+
constructor(modulesConfig) {
|
|
18
|
+
this.modulesConfig = modulesConfig;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Apply the module generation process to the Webpack compiler.
|
|
23
|
+
* @param {Object} compiler - The Webpack compiler instance.
|
|
24
|
+
*/
|
|
25
|
+
apply(compiler) {
|
|
26
|
+
let CoCreateConfig;
|
|
27
|
+
|
|
28
|
+
if (typeof this.modulesConfig === "object") {
|
|
29
|
+
CoCreateConfig = this.modulesConfig.config;
|
|
30
|
+
} else {
|
|
31
|
+
try {
|
|
32
|
+
CoCreateConfig = require(this.modulesConfig.configPath);
|
|
33
|
+
} catch (error) {
|
|
34
|
+
console.error("Error loading CoCreate.config.js:", error);
|
|
35
|
+
throw error; // Stop the compilation process if configuration is critical
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
let modulesGenerated = false;
|
|
40
|
+
|
|
41
|
+
compiler.hooks.beforeCompile.tapAsync(
|
|
42
|
+
"CoCreateLazyloader",
|
|
43
|
+
(params, callback) => {
|
|
44
|
+
if (modulesGenerated) callback();
|
|
45
|
+
else {
|
|
46
|
+
let outputPath =
|
|
47
|
+
this.modulesConfig.outputPath || "./modules.js"; // Default path for generated module.js
|
|
48
|
+
|
|
49
|
+
// Generate module content based on CoCreateConfig
|
|
50
|
+
let moduleContent = `import { dependency, lazyLoad } from '@cocreate/lazy-loader';\n\n`;
|
|
51
|
+
Object.entries(this.modulesConfig).forEach(
|
|
52
|
+
([moduleName, moduleInfo]) => {
|
|
53
|
+
if (
|
|
54
|
+
moduleName === "outputPath" ||
|
|
55
|
+
typeof moduleInfo !== "object"
|
|
56
|
+
)
|
|
57
|
+
return;
|
|
58
|
+
|
|
59
|
+
if (moduleInfo.selector) {
|
|
60
|
+
// Generate lazyLoad statements for modules with selectors
|
|
61
|
+
moduleInfo.selector =
|
|
62
|
+
moduleInfo.selector.replaceAll("'", '"');
|
|
63
|
+
moduleContent += `lazyLoad('${moduleName}', '${moduleInfo.selector}', () => import(/*webpackChunkName: "${moduleName}-chunk"*/ '${moduleInfo.import}'));\n`;
|
|
64
|
+
} else {
|
|
65
|
+
// Generate dependency statements for other modules
|
|
66
|
+
moduleContent += `dependency('${moduleName}', import(/*webpackChunkName: "${moduleName}-chunk"*/ '${moduleInfo.import}'));\n`;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
|
|
71
|
+
// Write the module content to the specified outputPath
|
|
72
|
+
fs.writeFile(outputPath, moduleContent, (err) => {
|
|
73
|
+
if (err) {
|
|
74
|
+
console.error(`Error writing ${outputPath}:`, err);
|
|
75
|
+
callback(err); // Handle errors in async hook
|
|
76
|
+
} else {
|
|
77
|
+
modulesGenerated = true;
|
|
78
|
+
console.log(
|
|
79
|
+
`${outputPath} generated successfully.`
|
|
80
|
+
);
|
|
81
|
+
callback(); // Proceed with compilation
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
}
|
|
59
88
|
}
|
|
60
89
|
|
|
90
|
+
/**
|
|
91
|
+
* Class to handle file uploads, particularly useful during watch mode.
|
|
92
|
+
*/
|
|
61
93
|
class FileUploader {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
94
|
+
/**
|
|
95
|
+
* Creates an instance of FileUploader.
|
|
96
|
+
* @param {Object} env - The environment variables.
|
|
97
|
+
* @param {Object} argv - The arguments provided.
|
|
98
|
+
*/
|
|
99
|
+
constructor(env, argv) {
|
|
100
|
+
this.env = env;
|
|
101
|
+
this.isWatching = false;
|
|
102
|
+
this.isWatch = argv.watch === true;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Apply the file uploader process to the Webpack compiler.
|
|
107
|
+
* @param {Object} compiler - The Webpack compiler instance.
|
|
108
|
+
*/
|
|
109
|
+
apply(compiler) {
|
|
110
|
+
if (this.isWatch) {
|
|
111
|
+
if (this.env.beforeCompilation) {
|
|
112
|
+
// Directly perform upload here
|
|
113
|
+
upload(process.cwd(), ["../", "-w"]);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
if (this.env.afterCompilation) {
|
|
117
|
+
compiler.hooks.emit.tapAsync(
|
|
118
|
+
"watchFiles",
|
|
119
|
+
(compilation, callback) => {
|
|
120
|
+
if (!this.isWatching) {
|
|
121
|
+
this.isWatching = true;
|
|
122
|
+
upload(process.cwd(), ["../", "-w"]);
|
|
123
|
+
}
|
|
124
|
+
callback();
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
87
130
|
}
|
|
88
131
|
|
|
89
|
-
|
|
132
|
+
/**
|
|
133
|
+
* Class responsible for creating symbolic links after the build process.
|
|
134
|
+
*/
|
|
90
135
|
class SymlinkCreator {
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
136
|
+
/**
|
|
137
|
+
* Creates an instance of SymlinkCreator.
|
|
138
|
+
* @param {Object} [options] - Optional configurations for symlink creation.
|
|
139
|
+
*/
|
|
140
|
+
constructor(options) {
|
|
141
|
+
// Store options if necessary, or just hard-code paths
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Apply the symlink creation process to the Webpack compiler.
|
|
146
|
+
* @param {Object} compiler - The Webpack compiler instance.
|
|
147
|
+
*/
|
|
148
|
+
apply(compiler) {
|
|
149
|
+
// Use compiler.hooks to tap into the Webpack build process
|
|
150
|
+
compiler.hooks.afterEmit.tap("SymlinkPlugin", (compilation) => {
|
|
151
|
+
// Perform symlink operations here
|
|
152
|
+
symlink("./dist", "../dist", "dir");
|
|
153
|
+
symlink(
|
|
154
|
+
"./node_modules/@cocreate/pwa/src/service-worker.js",
|
|
155
|
+
"../service-worker.js",
|
|
156
|
+
"file"
|
|
157
|
+
);
|
|
158
|
+
symlink(
|
|
159
|
+
"./node_modules/@cocreate/pwa/src/manifest.webmanifest",
|
|
160
|
+
"../manifest.webmanifest",
|
|
161
|
+
"file"
|
|
162
|
+
);
|
|
163
|
+
symlink(
|
|
164
|
+
"./node_modules/@cocreate/pwa/src/offline.html",
|
|
165
|
+
"../offline.html",
|
|
166
|
+
"file"
|
|
167
|
+
);
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
/**
|
|
171
|
+
* Function to create a symlink if the target exists and the destination does not.
|
|
172
|
+
* @param {string} target - Path to the target.
|
|
173
|
+
* @param {string} destination - Path to the destination.
|
|
174
|
+
* @param {string} option - Type of symlink ('file' or 'dir').
|
|
175
|
+
*/
|
|
176
|
+
function symlink(target, destination, option) {
|
|
177
|
+
if (fs.existsSync(target)) {
|
|
178
|
+
target = path.resolve(target);
|
|
179
|
+
|
|
180
|
+
if (!fs.existsSync(destination)) {
|
|
181
|
+
destination = path.resolve(destination);
|
|
182
|
+
|
|
183
|
+
fs.symlink(target, destination, option, (err) => {
|
|
184
|
+
if (err) console.log(err);
|
|
185
|
+
else console.log("symlink added: ", target);
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
}
|
|
123
191
|
}
|
|
124
192
|
|
|
193
|
+
// Export the defined classes so they can be used in other modules or configurations
|
|
125
194
|
module.exports = { ModuleGenerator, FileUploader, SymlinkCreator };
|