chore: examples

dist/alpine-clipboard.js

@@ -1,24 +1,36 @@
-const AlpineClipboard = {
-  start() {
-    if (!window.Alpine) {
-      throw new Error('Alpine is required for `alpine-clipboard` to work.');
-    }
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.AlpineClipboard = factory());
+}(this, (function () { 'use strict';
 
-    Alpine.addMagicProperty('clipboard', () => {
-      return function (target) {
-        return window.navigator.clipboard.writeText(target);
-      };
-    });
-  }
+    const AlpineClipboard = {
+      start() {
+        if (!window.Alpine) {
+          throw new Error('Alpine is required for `alpine-clipboard` to work.');
+        }
 
-};
+        Alpine.addMagicProperty('clipboard', () => {
+          return function (target) {
+            if (typeof target === 'function') {
+              target = target();
+            }
 
-const deferrer = window.deferLoadingAlpine || (callback => callback());
+            return window.navigator.clipboard.writeText(target);
+          };
+        });
+      }
 
-window.deferLoadingAlpine = function (callback) {
-  AlpineClipboard.start();
-  deferrer(callback);
-};
+    };
 
-export default AlpineClipboard;
+    const deferrer = window.deferLoadingAlpine || (callback => callback());
+
+    window.deferLoadingAlpine = function (callback) {
+      AlpineClipboard.start();
+      deferrer(callback);
+    };
+
+    return AlpineClipboard;
+
+})));
 //# sourceMappingURL=alpine-clipboard.js.map

dist/alpine-clipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"alpine-clipboard.js","sources":["../src/index.js"],"sourcesContent":["const AlpineClipboard = {\n    start() {\n        if (!window.Alpine) {\n            throw new Error('Alpine is required for `alpine-clipboard` to work.')\n        }\n\n        Alpine.addMagicProperty('clipboard', () => {\n            return function (target) {\n                return window.navigator.clipboard.writeText(target)\n            }\n        })\n    }\n}\n\nconst deferrer = window.deferLoadingAlpine || ((callback) => callback())\n\nwindow.deferLoadingAlpine = function (callback) {\n    AlpineClipboard.start()\n\n    deferrer(callback)\n}\n\nexport default AlpineClipboard"],"names":["AlpineClipboard","start","window","Alpine","Error","addMagicProperty","target","navigator","clipboard","writeText","deferrer","deferLoadingAlpine","callback"],"mappings":"MAAMA,eAAe,GAAG;AACpBC,EAAAA,KAAK,GAAG;AACJ,QAAI,CAACC,MAAM,CAACC,MAAZ,EAAoB;AAChB,YAAM,IAAIC,KAAJ,CAAU,oDAAV,CAAN;AACH;;AAEDD,IAAAA,MAAM,CAACE,gBAAP,CAAwB,WAAxB,EAAqC,MAAM;AACvC,aAAO,UAAUC,MAAV,EAAkB;AACrB,eAAOJ,MAAM,CAACK,SAAP,CAAiBC,SAAjB,CAA2BC,SAA3B,CAAqCH,MAArC,CAAP;AACH,OAFD;AAGH,KAJD;AAKH;;AAXmB;;AAcxB,MAAMI,QAAQ,GAAGR,MAAM,CAACS,kBAAP,KAA+BC,QAAD,IAAcA,QAAQ,EAApD,CAAjB;;AAEAV,MAAM,CAACS,kBAAP,GAA4B,UAAUC,QAAV,EAAoB;AAC5CZ,EAAAA,eAAe,CAACC,KAAhB;AAEAS,EAAAA,QAAQ,CAACE,QAAD,CAAR;AACH,CAJD;;;;"}
+{"version":3,"file":"alpine-clipboard.js","sources":["../src/index.js"],"sourcesContent":["const AlpineClipboard = {\n    start() {\n        if (!window.Alpine) {\n            throw new Error('Alpine is required for `alpine-clipboard` to work.')\n        }\n\n        Alpine.addMagicProperty('clipboard', () => {\n            return function (target) {\n                if (typeof target === 'function') {\n                    target = target()\n                }\n                \n                return window.navigator.clipboard.writeText(target)\n            }\n        })\n    }\n}\n\nconst deferrer = window.deferLoadingAlpine || ((callback) => callback())\n\nwindow.deferLoadingAlpine = function (callback) {\n    AlpineClipboard.start()\n\n    deferrer(callback)\n}\n\nexport default AlpineClipboard"],"names":["AlpineClipboard","start","window","Alpine","Error","addMagicProperty","target","navigator","clipboard","writeText","deferrer","deferLoadingAlpine","callback"],"mappings":";;;;;;UAAMA,eAAe,GAAG;IACpBC,EAAAA,KAAK,GAAG;IACJ,QAAI,CAACC,MAAM,CAACC,MAAZ,EAAoB;IAChB,YAAM,IAAIC,KAAJ,CAAU,oDAAV,CAAN;IACH;;IAEDD,IAAAA,MAAM,CAACE,gBAAP,CAAwB,WAAxB,EAAqC,MAAM;IACvC,aAAO,UAAUC,MAAV,EAAkB;IACrB,YAAI,OAAOA,MAAP,KAAkB,UAAtB,EAAkC;IAC9BA,UAAAA,MAAM,GAAGA,MAAM,EAAf;IACH;;IAED,eAAOJ,MAAM,CAACK,SAAP,CAAiBC,SAAjB,CAA2BC,SAA3B,CAAqCH,MAArC,CAAP;IACH,OAND;IAOH,KARD;IASH;;IAfmB;;IAkBxB,MAAMI,QAAQ,GAAGR,MAAM,CAACS,kBAAP,KAA+BC,QAAD,IAAcA,QAAQ,EAApD,CAAjB;;IAEAV,MAAM,CAACS,kBAAP,GAA4B,UAAUC,QAAV,EAAoB;IAC5CZ,EAAAA,eAAe,CAACC,KAAhB;IAEAS,EAAAA,QAAQ,CAACE,QAAD,CAAR;IACH,CAJD;;;;;;;;"}

