Merge pull request #35 from g2crowd/tcarac/cleanup

refactor: remove jq dependency

.github/workflows/nodejs.yml

@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v2

.nvmrc

@@ -1 +1 @@
-16.15.0
+20.9.0

.tool-versions

@@ -1 +1 @@
-nodejs 14.17.1
+nodejs 20.9.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@g2crowd/widget",
   "version": "2.0.0",
-  "description": "Rails-friendly jquery plugin wrapper",
+  "description": "Rails-friendly plugin wrapper",
   "repository": "https://github.com/g2crowd/widget",
   "author": "Michael Wheeler",
   "license": "MIT",
@@ -21,9 +21,6 @@
     "jest": "^27.0.5",
     "prettier": "^2.3.0"
   },
-  "peerDependencies": {
-    "jquery": ">=1.6.2"
-  },
   "module": "src/index.js",
   "main": "src/index.js",
   "files": [

src/initWidgets.js

@@ -1,7 +1,7 @@
 import queue from './queue';
 import { extractOptions } from '@g2crowd/extract-options';
 import camelize from './camelize';
-import { strategies } from './strategies';
+import * as strategies from './strategies';
 
 function simpleCaste(value) {
   try {
@@ -50,10 +50,10 @@ const loadWidget = function (element, name, widgetQueue, registered) {
 
   if (!existingPlugin) {
     widgetQueue.add(() => {
-      strategies.get(pluginFn.init)(wrapped, element);
+      const initStrategy = strategies[pluginFn.init] || strategies.fallback(pluginFn.init, strategies.nextTick);
+      initStrategy(wrapped, element);
     });
     widgetQueue.flush();
-
     element.dataset[`vvidget_${camelize(name)}`] = true;
   }
 };

src/strategies.js

@@ -1,15 +1,16 @@
-import initiationStrategies from './initiationStrategies';
-
-export const strategies = initiationStrategies({
-  nextTick(pluginFn, $$) {
-    return window.setTimeout(() => pluginFn(), 0);
-  },
-
-  immediate(pluginFn, $$) {
-    return pluginFn() || {};
-  },
-
-  hover(pluginFn, $$) {
-    return $$.one('mouseover', () => pluginFn());
-  }
-});
+export function nextTick(pluginFn, _el) {
+  return window.setTimeout(() => pluginFn(), 0);
+}
+export function immediate(pluginFn, _el) {
+  return pluginFn() || {};
+}
+export function hover(pluginFn, el) {
+  const isJqueryEl = el.jquery !== undefined;
+  return isJqueryEl ?
+    el.one('mouseover', pluginFn) :
+    el.addEventListener('mouseover', pluginFn, { once: true });
+}
+export function fallback(strategy, fallback) {
+  console.warn(`Strategy ${strategy} not found, falling back to ${fallback.name} strategy.`);
+  return fallback;
+}

test/strategies.test.js

@@ -0,0 +1,56 @@
+
+import * as strategies from '../src/strategies';
+jest.useFakeTimers();
+
+describe('strategies', () => {
+    beforeEach(() => {
+        jest.clearAllTimers();
+    });
+    describe('fallback', () => {
+        it('should fall back to the provided strategy', () => {
+            const fallback = strategies.fallback('nonexistent', strategies.nextTick);
+            expect(fallback).toEqual(strategies.nextTick);
+        });
+
+        it('should log a warning', () => {
+            const nonexistentStrategy = 'nonexistent';
+            const fallbackStrategy = strategies.nextTick;
+            const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => { });
+            strategies.fallback(nonexistentStrategy, fallbackStrategy);
+            expect(warnSpy).toHaveBeenCalledWith(`Strategy ${nonexistentStrategy} not found, falling back to ${fallbackStrategy.name} strategy.`);
+        });
+    })
+    describe('nextTick', () => {
+        it('should call the plugin function', () => {
+            const pluginFn = jest.fn();
+            strategies.nextTick(pluginFn);
+            jest.runAllTimers();
+            expect(pluginFn).toHaveBeenCalled();
+        });
+    });
+    describe('immediate', () => {
+        it('should call the plugin function', () => {
+            const pluginFn = jest.fn();
+            strategies.immediate(pluginFn);
+            expect(pluginFn).toHaveBeenCalled();
+        });
+    });
+    describe('hover', () => {
+        describe('with a jQuery element', () => {
+            it('should call the plugin function', () => {
+                const pluginFn = jest.fn();
+                const el = { jquery: true, one: jest.fn() };
+                strategies.hover(pluginFn, el);
+                expect(el.one).toHaveBeenCalledWith('mouseover', pluginFn);
+            });
+        });
+        describe('with a DOM element', () => {
+            it('should call the plugin function', () => {
+                const pluginFn = jest.fn();
+                const el = { addEventListener: jest.fn() };
+                strategies.hover(pluginFn, el);
+                expect(el.addEventListener).toHaveBeenCalledWith('mouseover', pluginFn, { once: true });
+            });
+        })
+    });
+})