Compare commits

..

23 Commits
v1.10.1 ... api

Author SHA1 Message Date
Surma
956e064c8c Only allow iframe embedding 2019-03-20 17:51:32 +00:00
Surma
5270553f27 Fix caching headers for sdk 2019-03-20 17:29:09 +00:00
Surma
3005098f67 Remove that stupid async from setFile() 2019-03-20 17:15:20 +00:00
Surma
9b879609f3 Add CORS to sdk file 2019-03-20 17:15:20 +00:00
Surma
9008d1c380 Use microbundle for SDK 2019-03-20 17:15:19 +00:00
Surma
915f4cd4e6 Revert wepack changes 2019-03-20 17:13:13 +00:00
Surma
7dd842a870 Fixup sdk.js deployment 2019-03-20 17:13:12 +00:00
Surma
2e478b323a Trying to bend webpack to my will 2019-03-20 17:13:11 +00:00
Jason Miller
f24d41ba74 fix prerender-loader with multientry 2019-03-20 17:12:13 +00:00
Surma
cb3c66fc5b Rename loading event 2019-03-20 17:12:12 +00:00
Surma
3315188bb3 Jake code review 2019-03-20 17:12:12 +00:00
Surma
efad4f612f Use MAJOR_VERSION from package.json 2019-03-20 17:12:11 +00:00
Surma
7998cf247b Another fix from rebasing 2019-03-20 17:12:11 +00:00
Surma
0041d24aa3 Create a SideEvent 2019-03-20 17:12:10 +00:00
Surma
2fa2e567a6 Address minor nits 2019-03-20 17:12:09 +00:00
Surma
98f61ba60c Add chunk name 2019-03-20 17:12:09 +00:00
Surma
672c57b61f Switch to an event-based architecture 2019-03-20 17:12:08 +00:00
Surma
bfe74b5fb2 Update for API changes 2019-03-20 17:12:08 +00:00
Surma
1507a44141 Lazy-load API 2019-03-20 17:12:07 +00:00
Surma
bb3bd2d46a Restore compressor settings after load via API 2019-03-20 17:12:06 +00:00
Surma
4df3a7df83 Build a demo batch app 2019-03-20 17:12:06 +00:00
Surma
853b305465 Remove raceyness of getter API 2019-03-20 17:12:05 +00:00
Surma
9a230adc03 Simple API test 2019-03-20 17:12:00 +00:00
96 changed files with 11529 additions and 6593 deletions

2
.nvmrc
View File

@@ -1 +1 @@
10.16.2 10.15.3

View File

@@ -1,6 +1,7 @@
# Long-term cache by default. # Long-term cache by default.
/* /*
Cache-Control: max-age=31536000 Cache-Control: max-age=31536000
Access-Control-Allow-Origin: *
# And here are the exceptions: # And here are the exceptions:
/ /
@@ -9,6 +10,9 @@
/serviceworker.js /serviceworker.js
Cache-Control: no-cache Cache-Control: no-cache
/sdk.mjs
Cache-Control: no-cache
/manifest.json /manifest.json
Cache-Control: must-revalidate, max-age=3600 Cache-Control: must-revalidate, max-age=3600

View File

@@ -1,5 +0,0 @@
**/*.rs.bk
target
Cargo.lock
bin/
pkg/README.md

View File

@@ -1,37 +0,0 @@
[package]
name = "squooshhqx"
version = "0.1.0"
authors = ["Surma <surma@surma.link>"]
[lib]
crate-type = ["cdylib"]
[features]
default = ["console_error_panic_hook", "wee_alloc"]
[dependencies]
cfg-if = "0.1.2"
wasm-bindgen = "0.2.38"
# lazy_static = "1.0.0"
hqx = {git = "https://github.com/CryZe/wasmboy-rs", tag="v0.1.2"}
# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.1", optional = true }
# `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
# compared to the default allocator's ~10K. It is slower than the default
# allocator, however.
#
# Unfortunately, `wee_alloc` requires nightly Rust when targeting wasm for now.
wee_alloc = { version = "0.4.2", optional = true }
[dev-dependencies]
wasm-bindgen-test = "0.2"
[profile.release]
# Tell `rustc` to optimize for small code size.
opt-level = "s"
lto = true

View File

@@ -1,12 +0,0 @@
FROM rust
RUN rustup target add wasm32-unknown-unknown
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
RUN mkdir /opt/binaryen && \
curl -L https://github.com/WebAssembly/binaryen/releases/download/1.38.32/binaryen-1.38.32-x86-linux.tar.gz | tar -xzf - -C /opt/binaryen --strip 1
RUN mkdir /opt/wabt && \
curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz | tar -xzf - -C /opt/wabt --strip 1
ENV PATH="/opt/binaryen:/opt/wabt:${PATH}"
WORKDIR /src

View File

@@ -1,25 +0,0 @@
#!/bin/bash
set -e
echo "============================================="
echo "Compiling wasm"
echo "============================================="
(
wasm-pack build
wasm-strip pkg/squooshhqx_bg.wasm
echo "Optimising Wasm so it doesn't break Chrome (this takes like 10-15mins. get a cup of tea)"
echo "Once https://crbug.com/974804 is fixed, we can remove this step"
wasm-opt -Os --no-validation -o pkg/squooshhqx_bg.wasm pkg/squooshhqx_bg.wasm
rm pkg/.gitignore
)
echo "============================================="
echo "Compiling wasm done"
echo "============================================="
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
echo "Did you update your docker image?"
echo "Run \`docker pull ubuntu\`"
echo "Run \`docker pull rust\`"
echo "Run \`docker build -t squoosh-hqx .\`"
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"

View File

@@ -1,4 +0,0 @@
{
"name": "hqx",
"lockfileVersion": 1
}

View File

@@ -1,7 +0,0 @@
{
"name": "hqx",
"scripts": {
"build:image": "docker build -t squoosh-hqx .",
"build": "docker run --rm -v $(pwd):/src squoosh-hqx ./build.sh"
}
}

View File

@@ -1,15 +0,0 @@
{
"name": "squooshhqx",
"collaborators": [
"Surma <surma@surma.link>"
],
"version": "0.1.0",
"files": [
"squooshhqx_bg.wasm",
"squooshhqx.js",
"squooshhqx.d.ts"
],
"module": "squooshhqx.js",
"types": "squooshhqx.d.ts",
"sideEffects": "false"
}

View File

@@ -1,9 +0,0 @@
/* tslint:disable */
/**
* @param {Uint32Array} input_image
* @param {number} input_width
* @param {number} input_height
* @param {number} factor
* @returns {Uint32Array}
*/
export function resize(input_image: Uint32Array, input_width: number, input_height: number, factor: number): Uint32Array;

View File

@@ -1,46 +0,0 @@
import * as wasm from './squooshhqx_bg.wasm';
let cachegetUint32Memory = null;
function getUint32Memory() {
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
}
return cachegetUint32Memory;
}
let WASM_VECTOR_LEN = 0;
function passArray32ToWasm(arg) {
const ptr = wasm.__wbindgen_malloc(arg.length * 4);
getUint32Memory().set(arg, ptr / 4);
WASM_VECTOR_LEN = arg.length;
return ptr;
}
let cachegetInt32Memory = null;
function getInt32Memory() {
if (cachegetInt32Memory === null || cachegetInt32Memory.buffer !== wasm.memory.buffer) {
cachegetInt32Memory = new Int32Array(wasm.memory.buffer);
}
return cachegetInt32Memory;
}
function getArrayU32FromWasm(ptr, len) {
return getUint32Memory().subarray(ptr / 4, ptr / 4 + len);
}
/**
* @param {Uint32Array} input_image
* @param {number} input_width
* @param {number} input_height
* @param {number} factor
* @returns {Uint32Array}
*/
export function resize(input_image, input_width, input_height, factor) {
const retptr = 8;
const ret = wasm.resize(retptr, passArray32ToWasm(input_image), WASM_VECTOR_LEN, input_width, input_height, factor);
const memi32 = getInt32Memory();
const v0 = getArrayU32FromWasm(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1]).slice();
wasm.__wbindgen_free(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1] * 4);
return v0;
}

View File

@@ -1,5 +0,0 @@
/* tslint:disable */
export const memory: WebAssembly.Memory;
export function __wbindgen_malloc(a: number): number;
export function __wbindgen_free(a: number, b: number): void;
export function resize(a: number, b: number, c: number, d: number, e: number, f: number): void;

Binary file not shown.

View File

@@ -1,55 +0,0 @@
extern crate cfg_if;
extern crate hqx;
extern crate wasm_bindgen;
mod utils;
use cfg_if::cfg_if;
use wasm_bindgen::prelude::*;
cfg_if! {
// When the `wee_alloc` feature is enabled, use `wee_alloc` as the global
// allocator.
if #[cfg(feature = "wee_alloc")] {
extern crate wee_alloc;
#[global_allocator]
static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
}
}
#[wasm_bindgen]
#[no_mangle]
pub fn resize(
input_image: Vec<u32>,
input_width: usize,
input_height: usize,
factor: usize,
) -> Vec<u32> {
let num_output_pixels = input_width * input_height * factor * factor;
let mut output_image = Vec::<u32>::with_capacity(num_output_pixels * 4);
output_image.resize(num_output_pixels, 0);
match factor {
2 => hqx::hq2x(
input_image.as_slice(),
output_image.as_mut_slice(),
input_width,
input_height,
),
3 => hqx::hq3x(
input_image.as_slice(),
output_image.as_mut_slice(),
input_width,
input_height,
),
4 => hqx::hq4x(
input_image.as_slice(),
output_image.as_mut_slice(),
input_width,
input_height,
),
_ => unreachable!(),
};
return output_image;
}

View File

@@ -1,17 +0,0 @@
use cfg_if::cfg_if;
cfg_if! {
// When the `console_error_panic_hook` feature is enabled, we can call the
// `set_panic_hook` function at least once during initialization, and then
// we will get better error messages if our code ever panics.
//
// For more details see
// https://github.com/rustwasm/console_error_panic_hook#readme
if #[cfg(feature = "console_error_panic_hook")] {
extern crate console_error_panic_hook;
pub use self::console_error_panic_hook::set_once as set_panic_hook;
} else {
#[inline]
pub fn set_panic_hook() {}
}
}

View File

