Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Print webpack console to browser console #1063

Merged
merged 35 commits into from
Sep 13, 2017
Merged

Print webpack console to browser console #1063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
f6f958c
copied status.js from overlay.js
Wernerson Jul 7, 2017
7c77b5c
first version
Wernerson Jul 7, 2017
d74e667
added example
Wernerson Jul 7, 2017
4223363
added checkif status is set
Wernerson Jul 8, 2017
4721cfa
changed description
Wernerson Jul 9, 2017
eca5338
fixed config schema
Wernerson Jul 9, 2017
4ca0a82
fixed validation testcase
Wernerson Jul 9, 2017
095332e
added status to title
Wernerson Jul 9, 2017
70db8dd
changed status div style
Wernerson Aug 9, 2017
6bb4fd8
added status window delay
Wernerson Aug 9, 2017
6d72910
made status work better with overlay
Wernerson Aug 9, 2017
68fb260
added status bar
Wernerson Aug 9, 2017
a31f46c
added status update
Wernerson Aug 9, 2017
a29b0c1
added progress updates on backend
Wernerson Aug 9, 2017
a96a5d2
changed progress bar color to webpack logo color
Wernerson Aug 9, 2017
e7c29d4
added second webpack logo color as comment
Wernerson Aug 9, 2017
34c840d
merged with local changes
Wernerson Aug 9, 2017
94502a0
added compilation status to title
Wernerson Aug 9, 2017
d98bbc0
ran prepublish, posttest and beautify
Wernerson Aug 9, 2017
bd64321
fixed codacy issues
Wernerson Aug 10, 2017
dccf845
fixed codacy issues
Wernerson Aug 10, 2017
9716cf9
Merge branch 'master' into feat/compile-popup
Wernerson Aug 10, 2017
c64be22
fixed merge error
Wernerson Aug 10, 2017
5fc1b51
console-progress v1
Wernerson Aug 31, 2017
44e8c72
Merge branch 'feat/console-progress'
Wernerson Aug 31, 2017
4219340
Merge remote-tracking branch 'webpack-dev-server/master' into feat/co…
Wernerson Aug 31, 2017
131b6da
Merge branch 'master' of https://github.com/webpack/webpack-dev-server
Wernerson Sep 2, 2017
8c8c229
fixed little bugs
Wernerson Sep 2, 2017
27cb246
fixed lint errrors (LF -> CRLF)
Wernerson Sep 2, 2017
6cb0f62
Merge branch 'master' into feat/console-progress
Wernerson Sep 6, 2017
068559b
Merge branch 'master' into feat/console-progress
Wernerson Sep 6, 2017
2c68d7a
Merge branch 'master' into feat/console-progress
Wernerson Sep 6, 2017
1978919
load plugin only if progress is enabled
Wernerson Sep 12, 2017
aab052d
linted Server.js
Wernerson Sep 12, 2017
a0fc7ad
Merge branch 'master' into feat/console-progress
Wernerson Sep 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 10 additions & 1 deletion client/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function getCurrentScriptSource() {
const currentScript = scriptElements[scriptElements.length - 1];
if (currentScript) { return currentScript.getAttribute('src'); }
// Fail as there was no script to use.
throw new Error('[WDS] Failed to get current script source');
throw new Error('[WDS] Failed to get current script source.');
}

let urlParts;
Expand Down Expand Up @@ -47,6 +47,7 @@ let initial = true;
let currentHash = '';
let useWarningOverlay = false;
let useErrorOverlay = false;
let useProgress = false;

const INFO = 'info';
const WARNING = 'warning';
Expand Down Expand Up @@ -122,6 +123,14 @@ const onSocketMsg = {
}
}
},
progress(progress) {
if (typeof document !== 'undefined') {
useProgress = progress;
}
},
'progress-update': function progressUpdate(data) {
if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this super spammy?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

given that it's an opt-in and the browser console doesn't have control characters, I don't believe it is.

},
ok() {
sendMsg('Ok');
if (useWarningOverlay || useErrorOverlay) overlay.clear();
Expand Down
11 changes: 11 additions & 0 deletions examples/progress/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Status

```shell
node ../../bin/webpack-dev-server.js --open
```

## What should happen

The script should open the browser and show a heading with "Example: progress".

In `app.js`, change the text and save. You should see the compilation progress in the browser console.
5 changes: 5 additions & 0 deletions examples/progress/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
'use strict';

// Change the following line and save to see the compilation status

document.write('Change me to see compilation progress in console...');
10 changes: 10 additions & 0 deletions examples/progress/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Progress example</title>
<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>Example: progress</h1>
</body>
</html>
9 changes: 9 additions & 0 deletions examples/progress/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
'use strict';

module.exports = {
context: __dirname,
entry: './app.js',
devServer: {
progress: true
}
};
12 changes: 12 additions & 0 deletions lib/Server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ function Server(compiler, options) {
this.headers = options.headers;
this.clientLogLevel = options.clientLogLevel;
this.clientOverlay = options.overlay;
this.progress = options.progress;
this.disableHostCheck = !!options.disableHostCheck;
this.publicHost = options.public;
this.allowedHosts = options.allowedHosts;
Expand All @@ -52,6 +53,15 @@ function Server(compiler, options) {
const invalidPlugin = () => {
this.sockWrite(this.sockets, 'invalid');
};
if (this.progress) {
const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
percent = Math.floor(percent * 100);
if (percent === 100) msg = 'Compilation competed';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compilation competed -> Compilation completed

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll clean up that typo in a bit

if (addInfo) msg = `${msg} (${addInfo})`;
this.sockWrite(this.sockets, 'progress-update', { percent, msg });
});
compiler.apply(progressPlugin);
}
compiler.plugin('compile', invalidPlugin);
compiler.plugin('invalid', invalidPlugin);
compiler.plugin('done', (stats) => {
Expand Down Expand Up @@ -563,6 +573,8 @@ Server.prototype.listen = function (port, hostname, fn) {

if (this.clientLogLevel) { this.sockWrite([conn], 'log-level', this.clientLogLevel); }

if (this.progress) { this.sockWrite([conn], 'progress', this.progress); }

if (this.clientOverlay) { this.sockWrite([conn], 'overlay', this.clientOverlay); }

if (this.hot) this.sockWrite([conn], 'hot');
Expand Down
8 changes: 8 additions & 0 deletions lib/optionsSchema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,14 @@
}
]
},
"progress": {
"description": "Shows compilation progress in browser console.",
"anyOf": [
{
"type": "boolean"
}
]
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

"progress": {
  "description": "Shows compilation progress in browser console.",
  "type": "boolean"
 },

"key": {
"description": "The contents of a SSL key.",
"anyOf": [
Expand Down
2 changes: 1 addition & 1 deletion test/Validation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('Validation', () => {
message: [
" - configuration has an unknown property 'asdf'. These properties are valid:",
' object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, ' +
'watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
'watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
'inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, ' +
'compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, ' +
'noInfo?, quiet?, serverSideRender?, index?, log?, warn? }'
Expand Down