1 | var nanoraf = require('nanoraf')
|
2 | var pretty = require('prettier-bytes')
|
3 | var gzipSize = require('gzip-size')
|
4 |
|
5 | module.exports = createLogUI
|
6 |
|
7 | var files = [
|
8 | 'assets',
|
9 | 'documents',
|
10 | 'scripts',
|
11 | 'styles',
|
12 | 'manifest',
|
13 | 'service-worker'
|
14 | ]
|
15 |
|
16 | function createLogUI (compiler, state) {
|
17 | Object.assign(state, {
|
18 | count: compiler.metadata.count,
|
19 | files: {},
|
20 | size: 0
|
21 | })
|
22 |
|
23 | files.forEach(function (filename) {
|
24 | state.files[filename] = {
|
25 | size: 0,
|
26 | status: 'pending'
|
27 | }
|
28 | })
|
29 |
|
30 | var render = nanoraf(onrender, raf)
|
31 |
|
32 | compiler.on('change', function (nodeName, edgeName, nodeState) {
|
33 | var node = nodeState[nodeName][edgeName]
|
34 | var data = {
|
35 | size: 0,
|
36 | status: 'done'
|
37 | }
|
38 | state.files[nodeName] = data
|
39 |
|
40 |
|
41 |
|
42 | if (node.buffer.length) {
|
43 | gzipSize(node.buffer)
|
44 | .then(function (size) { data.size = size })
|
45 | .catch(function () { data.size = node.buffer.length })
|
46 | .then(render)
|
47 | } else {
|
48 | render()
|
49 | }
|
50 | })
|
51 |
|
52 | compiler.on('progress', render)
|
53 | compiler.on('sse-connect', render)
|
54 | compiler.on('sse-disconnect', render)
|
55 |
|
56 | var diff = new Differ(state)
|
57 |
|
58 | var renderRaf = nanoraf(onrender, raf)
|
59 | return renderRaf
|
60 |
|
61 | function onrender () {
|
62 | diff.update(state)
|
63 | }
|
64 | }
|
65 |
|
66 | function raf (cb) {
|
67 | setTimeout(cb, 50)
|
68 | }
|
69 |
|
70 | function view (state) {
|
71 | var ssrState = 'Pending'
|
72 | if (state.ssr) {
|
73 | if (state.ssr.success) ssrState = 'Success'
|
74 | else ssrState = 'Skipped - ' + state.ssr.error.message
|
75 | }
|
76 | var sseStatus = state.sse > 0 ? 'connected' : state.port ? 'ready' : 'starting'
|
77 | var httpStatus = state.port ? 'https://localhost:' + state.port : 'starting'
|
78 |
|
79 | var allFilesDone = true
|
80 | var size = Object.keys(state.files).reduce(function (num, filename) {
|
81 | var file = state.files[filename]
|
82 | if (file.status !== 'done') allFilesDone = false
|
83 | return num + file.size
|
84 | }, 0)
|
85 |
|
86 | var files = state.files
|
87 |
|
88 | var output = [
|
89 | `bankai: HTTP Status: ${httpStatus}`,
|
90 | `bankai: Live Reload: ${sseStatus}`,
|
91 | `bankai: Server Side Rendering: ${ssrState}`,
|
92 | `bankai: assets ${files.assets ? files.assets.status : 'starting'}`,
|
93 | `bankai: documents ${files.documents ? files.documents.status : 'starting'}`,
|
94 | `bankai: scripts ${files.scripts ? files.scripts.status : 'starting'}`,
|
95 | `bankai: styles ${files.styles ? files.styles.status : 'starting'}`,
|
96 | `bankai: manifest ${files.manifest ? files.manifest.status : 'starting'}`,
|
97 | `bankai: service-worker ${files['service-worker'] ? files['service-worker'].status : 'starting'}`,
|
98 | `bankai: Total File size: ${allFilesDone ? pretty(size).replace(' ', '') : 'pending'} `
|
99 | ]
|
100 | return output
|
101 | }
|
102 |
|
103 | function Differ (state) {
|
104 | var logLines = view(state)
|
105 | console.log(logLines.join('\n'))
|
106 | this.oldState = logLines
|
107 | }
|
108 |
|
109 | Differ.prototype.update = function (state) {
|
110 | var newState = view(state)
|
111 |
|
112 | this.oldState.forEach((line, i) => {
|
113 | if (line !== newState[i]) console.log(newState[i])
|
114 | })
|
115 |
|
116 | this.oldState = newState
|
117 | }
|