web-manager 3.2.75 → 4.0.0

package/CLAUDE.md

@@ -0,0 +1,42 @@
+This is a helper library that I built 6 years ago in 2019 when the web landscape was very different.
+
+I built many functionalities that I found myself writing for every project so that I could reuse them easily.
+It has been a great help in my projects, but many of these things are now not needed due to webpack, and other amazing tools.
+
+The first thing I did is move all the old code to the "legacy" folder so that we can keep it as a reference. You should reference this as your REBUILD THE NEW LIBRARY IN "src" folder. DO NOT DELETE OR CHANGE LEGACY CODE, just reference it and recreate the functioinality I want in the "src" folder.
+
+Going forward, you can use any new JS you want like backticks and => since we are going to transpile everything to ES5.
+
+MAKE THIS NEW VERSION OF THE LIBRARY OPTIMIZED FOR WEBPACK (but know that it WONT ALWAYS BE USED WITH WEBPACK)
+
+We are going to completely rewrite and refactor this library. Let's start with how and where it will be used.
+1. Web: It will be webpacked with a project that transpiles everything to ES5
+2. Electron: It will be used in an Electron app.
+3. Chrome Extension: It will be used in a Chrome extension.
+
+Now lets go over what I want to keep.
+1. Firebase
+  - Let's updte to use the latest version of Firebase (12)
+  - I want a sort of "mini firebase auth wrapper" that has some basic functions
+    - auth.ready(options).then(result => {})
+      - This should return a promise that resolves when the auth is ready OR not (so i can call it when the page loads and result will either be the signed in user or nothing if they are not signed in)
+      - result (AN OBJECT) = {
+        user: the signed in firebase user OR null
+        account: the signed in user's acconunt data IF requested in options.account = true
+      }
+    - We will for sure need to have Firebase auth, firestore, messaging.
+2. Manager.prototype.notifications
+  - Easily check if subscribed and subscribe to push notifications. Keeps track in local storage.
+  - automatically requests permission after a click and a timeout
+3. Manager.prototype.storage
+  - A simple wrapper around localStorage and sessionStorage that allows for easy setting, getting, and removing of items.
+4. navigator.serviceWorker.register
+  - A simple wrapper around the service worker registration that allows for easy registration and unregistration.
+
+Some things we can definitely remove:
+1. Most of the legacy/lib/dom.js library since webpack can help me avoid this shit. BUT i do want a light helper that does some things
+  - loadScript so we can load and dynamically import external scripts
+2. I think we can remove init_loadPolyfills since we are transpiling, correct?
+3. Most of legacy/lib/utilities.js
+  - Keep clipboardCopy, escapeHTML, getContext
+

package/README.md

