8000 Dev Exp improvements · meteor-vue/vue-meteor@d0fd2d5 · GitHub
[go: up one dir, main page]
Skip to content 8000

Commit d0fd2d5

Browse files
author
Guillaume Chau
committed
Dev Exp improvements
1 parent eff170a commit d0fd2d5

File tree

2 files changed

+27
-14
lines changed

2 files changed

+27
-14
lines changed

‎packages/vue-component-dev-client/client/dev-client.js

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,25 @@ import { ReactiveVar } from 'meteor/reactive-var'
88
import VueHot1 from './vue-hot'
99
import VueHot2 from './vue2-hot'
1010

11+
const tagStyle = 'padding: 2px 4px 1px; background: #326ABC; color: white; border-radius: 3px; font-weight: bold;'
12+
const infoStyle = 'font-style: italic; color: #326ABC;'
13+
1114
let VueHotReloadApi
1215
const vueVersion = parseInt(Vue.version.charAt(0))
1316

14-
console.log('[HMR] Vue', Vue.version)
17+
console.log('%cHRM%c You are using Vue %c' + Vue.version, tagStyle, 'color: #177D4F;', 'color: #177D4F; font-weight: bold;')
18+
19+
console.log('%cYou are currently in development mode. If the Hot-Module-Replacement system is enabled (`on` by default), the CSS will be injected to the page after the scripts are loaded. This may result in Flash Of Unstyled Contents. Those will not occur in production.', infoStyle)
20+
21+
console.log('%cMore information about the component compilation: https://github.com/meteor-vue/vue-meteor/tree/master/packages/vue-component', infoStyle)
22+
23+
console.log('%cDocumentation and Issues: https://github.com/meteor-vue/vue-meteor', infoStyle)
24+
1525
if (vueVersion === 1) {
1626
VueHotReloadApi = VueHot1
1727
} else if (vueVersion === 2) {
1828
VueHotReloadApi = VueHot2
29+
Vue.config.productionTip = false
1930
}
2031

2132
Vue.use(VueHotReloadApi)
@@ -42,14 +53,14 @@ Reload._reload = function (options) {
4253

4354
// Custom reload method
4455
function reload (options) {
45-
console.log('[HMR] Reload request received')
56+
console.log('%cHRM', tagStyle, 'Reload request received')
4657
if (_deferReload !== 0) {
4758
setTimeout(_reload, _deferReload)
48-
console.log(`[HMR] Client reload defered, will reload in ${_deferReload} ms`)
59+
console.log(`%cHRM`, tagStyle, `Client reload defered, will reload in ${_deferReload} ms`)
4960
} else if (_suppressNextReload) {
50-
console.log(`[HMR] Client version changed, you may need to reload the page`)
61+
console.log(`%cHRM%c ⥁ Client version changed, reload suppressed because of a recent HMR update. You may need to reload the page.`, tagStyle, 'color: #F36E00;')
5162
} else {
52-
console.log(`[HMR] Reloading app...`)
63+
console.log(`%cHRM`, tagStyle, `Reloading app...`)
5364
_reload.call(Reload, options)
5465
}
5566
_suppressNextReload = false
@@ -70,7 +81,7 @@ if (ClientVersions) {
7081
changed: checkNewVersionDocument,
7182
})
7283
} else {
73-
console.log('[HMR] ClientVersions collection is not available, the app may full reload.')
84+
console.warn('%cHRM', tagStyle, 'ClientVersions collection is not available, the app may full reload.')
7485
}
7586

7687
// Hack https://github.com/socketio/socket.io-c 10000 lient/issues/961
@@ -85,17 +96,19 @@ Meteor.startup(function () {
8596
// Dev client
8697
let devUrl = __meteor_runtime_config__.VUE_DEV_SERVER_URL
8798

88-
console.log('[HMR] Dev client URL', devUrl)
99+
console.log('%cHRM%c Dev server URL: %c' + devUrl, tagStyle, '', 'font-weight: bold;')
100+
101+
console.log(`%cIf you have issues connecting to the dev server, set the 'HMR_URL' env variable to the URL of the dev server displayed in the meteor console.`, infoStyle)
89102

90103
// NOTE: Socket lib don't allow mix HTTP and HTTPS servers URLs on client!
91104
let _socket = require('socket.io-client')(devUrl)
92105
window.__dev_client__ = _socket
93106

94107
_socket.on('connect', function () {
95-
console.log('[HMR] Dev client connected')
108+
console.log('%cHRM%c ⏺ Dev client connected', tagStyle, 'color: #177D4F;')
96109
})
97110
_socket.on('disconnect', function () {
98-
console.log('[HMR] Dev client disconnected')
111+
console.log('%cHRM%c ⏺ Dev client disconnected', tagStyle, 'color: #F36E00;')
99112
})
100113

101114
// JS
@@ -133,7 +146,7 @@ Meteor.startup(function () {
133146

134147
let needsReload = false
135148
if (!error) {
136-
console.log('[HMR] Reloading ' + path)
149+
console.log('%cHRM', tagStyle, 'Reloading ' + path)
137150
if (!result.default.render && !template) {
138151
error = true
139152
}
@@ -157,7 +170,7 @@ Meteor.startup(function () {
157170
// Template
158171
_socket.on('render', function ({hash, template, path}) {
159172
if (vueVersion === 2) {
160-
console.log('[HMR] Rerendering ' + path)
173+
console.log('%cHRM', tagStyle, 'Rerendering ' + path)
161174
let error = false
162175
try {
163176
var obj
@@ -192,7 +205,7 @@ Meteor.startup(function () {
192205
// Refresh
193206
VueHotReloadApi.updateWatchers()
194207
}
195-
console.log(`[HMR] Updated locale ${lang}`)
208+
console.log(`%cHRM`, tagStyle, `Updated locale ${lang}`)
196209
_suppressNextReload = true
197210
})
198211
_socket.on('langs.updated', function ({langs}) {
@@ -209,7 +222,7 @@ Meteor.startup(function () {
209222
} else {
210223
func = console.log
211224
}
212-
func(`[HMR] ${message}`)
225+
func(`%cHRM`, tagStyle, message)
213226
})
214227

215228
// Reg

‎packages/vue-component-dev-client/package.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
Package.describe({
22
name: 'akryum:vue-component-dev-client',
3-
version: '0.2.12',
3+
version: '0.3.0',
44
summary: 'Hot-reloading client for vue components',
55
git: 'https://github.com/Akryum/meteor-vue-component',
66
documentation: 'README.md',

0 commit comments

Comments
 (0)
0