Compare commits
17 Commits
enter-fix
...
rotation-o
| Author | SHA1 | Date | |
|---|---|---|---|
| fd98d67b3e | |||
| db1db8506e | |||
| 7389c507fb | |||
| 68f0f23016 | |||
| dc809dde30 | |||
| 80dfa03b94 | |||
| fca7a5350d | |||
| 1b693fb57a | |||
| 7723bd3b5f | |||
| 723fc142ec | |||
| 06d4d946d9 | |||
| 428b7d976d | |||
| 32f2b4e573 | |||
| b3ab983f02 | |||
| e011724af4 | |||
| f11a6cb38a | |||
| adf6d3c60d |
@ -4,4 +4,4 @@ node_js:
|
||||
- 10
|
||||
- 8
|
||||
cache: npm
|
||||
script: npm run build || npm run build # scss ts definitions need to be generated before an actual build
|
||||
script: npm run build
|
||||
|
||||
@ -22,9 +22,6 @@ npm install
|
||||
npm run build
|
||||
```
|
||||
|
||||
You'll get an error on first build because of [a stupid bug we haven't fixed
|
||||
yet](https://github.com/GoogleChromeLabs/squoosh/issues/251).
|
||||
|
||||
You can run the development server with:
|
||||
|
||||
```sh
|
||||
|
||||
74
config/add-css-types.js
Normal file
74
config/add-css-types.js
Normal file
@ -0,0 +1,74 @@
|
||||
const DtsCreator = require('typed-css-modules');
|
||||
const chokidar = require('chokidar');
|
||||
const util = require('util');
|
||||
const sass = require('node-sass');
|
||||
|
||||
const sassRender = util.promisify(sass.render);
|
||||
|
||||
async function sassToCss(path) {
|
||||
const result = await sassRender({ file: path });
|
||||
return result.css;
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {Object} Opts
|
||||
* @property {boolean} watch Watch for changes
|
||||
*/
|
||||
/**
|
||||
* Create typing files for CSS & SCSS.
|
||||
*
|
||||
* @param {string[]} rootPaths Paths to search within
|
||||
* @param {Opts} [opts={}] Options.
|
||||
*/
|
||||
function addCssTypes(rootPaths, opts = {}) {
|
||||
return new Promise((resolve) => {
|
||||
const { watch = false } = opts;
|
||||
|
||||
const paths = [];
|
||||
const preReadyPromises = [];
|
||||
let ready = false;
|
||||
|
||||
for (const rootPath of rootPaths) {
|
||||
// Look for scss & css in each path.
|
||||
paths.push(rootPath + '/**/*.scss');
|
||||
paths.push(rootPath + '/**/*.css');
|
||||
}
|
||||
|
||||
// For simplicity, the watcher is used even if we're not watching.
|
||||
// If we're not watching, we stop the watcher after the initial files are found.
|
||||
const watcher = chokidar.watch(paths, {
|
||||
// Avoid processing already-processed files.
|
||||
ignored: '*.d.*',
|
||||
// Without this, travis and netlify builds never complete. I'm not sure why, but it might be
|
||||
// related to https://github.com/paulmillr/chokidar/pull/758
|
||||
persistent: watch,
|
||||
});
|
||||
|
||||
function change(path) {
|
||||
const promise = (async function() {
|
||||
const creator = new DtsCreator({ camelCase: true });
|
||||
const result = path.endsWith('.scss') ?
|
||||
await creator.create(path, await sassToCss(path)) :
|
||||
await creator.create(path);
|
||||
|
||||
await result.writeFile();
|
||||
})();
|
||||
|
||||
if (!ready) preReadyPromises.push(promise);
|
||||
}
|
||||
|
||||
watcher.on('change', change);
|
||||
watcher.on('add', change);
|
||||
|
||||
// 'ready' is when events have been fired for file discovery.
|
||||
watcher.on('ready', () => {
|
||||
ready = true;
|
||||
// Wait for the current set of processing to finish.
|
||||
Promise.all(preReadyPromises).then(resolve);
|
||||
// And if we're not watching, close the watcher.
|
||||
if (!watch) watcher.close();
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = addCssTypes;
|
||||
733
package-lock.json
generated
733
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "squoosh",
|
||||
"version": "1.0.2",
|
||||
"version": "1.2.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -618,12 +618,6 @@
|
||||
"integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
|
||||
"dev": true
|
||||
},
|
||||
"array-filter": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/array-filter/-/array-filter-0.0.1.tgz",
|
||||
"integrity": "sha1-fajPLiZijtcygDWB/SH2fKzS7uw=",
|
||||
"dev": true
|
||||
},
|
||||
"array-find-index": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
|
||||
@ -636,18 +630,6 @@
|
||||
"integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
|
||||
"dev": true
|
||||
},
|
||||
"array-map": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/array-map/-/array-map-0.0.0.tgz",
|
||||
"integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=",
|
||||
"dev": true
|
||||
},
|
||||
"array-reduce": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz",
|
||||
"integrity": "sha1-FziZ0//Rx9k4PkR5Ul2+J4yrXys=",
|
||||
"dev": true
|
||||
},
|
||||
"array-union": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
|
||||
@ -1503,25 +1485,6 @@
|
||||
"babel-types": "^6.24.1"
|
||||
}
|
||||
},
|
||||
"babel-polyfill": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
|
||||
"integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-runtime": "^6.26.0",
|
||||
"core-js": "^2.5.0",
|
||||
"regenerator-runtime": "^0.10.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"regenerator-runtime": {
|
||||
"version": "0.10.5",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
|
||||
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"babel-preset-es2015": {
|
||||
"version": "6.24.1",
|
||||
"resolved": "https://registry.npmjs.org/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz",
|
||||
@ -1853,15 +1816,6 @@
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
||||
"dev": true
|
||||
},
|
||||
"boom": {
|
||||
"version": "2.10.1",
|
||||
"resolved": "http://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
|
||||
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -2176,7 +2130,7 @@
|
||||
},
|
||||
"camelcase-keys": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
|
||||
"integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -2467,12 +2421,6 @@
|
||||
"integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
|
||||
"dev": true
|
||||
},
|
||||
"colour": {
|
||||
"version": "0.7.1",
|
||||
"resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
|
||||
"integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g=",
|
||||
"dev": true
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
|
||||
@ -2832,15 +2780,6 @@
|
||||
"which": "^1.2.9"
|
||||
}
|
||||
},
|
||||
"cryptiles": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "http://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
|
||||
"integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boom": "2.x.x"
|
||||
}
|
||||
},
|
||||
"crypto-browserify": {
|
||||
"version": "3.12.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
|
||||
@ -2970,6 +2909,57 @@
|
||||
"source-list-map": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"css-modules-loader-core": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
|
||||
"integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"icss-replace-symbols": "1.1.0",
|
||||
"postcss": "6.0.1",
|
||||
"postcss-modules-extract-imports": "1.1.0",
|
||||
"postcss-modules-local-by-default": "1.2.0",
|
||||
"postcss-modules-scope": "1.1.0",
|
||||
"postcss-modules-values": "1.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"has-flag": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
|
||||
"integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
|
||||
"integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^1.1.3",
|
||||
"source-map": "^0.5.6",
|
||||
"supports-color": "^3.2.3"
|
||||
}
|
||||
},
|
||||
"postcss-modules-extract-imports": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
|
||||
"integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"postcss": "^6.0.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
|
||||
"integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^1.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"css-select": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
|
||||
@ -4461,22 +4451,6 @@
|
||||
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
|
||||
"dev": true
|
||||
},
|
||||
"event-stream": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.6.tgz",
|
||||
"integrity": "sha512-dGXNg4F/FgVzlApjzItL+7naHutA3fDqbV/zAZqDDlXTjiMnQmZKu+prImWKszeBM5UQeGvAl3u1wBiKeDh61g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"duplexer": "^0.1.1",
|
||||
"flatmap-stream": "^0.1.0",
|
||||
"from": "^0.1.7",
|
||||
"map-stream": "0.0.7",
|
||||
"pause-stream": "^0.0.11",
|
||||
"split": "^1.0.1",
|
||||
"stream-combiner": "^0.2.2",
|
||||
"through": "^2.3.8"
|
||||
}
|
||||
},
|
||||
"eventemitter3": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
|
||||
@ -5010,12 +4984,6 @@
|
||||
"readable-stream": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"flatmap-stream": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/flatmap-stream/-/flatmap-stream-0.1.0.tgz",
|
||||
"integrity": "sha512-Nlic4ZRYxikqnK5rj3YoxDVKGGtUjcNDUtvQ7XsdGLZmMwdUYnXf10o1zcXtzEZTBgc6GxeRpQxV/Wu3WPIIHA==",
|
||||
"dev": true
|
||||
},
|
||||
"flow-parser": {
|
||||
"version": "0.86.0",
|
||||
"resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.86.0.tgz",
|
||||
@ -5116,12 +5084,6 @@
|
||||
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
|
||||
"dev": true
|
||||
},
|
||||
"from": {
|
||||
"version": "0.1.7",
|
||||
"resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
|
||||
"integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
|
||||
"dev": true
|
||||
},
|
||||
"from2": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
|
||||
@ -5722,24 +5684,6 @@
|
||||
"globule": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"generate-function": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
|
||||
"integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-property": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"generate-object-property": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
|
||||
"integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-property": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"get-caller-file": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
|
||||
@ -6246,18 +6190,6 @@
|
||||
"minimalistic-assert": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hawk": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "http://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
|
||||
"integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"boom": "2.x.x",
|
||||
"cryptiles": "2.x.x",
|
||||
"hoek": "2.x.x",
|
||||
"sntp": "1.x.x"
|
||||
}
|
||||
},
|
||||
"he": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
|
||||
@ -6281,12 +6213,6 @@
|
||||
"minimalistic-crypto-utils": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hoek": {
|
||||
"version": "2.16.3",
|
||||
"resolved": "http://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
|
||||
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
|
||||
"dev": true
|
||||
},
|
||||
"home-or-tmp": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
|
||||
@ -6638,15 +6564,6 @@
|
||||
"integrity": "sha512-GguP+DRY+pJ3soyIiGPTvdiVXjZ+DbXOxGpXn3eMvNW4x4irjqXm4wHKscC+TfxSJ0yw/S1F24tqdMNsMZTiLA==",
|
||||
"dev": true
|
||||
},
|
||||
"if-env": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/if-env/-/if-env-1.0.4.tgz",
|
||||
"integrity": "sha1-iytr0wivhqOhm7JzQmdhCFEEh4s=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"npm-run-all": "1.4.0"
|
||||
}
|
||||
},
|
||||
"iferr": {
|
||||
"version": "0.1.5",
|
||||
"resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
|
||||
@ -7122,25 +7039,6 @@
|
||||
"is-extglob": "^2.1.1"
|
||||
}
|
||||
},
|
||||
"is-my-ip-valid": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
|
||||
"integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==",
|
||||
"dev": true
|
||||
},
|
||||
"is-my-json-valid": {
|
||||
"version": "2.19.0",
|
||||
"resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.19.0.tgz",
|
||||
"integrity": "sha512-mG0f/unGX1HZ5ep4uhRaPOS8EkAY8/j6mDRMJrutq4CqhoJWYp7qAlonIPy3TV7p3ju4TK9fo/PbnoksWmsp5Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"generate-function": "^2.0.0",
|
||||
"generate-object-property": "^1.1.0",
|
||||
"is-my-ip-valid": "^1.0.0",
|
||||
"jsonpointer": "^4.0.0",
|
||||
"xtend": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"is-number": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
|
||||
@ -7230,12 +7128,6 @@
|
||||
"integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
|
||||
"dev": true
|
||||
},
|
||||
"is-property": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
|
||||
"integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
|
||||
"dev": true
|
||||
},
|
||||
"is-regex": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
|
||||
@ -7278,6 +7170,12 @@
|
||||
"integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
|
||||
"dev": true
|
||||
},
|
||||
"is-there": {
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/is-there/-/is-there-4.4.3.tgz",
|
||||
"integrity": "sha1-osSTZsakh/cZ28rYDL3iEkjSwY0=",
|
||||
"dev": true
|
||||
},
|
||||
"is-typedarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
|
||||
@ -9416,18 +9314,6 @@
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
|
||||
"dev": true
|
||||
},
|
||||
"jsonify": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
||||
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
||||
"dev": true
|
||||
},
|
||||
"jsonpointer": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
|
||||
"integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
|
||||
"dev": true
|
||||
},
|
||||
"jsprim": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
|
||||
@ -9757,12 +9643,6 @@
|
||||
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
|
||||
"dev": true
|
||||
},
|
||||
"map-stream": {
|
||||
"version": "0.0.7",
|
||||
"resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
|
||||
"integrity": "sha1-ih8HiW2CsQkmvTdEokIACfiJdKg=",
|
||||
"dev": true
|
||||
},
|
||||
"map-visit": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
|
||||
@ -9888,7 +9768,7 @@
|
||||
},
|
||||
"meow": {
|
||||
"version": "3.7.0",
|
||||
"resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
|
||||
"integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -9906,7 +9786,7 @@
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
|
||||
"dev": true
|
||||
}
|
||||
@ -10272,7 +10152,7 @@
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
|
||||
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
|
||||
"dev": true
|
||||
}
|
||||
@ -10345,9 +10225,9 @@
|
||||
}
|
||||
},
|
||||
"node-sass": {
|
||||
"version": "4.9.0",
|
||||
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.0.tgz",
|
||||
"integrity": "sha512-QFHfrZl6lqRU3csypwviz2XLgGNOoWQbo2GOvtsfQqOfL4cy1BtWnhx/XUeAO9LT3ahBzSRXcEO6DdvAH9DzSg==",
|
||||
"version": "4.11.0",
|
||||
"resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
|
||||
"integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async-foreach": "^0.1.3",
|
||||
@ -10363,31 +10243,25 @@
|
||||
"meow": "^3.7.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"nan": "^2.10.0",
|
||||
"node-gyp": "^3.3.1",
|
||||
"node-gyp": "^3.8.0",
|
||||
"npmlog": "^4.0.0",
|
||||
"request": "~2.79.0",
|
||||
"request": "^2.88.0",
|
||||
"sass-graph": "^2.2.4",
|
||||
"stdout-stream": "^1.4.0",
|
||||
"true-case-path": "^1.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"assert-plus": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
|
||||
"integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
|
||||
"dev": true
|
||||
},
|
||||
"aws-sign2": {
|
||||
"version": "0.6.0",
|
||||
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
|
||||
"integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
|
||||
"dev": true
|
||||
},
|
||||
"caseless": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
|
||||
"integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
|
||||
"dev": true
|
||||
"ajv": {
|
||||
"version": "6.5.5",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.5.tgz",
|
||||
"integrity": "sha512-7q7gtRQDJSyuEHjuVgHoUa2VuemFiCMrfQc9Tc08XTAc4Zj/5U1buQJ0HU6i7fKjXU09SVgSmxa4sLvuvS8Iyg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"fast-deep-equal": "^2.0.1",
|
||||
"fast-json-stable-stringify": "^2.0.0",
|
||||
"json-schema-traverse": "^0.4.1",
|
||||
"uri-js": "^4.2.2"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "3.0.1",
|
||||
@ -10399,17 +10273,6 @@
|
||||
"which": "^1.2.9"
|
||||
}
|
||||
},
|
||||
"form-data": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
|
||||
"integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.5",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
},
|
||||
"get-stdin": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
|
||||
@ -10417,67 +10280,64 @@
|
||||
"dev": true
|
||||
},
|
||||
"har-validator": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "http://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
|
||||
"integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
|
||||
"integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^1.1.1",
|
||||
"commander": "^2.9.0",
|
||||
"is-my-json-valid": "^2.12.4",
|
||||
"pinkie-promise": "^2.0.0"
|
||||
"ajv": "^6.5.5",
|
||||
"har-schema": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"http-signature": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
|
||||
"integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"assert-plus": "^0.2.0",
|
||||
"jsprim": "^1.2.2",
|
||||
"sshpk": "^1.7.0"
|
||||
}
|
||||
"oauth-sign": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
|
||||
"integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
|
||||
"dev": true
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.3.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",
|
||||
"integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw=",
|
||||
"punycode": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
|
||||
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
|
||||
"dev": true
|
||||
},
|
||||
"request": {
|
||||
"version": "2.79.0",
|
||||
"resolved": "http://registry.npmjs.org/request/-/request-2.79.0.tgz",
|
||||
"integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
|
||||
"version": "2.88.0",
|
||||
"resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
|
||||
"integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"aws-sign2": "~0.6.0",
|
||||
"aws4": "^1.2.1",
|
||||
"caseless": "~0.11.0",
|
||||
"combined-stream": "~1.0.5",
|
||||
"extend": "~3.0.0",
|
||||
"aws-sign2": "~0.7.0",
|
||||
"aws4": "^1.8.0",
|
||||
"caseless": "~0.12.0",
|
||||
"combined-stream": "~1.0.6",
|
||||
"extend": "~3.0.2",
|
||||
"forever-agent": "~0.6.1",
|
||||
"form-data": "~2.1.1",
|
||||
"har-validator": "~2.0.6",
|
||||
"hawk": "~3.1.3",
|
||||
"http-signature": "~1.1.0",
|
||||
"form-data": "~2.3.2",
|
||||
"har-validator": "~5.1.0",
|
||||
"http-signature": "~1.2.0",
|
||||
"is-typedarray": "~1.0.0",
|
||||
"isstream": "~0.1.2",
|
||||
"json-stringify-safe": "~5.0.1",
|
||||
"mime-types": "~2.1.7",
|
||||
"oauth-sign": "~0.8.1",
|
||||
"qs": "~6.3.0",
|
||||
"stringstream": "~0.0.4",
|
||||
"tough-cookie": "~2.3.0",
|
||||
"tunnel-agent": "~0.4.1",
|
||||
"uuid": "^3.0.0"
|
||||
"mime-types": "~2.1.19",
|
||||
"oauth-sign": "~0.9.0",
|
||||
"performance-now": "^2.1.0",
|
||||
"qs": "~6.5.2",
|
||||
"safe-buffer": "^5.1.2",
|
||||
"tough-cookie": "~2.4.3",
|
||||
"tunnel-agent": "^0.6.0",
|
||||
"uuid": "^3.3.2"
|
||||
}
|
||||
},
|
||||
"tunnel-agent": {
|
||||
"version": "0.4.3",
|
||||
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
|
||||
"integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
|
||||
"dev": true
|
||||
"tough-cookie": {
|
||||
"version": "2.4.3",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz",
|
||||
"integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"psl": "^1.1.24",
|
||||
"punycode": "^1.4.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -10557,19 +10417,6 @@
|
||||
"sort-keys": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"npm-run-all": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-1.4.0.tgz",
|
||||
"integrity": "sha1-pGm7n+q+W/OqmRaDO69ndlguiUg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"babel-polyfill": "^6.2.0",
|
||||
"minimatch": "^3.0.0",
|
||||
"ps-tree": "^1.0.1",
|
||||
"shell-quote": "^1.4.3",
|
||||
"which": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
|
||||
@ -11113,15 +10960,6 @@
|
||||
"pify": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"pause-stream": {
|
||||
"version": "0.0.11",
|
||||
"resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
|
||||
"integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"through": "~2.3"
|
||||
}
|
||||
},
|
||||
"pbkdf2": {
|
||||
"version": "3.0.17",
|
||||
"resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
|
||||
@ -11995,15 +11833,6 @@
|
||||
"integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
|
||||
"dev": true
|
||||
},
|
||||
"ps-tree": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.1.0.tgz",
|
||||
"integrity": "sha1-tCGyQUDWID8e08dplrRCewjowBQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"event-stream": "~3.3.0"
|
||||
}
|
||||
},
|
||||
"pseudomap": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
|
||||
@ -12797,7 +12626,7 @@
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.4.4",
|
||||
"resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
|
||||
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -12972,18 +12801,6 @@
|
||||
"integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
|
||||
"dev": true
|
||||
},
|
||||
"shell-quote": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.6.1.tgz",
|
||||
"integrity": "sha1-9HgZSczkAmlxJ0MOo7PFR29IF2c=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"array-filter": "~0.0.0",
|
||||
"array-map": "~0.0.0",
|
||||
"array-reduce": "~0.0.0",
|
||||
"jsonify": "~0.0.0"
|
||||
}
|
||||
},
|
||||
"shelljs": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.3.tgz",
|
||||
@ -13149,15 +12966,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"sntp": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "http://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
|
||||
"integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hoek": "2.x.x"
|
||||
}
|
||||
},
|
||||
"sockjs": {
|
||||
"version": "0.3.19",
|
||||
"resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
|
||||
@ -13328,15 +13136,6 @@
|
||||
"wbuf": "^1.7.2"
|
||||
}
|
||||
},
|
||||
"split": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
|
||||
"integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"through": "2"
|
||||
}
|
||||
},
|
||||
"split-string": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
|
||||
@ -13442,16 +13241,6 @@
|
||||
"readable-stream": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"stream-combiner": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "http://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
|
||||
"integrity": "sha1-rsjLrBd7Vrb0+kec7YwZEs7lKFg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"duplexer": "~0.1.1",
|
||||
"through": "~2.3.4"
|
||||
}
|
||||
},
|
||||
"stream-each": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
|
||||
@ -13540,12 +13329,6 @@
|
||||
"safe-buffer": "~5.1.0"
|
||||
}
|
||||
},
|
||||
"stringstream": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
|
||||
"integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA==",
|
||||
"dev": true
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
@ -13726,7 +13509,7 @@
|
||||
},
|
||||
"tar": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
|
||||
"resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
|
||||
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
@ -14506,6 +14289,247 @@
|
||||
"mime-types": "~2.1.18"
|
||||
}
|
||||
},
|
||||
"typed-css-modules": {
|
||||
"version": "0.3.7",
|
||||
"resolved": "https://registry.npmjs.org/typed-css-modules/-/typed-css-modules-0.3.7.tgz",
|
||||
"integrity": "sha512-KR1VG/U0rgFWaiQtXKtFMgKaurs80nvlBvZ7BfuYGLldw6kss/97sd+aMG4CI73BbujvefG7DBjnsBqq2Aowcw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase": "^4.1.0",
|
||||
"chalk": "^2.1.0",
|
||||
"chokidar": "^2.0.3",
|
||||
"css-modules-loader-core": "^1.1.0",
|
||||
"glob": "^7.1.2",
|
||||
"is-there": "^4.4.2",
|
||||
"mkdirp": "^0.5.1",
|
||||
"yargs": "^8.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-regex": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"camelcase": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
|
||||
"integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
|
||||
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^3.2.1",
|
||||
"escape-string-regexp": "^1.0.5",
|
||||
"supports-color": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
|
||||
"integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lru-cache": "^4.0.1",
|
||||
"shebang-command": "^1.2.0",
|
||||
"which": "^1.2.9"
|
||||
}
|
||||
},
|
||||
"execa": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
|
||||
"integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cross-spawn": "^5.0.1",
|
||||
"get-stream": "^3.0.0",
|
||||
"is-stream": "^1.1.0",
|
||||
"npm-run-path": "^2.0.0",
|
||||
"p-finally": "^1.0.0",
|
||||
"signal-exit": "^3.0.0",
|
||||
"strip-eof": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"get-stream": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
|
||||
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
|
||||
"dev": true
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
|
||||
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
|
||||
"dev": true
|
||||
},
|
||||
"load-json-file": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
|
||||
"integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"graceful-fs": "^4.1.2",
|
||||
"parse-json": "^2.2.0",
|
||||
"pify": "^2.0.0",
|
||||
"strip-bom": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"mem": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
|
||||
"integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"mimic-fn": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"os-locale": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
|
||||
"integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"execa": "^0.7.0",
|
||||
"lcid": "^1.0.0",
|
||||
"mem": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"parse-json": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
|
||||
"integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"error-ex": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"path-type": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
|
||||
"integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"pify": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"pify": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
|
||||
"dev": true
|
||||
},
|
||||
"read-pkg": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
|
||||
"integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"load-json-file": "^2.0.0",
|
||||
"normalize-package-data": "^2.3.2",
|
||||
"path-type": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"read-pkg-up": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
|
||||
"integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"find-up": "^2.0.0",
|
||||
"read-pkg": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"string-width": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
|
||||
"integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-fullwidth-code-point": "^2.0.0",
|
||||
"strip-ansi": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"strip-ansi": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"strip-bom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
|
||||
"integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.5.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"which-module": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
|
||||
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
|
||||
"dev": true
|
||||
},
|
||||
"y18n": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
|
||||
"integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
|
||||
"dev": true
|
||||
},
|
||||
"yargs": {
|
||||
"version": "8.0.2",
|
||||
"resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
|
||||
"integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase": "^4.1.0",
|
||||
"cliui": "^3.2.0",
|
||||
"decamelize": "^1.1.1",
|
||||
"get-caller-file": "^1.0.1",
|
||||
"os-locale": "^2.0.0",
|
||||
"read-pkg-up": "^2.0.0",
|
||||
"require-directory": "^2.1.1",
|
||||
"require-main-filename": "^1.0.1",
|
||||
"set-blocking": "^2.0.0",
|
||||
"string-width": "^2.0.0",
|
||||
"which-module": "^2.0.0",
|
||||
"y18n": "^3.2.1",
|
||||
"yargs-parser": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"yargs-parser": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-7.0.0.tgz",
|
||||
"integrity": "sha1-jQrELxbqVd69MyyvTEA4s+P139k=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"camelcase": "^4.1.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"typedarray": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
|
||||
@ -14518,37 +14542,6 @@
|
||||
"integrity": "sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==",
|
||||
"dev": true
|
||||
},
|
||||
"typings-for-css-modules-loader": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/typings-for-css-modules-loader/-/typings-for-css-modules-loader-1.7.0.tgz",
|
||||
"integrity": "sha512-Mp7zDrcUmbUKl3JTLamTsMX+lntMotEm5I05j2RHB5EHb0WL1dAXlynpdlGR5Ye/QTvtL5w+RGB2jP32YoUpZw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"colour": "0.7.1",
|
||||
"graceful-fs": "4.1.4",
|
||||
"loader-utils": "0.2.16"
|
||||
},
|
||||
"dependencies": {
|
||||
"graceful-fs": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.4.tgz",
|
||||
"integrity": "sha1-7widKIDwM7ARgjzlyPrnmNp3Xb0=",
|
||||
"dev": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "0.2.16",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.16.tgz",
|
||||
"integrity": "sha1-8IYyBm7YKCg13/iN+1JwR2Wt7m0=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "^3.1.3",
|
||||
"emojis-list": "^2.0.0",
|
||||
"json5": "^0.5.0",
|
||||
"object-assign": "^4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.9",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "squoosh",
|
||||
"version": "1.0.2",
|
||||
"version": "1.2.2",
|
||||
"license": "apache-2.0",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server --host 0.0.0.0 --hot",
|
||||
@ -21,6 +21,7 @@
|
||||
"@webcomponents/custom-elements": "^1.2.1",
|
||||
"@webpack-cli/serve": "^0.1.2",
|
||||
"assets-webpack-plugin": "^3.9.7",
|
||||
"chokidar": "^2.0.4",
|
||||
"classnames": "^2.2.6",
|
||||
"clean-webpack-plugin": "^1.0.0",
|
||||
"comlink": "^3.0.3",
|
||||
@ -34,12 +35,11 @@
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"husky": "^1.1.4",
|
||||
"idb-keyval": "^3.1.0",
|
||||
"if-env": "^1.0.4",
|
||||
"linkstate": "^1.1.1",
|
||||
"loader-utils": "^1.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.4",
|
||||
"minimatch": "^3.0.4",
|
||||
"node-sass": "^4.9.0",
|
||||
"node-sass": "^4.11.0",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.1",
|
||||
"pointer-tracker": "^2.0.3",
|
||||
"preact": "^8.3.1",
|
||||
@ -57,8 +57,8 @@
|
||||
"tslint-config-airbnb": "^5.11.0",
|
||||
"tslint-config-semistandard": "^7.0.0",
|
||||
"tslint-react": "^3.6.0",
|
||||
"typed-css-modules": "^0.3.7",
|
||||
"typescript": "^3.1.6",
|
||||
"typings-for-css-modules-loader": "^1.7.0",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.25.1",
|
||||
"webpack-bundle-analyzer": "^3.0.3",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind } from '../../lib/initial-util';
|
||||
import { inputFieldValueAsNumber, konami } from '../../lib/util';
|
||||
import { inputFieldValueAsNumber, konami, preventDefault } from '../../lib/util';
|
||||
import { QuantizeOptions } from './processor-meta';
|
||||
import * as style from '../../components/Options/style.scss';
|
||||
import Expander from '../../components/expander';
|
||||
@ -42,7 +42,7 @@ export default class QuantizerOptions extends Component<Props, State> {
|
||||
|
||||
render({ options }: Props, { extendedSettings }: State) {
|
||||
return (
|
||||
<form class={style.optionsSection}>
|
||||
<form class={style.optionsSection} onSubmit={preventDefault}>
|
||||
<Expander>
|
||||
{extendedSettings ?
|
||||
<label class={style.optionTextFirst}>
|
||||
|
||||
9
src/codecs/input-processors.ts
Normal file
9
src/codecs/input-processors.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { defaultOptions as rotateDefaultOptions } from './rotate/processor-meta';
|
||||
|
||||
export interface InputProcessorState {
|
||||
rotate: import('./rotate/processor-meta').RotateOptions;
|
||||
}
|
||||
|
||||
export const defaultInputProcessorState: InputProcessorState = {
|
||||
rotate: rotateDefaultOptions,
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind } from '../../lib/initial-util';
|
||||
import { inputFieldChecked, inputFieldValueAsNumber } from '../../lib/util';
|
||||
import { inputFieldChecked, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
|
||||
import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
|
||||
import * as style from '../../components/Options/style.scss';
|
||||
import Checkbox from '../../components/checkbox';
|
||||
@ -58,7 +58,7 @@ export default class MozJPEGEncoderOptions extends Component<Props, State> {
|
||||
// I'm rendering both lossy and lossless forms, as it becomes much easier when
|
||||
// gathering the data.
|
||||
return (
|
||||
<form class={style.optionsSection}>
|
||||
<form class={style.optionsSection} onSubmit={preventDefault}>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="quality"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind } from '../../lib/initial-util';
|
||||
import { inputFieldValueAsNumber } from '../../lib/util';
|
||||
import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
|
||||
import { EncodeOptions } from './encoder-meta';
|
||||
import Range from '../../components/range';
|
||||
import * as style from '../../components/Options/style.scss';
|
||||
@ -23,7 +23,7 @@ export default class OptiPNGEncoderOptions extends Component<Props, {}> {
|
||||
|
||||
render({ options }: Props) {
|
||||
return (
|
||||
<form class={style.optionsSection}>
|
||||
<form class={style.optionsSection} onSubmit={preventDefault}>
|
||||
<div class={style.optionOneCell}>
|
||||
<Range
|
||||
name="level"
|
||||
|
||||
@ -1,43 +1,52 @@
|
||||
import { expose } from 'comlink';
|
||||
import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
|
||||
import { QuantizeOptions } from './imagequant/processor-meta';
|
||||
import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
|
||||
import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
|
||||
|
||||
async function mozjpegEncode(
|
||||
data: ImageData, options: MozJPEGEncoderOptions,
|
||||
data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
|
||||
): Promise<ArrayBuffer> {
|
||||
const { encode } = await import(
|
||||
/* webpackChunkName: "process-mozjpeg-enc" */
|
||||
'./mozjpeg/encoder',
|
||||
'../mozjpeg/encoder',
|
||||
);
|
||||
return encode(data, options);
|
||||
}
|
||||
|
||||
async function quantize(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
|
||||
async function quantize(
|
||||
data: ImageData, opts: import('../imagequant/processor-meta').QuantizeOptions,
|
||||
): Promise<ImageData> {
|
||||
const { process } = await import(
|
||||
/* webpackChunkName: "process-imagequant" */
|
||||
'./imagequant/processor',
|
||||
'../imagequant/processor',
|
||||
);
|
||||
return process(data, opts);
|
||||
}
|
||||
|
||||
async function rotate(
|
||||
data: ImageData, opts: import('../rotate/processor-meta').RotateOptions,
|
||||
): Promise<ImageData> {
|
||||
const { rotate } = await import(
|
||||
/* webpackChunkName: "process-rotate" */
|
||||
'../rotate/processor',
|
||||
);
|
||||
|
||||
return rotate(data, opts);
|
||||
}
|
||||
|
||||
async function optiPngEncode(
|
||||
data: BufferSource, options: OptiPNGEncoderOptions,
|
||||
data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
|
||||
): Promise<ArrayBuffer> {
|
||||
const { compress } = await import(
|
||||
/* webpackChunkName: "process-optipng" */
|
||||
'./optipng/encoder',
|
||||
'../optipng/encoder',
|
||||
);
|
||||
return compress(data, options);
|
||||
}
|
||||
|
||||
async function webpEncode(
|
||||
data: ImageData, options: WebPEncoderOptions,
|
||||
data: ImageData, options: import('../webp/encoder-meta').EncodeOptions,
|
||||
): Promise<ArrayBuffer> {
|
||||
const { encode } = await import(
|
||||
/* webpackChunkName: "process-webp-enc" */
|
||||
'./webp/encoder',
|
||||
'../webp/encoder',
|
||||
);
|
||||
return encode(data, options);
|
||||
}
|
||||
@ -45,12 +54,12 @@ async function webpEncode(
|
||||
async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
|
||||
const { decode } = await import(
|
||||
/* webpackChunkName: "process-webp-dec" */
|
||||
'./webp/decoder',
|
||||
'../webp/decoder',
|
||||
);
|
||||
return decode(data);
|
||||
}
|
||||
|
||||
const exports = { mozjpegEncode, quantize, optiPngEncode, webpEncode, webpDecode };
|
||||
const exports = { mozjpegEncode, quantize, rotate, optiPngEncode, webpEncode, webpDecode };
|
||||
export type ProcessorWorkerApi = typeof exports;
|
||||
|
||||
expose(exports, self);
|
||||
18
src/codecs/processor-worker/tsconfig.json
Normal file
18
src/codecs/processor-worker/tsconfig.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"lib": [
|
||||
"webworker",
|
||||
"esnext"
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"noUnusedLocals": true,
|
||||
"sourceMap": true,
|
||||
"allowJs": false,
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,5 @@
|
||||
import { proxy } from 'comlink';
|
||||
import { QuantizeOptions } from './imagequant/processor-meta';
|
||||
import { ProcessorWorkerApi } from './processor-worker';
|
||||
import { canvasEncode, blobToArrayBuffer } from '../lib/util';
|
||||
import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
|
||||
import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
|
||||
@ -18,8 +17,10 @@ import * as browserTIFF from './browser-tiff/encoder';
|
||||
import * as browserJP2 from './browser-jp2/encoder';
|
||||
import * as browserPDF from './browser-pdf/encoder';
|
||||
|
||||
type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
|
||||
|
||||
/** How long the worker should be idle before terminating. */
|
||||
const workerTimeout = 1000;
|
||||
const workerTimeout = 10000;
|
||||
|
||||
interface ProcessingJobOptions {
|
||||
needsWorker?: boolean;
|
||||
@ -62,7 +63,7 @@ export default class Processor {
|
||||
// @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
|
||||
// definition can't be overwritten.
|
||||
this._worker = new Worker(
|
||||
'./processor-worker.ts',
|
||||
'./processor-worker',
|
||||
{ name: 'processor-worker', type: 'module' },
|
||||
) as Worker;
|
||||
// Need to do some TypeScript trickery to make the type match.
|
||||
@ -117,12 +118,18 @@ export default class Processor {
|
||||
}
|
||||
|
||||
// Off main thread jobs:
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
|
||||
return this._workerApi!.quantize(data, opts);
|
||||
}
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
rotate(
|
||||
data: ImageData, opts: import('./rotate/processor-meta').RotateOptions,
|
||||
): Promise<ImageData> {
|
||||
return this._workerApi!.rotate(data, opts);
|
||||
}
|
||||
|
||||
@Processor._processingJob({ needsWorker: true })
|
||||
mozjpegEncode(
|
||||
data: ImageData, opts: MozJPEGEncoderOptions,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { h, Component } from 'preact';
|
||||
import linkState from 'linkstate';
|
||||
import { bind, linkRef } from '../../lib/initial-util';
|
||||
import { inputFieldValueAsNumber, inputFieldValue } from '../../lib/util';
|
||||
import { inputFieldValueAsNumber, inputFieldValue, preventDefault } from '../../lib/util';
|
||||
import { ResizeOptions } from './processor-meta';
|
||||
import * as style from '../../components/Options/style.scss';
|
||||
import Checkbox from '../../components/checkbox';
|
||||
@ -78,7 +78,7 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
|
||||
render({ options, isVector }: Props, { maintainAspect }: State) {
|
||||
return (
|
||||
<form ref={linkRef(this, 'form')} class={style.optionsSection}>
|
||||
<form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}>
|
||||
<label class={style.optionTextFirst}>
|
||||
Method:
|
||||
<Select
|
||||
@ -135,7 +135,7 @@ export default class ResizerOptions extends Component<Props, State> {
|
||||
onChange={this.onChange}
|
||||
>
|
||||
<option value="stretch">Stretch</option>
|
||||
<option value="cover">Cover</option>
|
||||
<option value="contain">Contain</option>
|
||||
</Select>
|
||||
</label>
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ export interface ResizeOptions {
|
||||
width: number;
|
||||
height: number;
|
||||
method: 'vector' | BitmapResizeMethods;
|
||||
fitMethod: 'stretch' | 'cover';
|
||||
fitMethod: 'stretch' | 'contain';
|
||||
}
|
||||
|
||||
export interface BitmapResizeOptions extends ResizeOptions {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { nativeResize, NativeResizeMethod, drawableToImageData } from '../../lib/util';
|
||||
import { BitmapResizeOptions, VectorResizeOptions } from './processor-meta';
|
||||
|
||||
function getCoverOffsets(sw: number, sh: number, dw: number, dh: number) {
|
||||
function getContainOffsets(sw: number, sh: number, dw: number, dh: number) {
|
||||
const currentAspect = sw / sh;
|
||||
const endAspect = dw / dh;
|
||||
|
||||
@ -22,8 +22,8 @@ export function resize(data: ImageData, opts: BitmapResizeOptions): ImageData {
|
||||
let sw = data.width;
|
||||
let sh = data.height;
|
||||
|
||||
if (opts.fitMethod === 'cover') {
|
||||
({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
|
||||
if (opts.fitMethod === 'contain') {
|
||||
({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
|
||||
}
|
||||
|
||||
return nativeResize(
|
||||
@ -38,8 +38,8 @@ export function vectorResize(data: HTMLImageElement, opts: VectorResizeOptions):
|
||||
let sw = data.width;
|
||||
let sh = data.height;
|
||||
|
||||
if (opts.fitMethod === 'cover') {
|
||||
({ sx, sy, sw, sh } = getCoverOffsets(sw, sh, opts.width, opts.height));
|
||||
if (opts.fitMethod === 'contain') {
|
||||
({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
|
||||
}
|
||||
|
||||
return drawableToImageData(data, {
|
||||
|
||||
5
src/codecs/rotate/processor-meta.ts
Normal file
5
src/codecs/rotate/processor-meta.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface RotateOptions {
|
||||
rotate: 0 | 90 | 180 | 270;
|
||||
}
|
||||
|
||||
export const defaultOptions: RotateOptions = { rotate: 0 };
|
||||
76
src/codecs/rotate/processor.ts
Normal file
76
src/codecs/rotate/processor.ts
Normal file
@ -0,0 +1,76 @@
|
||||
import { RotateOptions } from './processor-meta';
|
||||
|
||||
const bpp = 4;
|
||||
|
||||
export function rotate(data: ImageData, opts: RotateOptions): ImageData {
|
||||
const { rotate } = opts;
|
||||
const flipDimensions = rotate % 180 !== 0;
|
||||
const { width: inputWidth, height: inputHeight } = data;
|
||||
const outputWidth = flipDimensions ? inputHeight : inputWidth;
|
||||
const outputHeight = flipDimensions ? inputWidth : inputHeight;
|
||||
const out = new ImageData(outputWidth, outputHeight);
|
||||
let i = 0;
|
||||
|
||||
// In the straight-copy case, d1 is x, d2 is y.
|
||||
// x starts at 0 and increases.
|
||||
// y starts at 0 and increases.
|
||||
let d1Start = 0;
|
||||
let d1Limit = inputWidth;
|
||||
let d1Advance = 1;
|
||||
let d1Multiplier = 1;
|
||||
let d2Start = 0;
|
||||
let d2Limit = inputHeight;
|
||||
let d2Advance = 1;
|
||||
let d2Multiplier = inputWidth;
|
||||
|
||||
if (rotate === 90) {
|
||||
// d1 is y, d2 is x.
|
||||
// y starts at its max value and decreases.
|
||||
// x starts at 0 and increases.
|
||||
d1Start = inputHeight - 1;
|
||||
d1Limit = inputHeight;
|
||||
d1Advance = -1;
|
||||
d1Multiplier = inputWidth;
|
||||
d2Start = 0;
|
||||
d2Limit = inputWidth;
|
||||
d2Advance = 1;
|
||||
d2Multiplier = 1;
|
||||
} else if (rotate === 180) {
|
||||
// d1 is x, d2 is y.
|
||||
// x starts at its max and decreases.
|
||||
// y starts at its max and decreases.
|
||||
d1Start = inputWidth - 1;
|
||||
d1Limit = inputWidth;
|
||||
d1Advance = -1;
|
||||
d1Multiplier = 1;
|
||||
d2Start = inputHeight - 1;
|
||||
d2Limit = inputHeight;
|
||||
d2Advance = -1;
|
||||
d2Multiplier = inputWidth;
|
||||
} else if (rotate === 270) {
|
||||
// d1 is y, d2 is x.
|
||||
// y starts at 0 and increases.
|
||||
// x starts at its max and decreases.
|
||||
d1Start = 0;
|
||||
d1Limit = inputHeight;
|
||||
d1Advance = 1;
|
||||
d1Multiplier = inputWidth;
|
||||
d2Start = inputWidth - 1;
|
||||
d2Limit = inputWidth;
|
||||
d2Advance = -1;
|
||||
d2Multiplier = 1;
|
||||
}
|
||||
|
||||
for (let d2 = d2Start; d2 >= 0 && d2 < d2Limit; d2 += d2Advance) {
|
||||
for (let d1 = d1Start; d1 >= 0 && d1 < d1Limit; d1 += d1Advance) {
|
||||
// Iterate over channels:
|
||||
const start = ((d1 * d1Multiplier) + (d2 * d2Multiplier)) * bpp;
|
||||
for (let j = 0; j < bpp; j += 1) {
|
||||
out.data[i] = data.data[start + j];
|
||||
i += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return out;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { h, Component } from 'preact';
|
||||
import { bind } from '../../lib/initial-util';
|
||||
import { inputFieldCheckedAsNumber, inputFieldValueAsNumber } from '../../lib/util';
|
||||
import { inputFieldCheckedAsNumber, inputFieldValueAsNumber, preventDefault } from '../../lib/util';
|
||||
import { EncodeOptions, WebPImageHint } from './encoder-meta';
|
||||
import * as style from '../../components/Options/style.scss';
|
||||
import Checkbox from '../../components/checkbox';
|
||||
@ -319,7 +319,7 @@ export default class WebPEncoderOptions extends Component<Props, State> {
|
||||
// I'm rendering both lossy and lossless forms, as it becomes much easier when
|
||||
// gathering the data.
|
||||
return (
|
||||
<form class={style.optionsSection}>
|
||||
<form class={style.optionsSection} onSubmit={preventDefault}>
|
||||
<label class={style.optionInputFirst}>
|
||||
<Checkbox
|
||||
name="lossless"
|
||||
|
||||
@ -9,9 +9,6 @@ import '../../lib/SnackBar';
|
||||
import Intro from '../intro';
|
||||
import '../custom-els/LoadingSpinner';
|
||||
|
||||
// This is imported for TypeScript only. It isn't used.
|
||||
import Compress from '../compress';
|
||||
|
||||
const compressPromise = import(
|
||||
/* webpackChunkName: "main-app" */
|
||||
'../compress',
|
||||
@ -21,17 +18,11 @@ const offlinerPromise = import(
|
||||
'../../lib/offliner',
|
||||
);
|
||||
|
||||
export interface SourceImage {
|
||||
file: File | Fileish;
|
||||
data: ImageData;
|
||||
vectorImage?: HTMLImageElement;
|
||||
}
|
||||
|
||||
interface Props {}
|
||||
|
||||
interface State {
|
||||
file?: File | Fileish;
|
||||
Compress?: typeof Compress;
|
||||
Compress?: typeof import('../compress').default;
|
||||
}
|
||||
|
||||
export default class App extends Component<Props, State> {
|
||||
|
||||
@ -35,7 +35,7 @@ import {
|
||||
import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
|
||||
import { ResizeOptions } from '../../codecs/resize/processor-meta';
|
||||
import { PreprocessorState } from '../../codecs/preprocessors';
|
||||
import { SourceImage } from '../App';
|
||||
import { SourceImage } from '../compress';
|
||||
import Checkbox from '../checkbox';
|
||||
import Expander from '../expander';
|
||||
import Select from '../select';
|
||||
@ -81,7 +81,7 @@ export default class Options extends Component<Props, State> {
|
||||
}
|
||||
|
||||
@bind
|
||||
onEncoderTypeChange(event: Event) {
|
||||
private onEncoderTypeChange(event: Event) {
|
||||
const el = event.currentTarget as HTMLSelectElement;
|
||||
|
||||
// The select element only has values matching encoder types,
|
||||
@ -91,7 +91,7 @@ export default class Options extends Component<Props, State> {
|
||||
}
|
||||
|
||||
@bind
|
||||
onPreprocessorEnabledChange(event: Event) {
|
||||
private onPreprocessorEnabledChange(event: Event) {
|
||||
const el = event.currentTarget as HTMLInputElement;
|
||||
const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;
|
||||
|
||||
@ -101,14 +101,14 @@ export default class Options extends Component<Props, State> {
|
||||
}
|
||||
|
||||
@bind
|
||||
onQuantizerOptionsChange(opts: QuantizeOptions) {
|
||||
private onQuantizerOptionsChange(opts: QuantizeOptions) {
|
||||
this.props.onPreprocessorOptionsChange(
|
||||
cleanMerge(this.props.preprocessorState, 'quantizer', opts),
|
||||
);
|
||||
}
|
||||
|
||||
@bind
|
||||
onResizeOptionsChange(opts: ResizeOptions) {
|
||||
private onResizeOptionsChange(opts: ResizeOptions) {
|
||||
this.props.onPreprocessorOptionsChange(
|
||||
cleanMerge(this.props.preprocessorState, 'resize', opts),
|
||||
);
|
||||
@ -144,7 +144,7 @@ export default class Options extends Component<Props, State> {
|
||||
{preprocessorState.resize.enabled ?
|
||||
<ResizeOptionsComponent
|
||||
isVector={Boolean(source && source.vectorImage)}
|
||||
aspect={source ? (source.data.width / source.data.height) : 1}
|
||||
aspect={source ? source.processed.width / source.processed.height : 1}
|
||||
options={preprocessorState.resize}
|
||||
onChange={this.onResizeOptionsChange}
|
||||
/>
|
||||
|
||||
@ -5,17 +5,29 @@ import './custom-els/TwoUp';
|
||||
import * as style from './style.scss';
|
||||
import { bind, linkRef } from '../../lib/initial-util';
|
||||
import { shallowEqual, drawDataToCanvas } from '../../lib/util';
|
||||
import { ToggleIcon, AddIcon, RemoveIcon, BackIcon } from '../../lib/icons';
|
||||
import {
|
||||
ToggleBackgroundIcon,
|
||||
AddIcon,
|
||||
RemoveIcon,
|
||||
BackIcon,
|
||||
ToggleBackgroundActiveIcon,
|
||||
RotateIcon,
|
||||
} from '../../lib/icons';
|
||||
import { twoUpHandle } from './custom-els/TwoUp/styles.css';
|
||||
import { InputProcessorState } from '../../codecs/input-processors';
|
||||
import { cleanSet } from '../../lib/clean-modify';
|
||||
import { SourceImage } from '../compress';
|
||||
|
||||
interface Props {
|
||||
originalImage?: ImageData;
|
||||
source?: SourceImage;
|
||||
inputProcessorState?: InputProcessorState;
|
||||
mobileView: boolean;
|
||||
leftCompressed?: ImageData;
|
||||
rightCompressed?: ImageData;
|
||||
leftImgContain: boolean;
|
||||
rightImgContain: boolean;
|
||||
onBack: () => void;
|
||||
onInputProcessorChange: (newState: InputProcessorState) => void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
@ -70,6 +82,38 @@ export default class Output extends Component<Props, State> {
|
||||
const prevRightDraw = this.rightDrawable(prevProps);
|
||||
const leftDraw = this.leftDrawable();
|
||||
const rightDraw = this.rightDrawable();
|
||||
const sourceFileChanged =
|
||||
// Has the value become (un)defined?
|
||||
(!!this.props.source !== !!prevProps.source) ||
|
||||
// Or has the file changed?
|
||||
(this.props.source && prevProps.source && this.props.source.file !== prevProps.source.file);
|
||||
|
||||
const oldSourceData = prevProps.source && prevProps.source.processed;
|
||||
const newSourceData = this.props.source && this.props.source.processed;
|
||||
const pinchZoom = this.pinchZoomLeft!;
|
||||
|
||||
if (sourceFileChanged) {
|
||||
// New image? Reset the pinch-zoom.
|
||||
pinchZoom.setTransform({
|
||||
allowChangeEvent: true,
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
});
|
||||
} else if (oldSourceData && newSourceData && oldSourceData !== newSourceData) {
|
||||
// Since the pinch zoom transform origin is the top-left of the content, we need to flip
|
||||
// things around a bit when the content size changes, so the new content appears as if it were
|
||||
// central to the previous content.
|
||||
const scaleChange = 1 - pinchZoom.scale;
|
||||
const oldXScaleOffset = oldSourceData.width / 2 * scaleChange;
|
||||
const oldYScaleOffset = oldSourceData.height / 2 * scaleChange;
|
||||
|
||||
pinchZoom.setTransform({
|
||||
allowChangeEvent: true,
|
||||
x: pinchZoom.x - oldXScaleOffset + oldYScaleOffset,
|
||||
y: pinchZoom.y - oldYScaleOffset + oldXScaleOffset,
|
||||
});
|
||||
}
|
||||
|
||||
if (leftDraw && leftDraw !== prevLeftDraw && this.canvasLeft) {
|
||||
drawDataToCanvas(this.canvasLeft, leftDraw);
|
||||
@ -77,16 +121,6 @@ export default class Output extends Component<Props, State> {
|
||||
if (rightDraw && rightDraw !== prevRightDraw && this.canvasRight) {
|
||||
drawDataToCanvas(this.canvasRight, rightDraw);
|
||||
}
|
||||
|
||||
if (this.props.originalImage !== prevProps.originalImage && this.pinchZoomLeft) {
|
||||
// New image? Reset the pinch-zoom.
|
||||
this.pinchZoomLeft.setTransform({
|
||||
allowChangeEvent: true,
|
||||
x: 0,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props, nextState: State) {
|
||||
@ -94,11 +128,11 @@ export default class Output extends Component<Props, State> {
|
||||
}
|
||||
|
||||
private leftDrawable(props: Props = this.props): ImageData | undefined {
|
||||
return props.leftCompressed || props.originalImage;
|
||||
return props.leftCompressed || (props.source && props.source.processed);
|
||||
}
|
||||
|
||||
private rightDrawable(props: Props = this.props): ImageData | undefined {
|
||||
return props.rightCompressed || props.originalImage;
|
||||
return props.rightCompressed || (props.source && props.source.processed);
|
||||
}
|
||||
|
||||
@bind
|
||||
@ -122,6 +156,20 @@ export default class Output extends Component<Props, State> {
|
||||
this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
|
||||
}
|
||||
|
||||
@bind
|
||||
private onRotateClick() {
|
||||
const { inputProcessorState } = this.props;
|
||||
if (!inputProcessorState) return;
|
||||
|
||||
const newState = cleanSet(
|
||||
inputProcessorState,
|
||||
'rotate.rotate',
|
||||
(inputProcessorState.rotate.rotate + 90) % 360,
|
||||
);
|
||||
|
||||
this.props.onInputProcessorChange(newState);
|
||||
}
|
||||
|
||||
@bind
|
||||
private onScaleValueFocus() {
|
||||
this.setState({ editingScale: true }, () => {
|
||||
@ -201,11 +249,13 @@ export default class Output extends Component<Props, State> {
|
||||
}
|
||||
|
||||
render(
|
||||
{ mobileView, leftImgContain, rightImgContain, originalImage, onBack }: Props,
|
||||
{ mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
|
||||
{ scale, editingScale, altBackground }: State,
|
||||
) {
|
||||
const leftDraw = this.leftDrawable();
|
||||
const rightDraw = this.rightDrawable();
|
||||
// To keep position stable, the output is put in a square using the longest dimension.
|
||||
const originalImage = source && source.processed;
|
||||
|
||||
return (
|
||||
<div class={`${style.output} ${altBackground ? style.altBackground : ''}`}>
|
||||
@ -227,7 +277,7 @@ export default class Output extends Component<Props, State> {
|
||||
ref={linkRef(this, 'pinchZoomLeft')}
|
||||
>
|
||||
<canvas
|
||||
class={style.outputCanvas}
|
||||
class={style.pinchTarget}
|
||||
ref={linkRef(this, 'canvasLeft')}
|
||||
width={leftDraw && leftDraw.width}
|
||||
height={leftDraw && leftDraw.height}
|
||||
@ -240,7 +290,7 @@ export default class Output extends Component<Props, State> {
|
||||
</pinch-zoom>
|
||||
<pinch-zoom class={style.pinchZoom} ref={linkRef(this, 'pinchZoomRight')}>
|
||||
<canvas
|
||||
class={style.outputCanvas}
|
||||
class={style.pinchTarget}
|
||||
ref={linkRef(this, 'canvasRight')}
|
||||
width={rightDraw && rightDraw.width}
|
||||
height={rightDraw && rightDraw.height}
|
||||
@ -286,10 +336,21 @@ export default class Output extends Component<Props, State> {
|
||||
<AddIcon />
|
||||
</button>
|
||||
</div>
|
||||
<button class={style.button} onClick={this.toggleBackground}>
|
||||
<ToggleIcon />
|
||||
Toggle Background
|
||||
</button>
|
||||
<div class={style.buttonsNoWrap}>
|
||||
<button class={style.button} onClick={this.onRotateClick} title="Rotate image">
|
||||
<RotateIcon />
|
||||
</button>
|
||||
<button
|
||||
class={`${style.button} ${altBackground ? style.active : ''}`}
|
||||
onClick={this.toggleBackground}
|
||||
title="Change canvas color"
|
||||
>
|
||||
{altBackground
|
||||
? <ToggleBackgroundActiveIcon />
|
||||
: <ToggleBackgroundIcon />
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -31,6 +31,15 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pinch-target {
|
||||
// This fixes a severe painting bug in Chrome.
|
||||
// We should try to remove this once the issue is fixed.
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
|
||||
will-change: auto;
|
||||
// Prevent the image becoming misshapen due to default flexbox layout.
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -55,6 +64,7 @@
|
||||
left: 320px;
|
||||
right: 320px;
|
||||
bottom: 0;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@ -87,6 +97,7 @@
|
||||
white-space: nowrap;
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
height: 48px;
|
||||
@ -101,15 +112,20 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
text-transform: uppercase;
|
||||
color: var(--button-fg);
|
||||
cursor: pointer;
|
||||
text-indent: 6px;
|
||||
font-size: 110%;
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: #34B9EB;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: #32a3ce;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zoom {
|
||||
@ -133,17 +149,18 @@
|
||||
border-bottom: 1px dashed #999;
|
||||
}
|
||||
|
||||
.output-canvas {
|
||||
flex-shrink: 0;
|
||||
// This fixes a severe painting bug in Chrome.
|
||||
// We should try to remove this once the issue is fixed.
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10
|
||||
will-change: auto;
|
||||
}
|
||||
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 9px;
|
||||
}
|
||||
|
||||
.buttons-no-wrap {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,21 +35,29 @@ import { VectorResizeOptions, BitmapResizeOptions } from '../../codecs/resize/pr
|
||||
import './custom-els/MultiPanel';
|
||||
import Results from '../results';
|
||||
import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
|
||||
import SnackBarElement from 'src/lib/SnackBar';
|
||||
import SnackBarElement from '../../lib/SnackBar';
|
||||
import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
|
||||
|
||||
export interface SourceImage {
|
||||
file: File | Fileish;
|
||||
data: ImageData;
|
||||
decoded: ImageData;
|
||||
processed: ImageData;
|
||||
vectorImage?: HTMLImageElement;
|
||||
inputProcessorState: InputProcessorState;
|
||||
}
|
||||
|
||||
interface EncodedImage {
|
||||
interface SideSettings {
|
||||
preprocessorState: PreprocessorState;
|
||||
encoderState: EncoderState;
|
||||
}
|
||||
|
||||
interface Side {
|
||||
preprocessed?: ImageData;
|
||||
file?: Fileish;
|
||||
downloadUrl?: string;
|
||||
data?: ImageData;
|
||||
preprocessorState: PreprocessorState;
|
||||
encoderState: EncoderState;
|
||||
latestSettings: SideSettings;
|
||||
encodedSettings?: SideSettings;
|
||||
loading: boolean;
|
||||
/** Counter of the latest bmp currently encoding */
|
||||
loadingCounter: number;
|
||||
@ -65,7 +73,7 @@ interface Props {
|
||||
|
||||
interface State {
|
||||
source?: SourceImage;
|
||||
images: [EncodedImage, EncodedImage];
|
||||
sides: [Side, Side];
|
||||
/** Source image load */
|
||||
loading: boolean;
|
||||
loadingCounter: number;
|
||||
@ -77,12 +85,27 @@ interface UpdateImageOptions {
|
||||
skipPreprocessing?: boolean;
|
||||
}
|
||||
|
||||
async function processInput(
|
||||
data: ImageData,
|
||||
inputProcessData: InputProcessorState,
|
||||
processor: Processor,
|
||||
) {
|
||||
let processedData = data;
|
||||
|
||||
if (inputProcessData.rotate.rotate !== 0) {
|
||||
processedData = await processor.rotate(processedData, inputProcessData.rotate);
|
||||
}
|
||||
|
||||
return processedData;
|
||||
}
|
||||
|
||||
async function preprocessImage(
|
||||
source: SourceImage,
|
||||
preprocessData: PreprocessorState,
|
||||
processor: Processor,
|
||||
): Promise<ImageData> {
|
||||
let result = source.data;
|
||||
let result = source.processed;
|
||||
|
||||
if (preprocessData.resize.enabled) {
|
||||
if (preprocessData.resize.method === 'vector' && source.vectorImage) {
|
||||
result = processor.vectorResize(
|
||||
@ -131,6 +154,26 @@ async function compressImage(
|
||||
);
|
||||
}
|
||||
|
||||
function stateForNewSourceData(state: State, newSource: SourceImage): State {
|
||||
let newState = { ...state };
|
||||
|
||||
for (const i of [0, 1]) {
|
||||
// Ditch previous encodings
|
||||
const downloadUrl = state.sides[i].downloadUrl;
|
||||
if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
|
||||
|
||||
newState = cleanMerge(state, `sides.${i}`, {
|
||||
preprocessed: undefined,
|
||||
file: undefined,
|
||||
downloadUrl: undefined,
|
||||
data: undefined,
|
||||
encodedSettings: undefined,
|
||||
});
|
||||
}
|
||||
|
||||
return newState;
|
||||
}
|
||||
|
||||
async function processSvg(blob: Blob): Promise<HTMLImageElement> {
|
||||
// Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
|
||||
// In Chrome it loads, but drawImage behaves weirdly.
|
||||
@ -162,6 +205,8 @@ const resultTitles = ['Top', 'Bottom'];
|
||||
const buttonPositions =
|
||||
['download-left', 'download-right'] as ('download-left' | 'download-right')[];
|
||||
|
||||
const originalDocumentTitle = document.title;
|
||||
|
||||
export default class Compress extends Component<Props, State> {
|
||||
widthQuery = window.matchMedia('(max-width: 599px)');
|
||||
|
||||
@ -169,17 +214,21 @@ export default class Compress extends Component<Props, State> {
|
||||
source: undefined,
|
||||
loading: false,
|
||||
loadingCounter: 0,
|
||||
images: [
|
||||
sides: [
|
||||
{
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
encoderState: { type: identity.type, options: identity.defaultOptions },
|
||||
latestSettings: {
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
encoderState: { type: identity.type, options: identity.defaultOptions },
|
||||
},
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false,
|
||||
},
|
||||
{
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
|
||||
latestSettings: {
|
||||
preprocessorState: defaultPreprocessorState,
|
||||
encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
|
||||
},
|
||||
loadingCounter: 0,
|
||||
loadedCounter: 0,
|
||||
loading: false,
|
||||
@ -207,7 +256,7 @@ export default class Compress extends Component<Props, State> {
|
||||
|
||||
private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
|
||||
this.setState({
|
||||
images: cleanSet(this.state.images, `${index}.encoderState`, {
|
||||
sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState`, {
|
||||
type: newType,
|
||||
options: encoderMap[newType].defaultOptions,
|
||||
}),
|
||||
@ -216,37 +265,50 @@ export default class Compress extends Component<Props, State> {
|
||||
|
||||
private onPreprocessorOptionsChange(index: 0 | 1, options: PreprocessorState): void {
|
||||
this.setState({
|
||||
images: cleanSet(this.state.images, `${index}.preprocessorState`, options),
|
||||
sides: cleanSet(this.state.sides, `${index}.latestSettings.preprocessorState`, options),
|
||||
});
|
||||
}
|
||||
|
||||
private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
|
||||
this.setState({
|
||||
images: cleanSet(this.state.images, `${index}.encoderState.options`, options),
|
||||
sides: cleanSet(this.state.sides, `${index}.latestSettings.encoderState.options`, options),
|
||||
});
|
||||
}
|
||||
|
||||
private updateDocumentTitle(filename: string = ''): void {
|
||||
document.title = filename ? `${filename} - ${originalDocumentTitle}` : originalDocumentTitle;
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: Props): void {
|
||||
if (nextProps.file !== this.props.file) {
|
||||
this.updateFile(nextProps.file);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
const { source, images } = this.state;
|
||||
componentWillUnmount(): void {
|
||||
this.updateDocumentTitle();
|
||||
}
|
||||
|
||||
for (const [i, image] of images.entries()) {
|
||||
const prevImage = prevState.images[i];
|
||||
const sourceChanged = source !== prevState.source;
|
||||
const encoderChanged = image.encoderState !== prevImage.encoderState;
|
||||
const preprocessorChanged = image.preprocessorState !== prevImage.preprocessorState;
|
||||
componentDidUpdate(prevProps: Props, prevState: State): void {
|
||||
const { source, sides } = this.state;
|
||||
|
||||
const sourceDataChanged =
|
||||
// Has the source object become set/unset?
|
||||
!!source !== !!prevState.source ||
|
||||
// Or has the processed data changed?
|
||||
(source && prevState.source && source.processed !== prevState.source.processed);
|
||||
|
||||
for (const [i, side] of sides.entries()) {
|
||||
const prevSettings = prevState.sides[i].latestSettings;
|
||||
const encoderChanged = side.latestSettings.encoderState !== prevSettings.encoderState;
|
||||
const preprocessorChanged =
|
||||
side.latestSettings.preprocessorState !== prevSettings.preprocessorState;
|
||||
|
||||
// The image only needs updated if the encoder/preprocessor settings have changed, or the
|
||||
// source has changed.
|
||||
if (sourceChanged || encoderChanged || preprocessorChanged) {
|
||||
if (prevImage.downloadUrl) URL.revokeObjectURL(prevImage.downloadUrl);
|
||||
if (sourceDataChanged || encoderChanged || preprocessorChanged) {
|
||||
this.updateImage(i, {
|
||||
skipPreprocessing: !sourceChanged && !preprocessorChanged,
|
||||
skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
@ -256,10 +318,10 @@ export default class Compress extends Component<Props, State> {
|
||||
|
||||
private async onCopyToOtherClick(index: 0 | 1) {
|
||||
const otherIndex = (index + 1) % 2;
|
||||
const oldSettings = this.state.images[otherIndex];
|
||||
const oldSettings = this.state.sides[otherIndex];
|
||||
|
||||
this.setState({
|
||||
images: cleanSet(this.state.images, otherIndex, this.state.images[index]),
|
||||
sides: cleanSet(this.state.sides, otherIndex, this.state.sides[index]),
|
||||
});
|
||||
|
||||
const result = await this.props.showSnack('Settings copied across', {
|
||||
@ -270,13 +332,67 @@ export default class Compress extends Component<Props, State> {
|
||||
if (result !== 'undo') return;
|
||||
|
||||
this.setState({
|
||||
images: cleanSet(this.state.images, otherIndex, oldSettings),
|
||||
sides: cleanSet(this.state.sides, otherIndex, oldSettings),
|
||||
});
|
||||
}
|
||||
|
||||
@bind
|
||||
private async onInputProcessorChange(options: InputProcessorState): Promise<void> {
|
||||
const source = this.state.source;
|
||||
if (!source) return;
|
||||
|
||||
const oldRotate = source.inputProcessorState.rotate.rotate;
|
||||
const newRotate = options.rotate.rotate;
|
||||
const orientationChanged = oldRotate % 180 !== newRotate % 180;
|
||||
const loadingCounter = this.state.loadingCounter + 1;
|
||||
// Either processor is good enough here.
|
||||
const processor = this.leftProcessor;
|
||||
|
||||
this.setState({
|
||||
loadingCounter, loading: true,
|
||||
source: cleanSet(source, 'inputProcessorState', options),
|
||||
});
|
||||
|
||||
// Abort any current encode jobs, as they're redundant now.
|
||||
this.leftProcessor.abortCurrent();
|
||||
this.rightProcessor.abortCurrent();
|
||||
|
||||
try {
|
||||
const processed = await processInput(source.decoded, options, processor);
|
||||
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
|
||||
let newState = { ...this.state, loading: false };
|
||||
newState = cleanSet(newState, 'source.processed', processed);
|
||||
newState = stateForNewSourceData(newState, newState.source!);
|
||||
|
||||
if (orientationChanged) {
|
||||
// If orientation has changed, we should flip the resize values.
|
||||
for (const i of [0, 1]) {
|
||||
const resizeSettings = newState.sides[i].latestSettings.preprocessorState.resize;
|
||||
newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
|
||||
width: resizeSettings.height,
|
||||
height: resizeSettings.width,
|
||||
});
|
||||
}
|
||||
}
|
||||
this.setState(newState);
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
console.error(err);
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
this.props.showSnack('Processing error');
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
@bind
|
||||
private async updateFile(file: File | Fileish) {
|
||||
const loadingCounter = this.state.loadingCounter + 1;
|
||||
// Either processor is good enough here.
|
||||
const processor = this.leftProcessor;
|
||||
|
||||
this.setState({ loadingCounter, loading: true });
|
||||
|
||||
@ -285,7 +401,7 @@ export default class Compress extends Component<Props, State> {
|
||||
this.rightProcessor.abortCurrent();
|
||||
|
||||
try {
|
||||
let data: ImageData;
|
||||
let decoded: ImageData;
|
||||
let vectorImage: HTMLImageElement | undefined;
|
||||
|
||||
// Special-case SVG. We need to avoid createImageBitmap because of
|
||||
@ -293,46 +409,43 @@ export default class Compress extends Component<Props, State> {
|
||||
// Also, we cache the HTMLImageElement so we can perform vector resizing later.
|
||||
if (file.type.startsWith('image/svg+xml')) {
|
||||
vectorImage = await processSvg(file);
|
||||
data = drawableToImageData(vectorImage);
|
||||
decoded = drawableToImageData(vectorImage);
|
||||
} else {
|
||||
// Either processor is good enough here.
|
||||
data = await decodeImage(file, this.leftProcessor);
|
||||
decoded = await decodeImage(file, processor);
|
||||
}
|
||||
|
||||
// Another file has been opened before this one processed.
|
||||
const processed = await processInput(decoded, defaultInputProcessorState, processor);
|
||||
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
|
||||
let newState: State = {
|
||||
...this.state,
|
||||
source: { data, file, vectorImage },
|
||||
source: {
|
||||
decoded, file, vectorImage, processed,
|
||||
inputProcessorState: defaultInputProcessorState,
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
|
||||
newState = stateForNewSourceData(newState, newState.source!);
|
||||
|
||||
for (const i of [0, 1]) {
|
||||
// Ditch previous encodings
|
||||
const downloadUrl = this.state.images[i].downloadUrl;
|
||||
if (downloadUrl) URL.revokeObjectURL(downloadUrl!);
|
||||
|
||||
newState = cleanMerge(newState, `images.${i}`, {
|
||||
preprocessed: undefined,
|
||||
file: undefined,
|
||||
downloadUrl: undefined,
|
||||
data: undefined,
|
||||
});
|
||||
|
||||
// Default resize values come from the image:
|
||||
newState = cleanMerge(newState, `images.${i}.preprocessorState.resize`, {
|
||||
width: data.width,
|
||||
height: data.height,
|
||||
newState = cleanMerge(newState, `sides.${i}.latestSettings.preprocessorState.resize`, {
|
||||
width: processed.width,
|
||||
height: processed.height,
|
||||
method: vectorImage ? 'vector' : 'browser-high',
|
||||
});
|
||||
}
|
||||
|
||||
this.updateDocumentTitle(file.name);
|
||||
this.setState(newState);
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
console.error(err);
|
||||
// Another file has been opened before this one processed.
|
||||
// Another file has been opened/processed before this one processed.
|
||||
if (this.state.loadingCounter !== loadingCounter) return;
|
||||
this.props.showSnack('Invalid image');
|
||||
this.setState({ loading: false });
|
||||
@ -340,26 +453,31 @@ export default class Compress extends Component<Props, State> {
|
||||
}
|
||||
|
||||
private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
|
||||
const { skipPreprocessing = false } = options;
|
||||
const {
|
||||
skipPreprocessing = false,
|
||||
} = options;
|
||||
const { source } = this.state;
|
||||
if (!source) return;
|
||||
|
||||
// Each time we trigger an async encode, the counter changes.
|
||||
const loadingCounter = this.state.images[index].loadingCounter + 1;
|
||||
const loadingCounter = this.state.sides[index].loadingCounter + 1;
|
||||
|
||||
let images = cleanMerge(this.state.images, index, {
|
||||
let sides = cleanMerge(this.state.sides, index, {
|
||||
loadingCounter,
|
||||
loading: true,
|
||||
});
|
||||
|
||||
this.setState({ images });
|
||||
this.setState({ sides });
|
||||
|
||||
const image = images[index];
|
||||
const side = sides[index];
|
||||
const settings = side.latestSettings;
|
||||
|
||||
let file: File | Fileish | undefined;
|
||||
let preprocessed: ImageData | undefined;
|
||||
let data: ImageData | undefined;
|
||||
const cacheResult = this.encodeCache.match(source, image.preprocessorState, image.encoderState);
|
||||
const cacheResult = this.encodeCache.match(
|
||||
source.processed, settings.preprocessorState, settings.encoderState,
|
||||
);
|
||||
const processor = (index === 0) ? this.leftProcessor : this.rightProcessor;
|
||||
|
||||
// Abort anything the processor is currently doing.
|
||||
@ -372,60 +490,66 @@ export default class Compress extends Component<Props, State> {
|
||||
} else {
|
||||
try {
|
||||
// Special case for identity
|
||||
if (image.encoderState.type === identity.type) {
|
||||
({ file, data } = source);
|
||||
if (settings.encoderState.type === identity.type) {
|
||||
file = source.file;
|
||||
data = source.processed;
|
||||
} else {
|
||||
preprocessed = (skipPreprocessing && image.preprocessed)
|
||||
? image.preprocessed
|
||||
: await preprocessImage(source, image.preprocessorState, processor);
|
||||
preprocessed = (skipPreprocessing && side.preprocessed)
|
||||
? side.preprocessed
|
||||
: await preprocessImage(source, settings.preprocessorState, processor);
|
||||
|
||||
file = await compressImage(preprocessed, image.encoderState, source.file.name, processor);
|
||||
file = await compressImage(
|
||||
preprocessed, settings.encoderState, source.file.name, processor,
|
||||
);
|
||||
data = await decodeImage(file, processor);
|
||||
|
||||
this.encodeCache.add({
|
||||
source,
|
||||
data,
|
||||
preprocessed,
|
||||
file,
|
||||
encoderState: image.encoderState,
|
||||
preprocessorState: image.preprocessorState,
|
||||
sourceData: source.processed,
|
||||
encoderState: settings.encoderState,
|
||||
preprocessorState: settings.preprocessorState,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
this.props.showSnack(`Processing error (type=${image.encoderState.type}): ${err}`);
|
||||
this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
const latestImage = this.state.images[index];
|
||||
const latestData = this.state.sides[index];
|
||||
// If a later encode has landed before this one, return.
|
||||
if (loadingCounter < latestImage.loadedCounter) {
|
||||
if (loadingCounter < latestData.loadedCounter) {
|
||||
return;
|
||||
}
|
||||
|
||||
images = cleanMerge(this.state.images, index, {
|
||||
if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
|
||||
|
||||
sides = cleanMerge(this.state.sides, index, {
|
||||
file,
|
||||
data,
|
||||
preprocessed,
|
||||
downloadUrl: URL.createObjectURL(file),
|
||||
loading: images[index].loadingCounter !== loadingCounter,
|
||||
loading: sides[index].loadingCounter !== loadingCounter,
|
||||
loadedCounter: loadingCounter,
|
||||
encodedSettings: settings,
|
||||
});
|
||||
|
||||
this.setState({ images });
|
||||
this.setState({ sides });
|
||||
}
|
||||
|
||||
render({ onBack }: Props, { loading, images, source, mobileView }: State) {
|
||||
const [leftImage, rightImage] = images;
|
||||
const [leftImageData, rightImageData] = images.map(i => i.data);
|
||||
render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
|
||||
const [leftSide, rightSide] = sides;
|
||||
const [leftImageData, rightImageData] = sides.map(i => i.data);
|
||||
|
||||
const options = images.map((image, index) => (
|
||||
const options = sides.map((side, index) => (
|
||||
<Options
|
||||
source={source}
|
||||
mobileView={mobileView}
|
||||
preprocessorState={image.preprocessorState}
|
||||
encoderState={image.encoderState}
|
||||
preprocessorState={side.latestSettings.preprocessorState}
|
||||
encoderState={side.latestSettings.encoderState}
|
||||
onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
|
||||
onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
|
||||
onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
|
||||
@ -435,33 +559,44 @@ export default class Compress extends Component<Props, State> {
|
||||
const copyDirections =
|
||||
(mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
|
||||
|
||||
const results = images.map((image, index) => (
|
||||
const results = sides.map((side, index) => (
|
||||
<Results
|
||||
downloadUrl={image.downloadUrl}
|
||||
imageFile={image.file}
|
||||
downloadUrl={side.downloadUrl}
|
||||
imageFile={side.file}
|
||||
source={source}
|
||||
loading={loading || image.loading}
|
||||
loading={loading || side.loading}
|
||||
copyDirection={copyDirections[index]}
|
||||
onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
|
||||
buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
|
||||
>
|
||||
{!mobileView ? null : [
|
||||
<ExpandIcon class={style.expandIcon} key="expand-icon"/>,
|
||||
`${resultTitles[index]} (${encoderMap[image.encoderState.type].label})`,
|
||||
`${resultTitles[index]} (${encoderMap[side.latestSettings.encoderState.type].label})`,
|
||||
]}
|
||||
</Results>
|
||||
));
|
||||
|
||||
// For rendering, we ideally want the settings that were used to create the data, not the latest
|
||||
// settings.
|
||||
const leftDisplaySettings = leftSide.encodedSettings || leftSide.latestSettings;
|
||||
const rightDisplaySettings = rightSide.encodedSettings || rightSide.latestSettings;
|
||||
const leftImgContain = leftDisplaySettings.preprocessorState.resize.enabled &&
|
||||
leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
|
||||
const rightImgContain = rightDisplaySettings.preprocessorState.resize.enabled &&
|
||||
rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
|
||||
|
||||
return (
|
||||
<div class={style.compress}>
|
||||
<Output
|
||||
originalImage={source && source.data}
|
||||
source={source}
|
||||
mobileView={mobileView}
|
||||
leftCompressed={leftImageData}
|
||||
rightCompressed={rightImageData}
|
||||
leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
|
||||
rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
|
||||
leftImgContain={leftImgContain}
|
||||
rightImgContain={rightImgContain}
|
||||
onBack={onBack}
|
||||
inputProcessorState={source && source.inputProcessorState}
|
||||
onInputProcessorChange={this.onInputProcessorChange}
|
||||
/>
|
||||
{mobileView
|
||||
? (
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { EncoderState } from '../../codecs/encoders';
|
||||
import { Fileish } from '../../lib/initial-util';
|
||||
import { shallowEqual } from '../../lib/util';
|
||||
import { SourceImage } from '.';
|
||||
import { PreprocessorState } from '../../codecs/preprocessors';
|
||||
|
||||
import * as identity from '../../codecs/identity/encoder-meta';
|
||||
@ -15,7 +14,7 @@ interface CacheResult {
|
||||
interface CacheEntry extends CacheResult {
|
||||
preprocessorState: PreprocessorState;
|
||||
encoderState: EncoderState;
|
||||
source: SourceImage;
|
||||
sourceData: ImageData;
|
||||
}
|
||||
|
||||
const SIZE = 5;
|
||||
@ -32,13 +31,13 @@ export default class ResultCache {
|
||||
}
|
||||
|
||||
match(
|
||||
source: SourceImage,
|
||||
sourceData: ImageData,
|
||||
preprocessorState: PreprocessorState,
|
||||
encoderState: EncoderState,
|
||||
): CacheResult | undefined {
|
||||
const matchingIndex = this._entries.findIndex((entry) => {
|
||||
// Check for quick exits:
|
||||
if (entry.source !== source) return false;
|
||||
if (entry.sourceData !== sourceData) return false;
|
||||
if (entry.encoderState.type !== encoderState.type) return false;
|
||||
|
||||
// Check that each set of options in the preprocessor are the same
|
||||
|
||||
@ -12,9 +12,21 @@ export const DownloadIcon = (props: JSX.HTMLAttributes) => (
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const ToggleIcon = (props: JSX.HTMLAttributes) => (
|
||||
export const ToggleBackgroundIcon = (props: JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
|
||||
<path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const ToggleBackgroundActiveIcon = (props: JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8a2 2 0 0 0-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2a2 2 0 0 0-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.9 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8a2 2 0 0 0 2-2h-2v2zM5 7H3v12c0 1.1.9 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z"/>
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const RotateIcon = (props: JSX.HTMLAttributes) => (
|
||||
<Icon {...props}>
|
||||
<path d="M15.6 5.5L11 1v3a8 8 0 0 0 0 16v-2a6 6 0 0 1 0-12v4l4.5-4.5zm4.3 5.5a8 8 0 0 0-1.6-3.9L17 8.5c.5.8.9 1.6 1 2.5h2zM13 17.9v2a8 8 0 0 0 3.9-1.6L15.5 17c-.8.5-1.6.9-2.5 1zm3.9-2.4l1.4 1.4A8 8 0 0 0 20 13h-2c-.1.9-.5 1.7-1 2.5z"/>
|
||||
</Icon>
|
||||
);
|
||||
|
||||
|
||||
@ -297,3 +297,10 @@ export async function transitionHeight(el: HTMLElement, opts: TransitionOptions)
|
||||
el.addEventListener('transitioncancel', listener);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple event listener that prevents the default.
|
||||
*/
|
||||
export function preventDefault(event: Event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -13,5 +13,8 @@
|
||||
"allowJs": false,
|
||||
"baseUrl": "."
|
||||
},
|
||||
"exclude": ["src/sw/**/*"]
|
||||
"exclude": [
|
||||
"src/sw/**/*",
|
||||
"src/codecs/processor-worker/**/*"
|
||||
]
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@ const WorkerPlugin = require('worker-plugin');
|
||||
const AutoSWPlugin = require('./config/auto-sw-plugin');
|
||||
const CrittersPlugin = require('critters-webpack-plugin');
|
||||
const AssetTemplatePlugin = require('./config/asset-template-plugin');
|
||||
const addCssTypes = require('./config/add-css-types');
|
||||
|
||||
function readJson (filename) {
|
||||
return JSON.parse(fs.readFileSync(filename));
|
||||
@ -22,7 +23,7 @@ function readJson (filename) {
|
||||
|
||||
const VERSION = readJson('./package.json').version;
|
||||
|
||||
module.exports = function (_, env) {
|
||||
module.exports = async function (_, env) {
|
||||
const isProd = env.mode === 'production';
|
||||
const nodeModules = path.join(__dirname, 'node_modules');
|
||||
const componentStyleDirs = [
|
||||
@ -32,6 +33,8 @@ module.exports = function (_, env) {
|
||||
path.join(__dirname, 'src/lib'),
|
||||
];
|
||||
|
||||
await addCssTypes(componentStyleDirs, { watch: !isProd });
|
||||
|
||||
return {
|
||||
mode: isProd ? 'production' : 'development',
|
||||
entry: {
|
||||
@ -109,9 +112,7 @@ module.exports = function (_, env) {
|
||||
// In production, CSS is extracted to files on disk. In development, it's inlined into JS:
|
||||
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
{
|
||||
// This is a fork of css-loader that auto-generates .d.ts files for CSS module imports.
|
||||
// The result is a definition file with the exported String classname mappings.
|
||||
loader: 'typings-for-css-modules-loader',
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
localIdentName: isProd ? '[hash:base64:5]' : '[local]__[hash:base64:5]',
|
||||
@ -169,7 +170,11 @@ module.exports = function (_, env) {
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.IgnorePlugin(/(fs|crypto|path)/, /\/codecs\//),
|
||||
new webpack.IgnorePlugin(
|
||||
/(fs|crypto|path)/,
|
||||
new RegExp(`${path.sep}codecs${path.sep}`)
|
||||
),
|
||||
|
||||
// Pretty progressbar showing build progress:
|
||||
new ProgressBarPlugin({
|
||||
format: '\u001b[90m\u001b[44mBuild\u001b[49m\u001b[39m [:bar] \u001b[32m\u001b[1m:percent\u001b[22m\u001b[39m (:elapseds) \u001b[2m:msg\u001b[22m\r',
|
||||
|
||||
Reference in New Issue
Block a user