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

package/CHANGELOG.md

@@ -5,7 +5,31 @@ 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
+## [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
 
@@ -20,7 +44,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - 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,10 +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 ProgressiveShareButton from 'progressive-share-button';
+// Import the component
+import { ProgressiveShareButton } from 'progressive-share-button';
 // Initialize the component
-ProgressiveShareButton.init();
+ProgressiveShareButton();
 ```
 
 ### Customizing the component name
@@ -69,9 +76,7 @@ customElements.define('my-share-button', ProgressiveShareButtonClass);
 
 ## 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
 
@@ -220,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-success 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,3 +1,10 @@
+/**
+ * name: progressive-share-button
+ * version: v1.0.1
+ * 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) => {
@@ -16,7 +23,7 @@ class ProgressiveShareButtonClass extends HTMLElement {
       } else if (size) {
         return size;
       } else {
-        return 24 + "px";
+        return "24px";
       }
     };
     function _isNumeric(value) {
@@ -88,12 +95,15 @@ class ProgressiveShareButtonClass 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);
@@ -101,15 +111,12 @@ class ProgressiveShareButtonClass 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);
         });
       }
@@ -118,7 +125,7 @@ class ProgressiveShareButtonClass extends HTMLElement {
     }
   }
 }
-function init() {
+const ProgressiveShareButton = () => {
   if (typeof navigator.share === "function") {
     console.log(
       "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
@@ -133,9 +140,6 @@ function init() {
     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>';
@@ -185,6 +189,6 @@ function _getBoolean(stringValue) {
   }
 }
 export {
-  ProgressiveShareButtonClass,
-  main as default
+  ProgressiveShareButton,
+  ProgressiveShareButtonClass
 };

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

@@ -1,3 +1,10 @@
+/**
+ * name: progressive-share-button
+ * version: v1.0.1
+ * 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) {
@@ -20,7 +27,7 @@ var __publicField = (obj, key, value) => {
         } else if (size) {
           return size;
         } else {
-          return 24 + "px";
+          return "24px";
         }
       };
       function _isNumeric(value) {
@@ -92,12 +99,15 @@ var __publicField = (obj, key, value) => {
       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);
@@ -105,15 +115,12 @@ var __publicField = (obj, key, value) => {
           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);
           });
         }
@@ -122,7 +129,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   }
-  function init() {
+  const ProgressiveShareButton = () => {
     if (typeof navigator.share === "function") {
       console.log(
         "ProgressiveShareButton support initialized. <progressive-share-success /> element now available"
@@ -137,9 +144,6 @@ var __publicField = (obj, key, value) => {
       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>';
@@ -188,7 +192,7 @@ var __publicField = (obj, key, value) => {
         return JSON.parse(stringValue);
     }
   }
+  exports2.ProgressiveShareButton = ProgressiveShareButton;
   exports2.ProgressiveShareButtonClass = ProgressiveShareButtonClass;
-  exports2.default = main;
-  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "progressive-share-button",
-    "version": "1.0.0-alpha.9",
+    "version": "1.0.1",
     "description": "A web componet that creates a OS-native share button.",
     "files": [
         "dist"
@@ -10,9 +10,9 @@
         "type": "git",
         "url": "https://github.com/johnfmorton/progressive-share-button"
     },
-    "module": "./es/progressive-share-button.es.js",
+    "module": "./dist/progressive-share-button.es.js",
     "unpkg": "./dist/progressive-share-button.umd.js",
-    "types": "./@types/progressive-share-button.d.ts",
+    "types": "./dist/progressive-share-button.d.ts",
     "exports": {
         ".": {
             "import": "./dist/progressive-share-button.es.js",
@@ -20,8 +20,10 @@
         }
     },
     "scripts": {
+        "clean": "rm -rf dist es demo",
         "dev": "vite --host 0.0.0.0 --port 8888",
-        "build": "vite build",
+        "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"
     },
@@ -35,6 +37,11 @@
     "author": "John F. Morton <john@johnfmorton.com> (https://supergeekery.com)",
     "license": "MIT",
     "devDependencies": {
-        "vite": "^4.1.3"
+        "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"
     }
 }