examples/ie11.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<head>
+    <title>Alpine Clipboard IE11</title>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
+</head>
+<body>
+    <div x-data="{ input: '' }">
+        <input x-model="input">
+        <button type="button" @click="$clipboard(input)">Copy to Clipboard</button>
+    </div>
+
+    <div x-data="{}">
+        <button type="button" @click="$clipboard(() => 'Testing')">Copy 'Testing' to Clipboard</button>
+    </div>
+
+    <script src="../dist/alpine-clipboard.ie11.js"></script>
+</body>

examples/index.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <head>
     <title>Alpine Clipboard</title>
-    <script src="../dist/alpine-clipboard.umd.js"></script>
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
 </head>
 <body>
     <div x-data="{ input: '' }">
         <input x-model="input">
-        <button type="button" @click="$clipboard(input)">Copy to Clipboard</button>
+        <button type="button" @click="await $clipboard(input)">Copy to Clipboard</button>
     </div>
 
     <div x-data="{}">
         <button type="button" @click="$clipboard(() => 'Testing')">Copy 'Testing' to Clipboard</button>
     </div>
+
+    <script src="../dist/alpine-clipboard.js"></script>
 </body>

package.json

@@ -9,7 +9,7 @@
         "url": "https://github.com/ryangjchandler/alpine-clipboard"
     },
     "main": "dist/alpine-clipboard.ie11.js",
-    "module": "dist/alpine-clipboard.js",
+    "module": "src/index.js",
     "scripts": {
         "build": "rollup -c && rollup -c rollup.ie11.config.js",
         "watch": "rollup -c -w"

rollup.config.js

@@ -7,8 +7,9 @@ export default {
     input: 'src/index.js',
     output: [
         {
+            name: 'AlpineClipboard',
             file: 'dist/alpine-clipboard.js',
-            format: 'es',
+            format: 'umd',
             sourcemap: true
         }
     ],

src/index.js

@@ -6,6 +6,10 @@ const AlpineClipboard = {
 
         Alpine.addMagicProperty('clipboard', () => {
             return function (target) {
+                if (typeof target === 'function') {
+                    target = target()
+                }
+                
                 return window.navigator.clipboard.writeText(target)
             }
         })