@@ -12,7 +12,11 @@ echo "Compiling libimagequant"
echo "=============================================" echo "============================================="
( (
emcc \ emcc \
--bind \
${OPTIMIZE} \ ${OPTIMIZE} \
-s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \
-s 'EXPORT_NAME="imagequant"' \
-I node_modules/libimagequant \ -I node_modules/libimagequant \
--std=c99 \ --std=c99 \
-c \ -c \
@@ -25,7 +29,6 @@ echo "============================================="
emcc \ emcc \
--bind \ --bind \
${OPTIMIZE} \ ${OPTIMIZE} \
--closure 1 \
-s ALLOW_MEMORY_GROWTH=1 \ -s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \ -s MODULARIZE=1 \
-s 'EXPORT_NAME="imagequant"' \ -s 'EXPORT_NAME="imagequant"' \

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@@ -30,7 +30,6 @@ echo "============================================="
emcc \ emcc \
--bind \ --bind \
${OPTIMIZE} \ ${OPTIMIZE} \
--closure 1 \
-s WASM=1 \ -s WASM=1 \
-s ALLOW_MEMORY_GROWTH=1 \ -s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \ -s MODULARIZE=1 \

File diff suppressed because one or more lines are too long

Binary file not shown.

2
codecs/optipng/.gitignore vendored Normal file
View File

@@ -0,0 +1,2 @@
build/
*.o

26
codecs/optipng/README.md Normal file
View File

@@ -0,0 +1,26 @@
# OptiPNG
- Source: <http://optipng.sourceforge.net/>
- Version: v0.7.7
## Dependencies
- Docker
## Example
See `example.html`
## API
### `int version()`
Returns the version of optipng as a number. va.b.c is encoded as 0x0a0b0c
### `ArrayBuffer compress(std::string buffer, {level})`;
`compress` will re-compress the given PNG image via `buffer`. `level` is a number between 0 and 7.
### `void free_result()`
Frees the result created by `compress()`.

87
codecs/optipng/build.sh Executable file
View File

@@ -0,0 +1,87 @@
#!/bin/bash
set -e
export OPTIMIZE="-Os"
export PREFIX="/src/build"
export CFLAGS="${OPTIMIZE} -I${PREFIX}/include/"
export CPPFLAGS="${OPTIMIZE} -I${PREFIX}/include/"
export LDFLAGS="${OPTIMIZE} -L${PREFIX}/lib/"
apt-get update
apt-get install -qqy autoconf libtool
echo "============================================="
echo "Compiling zlib"
echo "============================================="
test -n "$SKIP_ZLIB" || (
cd node_modules/zlib
emconfigure ./configure --prefix=${PREFIX}/
emmake make
emmake make install
)
echo "============================================="
echo "Compiling zlib done"
echo "============================================="
echo "============================================="
echo "Compiling libpng"
echo "============================================="
test -n "$SKIP_LIBPNG" || (
cd node_modules/libpng
autoreconf -i
emconfigure ./configure --with-zlib-prefix=${PREFIX}/ --prefix=${PREFIX}/
emmake make
emmake make install
)
echo "============================================="
echo "Compiling libpng done"
echo "============================================="
echo "============================================="
echo "Compiling optipng"
echo "============================================="
(
emcc \
${OPTIMIZE} \
-Wno-implicit-function-declaration \
-I ${PREFIX}/include \
-I node_modules/optipng/src/opngreduc \
-I node_modules/optipng/src/pngxtern \
-I node_modules/optipng/src/cexcept \
-I node_modules/optipng/src/gifread \
-I node_modules/optipng/src/pnmio \
-I node_modules/optipng/src/minitiff \
--std=c99 -c \
node_modules/optipng/src/opngreduc/*.c \
node_modules/optipng/src/pngxtern/*.c \
node_modules/optipng/src/gifread/*.c \
node_modules/optipng/src/minitiff/*.c \
node_modules/optipng/src/pnmio/*.c \
node_modules/optipng/src/optipng/*.c
emcc \
--bind \
${OPTIMIZE} \
-s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME="optipng"' \
-I ${PREFIX}/include \
-I node_modules/optipng/src/opngreduc \
-I node_modules/optipng/src/pngxtern \
-I node_modules/optipng/src/cexcept \
-I node_modules/optipng/src/gifread \
-I node_modules/optipng/src/pnmio \
-I node_modules/optipng/src/minitiff \
-o "optipng.js" \
--std=c++11 \
optipng.cpp \
*.o \
${PREFIX}/lib/libz.so ${PREFIX}/lib/libpng.a
)
echo "============================================="
echo "Compiling optipng done"
echo "============================================="
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
echo "Did you update your docker image?"
echo "Run \`docker pull trzeci/emscripten\`"
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"

View File

@@ -0,0 +1,19 @@
<!doctype html>
<script src='optipng.js'></script>
<script>
const Module = optipng();
Module.onRuntimeInitialized = async _ => {
console.log('Version:', Module.version().toString(16));
const image = await fetch('../example_palette.png').then(r => r.arrayBuffer());
const newImage = Module.compress(image, {level: 3});
console.log('done');
Module.free_result();
console.log(`Old size: ${image.byteLength}, new size: ${newImage.byteLength} (${newImage.byteLength/image.byteLength*100}%)`);
const blobURL = URL.createObjectURL(new Blob([newImage], {type: 'image/png'}));
const img = document.createElement('img');
img.src = blobURL;
document.body.appendChild(img);
};
</script>

View File

@@ -0,0 +1,53 @@
#include "emscripten/bind.h"
#include "emscripten/val.h"
#include <stdio.h>
using namespace emscripten;
extern "C" int main(int argc, char *argv[]);
int version() {
// FIXME (@surma): Havent found a version in optipng :(
return 0;
}
struct OptiPngOpts {
int level;
};
uint8_t* result;
val compress(std::string png, OptiPngOpts opts) {
remove("input.png");
remove("output.png");
FILE* infile = fopen("input.png", "wb");
fwrite(png.c_str(), png.length(), 1, infile);
fflush(infile);
fclose(infile);
char optlevel[8];
sprintf(&optlevel[0], "-o%d", opts.level);
char* args[] = {"optipng", optlevel, "-out", "output.png", "input.png"};
main(5, args);
FILE *outfile = fopen("output.png", "rb");
fseek(outfile, 0, SEEK_END);
int fsize = ftell(outfile);
result = (uint8_t*) malloc(fsize);
fseek(outfile, 0, SEEK_SET);
fread(result, fsize, 1, outfile);
return val(typed_memory_view(fsize, result));
}
void free_result() {
free(result);
}
EMSCRIPTEN_BINDINGS(my_module) {
value_object<OptiPngOpts>("OptiPngOpts")
.field("level", &OptiPngOpts::level);
function("version", &version);
function("compress", &compress);
function("free_result", &free_result);
}

10
codecs/optipng/optipng.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
import {EncodeOptions} from "src/codecs/optipng/encoder";
export interface OptiPngModule extends EmscriptenWasm.Module {
compress(data: BufferSource, opts: EncodeOptions): Uint8Array;
free_result(): void;
}
export default function(opts: EmscriptenWasm.ModuleOpts): OptiPngModule;

24
codecs/optipng/optipng.js Normal file

File diff suppressed because one or more lines are too long

BIN
codecs/optipng/optipng.wasm Normal file

Binary file not shown.

1457
codecs/optipng/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,22 @@
{
"name": "optipng",
"scripts": {
"install": "tar-dependency install && napa",
"build": "npm run build:wasm",
"build:wasm": "docker run --rm -v $(pwd):/src -e SKIP_ZLIB=\"${SKIP_ZLIB}\" -e SKIP_LIBPNG=\"${SKIP_LIBPNG}\" trzeci/emscripten ./build.sh"
},
"tarDependencies": {
"node_modules/optipng": {
"url": "https://netcologne.dl.sourceforge.net/project/optipng/OptiPNG/optipng-0.7.7/optipng-0.7.7.tar.gz",
"strip": 1
}
},
"napa": {
"libpng": "emscripten-ports/libpng",
"zlib": "emscripten-ports/zlib"
},
"dependencies": {
"napa": "3.0.0",
"tar-dependency": "0.0.3"
}
}

View File

@@ -1 +0,0 @@
/target

501
codecs/oxipng/Cargo.lock generated
View File

@@ -1,501 +0,0 @@
# This file is automatically @generated by Cargo.
# It is not intended for manual editing.
[[package]]
name = "adler32"
version = "1.0.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "autocfg"
version = "1.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "bit-vec"
version = "0.6.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "bitflags"
version = "1.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "build_const"
version = "0.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "bumpalo"
version = "3.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "bytemuck"
version = "1.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "byteorder"
version = "1.3.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "cc"
version = "1.0.50"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "cfg-if"
version = "0.1.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "cloudflare-zlib"
version = "0.2.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cloudflare-zlib-sys 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "cloudflare-zlib-sys"
version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cc 1.0.50 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "crc"
version = "1.8.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"build_const 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "crc32fast"
version = "1.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "crossbeam-deque"
version = "0.7.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"crossbeam-epoch 0.8.2 (registry+https://github.com/rust-lang/crates.io-index)",
"crossbeam-utils 0.7.2 (registry+https://github.com/rust-lang/crates.io-index)",
"maybe-uninit 2.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "crossbeam-epoch"
version = "0.8.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
"crossbeam-utils 0.7.2 (registry+https://github.com/rust-lang/crates.io-index)",
"lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
"maybe-uninit 2.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"memoffset 0.5.4 (registry+https://github.com/rust-lang/crates.io-index)",
"scopeguard 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "crossbeam-queue"
version = "0.2.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
"crossbeam-utils 0.7.2 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "crossbeam-utils"
version = "0.7.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
"lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "deflate"
version = "0.8.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"adler32 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
"byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "either"
version = "1.5.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "hermit-abi"
version = "0.1.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"libc 0.2.68 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "image"
version = "0.23.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"bytemuck 1.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
"byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
"num-iter 0.1.40 (registry+https://github.com/rust-lang/crates.io-index)",
"num-rational 0.2.4 (registry+https://github.com/rust-lang/crates.io-index)",
"num-traits 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)",
"png 0.16.1 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "indexmap"
version = "1.3.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"rayon 1.3.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "inflate"
version = "0.4.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"adler32 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "itertools"
version = "0.9.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"either 1.5.3 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "lazy_static"
version = "1.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "libc"
version = "0.2.68"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "libdeflater"
version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cc 1.0.50 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "log"
version = "0.4.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "maybe-uninit"
version = "2.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "memoffset"
version = "0.5.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "miniz_oxide"
version = "0.3.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"adler32 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "num-integer"
version = "0.1.42"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"num-traits 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "num-iter"
version = "0.1.40"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"num-integer 0.1.42 (registry+https://github.com/rust-lang/crates.io-index)",
"num-traits 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "num-rational"
version = "0.2.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
"num-integer 0.1.42 (registry+https://github.com/rust-lang/crates.io-index)",
"num-traits 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "num-traits"
version = "0.2.11"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "num_cpus"
version = "1.12.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"hermit-abi 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
"libc 0.2.68 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "oxipng"
version = "0.1.0"
dependencies = [
"oxipng 2.3.0 (git+https://github.com/shssoichiro/oxipng.git)",
"wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "oxipng"
version = "2.3.0"
source = "git+https://github.com/shssoichiro/oxipng.git#f74726915131ec7ff1df0514436aac34bc603cff"
dependencies = [
"bit-vec 0.6.1 (registry+https://github.com/rust-lang/crates.io-index)",
"byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
"cloudflare-zlib 0.2.5 (registry+https://github.com/rust-lang/crates.io-index)",
"crc 1.8.1 (registry+https://github.com/rust-lang/crates.io-index)",
"image 0.23.2 (registry+https://github.com/rust-lang/crates.io-index)",
"indexmap 1.3.2 (registry+https://github.com/rust-lang/crates.io-index)",
"itertools 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)",
"libdeflater 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
"miniz_oxide 0.3.6 (registry+https://github.com/rust-lang/crates.io-index)",
"num_cpus 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
"rgb 0.8.16 (registry+https://github.com/rust-lang/crates.io-index)",
"zopfli 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "png"
version = "0.16.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"bitflags 1.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
"crc32fast 1.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
"deflate 0.8.3 (registry+https://github.com/rust-lang/crates.io-index)",
"inflate 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "proc-macro2"
version = "1.0.10"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"unicode-xid 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "quote"
version = "1.0.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"proc-macro2 1.0.10 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "rayon"
version = "1.3.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"crossbeam-deque 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)",
"either 1.5.3 (registry+https://github.com/rust-lang/crates.io-index)",
"rayon-core 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "rayon-core"
version = "1.7.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"crossbeam-deque 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)",
"crossbeam-queue 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
"crossbeam-utils 0.7.2 (registry+https://github.com/rust-lang/crates.io-index)",
"lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
"num_cpus 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "rgb"
version = "0.8.16"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "scopeguard"
version = "1.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "syn"
version = "1.0.17"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"proc-macro2 1.0.10 (registry+https://github.com/rust-lang/crates.io-index)",
"quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
"unicode-xid 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "typed-arena"
version = "1.7.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "unicode-xid"
version = "0.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "wasm-bindgen"
version = "0.2.60"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "wasm-bindgen-backend"
version = "0.2.60"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"bumpalo 3.2.1 (registry+https://github.com/rust-lang/crates.io-index)",
"lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)",
"log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)",
"proc-macro2 1.0.10 (registry+https://github.com/rust-lang/crates.io-index)",
"quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
"syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "wasm-bindgen-macro"
version = "0.2.60"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "wasm-bindgen-macro-support"
version = "0.2.60"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"proc-macro2 1.0.10 (registry+https://github.com/rust-lang/crates.io-index)",
"quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)",
"syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen-backend 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]
name = "wasm-bindgen-shared"
version = "0.2.60"
source = "registry+https://github.com/rust-lang/crates.io-index"
[[package]]
name = "zopfli"
version = "0.4.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
dependencies = [
"adler32 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)",
"byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)",
"crc 1.8.1 (registry+https://github.com/rust-lang/crates.io-index)",
"typed-arena 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
]
[metadata]
"checksum adler32 1.0.4 (registry+https://github.com/rust-lang/crates.io-index)" = "5d2e7343e7fc9de883d1b0341e0b13970f764c14101234857d2ddafa1cb1cac2"
"checksum autocfg 1.0.0 (registry+https://github.com/rust-lang/crates.io-index)" = "f8aac770f1885fd7e387acedd76065302551364496e46b3dd00860b2f8359b9d"
"checksum bit-vec 0.6.1 (registry+https://github.com/rust-lang/crates.io-index)" = "a4523a10839ffae575fb08aa3423026c8cb4687eef43952afb956229d4f246f7"
"checksum bitflags 1.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "cf1de2fe8c75bc145a2f577add951f8134889b4795d47466a54a5c846d691693"
"checksum build_const 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "39092a32794787acd8525ee150305ff051b0aa6cc2abaf193924f5ab05425f39"
"checksum bumpalo 3.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "12ae9db68ad7fac5fe51304d20f016c911539251075a214f8e663babefa35187"
"checksum bytemuck 1.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "37fa13df2292ecb479ec23aa06f4507928bef07839be9ef15281411076629431"
"checksum byteorder 1.3.4 (registry+https://github.com/rust-lang/crates.io-index)" = "08c48aae112d48ed9f069b33538ea9e3e90aa263cfa3d1c24309612b1f7472de"
"checksum cc 1.0.50 (registry+https://github.com/rust-lang/crates.io-index)" = "95e28fa049fda1c330bcf9d723be7663a899c4679724b34c81e9f5a326aab8cd"
"checksum cfg-if 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)" = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822"
"checksum cloudflare-zlib 0.2.5 (registry+https://github.com/rust-lang/crates.io-index)" = "f5ed63a019d55bacd15cadcbcb96bf41b16281417fff393bdb55fa84255fe4b9"
"checksum cloudflare-zlib-sys 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "7e195cb274a0d6ee87e718838a09baecd7cbc9f6075dac256a84cb5842739c06"
"checksum crc 1.8.1 (registry+https://github.com/rust-lang/crates.io-index)" = "d663548de7f5cca343f1e0a48d14dcfb0e9eb4e079ec58883b7251539fa10aeb"
"checksum crc32fast 1.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "ba125de2af0df55319f41944744ad91c71113bf74a4646efff39afe1f6842db1"
"checksum crossbeam-deque 0.7.3 (registry+https://github.com/rust-lang/crates.io-index)" = "9f02af974daeee82218205558e51ec8768b48cf524bd01d550abe5573a608285"
"checksum crossbeam-epoch 0.8.2 (registry+https://github.com/rust-lang/crates.io-index)" = "058ed274caafc1f60c4997b5fc07bf7dc7cca454af7c6e81edffe5f33f70dace"
"checksum crossbeam-queue 0.2.1 (registry+https://github.com/rust-lang/crates.io-index)" = "c695eeca1e7173472a32221542ae469b3e9aac3a4fc81f7696bcad82029493db"
"checksum crossbeam-utils 0.7.2 (registry+https://github.com/rust-lang/crates.io-index)" = "c3c7c73a2d1e9fc0886a08b93e98eb643461230d5f1925e4036204d5f2e261a8"
"checksum deflate 0.8.3 (registry+https://github.com/rust-lang/crates.io-index)" = "050ef6de42a33903b30a7497b76b40d3d58691d4d3eec355348c122444a388f0"
"checksum either 1.5.3 (registry+https://github.com/rust-lang/crates.io-index)" = "bb1f6b1ce1c140482ea30ddd3335fc0024ac7ee112895426e0a629a6c20adfe3"
"checksum hermit-abi 0.1.10 (registry+https://github.com/rust-lang/crates.io-index)" = "725cf19794cf90aa94e65050cb4191ff5d8fa87a498383774c47b332e3af952e"
"checksum image 0.23.2 (registry+https://github.com/rust-lang/crates.io-index)" = "9062b90712d25bc6bb165d110aa59c6b47c849246e341e7b86a98daff9d49f60"
"checksum indexmap 1.3.2 (registry+https://github.com/rust-lang/crates.io-index)" = "076f042c5b7b98f31d205f1249267e12a6518c1481e9dae9764af19b707d2292"
"checksum inflate 0.4.5 (registry+https://github.com/rust-lang/crates.io-index)" = "1cdb29978cc5797bd8dcc8e5bf7de604891df2a8dc576973d71a281e916db2ff"
"checksum itertools 0.9.0 (registry+https://github.com/rust-lang/crates.io-index)" = "284f18f85651fe11e8a991b2adb42cb078325c996ed026d994719efcfca1d54b"
"checksum lazy_static 1.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
"checksum libc 0.2.68 (registry+https://github.com/rust-lang/crates.io-index)" = "dea0c0405123bba743ee3f91f49b1c7cfb684eef0da0a50110f758ccf24cdff0"
"checksum libdeflater 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "66dca08b13369865b2f6dca1dd05f833985cbe6c12a676b04d55f78b85e80246"
"checksum log 0.4.8 (registry+https://github.com/rust-lang/crates.io-index)" = "14b6052be84e6b71ab17edffc2eeabf5c2c3ae1fdb464aae35ac50c67a44e1f7"
"checksum maybe-uninit 2.0.0 (registry+https://github.com/rust-lang/crates.io-index)" = "60302e4db3a61da70c0cb7991976248362f30319e88850c487b9b95bbf059e00"
"checksum memoffset 0.5.4 (registry+https://github.com/rust-lang/crates.io-index)" = "b4fc2c02a7e374099d4ee95a193111f72d2110197fe200272371758f6c3643d8"
"checksum miniz_oxide 0.3.6 (registry+https://github.com/rust-lang/crates.io-index)" = "aa679ff6578b1cddee93d7e82e263b94a575e0bfced07284eb0c037c1d2416a5"
"checksum num-integer 0.1.42 (registry+https://github.com/rust-lang/crates.io-index)" = "3f6ea62e9d81a77cd3ee9a2a5b9b609447857f3d358704331e4ef39eb247fcba"
"checksum num-iter 0.1.40 (registry+https://github.com/rust-lang/crates.io-index)" = "dfb0800a0291891dd9f4fe7bd9c19384f98f7fbe0cd0f39a2c6b88b9868bbc00"
"checksum num-rational 0.2.4 (registry+https://github.com/rust-lang/crates.io-index)" = "5c000134b5dbf44adc5cb772486d335293351644b801551abe8f75c84cfa4aef"
"checksum num-traits 0.2.11 (registry+https://github.com/rust-lang/crates.io-index)" = "c62be47e61d1842b9170f0fdeec8eba98e60e90e5446449a0545e5152acd7096"
"checksum num_cpus 1.12.0 (registry+https://github.com/rust-lang/crates.io-index)" = "46203554f085ff89c235cd12f7075f3233af9b11ed7c9e16dfe2560d03313ce6"
"checksum oxipng 2.3.0 (git+https://github.com/shssoichiro/oxipng.git)" = "<none>"
"checksum png 0.16.1 (registry+https://github.com/rust-lang/crates.io-index)" = "46060468187c21c00ffa2a920690b29997d7fd543f5a4d400461e4a7d4fccde8"
"checksum proc-macro2 1.0.10 (registry+https://github.com/rust-lang/crates.io-index)" = "df246d292ff63439fea9bc8c0a270bed0e390d5ebd4db4ba15aba81111b5abe3"
"checksum quote 1.0.3 (registry+https://github.com/rust-lang/crates.io-index)" = "2bdc6c187c65bca4260c9011c9e3132efe4909da44726bad24cf7572ae338d7f"
"checksum rayon 1.3.0 (registry+https://github.com/rust-lang/crates.io-index)" = "db6ce3297f9c85e16621bb8cca38a06779ffc31bb8184e1be4bed2be4678a098"
"checksum rayon-core 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "08a89b46efaf957e52b18062fb2f4660f8b8a4dde1807ca002690868ef2c85a9"
"checksum rgb 0.8.16 (registry+https://github.com/rust-lang/crates.io-index)" = "5ec4ab2cf0b27e111e266e161cf7f9efd20125a161190da1c0945c4a4408fef3"
"checksum scopeguard 1.1.0 (registry+https://github.com/rust-lang/crates.io-index)" = "d29ab0c6d3fc0ee92fe66e2d99f700eab17a8d57d1c1d3b748380fb20baa78cd"
"checksum syn 1.0.17 (registry+https://github.com/rust-lang/crates.io-index)" = "0df0eb663f387145cab623dea85b09c2c5b4b0aef44e945d928e682fce71bb03"
"checksum typed-arena 1.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "a9b2228007eba4120145f785df0f6c92ea538f5a3635a612ecf4e334c8c1446d"
"checksum unicode-xid 0.2.0 (registry+https://github.com/rust-lang/crates.io-index)" = "826e7639553986605ec5979c7dd957c7895e93eabed50ab2ffa7f6128a75097c"
"checksum wasm-bindgen 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "2cc57ce05287f8376e998cbddfb4c8cb43b84a7ec55cf4551d7c00eef317a47f"
"checksum wasm-bindgen-backend 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d967d37bf6c16cca2973ca3af071d0a2523392e4a594548155d89a678f4237cd"
"checksum wasm-bindgen-macro 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "8bd151b63e1ea881bb742cd20e1d6127cef28399558f3b5d415289bc41eee3a4"
"checksum wasm-bindgen-macro-support 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "d68a5b36eef1be7868f668632863292e37739656a80fc4b9acec7b0bd35a4931"
"checksum wasm-bindgen-shared 0.2.60 (registry+https://github.com/rust-lang/crates.io-index)" = "daf76fe7d25ac79748a37538b7daeed1c7a6867c92d3245c12c6222e4a20d639"
"checksum zopfli 0.4.0 (registry+https://github.com/rust-lang/crates.io-index)" = "4079b79464426ade2a1b0177fb0ce8396ba6b4084267407e333573c666073964"

View File

@@ -1,20 +0,0 @@
[package]
name = "oxipng"
version = "0.1.0"
authors = ["Ingvar Stepanyan <me@rreverser.com>"]
edition = "2018"
publish = false
[lib]
crate-type = ["cdylib"]
[dependencies]
oxipng = { version = "2.3.0", default-features = false }
wasm-bindgen = "0.2.48"
[profile.release]
lto = true
opt-level = "s"
[patch.crates-io]
oxipng = { git = "https://github.com/shssoichiro/oxipng.git", branch = "master" }

View File

@@ -1,12 +0,0 @@
FROM rust
RUN rustup target add wasm32-unknown-unknown
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
RUN mkdir /opt/wabt && \
curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz | tar -xzf - -C /opt/wabt --strip 1
RUN mkdir /opt/wasi-sdk && \
curl -L https://github.com/WebAssembly/wasi-sdk/releases/download/wasi-sdk-8/wasi-sdk-8.0-linux.tar.gz | tar -xzf - -C /opt/wasi-sdk --strip 1
ENV PATH="/opt/wabt:/opt/wasi-sdk/bin:${PATH}"
WORKDIR /src

View File

@@ -1,22 +0,0 @@
#!/bin/bash
set -e
echo "============================================="
echo "Compiling wasm"
echo "============================================="
(
wasm-pack build
wasm-strip pkg/oxipng_bg.wasm
rm pkg/.gitignore
)
echo "============================================="
echo "Compiling wasm done"
echo "============================================="
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
echo "Did you update your docker image?"
echo "Run \`docker pull ubuntu\`"
echo "Run \`docker pull rust\`"
echo "Run \`docker build -t squoosh-oxipng .\`"
echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"

View File

@@ -1,4 +0,0 @@
{
"name": "oxipng",
"lockfileVersion": 1
}

View File

@@ -1,7 +0,0 @@
{
"name": "oxipng",
"scripts": {
"build:image": "docker build -t squoosh-oxipng .",
"build": "docker run --rm -v $(pwd):/src squoosh-oxipng ./build.sh"
}
}

View File

@@ -1,8 +0,0 @@
/* tslint:disable */
/* eslint-disable */
/**
* @param {Uint8Array} data
* @param {number} level
* @returns {Uint8Array}
*/
export function optimise(data: Uint8Array, level: number): Uint8Array;

View File

@@ -1,60 +0,0 @@
import * as wasm from './oxipng_bg.wasm';
const lTextDecoder = typeof TextDecoder === 'undefined' ? require('util').TextDecoder : TextDecoder;
let cachedTextDecoder = new lTextDecoder('utf-8', { ignoreBOM: true, fatal: true });
cachedTextDecoder.decode();
let cachegetUint8Memory0 = null;
function getUint8Memory0() {
if (cachegetUint8Memory0 === null || cachegetUint8Memory0.buffer !== wasm.memory.buffer) {
cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer);
}
return cachegetUint8Memory0;
}
function getStringFromWasm0(ptr, len) {
return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
}
let WASM_VECTOR_LEN = 0;
function passArray8ToWasm0(arg, malloc) {
const ptr = malloc(arg.length * 1);
getUint8Memory0().set(arg, ptr / 1);
WASM_VECTOR_LEN = arg.length;
return ptr;
}
let cachegetInt32Memory0 = null;
function getInt32Memory0() {
if (cachegetInt32Memory0 === null || cachegetInt32Memory0.buffer !== wasm.memory.buffer) {
cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer);
}
return cachegetInt32Memory0;
}
function getArrayU8FromWasm0(ptr, len) {
return getUint8Memory0().subarray(ptr / 1, ptr / 1 + len);
}
/**
* @param {Uint8Array} data
* @param {number} level
* @returns {Uint8Array}
*/
export function optimise(data, level) {
var ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc);
var len0 = WASM_VECTOR_LEN;
wasm.optimise(8, ptr0, len0, level);
var r0 = getInt32Memory0()[8 / 4 + 0];
var r1 = getInt32Memory0()[8 / 4 + 1];
var v1 = getArrayU8FromWasm0(r0, r1).slice();
wasm.__wbindgen_free(r0, r1 * 1);
return v1;
}
export const __wbindgen_throw = function(arg0, arg1) {
throw new Error(getStringFromWasm0(arg0, arg1));
};