@@ -264,8 +264,71 @@ The Web Manager .storage() API is a wrapper for the localStorage API that automa
 </script>
 ```
 
+### Utilizing the Data Binding System
+Web Manager includes a powerful data binding system that automatically updates your DOM elements based on data changes. Simply add the `data-wm-bind` attribute to any element.
+
+#### Basic Text Binding
+```html
+<!-- Display user email -->
+<span data-wm-bind="user.email"></span>
+
+<!-- Display nested properties -->
+<div data-wm-bind="account.subscription.plan"></div>
+
+<!-- Works with inputs too -->
+<input data-wm-bind="settings.theme" />
+```
+
+#### Conditional Visibility
+```html
+<!-- Show element when condition is true -->
+<div data-wm-bind="@show user">Welcome!</div>
+<div data-wm-bind="@show user.emailVerified">Email is verified</div>
+
+<!-- Hide element when condition is true -->
+<div data-wm-bind="@hide user">Please log in</div>
+
+<!-- Comparisons -->
+<div data-wm-bind="@show subscription.plan === 'premium'">Premium features</div>
+<div data-wm-bind="@hide settings.notifications === false">Notifications enabled</div>
+```
+
+#### Usage in JavaScript
+```javascript
+// Auth data is automatically bound when using auth().listen()
+Manager.auth().listen({ account: true }, (result) => {
+  // user and account data are automatically bound to the DOM
+});
+
+// Update bindings with custom data
+Manager.bindings().update({
+  settings: { theme: 'dark', language: 'en' },
+  subscription: { plan: 'premium', expiresAt: '2024-12-31' }
+});
+
+// Set individual properties
+Manager.bindings().set('currentPage', 'dashboard');
+
+// Get current binding context
+const context = Manager.bindings().getContext();
+
+// Clear all bindings
+Manager.bindings().clear();
+```
+
+#### Supported Actions
+- **`@text`** (default): Sets the text content of the element
+- **`@show`**: Shows the element when condition is true
+- **`@hide`**: Hides the element when condition is true
+- **`@attr`**: Sets an attribute value (format: `@attr attributeName expression`)
+
+Future actions like `@class` and `@style` can be easily added.
+
 ### Utilizing the Firebase Auth System
 The Firebase login system works like charm out of the box without you having to write a single line of code. All you have to do is add a few classes to your HTML elements and everything will work.
+
+#### Authentication Action Classes
+* `.auth-signout-btn`: Add to a button to sign out the current user (shows confirmation dialog)
 * `.auth-email-input`: Add to an input for the user's email
 * `.auth-password-input`: Add to an input for the user's password
 * `.auth-signin-email-btn`: Add to a button to handle the signin process

package/TODO.md

@@ -0,0 +1,14 @@
+BRING BACK THESE THINGS FROM LEGACY:
+- Add back build.json fetch
+
+Do we need to use polyfill? the project that consumes this  is using webpack and compiles to es5. we need to ensure we have
+- fetch api
+- promises
+- async
+
+
+UTM management
+
+LOCALSTORAGE
+
+WRAPPERS FOR COMMON FUNCITONS LIKE FIRESTORE DOC READ and QUERY AND WRITE

package/{index.js → _legacy/index.js}

@@ -1295,7 +1295,7 @@ function refreshNewVersion(self) {
   }
 
   // Make request to get the build time (live)
-  fetch('/@output/build/build.json?cb=' + new Date().getTime())
+  fetch('/build.json?cb=' + new Date().getTime())
   .then(function (res) {
     if (res.ok) {
       return res.json();
@@ -1305,7 +1305,7 @@ function refreshNewVersion(self) {
   })
   .then(function (data) {
     var buildTimeCurrent = self.properties.global.buildTime;
-    var buildTimeLive = new Date(data['npm-build'].timestamp);
+    var buildTimeLive = new Date(data.timestamp);
 
     // Set buildTimeCurrent to 1 hour ahead to account for the npm-build time which will ALWAYS be set to later since it happens later
     buildTimeCurrent.setHours(buildTimeCurrent.getHours() + 1);

package/_legacy/test/test.js

@@ -0,0 +1,158 @@
+const package = require('../package.json');
+const assert = require('assert');
+
+beforeEach(() => {
+});
+
+before(() => {
+});
+
+after(() => {
+});
+
+/*
+ * ============
+ *  Test Cases
+ * ============
+ */
+describe(`${package.name}`, () => {
+  const _ = require('../lib/utilities.js');
+  const lodash = require('lodash');
+
+  // Utilities
+  describe('.utilities()', () => {
+    const sample = {
+      main: {
+        true: true,
+        false: false,
+        zero: 0,
+        one: 1,
+        string: 'string',
+        stringEmpty: '',
+        object: {},
+        array: [],
+        null: null,
+        undefined: undefined,
+        nan: NaN,
+        infinity: Infinity,
+        negativeInfinity: -Infinity,
+        function: function () {},
+      }
+    }
+
+    // Normal Cases
+    describe('.get()', () => {
+      it('should return true', () => {
+        // console.log('---lodash', lodash.get(sample, 'main.true'));
+        // console.log('---_.get', _.get(sample, 'main.true'));
+        // console.log('---_.get2', _.get2(sample, 'main.true'));
+
+        assert.strictEqual(_.get(sample, 'main.true'), true);
+      });
+
+      it('should return false', () => {
+        assert.strictEqual(_.get(sample, 'main.false'), false);
+      });
+
+      it('should return 0', () => {
+        assert.strictEqual(_.get(sample, 'main.zero'), 0);
+      });
+
+      it('should return 1', () => {
+        assert.strictEqual(_.get(sample, 'main.one'), 1);
+      });
+
+      it('should return a string', () => {
+        assert.strictEqual(_.get(sample, 'main.string'), 'string');
+      });
+
+      it('should return an empty string', () => {
+        assert.strictEqual(_.get(sample, 'main.stringEmpty'), '');
+      });
+
+      it('should return an object', () => {
+        assert.deepStrictEqual(_.get(sample, 'main.object'), {});
+      });
+
+      it('should return an array', () => {
+        assert.deepStrictEqual(_.get(sample, 'main.array'), []);
+      });
+
+      it('should return null', () => {
+        assert.strictEqual(_.get(sample, 'main.null'), null);
+      });
+
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(sample, 'main.undefined'), undefined);
+      });
+
+      it('should return NaN', () => {
+        assert.strictEqual(Number.isNaN(_.get(sample, 'main.nan')), true);
+      });
+
+      it('should return Infinity', () => {
+        assert.strictEqual(_.get(sample, 'main.infinity'), Infinity);
+      });
+
+      it('should return -Infinity', () => {
+        assert.strictEqual(_.get(sample, 'main.negativeInfinity'), -Infinity);
+      });
+
+      it('should return a function', () => {
+        assert.strictEqual(typeof _.get(sample, 'main.function'), 'function');
+      });
+
+      // Non-existent
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(sample, 'main.nonexistent'), undefined);
+      });
+
+      // No path
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(sample), undefined);
+      });
+
+      // Empty path
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(sample, ''), undefined);
+      });
+
+      // Default value
+      it('should return default value', () => {
+        assert.strictEqual(_.get(sample, 'main.nonexistent', 'default'), 'default');
+      });
+
+      it('should return actual value', () => {
+        assert.strictEqual(_.get(sample, 'main.false', 'default'), false);
+      });
+
+      it('should return actual value', () => {
+        assert.strictEqual(_.get(sample, 'main.null', 'default'), null);
+      });
+
+      it('should return default value', () => {
+        assert.strictEqual(_.get(sample, 'main.undefined', 'default'), 'default');
+      });
+
+      // Non-object for object
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(undefined, 'main.true'), undefined);
+      });
+
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(null, 'main.true'), undefined);
+      });
+
+      it('should return undefined', () => {
+        assert.strictEqual(_.get(false, 'main.true'), undefined);
+      });
+
+      it('should return undefined', () => {
+        assert.strictEqual(_.get('', 'main.true'), undefined);
+      });
+
+    });
+
+  });
+
+})