progressive-share-button 1.0.2 → 1.0.4

package/README.md

@@ -66,12 +66,17 @@ customElements.define('my-share-button', ProgressiveShareButtonClass);
 
 ```
 
-### CDN - not tested yet
+### CDN
 
-~~Not Tested: You can also use the component directly from a CDN. The component is available on [unpkg](https://unpkg.com/progressive-share-button).~~
+You can also use the component directly from a CDN. The component is available on [unpkg](https://unpkg.com/progressive-share-button). The following example shows how to use the component from unpkg. Note the use of `?module` at the end of the URL in the import statement.
 
 ```html
-<!-- script src="https://unpkg.com/progressive-share-button"></script --!>
+<script type="module">
+  import { ProgressiveShareButton } from 'https://unpkg.com/progressive-share-button?module';
+  // Initialize the component
+  ProgressiveShareButton();
+</script>
+<progressive-share-button title="Hello World!" url="https://example.com" debug="true"></progressive-share-button>
 ```
 
 ## Typescript support

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

@@ -8,7 +8,9 @@ declare module "progressive-share-button" {
     class ProgressiveShareButtonClass extends HTMLElement {
         iconSize: () => string;
         osOverride: () => string | null;
+        private boundShare;
         constructor();
+        disconnectedCallback(): void;
         share(): void;
     }
     const ProgressiveShareButton: () => boolean;

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

@@ -1,22 +1,18 @@
 /**
  * name: progressive-share-button
- * version: v1.0.2
+ * version: v1.0.4
  * 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 {
+  iconSize;
+  osOverride;
+  boundShare;
   constructor() {
     super();
-    __publicField(this, "iconSize");
-    __publicField(this, "osOverride");
     this.attachShadow({ mode: "open" });
+    this.boundShare = this.share.bind(this);
     this.iconSize = () => {
       const size = this.getAttribute("icon-size") ?? "";
       if (_isNumeric(size)) {
@@ -58,15 +54,13 @@ class ProgressiveShareButtonClass extends HTMLElement {
                       margin: 0;
                       cursor: pointer;
                     }
-                    :host(:hover) {
-                    }
                   </style>
                   <button part="shareButton">
                   <slot>
                   ${_whichIcon(this.osOverride())}
                   </slot>
                   </button>`;
-        this.addEventListener("click", this.share);
+        this.addEventListener("click", this.boundShare);
       }
     } else {
       console.warn(
@@ -74,6 +68,9 @@ class ProgressiveShareButtonClass extends HTMLElement {
       );
     }
   }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.boundShare);