View File

@@ -1,8 +0,0 @@
/* tslint:disable */
/* eslint-disable */
export const memory: WebAssembly.Memory;
export function optimise(a: number, b: number, c: number, d: number): void;
export function malloc(a: number): number;
export function free(a: number): void;
export function __wbindgen_malloc(a: number): number;
export function __wbindgen_free(a: number, b: number): void;

Binary file not shown.

View File

@@ -1,15 +0,0 @@
{
"name": "oxipng",
"collaborators": [
"Ingvar Stepanyan <me@rreverser.com>"
],
"version": "0.1.0",
"files": [
"oxipng_bg.wasm",
"oxipng.js",
"oxipng.d.ts"
],
"module": "oxipng.js",
"types": "oxipng.d.ts",
"sideEffects": false
}

View File

@@ -1,10 +0,0 @@
mod malloc_shim;
use wasm_bindgen::prelude::*;
#[wasm_bindgen(catch)]
pub fn optimise(data: &[u8], level: u8) -> Vec<u8> {
let mut options = oxipng::Options::from_preset(level);
options.deflate = oxipng::Deflaters::Libdeflater;
oxipng::optimize_from_memory(data, &options).unwrap_throw()
}

View File

@@ -1,27 +0,0 @@
//! This is a module that provides `malloc` and `free` for `libdeflate`.
//! These implementations are compatible with the standard signatures
//! but use Rust allocator instead of including libc one as well.
//!
//! I've raised an upstream issue to hopefully make this easier in
//! future: https://github.com/ebiggers/libdeflate/issues/62
use std::alloc::*;
use std::mem::{align_of, size_of};
unsafe fn layout_for(size: usize) -> Layout {
Layout::from_size_align_unchecked(size_of::<usize>() + size, align_of::<usize>())
}
#[no_mangle]
pub unsafe extern "C" fn malloc(size: usize) -> *mut u8 {
let size_and_data_ptr = alloc(layout_for(size));
*(size_and_data_ptr as *mut usize) = size;
size_and_data_ptr.add(size_of::<usize>())
}
#[no_mangle]
pub unsafe extern "C" fn free(ptr: *mut u8) {
let size_and_data_ptr = ptr.sub(size_of::<usize>());
let size = *(size_and_data_ptr as *const usize);
dealloc(ptr, layout_for(size))
}

View File

@@ -1,5 +1,5 @@
[package] [package]
name = "resize" name = "squooshresize"
version = "0.1.0" version = "0.1.0"
authors = ["Surma <surma@surma.link>"] authors = ["Surma <surma@surma.link>"]

View File

@@ -1,9 +1,18 @@
FROM ubuntu
RUN apt-get update && \
apt-get install -qqy git build-essential cmake python2.7
RUN git clone --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
RUN mkdir -p /usr/src/wabt/build
WORKDIR /usr/src/wabt/build
RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
make && \
make install
FROM rust FROM rust
RUN rustup target add wasm32-unknown-unknown RUN rustup install nightly && \
RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh rustup target add --toolchain nightly wasm32-unknown-unknown && \
cargo install wasm-pack
RUN mkdir /opt/wabt && \ COPY --from=0 /opt/wabt /opt/wabt
curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz | tar -xzf - -C /opt/wabt --strip 1 ENV PATH="/opt/wabt/bin:${PATH}"
ENV PATH="/opt/wabt:${PATH}"
WORKDIR /src WORKDIR /src

View File

@@ -0,0 +1,53 @@
// THIS IS NOT A NODE SCRIPT
// This is a d8 script. Please install jsvu[1] and install v8.
// Then run `npm run --silent benchmark`.
// [1]: https://github.com/GoogleChromeLabs/jsvu
self = global = this;
load("./pkg/resize.js");
async function init() {
// Adjustable constants.
const inputDimensions = 2000;
const outputDimensions = 1500;
const algorithm = 3; // Lanczos
const iterations = new Array(100);
// Constants. Dont change.
const imageByteSize = inputDimensions * inputDimensions * 4;
const imageBuffer = new Uint8ClampedArray(imageByteSize);
const module = await WebAssembly.compile(readbuffer("./pkg/resize_bg.wasm"));
await wasm_bindgen(module);
[[false, false], [true, false], [false, true], [true, true]].forEach(
opts => {
print(`\npremultiplication: ${opts[0]}`);
print(`color space conversion: ${opts[1]}`);
print(`==============================`);
for (let i = 0; i < 100; i++) {
const start = Date.now();
wasm_bindgen.resize(
imageBuffer,
inputDimensions,
inputDimensions,
outputDimensions,
outputDimensions,
algorithm,
...opts
);
iterations[i] = Date.now() - start;
}
const average =
iterations.reduce((sum, c) => sum + c) / iterations.length;
const stddev = Math.sqrt(
iterations
.map(i => Math.pow(i - average, 2))
.reduce((sum, c) => sum + c) / iterations.length
);
print(`n = ${iterations.length}`);
print(`Average: ${average}`);
print(`StdDev: ${stddev}`);
}
);
}
init().catch(e => console.error(e, e.stack));

View File

@@ -6,9 +6,9 @@ echo "============================================="
echo "Compiling wasm" echo "Compiling wasm"
echo "=============================================" echo "============================================="
( (
wasm-pack build rustup run nightly \
wasm-pack build --target no-modules
wasm-strip pkg/resize_bg.wasm wasm-strip pkg/resize_bg.wasm
rm pkg/.gitignore
) )
echo "=============================================" echo "============================================="
echo "Compiling wasm done" echo "Compiling wasm done"

View File

@@ -2,6 +2,7 @@
"name": "resize", "name": "resize",
"scripts": { "scripts": {
"build:image": "docker build -t squoosh-resize .", "build:image": "docker build -t squoosh-resize .",
"build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh" "build": "docker run --rm -v $(pwd):/src squoosh-resize ./build.sh",
"benchmark": "v8 --no-liftoff --no-wasm-tier-up ./benchmark.js"
} }
} }

