diff --git a/.gitignore b/.gitignore index d6cc1d59..df5e0ec2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules /build -/*.log \ No newline at end of file +/*.log +*.scss.d.ts diff --git a/package-lock.json b/package-lock.json index af34fca5..152f3b3f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,24 +4,6 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "@babel/runtime": { - "version": "7.0.0-beta.46", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0-beta.46.tgz", - "integrity": "sha512-/3a3USMKk54BEHhDgY8rtxtaQOs4bp4aQwo6SDtdwmrXmgSgEusWuXNX5oIs/nwzmTD9o8wz2EyAjA+uHDMmJA==", - "dev": true, - "requires": { - "core-js": "2.5.5", - "regenerator-runtime": "0.11.1" - }, - "dependencies": { - "core-js": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz", - "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs=", - "dev": true - } - } - }, "@material/animation": { "version": "0.25.0", "resolved": "https://registry.npmjs.org/@material/animation/-/animation-0.25.0.tgz", @@ -3190,15 +3172,6 @@ "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw==", "dev": true }, - "common-tags": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.2.tgz", - "integrity": "sha512-joj9ZlUOjCrwdbmiLqafeUSgkUM74NqhLsZtSqDmhKudaIY197zTrb8JMl31fMnCUuxwFT23eC/oWvrZzDLRJQ==", - "dev": true, - "requires": { - "babel-runtime": "6.26.0" - } - }, "commondir": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", @@ -4936,17 +4909,6 @@ "readable-stream": "2.3.4" } }, - "fs-extra": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz", - "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==", - "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "jsonfile": "4.0.0", - "universalify": "0.1.1" - } - }, "fs-write-stream-atomic": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz", @@ -7346,23 +7308,6 @@ "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true }, - "isemail": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/isemail/-/isemail-3.1.1.tgz", - "integrity": "sha512-mVjAjvdPkpwXW61agT2E9AkGoegZO7SdJGCezWwxnETL58f5KwJ4vSVAMBUL5idL6rTlYAIGkX3n4suiviMLNw==", - "dev": true, - "requires": { - "punycode": "2.1.0" - }, - "dependencies": { - "punycode": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.0.tgz", - "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=", - "dev": true - } - } - }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -7415,25 +7360,6 @@ "is-object": "1.0.1" } }, - "joi": { - "version": "11.4.0", - "resolved": "https://registry.npmjs.org/joi/-/joi-11.4.0.tgz", - "integrity": "sha512-O7Uw+w/zEWgbL6OcHbyACKSj0PkQeUgmehdoXVSxt92QFCq4+1390Rwh5moI2K/OgC7D8RHRZqHZxT2husMJHA==", - "dev": true, - "requires": { - "hoek": "4.2.1", - "isemail": "3.1.1", - "topo": "2.0.2" - }, - "dependencies": { - "hoek": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", - "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==", - "dev": true - } - } - }, "js-base64": { "version": "2.4.3", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz", @@ -7524,15 +7450,6 @@ "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=", "dev": true }, - "json-stable-stringify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz", - "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=", - "dev": true, - "requires": { - "jsonify": "0.0.0" - } - }, "json-stable-stringify-without-jsonify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", @@ -7557,15 +7474,6 @@ "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=", "dev": true }, - "jsonfile": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", - "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", - "dev": true, - "requires": { - "graceful-fs": "4.1.11" - } - }, "jsonify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz", @@ -7925,12 +7833,6 @@ "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==", "dev": true }, - "lodash._reinterpolate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", - "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", - "dev": true - }, "lodash.assign": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz", @@ -7967,25 +7869,6 @@ "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=", "dev": true }, - "lodash.template": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz", - "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=", - "dev": true, - "requires": { - "lodash._reinterpolate": "3.0.0", - "lodash.templatesettings": "4.1.0" - } - }, - "lodash.templatesettings": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz", - "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=", - "dev": true, - "requires": { - "lodash._reinterpolate": "3.0.0" - } - }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", @@ -10559,15 +10442,6 @@ "resolved": "https://registry.npmjs.org/preact-router/-/preact-router-2.6.0.tgz", "integrity": "sha1-Vff7yE5rivDfPqBMjOTCaHFAibY=" }, - "preload-webpack-plugin": { - "version": "3.0.0-alpha.3", - "resolved": "https://registry.npmjs.org/preload-webpack-plugin/-/preload-webpack-plugin-3.0.0-alpha.3.tgz", - "integrity": "sha512-sl0xCvUfw6Qrd2WTo3NzavRFUaui4SknwxkubG6s5yQ1i1NLnnKrzJS5sYrhVZgxK+M9UsXMKUrF5hAYTnRZEw==", - "dev": true, - "requires": { - "@babel/runtime": "7.0.0-beta.46" - } - }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -12728,23 +12602,6 @@ } } }, - "topo": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz", - "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=", - "dev": true, - "requires": { - "hoek": "4.2.1" - }, - "dependencies": { - "hoek": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz", - "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==", - "dev": true - } - } - }, "toposort": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.6.tgz", @@ -13424,12 +13281,6 @@ "imurmurhash": "0.1.4" } }, - "universalify": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz", - "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=", - "dev": true - }, "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -14671,128 +14522,6 @@ "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", "dev": true }, - "workbox-background-sync": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-3.0.1.tgz", - "integrity": "sha512-3zHFDptq3mOiggU1AwkHs0I/egsRemhgUyyEerkvBdO/rpx41r7wK9qx+KrFKoHzRkVCYRN0ho/THo0rlP6dOw==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-broadcast-cache-update": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-broadcast-cache-update/-/workbox-broadcast-cache-update-3.0.1.tgz", - "integrity": "sha512-I+dDwxTUUvqSmUvOr5MtkfaTp8pcEK+HE4WJQApMRknJlvy0Cj0dEJbCApghM+KLhLhPc6Sq2Oyo26rN1xmn/w==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-build": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-3.0.1.tgz", - "integrity": "sha512-bU7KAZDGKNtAIzbcou3xVpR65XU9WI0+lm7zsSC1ta0D2hDqQDErHsFbwtYa9ePMx9iYYw6NRMZfARhwZnfKiw==", - "dev": true, - "requires": { - "babel-runtime": "6.26.0", - "common-tags": "1.7.2", - "fs-extra": "4.0.3", - "glob": "7.1.2", - "joi": "11.4.0", - "lodash.template": "4.4.0", - "pretty-bytes": "4.0.2", - "workbox-background-sync": "3.0.1", - "workbox-broadcast-cache-update": "3.0.1", - "workbox-cache-expiration": "3.0.1", - "workbox-cacheable-response": "3.0.1", - "workbox-core": "3.0.1", - "workbox-google-analytics": "3.0.1", - "workbox-precaching": "3.0.1", - "workbox-routing": "3.0.1", - "workbox-strategies": "3.0.1", - "workbox-sw": "3.0.1" - } - }, - "workbox-cache-expiration": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-cache-expiration/-/workbox-cache-expiration-3.0.1.tgz", - "integrity": "sha512-01ztqk94JZtY+Ax1khHUevrNc9fzKbBV6Mq3rEjctMMQJShP8Sd4PL6zV3PFsoKdoUc8176mNfwN0AdwgMEDdg==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-cacheable-response": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-3.0.1.tgz", - "integrity": "sha512-bOXjRpogk2w3flZkKMo6Jy8esdHlv0POkFZ2UjMYSFvPVXr8tJZdI9lDna3gxuB3PUt2sizai6x48z+tqzrC0w==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-core": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-3.0.1.tgz", - "integrity": "sha512-NiAs17oJnNzvJnIaNJ+KvMgATvLbpnfnDIMgllPPIO03VyG2bMtcg/3x8NTiiPfUI1a7cmIABY/gIs8b12KMBw==", - "dev": true - }, - "workbox-google-analytics": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-3.0.1.tgz", - "integrity": "sha512-HNTh707qJJ1mtU2mUCVPwt9X4f+GxxFxONjUhQ6+zH1iFlAStXaIKOAyBesyUaKXaeKN47AI7XpBztE92PdKeg==", - "dev": true, - "requires": { - "workbox-background-sync": "3.0.1", - "workbox-core": "3.0.1", - "workbox-routing": "3.0.1", - "workbox-strategies": "3.0.1" - } - }, - "workbox-precaching": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-3.0.1.tgz", - "integrity": "sha512-qg+t7y0ktoL7Eo4+DtcnQbROhhcaBQ+QRYlHJhFfyHasZHxUigqtWAEDGrzILJurZAF7xbUNhdvdEbfpfv66sw==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-routing": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-3.0.1.tgz", - "integrity": "sha512-bL2aEAoYs12ulKEblYrTu1sm9QqWZ/tNUHxYvOym6GG2Qmu3j+Xdeg2+mbssxnMQovwN5ElBX0EVc69ZJpgjoQ==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-strategies": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-3.0.1.tgz", - "integrity": "sha512-Dx7TTsqFVrRPVmTUQwzcRqu1khXNzRXWk2SxxJKfprP0uwGln8zheng48svXW2KAzMTQBWGo4Tojz2Cfp99a6Q==", - "dev": true, - "requires": { - "workbox-core": "3.0.1" - } - }, - "workbox-sw": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-3.0.1.tgz", - "integrity": "sha512-ARONUH2HyzYDhOH3N5a1qOEmqgKiDZ3qJ1SMDBkIrGIrWuSMF1KOFHgvQKuq0sEKtsspisY1ofEnRMBFCpQEKg==", - "dev": true - }, - "workbox-webpack-plugin": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/workbox-webpack-plugin/-/workbox-webpack-plugin-3.0.1.tgz", - "integrity": "sha512-0y8FxQna/Ba53X+MtTzMHNl6hyKN5ywZSzODFiXzSiUZ7s3LSzW8NEXXuNFEnUgD7+f3NIITsyriIgfERxkI8g==", - "dev": true, - "requires": { - "json-stable-stringify": "1.0.1", - "workbox-build": "3.0.1" - } - }, "worker-farm": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.6.0.tgz", diff --git a/package.json b/package.json index bc86e17a..c0a6a53b 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "mini-css-extract-plugin": "^0.3.0", "node-sass": "^4.7.2", "optimize-css-assets-webpack-plugin": "^4.0.0", - "preload-webpack-plugin": "^3.0.0-alpha.3", "progress-bar-webpack-plugin": "^1.11.0", "raw-loader": "^0.5.1", "sass-loader": "^6.0.7", @@ -75,8 +74,7 @@ "webpack-bundle-analyzer": "^2.11.1", "webpack-cli": "^2.0.13", "webpack-dev-server": "^3.1.1", - "webpack-plugin-replace": "^1.1.1", - "workbox-webpack-plugin": "^3.0.1" + "webpack-plugin-replace": "^1.1.1" }, "dependencies": { "classnames": "^2.2.5", diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx index 2dfd34be..a41b8e20 100644 --- a/src/components/app/index.tsx +++ b/src/components/app/index.tsx @@ -1,41 +1,16 @@ import { h, Component } from 'preact'; -import { When, bind } from '../../lib/util'; -import Fab from '../fab'; -import Header from '../header'; -// import Drawer from 'async!../drawer'; -const Drawer = require('async!../drawer').default; -import Home from '../home'; +import { bind } from '../../lib/util'; import * as style from './style.scss'; +import Output from '../output'; -type Props = { - url?: string -}; - -export type FileObj = { - id: number, - data?: string, - uri?: string, - error?: Error | DOMError | String, - file: File, - loading: boolean -}; +type Props = {}; type State = { - showDrawer: boolean, - showFab: boolean, - files: FileObj[] + img?: ImageBitmap }; -let idCounter = 0; - export default class App extends Component { - state: State = { - showDrawer: false, - showFab: true, - files: [] - }; - - enableDrawer = false; + state: State = {}; constructor() { super(); @@ -49,87 +24,25 @@ export default class App extends Component { } @bind - openDrawer() { - this.setState({ showDrawer: true }); - } - @bind - closeDrawer() { - this.setState({ showDrawer: false }); - } - @bind - toggleDrawer() { - this.setState({ showDrawer: !this.state.showDrawer }); + async onFileChange(event: Event) { + const fileInput = event.target as HTMLInputElement; + if (!fileInput.files || !fileInput.files[0]) return; + // TODO: handle decode error + const img = await createImageBitmap(fileInput.files[0]); + this.setState({ img }); } - @bind - openFab() { - this.setState({ showFab: true }); - } - @bind - closeFab() { - this.setState({ showFab: false }); - } - @bind - toggleFab() { - this.setState({ showFab: !this.state.showFab }); - } - - @bind - loadFile(file: File) { - let fileObj: FileObj = { - id: ++idCounter, - file, - error: undefined, - loading: true, - data: undefined - }; - - this.setState({ - files: [fileObj] - }); - - Promise.all([ - new Response(file).text(), - new Response(file).blob() - ]) - .then(([data, blob]) => ({ - data, - uri: URL.createObjectURL(blob) - })) - .catch(error => ({ error })) - .then(state => { - let files = this.state.files.slice(); - files[files.indexOf(fileObj)] = Object.assign({}, fileObj, { - loading: false, - ...state - }); - this.setState({ files }); - }); - } - - render({ url }: Props, { showDrawer, showFab, files }: State) { - if (showDrawer) this.enableDrawer = true; - - if (showFab) showFab = files.length > 0; - + render({ }: Props, { img }: State) { return (
- - -
- - {/* Avoid loading & rendering the drawer until the first time it is shown. */} - - - - - {/* - Note: this is normally where a with auto code-splitting goes. - Since we don't seem to need one (yet?), it's omitted. - */} -
- -
+ {img ? + + : +
+

Select an image

+ +
+ }
); } diff --git a/src/components/app/style.scss b/src/components/app/style.scss index e3c6e10b..d21e3038 100644 --- a/src/components/app/style.scss +++ b/src/components/app/style.scss @@ -1,25 +1,3 @@ -@import '~style/helpers.scss'; - -.app { - position: absolute; - display: flex; - flex-direction: column; - top: 0; - left: 0; - width: 100%; - bottom: 0; - overflow: hidden; - z-index: 1; - - .header { - flex: 0 0 auto; - position: relative; - } - - .content { - flex: 1 1 auto; - contain: size layout style; - overflow: auto; - -webkit-overflow-scrolling: touch; - } +.app h1 { + color: green; } diff --git a/src/components/app/style.scss.d.ts b/src/components/app/style.scss.d.ts deleted file mode 100644 index 44bf86f2..00000000 --- a/src/components/app/style.scss.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const app: string; -export const header: string; -export const content: string; diff --git a/src/components/drawer/index.tsx b/src/components/drawer/index.tsx deleted file mode 100644 index d58ee657..00000000 --- a/src/components/drawer/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { h, Component } from 'preact'; -import MdlDrawer from 'preact-material-components-drawer'; -import 'preact-material-components/Drawer/style.css'; -import List from 'preact-material-components/List'; -// import 'preact-material-components/List/style.css'; -import { Text } from 'preact-i18n'; -import * as style from './style.scss'; -import { bind } from '../../lib/util'; - -type Props = { - showing: boolean, - openDrawer(): void, - closeDrawer(): void -}; - -type State = { - rendered: boolean -}; - -export default class Drawer extends Component { - state: State = { - rendered: false - }; - - @bind - setRendered() { - this.setState({ rendered: true }); - } - - render({ showing, openDrawer, closeDrawer }: Props, { rendered }: State) { - if (showing && !rendered) { - setTimeout(this.setRendered, 20); - showing = false; - } - - return ( - - - logo - - - - - verified_user - Sign In - - - account_circle - Register - - - - -
- - settings - Preferences - -
- - ); - } -} diff --git a/src/components/drawer/style.scss b/src/components/drawer/style.scss deleted file mode 100644 index 41acac3e..00000000 --- a/src/components/drawer/style.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import '~style/helpers.scss'; - -:global { - // @import '~preact-material-components/Drawer/style.css'; - @import '~preact-material-components/List/mdc-list.scss'; -} - -.drawer { - :global(.mdc-list-item__start-detail) { - margin-right: 16px; - } -} - -.logo { - width: 50%; -} - -.category img { - opacity: .6; -} - -.bottom { - position: absolute; - bottom: 0; - bottom: constant(safe-area-inset-bottom); - bottom: env(safe-area-inset-bottom); - left: 0; - width: 100%; -} diff --git a/src/components/drawer/style.scss.d.ts b/src/components/drawer/style.scss.d.ts deleted file mode 100644 index 0cfecb62..00000000 --- a/src/components/drawer/style.scss.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -export const mdcListItemSecondaryText: string; -export const mdcListItemGraphic: string; -export const mdcListItemMeta: string; -export const mdcListItem: string; -export const mdcListDivider: string; -export const mdcListGroup: string; -export const mdcListGroupSubheader: string; -export const drawer: string; -export const logo: string; -export const category: string; -export const bottom: string; -export const mdcRippleFgRadiusIn: string; -export const mdcRippleFgOpacityIn: string; -export const mdcRippleFgOpacityOut: string; diff --git a/src/components/fab/index.tsx b/src/components/fab/index.tsx deleted file mode 100644 index a43feb27..00000000 --- a/src/components/fab/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { h, Component } from 'preact'; -import { bind } from '../../lib/util'; -import Icon from 'preact-material-components/Icon'; -import 'preact-material-components/Icon/style.css'; -import Fab from 'preact-material-components/Fab'; -import RadialProgress from 'material-radial-progress'; -import * as style from './style.scss'; - -type Props = { - showing: boolean -}; - -type State = { - loading: boolean -}; - -export default class AppFab extends Component { - state: State = { - loading: false - }; - - @bind - setLoading(loading: boolean) { - this.setState({ loading }); - } - - @bind - handleClick() { - console.log('TODO: Save the file to disk.'); - this.setState({ loading: true }); - setTimeout(() => { - this.setState({ loading: false }); - }, 1000); - } - - render({ showing }: Props, { loading }: State) { - return ( - - { loading ? ( - - ) : ( - file_download - ) } - - ); - } -} diff --git a/src/components/fab/style.scss b/src/components/fab/style.scss deleted file mode 100644 index 69e67345..00000000 --- a/src/components/fab/style.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '~style/helpers.scss'; -:global { - @import '~preact-material-components/Fab/mdc-fab.scss'; -} - -.fab { - position: fixed; - right: 14px; - bottom: 14px; - z-index: 4; - - .progress { - width: 24px; - height: 24px; - color: white; - --mdc-theme-primary: #fff; - } -} diff --git a/src/components/fab/style.scss.d.ts b/src/components/fab/style.scss.d.ts deleted file mode 100644 index 87e220fe..00000000 --- a/src/components/fab/style.scss.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const fab: string; -export const progress: string; -export const mdcRippleFgRadiusIn: string; -export const mdcRippleFgOpacityIn: string; -export const mdcRippleFgOpacityOut: string; diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx deleted file mode 100644 index f513a16c..00000000 --- a/src/components/header/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { h, Component } from 'preact'; -import Toolbar from 'preact-material-components/Toolbar'; -import cx from 'classnames'; -import * as style from './style.scss'; -import { bind } from '../../lib/util'; - -type Props = { - 'class'?: string, - showHeader?: boolean, - onToggleDrawer?(): void, - showFab?(): void, - loadFile(f: File): void -}; - -type State = {}; - -export default class Header extends Component { - input?: HTMLInputElement; - - @bind - setInputRef(c?: Element) { - this.input = c as HTMLInputElement; - } - - @bind - upload() { - this.input!.click(); - } - - @bind - handleFiles() { - let files = this.input!.files; - if (files && files.length) { - this.props.loadFile(files[0]); - } - } - - render({ class: c, onToggleDrawer, showHeader = true, showFab }: Props) { - return ( - - - - file_upload - - - menu - - - - - ); - } -} diff --git a/src/components/header/style.scss b/src/components/header/style.scss deleted file mode 100644 index 61bee8ce..00000000 --- a/src/components/header/style.scss +++ /dev/null @@ -1,52 +0,0 @@ -@import '~style/helpers.scss'; -:global { - @import '~preact-material-components/Toolbar/mdc-toolbar.scss'; -} - -.toolbar { - // height: $toolbar-height; - - &.minimal { - display: none; - // height: $toolbar-height / 2; - } - - // > * { - // min-height: 0; - // } -} - -.fileInput { - position: absolute; - left: 0; - top: -999px; -} - -.fab { - position: fixed; - display: block; - right: 14px; - bottom: 14px; - // z-index: 999; - // transform: translateZ(0); -} - -.logo { - height: 1em; -} - -.menu { - position: absolute; - top: $toolbar-height; - right: 5px; - - .menuItem { - margin-right: 16px; - } -} - -.title { - padding: 3px 0 0; - font-weight: 300; - font-size: 140%; -} \ No newline at end of file diff --git a/src/components/header/style.scss.d.ts b/src/components/header/style.scss.d.ts deleted file mode 100644 index df66137f..00000000 --- a/src/components/header/style.scss.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const toolbar: string; -export const minimal: string; -export const fileInput: string; -export const fab: string; -export const logo: string; -export const menu: string; -export const menuItem: string; -export const title: string; diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx deleted file mode 100644 index ad96ad84..00000000 --- a/src/components/home/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { h, Component } from 'preact'; -// import Button from 'preact-material-components/Button'; -// import Switch from 'preact-material-components/Switch'; -// import 'preact-material-components/Switch/style.css'; -import * as style from './style.scss'; -import { FileObj } from '../app'; - -type Props = { - files: FileObj[] -}; - -type State = { - active: boolean -}; - -export default class Home extends Component { - state: State = { - active: false - }; - - componentDidMount() { - setTimeout(() => { - this.setState({ active: true }); - }); - } - - render({ files }: Props, { active }: State) { - return ( -
- { files && files[0] && ( - - ) || ( -
-

Squoosh

-

Test home content

-
- ) } -
- ); - } -} diff --git a/src/components/home/style.scss b/src/components/home/style.scss deleted file mode 100644 index 2abb508c..00000000 --- a/src/components/home/style.scss +++ /dev/null @@ -1,21 +0,0 @@ -@import '~style/helpers.scss'; - -// :global { -// @import '~preact-material-components/Button/mdc-button.scss'; -// // @import '~preact-material-components/Switch/mdc-switch.scss'; -// } - -.home { - padding: 20px; -} - -.image { - width: 100%; -} - -.content { - max-width: 600px; - margin: 50px auto 0; - font-size: 120%; - text-align: center; -} diff --git a/src/components/home/style.scss.d.ts b/src/components/home/style.scss.d.ts deleted file mode 100644 index 406166b6..00000000 --- a/src/components/home/style.scss.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const home: string; -export const image: string; -export const content: string; diff --git a/src/components/output/index.tsx b/src/components/output/index.tsx new file mode 100644 index 00000000..2603e103 --- /dev/null +++ b/src/components/output/index.tsx @@ -0,0 +1,44 @@ +import { h, Component } from 'preact'; +// This isn't working. +// https://github.com/GoogleChromeLabs/squoosh/issues/14 +import * as style from './style.scss'; + +type Props = { + img: ImageBitmap +}; + +type State = {}; + +export default class App extends Component { + state: State = {}; + canvas?: HTMLCanvasElement; + + constructor() { + super(); + } + + updateCanvas(img: ImageBitmap) { + if (!this.canvas) return; + const ctx = this.canvas.getContext('2d'); + if (!ctx) return; + ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + ctx.drawImage(img, 0, 0); + } + + componentDidMount() { + this.updateCanvas(this.props.img); + } + + componentDidUpdate({ img }: Props) { + if (img !== this.props.img) this.updateCanvas(this.props.img); + } + + render({ img }: Props, { }: State) { + return ( +
+ this.canvas = c as HTMLCanvasElement} width={img.width} height={img.height} /> +

