From f802bb21a98f97b404a52fba2c38ef9fbef26293 Mon Sep 17 00:00:00 2001
From: Mirko <mirko314@users.noreply.github.com>
Date: Sat, 15 Jun 2024 11:17:34 +0200
Subject: [PATCH] Fix/add-zipped-version-of-packages-to-asset-deployment (#127)

---
 packages/web/README.md    |  9 ++++-----
 scripts/deploy-assets.mjs | 33 +++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/web/README.md b/packages/web/README.md
index 57aa679..b9338aa 100644
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -117,12 +117,11 @@ The performance is largely dependent on the feature set available. Most prominen
 
 ### Custom Asset Serving
 
-The wasm and onnx neural networks are hosted by IMG.LY by default. For production use, we advise you to host them yourself. Therefore, copy all .wasm and .onnx files to your public path `$PUBLIC_PATH` and reconfigure the library.
+The wasm and onnx neural networks are hosted by IMG.LY by default. For production use, we advise you to host them yourself:
 
-```shell
-npm i @imgly/background-removal-data
-cp node_modules/@imgly/background-removal-data/dist/* $PUBLIC_PATH
-```
+- Download the following package with the package version that matches your `@imgly/background-removal` version from the IMG.LY CDN and decompress it. Note that you need to replace `YOUR_PACKAGE_VERSION` with the actual version of the package you are using. The URL is
+  `https://staticimgly.com/@imgly/background-removal-data/YOUR_PACKAGE_VERSION/package.tgz`.
+- Move the content of the `package/dist` folder to be served by your web server. This often is the `/public` folder.
 
 ```typescript
 import imglyRemoveBackground, {Config} from "@imgly/background-removal"
diff --git a/scripts/deploy-assets.mjs b/scripts/deploy-assets.mjs
index 06622f7..53feb4b 100644
--- a/scripts/deploy-assets.mjs
+++ b/scripts/deploy-assets.mjs
@@ -1,10 +1,18 @@
-import { readFile } from 'node:fs/promises';
+import chalk from 'chalk';
 import { exec } from 'child_process';
+import { readFile } from 'node:fs/promises';
 import { promisify } from 'util';
-import chalk from 'chalk';
 
 const execAsync = promisify(exec);
 
+const execAsyncWithErrors = async (command, options) => {
+  try {
+    const { stdout, stderr } = await execAsync(command, options);
+  } catch (error) {
+    throw error;
+  }
+};
+
 async function syncToS3() {
   try {
     // Load package.json
@@ -38,10 +46,27 @@ async function syncToS3() {
             `NOTE: Syncing might fail when aws client ist not installed nor configured in silence!`
           )}`
         );
+        // cwd based on package name:
+        const cwd = path;
+        // npm packing:
+        await execAsyncWithErrors(
+          `rm -rf ./${path}/tmp && mkdir -p ./${path}/tmp`
+        );
+        // we pack the package to also publish the package.tgz to s3
+        const packCommand = `npm pack . --pack-destination ./tmp`;
+        console.log(`Packing ${packageName} using ${packCommand}...`);
+        await execAsyncWithErrors(packCommand, { cwd });
+        // rename the .tgz from e.g imgly-background-removal-data-1.5.3.tgz to package.tgz to have a stable name
+        await execAsyncWithErrors('mv ./tmp/*.tgz ./tmp/package.tgz', { cwd });
+        // npm extract:
+        const extractCommand = `tar -xvzf ./tmp/* -C ./tmp --strip-components=1`;
+        console.log(`Extracting ${packageName} using ${extractCommand}...`);
+        await execAsyncWithErrors(extractCommand, { cwd });
+        // sync to s3:
         console.log(`Syncing ${packageName} to S3...`);
-        const command = `aws s3 sync --endpoint-url ${endpointUrl} ./${path}/dist s3://${bucketName}/${packageName}/${version}/dist`;
+        const command = `aws s3 sync --endpoint-url ${endpointUrl} ./${path}/tmp s3://${bucketName}/${packageName}/${version}`;
         console.log(`Command: ${command}`);
-        return await execAsync(command);
+        return await execAsyncWithErrors(command);
       })
     );