feat(share-button): small perf and size refactor for v1 release

.changeset/tender-teachers-breathe.md

@@ -0,0 +1,5 @@
+---
+'@parsonic/share-button': major
+---
+
+Tidy up and release as v1

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+packages/share-button/min.js

packages/share-button/README.md

@@ -21,8 +21,7 @@ Add the script tag and use the button in your page.
 ```html
 <script
   defer
-  type="module"
-  src="https://cdn.jsdelivr.net/npm/@parsonic/share-button@latest/dist/index.js"
+  src="https://cdn.jsdelivr.net/npm/@parsonic/share-button@latest/min.js"
 ></script>
 <share-button data-button-label="Share this page"></share-button>
 ```
@@ -68,7 +67,7 @@ supports it. If the share feature is not available the component will not be
 defined and will either show the fallback content or no button at all.
 
 For control over the share data you can provide the share button with data
-attribute. Below is an example using Nunjucks template syntax.
+attributes. Below is an example using Nunjucks template syntax.
 
 ```html
 <share-button
@@ -103,7 +102,7 @@ Provide a label for the button with the `data-button-label` attribute.
 <share-button data-button-label="Share this page"></share-button>
 ```
 
-Style the button use the `button` part selector.
+Style the button using the `button` part selector.
 
 ```css
 share-button::part(button) {
@@ -121,9 +120,9 @@ Provide your own button in the `button` slot.
 
 ## Share event
 
-When the share button is clicked a custom event with the name `share` is
-dispatched. This event has the share data as the payload, bubbles and is
-cancelable.
+When the share button is clicked a [custom event][custom-event] with the
+name `share` is dispatched. This event has the share data as the payload,
+bubbles and is cancelable.
 
 ```js
 // Example metric capture
@@ -143,9 +142,10 @@ document.addEventListener('share', (ev) => {
 
 ## Fallback content
 
-Fallback content can be provided if for some reason the native share
-function isn't available or the scripts aren't loaded. Please see this
-[blog post][blog-post] for thorough explanation of using fallback content.
+Fallback content can be provided for situations where the native share
+function isn't available or the component script isn't loaded. Please see
+this [blog post][blog-post] for thorough explanation of using fallback
+content.
 
 ```html
 <share-button>
@@ -164,5 +164,6 @@ function isn't available or the scripts aren't loaded. Please see this
 
 [share]: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
 [open-graph]: https://ogp.me/
+[custom-event]: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
 [dist]: https://cdn.jsdelivr.net/npm/@parsonic/[email protected]/dist/
 [blog-post]: https://philparsons.co.uk/blog/dont-fouc-up-your-web-components/

packages/share-button/ShareButton.js

@@ -6,6 +6,14 @@ if (typeof HTMLElement !== 'undefined') {
   BaseElement = class {}
 }
 
+function getGraphContent(property, defaultValue) {
+  return (
+    document
+      .querySelector(`meta[property='og:${property}']`)
+      ?.getAttribute('content') ?? defaultValue
+  )
+}
+
 export default class ShareButton extends BaseElement {
   static register(tag = 'share-button') {
     if ('share' in navigator) {
@@ -14,60 +22,41 @@ export default class ShareButton extends BaseElement {
   }
 
   connectedCallback() {
-    let { url, text, title, buttonLabel } = this.dataset
-
-    if (!url) {
-      url =
-        document
-          .querySelector("meta[property='og:url']")
-          ?.getAttribute('content') ?? location.href
-    }
+    const defaultButton = document.createElement('button')
+    defaultButton.textContent = this.dataset.buttonLabel ?? 'Share'
+    defaultButton.setAttribute('part', 'button')
 
-    if (!text) {
-      text = document
-        .querySelector("meta[property='og:description']")
-        ?.getAttribute('content')
-    }
+    const slot = document.createElement('slot')
+    slot.setAttribute('name', 'button')
+    slot.appendChild(defaultButton)
 
-    if (!title) {
-      title =
-        document
-          .querySelector("meta[property='og:title']")
-          ?.getAttribute('content') ?? document.title
-    }
+    const shadowRoot = this.attachShadow({ mode: 'open' })
+    shadowRoot.appendChild(slot)
 
-    const data = { url, text, title }
+    slot.addEventListener('click', async () => {
+      let {
+        url = getGraphContent('url', location.href),
+        title = getGraphContent('title', document.title),
+        text = getGraphContent('description'),
+      } = this.dataset
 
-    if (navigator.canShare(data)) {
-      const defaultButton = document.createElement('button')
-      defaultButton.textContent = buttonLabel ?? 'Share'
-      defaultButton.setAttribute('part', 'button')
+      const data = { url, text, title }
 
-      const slot = document.createElement('slot')
-      slot.setAttribute('name', 'button')
-      slot.appendChild(defaultButton)
-
-      const shadowRoot = this.attachShadow({ mode: 'open' })
-      shadowRoot.appendChild(slot)
-
-      slot.addEventListener('click', async (ev) => {
-        ev.preventDefault()
-
-        const canShare = this.dispatchEvent(
+      if (
+        navigator.canShare(data) &&
+        this.dispatchEvent(
           new CustomEvent('share', {
             cancelable: true,
             bubbles: true,
             detail: data,
           })
         )
-
-        if (canShare) {
-          try {
-            await navigator.share(data)
-            // eslint-disable-next-line no-empty, no-unused-vars
-          } catch (err) {}
-        }
-      })
-    }
+      ) {
+        try {
+          await navigator.share(data)
+          // eslint-disable-next-line no-empty, no-unused-vars
+        } catch (err) {}
+      }
+    })
   }
 }

packages/share-button/package.json

@@ -6,13 +6,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/p-m-p/parsonic/tree/main/packages/share-button"
+    "url": "https://github.com/p-m-p/parsonic"
   },
   "scripts": {
-    "build": "esbuild index.js ShareButton.js --bundle --minify --sourcemap --outdir=dist --format=esm",
-    "clean": "rm -rf dist",
-    "prepare": "cp ../../LICENSE ./",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "esbuild index.js --bundle --minify --sourcemap --outfile=min.js --format=iife",
+    "clean": "rm -f min.*",
+    "prepare": "cp ../../LICENSE ./"
   },
   "keywords": [
     "button",

stories/ShareButton.stories.js

@@ -6,6 +6,7 @@ import './share-button.css'
 ShareButton.register('test-button')
 
 export default {
+  tags: ['autodocs'],
   title: 'ShareButton',
 }
 
@@ -17,6 +18,15 @@ export const Label = {
   render: () => html`<test-button data-button-label="Share it!"></test-button>`,
 }
 
+export const Attributes = {
+  render: () =>
+    html`<test-button
+      data-url="https://example.com/"
+      data-title="Hello world!"
+      data-text="Test data attributes"
+    ></test-button>`,
+}
+
 export const Styled = {
   render: () => html`<test-button class="styled"></test-button>`,
 }