And that's all the app does so far!

+
+ ); + } +} diff --git a/src/components/output/style.scss b/src/components/output/style.scss new file mode 100644 index 00000000..d21e3038 --- /dev/null +++ b/src/components/output/style.scss @@ -0,0 +1,3 @@ +.app h1 { + color: green; +} diff --git a/src/index.tsx b/src/index.tsx index 9bfb15cb..70aaaa43 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -20,13 +20,4 @@ if (process.env.NODE_ENV === 'development') { root = render(, document.body, root); }); }); -} else if ('serviceWorker' in navigator && location.protocol === 'https:') { - addEventListener('load', () => { - navigator.serviceWorker.register(__webpack_public_path__ + 'sw.js'); - }); } - -/** @todo Async SSR if we need it */ -// export default async () => { -// // render here, then resolve to a string of HTML (or null to serialize the document) -// } diff --git a/src/lib/util.ts b/src/lib/util.ts index 941a5222..3ceadea5 100644 --- a/src/lib/util.ts +++ b/src/lib/util.ts @@ -1,26 +1,3 @@ -import { Component, ComponentProps } from 'preact'; - -type WhenProps = ComponentProps & { - value: boolean, - children?: (JSX.Element | (() => JSX.Element))[] -}; - -type WhenState = { - ready: boolean -}; - -export class When extends Component { - state: WhenState = { - ready: !!this.props.value - }; - - render({ value, children = [] }: WhenProps, { ready }: WhenState) { - let child = children[0]; - if (value && !ready) this.setState({ ready: true }); - return ready ? (typeof child === 'function' ? child() : child) : null; - } -} - /** * A decorator that binds values to their class instance. * @example diff --git a/src/style/helpers.scss b/src/style/helpers.scss deleted file mode 100644 index 5da0af28..00000000 --- a/src/style/helpers.scss +++ /dev/null @@ -1,10 +0,0 @@ -$toolbar-height: 56px; - -$mdc-theme-primary: #263238; -$mdc-theme-primary-light: #4f5b62; -$mdc-theme-primary-dark: #000a12; -$mdc-theme-secondary: #d81b60; -$mdc-theme-secondary-light: #ff5c8d; -$mdc-theme-secondary-dark: #a00037; -$mdc-theme-secondary-dark: #a00037; -$mdc-theme-background: #fff; diff --git a/src/style/index.scss b/src/style/index.scss index 953b2cb4..c9d5b0cf 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -1,7 +1,4 @@ -// @import 'material-components-web/material-components-web'; -@import './material-icons.scss'; @import './reset.scss'; -// @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); html, body { height: 100%; @@ -11,17 +8,3 @@ html, body { overflow: hidden; overscroll-behavior: none; } - -html { - background: #FAFAFA; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: 400; - color: #444; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.mdc-theme--dark { - background-color: #333; - color: #fff; -} \ No newline at end of file diff --git a/src/style/material-icons.scss b/src/style/material-icons.scss deleted file mode 100644 index 8847a837..00000000 --- a/src/style/material-icons.scss +++ /dev/null @@ -1,24 +0,0 @@ -@font-face { - font-family: 'Material Icons'; - font-style: normal; - font-weight: 400; - font-display: swap; - // @todo woff fallback! - src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); -} - -.material-icons { - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 24px; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; - -webkit-font-feature-settings: 'liga'; - -webkit-font-smoothing: antialiased; -} diff --git a/webpack.config.js b/webpack.config.js index db9dd181..341295c2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,10 +8,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlPlugin = require('html-webpack-plugin'); const ScriptExtHtmlPlugin = require('script-ext-html-webpack-plugin'); -const PreloadPlugin = require('preload-webpack-plugin'); const ReplacePlugin = require('webpack-plugin-replace'); const CopyPlugin = require('copy-webpack-plugin'); -const WorkboxPlugin = require('workbox-webpack-plugin'); const WatchTimestampsPlugin = require('./config/watch-timestamps-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; @@ -23,8 +21,7 @@ module.exports = function (_, env) { const isProd = env.mode === 'production'; const nodeModules = path.join(__dirname, 'node_modules'); const componentStyleDirs = [ - path.join(__dirname, 'src/components'), - path.join(__dirname, 'src/routes') + path.join(__dirname, 'src/components') ]; return { @@ -64,7 +61,7 @@ module.exports = function (_, env) { }, { test: /\.(scss|sass|css)$/, - // Only enable CSS Modules within `src/{components,routes}/*` + // Only enable CSS Modules within `src/components/*` include: componentStyleDirs, use: [ // In production, CSS is extracted to files on disk. In development, it's inlined into JS: @@ -87,7 +84,7 @@ module.exports = function (_, env) { }, { test: /\.(scss|sass|css)$/, - // Process non-modular CSS everywhere *except* `src/{components,routes}/*` + // Process non-modular CSS everywhere *except* `src/components/*` exclude: componentStyleDirs, use: [ isProd ? MiniCssExtractPlugin.loader : 'style-loader', @@ -181,11 +178,6 @@ module.exports = function (_, env) { defaultAttribute: 'async' }), - // Inject for resources - isProd && new PreloadPlugin({ - include: 'initial' - }), - // Inline constants during build, so they can be folded by UglifyJS. new webpack.DefinePlugin({ // We set node.process=false later in this config. @@ -215,22 +207,6 @@ module.exports = function (_, env) { analyzerMode: 'static', defaultSizes: 'gzip', openAnalyzer: false - }), - - // Generate a ServiceWorker using Workbox. - isProd && new WorkboxPlugin.GenerateSW({ - swDest: 'sw.js', - clientsClaim: true, - skipWaiting: true, - exclude: [ - 'report.html', - 'manifest.json', - /(report\.html|manifest\.json|\.precache-manifest\..*\.json)$/, - /\.(?:map|pem|DS_Store)$/ - ], - // allow for offline client-side routing: - navigateFallback: '/', - navigateFallbackBlacklist: [/\.[a-z0-9]+$/i] }) ].filter(Boolean), // Filter out any falsey plugin array entries. @@ -280,8 +256,6 @@ module.exports = function (_, env) { compress: true, // Request paths not ending in a file extension serve index.html: historyApiFallback: true, - // Don't output server address info to console on startup: - noInfo: true, // Suppress forwarding of Webpack logs to the browser console: clientLogLevel: 'none', // Supress the extensive stats normally printed after a dev build (since sizes are mostly useless):