Rollup build

src/features/encoders/oxiPNG/client/index.tsx

@@ -0,0 +1,59 @@
+import {
+  canvasEncode,
+  abortable,
+  blobToArrayBuffer,
+} from 'client/lazy-app/util';
+import { EncodeOptions } from '../shared/meta';
+import type WorkerBridge from 'client/lazy-app/worker-bridge';
+import { h, Component } from 'preact';
+import { inputFieldValueAsNumber, preventDefault } from 'client/lazy-app/util';
+import * as style from 'client/lazy-app/Compress/Options/style.css';
+import Range from 'client/lazy-app/Compress/Options/Range';
+
+export async function encode(
+  signal: AbortSignal,
+  workerBridge: WorkerBridge,
+  imageData: ImageData,
+  options: EncodeOptions,
+) {
+  const pngBlob = await abortable(signal, canvasEncode(imageData, 'image/png'));
+  const pngBuffer = await abortable(signal, blobToArrayBuffer(pngBlob));
+  return workerBridge.oxipngEncode(signal, pngBuffer, options);
+}
+
+type Props = {
+  options: EncodeOptions;
+  onChange(newOptions: EncodeOptions): void;
+};
+
+export class Options extends Component<Props, {}> {
+  onChange = (event: Event) => {
+    const form = (event.currentTarget as HTMLInputElement).closest(
+      'form',
+    ) as HTMLFormElement;
+
+    const options: EncodeOptions = {
+      level: inputFieldValueAsNumber(form.level),
+    };
+    this.props.onChange(options);
+  };
+
+  render({ options }: Props) {
+    return (
+      <form class={style.optionsSection} onSubmit={preventDefault}>
+        <div class={style.optionOneCell}>
+          <Range
+            name="level"
+            min="0"
+            max="3"
+            step="1"
+            value={options.level}
+            onInput={this.onChange}
+          >
+            Effort:
+          </Range>
+        </div>
+      </form>
+    );
+  }
+}

src/features/encoders/oxiPNG/shared/meta.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface EncodeOptions {
+  level: number;
+}
+
+export const label = 'OxiPNG';
+export const mimeType = 'image/png';
+export const extension = 'png';
+
+export const defaultOptions: EncodeOptions = {
+  level: 2,
+};

src/features/encoders/oxiPNG/worker/oxipngEncode.ts

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import initOxiWasmST, {
+  optimise as optimiseST,
+} from 'codecs/oxipng/pkg/squoosh_oxipng';
+import initOxiWasmMT, {
+  worker_initializer,
+  start_main_thread,
+  optimise as optimiseMT,
+} from 'codecs/oxipng/pkg-parallel/squoosh_oxipng';
+import oxiWasmUrlST from 'url:codecs/oxipng/pkg/squoosh_oxipng_bg.wasm';
+import oxiWasmUrlMT from 'url:codecs/oxipng/pkg-parallel/squoosh_oxipng_bg.wasm';
+import { EncodeOptions } from '../shared/meta';
+import { threads } from 'wasm-feature-detect';
+import workerURL from 'omt:./sub-worker';
+import type { WorkerInit } from './sub-worker';
+
+function initWorker(worker: Worker, workerInit: WorkerInit) {
+  return new Promise<void>((resolve) => {
+    worker.postMessage(workerInit);
+    worker.addEventListener('message', () => resolve(), { once: true });
+  });
+}
+
+async function initMT() {
+  const num = navigator.hardwareConcurrency;
+
+  // First, let browser fetch and spawn Workers for our pool in the background.
+  // This is fairly expensive, so we want to start it as early as possible.
+  const workers = Array.from({ length: num }, () => new Worker(workerURL));
+
+  // Meanwhile, asynchronously compile, instantiate and initialise Wasm on our main thread.
+  await initOxiWasmMT(oxiWasmUrlMT);
+
+  // Get module+memory from the Wasm instance.
+  //
+  // Ideally we wouldn't go via Wasm bindings here, since both are just JS variables, but memory is
+  // currently not exposed on the Wasm instance correctly by wasm-bindgen.
+  const workerInit: WorkerInit = worker_initializer(num);
+
+  // Once done, we want to send module+memory to each Worker so that they instantiate Wasm too.
+  // While doing so, we need to wait for Workers to acknowledge that they have received our message.
+  // Ideally this shouldn't be necessary, but Chromium currently doesn't conform to the spec:
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=1075645
+  //
+  // If we didn't do this ping-pong game, the `start_main_thread` below would block the current
+  // thread on an atomic before even *sending* the `postMessage` containing memory,
+  // so Workers would never be able to unblock us back.
+  await Promise.all(workers.map((worker) => initWorker(worker, workerInit)));
+
+  // Finally, instantiate rayon pool - this will use shared Wasm memory to send tasks to the
+  // Workers and then block until they're all ready.
+  start_main_thread();
+
+  return optimiseMT;
+}
+
+async function initST() {
+  await initOxiWasmST(oxiWasmUrlST);
+  return optimiseST;
+}
+
+let wasmReady: Promise<typeof optimiseMT | typeof optimiseST>;
+
+export default async function encode(
+  data: ArrayBuffer,
+  options: EncodeOptions,
+): Promise<ArrayBuffer> {
+  if (!wasmReady) {
+    wasmReady = (await threads()) ? initMT() : initST();
+  }
+
+  const optimise = await wasmReady;
+  return optimise(new Uint8Array(data), options.level).buffer;
+}

src/features/encoders/oxiPNG/worker/sub-worker/index.ts

@@ -0,0 +1,25 @@
+import initOxiPNG, {
+  start_worker_thread,
+} from 'codecs/oxipng/pkg-parallel/squoosh_oxipng';
+
+export type WorkerInit = [WebAssembly.Module, WebAssembly.Memory];
+
+addEventListener(
+  'message',
+  async (event) => {
+    // Tell the "main" thread that we've received the message.
+    //
+    // At this point, the "main" thread can run Wasm that
+    // will synchronously block waiting on other atomics.
+    //
+    // Note that we don't need to wait for Wasm instantiation here - it's
+    // better to start main thread as early as possible, and then it blocks
+    // on a shared atomic anyway until Worker is fully ready.
+    // @ts-ignore
+    postMessage(null);
+
+    await initOxiPNG(...(event.data as WorkerInit));
+    start_worker_thread();
+  },
+  { once: true },
+);