progressive-share-button 1.0.0-alpha.8 → 1.0.0

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [1.0.0-alpha.11] - 2021-03-01
+
+### Fixed
+
+- Fixed: Previous solution didn't fix build system issue. Switched the build script to use `tsc` instead of `vite` to build the package.
+
+## [1.0.0-alpha.10] - 2021-03-01
+
+### Fixed
+
+- Fixed: The build system didn't include the @types directory in the published package. This has been fixed.
+
+## [1.0.0-alpha.9] - 2021-03-01
+
+### Added
+
+- Added typescript types for the `ProgressiveShareButton` class and default function.
+
+### Changed
+
+- Changed: (breaking change) the import statement no longer initialized the web component on import. On some builds using typescript, the button would not be initialized without using the imported function. Now, after import, you must call the init function to initialize the web component, like `ProgressButton.init()`.
+- Changed: (breaking change) the `ProgressiveShareButtonElement` class is now exported as `ProgressiveShareButtonClass`.
+
+### Fixed
+
+- Fixed: The demo page has some incorrect class names in the example code. These have been corrected.
+
 ## [1.0.0-alpha.8] - 2023-02-27
 
 ### Changed

package/README.md

@@ -4,6 +4,11 @@ The _Progressive Share Button_ web component is a simple way to add a share butt
 
 The web component is a wrapper around the [Web Share API](https://w3c.github.io/web-share/) that attempts to display a share icon appropriate to the user's device with icons that will be recognizable to iOS/Mac, Android and Windows. If the device type can't be determined, the component will display a Windows share icon.
 
+## Demo
+
+Check out the demo page, [https://johnfmorton.github.io/progressive-share-button/](https://johnfmorton.github.io/progressive-share-button/), to see the component in action.
+
+
 ## Basic Usage
 
 The most basic usage of the component is to use no attributes. The component will share the current page's URL.
@@ -18,7 +23,9 @@ You may also pass the URL to be shared. The component will share the URL that ha
 <progressive-share-button url="https://example.com" />
 ```
 
-This will render one of the following, depending on the device and browser. This example shows the Windows sharing icon, the Android sharing icon, and the iOS sharing icon.
+This will render one of the following, depending on the device and browser.
+
+This example image below shows the Windows sharing icon, the Android sharing icon, and the iOS/Mac sharing icon.
 
 ![Basic Example](./img/button-examples.png)
 
@@ -41,8 +48,10 @@ npm install progressive-share-button
 main.js, if installed with npm
 
 ```javascript
-// Import the component, which is the default export, so no curly braces are needed.
+// Import the component
 import ProgressiveShareButton from 'progressive-share-button';
+// Initialize the component
+ProgressiveShareButton();
 ```
 
 ### Customizing the component name
@@ -51,9 +60,9 @@ If you want to customize the component name, you can import the element class di
 
 
 ```javascript
-import { ProgressiveShareButtonElement } from 'progressive-share-button';
+import { ProgressiveShareButtonClass } from 'progressive-share-button';
 // Initialize the component
-customElements.define('my-share-button', ProgressiveShareButtonElement);
+customElements.define('my-share-button', ProgressiveShareButtonClass);
 
 ```
 
@@ -67,9 +76,7 @@ customElements.define('my-share-button', ProgressiveShareButtonElement);
 
 ## Typescript support
 
-WIP: ~~~The component is written in Typescript and includes a type definition file. If you are using Typescript, you can import the component directly into your project.~~~
-
-
+The component is written in Typescript and includes type definitions. If you are using Typescript, you can import the component directly into your project and see code completion hints. See the [Custom events](#custom-events) section for more information about using the custom event type definitions.
 
 ## Customizing the Component
 
@@ -218,29 +225,50 @@ https://w3c.github.io/web-share/demos/share-files.html
 
 There are two custom event emitted by the component: `progressive-share-success` and `progressive-share-fail`.
 
-| Event name | Description |
-| --- | --- |
-| `progressive-share-success` | Emitted when the Web Share API is supported and the data is successfully shared. |
-| `progressive-share-fail` | Emitted when the Web Share API is supported but the data is not successfully shared. This is typically emitted when a user opens the share dialog box but exits out of it without sharing. |
+| Event name | Description | TypeScript type |
+| --- | --- | --- |
+| `progressive-share-success` | Emitted when the Web Share API is supported and the data is successfully shared. | `ProgressiveShareSuccessEvent` |
+| `progressive-share-fail` | Emitted when the Web Share API is supported but the data is not successfully shared. This is typically emitted when a user opens the share dialog box but exits out of it without sharing. | `ProgressiveShareFailEvent` |
 
+If you're writing in Typescript, you can import the custom event types and use them like this:
 
-
-```javascript
-// example of listening for the custom events
+```typescript
+import { ProgressiveShareSuccessEvent, ProgressiveShareFailEvent } from 'progressive-share-button';
 document.addEventListener('progressive-share-success', (e) => {
-  // e.detail contains the share data that was shared
-  console.log('The progressive-share event was heard.', e.detail);
-});
+  const { detail } = e as ProgressiveShareSuccessEvent
+    // e.detail contains the share data
+  // check if e.detail exists
+  if (detail) {
+      console.log('The progressive-share-success event was heard.', detail)
+  }
+})
 document.addEventListener('progressive-share-fail', (e) => {
-  // e.detail contains the error message
-  console.log('The progressive-share-fail event was heard.', e.detail);
-});
+    const { detail } = e as ProgressiveShareFailEvent
+    // check if e.detail exists
+    if (detail) {
+    console.log('The progressive-share-fail event was heard.', detail)
+  }
+})
 ```
 
-## Demo
-
-[https://johnfmorton.github.io/progressive-share-button/](https://johnfmorton.github.io/progressive-share-button/)
+Or if you're writing in Javascript, you can skip importing the types and just use the `detail` property of the event object.
 
+```javascript
+document.addEventListener('progressive-share-success', (e) => {
+  const { detail } = e
+  // check if e.detail exists
+  if (detail) {
+      console.log('The progressive-share-success event was heard.', detail)
+  }
+})
+document.addEventListener('progressive-share-fail', (e) => {
+    const { detail } = e
+    // check if e.detail exists
+  if (detail) {
+    console.log('The progressive-share-fail event was heard.', detail)
+  }
+})
+```
 ## License
 
 MIT

package/dist/progressive-share-button.d.ts

@@ -0,0 +1,15 @@
+declare module "progressive-share-button" {
+    export interface ProgressiveShareSuccessEvent extends Event {
+        detail: any;
+    }
+    export interface ProgressiveShareFailEvent extends Event {
+        detail: any;
+    }
+    class ProgressiveShareButtonClass extends HTMLElement {
+        iconSize: () => string;
+        constructor();
+        share(): void;
+    }
+    const ProgressiveShareButton: () => boolean;
+    export { ProgressiveShareButton, ProgressiveShareButtonClass };
+}

package/dist/progressive-share-button.es.js

@@ -1,6 +1,20 @@
-class ProgressiveShareButtonElement extends HTMLElement {
+/**
+ * name: progressive-share-button
+ * version: v1.0.0
+ * description: A web componet that creates a OS-native share button.
+ * author: John F. Morton <john@johnfmorton.com> (https://supergeekery.com)
+ * repository: https://github.com/johnfmorton/progressive-share-button
+ */
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ProgressiveShareButtonClass extends HTMLElement {
   constructor() {
     super();
+    __publicField(this, "iconSize");
     this.attachShadow({ mode: "open" });
     this.iconSize = () => {
       const size = this.getAttribute("icon-size") ?? "";
@@ -46,7 +60,9 @@ class ProgressiveShareButtonElement extends HTMLElement {
         this.addEventListener("click", this.share);
       }
     } else {
-      console.warn("ProgressiveShareButton disabled due to lack of Web Share API support on this browser.");
+      console.warn(
+        "ProgressiveShareButton disabled due to lack of Web Share API support on this browser."
+      );
     }
   }
   share() {
@@ -79,12 +95,15 @@ class ProgressiveShareButtonElement extends HTMLElement {
     if (!data.url && !data.text && !data.title) {
       data.url = window.location.href;
     }
-    let shareEvent = new CustomEvent("progressive-share-success", {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: data
-    });
+    let shareEvent = new CustomEvent(
+      "progressive-share-success",
+      {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        detail: data
+      }
+    );
     if (navigator.share) {
       if (debug == 1) {
         console.debug("data to be shared", data);
@@ -92,15 +111,12 @@ class ProgressiveShareButtonElement extends HTMLElement {
         navigator.share(data).then(() => {
           this.dispatchEvent(shareEvent);
         }).catch((e) => {
-          let shareEventFail = new CustomEvent(
-            "progressive-share-fail",
-            {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-              detail: e
-            }
-          );
+          let shareEventFail = new CustomEvent("progressive-share-fail", {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail: e
+          });
           this.dispatchEvent(shareEventFail);
         });
       }
@@ -109,7 +125,7 @@ class ProgressiveShareButtonElement extends HTMLElement {
     }
   }
 }
-function ProgressiveShareButton() {
+const ProgressiveShareButton = () => {
   if (typeof navigator.share === "function") {
     console.log(
       "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
@@ -121,10 +137,10 @@ function ProgressiveShareButton() {
   }
   customElements.define(
     "progressive-share-button",
-    ProgressiveShareButtonElement
+    ProgressiveShareButtonClass
   );
   return true;
-}
+};
 const iosShareIcon = '<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>';
 const androidShareIcon = '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>';
 const winShareIcon = '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>';
@@ -172,11 +188,7 @@ function _getBoolean(stringValue) {
       return JSON.parse(stringValue);
   }
 }
-const main = (() => {
-  ProgressiveShareButton();
-})();
 export {
   ProgressiveShareButton,
-  ProgressiveShareButtonElement,
-  main as default
+  ProgressiveShareButtonClass
 };

package/dist/progressive-share-button.umd.js

@@ -1,10 +1,24 @@
+/**
+ * name: progressive-share-button
+ * version: v1.0.0
+ * description: A web componet that creates a OS-native share button.
+ * author: John F. Morton <john@johnfmorton.com> (https://supergeekery.com)
+ * repository: https://github.com/johnfmorton/progressive-share-button
+ */
 (function(global, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["progressive-share-button"] = {}));
 })(this, function(exports2) {
-  "use strict";
-  class ProgressiveShareButtonElement extends HTMLElement {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+  class ProgressiveShareButtonClass extends HTMLElement {
     constructor() {
       super();
+      __publicField(this, "iconSize");
       this.attachShadow({ mode: "open" });
       this.iconSize = () => {
         const size = this.getAttribute("icon-size") ?? "";
@@ -50,7 +64,9 @@
           this.addEventListener("click", this.share);
         }
       } else {
-        console.warn("ProgressiveShareButton disabled due to lack of Web Share API support on this browser.");
+        console.warn(
+          "ProgressiveShareButton disabled due to lack of Web Share API support on this browser."
+        );
       }
     }
     share() {
@@ -83,12 +99,15 @@
       if (!data.url && !data.text && !data.title) {
         data.url = window.location.href;
       }
-      let shareEvent = new CustomEvent("progressive-share-success", {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-        detail: data
-      });
+      let shareEvent = new CustomEvent(
+        "progressive-share-success",
+        {
+          bubbles: true,
+          cancelable: false,
+          composed: true,
+          detail: data
+        }
+      );
       if (navigator.share) {
         if (debug == 1) {
           console.debug("data to be shared", data);
@@ -96,15 +115,12 @@
           navigator.share(data).then(() => {
             this.dispatchEvent(shareEvent);
           }).catch((e) => {
-            let shareEventFail = new CustomEvent(
-              "progressive-share-fail",
-              {
-                bubbles: true,
-                cancelable: false,
-                composed: true,
-                detail: e
-              }
-            );
+            let shareEventFail = new CustomEvent("progressive-share-fail", {
+              bubbles: true,
+              cancelable: false,
+              composed: true,
+              detail: e
+            });
             this.dispatchEvent(shareEventFail);
           });
         }
@@ -113,7 +129,7 @@
       }
     }
   }
-  function ProgressiveShareButton() {
+  const ProgressiveShareButton = () => {
     if (typeof navigator.share === "function") {
       console.log(
         "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
@@ -125,10 +141,10 @@
     }
     customElements.define(
       "progressive-share-button",
-      ProgressiveShareButtonElement
+      ProgressiveShareButtonClass
     );
     return true;
-  }
+  };
   const iosShareIcon = '<svg xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 84.53 108.43" class="icon"><title>Share icon</title><desc>Square with upward arrow</desc><path d="m76.21,33.15h-23.38v5.28h23.38c1.72,0,3.04,1.32,3.04,2.91v58.77c0,1.58-1.32,2.91-3.04,2.91H8.32c-1.72,0-3.04-1.32-3.04-2.9v-58.64c0-1.58,1.32-2.91,3.04-2.91h20.74v-5.28H8.32c-4.62,0-8.32,3.7-8.32,8.19v58.77c0,4.49,3.7,8.19,8.32,8.19h67.88c4.62,0,8.32-3.7,8.32-8.19v-58.77c0-4.62-3.7-8.32-8.32-8.32h0Z"/><path d="m39.62,8.58v69.21h5.28V8.58l13.6,10.04,3.17-4.23L42.26,0l-19.41,14.4,3.17,4.23,13.6-10.04Z"/></svg>';
   const androidShareIcon = '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 18.19 21.46" class="icon"><title>Share icon</title><desc>Circle with smaller circles radiating out</desc><g id="c"><path d="m15.1,15.29c-.89,0-1.7.38-2.28.98l-6.98-3.84c.24-.43.38-.94.38-1.49s-.14-1.03-.38-1.49l7.22-4.03c.55.48,1.25.77,2.04.77,1.7,0,3.1-1.39,3.1-3.1s-1.39-3.1-3.1-3.1-3.1,1.39-3.1,3.1c0,.67.22,1.27.58,1.78l-7.18,4.01c-.58-.62-1.39-1.03-2.3-1.03-1.7,0-3.1,1.39-3.1,3.1s1.39,3.1,3.1,3.1c.91,0,1.73-.41,2.3-1.03l6.98,3.84c-.26.46-.41.96-.41,1.51,0,1.7,1.39,3.1,3.1,3.1s3.1-1.39,3.1-3.1-1.37-3.07-3.07-3.07h0Zm0-14.54c1.32,0,2.38,1.08,2.38,2.38s-1.08,2.38-2.38,2.38-2.38-1.08-2.38-2.38,1.06-2.38,2.38-2.38ZM3.1,13.32c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.06,2.38-2.38,2.38Zm12,7.44c-1.32,0-2.38-1.08-2.38-2.38s1.08-2.38,2.38-2.38,2.38,1.08,2.38,2.38-1.08,2.38-2.38,2.38Z"/></g></svg>';
   const winShareIcon = '<svg id="b" xmlns="http://www.w3.org/2000/svg" part="shareIcon" viewBox="0 0 112.98 100.64" class="icon" ><title>Share icon</title><desc>Square with arrow coming out to the right</desc><g id="c"><path d="m80.68,16.3l22.7,22.65-22.7,22.64v-11.44h-6.78c-18.27,0-33.35,6.91-43.25,13.14,2.34-12.07,7.94-21.2,16.75-27.16,10.12-6.84,22.02-7.83,26.67-7.94l6.6-.15v-11.73M73.93,0v21.43c-12.15.29-51.56,5.17-51.27,56.46,0,0,21.02-20.94,51.27-20.98v20.98l39.05-38.98L73.93,0ZM0,28.24v72.39h86.95v-20.98l-6.6,6.61v7.26H8.12V28.24H0Z"/></g></svg>';
@@ -176,11 +192,7 @@
         return JSON.parse(stringValue);
     }
   }
-  const main = (() => {
-    ProgressiveShareButton();
-  })();
   exports2.ProgressiveShareButton = ProgressiveShareButton;
-  exports2.ProgressiveShareButtonElement = ProgressiveShareButtonElement;
-  exports2.default = main;
-  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+  exports2.ProgressiveShareButtonClass = ProgressiveShareButtonClass;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -1,38 +1,47 @@
 {
-  "name": "progressive-share-button",
-  "version": "1.0.0-alpha.8",
-  "description": "A web componet that creates a OS-native share button.",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/progressive-share-button.umd.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/johnfmorton/progressive-share-button"
-  },
-  "module": "./es/progressive-share-button.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/progressive-share-button.es.js",
-      "require": "./dist/progressive-share-button.umd.js"
+    "name": "progressive-share-button",
+    "version": "1.0.0",
+    "description": "A web componet that creates a OS-native share button.",
+    "files": [
+        "dist"
+    ],
+    "main": "./dist/progressive-share-button.umd.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/johnfmorton/progressive-share-button"
+    },
+    "module": "./dist/progressive-share-button.es.js",
+    "unpkg": "./dist/progressive-share-button.umd.js",
+    "types": "./dist/progressive-share-button.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/progressive-share-button.es.js",
+            "require": "./dist/progressive-share-button.umd.js"
+        }
+    },
+    "scripts": {
+        "clean": "rm -rf dist es demo",
+        "dev": "vite --host 0.0.0.0 --port 8888",
+        "vite-build": "vite build --config vite.demo.config.js",
+        "build": "vite build --config vite.demo.config.js && vite build && tsc lib/progressive-share-button.ts --declaration --emitDeclarationOnly --outFile dist/progressive-share-button.d.ts",
+        "preview": "vite preview",
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [
+        "share",
+        "button",
+        "progressive",
+        "web-components",
+        "web-share-api"
+    ],
+    "author": "John F. Morton <john@johnfmorton.com> (https://supergeekery.com)",
+    "license": "MIT",
+    "devDependencies": {
+        "autoprefixer": "^10.4.13",
+        "postcss": "^8.4.21",
+        "tailwindcss": "^3.2.7",
+        "typescript": "^4.9.5",
+        "vite": "^4.1.3",
+        "vite-plugin-banner": "^0.7.0"
     }
-  },
-  "scripts": {
-    "dev": "vite --host 0.0.0.0 --port 8888",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [
-    "share",
-    "button",
-    "progressive",
-    "web-components",
-    "web-share-api"
-  ],
-  "author": "John F. Morton <john@johnfmorton.com> (https://supergeekery.com)",
-  "license": "MIT",
-  "devDependencies": {
-    "vite": "^4.1.3"
-  }
 }