View File

@@ -1,15 +0,0 @@
{
"name": "resize",
"collaborators": [
"Surma <surma@surma.link>"
],
"version": "0.1.0",
"files": [
"resize_bg.wasm",
"resize.js",
"resize.d.ts"
],
"module": "resize.js",
"types": "resize.d.ts",
"sideEffects": "false"
}

View File

@@ -1,13 +1,13 @@
/* tslint:disable */ /* tslint:disable */
/** /**
* @param {Uint8Array} input_image * @param {Uint8Array} arg0
* @param {number} input_width * @param {number} arg1
* @param {number} input_height * @param {number} arg2
* @param {number} output_width * @param {number} arg3
* @param {number} output_height * @param {number} arg4
* @param {number} typ_idx * @param {number} arg5
* @param {boolean} premultiply * @param {boolean} arg6
* @param {boolean} color_space_conversion * @param {boolean} arg7
* @returns {Uint8Array} * @returns {Uint8Array}
*/ */
export function resize(input_image: Uint8Array, input_width: number, input_height: number, output_width: number, output_height: number, typ_idx: number, premultiply: boolean, color_space_conversion: boolean): Uint8Array; export function resize(arg0: Uint8Array, arg1: number, arg2: number, arg3: number, arg4: number, arg5: number, arg6: boolean, arg7: boolean): Uint8Array;

View File

@@ -1,50 +1,114 @@
import * as wasm from './resize_bg.wasm'; (function() {
var wasm;
const __exports = {};
let cachegetUint8Memory = null;
function getUint8Memory() { let cachegetUint8Memory = null;
if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) { function getUint8Memory() {
cachegetUint8Memory = new Uint8Array(wasm.memory.buffer); if (cachegetUint8Memory === null || cachegetUint8Memory.buffer !== wasm.memory.buffer) {
cachegetUint8Memory = new Uint8Array(wasm.memory.buffer);
}
return cachegetUint8Memory;
} }
return cachegetUint8Memory;
}
let WASM_VECTOR_LEN = 0; let WASM_VECTOR_LEN = 0;
function passArray8ToWasm(arg) { function passArray8ToWasm(arg) {
const ptr = wasm.__wbindgen_malloc(arg.length * 1); const ptr = wasm.__wbindgen_malloc(arg.length * 1);
getUint8Memory().set(arg, ptr / 1); getUint8Memory().set(arg, ptr / 1);
WASM_VECTOR_LEN = arg.length; WASM_VECTOR_LEN = arg.length;
return ptr; return ptr;
}
let cachegetInt32Memory = null;
function getInt32Memory() {
if (cachegetInt32Memory === null || cachegetInt32Memory.buffer !== wasm.memory.buffer) {
cachegetInt32Memory = new Int32Array(wasm.memory.buffer);
} }
return cachegetInt32Memory;
}
function getArrayU8FromWasm(ptr, len) { function getArrayU8FromWasm(ptr, len) {
return getUint8Memory().subarray(ptr / 1, ptr / 1 + len); return getUint8Memory().subarray(ptr / 1, ptr / 1 + len);
} }
/**
* @param {Uint8Array} input_image
* @param {number} input_width
* @param {number} input_height
* @param {number} output_width
* @param {number} output_height
* @param {number} typ_idx
* @param {boolean} premultiply
* @param {boolean} color_space_conversion
* @returns {Uint8Array}
*/
export function resize(input_image, input_width, input_height, output_width, output_height, typ_idx, premultiply, color_space_conversion) {
const retptr = 8;
const ret = wasm.resize(retptr, passArray8ToWasm(input_image), WASM_VECTOR_LEN, input_width, input_height, output_width, output_height, typ_idx, premultiply, color_space_conversion);
const memi32 = getInt32Memory();
const v0 = getArrayU8FromWasm(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1]).slice();
wasm.__wbindgen_free(memi32[retptr / 4 + 0], memi32[retptr / 4 + 1] * 1);
return v0;
}
let cachedGlobalArgumentPtr = null;
function globalArgumentPtr() {
if (cachedGlobalArgumentPtr === null) {
cachedGlobalArgumentPtr = wasm.__wbindgen_global_argument_ptr();
}
return cachedGlobalArgumentPtr;
}
let cachegetUint32Memory = null;
function getUint32Memory() {
if (cachegetUint32Memory === null || cachegetUint32Memory.buffer !== wasm.memory.buffer) {
cachegetUint32Memory = new Uint32Array(wasm.memory.buffer);
}
return cachegetUint32Memory;
}
/**
* @param {Uint8Array} arg0
* @param {number} arg1
* @param {number} arg2
* @param {number} arg3
* @param {number} arg4
* @param {number} arg5
* @param {boolean} arg6
* @param {boolean} arg7
* @returns {Uint8Array}
*/
__exports.resize = function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
const ptr0 = passArray8ToWasm(arg0);
const len0 = WASM_VECTOR_LEN;
const retptr = globalArgumentPtr();
wasm.resize(retptr, ptr0, len0, arg1, arg2, arg3, arg4, arg5, arg6, arg7);
const mem = getUint32Memory();
const rustptr = mem[retptr / 4];
const rustlen = mem[retptr / 4 + 1];
const realRet = getArrayU8FromWasm(rustptr, rustlen).slice();
wasm.__wbindgen_free(rustptr, rustlen * 1);
return realRet;
};
const heap = new Array(32);
heap.fill(undefined);
heap.push(undefined, null, true, false);
let heap_next = heap.length;
function dropObject(idx) {
if (idx < 36) return;
heap[idx] = heap_next;
heap_next = idx;
}
__exports.__wbindgen_object_drop_ref = function(i) { dropObject(i); };
function init(path_or_module) {
let instantiation;
const imports = { './resize': __exports };
if (path_or_module instanceof WebAssembly.Module) {
instantiation = WebAssembly.instantiate(path_or_module, imports)
.then(instance => {
return { instance, module: path_or_module }
});
} else {
const data = fetch(path_or_module);
if (typeof WebAssembly.instantiateStreaming === 'function') {
instantiation = WebAssembly.instantiateStreaming(data, imports)
.catch(e => {
console.warn("`WebAssembly.instantiateStreaming` failed. Assuming this is because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
return data
.then(r => r.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes, imports));
});
} else {
instantiation = data
.then(response => response.arrayBuffer())
.then(buffer => WebAssembly.instantiate(buffer, imports));
}
}
return instantiation.then(({instance}) => {
wasm = init.wasm = instance.exports;
});
};
self.wasm_bindgen = Object.assign(init, __exports);
})();

View File

@@ -1,5 +1,6 @@
/* tslint:disable */ /* tslint:disable */
export const memory: WebAssembly.Memory; export const memory: WebAssembly.Memory;
export function __wbindgen_global_argument_ptr(): number;
export function __wbindgen_malloc(a: number): number; export function __wbindgen_malloc(a: number): number;
export function __wbindgen_free(a: number, b: number): void; export function __wbindgen_free(a: number, b: number): void;
export function resize(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number): void; export function resize(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number): void;

Binary file not shown.

View File

@@ -1,8 +1,17 @@
FROM ubuntu
RUN apt-get update && \
apt-get install -qqy git build-essential cmake python2.7
RUN git clone --recursive https://github.com/WebAssembly/wabt /usr/src/wabt
RUN mkdir -p /usr/src/wabt/build
WORKDIR /usr/src/wabt/build
RUN cmake .. -DCMAKE_INSTALL_PREFIX=/opt/wabt && \
make && \
make install
FROM rust FROM rust
RUN rustup target add wasm32-unknown-unknown RUN rustup install nightly && \
rustup target add --toolchain nightly wasm32-unknown-unknown
RUN mkdir /opt/wabt && \ COPY --from=0 /opt/wabt /opt/wabt
curl -L https://github.com/WebAssembly/wabt/releases/download/1.0.11/wabt-1.0.11-linux.tar.gz | tar -xzf - -C /opt/wabt --strip 1 ENV PATH="/opt/wabt/bin:${PATH}"
ENV PATH="/opt/wabt:${PATH}"
WORKDIR /src WORKDIR /src

View File

