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

refactor: use babel for compiling client code #396

Merged
merged 1 commit into from May 13, 2019
Merged

refactor: use babel for compiling client code #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 15 additions & 0 deletions babel.config.js
View file
Open in desktop
Expand Up @@ -15,5 +15,20 @@ module.exports = (api) => {
},
],
],
overrides: [
{
test: '**/hmr/**/*.js',
presets: [
[
'@babel/preset-env',
{
targets: {
node: '0.12',
},
},
],
],
},
],
};
};
93 changes: 45 additions & 48 deletions src/hmr/hotModuleReplacement.js
View file
Open in desktop
@@ -1,36 +1,27 @@
/* global document, window */
/* eslint-env browser */
/*
eslint-disable
func-names,
no-var,
vars-on-top,
prefer-arrow-func,
prefer-rest-params,
prefer-arrow-callback,
prefer-template,
prefer-destructuring,
no-param-reassign,
no-console
no-console,
func-names
*/

var normalizeUrl = require('normalize-url');
const normalizeUrl = require('normalize-url');

var srcByModuleId = Object.create(null);
const srcByModuleId = Object.create(null);

var noDocument = typeof document === 'undefined';
const noDocument = typeof document === 'undefined';

var forEach = Array.prototype.forEach;
const { forEach } = Array.prototype;

function debounce(fn, time) {
var timeout = 0;
let timeout = 0;

// eslint-disable-next-line func-names
return function() {
var self = this;
var args = arguments;

const self = this;
// eslint-disable-next-line prefer-rest-params
var functionCall = function functionCall() {
const args = arguments;

const functionCall = function functionCall() {
return fn.apply(self, args);
};

Expand All @@ -42,19 +33,20 @@ function debounce(fn, time) {
function noop() {}

function getCurrentScriptUrl(moduleId) {
var src = srcByModuleId[moduleId];
let src = srcByModuleId[moduleId];

if (!src) {
if (document.currentScript) {
src = document.currentScript.src;
({ src } = document.currentScript);
} else {
var scripts = document.getElementsByTagName('script');
var lastScriptTag = scripts[scripts.length - 1];
const scripts = document.getElementsByTagName('script');
const lastScriptTag = scripts[scripts.length - 1];

if (lastScriptTag) {
src = lastScriptTag.src;
({ src } = lastScriptTag);
}
}

srcByModuleId[moduleId] = src;
}

Expand All @@ -63,8 +55,8 @@ function getCurrentScriptUrl(moduleId) {
return null;
}

var splitResult = src.split(/([^\\/]+)\.js$/);
var filename = splitResult && splitResult[1];
const splitResult = src.split(/([^\\/]+)\.js$/);
const filename = splitResult && splitResult[1];

if (!filename) {
return [src.replace('.js', '.css')];
Expand All @@ -74,11 +66,11 @@ function getCurrentScriptUrl(moduleId) {
return [src.replace('.js', '.css')];
}

return fileMap.split(',').map(function(mapRule) {
var reg = new RegExp(filename + '\\.js$', 'g');
return fileMap.split(',').map((mapRule) => {
const reg = new RegExp(`${filename}\\.js$`, 'g');

return normalizeUrl(
src.replace(reg, mapRule.replace(/{fileName}/g, filename) + '.css'),
src.replace(reg, `${mapRule.replace(/{fileName}/g, filename)}.css`),
{ stripWWW: false }
);
});
Expand All @@ -87,6 +79,7 @@ function getCurrentScriptUrl(moduleId) {

function updateCss(el, url) {
if (!url) {
// eslint-disable-next-line
url = el.href.split('?')[0];
}

Expand All @@ -104,34 +97,36 @@ function updateCss(el, url) {
return;
}

// eslint-disable-next-line no-param-reassign
el.visited = true;

var newEl = el.cloneNode(); // eslint-disable-line vars-on-top
const newEl = el.cloneNode();

newEl.isLoaded = false;

newEl.addEventListener('load', function() {
newEl.addEventListener('load', () => {
newEl.isLoaded = true;
el.parentNode.removeChild(el);
});

newEl.addEventListener('error', function() {
newEl.addEventListener('error', () => {
newEl.isLoaded = true;
el.parentNode.removeChild(el);
});

newEl.href = url + '?' + Date.now();
newEl.href = `${url}?${Date.now()}`;

el.parentNode.appendChild(newEl);
}

function getReloadUrl(href, src) {
var ret;
let ret;

// eslint-disable-next-line no-param-reassign
href = normalizeUrl(href, { stripWWW: false });

// eslint-disable-next-line array-callback-return
src.some(function(url) {
src.some((url) => {
if (href.indexOf(src) > -1) {
ret = url;
}
Expand All @@ -141,11 +136,11 @@ function getReloadUrl(href, src) {
}

function reloadStyle(src) {
var elements = document.querySelectorAll('link');
var loaded = false;
const elements = document.querySelectorAll('link');
let loaded = false;

forEach.call(elements, function(el) {
var url = getReloadUrl(el.href, src);
forEach.call(elements, (el) => {
const url = getReloadUrl(el.href, src);

if (!isUrlRequest(url)) {
return;
Expand All @@ -165,9 +160,9 @@ function reloadStyle(src) {
}

function reloadAll() {
var elements = document.querySelectorAll('link');
const elements = document.querySelectorAll('link');

forEach.call(elements, function(el) {
forEach.call(elements, (el) => {
if (el.visited === true) {
return;
}
Expand Down Expand Up @@ -200,27 +195,29 @@ function isUrlRequest(url) {
module.exports = function(moduleId, options) {
if (noDocument) {
console.log('no window.document found, will not HMR CSS');

return noop;
}

// eslint-disable-next-line vars-on-top
var getScriptSrc = getCurrentScriptUrl(moduleId);
const getScriptSrc = getCurrentScriptUrl(moduleId);

function update() {
var src = getScriptSrc(options.filename);

var reloaded = reloadStyle(src);
const src = getScriptSrc(options.filename);
const reloaded = reloadStyle(src);

if (options.locals) {
console.log('[HMR] Detected local css modules. Reload all css');

reloadAll();

return;
}

if (reloaded && !options.reloadAll) {
console.log('[HMR] css reload %s', src.join(' '));
} else {
console.log('[HMR] Reload all css');

reloadAll();
}
}
Expand Down