feat!: Drop UMD and CommonJS builds of the library, and only support …

…ESModules.
Sub-Xaero · Jun 7, 2022 · 3b374f6 · 3b374f6
1 parent 754d782
commit 3b374f6
Show file tree

Hide file tree

Showing 19 changed files with 212 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -23,39 +23,32 @@
   "files": [
     "dist"
   ],
-  "source": "src/index.ts",
-  "main": "dist/stimulus-library.umd.js",
-  "module": "dist/stimulus-library.es.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/stimulus-library.es.js",
-      "require": "./dist/stimulus-library.umd.js"
-    }
-  },
   "scripts": {
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "dev": "vite build --watch",
-    "dev:types": "tsc --emitDeclarationOnly --watch",
+    "build": "tsc",
+    "dev": "tsc --watch",
     "prepack": "yarn build",
     "release": "standard-version",
     "test": "cypress run",
-    "test:treeshake": "agadoo dist stimulus-library.js"
+    "test:treeshake": "agadoo dist"
   },
   "dependencies": {
-    "mitt": "^3.0.0"
+    "@babel/runtime": "^7.17.9",
+    "@hotwired/stimulus": "^3.0.1",
+    "date-fns": "^2.28.0",
+    "dialog-polyfill": "^0.5.6",
+    "mitt": "^3.0.0",
+    "smoothscroll-polyfill": "^0.4.4",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
     "@types/smoothscroll-polyfill": "^0.3.1",
-    "@hotwired/stimulus": "^3.0.1",
     "agadoo": "^2.0.0",
-    "date-fns": "^2.28.0",
-    "dialog-polyfill": "^0.5.6",
-    "lodash-es": "^4.17.21",
     "cypress": "^9.4.1",
+    "fast-glob": "^3.2.11",
     "rimraf": "^3.0.2",
-    "smoothscroll-polyfill": "^0.4.4",
     "standard-version": "^9.3.2",
     "typescript": "^4.5.5",
     "vite": "^2.7.13"

diff --git a/src/controllers/anchor_spy_controller.ts b/src/controllers/anchor_spy_controller.ts
@@ -1,6 +1,7 @@
 import {BaseController} from "../utilities/base_controller";
 import {useEventListener} from "../mixins/use_event_listener";
 import {installClassMethods} from "../mixins/install_class_methods";
+import "../polyfills/string.replaceAll";
 
 export class AnchorSpyController extends BaseController {
   static values = {key: String};
@@ -21,6 +22,7 @@ export class AnchorSpyController extends BaseController {
   }
 
   get _key(): string {
+    // @ts-ignore
     return this.keyValue.replaceAll('#', '');
   }
 

diff --git a/src/controllers/element_save_controller.ts b/src/controllers/element_save_controller.ts
@@ -1,4 +1,6 @@
-import {debounce, get as _get, set as _set} from "lodash-es";
+import debounce from "lodash-es/debounce";
+import _get from "lodash-es/get";
+import _set from "lodash-es/set";
 import {BaseController} from '../utilities/base_controller';
 import {LocalStorageProxy, useLocalStorage} from "../mixins";
 

diff --git a/src/controllers/equalize_controller.ts b/src/controllers/equalize_controller.ts
@@ -1,5 +1,5 @@
 import {BaseController} from "../utilities/base_controller";
-import {debounce} from "lodash-es";
+import debounce from "lodash-es/debounce";
 import {useIntersection} from "../mixins/use_intersection";
 
 export class EqualizeController extends BaseController {

diff --git a/src/controllers/forms/navigate_form_errors_controller.ts b/src/controllers/forms/navigate_form_errors_controller.ts
@@ -1,6 +1,6 @@
 import {BaseController} from "../../utilities/base_controller";
 import {scrollToElement} from "../../utilities/scroll";
-import {clamp} from "lodash-es";
+import clamp from "lodash-es/clamp";
 import {installClassMethods} from "../../mixins/install_class_methods";
 
 export class NavigateFormErrorsController extends BaseController {

diff --git a/src/controllers/temporary_state_controller.ts b/src/controllers/temporary_state_controller.ts
@@ -1,6 +1,9 @@
-import {camelCase, get as _get, set as _set} from "lodash-es";
+import camelCase from "lodash-es/camelCase";
+import _get from "lodash-es/get";
+import _set from "lodash-es/set";
 import {EphemeralController} from "../utilities/ephemeral_controller";
 import {useTimeout} from "../mixins/use_timeout";
+import "../polyfills/string.replaceAll";
 
 export class TemporaryStateController extends EphemeralController {
 
@@ -61,7 +64,10 @@ export class TemporaryStateController extends EphemeralController {
 
 export function applyTemporaryState(element: HTMLElement, propertyString: string, value: any, seconds: number, controllerIdentifier = "temporary-state") {
   if (!element.dataset.controller || !element.dataset.controller?.includes(controllerIdentifier)) {
-    element.dataset.controller = (element.dataset.controller || '' + ` ${controllerIdentifier} `).trim().replaceAll('  ', ' ');
+    let controllerName = (element.dataset.controller || '' + ` ${controllerIdentifier} `).trim();
+    // @ts-ignore
+    controllerName = controllerName.replaceAll('  ', ' ');
+    element.dataset.controller = controllerName;
   }
   // @ts-ignore
   element[camelCase(`${controllerIdentifier}-attribute-value`)] = propertyString;

diff --git a/src/controllers/visual/countdown_controller.ts b/src/controllers/visual/countdown_controller.ts
@@ -1,4 +1,6 @@
-import {Duration, intervalToDuration, isPast} from "date-fns";
+import {type Duration} from "date-fns";
+import intervalToDuration from "date-fns/intervalToDuration";
+import isPast from "date-fns/isPast";
 import {BaseController} from "../../utilities/base_controller";
 
 export class CountdownController extends BaseController {

diff --git a/src/controllers/visual/duration_controller.ts b/src/controllers/visual/duration_controller.ts
@@ -1,4 +1,7 @@
-import {Duration, formatDuration, intervalToDuration, toDate} from "date-fns";
+import { type Duration } from "date-fns";
+import formatDuration from "date-fns/formatDuration";
+import intervalToDuration from "date-fns/intervalToDuration";
+import toDate from "date-fns/toDate";
 import {BaseController} from "../../utilities/base_controller";
 import {useInterval} from "../../mixins/use_interval";
 

diff --git a/src/controllers/visual/tabs_controller.ts b/src/controllers/visual/tabs_controller.ts
@@ -1,5 +1,5 @@
 import {BaseController} from "../../utilities/base_controller";
-import {clamp} from "lodash-es";
+import clamp from "lodash-es/clamp";
 import {useCollectionEventListener} from "../../mixins/use_event_listener";
 
 export class TabsController extends BaseController {

diff --git a/src/controllers/visual/time_distance_controller.ts b/src/controllers/visual/time_distance_controller.ts
@@ -1,4 +1,8 @@
-import {Duration, formatDistanceToNow, intervalToDuration, isPast, toDate} from "date-fns";
+import {type Duration} from "date-fns";
+import formatDistanceToNow from "date-fns/formatDistanceToNow";
+import intervalToDuration from "date-fns/intervalToDuration";
+import isPast from "date-fns/isPast";
+import toDate from "date-fns/toDate";
 import {BaseController} from "../../utilities/base_controller";
 import {useTimeout} from "../../mixins/use_timeout";
 

diff --git a/src/mixins/use_event_bus.ts b/src/mixins/use_event_bus.ts
@@ -1,5 +1,5 @@
 import {Controller} from "@hotwired/stimulus";
-import {debounce} from "lodash-es";
+import debounce from "lodash-es/debounce";
 import {EventBus} from "../utilities/event_bus";
 import {wrapArray} from "../utilities/arrays";
 import {useMixin} from "./create_mixin";

diff --git a/src/mixins/use_event_listener.ts b/src/mixins/use_event_listener.ts
@@ -1,5 +1,5 @@
 import {Controller} from "@hotwired/stimulus";
-import {debounce} from "lodash-es";
+import debounce from "lodash-es/debounce";
 import {wrapArray} from "../utilities/arrays";
 import {useMixin} from "./create_mixin";
 

diff --git a/src/polyfills/string.replaceAll.ts b/src/polyfills/string.replaceAll.ts
@@ -0,0 +1,15 @@
+// @ts-ignore
+if (!String.prototype.replaceAll) {
+  // @ts-ignore
+  String.prototype.replaceAll = function (str: string, newStr: string) {
+
+    // If a regex pattern
+    if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+      return this.replace(str, newStr);
+    }
+
+    // If a string
+    return this.replace(new RegExp(str, 'g'), newStr);
+
+  };
+}
diff --git a/src/utilities/ephemeral_controller.ts b/src/utilities/ephemeral_controller.ts
@@ -1,5 +1,6 @@
-import {camelCase} from "lodash-es";
+import camelCase from "lodash-es/camelCase";
 import {BaseController} from "./base_controller";
+import '../polyfills/string.replaceAll';
 
 export class EphemeralController extends BaseController {
 
@@ -8,20 +9,23 @@ export class EphemeralController extends BaseController {
   }
 
   cleanup(element: HTMLElement) {
+    // @ts-ignore
     element.dataset.controller = element.dataset.controller?.replaceAll(new RegExp(`(\\s|^)${this.identifier}(\\s|$)`, "g"), "") || "";
     if (element.dataset.controller == "") {
       // If there are no controllers left, remove the attribute
       delete element.dataset.controller;
     }
 
     let substringIdentifierValueRegex = new RegExp(`(\\s|^)${this.identifier}\\..+?(\\s|$)`, "g");
+    // @ts-ignore
     element.dataset.target = element.dataset.target?.replaceAll(substringIdentifierValueRegex, "") || "";
     delete element.dataset[camelCase(`${this.identifier}-target`)];
     if (element.dataset.target == "") {
       // If there are no targets left, remove the attribute
       delete element.dataset.target;
     }
 
+    // @ts-ignore
     element.dataset.action = element.dataset.target?.replaceAll(substringIdentifierValueRegex, "") || "";
     delete element.dataset[camelCase(`${this.identifier}-action`)];
     if (element.dataset.action == "") {

diff --git a/src/utilities/scroll.ts b/src/utilities/scroll.ts
@@ -1,24 +1,17 @@
-const smoothSupported = "scrollBehavior" in document.documentElement.style;
-let smoothPolyfilled: boolean;
+import smoothScroll from 'smoothscroll-polyfill';
 
 export async function scrollToElement(element: Element, {behavior = "smooth", block = "start", inline = "nearest"}: ScrollIntoViewOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollIntoView({behavior, block, inline});
 }
 
 export async function scrollAbsoluteTop(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollTo({top: 0, left: 0, behavior});
 }
 
 export async function scrollAbsoluteBottom(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   if (element == window) {
     element.scrollTo({top: document.body.scrollHeight, left: 0, behavior});
   } else {
@@ -27,16 +20,12 @@ export async function scrollAbsoluteBottom(element: Window | Element, {behavior
 }
 
 export async function scrollAbsoluteLeft(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollTo({left: 0, behavior});
 }
 
 export async function scrollAbsoluteRight(element: Window | Element, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   if (element == window) {
     element.scrollTo({left: document.body.scrollWidth, behavior});
   } else {
@@ -45,43 +34,27 @@ export async function scrollAbsoluteRight(element: Window | Element, {behavior =
 }
 
 export async function scrollUp(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollBy({top: -amount, left: 0, behavior});
 }
 
 export async function scrollDown(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollBy({top: amount, left: 0, behavior});
 }
 
 export async function scrollLeft(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollBy({top: 0, left: -amount, behavior});
 }
 
 export async function scrollRight(element: Window | Element, amount: number, {behavior = "smooth"}: ScrollOptions = {}) {
-  if (behavior == "smooth" && !smoothSupported) {
-    await polyfillSmooth();
-  }
+  smoothScroll.polyfill();
   element.scrollBy({top: 0, left: amount, behavior});
 }
 
-async function polyfillSmooth() {
-  const {polyfill} = await import(/* webpackChunkName: "smoothscroll-polyfill" */ "smoothscroll-polyfill");
-  if (smoothPolyfilled) {
-    return;
-  }
-  smoothPolyfilled = true;
-  polyfill();
-}
-
 export function getScrollParent(node: HTMLElement | null): Window | HTMLElement | null {
+  smoothScroll.polyfill();
   if (!node) {
     return null;
   }

diff --git a/src/utilities/strings.ts b/src/utilities/strings.ts
@@ -1,7 +1,8 @@
-import {camelCase, upperFirst} from "lodash-es";
+import camelCase from "lodash-es/camelCase";
+import upperFirst from "lodash-es/upperFirst";
 
 export function pascalCase(str: string): string {
   return upperFirst(
     camelCase(str),
   );
-}
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
     "strict": true,
-    "declaration": true,
-    "declarationMap": true,
+    "declaration": false,
+    "declarationMap": false,
     "moduleResolution": "node",
     "isolatedModules": true,
     "esModuleInterop": true,
-    "module": "ESNext",
-    "target": "ESNext",
-    "sourceMap": true,
+    "module": "ES6",
+    "target": "ES6",
+    "sourceMap": false,
     "outDir": "dist",
     "rootDir": "src",
     "baseUrl": ".",

diff --git a/vite.config.js b/vite.config.js