npm - resonantjs - Versions diffs - 1.0.0 - Mend

resonantjs 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/.github/workflows/npm-publish.yml +32 -0
package/LICENSE +21 -0
package/README.md +122 -0
package/example.html +83 -0
package/package.json +19 -0
package/resonant.js +131 -0

package/.github/workflows/npm-publish.yml ADDED Viewed

@@ -0,0 +1,32 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+name: Node.js Package
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm ci
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2024 Andrew Murgola
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,122 @@
+# Resonant.js
+Resonant.js is an open-source lightweight JavaScript framework that enables reactive data-binding for building dynamic and responsive web applications. It simplifies creating interactive UIs by automatically updating the DOM when your data changes.
+## Features
+- **Reactive Data Binding**: Automatically synchronize your data with the UI.
+- **Dynamic List Rendering**: Easily render lists that react to data changes.
+- **Bidirectional Input Binding**: Bind HTML input fields directly to your data model.
+- **Lightweight and Easy to Integrate**: Minimal setup required to get started.
+- **Compatible with Modern Browsers**: Works seamlessly across all modern web browsers.
+## Usage
+Include resonant.js in your HTML file, and use the following example to understand how to integrate it into your web application.
+```javascript
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Resonant.js Quick Demo</title>
+    <script src="./resonant.js"></script>
+</head>
+<body>
+    <h1>Resonant.js Quick Demo</h1>
+    <!-- Display and update a single item -->
+    <div>
+        <h2>Counter</h2>
+        <p>Current count: <span res="counter"></span></p>
+        <button onclick="incrementCounter()">Increment Counter</button>
+    </div>
+    <!-- Demonstrate object property binding -->
+    <div>
+        <h2>Person Information</h2>
+        <div res="person">
+            <span res-prop="firstname"></span>
+            <span res-prop="lastname"></span>
+            <br/><br/>
+            First Name: <input type="text" res-prop="firstname">
+            Last Name: <input type="text" res-prop="lastname">
+        </div>
+    </div>
+    <!-- Demonstrate dynamic list rendering -->
+    <div>
+        <h2>Team Members</h2>
+        <ul res="team">
+            <li>
+                <span res-prop="name"></span> - <span res-prop="role"></span>
+            </li>
+        </ul>
+        <button onclick="addTeamMember()">Add Team Member</button>
+    </div>
+    <script>
+        const resonantJs = new Resonant();
+        // Initialize a counter
+        resonantJs.add("counter", 0);
+        // Initialize a single person object
+        resonantJs.add("person", {
+          firstname: "Andy",
+          lastname: "Murgola"
+        });
+        // Example of a callback
+        resonantJs.addCallback("person", exampleCallbackOutput);
+        // Initialize a list of people with dynamic properties
+        resonantJs.add("team", [
+          { name: "Alice", role: "Developer" },
+          { name: "Bob", role: "Designer" }
+        ]);
+        function incrementCounter() {
+          counter++;
+        }
+        function addTeamMember() {
+          const newMember = { name: "Charlie", role: "Product Manager" };
+          team.push(newMember);
+        }
+        function exampleCallbackOutput(result) {
+          console.log(result.firstname + " " + result.lastname);
+        }
+    </script>
+</body>
+</html>
+```
+## Features Overview
+### Core Concepts
+- **`res` and `res-prop` Attributes**: Bind HTML elements to your data model seamlessly.
+    - `res` is used to identify an overarching data model.
+    - `res-prop` links individual properties within that model to corresponding UI elements.
+- **Automatic UI Updates**: Changes to your JavaScript objects instantly reflect in the associated UI components, reducing manual DOM manipulation.
+### Advanced Features
+- **Dynamic Arrays and Objects**: Easily handle collections and nested objects to dynamically add or remove elements based on your data structures.
+- **Event Callbacks**: Register custom functions to execute whenever your data model changes.
+- **Bidirectional Input Binding**: Bind form input fields directly to your data, making two-way synchronization simple.
+### Example Applications
+- **Single-Page Applications**: Build dynamic and responsive single-page applications quickly.
+- **Admin Dashboards**: Create data-rich dashboards that reflect real-time changes in your database.
+- **Form-Based Applications**: Automate forms, surveys, and user profiles for seamless data entry.
+## Future Enhancements
+- [ ] Support for nested data structures with deep linking.
+- [ ] Advanced filtering and sorting methods for arrays.
+- [ ] Compatibility with popular JavaScript frameworks.
+## License
+Resonant.js is released under the MIT License. You can find a copy of the MIT License in the LICENSE file included with the package.

