deprecate terser

Author: zendive

.prettierignore

@@ -1,3 +1,4 @@
 /bundle/js
 .ts-built
 *.min.js
+pnpm-lock.yaml

Makefile

@@ -1,7 +1,9 @@
 ZIP_FILE="extension.zip"
-HASH_ALG="sha384"
+HASH_ALG=sha384
+BIN=node_modules/.bin
 
-.PHONY: install all dev prod build format lint clean
+.PHONY:
+	install all dev prod build format lint clean
 
 install:
 	npm i -g pnpm
@@ -11,28 +13,32 @@ all: build
 
 dev:
 	NODE_OPTIONS="--loader=ts-node/esm" \
-	./node_modules/.bin/webpack --progress --watch --mode=development
+		$(BIN)/webpack --progress --watch --mode=development
 
 prod:
 	NODE_OPTIONS="--loader=ts-node/esm --no-warnings=ExperimentalWarning" \
-	NODE_ENV="production" \
-	./node_modules/.bin/webpack --mode=production
+		NODE_ENV="production" \
+		$(BIN)/webpack --mode=production
 
 build:
 	make lint
 	make prod
-	
+	make zip
+	make print_zip_hash
+
+zip:
 	rm -rf $(ZIP_FILE)
 	zip -r $(ZIP_FILE) ./bundle ./manifest.json > /dev/null
 
+print_zip_hash: 
 	FILE_HASH=$$(openssl dgst -$(HASH_ALG) -binary $(ZIP_FILE) | openssl base64 -A); \
-	echo "$(ZIP_FILE) (hash-$(HASH_ALG)): $$FILE_HASH"
+		echo "$(ZIP_FILE) $(HASH_ALG):$$FILE_HASH"
 
 format:
-	./node_modules/.bin/prettier . --write
+	$(BIN)/prettier . --write
 
 lint:
-	./node_modules/.bin/tsc -noEmit
+	$(BIN)/tsc -noEmit
 
 clean:
 	rm -rf ./node_modules

README.md

@@ -66,7 +66,7 @@ Chrome extension to compare objects in memory with console.diff(old, new) devtoo
 
 [i10]: https://github.com/zendive/jsdiff/issues/10
 
-- Compared objects, after being serialized, and stored in `chrome.storage.local` wich has 10MB limit.
+- Compared objects, after being serialized, stored in `chrome.storage.local` wich has 10MB limit (before chrome v114 was 5MB).
 
 ### API
 
