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

package/CHANGELOG.md

@@ -5,6 +5,22 @@ 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.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

@@ -43,6 +43,8 @@ main.js, if installed with npm
 ```javascript
 // Import the component, which is the default export, so no curly braces are needed.
 import ProgressiveShareButton from 'progressive-share-button';
+// Initialize the component
+ProgressiveShareButton.init();
 ```
 
 ### Customizing the component name
@@ -51,9 +53,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);
 
 ```
 
@@ -229,7 +231,7 @@ There are two custom event emitted by the component: `progressive-share-success`
 // example of listening for the custom events
 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);
+  console.log('The progressive-share-success event was heard.', e.detail);
 });
 document.addEventListener('progressive-share-fail', (e) => {
   // e.detail contains the error message

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

@@ -1,6 +1,13 @@
-class ProgressiveShareButtonElement extends HTMLElement {
+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 +53,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() {
@@ -109,7 +118,7 @@ class ProgressiveShareButtonElement extends HTMLElement {
     }
   }
 }
-function ProgressiveShareButton() {
+function init() {
   if (typeof navigator.share === "function") {
     console.log(
       "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
@@ -121,10 +130,13 @@ function ProgressiveShareButton() {
   }
   customElements.define(
     "progressive-share-button",
-    ProgressiveShareButtonElement
+    ProgressiveShareButtonClass
   );
   return true;
 }
+const main = {
+  init
+};
 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 +184,7 @@ function _getBoolean(stringValue) {
       return JSON.parse(stringValue);
   }
 }
-const main = (() => {
-  ProgressiveShareButton();
-})();
 export {
-  ProgressiveShareButton,
-  ProgressiveShareButtonElement,
+  ProgressiveShareButtonClass,
   main as default
 };

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

@@ -1,10 +1,17 @@
 (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 +57,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() {
@@ -113,7 +122,7 @@
       }
     }
   }
-  function ProgressiveShareButton() {
+  function init() {
     if (typeof navigator.share === "function") {
       console.log(
         "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
@@ -125,10 +134,13 @@
     }
     customElements.define(
       "progressive-share-button",
-      ProgressiveShareButtonElement
+      ProgressiveShareButtonClass
     );
     return true;
   }
+  const main = {
+    init
+  };
   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 +188,7 @@
         return JSON.parse(stringValue);
     }
   }
-  const main = (() => {
-    ProgressiveShareButton();
-  })();
-  exports2.ProgressiveShareButton = ProgressiveShareButton;
-  exports2.ProgressiveShareButtonElement = ProgressiveShareButtonElement;
+  exports2.ProgressiveShareButtonClass = ProgressiveShareButtonClass;
   exports2.default = main;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });

package/package.json

@@ -1,38 +1,40 @@
 {
-  "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-alpha.9",
+    "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",
+    "unpkg": "./dist/progressive-share-button.umd.js",
+    "types": "./@types/progressive-share-button.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/progressive-share-button.es.js",
+            "require": "./dist/progressive-share-button.umd.js"
+        }
+    },
+    "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"
     }
-  },
-  "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"
-  }
 }