fix(web): 🐛 Parcel build issue for DotLottieWorker (#335)

Parcel build was failing in version 0.30.3 due to the usage of a string literal to create a Worker, which is not supported. This patch modifies the worker instantiation to use a Blob instead, ensuring compatibility with Parcel's requirements.
LottieFiles · Aug 22, 2024 · e34ac54 · e34ac54
1 parent 03311db
commit e34ac54
Show file tree

Hide file tree

Showing 7 changed files with 1,683 additions and 190 deletions.
diff --git a/.changeset/neat-falcons-search.md b/.changeset/neat-falcons-search.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': patch
+---
+
+fix(web): 🐛 Resolved Parcel build failure by creating Worker using a Blob instead of a string literal.
diff --git a/.gitignore b/.gitignore
@@ -58,3 +58,5 @@ tsdoc-metadata.json
 
 # Typescript
 *.tsbuildinfo
+
+.parcel-cache/
diff --git a/apps/with-parcel-example/index.html b/apps/with-parcel-example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Parcel</title>
+    </head>
+    <body>
+        <canvas id="dotLottie-canvas"></canvas>
+        <script src="./src/main.js" type="module"></script>
+    </body>
+</html>
diff --git a/apps/with-parcel-example/package.json b/apps/with-parcel-example/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "with-parcel-example",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "parcel build index.html --no-cache",
+    "dev": "parcel index.html --no-cache --open"
+  },
+  "dependencies": {
+    "@lottiefiles/dotlottie-web": "workspace:*"
+  },
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
+}
diff --git a/apps/with-parcel-example/src/main.js b/apps/with-parcel-example/src/main.js
@@ -0,0 +1,10 @@
+import { DotLottieWorker } from '@lottiefiles/dotlottie-web';
+
+// eslint-disable-next-line no-new
+new DotLottieWorker({
+  // eslint-disable-next-line no-undef
+  canvas: document.getElementById('dotLottie-canvas'),
+  src: 'https://lottie.host/e641272e-039b-4612-96de-138acfbede6e/bc0sW78EeR.lottie',
+  autoplay: true,
+  loop: true,
+});
diff --git a/packages/web/esbuild-plugins/plugin-inline-worker.cjs b/packages/web/esbuild-plugins/plugin-inline-worker.cjs
@@ -38,22 +38,25 @@ const PluginInlineWorker = (opt = {}, filter = /\?worker&inline$/u) => {
         }
 
         const { contents } = outputFiles[0];
-        const base64 = Buffer.from(contents).toString('base64');
+        const uint8Array = new Uint8Array(contents);
 
         return {
           loader: 'js',
           contents: `
             "use client";
-            export default class InlinedWorker {
+            class InlineWorker {
               constructor() {
-                if (typeof window === 'undefined') {
-                  throw new Error('Worker is not available in this environment.');
+                if (typeof Worker === 'undefined') {
+                  throw new Error('Worker is not supported in this environment.');
                 }
-                return new Worker('data:application/javascript;base64,${base64}', {
-                  type: '${opt.format === 'esm' ? 'module' : 'classic'}'
-                });
+                const blob = new Blob([new Uint8Array([${uint8Array.join(',')}])], { type: 'application/javascript' });
+                const url = URL.createObjectURL(blob);
+                const worker = new Worker(url);
+                URL.revokeObjectURL(url);
+                return worker;
               }
             }
+            export default InlineWorker;
           `,
         };
       });