@phun-ky/speccer 4.0.0 → 4.3.0
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 +31 -0
- package/README.md +63 -26
- package/package.json +81 -22
- package/speccer.css +308 -352
- package/speccer.js +1 -1647
- package/speccer.min.css +1 -1
- package/src/dissect.js +2 -2
- package/src/index.js +18 -13
- package/src/lib/resize.js +2 -2
- package/src/measure.js +2 -2
- package/src/spec.js +41 -41
- package/src/styles/anatomy.styl +274 -0
- package/src/styles/index.styl +68 -0
- package/src/styles/measure.styl +88 -0
- package/src/styles/spacing.styl +152 -0
- package/src/{typography.styl → styles/typography.styl} +13 -13
- package/src/typography.js +2 -2
- package/.eslintignore +0 -1
- package/dev/index.html +0 -472
- package/scripts/watcher.js +0 -125
- package/src/anatomy.styl +0 -358
- package/src/index.styl +0 -2
- package/src/speccer.styl +0 -162
package/dev/index.html
DELETED
|
@@ -1,472 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html class="ph" lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<title>@phun-ky/speccer</title>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<meta http-equiv="Content-Language" content="no" />
|
|
7
|
-
<meta name="robots" content="none" />
|
|
8
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
9
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
10
|
-
<meta name="application-name" content="@phun-ky/speccer" />
|
|
11
|
-
<script src="/reload/reload.js"></script>
|
|
12
|
-
</head>
|
|
13
|
-
<body class="ph">
|
|
14
|
-
<div
|
|
15
|
-
data-anatomy-section
|
|
16
|
-
class="ph"
|
|
17
|
-
style="
|
|
18
|
-
position: relative;
|
|
19
|
-
padding: 2rem;
|
|
20
|
-
display: flex;
|
|
21
|
-
justify-content: center;
|
|
22
|
-
align-items: center;
|
|
23
|
-
width: 100vw;
|
|
24
|
-
height: 100vh;
|
|
25
|
-
"
|
|
26
|
-
>
|
|
27
|
-
<div class="todo">
|
|
28
|
-
<section class="todoapp">
|
|
29
|
-
<header class="header">
|
|
30
|
-
<h1 data-speccer-typography="top">Speccer</h1>
|
|
31
|
-
<input autofocus="" class="new-todo" placeholder="What needs to be done?" />
|
|
32
|
-
</header>
|
|
33
|
-
<!-- This section should be hidden by default and shown when there are todos -->
|
|
34
|
-
<section class="main">
|
|
35
|
-
<input class="toggle-all" id="toggle-all" type="checkbox" />
|
|
36
|
-
<label for="toggle-all">Mark all as complete</label>
|
|
37
|
-
<ul class="todo-list" data-speccer-measure="height left">
|
|
38
|
-
<!-- These are here just to show the structure of the list items -->
|
|
39
|
-
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
|
|
40
|
-
<li class="completed">
|
|
41
|
-
<div class="view">
|
|
42
|
-
<input checked class="toggle" type="checkbox" /> <label>Taste JavaScript</label>
|
|
43
|
-
<button class="destroy"></button>
|
|
44
|
-
</div>
|
|
45
|
-
<input class="edit" value="Create a TodoMVC template" />
|
|
46
|
-
</li>
|
|
47
|
-
<li>
|
|
48
|
-
<div class="view">
|
|
49
|
-
<input class="toggle" type="checkbox" />
|
|
50
|
-
<label data-speccer-typography="right">Buy a unicorn</label> <button class="destroy"></button>
|
|
51
|
-
</div>
|
|
52
|
-
<input class="edit" value="Rule the web" />
|
|
53
|
-
</li>
|
|
54
|
-
</ul>
|
|
55
|
-
</section>
|
|
56
|
-
<!-- This footer should hidden by default and shown when there are todos -->
|
|
57
|
-
<footer class="footer">
|
|
58
|
-
<!-- This should be `0 items left` by default -->
|
|
59
|
-
<span class="todo-count" data-speccer-typography="bottom"><strong>0</strong> item left</span>
|
|
60
|
-
<!-- Remove this if you don't implement routing -->
|
|
61
|
-
<ul class="filters">
|
|
62
|
-
<li>
|
|
63
|
-
<a class="selected" href="#/">All</a>
|
|
64
|
-
</li>
|
|
65
|
-
<li>
|
|
66
|
-
<a href="#/active">Active</a>
|
|
67
|
-
</li>
|
|
68
|
-
<li>
|
|
69
|
-
<a href="#/completed">Completed</a>
|
|
70
|
-
</li>
|
|
71
|
-
</ul>
|
|
72
|
-
<!-- Hidden if no completed items are left ↓ -->
|
|
73
|
-
<button class="clear-completed">Clear completed</button>
|
|
74
|
-
</footer>
|
|
75
|
-
</section>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
<script src="/assets/speccer.js" type="text/javascript"></script>
|
|
79
|
-
<link async href="/assets/speccer.css" rel="stylesheet" type="text/css" />
|
|
80
|
-
<link
|
|
81
|
-
async
|
|
82
|
-
href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&display=swap&subset=latin-ext"
|
|
83
|
-
rel="stylesheet"
|
|
84
|
-
type="text/css"
|
|
85
|
-
/>
|
|
86
|
-
<link
|
|
87
|
-
async
|
|
88
|
-
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap&subset=latin-ext"
|
|
89
|
-
rel="stylesheet"
|
|
90
|
-
type="text/css"
|
|
91
|
-
/>
|
|
92
|
-
<style type="text/css">
|
|
93
|
-
.todo button {
|
|
94
|
-
margin: 0;
|
|
95
|
-
padding: 0;
|
|
96
|
-
border: 0;
|
|
97
|
-
background: none;
|
|
98
|
-
font-size: 100%;
|
|
99
|
-
vertical-align: baseline;
|
|
100
|
-
font-family: inherit;
|
|
101
|
-
font-weight: inherit;
|
|
102
|
-
color: inherit;
|
|
103
|
-
-webkit-appearance: none;
|
|
104
|
-
appearance: none;
|
|
105
|
-
-webkit-font-smoothing: antialiased;
|
|
106
|
-
-moz-osx-font-smoothing: grayscale;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.todo :focus {
|
|
110
|
-
outline: 0;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.todo .hidden {
|
|
114
|
-
display: none;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.todo .todoapp {
|
|
118
|
-
background: #fff;
|
|
119
|
-
margin: 130px 0 40px 0;
|
|
120
|
-
position: relative;
|
|
121
|
-
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.todoapp input::-webkit-input-placeholder {
|
|
125
|
-
font-style: italic;
|
|
126
|
-
font-weight: 300;
|
|
127
|
-
color: #e6e6e6;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.todoapp input::-moz-placeholder {
|
|
131
|
-
font-style: italic;
|
|
132
|
-
font-weight: 300;
|
|
133
|
-
color: #e6e6e6;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.todoapp input::input-placeholder {
|
|
137
|
-
font-style: italic;
|
|
138
|
-
font-weight: 300;
|
|
139
|
-
color: #e6e6e6;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.todoapp h1 {
|
|
143
|
-
position: absolute;
|
|
144
|
-
top: -155px;
|
|
145
|
-
width: 100%;
|
|
146
|
-
font-size: 100px;
|
|
147
|
-
font-weight: 100;
|
|
148
|
-
text-align: center;
|
|
149
|
-
color: rgba(175, 47, 47, 0.15);
|
|
150
|
-
-webkit-text-rendering: optimizeLegibility;
|
|
151
|
-
-moz-text-rendering: optimizeLegibility;
|
|
152
|
-
text-rendering: optimizeLegibility;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.new-todo,
|
|
156
|
-
.edit {
|
|
157
|
-
position: relative;
|
|
158
|
-
margin: 0;
|
|
159
|
-
width: 100%;
|
|
160
|
-
font-size: 24px;
|
|
161
|
-
font-family: inherit;
|
|
162
|
-
font-weight: inherit;
|
|
163
|
-
line-height: 1.4em;
|
|
164
|
-
border: 0;
|
|
165
|
-
color: inherit;
|
|
166
|
-
padding: 6px;
|
|
167
|
-
border: 1px solid #999;
|
|
168
|
-
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
|
169
|
-
box-sizing: border-box;
|
|
170
|
-
-webkit-font-smoothing: antialiased;
|
|
171
|
-
-moz-osx-font-smoothing: grayscale;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.new-todo {
|
|
175
|
-
padding: 16px 16px 16px 60px;
|
|
176
|
-
border: none;
|
|
177
|
-
background: rgba(0, 0, 0, 0.003);
|
|
178
|
-
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
.todo .main {
|
|
182
|
-
position: relative;
|
|
183
|
-
z-index: 2;
|
|
184
|
-
border-top: 1px solid #e6e6e6;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.toggle-all {
|
|
188
|
-
width: 1px;
|
|
189
|
-
height: 1px;
|
|
190
|
-
border: none; /* Mobile Safari */
|
|
191
|
-
opacity: 0;
|
|
192
|
-
position: absolute;
|
|
193
|
-
right: 100%;
|
|
194
|
-
bottom: 100%;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.toggle-all + label {
|
|
198
|
-
width: 60px;
|
|
199
|
-
height: 34px;
|
|
200
|
-
font-size: 0;
|
|
201
|
-
position: absolute;
|
|
202
|
-
top: -52px;
|
|
203
|
-
left: -13px;
|
|
204
|
-
-webkit-transform: rotate(90deg);
|
|
205
|
-
transform: rotate(90deg);
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.toggle-all + label:before {
|
|
209
|
-
content: '❯';
|
|
210
|
-
font-size: 22px;
|
|
211
|
-
color: #e6e6e6;
|
|
212
|
-
padding: 10px 27px 10px 27px;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
.toggle-all:checked + label:before {
|
|
216
|
-
color: #737373;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.todo-list {
|
|
220
|
-
margin: 0;
|
|
221
|
-
padding: 0;
|
|
222
|
-
list-style: none;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
.todo-list li {
|
|
226
|
-
position: relative;
|
|
227
|
-
font-size: 24px;
|
|
228
|
-
border-bottom: 1px solid #ededed;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
.todo-list li:last-child {
|
|
232
|
-
border-bottom: none;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
.todo-list li.editing {
|
|
236
|
-
border-bottom: none;
|
|
237
|
-
padding: 0;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.todo-list li.editing .edit {
|
|
241
|
-
display: block;
|
|
242
|
-
width: 506px;
|
|
243
|
-
padding: 12px 16px;
|
|
244
|
-
margin: 0 0 0 43px;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.todo-list li.editing .view {
|
|
248
|
-
display: none;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.todo-list li .toggle {
|
|
252
|
-
text-align: center;
|
|
253
|
-
width: 40px;
|
|
254
|
-
/* auto, since non-WebKit browsers doesn't support input styling */
|
|
255
|
-
height: auto;
|
|
256
|
-
position: absolute;
|
|
257
|
-
top: 0;
|
|
258
|
-
bottom: 0;
|
|
259
|
-
margin: auto 0;
|
|
260
|
-
border: none; /* Mobile Safari */
|
|
261
|
-
-webkit-appearance: none;
|
|
262
|
-
appearance: none;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
.todo-list li .toggle {
|
|
266
|
-
opacity: 0;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
.todo-list li .toggle + label {
|
|
270
|
-
/*
|
|
271
|
-
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
|
272
|
-
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
|
273
|
-
*/
|
|
274
|
-
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
|
275
|
-
background-repeat: no-repeat;
|
|
276
|
-
background-position: center left;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
.todo-list li .toggle:checked + label {
|
|
280
|
-
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.todo-list li label {
|
|
284
|
-
word-break: break-all;
|
|
285
|
-
padding: 15px 15px 15px 60px;
|
|
286
|
-
display: block;
|
|
287
|
-
line-height: 1.2;
|
|
288
|
-
transition: color 0.4s;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.todo-list li.completed label {
|
|
292
|
-
color: #d9d9d9;
|
|
293
|
-
text-decoration: line-through;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.todo-list li .destroy {
|
|
297
|
-
display: none;
|
|
298
|
-
position: absolute;
|
|
299
|
-
top: 0;
|
|
300
|
-
right: 10px;
|
|
301
|
-
bottom: 0;
|
|
302
|
-
width: 40px;
|
|
303
|
-
height: 40px;
|
|
304
|
-
margin: auto 0;
|
|
305
|
-
font-size: 30px;
|
|
306
|
-
color: #cc9a9a;
|
|
307
|
-
margin-bottom: 11px;
|
|
308
|
-
transition: color 0.2s ease-out;
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.todo-list li .destroy:hover {
|
|
312
|
-
color: #af5b5e;
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
.todo-list li .destroy:after {
|
|
316
|
-
content: '×';
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.todo-list li:hover .destroy {
|
|
320
|
-
display: block;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
.todo-list li .edit {
|
|
324
|
-
display: none;
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
.todo-list li.editing:last-child {
|
|
328
|
-
margin-bottom: -1px;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.footer {
|
|
332
|
-
color: #777;
|
|
333
|
-
padding: 10px 15px;
|
|
334
|
-
height: 20px;
|
|
335
|
-
text-align: center;
|
|
336
|
-
border-top: 1px solid #e6e6e6;
|
|
337
|
-
}
|
|
338
|
-
|
|
339
|
-
.footer:before {
|
|
340
|
-
content: '';
|
|
341
|
-
position: absolute;
|
|
342
|
-
right: 0;
|
|
343
|
-
bottom: 0;
|
|
344
|
-
left: 0;
|
|
345
|
-
height: 50px;
|
|
346
|
-
overflow: hidden;
|
|
347
|
-
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
|
348
|
-
0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
.todo-count {
|
|
352
|
-
float: left;
|
|
353
|
-
text-align: left;
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
.todo-count strong {
|
|
357
|
-
font-weight: 300;
|
|
358
|
-
}
|
|
359
|
-
|
|
360
|
-
.filters {
|
|
361
|
-
margin: 0;
|
|
362
|
-
padding: 0;
|
|
363
|
-
list-style: none;
|
|
364
|
-
position: absolute;
|
|
365
|
-
right: 0;
|
|
366
|
-
left: 0;
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
.filters li {
|
|
370
|
-
display: inline;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
.filters li a {
|
|
374
|
-
color: inherit;
|
|
375
|
-
margin: 3px;
|
|
376
|
-
padding: 3px 7px;
|
|
377
|
-
text-decoration: none;
|
|
378
|
-
border: 1px solid transparent;
|
|
379
|
-
border-radius: 3px;
|
|
380
|
-
}
|
|
381
|
-
|
|
382
|
-
.filters li a:hover {
|
|
383
|
-
border-color: rgba(175, 47, 47, 0.1);
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
.filters li a.selected {
|
|
387
|
-
border-color: rgba(175, 47, 47, 0.2);
|
|
388
|
-
}
|
|
389
|
-
|
|
390
|
-
.clear-completed,
|
|
391
|
-
html .clear-completed:active {
|
|
392
|
-
float: right;
|
|
393
|
-
position: relative;
|
|
394
|
-
line-height: 20px;
|
|
395
|
-
text-decoration: none;
|
|
396
|
-
cursor: pointer;
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
.clear-completed:hover {
|
|
400
|
-
text-decoration: underline;
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
.info {
|
|
404
|
-
margin: 65px auto 0;
|
|
405
|
-
color: #bfbfbf;
|
|
406
|
-
font-size: 10px;
|
|
407
|
-
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
408
|
-
text-align: center;
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
.info p {
|
|
412
|
-
line-height: 1;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
.info a {
|
|
416
|
-
color: inherit;
|
|
417
|
-
text-decoration: none;
|
|
418
|
-
font-weight: 400;
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.info a:hover {
|
|
422
|
-
text-decoration: underline;
|
|
423
|
-
}
|
|
424
|
-
|
|
425
|
-
/*
|
|
426
|
-
Hack to remove background from Mobile Safari.
|
|
427
|
-
Can't use it globally since it destroys checkboxes in Firefox
|
|
428
|
-
*/
|
|
429
|
-
@media screen and (-webkit-min-device-pixel-ratio: 0) {
|
|
430
|
-
.toggle-all,
|
|
431
|
-
.todo-list li .toggle {
|
|
432
|
-
background: none;
|
|
433
|
-
}
|
|
434
|
-
|
|
435
|
-
.todo-list li .toggle {
|
|
436
|
-
height: 40px;
|
|
437
|
-
}
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
@media (max-width: 430px) {
|
|
441
|
-
.footer {
|
|
442
|
-
height: 50px;
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
.filters {
|
|
446
|
-
bottom: 10px;
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
|
|
450
|
-
.speccerInfo {
|
|
451
|
-
padding: 2rem 4rem;
|
|
452
|
-
background-color: #cccccc;
|
|
453
|
-
margin-top: 5rem;
|
|
454
|
-
margin-bottom: 250px;
|
|
455
|
-
}
|
|
456
|
-
|
|
457
|
-
.todo {
|
|
458
|
-
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
459
|
-
line-height: 1.4em;
|
|
460
|
-
background: #f5f5f5;
|
|
461
|
-
color: #4d4d4d;
|
|
462
|
-
min-width: 30rem;
|
|
463
|
-
max-width: 40rem;
|
|
464
|
-
margin: 0 auto;
|
|
465
|
-
-webkit-font-smoothing: antialiased;
|
|
466
|
-
-moz-osx-font-smoothing: grayscale;
|
|
467
|
-
font-weight: 300;
|
|
468
|
-
margin-bottom: 100px;
|
|
469
|
-
}
|
|
470
|
-
</style>
|
|
471
|
-
</body>
|
|
472
|
-
</html>
|
package/scripts/watcher.js
DELETED
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
/* eslint no-console: 0 */
|
|
3
|
-
|
|
4
|
-
var path = require('path');
|
|
5
|
-
var express = require('express');
|
|
6
|
-
var bodyParser = require('body-parser');
|
|
7
|
-
var http = require('http');
|
|
8
|
-
var net = require('net');
|
|
9
|
-
var reload = require('reload');
|
|
10
|
-
var open = require('open');
|
|
11
|
-
|
|
12
|
-
const async = require('async');
|
|
13
|
-
const { spawn } = require('child_process');
|
|
14
|
-
|
|
15
|
-
var app = express();
|
|
16
|
-
|
|
17
|
-
const __www = path.join(__dirname, '../dev');
|
|
18
|
-
const __www_assets = path.join(__dirname, '../');
|
|
19
|
-
const src = path.join(__dirname, '../src');
|
|
20
|
-
|
|
21
|
-
app.use(
|
|
22
|
-
bodyParser.json({
|
|
23
|
-
type: ['application/manifest+json', 'application/json']
|
|
24
|
-
})
|
|
25
|
-
);
|
|
26
|
-
app.use(express.static(__www));
|
|
27
|
-
app.use('/assets', express.static(__www_assets));
|
|
28
|
-
const server = http.createServer(app);
|
|
29
|
-
|
|
30
|
-
var watcher = require('node-watch')(
|
|
31
|
-
[src, __www],
|
|
32
|
-
{ filter: f => !/node_modules/.test(f), recursive: true },
|
|
33
|
-
function () {}
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
watcher.on('ready', function () {
|
|
37
|
-
console.log('Ready to listen for changes');
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
var portrange = process.env.port || 45032;
|
|
41
|
-
|
|
42
|
-
function getPort(cb) {
|
|
43
|
-
var port = portrange;
|
|
44
|
-
portrange += 1;
|
|
45
|
-
|
|
46
|
-
var server = net.createServer();
|
|
47
|
-
server.listen(port, function () {
|
|
48
|
-
server.once('close', function () {
|
|
49
|
-
cb(port);
|
|
50
|
-
});
|
|
51
|
-
server.close();
|
|
52
|
-
});
|
|
53
|
-
server.on('error', function () {
|
|
54
|
-
getPort(cb);
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Reload code here
|
|
59
|
-
|
|
60
|
-
const reloadDev = port => {
|
|
61
|
-
reload(app, { port })
|
|
62
|
-
.then(function (reloadReturned) {
|
|
63
|
-
// reloadReturned is documented in the returns API in the README
|
|
64
|
-
|
|
65
|
-
getPort(startServer);
|
|
66
|
-
|
|
67
|
-
watcher.on('change', function (evt, name) {
|
|
68
|
-
console.log('Changed: ' + name);
|
|
69
|
-
|
|
70
|
-
async.series(
|
|
71
|
-
[
|
|
72
|
-
function (callback) {
|
|
73
|
-
spawn('npm', ['run', 'build'], { stdio: 'inherit' }).on('exit', function (error) {
|
|
74
|
-
if (error) {
|
|
75
|
-
console.error(error);
|
|
76
|
-
}
|
|
77
|
-
callback(null, 'one');
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
],
|
|
81
|
-
function (err) {
|
|
82
|
-
if (err) {
|
|
83
|
-
console.log(err);
|
|
84
|
-
}
|
|
85
|
-
reloadReturned.reload();
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
});
|
|
89
|
-
})
|
|
90
|
-
.catch(function (err) {
|
|
91
|
-
console.error('Reload could not start, could not start server/sample app', err);
|
|
92
|
-
});
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
getPort(reloadDev);
|
|
96
|
-
|
|
97
|
-
const startServer = function (port) {
|
|
98
|
-
port = process.env.port || port;
|
|
99
|
-
server
|
|
100
|
-
.listen(port, err => {
|
|
101
|
-
if (err) {
|
|
102
|
-
console.error(`Error: ${JSON.stringify(err)}`);
|
|
103
|
-
}
|
|
104
|
-
console.log(`🌎 Open http://localhost:${port} in a browser to view the app.`);
|
|
105
|
-
open(`http://localhost:${port}`);
|
|
106
|
-
})
|
|
107
|
-
.on('error', err => {
|
|
108
|
-
if (err.errno === 'EADDRINUSE') {
|
|
109
|
-
console.error(`Port already in use! Please use another port. Error: ${JSON.stringify(err)}`);
|
|
110
|
-
} else {
|
|
111
|
-
console.error(`Error: ${JSON.stringify(err)}`);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
process.exit(0);
|
|
115
|
-
});
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
process.on('SIGINT', function () {
|
|
119
|
-
watcher.close();
|
|
120
|
-
process.exit(1);
|
|
121
|
-
});
|
|
122
|
-
process.on('exit', function () {
|
|
123
|
-
watcher.close();
|
|
124
|
-
process.exit(1);
|
|
125
|
-
});
|