Compare commits
1 Commits
latest-was
...
prerenderi
| Author | SHA1 | Date | |
|---|---|---|---|
| dbf38e5a44 |
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
node_modules
|
||||
/build
|
||||
/*.log
|
||||
/*.log
|
||||
*.scss.d.ts
|
||||
|
||||
271
package-lock.json
generated
271
package-lock.json
generated
@ -4,24 +4,6 @@
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.0.0-beta.46",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.46.tgz",
|
||||
"integrity": "sha512-/3a3USMKk54BEHhDgY8rtxtaQOs4bp4aQwo6SDtdwmrXmgSgEusWuXNX5oIs/nwzmTD9o8wz2EyAjA+uHDMmJA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"core-js": "2.5.5",
|
||||
"regenerator-runtime": "0.11.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
|
||||
"integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"@material/animation": {
|
||||
"version": "0.25.0",
|
||||
"resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz",
|
||||
@ -3190,15 +3172,6 @@
|
||||
"integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==",
|
||||
"dev": true
|
||||
},
|
||||
"common-tags": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.2.tgz",
|
||||
"integrity": "sha512-joj9ZlUOjCrwdbmiLqafeUSgkUM74NqhLsZtSqDmhKudaIY197zTrb8JMl31fMnCUuxwFT23eC/oWvrZzDLRJQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0"
|
||||
}
|
||||
},
|
||||
"commondir": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
|
||||
@ -4936,17 +4909,6 @@
|
||||
"readable-stream": "2.3.4"
|
||||
}
|
||||
},
|
||||
"fs-extra": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
|
||||
"integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "4.1.11",
|
||||
"jsonfile": "4.0.0",
|
||||
"universalify": "0.1.1"
|
||||
}
|
||||
},
|
||||
"fs-write-stream-atomic": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
|
||||
@ -7346,23 +7308,6 @@
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true
|
||||
},
|
||||
"isemail": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/isemail/-/isemail-3.1.1.tgz",
|
||||
"integrity": "sha512-mVjAjvdPkpwXW61agT2E9AkGoegZO7SdJGCezWwxnETL58f5KwJ4vSVAMBUL5idL6rTlYAIGkX3n4suiviMLNw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"punycode": "2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"punycode": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz",
|
||||
"integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"isexe": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||
@ -7415,25 +7360,6 @@
|
||||
"is-object": "1.0.1"
|
||||
}
|
||||
},
|
||||
"joi": {
|
||||
"version": "11.4.0",
|
||||
"resolved": "https://registry.npmjs.org/joi/-/joi-11.4.0.tgz",
|
||||
"integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "4.2.1",
|
||||
"isemail": "3.1.1",
|
||||
"topo": "2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoek": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
|
||||
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
|
||||
@ -7524,15 +7450,6 @@
|
||||
"integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=",
|
||||
"dev": true
|
||||
},
|
||||
"json-stable-stringify": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
|
||||
"integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"jsonify": "0.0.0"
|
||||
}
|
||||
},
|
||||
"json-stable-stringify-without-jsonify": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
|
||||
@ -7557,15 +7474,6 @@
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
|
||||
"dev": true
|
||||
},
|
||||
"jsonfile": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "4.1.11"
|
||||
}
|
||||
},
|
||||
"jsonify": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
||||
@ -7925,12 +7833,6 @@
|
||||
"integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.assign": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
|
||||
@ -7967,25 +7869,6 @@
|
||||
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.template": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
|
||||
"integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash._reinterpolate": "3.0.0",
|
||||
"lodash.templatesettings": "4.1.0"
|
||||
}
|
||||
},
|
||||
"lodash.templatesettings": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
|
||||
"integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash._reinterpolate": "3.0.0"
|
||||
}
|
||||
},
|
||||
"lodash.uniq": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
|
||||
@ -10559,15 +10442,6 @@
|
||||
"resolved": "https://registry.npmjs.org/preact-router/-/preact-router-2.6.0.tgz",
|
||||
"integrity": "sha1-Vff7yE5rivDfPqBMjOTCaHFAibY="
|
||||
},
|
||||
"preload-webpack-plugin": {
|
||||
"version": "3.0.0-alpha.3",
|
||||
"resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-alpha.3.tgz",
|
||||
"integrity": "sha512-sl0xCvUfw6Qrd2WTo3NzavRFUaui4SknwxkubG6s5yQ1i1NLnnKrzJS5sYrhVZgxK+M9UsXMKUrF5hAYTnRZEw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "7.0.0-beta.46"
|
||||
}
|
||||
},
|
||||
"prelude-ls": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
|
||||
@ -12728,23 +12602,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"topo": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz",
|
||||
"integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "4.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoek": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
|
||||
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"toposort": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.6.tgz",
|
||||
@ -13424,12 +13281,6 @@
|
||||
"imurmurhash": "0.1.4"
|
||||
}
|
||||
},
|
||||
"universalify": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
|
||||
"integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=",
|
||||
"dev": true
|
||||
},
|
||||
"unpipe": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
|
||||
@ -14671,128 +14522,6 @@
|
||||
"integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
|
||||
"dev": true
|
||||
},
|
||||
"workbox-background-sync": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-3.0.1.tgz",
|
||||
"integrity": "sha512-3zHFDptq3mOiggU1AwkHs0I/egsRemhgUyyEerkvBdO/rpx41r7wK9qx+KrFKoHzRkVCYRN0ho/THo0rlP6dOw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-broadcast-cache-update": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.0.1.tgz",
|
||||
"integrity": "sha512-I+dDwxTUUvqSmUvOr5MtkfaTp8pcEK+HE4WJQApMRknJlvy0Cj0dEJbCApghM+KLhLhPc6Sq2Oyo26rN1xmn/w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-build": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-3.0.1.tgz",
|
||||
"integrity": "sha512-bU7KAZDGKNtAIzbcou3xVpR65XU9WI0+lm7zsSC1ta0D2hDqQDErHsFbwtYa9ePMx9iYYw6NRMZfARhwZnfKiw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"common-tags": "1.7.2",
|
||||
"fs-extra": "4.0.3",
|
||||
"glob": "7.1.2",
|
||||
"joi": "11.4.0",
|
||||
"lodash.template": "4.4.0",
|
||||
"pretty-bytes": "4.0.2",
|
||||
"workbox-background-sync": "3.0.1",
|
||||
"workbox-broadcast-cache-update": "3.0.1",
|
||||
"workbox-cache-expiration": "3.0.1",
|
||||
"workbox-cacheable-response": "3.0.1",
|
||||
"workbox-core": "3.0.1",
|
||||
"workbox-google-analytics": "3.0.1",
|
||||
"workbox-precaching": "3.0.1",
|
||||
"workbox-routing": "3.0.1",
|
||||
"workbox-strategies": "3.0.1",
|
||||
"workbox-sw": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-cache-expiration": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-cache-expiration/-/workbox-cache-expiration-3.0.1.tgz",
|
||||
"integrity": "sha512-01ztqk94JZtY+Ax1khHUevrNc9fzKbBV6Mq3rEjctMMQJShP8Sd4PL6zV3PFsoKdoUc8176mNfwN0AdwgMEDdg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-cacheable-response": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-3.0.1.tgz",
|
||||
"integrity": "sha512-bOXjRpogk2w3flZkKMo6Jy8esdHlv0POkFZ2UjMYSFvPVXr8tJZdI9lDna3gxuB3PUt2sizai6x48z+tqzrC0w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-core": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-3.0.1.tgz",
|
||||
"integrity": "sha512-NiAs17oJnNzvJnIaNJ+KvMgATvLbpnfnDIMgllPPIO03VyG2bMtcg/3x8NTiiPfUI1a7cmIABY/gIs8b12KMBw==",
|
||||
"dev": true
|
||||
},
|
||||
"workbox-google-analytics": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-3.0.1.tgz",
|
||||
"integrity": "sha512-HNTh707qJJ1mtU2mUCVPwt9X4f+GxxFxONjUhQ6+zH1iFlAStXaIKOAyBesyUaKXaeKN47AI7XpBztE92PdKeg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-background-sync": "3.0.1",
|
||||
"workbox-core": "3.0.1",
|
||||
"workbox-routing": "3.0.1",
|
||||
"workbox-strategies": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-precaching": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-3.0.1.tgz",
|
||||
"integrity": "sha512-qg+t7y0ktoL7Eo4+DtcnQbROhhcaBQ+QRYlHJhFfyHasZHxUigqtWAEDGrzILJurZAF7xbUNhdvdEbfpfv66sw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-routing": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-3.0.1.tgz",
|
||||
"integrity": "sha512-bL2aEAoYs12ulKEblYrTu1sm9QqWZ/tNUHxYvOym6GG2Qmu3j+Xdeg2+mbssxnMQovwN5ElBX0EVc69ZJpgjoQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-strategies": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-3.0.1.tgz",
|
||||
"integrity": "sha512-Dx7TTsqFVrRPVmTUQwzcRqu1khXNzRXWk2SxxJKfprP0uwGln8zheng48svXW2KAzMTQBWGo4Tojz2Cfp99a6Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"workbox-core": "3.0.1"
|
||||
}
|
||||
},
|
||||
"workbox-sw": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-3.0.1.tgz",
|
||||
"integrity": "sha512-ARONUH2HyzYDhOH3N5a1qOEmqgKiDZ3qJ1SMDBkIrGIrWuSMF1KOFHgvQKuq0sEKtsspisY1ofEnRMBFCpQEKg==",
|
||||
"dev": true
|
||||
},
|
||||
"workbox-webpack-plugin": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-3.0.1.tgz",
|
||||
"integrity": "sha512-0y8FxQna/Ba53X+MtTzMHNl6hyKN5ywZSzODFiXzSiUZ7s3LSzW8NEXXuNFEnUgD7+f3NIITsyriIgfERxkI8g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"json-stable-stringify": "1.0.1",
|
||||
"workbox-build": "3.0.1"
|
||||
}
|
||||
},
|
||||
"worker-farm": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.6.0.tgz",
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
"mini-css-extract-plugin": "^0.3.0",
|
||||
"node-sass": "^4.7.2",
|
||||
"optimize-css-assets-webpack-plugin": "^4.0.0",
|
||||
"preload-webpack-plugin": "^3.0.0-alpha.3",
|
||||
"progress-bar-webpack-plugin": "^1.11.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"sass-loader": "^6.0.7",
|
||||
@ -75,8 +74,7 @@
|
||||
"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} id="uploadIcon">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} aria-labelledby="uploadIcon" />
|
||||
</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,41 +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}>
|
||||
{ files && files[0] && (
|
||||
<img src={files[0].uri} class={style.image} />
|
||||
) || (
|
||||
<div class={style.content}>
|
||||
<h1>Squoosh</h1>
|
||||
<p>Test home content</p>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,21 +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;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 600px;
|
||||
margin: 50px auto 0;
|
||||
font-size: 120%;
|
||||
text-align: center;
|
||||
}
|
||||
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 image: string;
|
||||
export const content: 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;
|
||||
}
|
||||
@ -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 Async SSR if we need it */
|
||||
// export default async () => {
|
||||
// // render here, then resolve to a string of HTML (or null to serialize the document)
|
||||
// }
|
||||
|
||||
@ -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-components-web/material-components-web';
|
||||
@import './material-icons.scss';
|
||||
@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,24 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
// @todo woff fallback!
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@ -8,10 +8,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const HtmlPlugin = require('html-webpack-plugin');
|
||||
const ScriptExtHtmlPlugin = require('script-ext-html-webpack-plugin');
|
||||
const PreloadPlugin = require('preload-webpack-plugin');
|
||||
const ReplacePlugin = require('webpack-plugin-replace');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const WorkboxPlugin = require('workbox-webpack-plugin');
|
||||
const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin');
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
||||
|
||||
@ -23,8 +21,7 @@ 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 {
|
||||
@ -64,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:
|
||||
@ -87,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',
|
||||
@ -181,11 +178,6 @@ module.exports = function (_, env) {
|
||||
defaultAttribute: 'async'
|
||||
}),
|
||||
|
||||
// Inject <link rel="preload"> for resources
|
||||
isProd && new PreloadPlugin({
|
||||
include: 'initial'
|
||||
}),
|
||||
|
||||
// Inline constants during build, so they can be folded by UglifyJS.
|
||||
new webpack.DefinePlugin({
|
||||
// We set node.process=false later in this config.
|
||||
@ -215,22 +207,6 @@ 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,
|
||||
exclude: [
|
||||
'report.html',
|
||||
'manifest.json',
|
||||
/(report\.html|manifest\.json|\.precache-manifest\..*\.json)$/,
|
||||
/\.(?:map|pem|DS_Store)$/
|
||||
],
|
||||
// allow for offline client-side routing:
|
||||
navigateFallback: '/',
|
||||
navigateFallbackBlacklist: [/\.[a-z0-9]+$/i]
|
||||
})
|
||||
].filter(Boolean), // Filter out any falsey plugin array entries.
|
||||
|
||||
@ -280,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