Adding clean-set

src/components/App/index.tsx

@@ -33,6 +33,7 @@ import {
 } from '../../codecs/preprocessors';
 
 import { decodeImage } from '../../codecs/decoders';
+import { cleanMerge } from '../../lib/clean-modify';
 
 interface SourceImage {
   file: File;
@@ -151,9 +152,6 @@ export default class App extends Component<Props, State> {
     type: EncoderType,
     options?: EncoderOptions,
   ): void {
-    const images = this.state.images.slice() as [EncodedImage, EncodedImage];
-    const oldImage = images[index];
-
     // Some type cheating here.
     // encoderMap[type].defaultOptions is always safe.
     // options should always be correct for the type, but TypeScript isn't smart enough.
@@ -162,12 +160,7 @@ export default class App extends Component<Props, State> {
       options: options || encoderMap[type].defaultOptions,
     } as EncoderState;
 
-    images[index] = {
-      ...oldImage,
-      encoderState,
-      preprocessorState,
-    };
-
+    const images = cleanMerge(this.state.images, '' + index, { encoderState, preprocessorState });
     this.setState({ images });
   }
 
@@ -246,19 +239,19 @@ export default class App extends Component<Props, State> {
   async updateImage(index: number): Promise<void> {
     const { source } = this.state;
     if (!source) return;
-    let images = this.state.images.slice() as [EncodedImage, EncodedImage];
 
     // Each time we trigger an async encode, the counter changes.
-    const loadingCounter = images[index].loadingCounter + 1;
+    const loadingCounter = this.state.images[index].loadingCounter + 1;
 
-    const image = images[index] = {
-      ...images[index],
+    let images = cleanMerge(this.state.images, '' + index, {
       loadingCounter,
       loading: true,
-    };
+    });
 
     this.setState({ images });
 
+    const image = images[index];
+
     let file;
     try {
       source.preprocessed = await preprocessImage(source, image.preprocessorState);
@@ -283,16 +276,13 @@ export default class App extends Component<Props, State> {
       throw err;
     }
 
-    images = this.state.images.slice() as [EncodedImage, EncodedImage];
-
-    images[index] = {
-      ...images[index],
+    images = cleanMerge(this.state.images, '' + index, {
       file,
       bmp,
       downloadUrl: URL.createObjectURL(file),
       loading: images[index].loadingCounter !== loadingCounter,
       loadedCounter: loadingCounter,
-    };
+    });
 
     this.setState({ images, error: '' });
   }

src/components/Options/index.tsx

@@ -1,6 +1,8 @@
 import { h, Component } from 'preact';
+
 import * as style from './style.scss';
 import { bind } from '../../lib/util';
+import { cleanSet, cleanMerge } from '../../lib/clean-modify';
 import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
 import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options';
 import WebPEncoderOptions from '../../codecs/webp/options';
@@ -80,27 +82,18 @@ export default class Options extends Component<Props, State> {
   @bind
   onPreprocessorEnabledChange(event: Event) {
     const el = event.currentTarget as HTMLInputElement;
-
     const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;
 
-    this.props.onPreprocessorOptionsChange({
-      ...this.props.preprocessorState,
-      [preprocessor]: {
-        ...this.props.preprocessorState[preprocessor],
-        enabled: el.checked,
-      },
-    });
+    this.props.onPreprocessorOptionsChange(
+      cleanSet(this.props.preprocessorState, `${preprocessor}.enabled`, el.checked),
+    );
   }
 
   @bind
   onQuantizerOptionsChange(opts: QuantizeOptions) {
-    this.props.onPreprocessorOptionsChange({
-      ...this.props.preprocessorState,
-      quantizer: {
-        ...opts,
-        enabled: this.props.preprocessorState.quantizer.enabled,
-      },
-    });
+    this.props.onPreprocessorOptionsChange(
+      cleanMerge(this.props.preprocessorState, 'quantizer', opts),
+    );
   }
 
   render(

src/lib/clean-modify.ts

@@ -0,0 +1,62 @@
+function cleanSetOrMerge<A = any[] | object>(
+  source: A,
+  keys: string | string[],
+  toSetOrMerge: any[] | object,
+  merge: boolean,
+): A {
+  const splitKeys = typeof keys === 'string' ? keys.split('.') : keys;
+
+  // Going off road in terms of types, otherwise TypeScript doesn't like the access-by-index.
+  // The assumptions in this code break if the object contains things which aren't arrays or
+  // plain objects.
+  let last = copy(source) as any;
+  const newObject = last;
+
+  const lastIndex = splitKeys.length - 1;
+
+  for (const [i, key] of splitKeys.entries()) {
+    if (i !== lastIndex) {
+      // Copy everything along the path.
+      last = last[key] = copy(last[key]);
+    } else {
+      // Merge or set.
+      last[key] = merge ?
+        Object.assign(copy(last[key]), toSetOrMerge) :
+        toSetOrMerge;
+    }
+  }
+
+  return newObject;
+}
+
+function copy<A = any[] | object>(source: A): A {
+  // Some type cheating here, as TypeScript can't infer between generic types.
+  if (Array.isArray(source)) return [...source] as any;
+  return { ...(source as any) };
+}
+
+/**
+ * @param {(any[] | object)} source Object to copy from.
+ * @param {(string | string[])} keys Path to modify, eg "foo.bar.baz".
+ * @param {(any[] | object)} toMerge A value to merge into the value at the path.
+ */
+export function cleanMerge<A = any[] | object>(
+  source: A,
+  keys: string | string[],
+  toMerge: any[] | object,
+): A {
+  return cleanSetOrMerge(source, keys, toMerge, true);
+}
+
+/**
+ * @param {(any[] | object)} source Object to copy from.
+ * @param {(string | string[])} keys Path to modify, eg "foo.bar.baz".
+ * @param {(any[] | object)} newValue A value to set at the path.
+ */
+export function cleanSet<A = any[] | object>(
+  source: A,
+  keys: string | string[],
+  newValue: any,
+): A {
+  return cleanSetOrMerge(source, keys, newValue, false);
+}