package/example.html ADDED Viewed

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Resonant.js Quick Demo</title>
+    <script src="resonant.js"></script>
+</head>
+<body>
+<h1>Resonant.js Quick Demo</h1>
+<!-- Display and update a single item -->
+<div>
+    <h2>Counter</h2>
+    <p>
+        Current count: <span res="counter"></span>
+    </p>
+    <button onclick="incrementCounter()">Increment Counter</button>
+</div>
+<!-- Demonstrate object property binding -->
+<div>
+    <h2>Person Information</h2>
+    <div res="person">
+        <span res-prop="firstname"></span>
+        <span res-prop="lastname"></span>
+        <br/>
+        <br/>
+        First Name: <input type="text" res-prop="firstname" />
+        Last Name: <input type="text" res-prop="lastname" />
+    </div>
+</div>
+<!-- Demonstrate dynamic list rendering -->
+<div>
+    <h2>Team Members</h2>
+    <ul res="team">
+        <li>
+            <span res-prop="name"></span> - <span res-prop="role"></span>
+        </li>
+    </ul>
+    <button onclick="addTeamMember()">Add Team Member</button>
+</div>
+<script>
+    const resonantJs = new Resonant();
+    // Initialize a counter
+    resonantJs.add("counter", 0);
+    function exampleCallbackOutput(result) {
+        console.log(result.firstname + " " + result.lastname);
+    }
+    // Initialize a single person object
+    resonantJs.add("person", {
+        firstname: "Andy",
+        lastname: "Murgola"
+    });
+    // Initialize a list of people with dynamic properties
+    resonantJs.add("team", [
+        { name: "Alice", role: "Developer" },
+        { name: "Bob", role: "Designer" }
+    ]);
+    // Example of a callback
+    resonantJs.addCallback("person", exampleCallbackOutput);
+    function incrementCounter() {
+        counter++;
+    }
+    function updatePersonInfo(prop, value) {
+        person[prop] = value;
+    }
+    function addTeamMember() {
+        const newMember = { name: "Charlie", role: "Product Manager" };
+        team.push(newMember);
+    }
+</script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "resonantjs",
+  "version": "1.0.0",
+  "description": "A lightweight JavaScript framework that enables reactive data-binding for building dynamic and responsive web applications. It simplifies creating interactive UIs by automatically updating the DOM when your data changes.",
+  "main": "resonant.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/amurgola/ResonantJs.git"
+  },
+  "author": "Andrew Paul Murgola (andy@murgo.la)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/amurgola/ResonantJs/issues"
+  },
+  "homepage": "https://github.com/amurgola/ResonantJs#readme",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/resonant.js ADDED Viewed

@@ -0,0 +1,131 @@
+class Resonant {
+    constructor() {
+        this.data = {};
+        this.callbacks = {};
+    }
+    add(variableName, ...values) {
+        let value;
+        if (values.length > 1) {
+            value = values;
+        } else {
+            value = values[0];
+        }
+        this._assignValueToData(variableName, value);
+        this._defineProperty(variableName);
+        this.updateElement(variableName);
+    }
+    _assignValueToData(variableName, value) {
+        if (Array.isArray(value)) {
+            this.data[variableName] = this._createArray(variableName, value);
+        } else if (typeof value === 'object') {
+            this.data[variableName] = this._createObject(variableName, value);
+        } else {
+            this.data[variableName] = value;
+        }
+    }
+    _createObject(parentName, obj) {
+        obj[Symbol('isProxy')] = true;
+        return new Proxy(obj, {
+            set: (target, property, value) => {
+                target[property] = value;
+                this.updateElement(parentName);
+                return true;
+            }
+        });
+    }
+    _createArray(variableName, arr) {
+        return new Proxy(arr, {
+            get: (target, index) => {
+                if (typeof target[index] === 'object') {
+                    target[index] = this._createObject(`${variableName}[${index}]`, target[index]);
+                }
+                return target[index];
+            },
+            set: (target, index, value) => {
+                target[index] = value;
+                this.updateElement(variableName);
+                return true;
+            }
+        });
+    }
+    _defineProperty(variableName) {
+        Object.defineProperty(window, variableName, {
+            get: () => this.data[variableName],
+            set: (newValue) => {
+                this._assignValueToData(variableName, newValue);
+                this.updateElement(variableName);
+            }
+        });
+    }
+    updateElement(variableName) {
+        const elements = document.querySelectorAll(`[res="${variableName}"]`);
+        const value = this.data[variableName];
+        elements.forEach(element => {
+            if (Array.isArray(value)) {
+                element.querySelectorAll(`[res="${variableName}"]` && "[res-rendered=true]").forEach(el => el.remove());
+                this._renderArray(variableName, element);
+            } else if (typeof value === 'object') {
+                const subElements = element.querySelectorAll(`[res-prop]`);
+                subElements.forEach(subEl => {
+                    const key = subEl.getAttribute('res-prop');
+                    if (key && key in value) {
+                        if (subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') {
+                            subEl.value = value[key];
+                            subEl.oninput = () => this.data[variableName][key] = subEl.value;
+                        } else {
+                            subEl.innerHTML = value[key];
+                        }
+                    }
+                });
+            } else {
+                element.innerHTML = value;
+            }
+        });
+        if (this.callbacks[variableName]) {
+            this.callbacks[variableName](value);
+        }
+    }
+    _renderArray(variableName, el) {
+        let template = el.cloneNode(true);
+        el.innerHTML = '';
+        if (!window[variableName + "_template"]) {
+            window[variableName + "_template"] = template;
+        } else {
+            template = window[variableName + "_template"];
+        }
+        this.data[variableName].forEach((instance) => {
+            const clonedEl = template.cloneNode(true);
+            for (let key in instance) {
+                const subEl = clonedEl.querySelector(`[res-prop="${key}"]`);
+                if (subEl) {
+                    if (subEl.tagName === 'INPUT' || subEl.tagName === 'TEXTAREA') {
+                        subEl.value = instance[key];
+                        subEl.oninput = () => instance[key] = subEl.value;
+                    } else {
+                        subEl.innerHTML = instance[key];
+                    }
+                }
+            }
+            clonedEl.setAttribute("res-rendered", true);
+            el.appendChild(clonedEl);
+        });
+    }
+    addCallback(variableName, method) {
+        this.callbacks[variableName] = method;
+    }
+}