@@ -6,7 +6,8 @@ echo "============================================="
echo "Compiling wasm" echo "Compiling wasm"
echo "=============================================" echo "============================================="
( (
cargo build \ rustup run nightly \
cargo build \
--target wasm32-unknown-unknown \ --target wasm32-unknown-unknown \
--release --release
cp target/wasm32-unknown-unknown/release/rotate.wasm . cp target/wasm32-unknown-unknown/release/rotate.wasm .

Binary file not shown.

View File

@@ -39,7 +39,6 @@ echo "============================================="
( (
emcc \ emcc \
${OPTIMIZE} \ ${OPTIMIZE} \
--closure 1 \
--bind \ --bind \
-s ALLOW_MEMORY_GROWTH=1 \ -s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \ -s MODULARIZE=1 \

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@@ -40,7 +40,6 @@ echo "============================================="
( (
emcc \ emcc \
${OPTIMIZE} \ ${OPTIMIZE} \
--closure 1 \
--bind \ --bind \
-s ALLOW_MEMORY_GROWTH=1 \ -s ALLOW_MEMORY_GROWTH=1 \
-s MODULARIZE=1 \ -s MODULARIZE=1 \

File diff suppressed because one or more lines are too long

Binary file not shown.

203
config/size-report.js Normal file
View File

@@ -0,0 +1,203 @@
const path = require('path');
const { URL } = require('url');
const gzipSize = require('gzip-size');
const fetch = require('node-fetch');
const prettyBytes = require('pretty-bytes');
const escapeRE = require('escape-string-regexp');
const readdirp = require('readdirp');
const chalk = new require('chalk').constructor({ level: 4 });
function fetchTravis(path, options = {}) {
const url = new URL(path, 'https://api.travis-ci.org');
url.search = new URLSearchParams(options);
return fetch(url, {
headers: { 'Travis-API-Version': '3' },
});
}
function fetchTravisBuildInfo(user, repo, branch) {
return fetchTravis(`/repo/${encodeURIComponent(`${user}/${repo}`)}/builds`, {
'branch.name': branch,
state: 'passed',
limit: 1,
event_type: 'push',
}).then(r => r.json());
}
function fetchTravisText(path) {
return fetchTravis(path).then(r => r.text());
}
/**
* Recursively-read a directory and turn it into an array of { name, size, gzipSize }
*/
async function dirToInfoArray(startPath) {
const results = await new Promise((resolve, reject) => {
readdirp({ root: startPath }, (err, results) => {
if (err) reject(err); else resolve(results);
});
});
return Promise.all(
results.files.map(async (entry) => ({
name: entry.path,
gzipSize: await gzipSize.file(entry.fullPath),
size: entry.stat.size,
})),
);
}
/**
* Try to treat two entries with different file name hashes as the same file.
*/
function findHashedMatch(name, buildInfo) {
const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(name);
if (!nameParts) return;
const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
const matchingEntry = buildInfo.find(entry => matchRe.test(entry.name));
return matchingEntry;
}
const buildSizePrefix = '=== BUILD SIZES: ';
const buildSizePrefixRe = new RegExp(`^${escapeRE(buildSizePrefix)}(.+)$`, 'm');
async function getPreviousBuildInfo() {
const buildData = await fetchTravisBuildInfo('GoogleChromeLabs', 'squoosh', 'master');
const jobUrl = buildData.builds[0].jobs[0]['@href'];
const log = await fetchTravisText(jobUrl + '/log.txt');
const reResult = buildSizePrefixRe.exec(log);
if (!reResult) return;
return JSON.parse(reResult[1]);
}
/**
* Generate an array that represents the difference between builds.
* Returns an array of { beforeName, afterName, beforeSize, afterSize }.
* Sizes are gzipped size.
* Before/after properties are missing if resource isn't in the previous/new build.
*/
function getChanges(previousBuildInfo, buildInfo) {
const buildChanges = [];
const alsoInPreviousBuild = new Set();
for (const oldEntry of previousBuildInfo) {
const newEntry = buildInfo.find(entry => entry.name === oldEntry.name) ||
findHashedMatch(oldEntry.name, buildInfo);
// Entry is in previous build, but not the new build.
if (!newEntry) {
buildChanges.push({
beforeName: oldEntry.name,
beforeSize: oldEntry.gzipSize,
});
continue;
}
// Mark this entry so we know we've dealt with it.
alsoInPreviousBuild.add(newEntry);
// If they're the same, just ignore.
// Using size rather than gzip size. I've seen different platforms produce different zipped
// sizes.
if (
oldEntry.size === newEntry.size &&
oldEntry.name === newEntry.name
) continue;
// Entry is in both builds (maybe renamed).
buildChanges.push({
beforeName: oldEntry.name,
afterName: newEntry.name,
beforeSize: oldEntry.gzipSize,
afterSize: newEntry.gzipSize,
});
}
// Look for entries that are only in the new build.
for (const newEntry of buildInfo) {
if (alsoInPreviousBuild.has(newEntry)) continue;
buildChanges.push({
afterName: newEntry.name,
afterSize: newEntry.gzipSize,
});
}
return buildChanges;
}
async function main() {
// Output the current build sizes for later retrieval.
const buildInfo = await dirToInfoArray(__dirname + '/../build');
console.log(buildSizePrefix + JSON.stringify(buildInfo));
console.log('\nBuild change report:');
let previousBuildInfo;
try {
previousBuildInfo = await getPreviousBuildInfo();
} catch (err) {
console.log(` Couldn't parse previous build info`);
return;
}
if (!previousBuildInfo) {
console.log(` Couldn't find previous build info`);
return;
}
const buildChanges = getChanges(previousBuildInfo, buildInfo);
if (buildChanges.length === 0) {
console.log(' No changes');
return;
}
// One letter references, so it's easier to get the spacing right.
const y = chalk.yellow;
const g = chalk.green;
const r = chalk.red;
for (const change of buildChanges) {
// New file.
if (!change.beforeSize) {
console.log(` ${g('ADDED')} ${change.afterName} - ${prettyBytes(change.afterSize)}`);
continue;
}
// Removed file.
if (!change.afterSize) {
console.log(` ${r('REMOVED')} ${change.beforeName} - was ${prettyBytes(change.beforeSize)}`);
continue;
}
// Changed file.
let size;
if (change.beforeSize === change.afterSize) {
// Just renamed.
size = `${prettyBytes(change.afterSize)} -> no change`;
} else {
const color = change.afterSize > change.beforeSize ? r : g;
const sizeDiff = prettyBytes(change.afterSize - change.beforeSize, { signed: true });
const relativeDiff = Math.round((change.afterSize / change.beforeSize) * 1000) / 1000;
size = `${prettyBytes(change.beforeSize)} -> ${prettyBytes(change.afterSize)}` +
' (' +
color(`${sizeDiff}, ${relativeDiff}x`) +
')';
}
console.log(` ${y('CHANGED')} ${change.afterName} - ${size}`);
if (change.beforeName !== change.afterName) {
console.log(` Renamed from: ${change.beforeName}`);
}
}
}
main();

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

13862
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,14 +1,15 @@
{ {
"private": true, "private": true,
"name": "squoosh", "name": "squoosh",
"version": "1.10.1", "version": "1.6.0",
"license": "apache-2.0", "license": "apache-2.0",
"scripts": { "scripts": {
"build:sdk": "microbundle --compress -f es -o build/sdk.mjs -i src/sdk.ts",
"start": "webpack-dev-server --host 0.0.0.0 --hot", "start": "webpack-dev-server --host 0.0.0.0 --hot",
"build": "webpack -p", "build": "webpack -p && npm run build:sdk",
"lint": "tslint -c tslint.json -p tsconfig.json -t verbose", "lint": "tslint -c tslint.json -p tsconfig.json -t verbose 'src/**/*.{ts,tsx,js,jsx}'",
"lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'", "lintfix": "tslint -c tslint.json -p tsconfig.json -t verbose --fix 'src/**/*.{ts,tsx,js,jsx}'",
"sizereport": "sizereport --config" "sizereport": "node config/size-report.js"
}, },
"husky": { "husky": {
"hooks": { "hooks": {
@@ -16,61 +17,61 @@
} }
}, },
"devDependencies": { "devDependencies": {
"@types/node": "10.14.15", "@types/node": "10.14.1",
"@types/pretty-bytes": "5.1.0", "@types/pretty-bytes": "5.1.0",
"@types/webassembly-js-api": "0.0.3", "@types/webassembly-js-api": "0.0.2",
"@webcomponents/custom-elements": "1.2.4", "@webcomponents/custom-elements": "1.2.1",
"@webpack-cli/serve": "0.1.8", "@webpack-cli/serve": "0.1.3",
"assets-webpack-plugin": "3.9.10", "assets-webpack-plugin": "3.9.10",
"chalk": "2.4.2", "chalk": "2.4.2",
"chokidar": "3.0.2", "chokidar": "2.1.2",
"classnames": "2.2.6", "classnames": "2.2.6",
"clean-webpack-plugin": "1.0.1", "clean-webpack-plugin": "1.0.1",
"comlink": "3.1.1", "copy-webpack-plugin": "5.0.1",
"copy-webpack-plugin": "5.0.4", "comlink": "^3.2.0",
"critters-webpack-plugin": "2.4.0", "critters-webpack-plugin": "2.3.0",
"css-loader": "1.0.1", "css-loader": "1.0.1",
"ejs": "2.6.2", "ejs": "2.6.1",
"escape-string-regexp": "2.0.0", "escape-string-regexp": "1.0.5",
"exports-loader": "0.7.0", "exports-loader": "0.7.0",
"file-drop-element": "0.2.0", "file-drop-element": "0.2.0",
"file-loader": "4.2.0", "file-loader": "3.0.1",
"gzip-size": "5.1.1", "gzip-size": "5.0.0",
"html-webpack-plugin": "3.2.0", "html-webpack-plugin": "3.2.0",
"husky": "3.0.4", "husky": "1.3.1",
"idb-keyval": "3.2.0", "idb-keyval": "3.1.0",
"linkstate": "1.1.1", "linkstate": "1.1.1",
"loader-utils": "1.2.3", "loader-utils": "1.2.3",
"mini-css-extract-plugin": "0.8.0", "microbundle": "^0.10.1",
"mini-css-extract-plugin": "0.5.0",
"minimatch": "3.0.4", "minimatch": "3.0.4",
"node-fetch": "2.6.0", "node-fetch": "2.3.0",
"node-sass": "4.13.0", "node-sass": "4.11.0",
"optimize-css-assets-webpack-plugin": "5.0.1", "optimize-css-assets-webpack-plugin": "5.0.1",
"pointer-tracker": "2.0.3", "pointer-tracker": "2.0.3",
"preact": "8.4.2", "preact": "8.4.2",
"prerender-loader": "1.3.0", "prerender-loader": "1.3.0",
"pretty-bytes": "5.3.0", "pretty-bytes": "5.1.0",
"progress-bar-webpack-plugin": "1.12.1", "progress-bar-webpack-plugin": "1.12.1",
"raw-loader": "3.1.0", "raw-loader": "2.0.0",
"readdirp": "3.1.2", "readdirp": "2.2.1",
"sass-loader": "7.3.1", "sass-loader": "7.1.0",
"script-ext-html-webpack-plugin": "2.1.4", "script-ext-html-webpack-plugin": "2.1.3",
"source-map-loader": "0.2.4", "source-map-loader": "0.2.4",
"style-loader": "1.0.0", "style-loader": "0.23.1",
"terser-webpack-plugin": "1.4.1", "terser-webpack-plugin": "1.2.3",
"travis-size-report": "1.1.0", "ts-loader": "5.3.3",
"ts-loader": "6.0.3", "tslint": "5.14.0",
"tslint": "5.19.0",
"tslint-config-airbnb": "5.11.1", "tslint-config-airbnb": "5.11.1",
"tslint-config-semistandard": "8.0.1", "tslint-config-semistandard": "7.0.0",
"tslint-react": "4.0.0", "tslint-react": "3.6.0",
"typed-css-modules": "0.4.2", "typed-css-modules": "0.4.2",
"typescript": "3.5.3", "typescript": "3.3.3333",
"url-loader": "2.1.0", "url-loader": "1.1.2",
"webpack": "4.39.3", "webpack": "4.28.0",
"webpack-bundle-analyzer": "3.4.1", "webpack-bundle-analyzer": "3.1.0",
"webpack-cli": "3.3.4", "webpack-cli": "3.3.0",
"webpack-dev-server": "3.8.0", "webpack-dev-server": "3.2.1",
"worker-plugin": "3.1.0" "worker-plugin": "3.1.0"
} }
} }

View File

@@ -1,14 +0,0 @@
const escapeRE = require("escape-string-regexp");
module.exports = {
repo: "GoogleChromeLabs/squoosh",
path: "build/**/!(*.map)",
branch: "master",
findRenamed(path, newPaths) {
const nameParts = /^(.+\.)[a-f0-9]+(\..+)$/.exec(path);
if (!nameParts) return;
const matchRe = new RegExp(`^${escapeRE(nameParts[1])}[a-f0-9]+${escapeRE(nameParts[2])}$`);
return newPaths.find(newPath => matchRe.test(newPath));
}
};

View File

@@ -1,5 +1,5 @@
import * as identity from './identity/encoder-meta'; import * as identity from './identity/encoder-meta';
import * as oxiPNG from './oxipng/encoder-meta'; import * as optiPNG from './optipng/encoder-meta';
import * as mozJPEG from './mozjpeg/encoder-meta'; import * as mozJPEG from './mozjpeg/encoder-meta';
import * as webP from './webp/encoder-meta'; import * as webP from './webp/encoder-meta';
import * as browserPNG from './browser-png/encoder-meta'; import * as browserPNG from './browser-png/encoder-meta';
@@ -17,7 +17,7 @@ export interface EncoderSupportMap {
export type EncoderState = export type EncoderState =
identity.EncoderState | identity.EncoderState |
oxiPNG.EncoderState | optiPNG.EncoderState |
mozJPEG.EncoderState | mozJPEG.EncoderState |
webP.EncoderState | webP.EncoderState |
browserPNG.EncoderState | browserPNG.EncoderState |
@@ -31,7 +31,7 @@ export type EncoderState =
export type EncoderOptions = export type EncoderOptions =
identity.EncodeOptions | identity.EncodeOptions |
oxiPNG.EncodeOptions | optiPNG.EncodeOptions |
mozJPEG.EncodeOptions | mozJPEG.EncodeOptions |
webP.EncodeOptions | webP.EncodeOptions |
browserPNG.EncodeOptions | browserPNG.EncodeOptions |
@@ -47,7 +47,7 @@ export type EncoderType = keyof typeof encoderMap;
export const encoderMap = { export const encoderMap = {
[identity.type]: identity, [identity.type]: identity,
[oxiPNG.type]: oxiPNG, [optiPNG.type]: optiPNG,
[mozJPEG.type]: mozJPEG, [mozJPEG.type]: mozJPEG,
[webP.type]: webP, [webP.type]: webP,
[browserPNG.type]: browserPNG, [browserPNG.type]: browserPNG,

View File

@@ -1,3 +0,0 @@
export interface HqxOptions {
factor: 2 | 3 | 4;
}

View File

@@ -1,20 +0,0 @@
import { resize } from '../../../codecs/hqx/pkg';
import { HqxOptions } from './processor-meta';
export async function hqx(
data: ImageData,
opts: HqxOptions,
): Promise<ImageData> {
const input = data;
const result = resize(
new Uint32Array(input.data.buffer),
input.width,
input.height,
opts.factor,
);
return new ImageData(
new Uint8ClampedArray(result.buffer),
data.width * opts.factor,
data.height * opts.factor,
);
}

View File

@@ -4,7 +4,7 @@ export interface EncodeOptions {
export interface EncoderState { type: typeof type; options: EncodeOptions; } export interface EncoderState { type: typeof type; options: EncodeOptions; }
export const type = 'png'; export const type = 'png';
export const label = 'OxiPNG'; export const label = 'OptiPNG';
export const mimeType = 'image/png'; export const mimeType = 'image/png';
export const extension = 'png'; export const extension = 'png';

View File

@@ -0,0 +1,18 @@
import optipng, { OptiPngModule } from '../../../codecs/optipng/optipng';
import wasmUrl from '../../../codecs/optipng/optipng.wasm';
import { EncodeOptions } from './encoder-meta';
import { initEmscriptenModule } from '../util';
let emscriptenModule: Promise<OptiPngModule>;
export async function compress(data: BufferSource, options: EncodeOptions): Promise<ArrayBuffer> {
if (!emscriptenModule) emscriptenModule = initEmscriptenModule(optipng, wasmUrl);
const module = await emscriptenModule;
const resultView = module.compress(data, options);
const result = new Uint8Array(resultView);
module.free_result();
// wasm cant run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
return result.buffer as ArrayBuffer;
}

View File

@@ -10,7 +10,7 @@ type Props = {
onChange(newOptions: EncodeOptions): void; onChange(newOptions: EncodeOptions): void;
}; };
export default class OxiPNGEncoderOptions extends Component<Props, {}> { export default class OptiPNGEncoderOptions extends Component<Props, {}> {
@bind @bind
onChange(event: Event) { onChange(event: Event) {
const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement; const form = (event.currentTarget as HTMLInputElement).closest('form') as HTMLFormElement;
@@ -28,7 +28,7 @@ export default class OxiPNGEncoderOptions extends Component<Props, {}> {
<Range <Range
name="level" name="level"
min="0" min="0"
max="6" max="7"
step="1" step="1"
value={options.level} value={options.level}
onInput={this.onChange} onInput={this.onChange}

View File

@@ -1,6 +0,0 @@
import { optimise } from '../../../codecs/oxipng/pkg';
import { EncodeOptions } from './encoder-meta';
export async function compress(data: ArrayBuffer, options: EncodeOptions): Promise<ArrayBuffer> {
return optimise(new Uint8Array(data), options.level).buffer;
}

View File

@@ -1,11 +1,4 @@
import { expose } from 'comlink'; import { expose } from 'comlink';
import { isHqx } from '../resize/processor-meta';
import { clamp } from '../util';
function timed<T>(name: string, func: () => Promise<T>) {
console.time(name);
return func().finally(() => console.timeEnd(name));
}
async function mozjpegEncode( async function mozjpegEncode(
data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions, data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
@@ -13,7 +6,7 @@ async function mozjpegEncode(
const { encode } = await import( const { encode } = await import(
/* webpackChunkName: "process-mozjpeg-enc" */ /* webpackChunkName: "process-mozjpeg-enc" */
'../mozjpeg/encoder'); '../mozjpeg/encoder');
return timed('mozjpegEncode', () => encode(data, options)); return encode(data, options);
} }
async function quantize( async function quantize(
@@ -22,7 +15,7 @@ async function quantize(
const { process } = await import( const { process } = await import(
/* webpackChunkName: "process-imagequant" */ /* webpackChunkName: "process-imagequant" */
'../imagequant/processor'); '../imagequant/processor');
return timed('quantize', () => process(data, opts)); return process(data, opts);
} }
async function rotate( async function rotate(
@@ -32,38 +25,26 @@ async function rotate(
/* webpackChunkName: "process-rotate" */ /* webpackChunkName: "process-rotate" */
'../rotate/processor'); '../rotate/processor');
return timed('rotate', () => rotate(data, opts)); return rotate(data, opts);
} }
async function resize( async function resize(
data: ImageData, opts: import('../resize/processor-meta').WorkerResizeOptions, data: ImageData, opts: import('../resize/processor-meta').WorkerResizeOptions,
): Promise<ImageData> { ): Promise<ImageData> {
if (isHqx(opts)) {
const { hqx } = await import(
/* webpackChunkName: "process-hqx" */
'../hqx/processor');
const widthRatio = opts.width / data.width;
const heightRatio = opts.height / data.height;
const ratio = Math.max(widthRatio, heightRatio);
if (ratio <= 1) return data;
const factor = clamp(Math.ceil(ratio), { min: 2, max: 4 }) as 2|3|4;
return timed('hqx', () => hqx(data, { factor }));
}
const { resize } = await import( const { resize } = await import(
/* webpackChunkName: "process-resize" */ /* webpackChunkName: "process-resize" */
'../resize/processor'); '../resize/processor');
return timed('resize', () => resize(data, opts)); return resize(data, opts);
} }
async function oxiPngEncode( async function optiPngEncode(
data: ArrayBuffer, options: import('../oxipng/encoder-meta').EncodeOptions, data: BufferSource, options: import('../optipng/encoder-meta').EncodeOptions,
): Promise<ArrayBuffer> { ): Promise<ArrayBuffer> {
const { compress } = await import( const { compress } = await import(
/* webpackChunkName: "process-oxipng" */ /* webpackChunkName: "process-optipng" */
'../oxipng/encoder'); '../optipng/encoder');
return timed('oxiPngEncode', () => compress(data, options)); return compress(data, options);
} }
async function webpEncode( async function webpEncode(
@@ -72,25 +53,17 @@ async function webpEncode(
const { encode } = await import( const { encode } = await import(
/* webpackChunkName: "process-webp-enc" */ /* webpackChunkName: "process-webp-enc" */
'../webp/encoder'); '../webp/encoder');
return timed('webpEncode', () => encode(data, options)); return encode(data, options);
} }
async function webpDecode(data: ArrayBuffer): Promise<ImageData> { async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
const { decode } = await import( const { decode } = await import(
/* webpackChunkName: "process-webp-dec" */ /* webpackChunkName: "process-webp-dec" */
'../webp/decoder'); '../webp/decoder');
return timed('webpDecode', () => decode(data)); return decode(data);
} }
const exports = { const exports = { mozjpegEncode, quantize, rotate, resize, optiPngEncode, webpEncode, webpDecode };
mozjpegEncode,
quantize,
rotate,
resize,
oxiPngEncode,
webpEncode,
webpDecode,
};
export type ProcessorWorkerApi = typeof exports; export type ProcessorWorkerApi = typeof exports;
expose(exports, self); expose(exports, self);

View File

@@ -2,7 +2,7 @@ import { proxy } from 'comlink';
import { QuantizeOptions } from './imagequant/processor-meta'; import { QuantizeOptions } from './imagequant/processor-meta';
import { canvasEncode, blobToArrayBuffer } from '../lib/util'; import { canvasEncode, blobToArrayBuffer } from '../lib/util';
import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta'; import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
import { EncodeOptions as OxiPNGEncoderOptions } from './oxipng/encoder-meta'; import { EncodeOptions as OptiPNGEncoderOptions } from './optipng/encoder-meta';
import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta'; import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
import { EncodeOptions as BrowserJPEGOptions } from './browser-jpeg/encoder-meta'; import { EncodeOptions as BrowserJPEGOptions } from './browser-jpeg/encoder-meta';
import { EncodeOptions as BrowserWebpEncodeOptions } from './browser-webp/encoder-meta'; import { EncodeOptions as BrowserWebpEncodeOptions } from './browser-webp/encoder-meta';
@@ -16,7 +16,6 @@ import * as browserGIF from './browser-gif/encoder';
import * as browserTIFF from './browser-tiff/encoder'; import * as browserTIFF from './browser-tiff/encoder';
import * as browserJP2 from './browser-jp2/encoder'; import * as browserJP2 from './browser-jp2/encoder';
import * as browserPDF from './browser-pdf/encoder'; import * as browserPDF from './browser-pdf/encoder';
import { bind } from '../lib/initial-util';
type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi; type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
@@ -95,7 +94,14 @@ export default class Processor {
if (!this._worker) return; if (!this._worker) return;
// If the worker is unused for 10 seconds, remove it to save memory. // If the worker is unused for 10 seconds, remove it to save memory.
this._workerTimeoutId = self.setTimeout(this.terminateWorker, workerTimeout); this._workerTimeoutId = self.setTimeout(
() => {
if (!this._worker) return;
this._worker.terminate();
this._worker = undefined;
},
workerTimeout,
);
} }
/** Abort the current job, if any */ /** Abort the current job, if any */
@@ -105,11 +111,7 @@ export default class Processor {
this._abortRejector(new DOMException('Aborted', 'AbortError')); this._abortRejector(new DOMException('Aborted', 'AbortError'));
this._abortRejector = undefined; this._abortRejector = undefined;
this._busy = false; this._busy = false;
this.terminateWorker();
}
@bind
terminateWorker() {
if (!this._worker) return; if (!this._worker) return;
this._worker.terminate(); this._worker.terminate();
this._worker = undefined; this._worker = undefined;
@@ -143,13 +145,13 @@ export default class Processor {
} }
@Processor._processingJob({ needsWorker: true }) @Processor._processingJob({ needsWorker: true })
async oxiPngEncode( async optiPngEncode(
data: ImageData, opts: OxiPNGEncoderOptions, data: ImageData, opts: OptiPNGEncoderOptions,
): Promise<ArrayBuffer> { ): Promise<ArrayBuffer> {
// OxiPNG expects PNG input. // OptiPNG expects PNG input.
const pngBlob = await canvasEncode(data, 'image/png'); const pngBlob = await canvasEncode(data, 'image/png');
const pngBuffer = await blobToArrayBuffer(pngBlob); const pngBuffer = await blobToArrayBuffer(pngBlob);
return this._workerApi!.oxiPngEncode(pngBuffer, opts); return this._workerApi!.optiPngEncode(pngBuffer, opts);
} }
@Processor._processingJob({ needsWorker: true }) @Processor._processingJob({ needsWorker: true })

View File

@@ -12,9 +12,8 @@ import Select from '../../components/select';
interface Props { interface Props {
isVector: Boolean; isVector: Boolean;
inputWidth: number;
inputHeight: number;
options: ResizeOptions; options: ResizeOptions;
aspect: number;
onChange(newOptions: ResizeOptions): void; onChange(newOptions: ResizeOptions): void;
} }
@@ -22,21 +21,12 @@ interface State {
maintainAspect: boolean; maintainAspect: boolean;
} }
const sizePresets = [0.25, 0.3333, 0.5, 1, 2, 3, 4];
export default class ResizerOptions extends Component<Props, State> { export default class ResizerOptions extends Component<Props, State> {
state: State = { state: State = {
maintainAspect: true, maintainAspect: true,
}; };
private form?: HTMLFormElement; form?: HTMLFormElement;
private presetWidths: { [idx: number]: number } = {};
private presetHeights: { [idx: number]: number } = {};
constructor(props: Props) {
super(props);
this.generatePresetValues(props.inputWidth, props.inputHeight);
}
private reportOptions() { private reportOptions() {
const form = this.form!; const form = this.form!;
@@ -63,31 +53,18 @@ export default class ResizerOptions extends Component<Props, State> {
this.reportOptions(); this.reportOptions();
} }
private getAspect() {
return this.props.inputWidth / this.props.inputHeight;
}
componentDidUpdate(prevProps: Props, prevState: State) { componentDidUpdate(prevProps: Props, prevState: State) {
if (!prevState.maintainAspect && this.state.maintainAspect) { if (!prevState.maintainAspect && this.state.maintainAspect) {
this.form!.height.value = Math.round(Number(this.form!.width.value) / this.getAspect()); this.form!.height.value = Math.round(Number(this.form!.width.value) / this.props.aspect);
this.reportOptions(); this.reportOptions();
} }
} }
componentWillReceiveProps(nextProps: Props) {
if (
this.props.inputWidth !== nextProps.inputWidth ||
this.props.inputHeight !== nextProps.inputHeight
) {
this.generatePresetValues(nextProps.inputWidth, nextProps.inputHeight);
}
}
@bind @bind
private onWidthInput() { private onWidthInput() {
if (this.state.maintainAspect) { if (this.state.maintainAspect) {
const width = inputFieldValueAsNumber(this.form!.width); const width = inputFieldValueAsNumber(this.form!.width);
this.form!.height.value = Math.round(width / this.getAspect()); this.form!.height.value = Math.round(width / this.props.aspect);
} }
this.reportOptions(); this.reportOptions();
@@ -97,44 +74,12 @@ export default class ResizerOptions extends Component<Props, State> {
private onHeightInput() { private onHeightInput() {
if (this.state.maintainAspect) { if (this.state.maintainAspect) {
const height = inputFieldValueAsNumber(this.form!.height); const height = inputFieldValueAsNumber(this.form!.height);
this.form!.width.value = Math.round(height * this.getAspect()); this.form!.width.value = Math.round(height * this.props.aspect);
} }
this.reportOptions(); this.reportOptions();
} }
private generatePresetValues(width: number, height: number) {
for (const preset of sizePresets) {
this.presetWidths[preset] = Math.round(width * preset);
this.presetHeights[preset] = Math.round(height * preset);
}
}
private getPreset(): number | string {
const { width, height } = this.props.options;
for (const preset of sizePresets) {
if (
width === this.presetWidths[preset] &&
height === this.presetHeights[preset]
) return preset;
}
return 'custom';
}
@bind
private onPresetChange(event: Event) {
const select = event.target as HTMLSelectElement;
if (select.value === 'custom') return;
const multiplier = Number(select.value);
(this.form!.width as HTMLInputElement).value =
Math.round(this.props.inputWidth * multiplier) + '';
(this.form!.height as HTMLInputElement).value =
Math.round(this.props.inputHeight * multiplier) + '';
this.reportOptions();
}
render({ options, isVector }: Props, { maintainAspect }: State) { render({ options, isVector }: Props, { maintainAspect }: State) {
return ( return (
<form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}> <form ref={linkRef(this, 'form')} class={style.optionsSection} onSubmit={preventDefault}>
@@ -150,22 +95,12 @@ export default class ResizerOptions extends Component<Props, State> {
<option value="mitchell">Mitchell</option> <option value="mitchell">Mitchell</option>
<option value="catrom">Catmull-Rom</option> <option value="catrom">Catmull-Rom</option>
<option value="triangle">Triangle (bilinear)</option> <option value="triangle">Triangle (bilinear)</option>
<option value="hqx">hqx (pixel art)</option>
<option value="browser-pixelated">Browser pixelated</option> <option value="browser-pixelated">Browser pixelated</option>
<option value="browser-low">Browser low quality</option> <option value="browser-low">Browser low quality</option>
<option value="browser-medium">Browser medium quality</option> <option value="browser-medium">Browser medium quality</option>
<option value="browser-high">Browser high quality</option> <option value="browser-high">Browser high quality</option>
</Select> </Select>
</label> </label>
<label class={style.optionTextFirst}>
Preset:
<Select value={this.getPreset()} onChange={this.onPresetChange}>
{sizePresets.map(preset =>
<option value={preset}>{preset * 100}%</option>,
)}
<option value="custom">Custom</option>
</Select>
</label>
<label class={style.optionTextFirst}> <label class={style.optionTextFirst}>
Width: Width:
<input <input

View File

@@ -1,26 +1,8 @@
type BrowserResizeMethods = type BrowserResizeMethods = 'browser-pixelated' | 'browser-low' | 'browser-medium' | 'browser-high';
| 'browser-pixelated' type WorkerResizeMethods = 'triangle' | 'catrom' | 'mitchell' | 'lanczos3';
| 'browser-low' const workerResizeMethods: WorkerResizeMethods[] = ['triangle', 'catrom', 'mitchell', 'lanczos3'];
| 'browser-medium'
| 'browser-high';
type WorkerResizeMethods =
| 'triangle'
| 'catrom'
| 'mitchell'
| 'lanczos3'
| 'hqx';
const workerResizeMethods: WorkerResizeMethods[] = [
'triangle',
'catrom',
'mitchell',
'lanczos3',
'hqx',
];
export type ResizeOptions = export type ResizeOptions = BrowserResizeOptions | WorkerResizeOptions | VectorResizeOptions;
| BrowserResizeOptions
| WorkerResizeOptions
| VectorResizeOptions;
export interface ResizeOptionsCommon { export interface ResizeOptionsCommon {
width: number; width: number;
@@ -47,21 +29,10 @@ export interface VectorResizeOptions extends ResizeOptionsCommon {
* *
* @param opts * @param opts
*/ */
export function isWorkerOptions( export function isWorkerOptions(opts: ResizeOptions): opts is WorkerResizeOptions {
opts: ResizeOptions,
): opts is WorkerResizeOptions {
return (workerResizeMethods as string[]).includes(opts.method); return (workerResizeMethods as string[]).includes(opts.method);
} }
/**
* Return whether a set of options are from the HQ<n>X set
*
* @param opts
*/
export function isHqx(opts: ResizeOptions): opts is WorkerResizeOptions {
return opts.method === 'hqx';
}
export const defaultOptions: ResizeOptions = { export const defaultOptions: ResizeOptions = {
// Width and height will always default to the image size. // Width and height will always default to the image size.
// This is set elsewhere. // This is set elsewhere.

View File

@@ -1,6 +1,17 @@
import wasmUrl from '../../../codecs/resize/pkg/resize_bg.wasm';
import '../../../codecs/resize/pkg/resize';
import { WorkerResizeOptions } from './processor-meta'; import { WorkerResizeOptions } from './processor-meta';
import { getContainOffsets } from './util'; import { getContainOffsets } from './util';
import { resize as codecResize } from '../../../codecs/resize/pkg';
interface WasmBindgenExports {
resize: typeof import('../../../codecs/resize/pkg/resize').resize;
}
type WasmBindgen = ((url: string) => Promise<void>) & WasmBindgenExports;
declare var wasm_bindgen: WasmBindgen;
const ready = wasm_bindgen(wasmUrl);
function crop(data: ImageData, sx: number, sy: number, sw: number, sh: number): ImageData { function crop(data: ImageData, sx: number, sy: number, sw: number, sh: number): ImageData {
const inputPixels = new Uint32Array(data.data.buffer); const inputPixels = new Uint32Array(data.data.buffer);
@@ -30,7 +41,9 @@ export async function resize(data: ImageData, opts: WorkerResizeOptions): Promis
input = crop(input, Math.round(sx), Math.round(sy), Math.round(sw), Math.round(sh)); input = crop(input, Math.round(sx), Math.round(sy), Math.round(sw), Math.round(sh));
} }
const result = codecResize( await ready;
const result = wasm_bindgen.resize(
new Uint8Array(input.data.buffer), input.width, input.height, opts.width, opts.height, new Uint8Array(input.data.buffer), input.width, input.height, opts.width, opts.height,
resizeMethods.indexOf(opts.method), opts.premultiply, opts.linearRGB, resizeMethods.indexOf(opts.method), opts.premultiply, opts.linearRGB,
); );

View File

@@ -25,12 +25,3 @@ export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
}); });
}); });
} }
interface ClampOpts {
min?: number;
max?: number;
}
export function clamp(x: number, opts: ClampOpts): number {
return Math.min(Math.max(x, opts.min || Number.MIN_VALUE), opts.max || Number.MAX_VALUE);
}

View File

@@ -0,0 +1,106 @@
import App from './index';
import { SquooshStartEventType, SquooshSideEventType } from '../compress/index';
import { expose } from 'comlink';
export interface ReadyMessage {
type: 'READY';
version: string;
}
export function exposeAPI(app: App) {
if (window === top) {
// Someone opened Squoosh in a window rather than an iframe.
// This can be deceiving and we wont allow that.
return;
}
self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION }, '*');
self.addEventListener('message', (event: MessageEvent) => {
if (event.data !== 'READY?') {
return;
}
event.stopImmediatePropagation();
self.parent.postMessage({ type: 'READY', version: MAJOR_VERSION } as ReadyMessage, '*');
});
expose(new API(app), self.parent);
}
function addRemovableGlobalListener<
K extends keyof GlobalEventHandlersEventMap
>(name: K, listener: (ev: GlobalEventHandlersEventMap[K]) => void): () => void {
document.addEventListener(name, listener);
return () => document.removeEventListener(name, listener);
}
/**
* The API class contains the methods that are exposed via Comlink to the
* outside world.
*/
export class API {
/**
* Internal constructor. Do not call.
*/
constructor(private _app: App) {}
/**
* Loads a given file into Squoosh.
* @param blob The `Blob` to load
* @param name The name of the file. The extension of this name will be used
* to deterime which decoder to use.
*/
setFile(blob: Blob, name: string) {
return new Promise((resolve) => {
document.addEventListener(SquooshStartEventType.START, () => resolve(), {
once: true,
});
this._app.openFile(new File([blob], name));
});
}
/**
* Grabs one side from Squoosh as a `File`.
* @param side The side which to grab. 0 = left, 1 = right.
*/
async getBlob(side: 0 | 1) {
if (!this._app.state.file || !this._app.compressInstance) {
throw new Error('No file has been loaded');
}
if (
!this._app.compressInstance!.state.loading &&
!this._app.compressInstance!.state.sides[side].loading
) {
return this._app.compressInstance!.state.sides[side].file;
}
const listeners: ReturnType<typeof addRemovableGlobalListener>[] = [];
const r = new Promise((resolve, reject) => {
listeners.push(
addRemovableGlobalListener(SquooshSideEventType.DONE, (event) => {
if (event.side !== side) {
return;
}
resolve(this._app.compressInstance!.state.sides[side].file);
}),
);
listeners.push(
addRemovableGlobalListener(SquooshSideEventType.ABORT, (event) => {
if (event.side !== side) {
return;
}
reject(new DOMException('Aborted', 'AbortError'));
}),
);
listeners.push(
addRemovableGlobalListener(SquooshSideEventType.ERROR, (event) => {
if (event.side !== side) {
return;
}
reject(event.error);
}),
);
});
r.then(() => listeners.forEach(remove => remove()));
return r;
}
}

View File

@@ -14,10 +14,9 @@ const ROUTE_EDITOR = '/editor';
const compressPromise = import( const compressPromise = import(
/* webpackChunkName: "main-app" */ /* webpackChunkName: "main-app" */
'../compress'); '../compress');
const offlinerPromise = import(
const swBridgePromise = import( /* webpackChunkName: "offliner" */
/* webpackChunkName: "sw-bridge" */ '../../lib/offliner');
'../../lib/sw-bridge');
function back() { function back() {
window.history.back(); window.history.back();
@@ -26,7 +25,6 @@ function back() {
interface Props {} interface Props {}
interface State { interface State {
awaitingShareTarget: boolean;
file?: File | Fileish; file?: File | Fileish;
isEditorOpen: Boolean; isEditorOpen: Boolean;
Compress?: typeof import('../compress').default; Compress?: typeof import('../compress').default;
@@ -34,11 +32,11 @@ interface State {
export default class App extends Component<Props, State> { export default class App extends Component<Props, State> {
state: State = { state: State = {
awaitingShareTarget: new URL(location.href).searchParams.has('share-target'),
isEditorOpen: false, isEditorOpen: false,
file: undefined, file: undefined,
Compress: undefined, Compress: undefined,
}; };
compressInstance?: import('../compress').default;
snackbar?: SnackBarElement; snackbar?: SnackBarElement;
@@ -51,15 +49,7 @@ export default class App extends Component<Props, State> {
this.showSnack('Failed to load app'); this.showSnack('Failed to load app');
}); });
swBridgePromise.then(async ({ offliner, getSharedImage }) => { offlinerPromise.then(({ offliner }) => offliner(this.showSnack));
offliner(this.showSnack);
if (!this.state.awaitingShareTarget) return;
const file = await getSharedImage();
// Remove the ?share-target from the URL
history.replaceState('', '', '/');
this.openEditor();
this.setState({ file, awaitingShareTarget: false });
});
// In development, persist application state across hot reloads: // In development, persist application state across hot reloads:
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
@@ -80,6 +70,14 @@ export default class App extends Component<Props, State> {
}); });
window.addEventListener('popstate', this.onPopState); window.addEventListener('popstate', this.onPopState);
import(
/* webpackChunkName: "client-api" */
'./client-api').then(m => m.exposeAPI(this));
}
@bind openFile(file: File | Fileish) {
this.openEditor();
this.setState({ file });
} }
@bind @bind
@@ -92,8 +90,7 @@ export default class App extends Component<Props, State> {
@bind @bind
private onIntroPickFile(file: File | Fileish) { private onIntroPickFile(file: File | Fileish) {
this.openEditor(); return this.openFile(file);
this.setState({ file });
} }
@bind @bind
@@ -110,25 +107,24 @@ export default class App extends Component<Props, State> {
@bind @bind
private openEditor() { private openEditor() {
if (this.state.isEditorOpen) return; if (this.state.isEditorOpen) return;
// Change path, but preserve query string. history.pushState(null, '', ROUTE_EDITOR);
const editorURL = new URL(location.href);
editorURL.pathname = ROUTE_EDITOR;
history.pushState(null, '', editorURL.href);
this.setState({ isEditorOpen: true }); this.setState({ isEditorOpen: true });
} }
render({}: Props, { file, isEditorOpen, Compress, awaitingShareTarget }: State) { render({}: Props, { file, isEditorOpen, Compress }: State) {
const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
return ( return (
<div id="app" class={style.app}> <div id="app" class={style.app}>
<file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}> <file-drop accept="image/*" onfiledrop={this.onFileDrop} class={style.drop}>
{ {!isEditorOpen
showSpinner ? <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
? <loading-spinner class={style.appLoader}/> : (Compress)
: isEditorOpen ? <Compress
? Compress && <Compress file={file!} showSnack={this.showSnack} onBack={back} /> ref={i => this.compressInstance = i}
: <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} /> file={file!}
showSnack={this.showSnack}
onBack={back}
/>
: <loading-spinner class={style.appLoader}/>
} }
<snack-bar ref={linkRef(this, 'snackbar')} /> <snack-bar ref={linkRef(this, 'snackbar')} />
</file-drop> </file-drop>

View File

@@ -3,7 +3,7 @@ import { h, Component } from 'preact';
import * as style from './style.scss'; import * as style from './style.scss';
import { bind } from '../../lib/initial-util'; import { bind } from '../../lib/initial-util';
import { cleanSet, cleanMerge } from '../../lib/clean-modify'; import { cleanSet, cleanMerge } from '../../lib/clean-modify';
import OxiPNGEncoderOptions from '../../codecs/oxipng/options'; import OptiPNGEncoderOptions from '../../codecs/optipng/options';
import MozJpegEncoderOptions from '../../codecs/mozjpeg/options'; import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options'; import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options';
import WebPEncoderOptions from '../../codecs/webp/options'; import WebPEncoderOptions from '../../codecs/webp/options';
@@ -13,7 +13,7 @@ import QuantizerOptionsComponent from '../../codecs/imagequant/options';
import ResizeOptionsComponent from '../../codecs/resize/options'; import ResizeOptionsComponent from '../../codecs/resize/options';
import * as identity from '../../codecs/identity/encoder-meta'; import * as identity from '../../codecs/identity/encoder-meta';
import * as oxiPNG from '../../codecs/oxipng/encoder-meta'; import * as optiPNG from '../../codecs/optipng/encoder-meta';
import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta'; import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
import * as webP from '../../codecs/webp/encoder-meta'; import * as webP from '../../codecs/webp/encoder-meta';
import * as browserPNG from '../../codecs/browser-png/encoder-meta'; import * as browserPNG from '../../codecs/browser-png/encoder-meta';
@@ -44,7 +44,7 @@ const encoderOptionsComponentMap: {
[x: string]: (new (...args: any[]) => Component<any, any>) | undefined; [x: string]: (new (...args: any[]) => Component<any, any>) | undefined;
} = { } = {
[identity.type]: undefined, [identity.type]: undefined,
[oxiPNG.type]: OxiPNGEncoderOptions, [optiPNG.type]: OptiPNGEncoderOptions,
[mozJPEG.type]: MozJpegEncoderOptions, [mozJPEG.type]: MozJpegEncoderOptions,
[webP.type]: WebPEncoderOptions, [webP.type]: WebPEncoderOptions,
[browserPNG.type]: undefined, [browserPNG.type]: undefined,
@@ -146,14 +146,12 @@ export default class Options extends Component<Props, State> {
{preprocessorState.resize.enabled ? {preprocessorState.resize.enabled ?
<ResizeOptionsComponent <ResizeOptionsComponent
isVector={Boolean(source && source.vectorImage)} isVector={Boolean(source && source.vectorImage)}
inputWidth={source ? source.processed.width : 1} aspect={source ? source.processed.width / source.processed.height : 1}
inputHeight={source ? source.processed.height : 1}
options={preprocessorState.resize} options={preprocessorState.resize}
onChange={this.onResizeOptionsChange} onChange={this.onResizeOptionsChange}
/> />
: null} : null}
</Expander> </Expander>
<label class={style.sectionEnabler}> <label class={style.sectionEnabler}>
<Checkbox <Checkbox
name="quantizer.enable" name="quantizer.enable"
@@ -180,7 +178,6 @@ export default class Options extends Component<Props, State> {
{encoderSupportMap ? {encoderSupportMap ?
<Select value={encoderState.type} onChange={this.onEncoderTypeChange} large> <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
{encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => ( {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
// tslint:disable-next-line:jsx-key
<option value={encoder.type}>{encoder.label}</option> <option value={encoder.type}>{encoder.label}</option>
))} ))}
</Select> </Select>

View File

@@ -7,7 +7,7 @@ import Output from '../Output';
import Options from '../Options'; import Options from '../Options';
import ResultCache from './result-cache'; import ResultCache from './result-cache';
import * as identity from '../../codecs/identity/encoder-meta'; import * as identity from '../../codecs/identity/encoder-meta';
import * as oxiPNG from '../../codecs/oxipng/encoder-meta'; import * as optiPNG from '../../codecs/optipng/encoder-meta';
import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta'; import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
import * as webP from '../../codecs/webp/encoder-meta'; import * as webP from '../../codecs/webp/encoder-meta';
import * as browserPNG from '../../codecs/browser-png/encoder-meta'; import * as browserPNG from '../../codecs/browser-png/encoder-meta';
@@ -24,7 +24,7 @@ import { decodeImage } from '../../codecs/decoders';
import { cleanMerge, cleanSet } from '../../lib/clean-modify'; import { cleanMerge, cleanSet } from '../../lib/clean-modify';
import Processor from '../../codecs/processor'; import Processor from '../../codecs/processor';
import { import {
BrowserResizeOptions, isWorkerOptions as isWorkerResizeOptions, isHqx, WorkerResizeOptions, BrowserResizeOptions, isWorkerOptions as isWorkerResizeOptions,
} from '../../codecs/resize/processor-meta'; } from '../../codecs/resize/processor-meta';
import './custom-els/MultiPanel'; import './custom-els/MultiPanel';
import Results from '../results'; import Results from '../results';
@@ -32,6 +32,51 @@ import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
import SnackBarElement from '../../lib/SnackBar'; import SnackBarElement from '../../lib/SnackBar';
import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors'; import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
// Safari and Edge don't quite support extending Event, this works around it.
function fixExtendedEvent(instance: Event, type: Function) {
if (!(instance instanceof type)) {
Object.setPrototypeOf(instance, type.prototype);
}
}
export enum SquooshStartEventType {
START = 'squoosh:start',
}
export class SquooshStartEvent extends Event {
constructor(init?: EventInit) {
super(SquooshStartEventType.START, init);
fixExtendedEvent(this, SquooshStartEvent);
}
}
export const enum SquooshSideEventType {
DONE = 'squoosh:done',
ABORT = 'squoosh:abort',
ERROR = 'squoosh:error',
}
export interface SquooshSideEventInit extends EventInit {
side: 0|1;
error?: Error;
}
export class SquooshSideEvent extends Event {
public side: 0|1;
public error?: Error;
constructor(name: SquooshSideEventType, init: SquooshSideEventInit) {
super(name, init);
fixExtendedEvent(this, SquooshSideEvent);
this.side = init.side;
this.error = init.error;
}
}
declare global {
interface GlobalEventHandlersEventMap {
[SquooshStartEventType.START]: SquooshStartEvent;
[SquooshSideEventType.DONE]: SquooshSideEvent;
[SquooshSideEventType.ABORT]: SquooshSideEvent;
[SquooshSideEventType.ERROR]: SquooshSideEvent;
}
}
export interface SourceImage { export interface SourceImage {
file: File | Fileish; file: File | Fileish;
decoded: ImageData; decoded: ImageData;
@@ -106,18 +151,6 @@ async function preprocessImage(
source.vectorImage, source.vectorImage,
preprocessData.resize, preprocessData.resize,
); );
} else if (isHqx(preprocessData.resize)) {
// Hqx can only do x2, x3 or x4.
result = await processor.workerResize(result, preprocessData.resize);
// Seems like the globals from Rust from hqx and resize are conflicting.
// For now we can fix that by terminating the worker.
// TODO: Use wasm-bindgens new --web target to create a proper ES6 module
// and remove this.
processor.terminateWorker();
// If the target size is not a clean x2, x3 or x4, use Catmull-Rom
// for the remaining scaling.
const pixelOpts = { ...preprocessData.resize, method: 'catrom' };
result = await processor.workerResize(result, pixelOpts as WorkerResizeOptions);
} else if (isWorkerResizeOptions(preprocessData.resize)) { } else if (isWorkerResizeOptions(preprocessData.resize)) {
result = await processor.workerResize(result, preprocessData.resize); result = await processor.workerResize(result, preprocessData.resize);
} else { } else {
@@ -138,7 +171,7 @@ async function compressImage(
): Promise<Fileish> { ): Promise<Fileish> {
const compressedData = await (() => { const compressedData = await (() => {
switch (encodeData.type) { switch (encodeData.type) {
case oxiPNG.type: return processor.oxiPngEncode(image, encodeData.options); case optiPNG.type: return processor.optiPngEncode(image, encodeData.options);
case mozJPEG.type: return processor.mozjpegEncode(image, encodeData.options); case mozJPEG.type: return processor.mozjpegEncode(image, encodeData.options);
case webP.type: return processor.webpEncode(image, encodeData.options); case webP.type: return processor.webpEncode(image, encodeData.options);
case browserPNG.type: return processor.browserPngEncode(image); case browserPNG.type: return processor.browserPngEncode(image);
@@ -256,7 +289,7 @@ export default class Compress extends Component<Props, State> {
this.widthQuery.addListener(this.onMobileWidthChange); this.widthQuery.addListener(this.onMobileWidthChange);
this.updateFile(props.file); this.updateFile(props.file);
import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded()); import('../../lib/offliner').then(({ mainAppLoaded }) => mainAppLoaded());
} }
@bind @bind
@@ -407,8 +440,7 @@ export default class Compress extends Component<Props, State> {
// Either processor is good enough here. // Either processor is good enough here.
const processor = this.leftProcessor; const processor = this.leftProcessor;
this.setState({ loadingCounter, loading: true }); this.setState({ loadingCounter, loading: true }, this.signalLoadingStart);
// Abort any current encode jobs, as they're redundant now. // Abort any current encode jobs, as they're redundant now.
this.leftProcessor.abortCurrent(); this.leftProcessor.abortCurrent();
this.rightProcessor.abortCurrent(); this.rightProcessor.abortCurrent();
@@ -486,6 +518,35 @@ export default class Compress extends Component<Props, State> {
); );
} }
@bind
private dispatchSideEvent(type: SquooshSideEventType, init: SquooshSideEventInit) {
document.dispatchEvent(
new SquooshSideEvent(type, init),
);
}
@bind
private signalLoadingStart() {
document.dispatchEvent(
new SquooshStartEvent(),
);
}
@bind
private signalProcessingDone(side: 0|1) {
this.dispatchSideEvent(SquooshSideEventType.DONE, { side });
}
@bind
private signalProcessingAbort(side: 0|1) {
this.dispatchSideEvent(SquooshSideEventType.ABORT, { side });
}
@bind
private signalProcessingError(side: 0|1, msg: string) {
this.dispatchSideEvent(SquooshSideEventType.ERROR, { side, error: new Error(msg) });
}
private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> { private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {
const { const {
skipPreprocessing = false, skipPreprocessing = false,
@@ -547,8 +608,13 @@ export default class Compress extends Component<Props, State> {
}); });
} }
} catch (err) { } catch (err) {
if (err.name === 'AbortError') return; if (err.name === 'AbortError') {
this.props.showSnack(`Processing error (type=${settings.encoderState.type}): ${err}`); this.signalProcessingAbort(index as 0|1);
return;
}
const errorMsg = `Processing error (type=${settings.encoderState.type}): ${err}`;
this.signalProcessingError(index as 0|1, errorMsg);
this.props.showSnack(errorMsg);
throw err; throw err;
} }
} }
@@ -571,7 +637,7 @@ export default class Compress extends Component<Props, State> {
encodedSettings: settings, encodedSettings: settings,
}); });
this.setState({ sides }); this.setState({ sides }, () => this.signalProcessingDone(index as 0|1));
} }
render({ onBack }: Props, { loading, sides, source, mobileView }: State) { render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
@@ -579,7 +645,6 @@ export default class Compress extends Component<Props, State> {
const [leftImageData, rightImageData] = sides.map(i => i.data); const [leftImageData, rightImageData] = sides.map(i => i.data);
const options = sides.map((side, index) => ( const options = sides.map((side, index) => (
// tslint:disable-next-line:jsx-key
<Options <Options
source={source} source={source}
mobileView={mobileView} mobileView={mobileView}
@@ -595,7 +660,6 @@ export default class Compress extends Component<Props, State> {
(mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][]; (mobileView ? ['down', 'up'] : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
const results = sides.map((side, index) => ( const results = sides.map((side, index) => (
// tslint:disable-next-line:jsx-key
<Results <Results
downloadUrl={side.downloadUrl} downloadUrl={side.downloadUrl}
imageFile={side.file} imageFile={side.file}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -53,17 +53,11 @@ export default class Intro extends Component<Props, State> {
state: State = {}; state: State = {};
private fileInput?: HTMLInputElement; private fileInput?: HTMLInputElement;
@bind
private resetFileInput() {
this.fileInput!.value = '';
}
@bind @bind
private onFileChange(event: Event): void { private onFileChange(event: Event): void {
const fileInput = event.target as HTMLInputElement; const fileInput = event.target as HTMLInputElement;
const file = fileInput.files && fileInput.files[0]; const file = fileInput.files && fileInput.files[0];
if (!file) return; if (!file) return;
this.resetFileInput();
this.props.onFile(file); this.props.onFile(file);
} }

View File

@@ -40,23 +40,6 @@ async function updateReady(reg: ServiceWorkerRegistration): Promise<void> {
}); });
} }
/** Wait for a shared image */
export function getSharedImage(): Promise<File> {
return new Promise((resolve) => {
const onmessage = (event: MessageEvent) => {
if (event.data.action !== 'load-image') return;
resolve(event.data.file);
navigator.serviceWorker.removeEventListener('message', onmessage);
};
navigator.serviceWorker.addEventListener('message', onmessage);
// This message is picked up by the service worker - it's how it knows we're ready to receive
// the file.
navigator.serviceWorker.controller!.postMessage('share-ready');
});
}
/** Set up the service worker and monitor changes */ /** Set up the service worker and monitor changes */
export async function offliner(showSnack: SnackBarElement['showSnackbar']) { export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
// This needs to be a typeof because Webpack. // This needs to be a typeof because Webpack.

View File

@@ -11,25 +11,6 @@
"src": "/assets/icon-large.png", "src": "/assets/icon-large.png",
"type": "image/png", "type": "image/png",
"sizes": "1024x1024" "sizes": "1024x1024"
},
{
"src": "/assets/icon-large-maskable.png",
"type": "image/png",
"sizes": "1024x1024",
"purpose": "maskable"
} }
], ]
"share_target": {
"action": "/?share-target",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "file",
"accept": ["image/*"]
}
]
}
}
} }

View File

@@ -34,6 +34,7 @@ declare module 'url-loader!*' {
} }
declare var VERSION: string; declare var VERSION: string;
declare var MAJOR_VERSION: string;
declare var ga: { declare var ga: {
(...args: any[]): void; (...args: any[]): void;

41
src/sdk.ts Normal file
View File

@@ -0,0 +1,41 @@
import { proxy, ProxyResult } from 'comlink';
import { API, ReadyMessage } from './components/App/client-api';
// @ts-ignore
import { version } from '../package.json';
const MAJOR_VERSION = (version.split('.')[0] as string);
/**
* This function will load an iFrame
* @param {HTMLIFrameElement} ifr iFrame that will be used to load squoosh
* @param {string} src URL of squoosh instance to use
*/
export default async function loader(
ifr: HTMLIFrameElement,
src: string = 'https://squoosh.app',
): Promise<ProxyResult<API>> {
ifr.src = src;
await new Promise(resolve => (ifr.onload = resolve));
ifr.contentWindow!.postMessage('READY?', '*');
await new Promise((resolve) => {
window.addEventListener('message', function l(ev) {
const msg = ev.data as ReadyMessage;
if (!msg || msg.type !== 'READY') {
return;
}
if (msg.version !== MAJOR_VERSION) {
throw Error(
`Version mismatch. SDK version ${MAJOR_VERSION}, Squoosh version ${
msg.version
}`,
);
}
ev.stopPropagation();
window.removeEventListener('message', l);
resolve();
});
});
return proxy(ifr.contentWindow!);
}

View File

@@ -1,6 +1,5 @@
import { import {
cacheOrNetworkAndCache, cleanupCache, cacheOrNetwork, cacheBasics, cacheAdditionalProcessors, cacheOrNetworkAndCache, cleanupCache, cacheOrNetwork, cacheBasics, cacheAdditionalProcessors,
serveShareTarget,
} from './util'; } from './util';
import { get } from 'idb-keyval'; import { get } from 'idb-keyval';
@@ -41,23 +40,14 @@ self.addEventListener('activate', (event) => {
}); });
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event) => {
// We only care about GET.
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url); const url = new URL(event.request.url);
// Don't care about other-origin URLs // Don't care about other-origin URLs
if (url.origin !== location.origin) return; if (url.origin !== location.origin) return;
if (
url.pathname === '/' &&
url.searchParams.has('share-target') &&
event.request.method === 'POST'
) {
serveShareTarget(event);
return;
}
// We only care about GET from here on in.
if (event.request.method !== 'GET') return;
if (url.pathname.startsWith('/demo-') || url.pathname.startsWith('/wc-polyfill')) { if (url.pathname.startsWith('/demo-') || url.pathname.startsWith('/wc-polyfill')) {
cacheOrNetworkAndCache(event, dynamicCache); cacheOrNetworkAndCache(event, dynamicCache);
cleanupCache(event, dynamicCache, BUILD_ASSETS); cleanupCache(event, dynamicCache, BUILD_ASSETS);

View File

@@ -1,11 +1,8 @@
import webpDataUrl from 'url-loader!../codecs/tiny.webp'; import webpDataUrl from 'url-loader!../codecs/tiny.webp';
// Give TypeScript the correct global.
declare var self: ServiceWorkerGlobalScope;
export function cacheOrNetwork(event: FetchEvent): void { export function cacheOrNetwork(event: FetchEvent): void {
event.respondWith(async function () { event.respondWith(async function () {
const cachedResponse = await caches.match(event.request, { ignoreSearch: true }); const cachedResponse = await caches.match(event.request);
return cachedResponse || fetch(event.request); return cachedResponse || fetch(event.request);
}()); }());
} }
@@ -32,23 +29,6 @@ export function cacheOrNetworkAndCache(event: FetchEvent, cacheName: string): vo
}()); }());
} }
export function serveShareTarget(event: FetchEvent): void {
const dataPromise = event.request.formData();
// Redirect so the user can refresh the page without resending data.
// @ts-ignore It doesn't like me giving a response to respondWith, although it's allowed.
event.respondWith(Response.redirect('/?share-target'));
event.waitUntil(async function () {
// The page sends this message to tell the service worker it's ready to receive the file.
await nextMessage('share-ready');
const client = await self.clients.get(event.resultingClientId);
const data = await dataPromise;
const file = data.get('file');
client.postMessage({ file, action: 'load-image' });
}());
}
export function cleanupCache(event: FetchEvent, cacheName: string, keepAssets: string[]) { export function cleanupCache(event: FetchEvent, cacheName: string, keepAssets: string[]) {
event.waitUntil(async function () { event.waitUntil(async function () {
const cache = await caches.open(cacheName); const cache = await caches.open(cacheName);
@@ -124,26 +104,3 @@ export async function cacheAdditionalProcessors(cacheName: string, buildAssets:
const cache = await caches.open(cacheName); const cache = await caches.open(cacheName);
await cache.addAll(toCache); await cache.addAll(toCache);
} }
const nextMessageResolveMap = new Map<string, (() => void)[]>();
/**
* Wait on a message with a particular event.data value.
*
* @param dataVal The event.data value.
*/
function nextMessage(dataVal: string): Promise<void> {
return new Promise((resolve) => {
if (!nextMessageResolveMap.has(dataVal)) {
nextMessageResolveMap.set(dataVal, []);
}
nextMessageResolveMap.get(dataVal)!.push(resolve);
});
}
self.addEventListener('message', (event) => {
const resolvers = nextMessageResolveMap.get(event.data);
if (!resolvers) return;
nextMessageResolveMap.delete(event.data);
for (const resolve of resolvers) resolve();
});

View File

@@ -12,8 +12,7 @@
"variable-name": [true, "check-format", "allow-leading-underscore"], "variable-name": [true, "check-format", "allow-leading-underscore"],
"no-duplicate-imports": false, "no-duplicate-imports": false,
"prefer-template": [true, "allow-single-concat"], "prefer-template": [true, "allow-single-concat"],
"import-name": false, "import-name": false
"jsx-key": false
}, },
"linterOptions": { "linterOptions": {
"exclude": [ "exclude": [

View File

@@ -1,3 +1,4 @@
const fs = require('fs');
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin');
@@ -16,7 +17,11 @@ const CrittersPlugin = require('critters-webpack-plugin');
const AssetTemplatePlugin = require('./config/asset-template-plugin'); const AssetTemplatePlugin = require('./config/asset-template-plugin');
const addCssTypes = require('./config/add-css-types'); const addCssTypes = require('./config/add-css-types');
const VERSION = require('./package.json').version; function readJson (filename) {
return JSON.parse(fs.readFileSync(filename));
}
const VERSION = readJson('./package.json').version;
module.exports = async function (_, env) { module.exports = async function (_, env) {
const isProd = env.mode === 'production'; const isProd = env.mode === 'production';
@@ -142,14 +147,11 @@ module.exports = async function (_, env) {
}, },
{ {
// All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`. // All the codec files define a global with the same name as their file name. `exports-loader` attaches those to `module.exports`.
test: /\.js$/, test: /\/codecs\/.*\.js$/,
include: path.join(__dirname, 'src/codecs'),
loader: 'exports-loader' loader: 'exports-loader'
}, },
{ {
// Emscripten modules don't work with Webpack's Wasm loader. test: /\/codecs\/.*\.wasm$/,
test: /\.wasm$/,
exclude: /_bg\.wasm$/,
// This is needed to make webpack NOT process wasm files. // This is needed to make webpack NOT process wasm files.
// See https://github.com/webpack/webpack/issues/6725 // See https://github.com/webpack/webpack/issues/6725
type: 'javascript/auto', type: 'javascript/auto',
@@ -158,11 +160,6 @@ module.exports = async function (_, env) {
name: '[name].[hash:5].[ext]', name: '[name].[hash:5].[ext]',
}, },
}, },
{
// Wasm modules generated by Rust + wasm-pack work great with Webpack.
test: /_bg\.wasm$/,
type: 'webassembly/experimental',
},
{ {
test: /\.(png|svg|jpg|gif)$/, test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader', loader: 'file-loader',
@@ -175,7 +172,7 @@ module.exports = async function (_, env) {
plugins: [ plugins: [
new webpack.IgnorePlugin( new webpack.IgnorePlugin(
/(fs|crypto|path)/, /(fs|crypto|path)/,
/[/\\]codecs[/\\]/ new RegExp(`${path.sep}codecs${path.sep}`)
), ),
// Pretty progressbar showing build progress: // Pretty progressbar showing build progress:
@@ -242,7 +239,7 @@ module.exports = async function (_, env) {
removeRedundantAttributes: true, removeRedundantAttributes: true,
removeComments: true removeComments: true
}, },
manifest: require('./src/manifest.json'), manifest: readJson('./src/manifest.json'),
inject: 'body', inject: 'body',
compile: true compile: true
}), }),
@@ -266,9 +263,10 @@ module.exports = async function (_, env) {
// Inline constants during build, so they can be folded by UglifyJS. // Inline constants during build, so they can be folded by UglifyJS.
new webpack.DefinePlugin({ new webpack.DefinePlugin({
VERSION: JSON.stringify(VERSION), VERSION: JSON.stringify(VERSION),
MAJOR_VERSION: JSON.stringify(VERSION.split(".")[0]),
// We set node.process=false later in this config. // We set node.process=false later in this config.
// Here we make sure if (process && process.foo) still works: // Here we make sure if (process && process.foo) still works:
process: '({})' process: '{}'
}), }),
// Copying files via Webpack allows them to be served dynamically by `webpack serve` // Copying files via Webpack allows them to be served dynamically by `webpack serve`