heic-to 1.1.5 → 1.1.6

package/esbuild.mjs

@@ -1,11 +1,24 @@
 import * as esbuild from 'esbuild';
 import fs from 'fs'
 
+fs.mkdirSync("tmp/src/csp", { recursive: true });
+
+const copyAndReplace = (sourceFilePath, destinationFilePath, regexPattern, replacementText) => {
+  const content = fs.readFileSync(sourceFilePath, 'utf-8');
+  const modifiedContent = content.replace(regexPattern, replacementText);
+  fs.writeFileSync(destinationFilePath, modifiedContent);
+}
+
+copyAndReplace("src/worker.js", "tmp/src/worker.js", /LIB_HEIF_PATH/, '"../../src/lib/libheif"')
+copyAndReplace("src/worker.js", "tmp/src/csp/worker.js", /LIB_HEIF_PATH/, '"../../../src/lib/libheif-without-unsafe-eval"')
+
+// ################
 // Build heic-to.js
+// ################
 
 await esbuild.build({
   entryPoints: [
-    'src/worker.js'
+    'tmp/src/worker.js'
   ],
   bundle: true,
   minify: false,
@@ -32,11 +45,13 @@ esbuild.build({
   }
 });
 
+// ################
 // Build heic-to.min.js
+// ################
 
 await esbuild.build({
   entryPoints: [
-    'src/worker.js'
+    'tmp/src/worker.js'
   ],
   bundle: true,
   minify: true,
@@ -61,4 +76,70 @@ esbuild.build({
   define: {
     WORKER_FILE_CONTENT: JSON.stringify(workerFileMinifyContent)
   }
-});
+});
+
+// ################
+// Build csp/heic-to.js
+// ################
+
+await esbuild.build({
+  entryPoints: [
+    'tmp/src/csp/worker.js'
+  ],
+  bundle: true,
+  minify: false,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'tmp/csp/worker.js',
+  external: ['fs', 'path'],
+});
+
+const cspWorkerFileContent = fs.readFileSync('tmp/csp/worker.js', 'utf8')
+
+esbuild.build({
+  entryPoints: [
+    'src/index.js'
+  ],
+  bundle: true,
+  minify: false,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'dist/csp/heic-to.js',
+  format: 'esm',
+  define: {
+    WORKER_FILE_CONTENT: JSON.stringify(cspWorkerFileContent)
+  }
+});
+
+// ################
+// Build csp/heic-to.min.js
+// ################
+
+await esbuild.build({
+  entryPoints: [
+    'tmp/src/csp/worker.js'
+  ],
+  bundle: true,
+  minify: true,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'tmp/csp/worker.min.js',
+  external: ['fs', 'path']
+});
+
+const cspWorkerFileMinifyContent = fs.readFileSync('tmp/csp/worker.min.js', 'utf8')
+
+esbuild.build({
+  entryPoints: [
+    'src/index.js'
+  ],
+  bundle: true,
+  minify: true,
+  target: 'es6',
+  platform: 'browser',
+  outfile: 'dist/csp/heic-to.min.js',
+  format: 'esm',
+  define: {
+    WORKER_FILE_CONTENT: JSON.stringify(cspWorkerFileMinifyContent)
+  }
+});

package/example/app.js

@@ -0,0 +1,28 @@
+import {heicTo, isHeic} from '../dist/heic-to.js'
+
+const imagesContainer = document.querySelector(".images")
+const messageLabel = document.querySelector("label")
+const field = document.querySelector("input")
+
+field.addEventListener('change', async (event) => {
+
+  let imageDom = document.querySelector("img")
+  if (!imageDom) {
+    imageDom = document.createElement('img')
+    imagesContainer.appendChild(imageDom)
+  }
+  imageDom.src = ''
+  imageDom.alt = "Loading..."
+  messageLabel.textContent = "Loading..."
+
+  const image = field.files[0]
+  if (await isHeic(image)) {
+    messageLabel.textContent = "It's a HEIC image"
+    const heifImage = await heicTo({blob: image, type: 'image/jpeg', quality: 0.5})
+    imageDom.src = URL.createObjectURL(heifImage)
+  } else {
+    messageLabel.textContent = "It's not a HEIC image"
+    imageDom.src = URL.createObjectURL(image)
+  }
+
+})

package/example/csp/app.js

@@ -0,0 +1,28 @@
+import {heicTo, isHeic} from '../../dist/csp/heic-to.js'
+
+const imagesContainer = document.querySelector(".images")
+const messageLabel = document.querySelector("label")
+const field = document.querySelector("input")
+
+field.addEventListener('change', async (event) => {
+
+  let imageDom = document.querySelector("img")
+  if (!imageDom) {
+    imageDom = document.createElement('img')
+    imagesContainer.appendChild(imageDom)
+  }
+  imageDom.src = ''
+  imageDom.alt = "Loading..."
+  messageLabel.textContent = "Loading..."
+
+  const image = field.files[0]
+  if (await isHeic(image)) {
+    messageLabel.textContent = "It's a HEIC image"
+    const heifImage = await heicTo({blob: image, type: 'image/jpeg', quality: 0.5})
+    imageDom.src = URL.createObjectURL(heifImage)
+  } else {
+    messageLabel.textContent = "It's not a HEIC image"
+    imageDom.src = URL.createObjectURL(image)
+  }
+
+})

package/example/csp/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>heic-to</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center; 
+      flex-direction: column;
+      height: 100vh;
+    }
+    input {
+      border: 1px solid black;
+      padding: 10px;
+    }
+    label {
+        display: block;;
+        padding-top: 20px;
+        padding-bottom: 20px;
+        color: red;
+    }
+    .images {
+      width: 200px;
+      height: 200px;
+    }
+    img {
+      display: block;
+      width: 100%;
+    }
+  </style>
+  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, post-check=0, pre-check=0">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self'; worker-src blob:;">
+  <script src="./app.js" type="module"></script>
+</head>
+<body>
+
+  <h1>heic-to</h1>
+
+  <main>
+    <input type="file">
+    <label></label>
+    <div class="images"></div>
+  </main>
+</body>
+</html>

package/example/index.html

@@ -31,6 +31,7 @@
       width: 100%;
     }
   </style>
+  <script src="./app.js" type="module"></script>
 </head>
 <body>
 
@@ -41,36 +42,5 @@
     <label></label>
     <div class="images"></div>
   </main>
-
-  <script type="module">
-    import {heicTo, isHeic} from '../dist/heic-to.js'
-
-    const imagesContainer = document.querySelector(".images")
-    const messageLabel = document.querySelector("label")
-    const field = document.querySelector("input")
-
-    field.addEventListener('change', async (event) => {
-
-      let imageDom = document.querySelector("img")
-      if (!imageDom) {
-        imageDom = document.createElement('img')
-        imagesContainer.appendChild(imageDom)
-      }
-      imageDom.src = ''
-      imageDom.alt = "Loading..."
-      messageLabel.textContent = "Loading..."
-
-      const image = field.files[0]
-      if (await isHeic(image)) {
-        messageLabel.textContent = "It's a HEIC image"
-        const heifImage = await heicTo({blob: image, type: 'image/jpeg', quality: 0.5})
-        imageDom.src = URL.createObjectURL(heifImage)
-      } else {
-        messageLabel.textContent = "It's not a HEIC image"
-        imageDom.src = URL.createObjectURL(image)
-      }
-
-    })
-  </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heic-to",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Converting HEIF/HEIF image formats to PNG/JPEG in the browser",
   "main": "dist/heic-to.js",
   "scripts": {