+  }
   share() {
     const debug = _getBoolean(this.getAttribute("debug"));
     const smartShare = _getBoolean(this.getAttribute("smart-share"));
@@ -114,7 +111,7 @@ class ProgressiveShareButtonClass extends HTMLElement {
       }
     );
     if (navigator.share) {
-      if (debug == 1) {
+      if (debug) {
         console.debug("data to be shared", data);
       } else {
         navigator.share(data).then(() => {
@@ -137,7 +134,7 @@ class ProgressiveShareButtonClass extends HTMLElement {
 const ProgressiveShareButton = () => {
   if (typeof navigator.share === "function") {
     console.log(
-      "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
+      "ProgressiveShareButton support initialized. <progressive-share-button> element now available"
     );
   } else {
     console.log(
@@ -188,11 +185,10 @@ const _whichIcon = (osOverride) => {
   }
 };
 function _getBoolean(stringValue) {
-  var _a;
   if (!stringValue) {
     return false;
   }
-  switch ((_a = stringValue == null ? void 0 : stringValue.toLowerCase()) == null ? void 0 : _a.trim()) {
+  switch (stringValue.toLowerCase().trim()) {
     case "true":
     case "1":
       return true;

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

@@ -1,26 +1,22 @@
 /**
  * name: progressive-share-button
- * version: v1.0.2
+ * version: v1.0.4
  * 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";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;
-};
-
+})(this, (function(exports2) {
+  "use strict";
   class ProgressiveShareButtonClass extends HTMLElement {
+    iconSize;
+    osOverride;
+    boundShare;
     constructor() {
       super();
-      __publicField(this, "iconSize");
-      __publicField(this, "osOverride");
       this.attachShadow({ mode: "open" });
+      this.boundShare = this.share.bind(this);
       this.iconSize = () => {
         const size = this.getAttribute("icon-size") ?? "";
         if (_isNumeric(size)) {
@@ -62,15 +58,13 @@ var __publicField = (obj, key, value) => {
                       margin: 0;
                       cursor: pointer;
                     }
-                    :host(:hover) {
-                    }
                   </style>
                   <button part="shareButton">
                   <slot>
                   ${_whichIcon(this.osOverride())}
                   </slot>
                   </button>`;
-          this.addEventListener("click", this.share);
+          this.addEventListener("click", this.boundShare);
         }
       } else {
         console.warn(
@@ -78,6 +72,9 @@ var __publicField = (obj, key, value) => {
         );
       }
     }
+    disconnectedCallback() {
+      this.removeEventListener("click", this.boundShare);
+    }
     share() {
       const debug = _getBoolean(this.getAttribute("debug"));
       const smartShare = _getBoolean(this.getAttribute("smart-share"));
@@ -118,7 +115,7 @@ var __publicField = (obj, key, value) => {
         }
       );
       if (navigator.share) {
-        if (debug == 1) {
+        if (debug) {
           console.debug("data to be shared", data);
         } else {
           navigator.share(data).then(() => {
@@ -141,7 +138,7 @@ var __publicField = (obj, key, value) => {
   const ProgressiveShareButton = () => {
     if (typeof navigator.share === "function") {
       console.log(
-        "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
+        "ProgressiveShareButton support initialized. <progressive-share-button> element now available"
       );
     } else {
       console.log(
@@ -192,11 +189,10 @@ var __publicField = (obj, key, value) => {
     }
   };
   function _getBoolean(stringValue) {
-    var _a;
     if (!stringValue) {
       return false;
     }
-    switch ((_a = stringValue == null ? void 0 : stringValue.toLowerCase()) == null ? void 0 : _a.trim()) {
+    switch (stringValue.toLowerCase().trim()) {
       case "true":
       case "1":
         return true;
@@ -210,4 +206,4 @@ var __publicField = (obj, key, value) => {
   exports2.ProgressiveShareButton = ProgressiveShareButton;
   exports2.ProgressiveShareButtonClass = ProgressiveShareButtonClass;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
-});
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "progressive-share-button",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "A web componet that creates a OS-native share button.",
     "files": [
         "dist"
@@ -37,11 +37,12 @@
     "author": "John F. Morton <john@johnfmorton.com> (https://supergeekery.com)",
     "license": "MIT",
     "devDependencies": {
+        "@tailwindcss/typography": "^0.5.10",
         "autoprefixer": "^10.4.13",
         "postcss": "^8.4.21",
         "tailwindcss": "^3.2.7",
         "typescript": "^4.9.5",
-        "vite": "^4.1.3",
+        "vite": "^7.3.1",
         "vite-plugin-banner": "^0.7.0"
     }
 }

package/CHANGELOG.md

@@ -1,72 +0,0 @@
-# Changelog
-
-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.2] - 2023-11-17
-
-## Added
-
-- A new attribute has been added to the component called `os`. This option allows you to force the button to use a specific operating system icon. The default is `auto` which will use the operating system of the device that the button is being displayed on. The other options are `ios`, `android`, and `windows`. Setting this option is useful during development when combined with the `debug` option to force the button to use a specific icon set regardless of the device the button is being viewed on. For production, leaving it unset or set to `auto` will provide the best user experience for end users.
-
-### Fixed
-
-- The share icons between iOS, Android and Windows had different line widths. The icons have been remade to have the same line widths to provide a more consistent look across platforms.
-- Fixed a typo in a console log message.
-
-## [1.0.1] - 2023-04-10
-
-### Fixed
-
-- There are no code changes to this version, but the documentation now correctly shows the correct import statement for the module. The previous version had the incorrect import statement showing the module having a default export, but it does not. The import statement should be `import { ProgressiveShareButton } from 'progressive-share-button';`.
-- Fixed the dates in this changelog. I had 2021 instead of 2023. I'm not sure how I missed that!
-
-
-## [1.0.0] - 2023-03-04
-
-- Initial release of 1.0.0.
-
-## [1.0.0-alpha.11] - 2023-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] - 2023-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] - 2023-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
-
-- Turned off minification for production builds because module will be ultimately be bundled with the application using the module and minification will be handled by the application's build process.
-
-## [1.0.0-alpha.7] - 2023-02-27
-
-### Added
-
-- Added `CHANGELOG.md` file. Sorry for the delay on this one, if you've been watching this as it has gone through development. I'll try to keep this up to date from now on. We're still in an alpha state, so breaking changes will still happen, but I will document them here.
-
-### Changed
-
-- Changed: (breaking change) the import statement now initialized the web component without needing to call the imported function.