@justinribeiro/share-to-mastodon - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

package.json

 {
   "name": "@justinribeiro/share-to-mastodon",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A small web component that uses a internal mini-modal to allow setting of a target Mastodon instance from the user to allow sharing.",
@@ -13,11 +13,10 @@ "author": "Justin Ribeiro <[e-mail]>",
   "module": "share-to-mastodon.js",
+  "type": "module",
   "files": [
-    "dist/**/*",
-    "src/**/*",
     "share-to-mastodon.js",
-    "custom-elements.json",
-    "index.*"
+    "share-to-mastodon.min.js",
+    "share-to-mastodon.min.js.map"
   ],
   "scripts": {
-    "start": "es-dev-server --app-index demo/index.html --node-resolve --open --watch",
+    "start": "wds --app-index demo/index.html --node-resolve --open --watch",
     "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
@@ -29,8 +28,9 @@ "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
     "format": "npm run format:eslint && npm run format:prettier",
-    "test": "karma start --coverage",
-    "test:watch": "karma start --auto-watch=true --single-run=false",
-    "prepublishOnly": "yarn rollup -c"
+    "test": "wtr --coverage",
+    "test:watch": "wtr --coverage --watch",
+    "build": "rm -rf ./dist && yarn rollup -c && cp ./share-to-mastodon.js ./dist && yarn make-test-badges && cp ./package.json ./dist && cp ./README.md ./dist",
+    "make-test-badges": "yarn istanbul-badges-readme"
   },
   "dependencies": {
-    "lit": "^2.0.0-rc.1"
+    "lit": "^2.5.0"
   },
@@ -41,2 +41,7 @@ "devDependencies": {
     "@open-wc/testing-karma": "^3.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@web/dev-server": "^0.1.35",
+    "@web/rollup-plugin-copy": "^0.3.0",
+    "@web/rollup-plugin-html": "^1.11.0",
+    "@web/test-runner": "^0.15.0",
     "deepmerge": "^3.2.0",
@@ -46,9 +51,14 @@ "es-dev-server": "^1.23.0",
     "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-lit": "^1.7.2",
     "husky": "^1.0.0",
+    "istanbul-badges-readme": "^1.4.0",
     "lint-staged": "^8.0.0",
     "prettier": "^2.0.4",
-    "rollup": "^2.22.2",
+    "rollup": "^3.9.0",
     "rollup-plugin-filesize": "^9.0.2",
+    "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-terser": "^6.1.0"
+    "rollup-plugin-summary": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sinon": "^15.0.1"
   },
@@ -58,2 +68,3 @@ "eslintConfig": {
       "@open-wc/eslint-config",
+      "plugin:lit/recommended",
       "eslint-config-prettier"
@@ -60,0 +71,0 @@ ]

README.md

@@ -1,5 +0,7 @@
-[![npm version](https://badge.fury.io/js/%40justinribeiro%2Fshare-to-mastodon.svg)](https://badge.fury.io/js/%40justinribeiro%2Fshare-to-mastodon) [![min+gzip](https://badgen.net/bundlephobia/minzip/@justinribeiro/share-to-mastodon)](https://bundlephobia.com/result?p=@justinribeiro/share-to-mastodon@0.2.0)
+[![npm version](https://badge.fury.io/js/%40justinribeiro%2Fshare-to-mastodon.svg)](https://badge.fury.io/js/%40justinribeiro%2Fshare-to-mastodon) [![min+gzip](https://badgen.net/bundlephobia/minzip/@justinribeiro/share-to-mastodon)](https://bundlephobia.com/result?p=@justinribeiro/share-to-mastodon@2.0.0)
 
+![Statements](https://img.shields.io/badge/statements-100%25-brightgreen.svg?style=flat) ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) ![Functions](https://img.shields.io/badge/functions-100%25-brightgreen.svg?style=flat) ![Lines](https://img.shields.io/badge/lines-100%25-brightgreen.svg?style=flat)
+
 # \<share-to-mastodon>
-> a small web component that uses a internal mini-modal to allow setting of a target Mastodon instance from the user to allow sharing.
+> a small web component that uses a web platform `<dialog>` to allow setting of a target Mastodon instance from the user to allow sharing.
 
@@ -9,4 +11,4 @@ ## Features
 1. Allows user to define their instance or select from a datalist that is present or custom set (the power of `input type=url list` and `datalist`! yeah web platform)
-2. Will remember that for the domain
-3. Does zero tracking of anything
+2. Will remember the selected instance if selected by the user _per the installed domain_ (no cross-domain sharing)
+3. No User Tracking: it's all local, let's keep it real people
 4. Lots of custom css props, every string can be overridden
@@ -16,6 +18,5 @@
 
-This web component is built with ES modules in mind and is
-available on NPM:
+This web component is built with ES modules in mind and is available on NPM:
 
-Install code-block:
+Install share-to-mastodon:
 
@@ -36,8 +37,12 @@ ```sh
 
-If you want the paste-and-go version, you can simply load it via CDN:
+Via JS Deliver ESM Run:
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon@0.2.0/dist/share-to-mastodon.js">
+<script type="module">
+  import @justinribeiro/share-to-mastodon from 'https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm';
+</script>
 ```
 
+Example running in JSFiddle: https://jsfiddle.net/justinribeiro/9voe7dfp/1/
+
 ## A Basic Example
@@ -101,16 +106,12 @@
 |----------------------|----------------------|----------|--------------------------------------------------|--------------------------------------------------|
-| `customInstanceList` | `customInstanceList` | `array`  | [{"label":"Mastodon.Social","link":"https://mastodon.social/"},{"label":"Mastodon.Online","link":"https://mastodon.online/"},{"label":"fosstodon.org","link":"https://fosstodon.org/"},{"label":"photog.social","link":"https://photog.social/"}] | An array of Mastodon instances you would like auto-populated within the<br />url datalist |
-| `message`            | `message`            | `string` | "Check out the amazing content I just discovered!" | The message you'd like to share within the target Mastodon input that<br />opens on the share page. |
-| `modalMessage`       | `modalMessage`       | `string` | "Select or set which instance you'd like to share to." | The string that is displayed above the input field on the mini-modal |
-| `modalSaveAsDefault` | `modalSaveAsDefault` | `string` | "Remember My Instance (locally only)"            | The string that is used as the label for the checkbox default save<br />option |
-| `modalShareButton`   | `modalShareButton`   | `string` | "Share"                                          | The string that is display on as the action button to share on the<br />mini-modal |
-| `targetInstance`     | `targetInstance`     | `string` | ""                                               | The target Mastodon instance, usually set by the user within the<br />mini-modal that display on first share |
-| `url`                | `url`                | `string` | "href"                                           | The url of the thing you are sharing within the target Mastodon input that<br />opens on the share page. |
+| `customInstanceList` | `customInstanceList` | `array`  | [{"label":"Mastodon.Social","link":"https://mastodon.social/"},{"label":"Mastodon.Online","link":"https://mastodon.online/"},{"label":"fosstodon.org","link":"https://fosstodon.org/"},{"label":"photog.social","link":"https://photog.social/"}] | An array of Mastodon instances you would like auto-populated within the url datalist |
+| `message`            | `message`            | `string` | "Check out the amazing content I just discovered!" | The message you'd like to share within the target Mastodon input that opens on the share page. |
+| `modalTitle`       | `modalTitle`       | `string` | "Share To Mastodon" | The string that is displayed as the dialog title |
+| `modalMessage`       | `modalMessage`       | `string` | "Select or set which instance you'd like to share to." | The string that is displayed above the input field on the dialog |
+| `modalSaveAsDefault` | `modalSaveAsDefault` | `string` | "Remember My Instance (locally only)"            | The string that is used as the label for the checkbox default save option |
+| `modalShareButton`   | `modalShareButton`   | `string` | "Share"                                          | The string that is displayed on the action button to submit the form in the dialog |
+| `modalCancelButton`   | `modalCancelButton`   | `string` | "Cancel"                                          | The string that is displayed on the cancel button to close the dialog |
+| `targetInstance`     | `targetInstance`     | `string` | ""                                               | The target Mastodon instance, usually set by the user within the dialog that display on first share |
+| `url`                | `url`                | `string` | "href"                                           | The url of the thing you are sharing within the target Mastodon input that opens on the share page. |
 
-## Methods
-
-| Method   | Type       | Description                  |
-|----------|------------|------------------------------|
-| `cancel` | `(): void` | Close the modal share helper |
-
 ## Slots
@@ -127,5 +128,6 @@
 | `--wc-stm-color`                              | "black"          | the host text color, default #000                |
-| `--wc-stm-dialog-background-color`            | "white"          | the mini-dialogs background color                |
-| `--wc-stm-dialog-border-radius`               | "0.5rem"         | this mini-dialogs border radius                  |
-| `--wc-stm-dialog-padding`                     | "1rem"           | the mini-dialogs inner padding                   |
+| `--wc-stm-dialog-border-color`            | "transparent"          | the dialog border color                |
+| `--wc-stm-dialog-background-color`            | "white"          | the dialog background color                |
+| `--wc-stm-dialog-border-radius`               | "0.5rem"         | this dialogs border radius                  |
+| `--wc-stm-dialog-padding`                     | "1rem"           | the dialogs inner padding                   |
 | `--wc-stm-font-family`                        | "sans-serif"     | the host font family, default sans-serif         |
@@ -148,1 +150,5 @@ | `--wc-stm-form-button-background-color`       | "#eee"           |                                                  |
 | `--wc-stm-link-text-decoration`               | "underline"      | the link text decoration if no slot structures overwrite |
+| `--wc-stm-form-submit-background-color` | "#8686fd" | |
+| `--wc-stm-form-cancel-background-color` | "#eeeeee" | |
+| `--wc-stm-form-submit-color` | "inherit" | |
+| `--wc-stm-form-cancel-color` | "inherit" | |

share-to-mastodon.js

@@ -1,3 +0,301 @@
-import { ShareToMastodon } from './src/ShareToMastodon.js';
+/* eslint-disable lit/no-invalid-html */
+import { html, css, LitElement } from 'lit';
 
+/**
+ * share-to-mastodon - a small web component that uses a internal mini-modal to
+ * allow setting of a target Mastodon instance from the user to allow sharing.
+ *
+ * @slot default - The text or what ever you want the link to be
+ *
+ * @cssprop [--wc-stm-color=black] - the host text color, default #000
+ * @cssprop [--wc-stm-font-family=sans-serif] - the host font family, default sans-serif
+ * @cssprop [--wc-stm-link-text-decoration=underline] - the link text decoration if no slot structures overwrite
+ * @cssprop [--wc-stm-link-color-initial=blue] - the link text color if no slot structures overwrite
+ * @cssprop [--wc-stm-link-color-active=red] - the link text color active
+ * @cssprop [--wc-stm-link-color-visited=purple] - the link text color visited
+ * @cssprop [--wc-stm-dialog-padding=1rem] - the mini-dialogs inner padding
+ * @cssprop [--wc-stm-dialog-background-color=white] - the dialogs background color
+ * @cssprop [--wc-stm-dialog-border-color=transparent] - the dialogs border color
+ * @cssprop [--wc-stm-dialog-border-radius=0.5rem] - this dialogs border radius
+ * @cssprop [--wc-stm-title-margin-top-bottom=0.5rem] - the mini-dialogs title margin for the H2
+ * @cssprop [--wc-stm-form-input-padding=0.5rem]
+ * @cssprop [--wc-stm-form-input-border-radius=0.25rem]
+ * @cssprop [--wc-stm-form-input-border=1px solid #ccc]
+ * @cssprop [--wc-stm-form-input-font-size=1em]
+ * @cssprop [--wc-stm-form-button-border]
+ * @cssprop [--wc-stm-form-button-border-radius=0.25rem]
+ * @cssprop [--wc-stm-form-button-background-color=#eee]
+ * @cssprop [--wc-stm-form-button-padding=0.5rem 0]
+ * @cssprop [--wc-stm-form-button-font-size=1em]
+ * @cssprop [--wc-stm-form-button-color=inherit]
+ * @cssprop [--wc-stm-form-submit-background-color=#ccc]
+ * @cssprop [--wc-stm-form-cancel-background-color=#eee]
+ * @cssprop [--wc-stm-form-submit-color=inherit]
+ * @cssprop [--wc-stm-form-cancel-color=inherit]
+ *
+ * @extends {LitElement}
+ */
+export class ShareToMastodon extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        will-change: transform, opacity;
+        color: var(--wc-stm-color, #000);
+        font-family: var(--wc-stm-font-family, sans-serif);
+      }
+
+      a {
+        text-decoration: var(--wc-stm-link-text-decoration, underline);
+        color: var(--wc-stm-link-color-initial, blue);
+      }
+      a:active {
+        color: var(--wc-stm-link-color-active, red);
+      }
+      a:visited {
+        color: var(--wc-stm-link-color-visited, purple);
+      }
+
+      #title {
+        margin: var(--wc-stm-title-margin-top-bottom, 0.5rem) 0;
+      }
+
+      #url {
+        padding: var(--wc-stm-form-input-padding, 0.5rem);
+        border-radius: var(--wc-stm-form-input-border-radius, 0.25rem);
+        border: var(--wc-stm-form-input-border, 1px solid #ccc);
+        font-size: var(--wc-stm-form-input-font-size, 1em);
+      }
+
+      #save {
+        padding: var(--wc-stm-form-input-padding, 0.5rem);
+      }
+
+      dialog {
+        background-color: var(--wc-stm-dialog-background-color, #fff);
+        border-radius: var(--wc-stm-dialog-border-radius, 0.5rem);
+        border-color: var(--wc-stm-dialog-border-color, transparent);
+      }
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      form > p,
+      form > div {
+        margin: 0;
+        padding: var(--wc-stm-form-input-padding, 1rem 0);
+      }
+
+      #actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+      }
+
+      #actions > button {
+        border: var(--wc-stm-form-button-border);
+        border-radius: var(--wc-stm-form-button-border-radius, 0.25rem);
+        padding: var(--wc-stm-form-button-padding, 0.5rem 0);
+        font-size: var(--wc-stm-form-button-font-size, 1em);
+        width: calc(50% - 0.5rem);
+      }
+
+      #actions > button:hover {
+        border: var(--wc-stm-form-button-border);
+        border-radius: var(--wc-stm-form-button-border-radius, 0.25rem);
+        background-color: var(
+          --wc-stm-form-button-background-color-hover,
+          #ccc
+        );
+        color: var(--wc-stm-form-button-color-hover, inherit);
+      }
+
+      #submitButton {
+        background-color: var(--wc-stm-form-submit-background-color, #8686fd);
+        color: var(--wc-stm-submit-button-color, inherit);
+      }
+
+      #cancelButton {
+        background-color: var(--wc-stm-form-cancel-background-color, #eeeeee);
+        color: var(--wc-stm-cancel-button-color, inherit);
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The dialog modal title. Also used for screen readers.
+       * @attr
+       */
+      modalTitle: { type: String },
+      /**
+       * The message you'd like to share within the target Mastodon input that
+       * opens on the share page.
+       * @attr
+       */
+      message: { type: String },
+      /**
+       * The url of the thing you are sharing within the target Mastodon input that
+       * opens on the share page.
+       * @attr
+       */
+      url: { type: String },
+      /**
+       * The target Mastodon instance, usually set by the user within the
+       * mini-modal that display on first share
+       * @property
+       */
+      targetInstance: { type: String },
+      /**
+       * The string that is displayed above the input field on the mini-modal
+       * @attr
+       */
+      modalMessage: { type: String },
+      /**
+       * The string that is displayed on the action button to share.
+       * @attr
+       */
+      modalShareButton: { type: String },
+      /**
+       * The string that is used as the label for the checkbox default save
+       * option
+       */
+      modalSaveAsDefault: { type: String },
+      /**
+       * The string that is displayed on the action button to cancel the dialog.
+       */
+      modalShareCancel: { type: String },
+      /**
+       * An array of Mastodon instances you would like auto-populated within the
+       * url datalist
+       * @example [{ label: 'Mastodon.Social', link: 'https://mastodon.social/' }]
+       * @property
+       */
+      customInstanceList: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.message = 'Check out the amazing content I just discovered!';
+    this.url = window.location.href;
+    this.targetInstance = '';
+    this.modalTitle = 'Share to Mastodon';
+    this.modalMessage = "Select or set which instance you'd like to share to.";
+    this.modalShareButton = 'Share';
+    this.modalShareCancel = 'Cancel';
+    this.modalSaveAsDefault = 'Remember My Instance (locally only)';
+    this.customInstanceList = [
+      { label: 'Mastodon.Social', link: 'https://mastodon.social/' },
+      { label: 'Mastodon.Online', link: 'https://mastodon.online/' },
+      { label: 'fosstodon.org', link: 'https://fosstodon.org/' },
+      { label: 'photog.social', link: 'https://photog.social/' },
+    ];
+  }
+
+  firstUpdated() {
+    this.targetInstance = localStorage.getItem('wc-share-to-mastodon') || '';
+    this.shadowRoot.querySelector('#url').value = this.targetInstance;
+
+    const form = this.shadowRoot.querySelector('form');
+    form.addEventListener('submit', this.__formSubmitHandler.bind(this));
+  }
+
+  disconnectedCallback() {
+    const form = this.shadowRoot.querySelector('form');
+    form.removeEventListener('submit', this.__formSubmitHandler.bind(this));
+  }
+
+  /**
+   * Handle the form submit and send the user to their share destination
+   * @param {Event} event
+   */
+  __formSubmitHandler(event) {
+    event.preventDefault();
+    const instance = this.shadowRoot.querySelector('#url').value;
+    window.open(
+      `${instance}/share?text=${this.message}%20${this.url}`,
+      'wcShareToMastodon'
+    );
+    this.__close();
+
+    if (this.shadowRoot.querySelector('#save').checked) {
+      this.targetInstance = instance;
+      localStorage.setItem(
+        'wc-share-to-mastodon',
+        this.shadowRoot.querySelector('#url').value
+      );
+    }
+  }
+
+  /**
+   * This _always_ opens the modal, primarily because I don't want to burden the
+   * "what happens if they improperly type the url" problem, which would then
+   * always target based on a bad string
+   * @param {Event} event
+   */
+  __hasInstanceSet(event) {
+    event.preventDefault();
+
+    const checkLocalStorage = localStorage.getItem('wc-share-to-mastodon');
+
+    if (checkLocalStorage) {
+      this.shadowRoot.querySelector('input').value = checkLocalStorage;
+    }
+
+    this.shadowRoot.querySelector('dialog').showModal();
+  }
+
+  __close() {
+    this.shadowRoot.querySelector('dialog').close();
+  }
+
+  render() {
+    return html`
+      <dialog aria-labelledby="title">
+        <form>
+          <h2 id="title">${this.modalTitle}</h2>
+          <label for="url">${this.modalMessage}</label>
+          <input
+            type="url"
+            name="url"
+            id="url"
+            placeholder="https://example.org"
+            pattern="https://.*"
+            size="30"
+            required
+            list="defaultInstances"
+            autofocus
+          />
+          <datalist id="defaultInstances">
+            ${this.customInstanceList.map(
+              i => html`
+                <option value="${i.link}" label="${i.label}"></option>
+              `
+            )}
+          </datalist>
+          <div>
+            <input type="checkbox" id="save" name="save" />
+            <label for="save">${this.modalSaveAsDefault}</label>
+          </div>
+          <div id="actions">
+            <button id="submitButton">${this.modalShareButton}</button>
+            <button type="button" id="cancelButton" @click="${this.__close}">
+              ${this.modalShareCancel}
+            </button>
+          </div>
+        </form>
+      </dialog>
+      <a
+        href="${this.targetInstance}/share?text=${this.message}%20${this.url}"
+        @click=${this.__hasInstanceSet}
+      >
+        <slot></slot>
+      </a>
+    `;
+  }
+}
+
 window.customElements.define('share-to-mastodon', ShareToMastodon);

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122716

increased by118.08%

Number of lines in readme file

149

increased by4.2%

Is type module

Yes

Worsened metrics

Dev dependency count

24

increased by71.43%

Number of package files

5

decreased by-37.5%

Number of low license alerts

1

increased byInfinity%

Lines of code

482

decreased by-32.4%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedlit@^2.5.0