forked from external-repos/squoosh
Compare commits
18 Commits
css-inlini
...
prerenderi
| Author | SHA1 | Date | |
|---|---|---|---|
|
dbf38e5a44 | ||
|
e84d2dc7ee | ||
|
|
81aaadbabf | ||
|
|
311d0524db | ||
|
540b3c8154 | ||
|
|
06642fd047 | ||
|
|
058cce1d49 | ||
|
|
2078b57dae | ||
|
|
11bebfc836 | ||
|
|
dec93a724f | ||
|
|
411614b731 | ||
|
|
896d267de5 | ||
|
|
e0c59577a4 | ||
|
|
5936c57a82 | ||
|
|
3ba0a5a22a | ||
|
|
be8fae10f8 | ||
|
|
b911e960a8 | ||
|
|
718443de30 |
4
.babelrc
4
.babelrc
@@ -4,7 +4,7 @@
|
||||
"env",
|
||||
{
|
||||
"loose": true,
|
||||
"uglify": true,
|
||||
"uglify": false,
|
||||
"modules": false,
|
||||
"targets": {
|
||||
"browsers": "last 2 versions"
|
||||
@@ -17,10 +17,8 @@
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"syntax-dynamic-import",
|
||||
"transform-decorators-legacy",
|
||||
"transform-class-properties",
|
||||
"transform-object-rest-spread",
|
||||
"transform-react-constant-elements",
|
||||
"transform-react-remove-prop-types",
|
||||
[
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
||||
node_modules
|
||||
/build
|
||||
/*.log
|
||||
*.scss.d.ts
|
||||
|
||||
@@ -1,322 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const { promisify } = require('util');
|
||||
const path = require('path');
|
||||
const parse5 = require('parse5');
|
||||
const nwmatcher = require('nwmatcher');
|
||||
const css = require('css');
|
||||
const prettyBytes = require('pretty-bytes');
|
||||
|
||||
const readFile = promisify(fs.readFile);
|
||||
|
||||
const treeAdapter = parse5.treeAdapters.htmlparser2;
|
||||
|
||||
const PLUGIN_NAME = 'critters-webpack-plugin';
|
||||
|
||||
const PARSE5_OPTS = {
|
||||
treeAdapter
|
||||
};
|
||||
|
||||
/** Critters: Webpack Plugin Edition!
|
||||
* @class
|
||||
* @param {Object} options
|
||||
* @param {Boolean} [options.external=true] Fetch and inline critical styles from external stylesheets
|
||||
* @param {Boolean} [options.async=false] Convert critical-inlined external stylesheets to load asynchronously (via link rel="preload" - see https://filamentgroup.com/lab/async-css.html)
|
||||
* @param {Boolean} [options.preload=false] (requires `async` option) Append a new <link rel="stylesheet"> into <body> instead of swapping the preload's rel attribute
|
||||
* @param {Boolean} [options.compress=true] Compress resulting critical CSS
|
||||
*/
|
||||
module.exports = class CrittersWebpackPlugin {
|
||||
constructor (options) {
|
||||
this.options = options || {};
|
||||
this.urlFilter = this.options.filter;
|
||||
if (this.urlFilter instanceof RegExp) {
|
||||
this.urlFilter = this.urlFilter.test.bind(this.urlFilter);
|
||||
}
|
||||
}
|
||||
|
||||
/** Invoked by Webpack during plugin initialization */
|
||||
apply (compiler) {
|
||||
const outputPath = compiler.options.output.path;
|
||||
|
||||
// hook into the compiler to get a Compilation instance...
|
||||
compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
|
||||
// ... which is how we get an "after" hook into html-webpack-plugin's HTML generation.
|
||||
compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(PLUGIN_NAME, (htmlPluginData, callback) => {
|
||||
// Parse the generated HTML in a DOM we can mutate
|
||||
const document = parse5.parse(htmlPluginData.html, PARSE5_OPTS);
|
||||
makeDomInteractive(document);
|
||||
|
||||
let externalStylesProcessed = Promise.resolve();
|
||||
|
||||
// `external:false` skips processing of external sheets
|
||||
if (this.options.external !== false) {
|
||||
const externalSheets = document.querySelectorAll('link[rel="stylesheet"]');
|
||||
externalStylesProcessed = Promise.all(externalSheets.map(
|
||||
link => this.embedLinkedStylesheet(link, compilation, outputPath)
|
||||
));
|
||||
}
|
||||
|
||||
externalStylesProcessed
|
||||
.then(() => {
|
||||
// go through all the style tags in the document and reduce them to only critical CSS
|
||||
const styles = document.querySelectorAll('style');
|
||||
return Promise.all(styles.map(style => this.processStyle(style, document)));
|
||||
})
|
||||
.then(() => {
|
||||
// serialize the document back to HTML and we're done
|
||||
const html = parse5.serialize(document, PARSE5_OPTS);
|
||||
callback(null, { html });
|
||||
})
|
||||
.catch(callback);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/** Inline the target stylesheet referred to by a <link rel="stylesheet"> (assuming it passes `options.filter`) */
|
||||
embedLinkedStylesheet (link, compilation, outputPath) {
|
||||
const href = link.getAttribute('href');
|
||||
const document = link.ownerDocument;
|
||||
|
||||
// skip filtered resources, or network resources if no filter is provided
|
||||
if (this.urlFilter ? this.urlFilter(href) : href.match(/^(https?:)?\/\//)) return Promise.resolve();
|
||||
|
||||
// path on disk
|
||||
const filename = path.resolve(outputPath, href.replace(/^\//, ''));
|
||||
|
||||
// try to find a matching asset by filename in webpack's output (not yet written to disk)
|
||||
const asset = compilation.assets[path.relative(outputPath, filename).replace(/^\.\//, '')];
|
||||
|
||||
// wait for a disk read if we had to go to disk
|
||||
const promise = asset ? Promise.resolve(asset.source()) : readFile(filename, 'utf8');
|
||||
return promise.then(sheet => {
|
||||
// the reduced critical CSS gets injected into a new <style> tag
|
||||
const style = document.createElement('style');
|
||||
style.appendChild(document.createTextNode(sheet));
|
||||
link.parentNode.insertBefore(style, link.nextSibling);
|
||||
|
||||
// drop a reference to the original URL onto the tag (used for reporting to console later)
|
||||
style.$$name = href;
|
||||
|
||||
// the `async` option changes any critical'd <link rel="stylesheet"> tags to async-loaded equivalents
|
||||
if (this.options.async) {
|
||||
link.setAttribute('rel', 'preload');
|
||||
link.setAttribute('as', 'style');
|
||||
if (this.options.preload) {
|
||||
const bodyLink = document.createElement('link');
|
||||
bodyLink.setAttribute('rel', 'stylesheet');
|
||||
bodyLink.setAttribute('href', href);
|
||||
document.body.appendChild(bodyLink);
|
||||
} else {
|
||||
link.setAttribute('onload', "this.rel='stylesheet'");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Parse the stylesheet within a <style> element, then reduce it to contain only rules used by the document. */
|
||||
processStyle (style) {
|
||||
const done = Promise.resolve();
|
||||
const document = style.ownerDocument;
|
||||
|
||||
// basically `.textContent`
|
||||
let sheet = style.childNodes.length > 0 && style.childNodes.map(node => node.nodeValue).join('\n');
|
||||
|
||||
// store a reference to the previous serialized stylesheet for reporting stats
|
||||
const before = sheet;
|
||||
|
||||
// Skip empty stylesheets
|
||||
if (!sheet) return done;
|
||||
|
||||
const ast = css.parse(sheet);
|
||||
|
||||
// Walk all CSS rules, transforming unused rules to comments (which get removed)
|
||||
visit(ast, rule => {
|
||||
if (rule.type === 'rule') {
|
||||
// Filter the selector list down to only those matche
|
||||
rule.selectors = rule.selectors.filter(sel => {
|
||||
// Strip pseudo-elements and pseudo-classes, since we only care that their associated elements exist.
|
||||
// This means any selector for a pseudo-element or having a pseudo-class will be inlined if the rest of the selector matches.
|
||||
sel = sel.replace(/::?(?:[a-z-]+)([.[#~&^:*]|\s|\n|$)/gi, '$1');
|
||||
return document.querySelector(sel, document) != null;
|
||||
});
|
||||
// If there are no matched selectors, remove the rule:
|
||||
if (rule.selectors.length === 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// If there are no remaining rules, remove the whole rule.
|
||||
return !rule.rules || rule.rules.length !== 0;
|
||||
});
|
||||
|
||||
sheet = css.stringify(ast, { compress: this.options.compress !== false });
|
||||
|
||||
return done.then(() => {
|
||||
// If all rules were removed, get rid of the style element entirely
|
||||
if (sheet.trim().length === 0) {
|
||||
sheet.parentNode.removeChild(sheet);
|
||||
} else {
|
||||
// replace the inline stylesheet with its critical'd counterpart
|
||||
while (style.lastChild) {
|
||||
style.removeChild(style.lastChild);
|
||||
}
|
||||
style.appendChild(document.createTextNode(sheet));
|
||||
}
|
||||
|
||||
// output some stats
|
||||
const name = style.$$name ? style.$$name.replace(/^\//, '') : 'inline CSS';
|
||||
const percent = (before.length - sheet.length) / before.length * 100 | 0;
|
||||
console.log('\u001b[32mCritters: inlined ' + prettyBytes(sheet.length) + ' (' + percent + '% of original ' + prettyBytes(before.length) + ') of ' + name + '.\u001b[39m');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** Recursively walk all rules in a stylesheet.
|
||||
* The iterator can explicitly return `false` to remove the current node.
|
||||
*/
|
||||
function visit (node, fn) {
|
||||
if (node.stylesheet) return visit(node.stylesheet, fn);
|
||||
|
||||
node.rules = node.rules.filter(rule => {
|
||||
if (rule.rules) {
|
||||
visit(rule, fn);
|
||||
}
|
||||
return fn(rule) !== false;
|
||||
});
|
||||
}
|
||||
|
||||
/** Enhance an htmlparser2-style DOM with basic manipulation methods. */
|
||||
function makeDomInteractive (document) {
|
||||
defineProperties(document, DocumentExtensions);
|
||||
// Find the first <html> element within the document
|
||||
// document.documentElement = document.childNodes.filter( child => String(child.tagName).toLowerCase()==='html' )[0];
|
||||
|
||||
// Extend Element.prototype with DOM manipulation methods.
|
||||
// Note: document.$$scratchElement is also used by createTextNode()
|
||||
const scratch = document.$$scratchElement = document.createElement('div');
|
||||
const elementProto = Object.getPrototypeOf(scratch);
|
||||
defineProperties(elementProto, ElementExtensions);
|
||||
elementProto.ownerDocument = document;
|
||||
|
||||
// nwmatcher is a selector engine that happens to work with Parse5's htmlparser2 DOM (they form the base of jsdom).
|
||||
// It is exposed to the document so that it can be used within Element.prototype methods.
|
||||
document.$match = nwmatcher({ document });
|
||||
document.$match.configure({
|
||||
CACHING: false,
|
||||
USE_QSAPI: false,
|
||||
USE_HTML5: false
|
||||
});
|
||||
}
|
||||
|
||||
/** Essentially Object.defineProperties() except any functions are assigned as values rather than descriptors. */
|
||||
function defineProperties (obj, properties) {
|
||||
for (const i in properties) {
|
||||
const value = properties[i];
|
||||
Object.defineProperty(obj, i, typeof value === 'function' ? { value } : value);
|
||||
}
|
||||
}
|
||||
|
||||
/** {document,Element}.getElementsByTagName() is the only traversal method required by nwmatcher.
|
||||
* Note: if perf issues arise, 2 faster but more verbose implementations are benchmarked here:
|
||||
* https://esbench.com/bench/5ac3b647f2949800a0f619e1
|
||||
*/
|
||||
function getElementsByTagName (tagName) {
|
||||
// Only return Element/Document nodes
|
||||
if ((this.nodeType !== 1 && this.nodeType !== 9) || this.type === 'directive') return [];
|
||||
return Array.prototype.concat.apply(
|
||||
// Add current element if it matches tag
|
||||
(tagName === '*' || (this.tagName && (this.tagName === tagName || this.nodeName === tagName.toUpperCase()))) ? [this] : [],
|
||||
// Check children recursively
|
||||
this.children.map(child => getElementsByTagName.call(child, tagName))
|
||||
);
|
||||
}
|
||||
|
||||
/** Methods and descriptors to mix into Element.prototype */
|
||||
const ElementExtensions = {
|
||||
nodeName: {
|
||||
get () {
|
||||
return this.tagName.toUpperCase();
|
||||
}
|
||||
},
|
||||
insertBefore (child, referenceNode) {
|
||||
if (!referenceNode) return this.appendChild(child);
|
||||
treeAdapter.insertBefore(this, child, referenceNode);
|
||||
return child;
|
||||
},
|
||||
appendChild (child) {
|
||||
treeAdapter.appendChild(this, child);
|
||||
return child;
|
||||
},
|
||||
removeChild (child) {
|
||||
treeAdapter.detachNode(child);
|
||||
},
|
||||
setAttribute (name, value) {
|
||||
if (this.attribs == null) this.attribs = {};
|
||||
if (value == null) value = '';
|
||||
this.attribs[name] = value;
|
||||
},
|
||||
removeAttribute (name) {
|
||||
if (this.attribs != null) {
|
||||
delete this.attribs[name];
|
||||
}
|
||||
},
|
||||
getAttribute (name) {
|
||||
return this.attribs != null && this.attribs[name];
|
||||
},
|
||||
hasAttribute (name) {
|
||||
return this.attribs != null && this.attribs[name] != null;
|
||||
},
|
||||
getAttributeNode (name) {
|
||||
const value = this.getAttribute(name);
|
||||
if (value != null) return { specified: true, value };
|
||||
},
|
||||
getElementsByTagName
|
||||
};
|
||||
|
||||
/** Methods and descriptors to mix into the global document instance */
|
||||
const DocumentExtensions = {
|
||||
// document is just an Element in htmlparser2, giving it a nodeType of ELEMENT_NODE.
|
||||
// nwmatcher requires that it at least report a correct nodeType of DOCUMENT_NODE.
|
||||
nodeType: {
|
||||
get () {
|
||||
return 9;
|
||||
}
|
||||
},
|
||||
nodeName: {
|
||||
get () {
|
||||
return '#document';
|
||||
}
|
||||
},
|
||||
documentElement: {
|
||||
get () {
|
||||
// Find the first <html> element within the document
|
||||
return this.childNodes.filter(child => String(child.tagName).toLowerCase() === 'html')[0];
|
||||
}
|
||||
},
|
||||
body: {
|
||||
get () {
|
||||
return this.querySelector('body');
|
||||
}
|
||||
},
|
||||
createElement (name) {
|
||||
return treeAdapter.createElement(name, null, []);
|
||||
},
|
||||
createTextNode (text) {
|
||||
// there is no dedicated createTextNode equivalent in htmlparser2's DOM, so
|
||||
// we have to insert Text and then remove and return the resulting Text node.
|
||||
const scratch = this.$$scratchElement;
|
||||
treeAdapter.insertText(scratch, text);
|
||||
const node = scratch.lastChild;
|
||||
treeAdapter.detachNode(node);
|
||||
return node;
|
||||
},
|
||||
querySelector (sel) {
|
||||
return this.$match.first(sel, this.documentElement);
|
||||
},
|
||||
querySelectorAll (sel) {
|
||||
return this.$match.select(sel, this.documentElement);
|
||||
},
|
||||
getElementsByTagName,
|
||||
// nwmatcher uses inexistence of `document.addEventListener` to detect IE:
|
||||
// https://github.com/dperini/nwmatcher/blob/3edb471e12ce7f7d46dc1606c7f659ff45675a29/src/nwmatcher.js#L353
|
||||
addEventListener: Object
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
const path = require('path');
|
||||
const vm = require('vm');
|
||||
|
||||
module.exports = function (content) {
|
||||
const jsdom = require('jsdom');
|
||||
const preact = require('preact');
|
||||
const renderToString = require('preact-render-to-string');
|
||||
|
||||
this.cacheable && this.cacheable();
|
||||
|
||||
const callback = this.async();
|
||||
|
||||
// const dom = new jsdom.JSDOM(`<!DOCTYPE html><html><head></head><body></body></html>`, {
|
||||
const dom = new jsdom.JSDOM(content, {
|
||||
includeNodeLocations: false,
|
||||
runScripts: 'outside-only'
|
||||
});
|
||||
const { window } = dom;
|
||||
const { document } = window;
|
||||
|
||||
// console.log(content);
|
||||
|
||||
const root = document.getElementById('app');
|
||||
this.loadModule(path.join(__dirname, 'client-boot.js'), (err, source) => {
|
||||
if (err) return callback(err);
|
||||
|
||||
console.log(source);
|
||||
|
||||
let mod = eval(source);
|
||||
let props = {};
|
||||
// console.log(mod);
|
||||
let vnode = preact.createElement(mod, props);
|
||||
let frag = document.createElement('div');
|
||||
frag.innerHTML = renderToString(vnode);
|
||||
root.parentNode.replaceChild(frag.firstChild, root);
|
||||
|
||||
let html = dom.serialize();
|
||||
callback(null, html);
|
||||
// return html = `module.exports = ${JSON.stringify(html)}`;
|
||||
// return 'module.exports = ' + JSON.stringify(content).replace(/\{\{PRERENDER\}\}/gi, `" + require("preact-render-to-string")(require("app-entry-point")) + "`);
|
||||
});
|
||||
|
||||
// global.window = global;
|
||||
// global.document = {};
|
||||
// return 'module.exports = ' + JSON.stringify(content).replace(/\{\{PRERENDER\}\}/gi, `" + require("preact-render-to-string")(require("app-entry-point")) + "`);
|
||||
|
||||
/*
|
||||
let callback = this.async();
|
||||
|
||||
let parts = content.split(/\{\{prerender\}\}/gi);
|
||||
|
||||
if (parts.length<2) {
|
||||
// callback(null, `module.exports = ${JSON.stringify(content)}`);
|
||||
callback(null, content);
|
||||
return;
|
||||
}
|
||||
|
||||
// let html = `
|
||||
// window = {};
|
||||
// module.exports = ${JSON.stringify(parts[0])} + require("preact-render-to-string")(require("app-entry-point")) + ${JSON.stringify(parts[1])}`;
|
||||
let html = `module.exports = ${JSON.stringify(parts[0])} + require("preact-render-to-string")(require("app-entry-point")) + ${JSON.stringify(parts[1])}`;
|
||||
callback(null, html);
|
||||
*/
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
let path = require('path');
|
||||
let preact = require('preact');
|
||||
let renderToString = require('preact-render-to-string');
|
||||
|
||||
let appPath = path.join(__dirname, '../src/index');
|
||||
|
||||
module.exports = function(options) {
|
||||
options = options || {};
|
||||
let url = typeof options==='string' ? options : options.url;
|
||||
global.history = {};
|
||||
global.location = { href: url, pathname: url };
|
||||
|
||||
// let app = require('app-entry-point');
|
||||
let app = require(appPath);
|
||||
|
||||
let html = renderToString(preact.h(app, { url }));
|
||||
console.log(html);
|
||||
|
||||
return html;
|
||||
};
|
||||
1418
package-lock.json
generated
1418
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@@ -41,12 +41,9 @@
|
||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.13",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-register": "^6.26.0",
|
||||
"chalk": "^2.3.2",
|
||||
"clean-webpack-plugin": "^0.1.19",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"css": "^2.2.1",
|
||||
"css-loader": "^0.28.11",
|
||||
"ejs-loader": "^0.3.1",
|
||||
"eslint": "^4.18.2",
|
||||
"eslint-config-standard": "^11.0.0",
|
||||
"eslint-config-standard-jsx": "^5.0.0",
|
||||
@@ -55,19 +52,14 @@
|
||||
"eslint-plugin-promise": "^3.7.0",
|
||||
"eslint-plugin-react": "^7.7.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"extract-text-webpack-plugin": "^4.0.0-beta.0",
|
||||
"fork-ts-checker-notifier-webpack-plugin": "^0.4.0",
|
||||
"fork-ts-checker-webpack-plugin": "^0.4.1",
|
||||
"html-webpack-plugin": "^3.0.6",
|
||||
"if-env": "^1.0.4",
|
||||
"jsdom": "^11.6.2",
|
||||
"loader-utils": "^1.1.0",
|
||||
"mini-css-extract-plugin": "^0.3.0",
|
||||
"node-sass": "^4.7.2",
|
||||
"nwmatcher": "^1.4.4",
|
||||
"parse5": "^4.0.0",
|
||||
"preact-render-to-string": "^3.7.0",
|
||||
"preload-webpack-plugin": "github:GoogleChromeLabs/preload-webpack-plugin",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.0",
|
||||
"progress-bar-webpack-plugin": "^1.11.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"sass-loader": "^6.0.7",
|
||||
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||
"source-map-loader": "^0.2.3",
|
||||
@@ -77,14 +69,12 @@
|
||||
"tslint-config-semistandard": "^7.0.0",
|
||||
"tslint-react": "^3.5.1",
|
||||
"typescript": "^2.7.2",
|
||||
"typescript-loader": "^1.1.3",
|
||||
"typings-for-css-modules-loader": "^1.7.0",
|
||||
"webpack": "^4.3.0",
|
||||
"webpack-bundle-analyzer": "^2.11.1",
|
||||
"webpack-cli": "^2.0.13",
|
||||
"webpack-dev-server": "^3.1.1",
|
||||
"webpack-plugin-replace": "^1.1.1",
|
||||
"workbox-webpack-plugin": "^3.0.1"
|
||||
"webpack-plugin-replace": "^1.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
|
||||
@@ -1,41 +1,16 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { When, bind } from '../../lib/util';
|
||||
import Fab from '../fab';
|
||||
import Header from '../header';
|
||||
// import Drawer from 'async!../drawer';
|
||||
const Drawer = require('async!../drawer').default;
|
||||
import Home from '../home';
|
||||
import { bind } from '../../lib/util';
|
||||
import * as style from './style.scss';
|
||||
import Output from '../output';
|
||||
|
||||
type Props = {
|
||||
url?: string
|
||||
};
|
||||
|
||||
export type FileObj = {
|
||||
id: number,
|
||||
data?: string,
|
||||
uri?: string,
|
||||
error?: Error | DOMError | String,
|
||||
file: File,
|
||||
loading: boolean
|
||||
};
|
||||
type Props = {};
|
||||
|
||||
type State = {
|
||||
showDrawer: boolean,
|
||||
showFab: boolean,
|
||||
files: FileObj[]
|
||||
img?: ImageBitmap
|
||||
};
|
||||
|
||||
let idCounter = 0;
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {
|
||||
showDrawer: false,
|
||||
showFab: true,
|
||||
files: []
|
||||
};
|
||||
|
||||
enableDrawer = false;
|
||||
state: State = {};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -49,87 +24,25 @@ export default class App extends Component<Props, State> {
|
||||
}
|
||||
|
||||
@bind
|
||||
openDrawer() {
|
||||
this.setState({ showDrawer: true });
|
||||
}
|
||||
@bind
|
||||
closeDrawer() {
|
||||
this.setState({ showDrawer: false });
|
||||
}
|
||||
@bind
|
||||
toggleDrawer() {
|
||||
this.setState({ showDrawer: !this.state.showDrawer });
|
||||
async onFileChange(event: Event) {
|
||||
const fileInput = event.target as HTMLInputElement;
|
||||
if (!fileInput.files || !fileInput.files[0]) return;
|
||||
// TODO: handle decode error
|
||||
const img = await createImageBitmap(fileInput.files[0]);
|
||||
this.setState({ img });
|
||||
}
|
||||
|
||||
@bind
|
||||
openFab() {
|
||||
this.setState({ showFab: true });
|
||||
}
|
||||
@bind
|
||||
closeFab() {
|
||||
this.setState({ showFab: false });
|
||||
}
|
||||
@bind
|
||||
toggleFab() {
|
||||
this.setState({ showFab: !this.state.showFab });
|
||||
}
|
||||
|
||||
@bind
|
||||
loadFile(file: File) {
|
||||
let fileObj: FileObj = {
|
||||
id: ++idCounter,
|
||||
file,
|
||||
error: undefined,
|
||||
loading: true,
|
||||
data: undefined
|
||||
};
|
||||
|
||||
this.setState({
|
||||
files: [fileObj]
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
new Response(file).text(),
|
||||
new Response(file).blob()
|
||||
])
|
||||
.then(([data, blob]) => ({
|
||||
data,
|
||||
uri: URL.createObjectURL(blob)
|
||||
}))
|
||||
.catch(error => ({ error }))
|
||||
.then(state => {
|
||||
let files = this.state.files.slice();
|
||||
files[files.indexOf(fileObj)] = Object.assign({}, fileObj, {
|
||||
loading: false,
|
||||
...state
|
||||
});
|
||||
this.setState({ files });
|
||||
});
|
||||
}
|
||||
|
||||
render({ url }: Props, { showDrawer, showFab, files }: State) {
|
||||
if (showDrawer) this.enableDrawer = true;
|
||||
|
||||
if (showFab) showFab = files.length > 0;
|
||||
|
||||
render({ }: Props, { img }: State) {
|
||||
return (
|
||||
<div id="app" class={style.app}>
|
||||
<Fab showing={showFab} />
|
||||
|
||||
<Header class={style.header} onToggleDrawer={this.toggleDrawer} loadFile={this.loadFile} />
|
||||
|
||||
{/* Avoid loading & rendering the drawer until the first time it is shown. */}
|
||||
<When value={showDrawer}>
|
||||
<Drawer showing={showDrawer} openDrawer={this.openDrawer} closeDrawer={this.closeDrawer} />
|
||||
</When>
|
||||
|
||||
{/*
|
||||
Note: this is normally where a <Router> with auto code-splitting goes.
|
||||
Since we don't seem to need one (yet?), it's omitted.
|
||||
*/}
|
||||
<div class={style.content}>
|
||||
<Home files={files} />
|
||||
</div>
|
||||
{img ?
|
||||
<Output img={img} />
|
||||
:
|
||||
<div>
|
||||
<h1>Select an image</h1>
|
||||
<input type="file" onChange={this.onFileChange} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,25 +1,3 @@
|
||||
@import '~style/helpers.scss';
|
||||
|
||||
.app {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.header {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 auto;
|
||||
contain: size layout style;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.app h1 {
|
||||
color: green;
|
||||
}
|
||||
|
||||
3
src/components/app/style.scss.d.ts
vendored
3
src/components/app/style.scss.d.ts
vendored
@@ -1,3 +0,0 @@
|
||||
export const app: string;
|
||||
export const header: string;
|
||||
export const content: string;
|
||||
@@ -1,63 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import MdlDrawer from 'preact-material-components-drawer';
|
||||
import 'preact-material-components/Drawer/style.css';
|
||||
import List from 'preact-material-components/List';
|
||||
// import 'preact-material-components/List/style.css';
|
||||
import { Text } from 'preact-i18n';
|
||||
import * as style from './style.scss';
|
||||
import { bind } from '../../lib/util';
|
||||
|
||||
type Props = {
|
||||
showing: boolean,
|
||||
openDrawer(): void,
|
||||
closeDrawer(): void
|
||||
};
|
||||
|
||||
type State = {
|
||||
rendered: boolean
|
||||
};
|
||||
|
||||
export default class Drawer extends Component<Props, State> {
|
||||
state: State = {
|
||||
rendered: false
|
||||
};
|
||||
|
||||
@bind
|
||||
setRendered() {
|
||||
this.setState({ rendered: true });
|
||||
}
|
||||
|
||||
render({ showing, openDrawer, closeDrawer }: Props, { rendered }: State) {
|
||||
if (showing && !rendered) {
|
||||
setTimeout(this.setRendered, 20);
|
||||
showing = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<MdlDrawer open={showing} onOpen={openDrawer} onClose={closeDrawer}>
|
||||
<MdlDrawer.Header class="mdc-theme--primary-bg">
|
||||
<img class={style.logo} alt="logo" src="/assets/icon.png" />
|
||||
</MdlDrawer.Header>
|
||||
<MdlDrawer.Content>
|
||||
<List>
|
||||
<List.LinkItem href="/">
|
||||
<List.ItemIcon>verified_user</List.ItemIcon>
|
||||
<Text id="SIGN_IN">Sign In</Text>
|
||||
</List.LinkItem>
|
||||
<List.LinkItem href="/register">
|
||||
<List.ItemIcon>account_circle</List.ItemIcon>
|
||||
<Text id="REGISTER">Register</Text>
|
||||
</List.LinkItem>
|
||||
</List>
|
||||
</MdlDrawer.Content>
|
||||
|
||||
<div class={style.bottom}>
|
||||
<List.LinkItem href="/preferences">
|
||||
<List.ItemIcon>settings</List.ItemIcon>
|
||||
<Text id="PREFERENCES">Preferences</Text>
|
||||
</List.LinkItem>
|
||||
</div>
|
||||
</MdlDrawer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
@import '~style/helpers.scss';
|
||||
|
||||
:global {
|
||||
// @import '~preact-material-components/Drawer/style.css';
|
||||
@import '~preact-material-components/List/mdc-list.scss';
|
||||
}
|
||||
|
||||
.drawer {
|
||||
:global(.mdc-list-item__start-detail) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.category img {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: constant(safe-area-inset-bottom);
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
14
src/components/drawer/style.scss.d.ts
vendored
14
src/components/drawer/style.scss.d.ts
vendored
@@ -1,14 +0,0 @@
|
||||
export const mdcListItemSecondaryText: string;
|
||||
export const mdcListItemGraphic: string;
|
||||
export const mdcListItemMeta: string;
|
||||
export const mdcListItem: string;
|
||||
export const mdcListDivider: string;
|
||||
export const mdcListGroup: string;
|
||||
export const mdcListGroupSubheader: string;
|
||||
export const drawer: string;
|
||||
export const logo: string;
|
||||
export const category: string;
|
||||
export const bottom: string;
|
||||
export const mdcRippleFgRadiusIn: string;
|
||||
export const mdcRippleFgOpacityIn: string;
|
||||
export const mdcRippleFgOpacityOut: string;
|
||||
@@ -1,47 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind } from '../../lib/util';
|
||||
import Icon from 'preact-material-components/Icon';
|
||||
import 'preact-material-components/Icon/style.css';
|
||||
import Fab from 'preact-material-components/Fab';
|
||||
import RadialProgress from 'material-radial-progress';
|
||||
import * as style from './style.scss';
|
||||
|
||||
type Props = {
|
||||
showing: boolean
|
||||
};
|
||||
|
||||
type State = {
|
||||
loading: boolean
|
||||
};
|
||||
|
||||
export default class AppFab extends Component<Props, State> {
|
||||
state: State = {
|
||||
loading: false
|
||||
};
|
||||
|
||||
@bind
|
||||
setLoading(loading: boolean) {
|
||||
this.setState({ loading });
|
||||
}
|
||||
|
||||
@bind
|
||||
handleClick() {
|
||||
console.log('TODO: Save the file to disk.');
|
||||
this.setState({ loading: true });
|
||||
setTimeout(() => {
|
||||
this.setState({ loading: false });
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
render({ showing }: Props, { loading }: State) {
|
||||
return (
|
||||
<Fab ripple secondary exited={showing === false} class={style.fab} onClick={this.handleClick}>
|
||||
{ loading ? (
|
||||
<RadialProgress primary class={style.progress} />
|
||||
) : (
|
||||
<Icon>file_download</Icon>
|
||||
) }
|
||||
</Fab>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
@import '~style/helpers.scss';
|
||||
:global {
|
||||
@import '~preact-material-components/Fab/mdc-fab.scss';
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
z-index: 4;
|
||||
|
||||
.progress {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
--mdc-theme-primary: #fff;
|
||||
}
|
||||
}
|
||||
5
src/components/fab/style.scss.d.ts
vendored
5
src/components/fab/style.scss.d.ts
vendored
@@ -1,5 +0,0 @@
|
||||
export const fab: string;
|
||||
export const progress: string;
|
||||
export const mdcRippleFgRadiusIn: string;
|
||||
export const mdcRippleFgOpacityIn: string;
|
||||
export const mdcRippleFgOpacityOut: string;
|
||||
@@ -1,53 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Toolbar from 'preact-material-components/Toolbar';
|
||||
import cx from 'classnames';
|
||||
import * as style from './style.scss';
|
||||
import { bind } from '../../lib/util';
|
||||
|
||||
type Props = {
|
||||
'class'?: string,
|
||||
showHeader?: boolean,
|
||||
onToggleDrawer?(): void,
|
||||
showFab?(): void,
|
||||
loadFile(f: File): void
|
||||
};
|
||||
|
||||
type State = {};
|
||||
|
||||
export default class Header extends Component<Props, State> {
|
||||
input?: HTMLInputElement;
|
||||
|
||||
@bind
|
||||
setInputRef(c?: Element) {
|
||||
this.input = c as HTMLInputElement;
|
||||
}
|
||||
|
||||
@bind
|
||||
upload() {
|
||||
this.input!.click();
|
||||
}
|
||||
|
||||
@bind
|
||||
handleFiles() {
|
||||
let files = this.input!.files;
|
||||
if (files && files.length) {
|
||||
this.props.loadFile(files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
render({ class: c, onToggleDrawer, showHeader = true, showFab }: Props) {
|
||||
return (
|
||||
<Toolbar fixed class={cx(c, style.toolbar, 'inert', !showHeader && style.minimal)}>
|
||||
<Toolbar.Row>
|
||||
<Toolbar.Title class={style.title}>
|
||||
<Toolbar.Icon title="Upload" ripple onClick={this.upload}>file_upload</Toolbar.Icon>
|
||||
</Toolbar.Title>
|
||||
<Toolbar.Section align-end>
|
||||
<Toolbar.Icon ripple onClick={onToggleDrawer}>menu</Toolbar.Icon>
|
||||
</Toolbar.Section>
|
||||
</Toolbar.Row>
|
||||
<input class={style.fileInput} ref={this.setInputRef} type="file" onChange={this.handleFiles} />
|
||||
</Toolbar>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
@import '~style/helpers.scss';
|
||||
:global {
|
||||
@import '~preact-material-components/Toolbar/mdc-toolbar.scss';
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
// height: $toolbar-height;
|
||||
|
||||
&.minimal {
|
||||
display: none;
|
||||
// height: $toolbar-height / 2;
|
||||
}
|
||||
|
||||
// > * {
|
||||
// min-height: 0;
|
||||
// }
|
||||
}
|
||||
|
||||
.fileInput {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -999px;
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
display: block;
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
// z-index: 999;
|
||||
// transform: translateZ(0);
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: $toolbar-height;
|
||||
right: 5px;
|
||||
|
||||
.menuItem {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 3px 0 0;
|
||||
font-weight: 300;
|
||||
font-size: 140%;
|
||||
}
|
||||
8
src/components/header/style.scss.d.ts
vendored
8
src/components/header/style.scss.d.ts
vendored
@@ -1,8 +0,0 @@
|
||||
export const toolbar: string;
|
||||
export const minimal: string;
|
||||
export const fileInput: string;
|
||||
export const fab: string;
|
||||
export const logo: string;
|
||||
export const menu: string;
|
||||
export const menuItem: string;
|
||||
export const title: string;
|
||||
@@ -1,36 +0,0 @@
|
||||
import { h, Component } from 'preact';
|
||||
// import Button from 'preact-material-components/Button';
|
||||
// import Switch from 'preact-material-components/Switch';
|
||||
// import 'preact-material-components/Switch/style.css';
|
||||
import * as style from './style.scss';
|
||||
import { FileObj } from '../app';
|
||||
|
||||
type Props = {
|
||||
files: FileObj[]
|
||||
};
|
||||
|
||||
type State = {
|
||||
active: boolean
|
||||
};
|
||||
|
||||
export default class Home extends Component<Props, State> {
|
||||
state: State = {
|
||||
active: false
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
setTimeout(() => {
|
||||
this.setState({ active: true });
|
||||
});
|
||||
}
|
||||
|
||||
render({ files }: Props, { active }: State) {
|
||||
return (
|
||||
<div class={style.home + ' ' + (active ? style.active : '')}>
|
||||
{ files && files[0] && (
|
||||
<img src={files[0].uri} style="width:100%;" />
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
@import '~style/helpers.scss';
|
||||
|
||||
// :global {
|
||||
// @import '~preact-material-components/Button/mdc-button.scss';
|
||||
// // @import '~preact-material-components/Switch/mdc-switch.scss';
|
||||
// }
|
||||
|
||||
.home {
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
animation: fadeIn 2s forwards ease 1;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
3
src/components/home/style.scss.d.ts
vendored
3
src/components/home/style.scss.d.ts
vendored
@@ -1,3 +0,0 @@
|
||||
export const home: string;
|
||||
export const active: string;
|
||||
export const fadeIn: string;
|
||||
44
src/components/output/index.tsx
Normal file
44
src/components/output/index.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { h, Component } from 'preact';
|
||||
// This isn't working.
|
||||
// https://github.com/GoogleChromeLabs/squoosh/issues/14
|
||||
import * as style from './style.scss';
|
||||
|
||||
type Props = {
|
||||
img: ImageBitmap
|
||||
};
|
||||
|
||||
type State = {};
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
state: State = {};
|
||||
canvas?: HTMLCanvasElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
updateCanvas(img: ImageBitmap) {
|
||||
if (!this.canvas) return;
|
||||
const ctx = this.canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.updateCanvas(this.props.img);
|
||||
}
|
||||
|
||||
componentDidUpdate({ img }: Props) {
|
||||
if (img !== this.props.img) this.updateCanvas(this.props.img);
|
||||
}
|
||||
|
||||
render({ img }: Props, { }: State) {
|
||||
return (
|
||||
<div>
|
||||
<canvas ref={c => this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} />
|
||||
<p>And that's all the app does so far!</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
3
src/components/output/style.scss
Normal file
3
src/components/output/style.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.app h1 {
|
||||
color: green;
|
||||
}
|
||||
@@ -10,14 +10,6 @@
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" prerender></div>
|
||||
<script>
|
||||
(function(style){
|
||||
style.rel='stylesheet'
|
||||
style.href='https://fonts.googleapis.com/icon?family=Material+Icons'
|
||||
document.head.appendChild(style)
|
||||
})(document.createElement('link'));
|
||||
</script>
|
||||
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> -->
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -4,7 +4,7 @@ import './style';
|
||||
import App from './components/app';
|
||||
|
||||
// Find the outermost Element in our server-rendered HTML structure.
|
||||
let root = document.querySelector('[prerender]') || undefined;
|
||||
let root = document.querySelector('#app') || undefined;
|
||||
|
||||
// "attach" the client-side rendering to it, updating the DOM in-place instead of replacing:
|
||||
root = render(<App />, document.body, root);
|
||||
@@ -20,13 +20,4 @@ if (process.env.NODE_ENV === 'development') {
|
||||
root = render(<App />, document.body, root);
|
||||
});
|
||||
});
|
||||
} else if ('serviceWorker' in navigator && location.protocol === 'https:') {
|
||||
addEventListener('load', () => {
|
||||
navigator.serviceWorker.register(__webpack_public_path__ + 'sw.js');
|
||||
});
|
||||
}
|
||||
|
||||
/** @todo SSR */
|
||||
// if (typeof module==='object') {
|
||||
// module.exports = app;
|
||||
// }
|
||||
|
||||
@@ -1,26 +1,3 @@
|
||||
import { Component, ComponentProps } from 'preact';
|
||||
|
||||
type WhenProps = ComponentProps<When> & {
|
||||
value: boolean,
|
||||
children?: (JSX.Element | (() => JSX.Element))[]
|
||||
};
|
||||
|
||||
type WhenState = {
|
||||
ready: boolean
|
||||
};
|
||||
|
||||
export class When extends Component<WhenProps, WhenState> {
|
||||
state: WhenState = {
|
||||
ready: !!this.props.value
|
||||
};
|
||||
|
||||
render({ value, children = [] }: WhenProps, { ready }: WhenState) {
|
||||
let child = children[0];
|
||||
if (value && !ready) this.setState({ ready: true });
|
||||
return ready ? (typeof child === 'function' ? child() : child) : null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A decorator that binds values to their class instance.
|
||||
* @example
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
$toolbar-height: 56px;
|
||||
|
||||
$mdc-theme-primary: #263238;
|
||||
$mdc-theme-primary-light: #4f5b62;
|
||||
$mdc-theme-primary-dark: #000a12;
|
||||
$mdc-theme-secondary: #d81b60;
|
||||
$mdc-theme-secondary-light: #ff5c8d;
|
||||
$mdc-theme-secondary-dark: #a00037;
|
||||
$mdc-theme-secondary-dark: #a00037;
|
||||
$mdc-theme-background: #fff;
|
||||
@@ -1,7 +1,4 @@
|
||||
// @import './material-icons.scss';
|
||||
// @import 'material-components-web/material-components-web';
|
||||
@import './reset.scss';
|
||||
// @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
@@ -11,17 +8,3 @@ html, body {
|
||||
overflow: hidden;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #FAFAFA;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #444;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.mdc-theme--dark {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
|
||||
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
|
||||
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
@@ -1,34 +1,34 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const CleanPlugin = require('clean-webpack-plugin');
|
||||
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const PreloadWebpackPlugin = require('preload-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const HtmlPlugin = require('html-webpack-plugin');
|
||||
const ScriptExtHtmlPlugin = require('script-ext-html-webpack-plugin');
|
||||
const ReplacePlugin = require('webpack-plugin-replace');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const WorkboxPlugin = require('workbox-webpack-plugin');
|
||||
const CrittersPlugin = require('./config/critters-webpack-plugin');
|
||||
const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
|
||||
function readJson(filename) {
|
||||
function readJson (filename) {
|
||||
return JSON.parse(fs.readFileSync(filename));
|
||||
}
|
||||
|
||||
module.exports = function(_, env) {
|
||||
module.exports = function (_, env) {
|
||||
const isProd = env.mode === 'production';
|
||||
const nodeModules = path.join(__dirname, 'node_modules');
|
||||
const componentStyleDirs = [
|
||||
path.join(__dirname, 'src/components'),
|
||||
path.join(__dirname, 'src/routes')
|
||||
path.join(__dirname, 'src/components')
|
||||
];
|
||||
|
||||
return {
|
||||
mode: isProd ? 'production' : 'development',
|
||||
entry: './src/index',
|
||||
devtool: isProd ? 'source-map' : 'inline-source-map',
|
||||
stats: 'minimal',
|
||||
output: {
|
||||
filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
|
||||
chunkFilename: '[name].chunk.[chunkhash:5].js',
|
||||
@@ -49,23 +49,6 @@ module.exports = function(_, env) {
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
exclude: nodeModules,
|
||||
// Ensure typescript is compiled prior to Babel running:
|
||||
enforce: 'pre',
|
||||
use: [
|
||||
// pluck the sourcemap back out so Babel creates a composed one:
|
||||
'source-map-loader',
|
||||
'ts-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(ts|js)x?$/,
|
||||
loader: 'babel-loader',
|
||||
// Don't respect any Babel RC files found on the filesystem:
|
||||
options: Object.assign(readJson('.babelrc'), { babelrc: false })
|
||||
},
|
||||
{
|
||||
test: /\.(scss|sass)$/,
|
||||
loader: 'sass-loader',
|
||||
@@ -78,7 +61,7 @@ module.exports = function(_, env) {
|
||||
},
|
||||
{
|
||||
test: /\.(scss|sass|css)$/,
|
||||
// Only enable CSS Modules within `src/{components,routes}/*`
|
||||
// Only enable CSS Modules within `src/components/*`
|
||||
include: componentStyleDirs,
|
||||
use: [
|
||||
// In production, CSS is extracted to files on disk. In development, it's inlined into JS:
|
||||
@@ -101,7 +84,7 @@ module.exports = function(_, env) {
|
||||
},
|
||||
{
|
||||
test: /\.(scss|sass|css)$/,
|
||||
// Process non-modular CSS everywhere *except* `src/{components,routes}/*`
|
||||
// Process non-modular CSS everywhere *except* `src/components/*`
|
||||
exclude: componentStyleDirs,
|
||||
use: [
|
||||
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
@@ -113,6 +96,17 @@ module.exports = function(_, env) {
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
exclude: nodeModules,
|
||||
loader: 'ts-loader'
|
||||
},
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
loader: 'babel-loader',
|
||||
// Don't respect any Babel RC files found on the filesystem:
|
||||
options: Object.assign(readJson('.babelrc'), { babelrc: false })
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -126,11 +120,12 @@ module.exports = function(_, env) {
|
||||
}),
|
||||
|
||||
// Remove old files before outputting a production build:
|
||||
isProd && new CleanWebpackPlugin([
|
||||
isProd && new CleanPlugin([
|
||||
'assets',
|
||||
'**/*.{css,js,json,html}'
|
||||
'**/*.{css,js,json,html,map}'
|
||||
], {
|
||||
root: path.join(__dirname, 'build'),
|
||||
verbose: false,
|
||||
beforeEmit: true
|
||||
}),
|
||||
|
||||
@@ -147,6 +142,13 @@ module.exports = function(_, env) {
|
||||
chunkFilename: '[name].chunk.[contenthash:5].css'
|
||||
}),
|
||||
|
||||
new OptimizeCssAssetsPlugin({
|
||||
cssProcessorOptions: {
|
||||
zindex: false,
|
||||
discardComments: { removeAll: true }
|
||||
}
|
||||
}),
|
||||
|
||||
// These plugins fix infinite loop in typings-for-css-modules-loader.
|
||||
// See: https://github.com/Jimdo/typings-for-css-modules-loader/issues/35
|
||||
new webpack.WatchIgnorePlugin([
|
||||
@@ -157,15 +159,14 @@ module.exports = function(_, env) {
|
||||
]),
|
||||
|
||||
// For now we're not doing SSR.
|
||||
new HtmlWebpackPlugin({
|
||||
new HtmlPlugin({
|
||||
filename: path.join(__dirname, 'build/index.html'),
|
||||
template: '!!ejs-loader!src/index.html',
|
||||
// template: '!!'+path.join(__dirname, 'config/prerender-loader')+'!src/index.html',
|
||||
template: 'src/index.html',
|
||||
minify: isProd && {
|
||||
collapseWhitespace: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeComments: true
|
||||
},
|
||||
manifest: readJson('./src/manifest.json'),
|
||||
@@ -173,14 +174,8 @@ module.exports = function(_, env) {
|
||||
compile: true
|
||||
}),
|
||||
|
||||
// Inject <link rel="preload"> for resources
|
||||
isProd && new PreloadWebpackPlugin(),
|
||||
|
||||
isProd && new CrittersPlugin({
|
||||
// convert critical'd <link rel="stylesheet"> to <link rel="preload" as="style">:
|
||||
async: true,
|
||||
// copy original <link rel="stylesheet"> to the end of <body>:
|
||||
preload: true
|
||||
new ScriptExtHtmlPlugin({
|
||||
defaultAttribute: 'async'
|
||||
}),
|
||||
|
||||
// Inline constants during build, so they can be folded by UglifyJS.
|
||||
@@ -212,19 +207,31 @@ module.exports = function(_, env) {
|
||||
analyzerMode: 'static',
|
||||
defaultSizes: 'gzip',
|
||||
openAnalyzer: false
|
||||
}),
|
||||
|
||||
// Generate a ServiceWorker using Workbox.
|
||||
isProd && new WorkboxPlugin.GenerateSW({
|
||||
swDest: 'sw.js',
|
||||
clientsClaim: true,
|
||||
skipWaiting: true,
|
||||
// allow for offline client-side routing:
|
||||
navigateFallback: '/',
|
||||
navigateFallbackBlacklist: [/\.[a-z0-9]+$/i]
|
||||
})
|
||||
].filter(Boolean), // Filter out any falsey plugin array entries.
|
||||
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new UglifyJsPlugin({
|
||||
sourceMap: isProd,
|
||||
extractComments: {
|
||||
file: 'build/licenses.txt'
|
||||
},
|
||||
uglifyOptions: {
|
||||
compress: {
|
||||
inline: 1
|
||||
},
|
||||
mangle: {
|
||||
safari10: true
|
||||
},
|
||||
output: {
|
||||
safari10: true
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
// Turn off various NodeJS environment polyfills Webpack adds to bundles.
|
||||
// They're supposed to be added only when used, but the heuristic is loose
|
||||
// (eg: existence of a variable called setImmedaite in any scope)
|
||||
@@ -249,8 +256,6 @@ module.exports = function(_, env) {
|
||||
compress: true,
|
||||
// Request paths not ending in a file extension serve index.html:
|
||||
historyApiFallback: true,
|
||||
// Don't output server address info to console on startup:
|
||||
noInfo: true,
|
||||
// Suppress forwarding of Webpack logs to the browser console:
|
||||
clientLogLevel: 'none',
|
||||
// Supress the extensive stats normally printed after a dev build (since sizes are mostly useless):
|
||||
|
||||
Reference in New Issue
Block a user