@cocreate/plugins 1.3.0 → 1.4.1

package/.github/workflows/automated.yml

@@ -1,8 +1,10 @@
 name: Automated Workflow
+
 on:
   push:
     branches:
       - master
+
 jobs:
   about:
     runs-on: ubuntu-latest
@@ -18,27 +20,37 @@ jobs:
         with:
           direction: overwrite-github
           githubToken: "${{ secrets.GITHUB }}"
+
   release:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Required so semantic-release can trace git tags/history
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 22 # Required for the latest semantic-release plugins
-      - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v4 # Update to v4 for better Node 20+ support
-        id: semantic
-        with:
-          extra_plugins: |
-            @semantic-release/changelog
+          node-version: 22
+
+      - name: Install Semantic Release & Plugins
+        # Installs semantic-release and its plugins on the runner
+        run: |
+          npm install -g semantic-release \
+            @semantic-release/changelog \
+            @semantic-release/npm \
+            @semantic-release/github \
             @semantic-release/git
-            @semantic-release/github
+
+      - name: Run Semantic Release (Native)
+        id: semantic
+        # This will automatically pick up your export default config file in the repository root
+        run: npx semantic-release
         env:
-          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}" # Use the built-in token if possible
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
           NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+
     outputs:
       new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
-      new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
-
+      new_release_version: "${{ steps.semantic.outputs.new_release_version }}"

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.4.1](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.4.0...v1.4.1) (2026-07-17)
+
+
+### Bug Fixes
+
+* bump dependencies ([0bcc639](https://github.com/CoCreate-app/CoCreate-plugins/commit/0bcc6392a3f033f26f9d8d1145e10a6df7de7ab2))
+
+# [1.4.0](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.3.1...v1.4.0) (2026-07-17)
+
+
+### Features
+
+* enhance plugin initialization and resource preloading logic ([ee17bc1](https://github.com/CoCreate-app/CoCreate-plugins/commit/ee17bc12b47c09085cd2527ef18a6fce36f21123))
+* improve plugin processing and operator execution logic ([486faa8](https://github.com/CoCreate-app/CoCreate-plugins/commit/486faa81839a49d4958ccb75721b161102cc0168))
+* update automated workflow and release configuration for improved semantic release handling ([06e65c9](https://github.com/CoCreate-app/CoCreate-plugins/commit/06e65c9eddd29398f3bd824e295089722faf9fad))
+
+## [1.3.1](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.3.0...v1.3.1) (2026-07-11)
+
+
+### Bug Fixes
+
+* bump package versions ([3f992ea](https://github.com/CoCreate-app/CoCreate-plugins/commit/3f992ea145328efac344e4f470fe19a87d5209e9))
+* clean attribute name for method matching in processPlugin function ([7389d12](https://github.com/CoCreate-app/CoCreate-plugins/commit/7389d12bd6f4206c506456d64341ceef4b304313))
+* correct minor typos in code comments and variable names for clarity. ([7e43622](https://github.com/CoCreate-app/CoCreate-plugins/commit/7e4362289c9f51ac6673873802d5b58a7992638e))
+* demo plugin initialization syntax and remove redundant tests ([c126bc8](https://github.com/CoCreate-app/CoCreate-plugins/commit/c126bc87edfb9669ea6c8a79e13a0cd0c09a1bd3))
+* removed post install and add add packages to apprved list ([548be97](https://github.com/CoCreate-app/CoCreate-plugins/commit/548be977ba710af907ad8e95f7ebcd3a75462326))
+* semantic version handling ([7606d54](https://github.com/CoCreate-app/CoCreate-plugins/commit/7606d54cd447a3cf10c3f86d54bca1f0aa7fe1a1))
+
 # [1.3.0](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.2.1...v1.3.0) (2026-03-11)
 
 

package/demo/index.html

@@ -38,83 +38,31 @@
                 <p class="text-secondary small">This button sets multiple properties on the Toastify instance and then calls the execution method, all in order.</p>
                 <div class="live-preview flex-column">
                     <button type="button" class="btn btn-primary px-4"
-                        plugin="Toastify" 
-                        Toastify.text="Step-by-step logic works!" 
-                        Toastify.duration="4000" 
-                        Toastify.style.background="linear-gradient(to right, #00b09b, #96c93d)"
-                        Toastify.showToast()="">
+                        plugin='{
+                            "Toastify": {
+                                "text": "Hello from a single object!",
+                                "duration": 3000,
+                                "style": {
+                                    "background": "#0d6efd"
+                                }
+                            },
+                            "Toastify.showToast": []
+                        }'>
                         Trigger Sequential Toast
                     </button>
                     <div class="code-block w-100">
-                        plugin="Toastify" <br>
-                        Toastify.text="..." <br>
-                        Toastify.showToast()=""
-                    </div>
+                        plugin='{<br>
+                        &nbsp;&nbsp;"Toastify": {<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;"text": "...",<br>
+                        &nbsp;&nbsp;&nbsp;&nbsp;"duration": 3000<br>
+                        &nbsp;&nbsp;},<br>
+                        &nbsp;&nbsp;"Toastify.showToast": []<br>
+                        }'
+                    </div> 
                 </div>
             </div>
         </div>
 
-        <!-- TEST 2: JSON Object + Method Call -->
-        <div class="card">
-            <div class="card-header">2. Object-Based Initialization</div>
-            <div class="card-body">
-                <p class="text-secondary small">Initializing using a full JSON object, followed immediately by a method call.</p>
-                <div class="live-preview flex-column">
-                    <button type="button" class="btn btn-dark px-4"
-                        plugin="Toastify" 
-                        Toastify()='{"text": "JSON Object Booted!", "gravity": "bottom", "position": "left"}'
-                        Toastify.showToast()="">
-                        Trigger JSON Boot
-                    </button>
-                    <div class="code-block w-100">
-                        plugin="Toastify" <br>
-                        Toastify='{"text": "..."}' <br>
-                        $Toastify.showToast()=""
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- TEST 3: Interleaved $this and Plugin Logic -->
-        <div class="card">
-            <div class="card-header">3. Interleaved Element & Plugin Logic</div>
-            <div class="card-body">
-                <p class="text-secondary small">This test changes the button's own style using <code>$this</code> before triggering the plugin logic.</p>
-                <div class="live-preview flex-column">
-                    <button type="button" class="btn btn-outline-danger px-4"
-                        $this.style.borderRadius="0px"
-                        $this.innerText="Order Processed"
-                        plugin="Toastify"
-                        Toastify.text="Element changed first!"
-                        Toastify.showToast()>
-                        Change Me & Toast
-                    </button>
-                    <div class="code-block w-100">
-                        $this.style.borderRadius="0px" <br>
-                        plugin="Toastify" <br>
-                        Toastify.showToast()=""
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- TEST 4: Input State Manipulation -->
-        <div class="card">
-            <div class="card-header">4. Input Property Manipulation</div>
-            <div class="card-body">
-                <p class="text-secondary small">Directly setting properties on an input element on load.</p>
-                <div class="live-preview">
-                    <input type="text" class="form-control"
-                        $this.value="CoCreate Linear Engine"
-                        $this.style.border="2px solid #0d6efd"
-                        $this.placeholder="Wait for it..."
-                        plugin="Toastify"
-                        Toastify.text="Input properties applied"
-                        Toastify.duration="2000"
-                        Toastify.showToast()="">
-                </div>
-            </div>
-        </div>
 
     </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/plugins",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "CoCreate plugins",
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",
@@ -8,10 +8,9 @@
     "access": "public"
   },
   "scripts": {
-    "start": "npx webpack --config webpack.config.js",
-    "build": "npx webpack --mode=production --config webpack.config.js",
-    "dev": "npx webpack --config webpack.config.js --watch",
-    "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
+    "start": "webpack --config webpack.config.js",
+    "build": "webpack --mode=production --config webpack.config.js",
+    "dev": "webpack --config webpack.config.js --watch"
   },
   "repository": {
     "type": "git",
@@ -26,16 +25,15 @@
     "url": "https://github.com/sponsors/CoCreate-app"
   },
   "main": "./src/index.js",
+  "dependencies": {
+    "@cocreate/observer": "^1.20.0"
+  },
   "devDependencies": {
-    "css-loader": "^5.1.3",
-    "esbuild": "^0.25.2",
-    "esbuild-loader": "^4.3.0",
-    "mini-css-extract-plugin": "^1.5.0",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0",
-    "webpack-log": "^3.0.1"
+    "@cocreate/webpack": "^1.6.0"
   },
-  "dependencies": {
-    "@cocreate/observer": "^1.18.3"
+  "allowScripts": {
+    "@cocreate/observer@1.19.0": true,
+    "@cocreate/utils@1.42.2": true,
+    "@cocreate/webpack@1.4.3": true
   }
 }

package/release.config.js

@@ -10,12 +10,20 @@ module.exports = {
         changelogFile: "CHANGELOG.md",
       },
     ],
-    "@semantic-release/npm",
-    "@semantic-release/github",
+    "@semantic-release/npm", 
     [
-      "@semantic-release/git",
+      "@semantic-release/github", 
       {
+        successComment: false,
+        failTitle: false,
+      },
+    ],
+    [
+      "@semantic-release/git", 
+      {
+        // Only stage and commit the changelog and package.json
         assets: ["CHANGELOG.md", "package.json"],
+        message: "chore(release): ${nextRelease.version} [skip ci]",
       },
     ],
   ],

package/src/index.js

@@ -1,51 +1,60 @@
-import Observer from "@cocreate/observer";
-import { processOperatorsAsync } from "@cocreate/utils";
+/********************************************************************************
+ * Copyright (C) 2026 CoCreate and Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ ********************************************************************************/
 
-/**
- * @typedef {Object} PluginDefinition
- * @property {Array<string|Object>} [js] - List of JS files to load.
- * @property {Array<string>} [css] - List of CSS files to load.
- */
+import Observer from "@cocreate/observer";
+import { processOperators } from "./operators.js";
 
-// --- CONFIGURATION ---
 const plugins = {};
-
-// --- CORE ENGINE ---
 const scriptCache = new Map();
 const cssMarker = typeof document !== 'undefined' ? document.querySelector('link[plugins]') : null;
 
 /**
- * Global Initialization Function.
+ * Initializes plugins on a collection of HTML elements.
+ * @param {HTMLElement|HTMLElement[]|NodeList} elements 
  */
-function init(elements) {
+export function init(elements) {
     if (!elements) return;
-    let collection = (elements instanceof HTMLElement || elements instanceof Element) ? [elements] : Array.from(elements || []);
+    const collection = (elements instanceof HTMLElement || elements instanceof Element) 
+        ? [elements] 
+        : Array.from(elements);
+    
     collection.forEach(el => {
-        if (el && typeof el.getAttribute === 'function') processPlugin(el);
+        if (el) {
+            processPlugin(el);
+        }
     });
 }
 
-/**
- * Processes resources and executes attributes in strict DOM order.
- * The attribute list IS the script. We iterate once and execute everything in sequence.
- */
-async function processPlugin(el) {
-    const rawAttr = el.getAttribute("plugin");
-    const pluginNames = rawAttr ? rawAttr.split(',').map(s => s.trim()) : [];
-    
-    // 1. RESOURCE PRE-LOADING
+async function preloadResources(pluginNames) {
     for (const name of pluginNames) {
         const pluginDef = plugins[name];
-
         if (pluginDef && !window[name]) {
-            if (pluginDef.css) pluginDef.css.forEach(href => {
-                if (!document.querySelector(`link[href="${href}"]`)) {
-                    const link = document.createElement("link");
-                    link.rel = "stylesheet"; link.href = href;
-                    if (cssMarker) cssMarker.parentNode.insertBefore(link, cssMarker);
-                    else document.head.appendChild(link);
-                }
-            });
+            if (pluginDef.css) {
+                pluginDef.css.forEach(href => {
+                    if (!document.querySelector(`link[href="${href}"]`)) {
+                        const link = document.createElement("link");
+                        link.rel = "stylesheet"; 
+                        link.href = href;
+                        if (cssMarker) cssMarker.parentNode.insertBefore(link, cssMarker);
+                        else document.head.appendChild(link);
+                    }
+                });
+            }
 
             if (pluginDef.js) {
                 for (const item of pluginDef.js) {
@@ -70,162 +79,161 @@ async function processPlugin(el) {
             }
         }
     }
+}
 
-    // 2. LINEAR ATTRIBUTE SCRIPT EXECUTION
-    const attributes = Array.from(el.attributes);
-    for (let i = 0; i < attributes.length; i++) {
-        const attr = attributes[i];
-        const attrName = attr.name;
-        const attrLower = attrName.toLowerCase();
-
-        const isDirectThis = attrName.startsWith('$this.');
-        let cleanAttrName = attrLower;
-        if (isDirectThis) {
-            cleanAttrName = attrLower.substring(6); // Strip '$this.' for plugin matching
+async function processPlugin(el) {
+    if (!el.attributes) return;
+
+    // Direct attributes collection map lookup to avoid binding/context prototype errors
+    const pluginAttrNode = el.attributes['plugin'] || el.attributes.getNamedItem?.('plugin');
+    const rawPluginAttr = pluginAttrNode?.value?.trim();
+    if (!rawPluginAttr) return;
+
+    const context = {
+        element: el,
+        this: el,
+        plugin: null,  // Tracks active sibling plugin instance
+        data: { ...el.dataset },
+        event: {},
+        crud: window.CoCreate?.crud || null
+    };
+
+    try {
+        let configs = [];
+        
+        // Unified Direct Parser: Pure JSON parsing with simple zero-argument fallback
+        if (rawPluginAttr.startsWith('{') || rawPluginAttr.startsWith('[')) {
+            const parsedConfig = JSON.parse(rawPluginAttr);
+            configs = Array.isArray(parsedConfig) ? parsedConfig : [parsedConfig];
+        } else {
+            // Symmetrical Fallback: Plain strings mapped straight to constructor blocks
+            configs = [{ [rawPluginAttr]: [] }];
         }
+        
+        const targetPlugins = new Set();
+        configs.forEach(conf => {
+            Object.keys(conf).forEach(k => {
+                if (!k.startsWith('$')) {
+                    targetPlugins.add(k.split('.')[0]);
+                }
+            });
+        });
+        
+        await preloadResources(Array.from(targetPlugins));
 
-        // Router: Find if this matches a listed plugin
-        const activePluginName = pluginNames.find(p => cleanAttrName === p.toLowerCase() || cleanAttrName.startsWith(p.toLowerCase() + '.'));
-
-        if (!activePluginName && !isDirectThis) continue;
+        // Execute each configuration block sequentially
+        for (const configBlock of configs) {
+            await executeConfigBlock(context, configBlock);
+        }
+    } catch (err) {
+        console.error("[Plugin System] Failed to parse and execute plugin configuration:", err, rawPluginAttr);
+    }
+}
 
-        try {
-            let val = attr.value.trim();
-            if (val === "") val = "true";
+function instantiatePlugin(ConstructorFunc, argsArray) {
+    if (typeof ConstructorFunc !== 'function') return ConstructorFunc;
+    
+    // Check standard ES6 class structure
+    const isEs6Class = /^\s*class\s+/.test(ConstructorFunc.toString());
+    
+    if (isEs6Class) {
+        return new ConstructorFunc(...argsArray);
+    }
+    
+    try {
+        // Fallback Step A: Attempt standard function invocation (e.g. particlesJS)
+        return ConstructorFunc(...argsArray);
+    } catch (err) {
+        // Fallback Step B: If invocation throws constructor error (e.g. Babel transpiled ES5 classes)
+        if (err instanceof TypeError) {
+            return new ConstructorFunc(...argsArray);
+        }
+        throw err;
+    }
+}
 
-            // BOOTSTRAPPING (Initialize on First Sight via Operator Engine)
-            let existingInstance = activePluginName && el[activePluginName];
+async function executeConfigBlock(context, configBlock) {
+    for (const [key, value] of Object.entries(configBlock)) {
+        // 1. If key is an operator, process it natively via AST engine
+        if (key.startsWith("$")) {
+            await processOperators(context, { [key]: value });
+            continue;
+        }
 
-            if (activePluginName && !existingInstance) {
-                const initVal = (cleanAttrName === activePluginName.toLowerCase()) ? val : null;
-                
-                let safeInit = initVal;
-                if (initVal) {
-                    if (!initVal.includes('$') && isNaN(initVal) && initVal !== 'true' && initVal !== 'false' && initVal !== 'null') {
-                        if (!initVal.startsWith("'") && !initVal.startsWith('"')) safeInit = `'${initVal}'`;
-                    }
-                }
-                
-                // Temporarily expose the library to the element so processOperatorsAsync can find and execute it natively
-                if (window[activePluginName]) {
-                    el[activePluginName] = window[activePluginName];
-                }
+        // 2. Intercept standard lifecycle methods to bind them directly as functions on the Element
+        if (["getValue", "setValue", "read", "write"].includes(key)) {
+            context.element[key] = async function(...args) {
+                const localContext = {
+                    ...context,
+                    event: { ...context.event, value: args[0], arguments: args }
+                };
+                return await processOperators(localContext, value);
+            };
+            continue;
+        }
 
-                // Construct initialization string (e.g., $Toastify(...) )
-                let initExpr = safeInit ? `$${activePluginName}(${safeInit})` : `$${activePluginName}()`;
-                
-                // Await initialization from the operator engine
-                const initResult = await processOperatorsAsync(el, initExpr, [], null, [], new Map([["$this", el]]));
-                
-                if (initResult !== undefined && initResult !== null && initResult !== "") {
-                    // Overwrite the temporary library function with the returned instance
-                    el[activePluginName] = initResult;
-                    existingInstance = initResult;
-                }
+        const parts = key.split('.');
+        const rootPluginName = parts[0];
 
-                // If this attribute was the base initializer, we're done processing it
-                if (cleanAttrName === activePluginName.toLowerCase()) {
-                    continue;
-                }
+        // 3. Resolve target from window object using dot notation
+        let ConstructorFunc = window;
+        for (const part of parts) {
+            if (ConstructorFunc) {
+                ConstructorFunc = ConstructorFunc[part];
             }
+        }
 
-            // --- CASE-SENSITIVE PATH RESOLUTION ---
-            // Reconstruct the attribute path with correct casing from the instance/element deeply
-            let keyParts = attrName.split('.');
-            let resolvedParts = [];
-            let pointer = null;
-
-            if (isDirectThis) {
-                resolvedParts.push('$this');
-                pointer = el;
-            } else {
-                resolvedParts.push(activePluginName);
-                pointer = existingInstance || el; // Fallback to element if instance isn't populated
+        // 4. If it's a function, treat it as a constructor to initialize the plugin
+        if (typeof ConstructorFunc === 'function' && !context.element[rootPluginName]) {
+            let constructorArgs = [];
+            if (value !== undefined) {
+                const evaluatedArgs = await processOperators(context, value);
+                constructorArgs = Array.isArray(evaluatedArgs) ? evaluatedArgs : [evaluatedArgs];
             }
 
-            for (let j = 1; j < keyParts.length; j++) {
-                let part = keyParts[j];
-                let isMethod = part.endsWith('()');
-                let cleanPart = part.replace('()', '');
-                let matchedKey = part;
-
-                if (pointer != null) {
-                    if (pointer[cleanPart] !== undefined) {
-                        matchedKey = part;
-                    } else {
-                        let lower = cleanPart.toLowerCase();
-                        let realKey = null;
-
-                        let currentObj = pointer;
-                        while (currentObj) {
-                            let props = Object.getOwnPropertyNames(currentObj);
-                            let found = props.find(p => p.toLowerCase() === lower);
-                            if (found) {
-                                realKey = found;
-                                break;
-                            }
-                            currentObj = Object.getPrototypeOf(currentObj);
-                        }
+            // Create the plugin instance and bind it directly to the element under its root name
+            const instance = instantiatePlugin(ConstructorFunc, constructorArgs);
+            context.element[rootPluginName] = instance;
+            context.plugin = instance; // Update context.plugin reference for sibling method chaining
+            continue;
+        }
 
-                        if (realKey) {
-                            matchedKey = isMethod ? realKey + '()' : realKey;
-                        }
-                    }
-                    pointer = pointer[matchedKey.replace('()', '')];
-                }
-                resolvedParts.push(matchedKey);
-            }
-            
-            let correctedAttrName = resolvedParts.join('.');
-
-            // --- DECORATION & EXECUTION ---
-            // Plugins must be prefixed with $ for the operator engine's property resolution
-            let prefixedAttrName = correctedAttrName;
-            if (activePluginName && !isDirectThis) {
-                prefixedAttrName = "$" + correctedAttrName;
+        // 5. Explicit Instance Method Chaining (e.g. "FullCalendar.render")
+        let methodTarget = context.element[rootPluginName];
+        if (methodTarget && parts.length > 1) {
+            let method = methodTarget;
+            let parent = methodTarget;
+            for (let i = 1; i < parts.length; i++) {
+                parent = method;
+                if (method) method = method[parts[i]];
             }
-
-            const isMethodCall = correctedAttrName.includes('(') || correctedAttrName.endsWith('()');
-            let expression = "";
-
-            if (isMethodCall) {
-                expression = prefixedAttrName;
-            } else {
-                let safeValue = val;
-                if (!val.includes('$') && isNaN(val) && val !== 'true' && val !== 'false' && val !== 'null') {
-                    if (!val.startsWith("'") && !val.startsWith('"')) safeValue = `'${val}'`;
+            if (typeof method === 'function') {
+                let methodArgs = [];
+                if (value !== undefined) {
+                    const evaluatedArgs = await processOperators(context, value);
+                    methodArgs = Array.isArray(evaluatedArgs) ? evaluatedArgs : [evaluatedArgs];
                 }
-                expression = `${prefixedAttrName} = ${safeValue}`;
-            }
-
-            // Execute using the existing processOperatorsAsync system.
-            const result = await processOperatorsAsync(el, expression, [], null, [], new Map([["$this", el]]));
-
-            // CAPTURE & ASSIGN: If the element still lacks the instance, save the result of the execution to the element
-            if (activePluginName && !el[activePluginName] && result !== undefined && result !== null && result !== "") {
-                el[activePluginName] = result;
+                await method.apply(parent, methodArgs);
+                continue;
             }
-
-        } catch (e) {
-            console.warn(`[Plugin System] Sequential Execution Error (${attrName}):`, e);
         }
-    }
 
-    // 3. FALLBACK BOOT
-    for (const name of pluginNames) {
-        if (!el[name]) {
-            if (window[name]) {
-                el[name] = window[name];
-            }
-            const initResult = await processOperatorsAsync(el, `$${name}()`, [], null, [], new Map([["$this", el]]));
-            if (initResult !== undefined && initResult !== null && initResult !== "") {
-                el[name] = initResult;
+        // 6. Sibling Method Chaining (e.g. "render" directly on context.plugin)
+        if (context.plugin && typeof context.plugin[key] === 'function') {
+            let methodArgs = [];
+            if (value !== undefined) {
+                const evaluatedArgs = await processOperators(context, value);
+                methodArgs = Array.isArray(evaluatedArgs) ? evaluatedArgs : [evaluatedArgs];
             }
+            await context.plugin[key].apply(context.plugin, methodArgs);
+            continue;
         }
+
+        // 7. Fallback: Process operators or generic actions on properties
+        await processOperators(context, { [key]: value });
     }
 }
 
-// Global Startup
 if (typeof document !== 'undefined') {
     const selector = "[plugin]";
     Observer.init({
@@ -243,6 +251,4 @@ if (typeof document !== 'undefined') {
         })
         .catch(() => {})
         .finally(() => init(document.querySelectorAll(selector)));
-}
-
-export default { init, plugins };
+}

package/src/operators.js

@@ -0,0 +1,293 @@
+/********************************************************************************
+ * Copyright (C) 2026 CoCreate and Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ ********************************************************************************/
+
+import { getValueFromObject, queryElements } from "@cocreate/utils";
+
+const IsomorphicGlobals = {
+    Math,
+    Number,
+    String,
+    Boolean,
+    Date,
+    JSON,
+    Array,
+    Object,
+    parseInt,
+    parseFloat,
+    encodeURIComponent,
+    decodeURIComponent,
+    btoa: (str) => {
+        if (typeof btoa === 'function') return btoa(String(str));
+        return Buffer.from(String(str)).toString("base64");
+    },
+    atob: (b64) => {
+        if (typeof atob === 'function') return atob(b64);
+        return Buffer.from(String(b64), "base64").toString("utf-8");
+    },
+    concat: (...args) => args.flat().map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg).join(''),
+    
+    // Core Asynchronous Flow Control Operators
+    await: {
+        all: async (promises) => Promise.all(promises),
+        any: async (promises) => Promise.any(promises),
+        race: async (promises) => Promise.race(promises),
+        allSettled: async (promises) => Promise.allSettled(promises),
+        delay: (ms) => new Promise(resolve => setTimeout(resolve, Number(ms) || 0))
+    }
+};
+
+const BrowserGlobals = {
+    get $organization_id() { return typeof localStorage !== 'undefined' ? localStorage.getItem("organization_id") : ""; },
+    get $user_id() { return typeof localStorage !== 'undefined' ? localStorage.getItem("user_id") : ""; },
+    get $client_id() { return typeof localStorage !== 'undefined' ? localStorage.getItem("clientId") : ""; },
+    get $session_id() { return typeof localStorage !== 'undefined' ? localStorage.getItem("session_id") : ""; },
+    get $innerWidth() { return typeof window !== 'undefined' ? window.innerWidth : 0; },
+    get $innerHeight() { return typeof window !== 'undefined' ? window.innerHeight : 0; },
+    get $href() { return typeof window !== 'undefined' ? window.location.href.replace(/\/$/, "") : ""; },
+    get $origin() { return typeof window !== 'undefined' ? window.location.origin : ""; },
+    get $protocol() { return typeof window !== 'undefined' ? window.location.protocol : ""; },
+    get $hostname() { return typeof window !== 'undefined' ? window.location.hostname : ""; },
+    get $host() { return typeof window !== 'undefined' ? window.location.host : ""; },
+    get $port() { return typeof window !== 'undefined' ? window.location.port : ""; },
+    get $pathname() { return typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, "") : ""; },
+    get $hash() { return typeof window !== 'undefined' ? window.location.hash : ""; },
+    get $subdomain() {
+        if (typeof window === 'undefined') return "";
+        const parts = window.location.hostname.split('.');
+        return parts.length > 2 ? parts[0] : "";
+    },
+    get $relativePath() {
+        if (typeof window === 'undefined') return "./";
+        const currentPath = window.location.pathname.replace(/\/[^\/]*$/, ""); 
+        const depth = currentPath.split("/").filter(Boolean).length;
+        return depth > 0 ? "../".repeat(depth) : "./";
+    },
+    get $path() {
+        if (typeof window === 'undefined') return "";
+        let path = window.location.pathname;
+        if (path.split("/").pop().includes(".")) path = path.replace(/\/[^\/]+$/, "/");
+        return path === "/" ? "" : path;
+    },
+    $true: () => true,
+    $false: () => false,
+    $parse: (value = "") => {
+        try { return JSON.parse(value); } catch (e) { return value; }
+    },
+    $query: function(selector) {
+        if (typeof document === 'undefined') return undefined;
+        let element = this?.element || null;
+        if (typeof selector === 'string') {
+            selector = selector.trim().replace(/^['"]|['"]$/g, '');
+        }
+        try {
+            const results = queryElements({ element, selector });
+            return results && results.length > 0 ? results[0] : undefined;
+        } catch (error) {
+            console.warn(`[AST Engine] Invalid $query selector => "${selector}"`, error);
+            return undefined;
+        }
+    },
+    $queryAll: function(selector) {
+        if (typeof document === 'undefined') return [];
+        let element = this?.element || null;
+        if (typeof selector === 'string') {
+            selector = selector.trim().replace(/^['"]|['"]$/g, '');
+            if (selector.includes('$document')) return [];
+        }
+        try {
+            const results = queryElements({ element, selector });
+            return results ? Array.from(results) : [];
+        } catch (error) {
+            console.warn(`[AST Engine] Invalid $queryAll selector => "${selector}"`, error);
+            return [];
+        }
+    }
+};
+
+const getSandboxScope = (context) => {
+    const isBrowser = typeof window !== 'undefined';
+    return {
+        ...IsomorphicGlobals,
+        ...(isBrowser ? BrowserGlobals : {}),
+        ...context
+    };
+};
+
+/**
+ * Main recursive traversal loop of the AST Compiler.
+ * Analyzes object structures from the inside-out to resolve nested expression boundaries.
+ */
+export async function processOperators(context, execute) {
+    if (execute instanceof Promise) {
+        execute = await execute;
+    }
+
+    if (execute === null || execute === undefined) {
+        return execute;
+    }
+
+    if (Array.isArray(execute)) {
+        const evaluatedArray = [];
+        for (let i = 0; i < execute.length; i++) {
+            evaluatedArray[i] = await processOperators(context, execute[i]);
+        }
+        return evaluatedArray;
+    } else if (typeof execute === "object") {
+        const keys = Object.keys(execute);
+        
+        // Match operators starting with "$" except raw database storage parameters
+        const operatorKey = keys.find(k => k.startsWith("$") && !["$array", "$filter", "$storage", "$database"].includes(k));
+        
+        if (operatorKey && keys.length === 1) {
+            return await executeOperator(context, operatorKey, execute[operatorKey]);
+        }
+
+        const evaluatedObject = {};
+        for (const key of keys) {
+            let finalKey = key;
+
+            if (key.startsWith("$") && !["$array", "$filter", "$storage", "$database"].includes(key)) {
+                const resolvedKey = await executeOperator(context, key);
+                if (typeof resolvedKey === "string" || typeof resolvedKey === "number") {
+                    finalKey = String(resolvedKey);
+                }
+            }
+
+            let finalValue = execute[key];
+            if (typeof finalValue === "string" && finalValue.startsWith("$") && !["$array", "$filter", "$storage", "$database"].includes(finalValue)) {
+                finalValue = await executeOperator(context, finalValue);
+            } else if (Array.isArray(finalValue) || (typeof finalValue === "object" && finalValue !== null)) {
+                finalValue = await processOperators(context, finalValue);
+            }
+
+            evaluatedObject[finalKey] = finalValue;
+        }
+        
+        return evaluatedObject;
+    } else if (typeof execute === "string" && execute.startsWith("$") && !["$array", "$filter", "$storage", "$database"].includes(execute)) {
+        return await executeOperator(context, execute);
+    }
+
+    return execute;
+}
+
+async function executeOperator(context, operator, args) {
+    const localContext = {
+        state: {},
+        ...context
+    };
+
+    // Evaluate core context property mappings
+    if (args === undefined) {
+        if (operator.startsWith("$state.")) {
+            return getValueFromObject(localContext.state, operator.substring(7));
+        } else if (operator === "$state") {
+            return localContext.state;
+        } else if (operator.startsWith("$data.")) {
+            return getValueFromObject(localContext.data, operator.substring(6));
+        } else if (operator === "$data") {
+            return localContext.data;
+        } else if (operator.startsWith("$event.")) {
+            return getValueFromObject(localContext.event, operator.substring(7));
+        } else if (operator === "$event") {
+            return localContext.event;
+        } else if (operator.startsWith("$request.")) {
+            return getValueFromObject(localContext.request, operator.substring(9));
+        } else if (operator === "$request") {
+            return localContext.request;
+        } else if (operator.startsWith("$header.")) {
+            const headerKey = operator.substring(8).toLowerCase();
+            return localContext.request?.headers?.[headerKey];
+        } else if (operator === "$rawBody") {
+            return localContext.rawBody;
+        } else if (operator === "$this" || operator === "$element") {
+            return localContext.element;
+        } else if (operator === "$plugin" || operator === "$instance") {
+            return localContext.plugin;
+        } else if (operator === "$value") {
+            const el = localContext.element;
+            return el && typeof el.getValue === 'function' ? el.getValue() : "";
+        }
+    }
+
+    let isExplicitNew = false;
+    let cleanPath = operator.startsWith("$") ? operator.substring(1) : operator;
+    
+    if (cleanPath.startsWith("new.")) {
+        isExplicitNew = true;
+        cleanPath = cleanPath.substring(4);
+    }
+    
+    const parts = cleanPath.split('.');
+    const SandboxScope = getSandboxScope(localContext);
+
+    let target = SandboxScope[parts[0]];
+    let parentContext = SandboxScope;
+
+    if (target === undefined && localContext.element) {
+        target = localContext.element[parts[0]];
+        parentContext = localContext.element;
+    }
+
+    if (target !== undefined) {
+        for (let i = 1; i < parts.length; i++) {
+            parentContext = target;
+            target = target[parts[i]];
+            if (target === undefined) break;
+        }
+
+        if (typeof target === 'function') {
+            let argsArray = [];
+            if (args !== undefined) {
+                if (typeof args === 'object' && args !== null && (args.$args !== undefined || args.$arguments !== undefined)) {
+                    const explicitArgs = args.$args !== undefined ? args.$args : args.$arguments;
+                    
+                    if (Array.isArray(explicitArgs)) {
+                        argsArray = [];
+                        for (let i = 0; i < explicitArgs.length; i++) {
+                            argsArray.push(await processOperators(localContext, explicitArgs[i]));
+                        }
+                    } else {
+                        const evaluatedSingle = await processOperators(localContext, explicitArgs);
+                        argsArray = [evaluatedSingle];
+                    }
+                } else {
+                    const evaluatedSingle = await processOperators(localContext, args);
+                    argsArray = [evaluatedSingle];
+                }
+            }
+            
+            const isEs6Class = /^\s*class\s+/.test(target.toString());
+            
+            if (isExplicitNew || isEs6Class) {
+                return new target(...argsArray);
+            }
+
+            return await target.apply(parentContext, argsArray);
+        } else if (target !== undefined) {
+            return target;
+        }
+    }
+
+    return operator;
+}
+
+export { processOperators as processOperatorsAsync };
+export const customOperators = {}; 
+
+export default processOperators;