@@ -100,7 +100,7 @@ console.diffLeft(Date.now());
 console.diffRight(Date.now());
 ```
 
-- **console.diff\_(\*)** - deprecated, left for backward compatibility, uses `nativeClone` based of JSON.parse(JSON.stringify(...)) serialization method
+- **console.diff\_(\*)** - uses deprecated `nativeClone` serialization method, based of JSON.parse(JSON.stringify(...)), left for backward compatibility
 
 ### Usage basics
 

bundle/js/jsdiff-panel.js

@@ -35,7 +35,6 @@
     "sass": "1.64.1",
     "sass-loader": "13.3.2",
     "style-loader": "3.3.3",
-    "terser-webpack-plugin": "5.3.9",
     "ts-node": "10.9.1",
     "typescript": "5.1.6",
     "vue": "3.3.4",

bundle/js/jsdiff-proxy.js

@@ -18,11 +18,14 @@ export function proxyMessageGate(
 export async function proxyCompareHandler(
   e: MessageEvent<ICompareMessage>
 ): Promise<void> {
-  const current = e.data.payload;
-  const { lastApiReq: old } = await chrome.storage.local.get(['lastApiReq']);
-  const next = processComparisonObject(old, current);
-
   try {
+    const current = e.data.payload;
+    const { lastApiReq: old } = await chrome.storage.local.get(['lastApiReq']);
+    const next = processComparisonObject(
+      old as ICompareMessagePayload,
+      current
+    );
+
     // may throw
     await chrome.storage.local.set({ lastApiReq: next, lastError: '' });
 

package.json

@@ -0,0 +1,103 @@
+import pako from 'pako';
+
+export class CompressedLocalStorage {
+  static async get(propName: string): Promise<unknown> {
+    return CompressedLocalStorage.getEncoded(propName);
+    // return CompressedLocalStorage.getAsIs(propName);
+  }
+
+  static async set(propName: string, obj: unknown): Promise<void> {
+    CompressedLocalStorage.setEncoded(propName, obj);
+    // CompressedLocalStorage.setAsIs(propName, obj);
+  }
+
+  static async getAsIs(propName: string): Promise<unknown> {
+    const storePropName = `${propName}_${storePropNameSufix}`;
+    const store = await chrome.storage.local.get([storePropName]);
+
+    return store[storePropName];
+  }
+
+  static async setAsIs(propName: string, obj: unknown): Promise<void> {
+    const storePropName = `${propName}_${storePropNameSufix}`;
+    const store = { [storePropName]: obj };
+
+    await chrome.storage.local.set(store);
+  }
+
+  static async getEncoded(propName: string): Promise<unknown> {
+    const storePropName = `${propName}_${storePropNameSufix}`;
+    const store = await chrome.storage.local.get([storePropName]);
+    let rv;
+
+    if (store[storePropName]) {
+      rv = decode(store[storePropName]);
+    }
+
+    return rv;
+  }
+
+  static async setEncoded(propName: string, obj: unknown): Promise<void> {
+    const storePropName = `${propName}_${storePropNameSufix}`;
+    const encoded = encode(obj);
+    const store = { [storePropName]: encoded };
+
+    await chrome.storage.local.set(store);
+  }
+}
+
+const storePropNameSufix = 'v2';
+
+function encode(obj: unknown): string {
+  const objStr = JSON.stringify(obj);
+  const uint8 = pako.deflate(objStr);
+  const rv = uint8ToString(uint8);
+
+  return rv;
+}
+
+function decode(input: string): unknown {
+  // Problem in input: char DCD4 -> becomes FFFD FFFD FFFD
+  const uint8 = stringToUint8(input);
+  const str = pako.inflate(uint8, { to: 'string' });
+  const rv = JSON.parse(str);
+
+  return rv;
+}
+
+export function uint8ToString(arr: Uint8Array): string {
+  const N = arr.length;
+  let encodedString = N % 2 === 0 ? '\x00' : '\x01';
+
+  for (let n = 0; n < N; n += 2) {
+    const highOrderByte = arr[n];
+    const lowOrderByte = n + 1 < N ? arr[n + 1] : 0x00;
+    // Padding if odd number of elements
+
+    const combinedWord = (highOrderByte << 8) | lowOrderByte;
+    encodedString += String.fromCharCode(combinedWord);
+  }
+
+  return encodedString;
+}
+
+function stringToUint8(str: string): Uint8Array {
+  const isOddLength = str[0] === '\x01';
+  const rv: number[] = [];
+  const N = str.length;
+  const last_n = N - 1;
+
+  for (let n = 1; n < N; n++) {
+    const charCode = str.charCodeAt(n);
+    const highOrderByte = charCode >> 8;
+    const lowOrderByte = (charCode << 8) >> 8;
+
+    rv.push(highOrderByte);
+
+    if (n < last_n || !isOddLength) {
+      rv.push(lowOrderByte);
+    }
+  }
+
+  return Uint8Array.from(rv);
+}

pnpm-lock.yaml

@@ -20,7 +20,7 @@
 
         <button
           class="btn"
-          title="Clear results"
+          :title="`Clear results (${state.storagaSize})`"
           @click="onClearResults"
           v-text="'Clear'"
         />
@@ -99,6 +99,7 @@ const state = reactive({
   now: appStartTimestamp,
   inprogress: false,
   lastError: '',
+  storagaSize: 0,
 });
 const compare = ref<ICompareState>({
   timestamp: 0,
@@ -137,12 +138,16 @@ onMounted(async () => {
   ]);
 
   if (hasValue(lastApiReq)) {
-    $_onDiffRequest(lastApiReq);
+    $_onDiffRequest(lastApiReq as ICompareState);
   }
 
   state.lastError = lastError || '';
+  state.storagaSize = await chrome.storage.local.getBytesInUse();
 
   chrome.runtime.onMessage.addListener($_onRuntimeMessage);
+  chrome.storage.onChanged.addListener(async () => {
+    state.storagaSize = await chrome.storage.local.getBytesInUse();
+  });
 });
 
 onUnmounted(() => {
@@ -190,7 +195,7 @@ async function $_onRuntimeMessage(req: TRuntimeMessageOptions) {
     const { lastApiReq } = await chrome.storage.local.get(['lastApiReq']);
 
     if (hasValue(lastApiReq)) {
-      $_onDiffRequest(lastApiReq);
+      $_onDiffRequest(lastApiReq as ICompareState);
     }
   } else if (
     'jsdiff-devtools-to-panel-search' === req.source &&

src/api/proxy.ts

@@ -23,5 +23,5 @@
     }
   },
   "include": ["src"],
-  "exclude": [".ts-built", "bundle"]
+  "exclude": [".ts-built", "bundle", "**/~*.ts"]
 }

src/api/~zip.ts

@@ -4,7 +4,7 @@ import { CleanWebpackPlugin } from 'clean-webpack-plugin';
 import { VueLoaderPlugin } from 'vue-loader';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { fileURLToPath } from 'url';
-import TerserPlugin from 'terser-webpack-plugin';
+import { EsbuildPlugin } from 'esbuild-loader';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -42,10 +42,10 @@ export default function (
     plugins: [
       new CleanWebpackPlugin(),
       new VueLoaderPlugin(),
-      // http://127.0.0.1:8888
       isProd
         ? () => {}
         : new BundleAnalyzerPlugin({
+            // http://127.0.0.1:8888
             openAnalyzer: false,
             logLevel: 'silent',
           }),
@@ -79,12 +79,7 @@ export default function (
     optimization: {
       splitChunks: false,
       minimize: isProd,
-      minimizer: [
-        new TerserPlugin({
-          minify: TerserPlugin.esbuildMinify,
-          terserOptions: {},
-        }),
-      ],
+      minimizer: [new EsbuildPlugin()],
     },
 
     devtool: isProd ? false : 'source-map',