Inject umd croppie at build time

nyaruka · Feb 8, 2024 · bba0096 · bba0096
1 parent 5a4dea1
commit bba0096
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -37,6 +37,9 @@ const baseConfig = createSpaConfig({
             '<link rel="preload"',
             '<link rel="modulepreload"'
           );
+
+          // inject croppie
+          html = '<script src="{{STATIC_URL}}croppie/croppie.js"></script>' + html;
         }
 
         return html.replace(

diff --git a/src/imagepicker/ImagePicker.ts b/src/imagepicker/ImagePicker.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { html, css, PropertyValueMap } from 'lit';
-import 'croppie/croppie.js';
 import { CroppieCSS } from './CroppieCSS';
 import { property } from 'lit/decorators.js';
 import { Icon } from '../vectoricon';
@@ -166,11 +165,11 @@ export class ImagePicker extends FormElement {
       wrapper.removeChild(wrapper.firstChild);
     }
     this.showCroppie = true;
-    const croppie = document.createElement('div');
-    wrapper.appendChild(croppie);
+    const ele = document.createElement('div');
+    wrapper.appendChild(ele);
 
     const Croppie = (window as any).Croppie;
-    this.croppie = new Croppie(croppie, {
+    this.croppie = new Croppie(ele, {
       enableExif: true,
       viewport: {
         width: 300,

diff --git a/templates/index.html b/templates/index.html
@@ -1,7 +1,10 @@
 <!doctype html>
 <html lang="en">
-    <head></head>
-    <body>
-        <script type="module" src="../out-tsc/temba-components.js"></script>
-    </body>
+
+<head></head>
+
+<body>
+    <script type="module" src="../out-tsc/temba-components.js"></script>
+</body>
+
 </html>