@cocreate/plugins 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.0.3...v1.1.0) (2026-01-15)
+
+
+### Features
+
+* add marker to indicate where css files will be inserted ([6b4b030](https://github.com/CoCreate-app/CoCreate-plugins/commit/6b4b0301acdabff19b8cca5968cc67619e417c92))
+
+## [1.0.3](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.0.2...v1.0.3) (2025-12-26)
+
+
+### Bug Fixes
+
+* update worklow ([8976d08](https://github.com/CoCreate-app/CoCreate-plugins/commit/8976d080f8972e840ff5530d5dfb15f839e9ac5b))
+
 ## [1.0.2](https://github.com/CoCreate-app/CoCreate-plugins/compare/v1.0.1...v1.0.2) (2025-12-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/plugins",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "CoCreate plugins",
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",

package/src/index.js

@@ -6,17 +6,14 @@ const plugins = {
     Toastify: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/toastify-js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"]
-        // attribute prefix: toastify-
     },
     Choices: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"]
-        // attribute prefix: choices-
     },
     flatpickr: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/flatpickr", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"]
-        // attribute prefix: flatpickr-
     },
     Quill: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.min.js", crossOrigin: "anonymous" }],
@@ -25,47 +22,37 @@ const plugins = {
             "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css",
             "https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.bubble.css"
         ]
-        // attribute prefix: quill-
     },
     ClassicEditor: {
         js: [{ src: "https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js", crossOrigin: "anonymous" }]
-        // attribute prefix: classiceditor-
     },
     Dropzone: {
         js: [{ src: "https://unpkg.com/dropzone@5/dist/min/dropzone.min.js", crossOrigin: "anonymous" }],
         css: ["https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"]
-        // attribute prefix: dropzone-
     },
     SimpleBar: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css"]
-        // attribute prefix: simplebar-
     },
     GLightbox: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css"]
-        // attribute prefix: glightbox-
     },
     FgEmojiPicker: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/fg-emoji-picker/fgEmojiPicker.js", crossOrigin: "anonymous" }]
-        // attribute prefix: fgemojipicker-
     },
     bootstrap: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: bootstrap-
     },
     Waves: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/node-waves/dist/waves.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/node-waves/dist/waves.min.css"]
-        // attribute prefix: waves-
     },
     feather: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: feather-
     },
     ApexCharts: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/apexcharts", crossOrigin: "anonymous" }]
-        // attribute prefix: apexcharts-
     },
     jsVectorMap: {
         js: [
@@ -73,41 +60,33 @@ const plugins = {
             { src: "https://cdn.jsdelivr.net/npm/jsvectormap/dist/maps/world.js", crossOrigin: "anonymous" }
         ],
         css: ["https://cdn.jsdelivr.net/npm/jsvectormap/dist/css/jsvectormap.min.css"]
-        // attribute prefix: jsvectormap-
     },
     Swiper: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"]
-        // attribute prefix: swiper-
     },
     List: {
         js: [
             { src: "https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js", crossOrigin: "anonymous" },
             { src: "https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js", crossOrigin: "anonymous" }
         ]
-        // attribute prefix: list-
     },
     Swal: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/sweetalert2@11", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"]
-        // attribute prefix: swal-
     },
     FullCalendar: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: fullcalendar-
     },
     Cleave: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/cleave.js/dist/cleave.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: cleave-
     },
     noUiSlider: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/nouislider/dist/nouislider.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/nouislider/dist/nouislider.min.css"]
-        // attribute prefix: nouislider-
     },
     wNumb: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/wnumb/wNumb.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: wnumb-
     },
     Grid: {
         js: [
@@ -115,7 +94,6 @@ const plugins = {
             { src: "https://unpkg.com/gridjs/plugins/selection/dist/selection.umd.js", crossOrigin: "anonymous" }
         ],
         css: ["https://unpkg.com/gridjs/dist/theme/mermaid.min.css"]
-        // attribute prefix: grid-
     },
     FilePond: {
         js: [
@@ -129,83 +107,74 @@ const plugins = {
             "https://unpkg.com/filepond/dist/filepond.min.css",
             "https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
         ]
-        // attribute prefix: filepond-
     },
     Prism: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/prismjs/prism.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/prismjs/themes/prism.min.css"]
-        // attribute prefix: prism-
     },
     Isotope: {
         js: [{ src: "https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: isotope-
     },
     particlesJS: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: particlesjs-
     },
     dragula: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/dragula/dist/dragula.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/dragula/dist/dragula.min.css"]
-        // attribute prefix: dragula-
     },
     DomAutoscroller: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/dom-autoscroller", crossOrigin: "anonymous" }]
-        // attribute prefix: domautoscroller-
     },
     Card: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/card/dist/card.js", crossOrigin: "anonymous" }]
-        // attribute prefix: card-
     },
     Chart: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/chart.js", crossOrigin: "anonymous" }]
-        // attribute prefix: chart-
     },
     echarts: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: echarts-
     },
     Multi: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/multi.js/dist/multi.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/multi.js/dist/multi.min.css"]
-        // attribute prefix: multi-
     },
     autoComplete: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/css/autoComplete.01.min.css"]
-        // attribute prefix: autocomplete-
     },
     Pickr: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"]
-        // attribute prefix: pickr-
     },
     Shepherd: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/shepherd.js/dist/js/shepherd.min.js", crossOrigin: "anonymous" }],
         css: ["https://cdn.jsdelivr.net/npm/shepherd.js/dist/css/shepherd.css"]
-        // attribute prefix: shepherd-
     },
     GMaps: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/gmaps/gmaps.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: gmaps-
     },
     L: {
         js: [{ src: "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js", crossOrigin: "anonymous" }],
         css: ["https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"]
-        // attribute prefix: l-
     },
     Masonry: {
         js: [{ src: "https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js", crossOrigin: "anonymous" }]
-        // attribute prefix: masonry-
     },
     Rater: {
         js: [{ src: "https://cdn.jsdelivr.net/npm/rater-js/index.js", crossOrigin: "anonymous" }]
-        // attribute prefix: rater-
+    },
+    Anime: {
+        js: [{ src: "https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js", crossOrigin: "anonymous" }]
     }
 };
 
 // --- CORE ENGINE ---
 
+// Global Cache for script promises to prevent race conditions and duplicate loads
+const scriptCache = new Map();
+// Cache the CSS marker once on load
+const cssMarker = typeof document !== 'undefined' ? document.querySelector('link[plugins]') : null;
+
 /**
  * Global Initialization Function
  * Processes one or more elements to attach plugins.
@@ -214,323 +183,219 @@ const plugins = {
 export function init(elements) {
     if (!elements) return;
 
-    // 1. Detect Type & Normalize to Array
-    // Normalize string handling (removed), Element, NodeList, HTMLCollection, Array
     let collection = [];
-    
     if (elements instanceof HTMLElement || elements instanceof Element) {
         collection = [elements];
     } else if (elements.length !== undefined && typeof elements !== 'function') {
-        // Handle Array-like objects (NodeList, HTMLCollection, Array)
         collection = Array.from(elements);
     } else {
-        // Fallback for single object that isn't element (unlikely given spec, but safe)
         collection = [elements];
     }
 
-    // 2. Iterate and Process
     collection.forEach(el => {
-        // Ensure valid element before processing
         if (el && typeof el.getAttribute === 'function') {
             processPlugin(el);
         }
     });
 }
 
-// Auto-Init on load
-if (typeof document !== 'undefined') {
-    document.addEventListener('DOMContentLoaded', () => {
-        init(document.querySelectorAll("[plugin]"));
-    });
-}
-
 async function processPlugin(el) {
     const rawAttr = el.getAttribute("plugin");
     if (!rawAttr) return;
 
-    const pluginName = rawAttr.split(',')[0].trim();
+    const pluginNames = rawAttr.split(',').map(s => s.trim());
     
-    // SECURITY CHECK:
-    // Look up the definition in our hardcoded allowlist.
-    const pluginDef = plugins[pluginName];
-
-    if (pluginDef) {
-            console.log(`[Plugin System] Loading ${pluginName}...`);
+    for (const pluginName of pluginNames) {
+        const pluginDef = plugins[pluginName];
+        if (!pluginDef) continue;
 
-            // Load CSS
-            if(pluginDef.css) pluginDef.css.forEach(href => {
-                if (!document.querySelector(`link[href="${href}"]`)) {
+        // Load CSS
+        if (pluginDef.css) pluginDef.css.forEach(href => {
+            if (!document.querySelector(`link[href="${href}"]`)) {
                 const link = document.createElement("link");
-                link.rel="stylesheet"; link.href=href; document.head.appendChild(link);
+                link.rel = "stylesheet"; 
+                link.href = href;
+                
+                // CSS INJECTION STRATEGY:
+                // 1. Priority: Check for a specific marker element <link plugin> 
+                //    (Cached globally in cssMarker)
+                
+                if (cssMarker) {
+                    // Insert before the marker
+                    cssMarker.parentNode.insertBefore(link, cssMarker);
+                } else {
+                    // 2. Fallback: Prepend before existing CSS
+                    // To allow custom CSS to easily override plugin defaults, we must ensure 
+                    // plugin CSS loads BEFORE user CSS.
+                    const firstStyle = document.head.querySelector('link[rel="stylesheet"], style');
+                    
+                    if (firstStyle) {
+                        document.head.insertBefore(link, firstStyle);
+                    } else {
+                        // If no CSS exists yet, appending is safe
+                        document.head.appendChild(link);
+                    }
                 }
-            });
-
-            // Load JS with Integrity Checks
-            if(pluginDef.js) {
-                for(const item of pluginDef.js) {
-                    const src = typeof item === 'string' ? item : item.src;
-                    const integrity = typeof item === 'object' ? item.integrity : null;
-                    const crossOrigin = typeof item === 'object' ? item.crossOrigin : null;
-
-                    if (document.querySelector(`script[src="${src}"]`)) continue;
-
-                    await new Promise((resolve, reject) => {
-                        const s = document.createElement("script");
-                        s.src = src;
-                        if (integrity) {
-                            s.integrity = integrity;
-                            s.crossOrigin = crossOrigin || "anonymous";
+            }
+        });
+
+        // Load JS with Promise Cache
+        if (pluginDef.js) {
+            for (const item of pluginDef.js) {
+                const src = typeof item === 'string' ? item : item.src;
+                const integrity = typeof item === 'object' ? item.integrity : null;
+                const crossOrigin = typeof item === 'object' ? item.crossOrigin : null;
+
+                if (!scriptCache.has(src)) {
+                    const scriptPromise = new Promise((resolve, reject) => {
+                        // Check if already in DOM (manual load)
+                        const existing = document.querySelector(`script[src="${src}"]`);
+                        if (existing) {
+                            if (existing.dataset.loaded === "true") {
+                                resolve();
+                            } else {
+                                const prevOnload = existing.onload;
+                                existing.onload = () => {
+                                    if (prevOnload) prevOnload();
+                                    existing.dataset.loaded = "true";
+                                    resolve();
+                                };
+                                existing.onerror = reject;
+                            }
+                        } else {
+                            const s = document.createElement("script");
+                            s.src = src;
+                            if (integrity) {
+                                s.integrity = integrity;
+                                s.crossOrigin = crossOrigin || "anonymous";
+                            }
+                            s.onload = () => {
+                                s.dataset.loaded = "true";
+                                resolve();
+                            };
+                            s.onerror = reject;
+                            document.head.appendChild(s);
                         }
-                        s.onload = resolve;
-                        s.onerror = reject;
-                        document.head.appendChild(s);
                     });
+                    scriptCache.set(src, scriptPromise);
                 }
-            }
-            
-            // Initialize after load
-            executeGenericPlugin(el, pluginName);
 
-    } else {
-        console.warn(`[Plugin System] Blocked: Plugin "${pluginName}" is not in the allowlist.`);
+                try {
+                    await scriptCache.get(src);
+                } catch (e) {
+                    console.error(`Failed to load script: ${src}`, e);
+                }
+            }
+        }
+        
+        executeGenericPlugin(el, pluginName);
     }
 }
 
-async function executeGenericPlugin(el, pluginName) {
-    // MODIFIED: Removed 'data-' prefix. 
-    // Now looks for attributes like `quill=""` and `quill-theme=""`.
-    const prefix = pluginName.toLowerCase();
+function executeGenericPlugin(el, name) {
+    const prefix = name.toLowerCase();
     const mainAttr = el.getAttribute(prefix);
+    let rawData;
 
-    // 1. CONFIG GATHERING
-    const config = {};
-    const attributes = Array.from(el.attributes); 
-    
-    attributes.forEach(attr => {
-        if (!attr.name.startsWith(prefix + '-')) return;
-        const key = attr.name.substring(prefix.length + 1);
-        
-        if (key.startsWith('$')) return;
+    try { 
+        rawData = JSON.parse(mainAttr);
+    } catch(e) {
+        rawData = {}; 
+    }
 
-        let val = attr.value;
-        try { val = JSON.parse(val); } catch(e) {}
+    // 1. Gather configuration from attributes
+    if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {
+        Array.from(el.attributes).forEach(attr => {
+            if (!attr.name.startsWith(prefix + '-')) return;
+            let key = attr.name.substring(prefix.length + 1);
+            if (key.startsWith('$')) key = key.substring(1);
+            let val = attr.value;
+            try { val = JSON.parse(val); } catch (e) { }
+            rawData[key] = val;
+        });
+    }
 
-        if (key.includes('-')) {
-            const parts = key.split('-');
-            let target = config;
-            for(let i=0; i<parts.length-1; i++) {
-                if (!target[parts[i]]) target[parts[i]] = {};
-                target = target[parts[i]];
-            }
-            target[parts[parts.length-1]] = val;
-        } else {
-            config[key] = val;
-        }
-    });
+    // 2. Resolve parameters (Token Resolver)
+    const resolved = processParams(el, rawData);
 
-    // 2. INSTANTIATION
-    const Constructor = window[pluginName];
-    
-    if (!Constructor) {
-        console.error(`Constructor for ${pluginName} not found on window.`);
+    const Target = window[name] || window[prefix]; 
+    if (!Target) {
+        console.error(`Constructor for ${name} not found on window.`);
         return;
     }
 
-    let instance = null;
+    let instance;
     try {
-        let args = [el, config]; 
-        if (mainAttr) {
-            try { 
-                const json = JSON.parse(mainAttr);
-                if (Array.isArray(json)) {
-                    args = processParams(el, json, config, null, pluginName);
-                }
-            } catch(e) {}
+        // 3. Determine if we call as a function (Anime) or as a Constructor (Swiper)
+        if (typeof Target === 'function' && (!Target.prototype || name === 'Anime')) {
+            instance = Target(resolved);
+        } else {
+            if (Array.isArray(resolved)) {
+                instance = new Target(...resolved);
+            } else {
+                instance = new Target(resolved);
+            }
         }
-        instance = new Constructor(...args);
-    } catch(e) {
-        console.error(`Init failed for ${pluginName}`, e);
-        return;
-    }
-
-    if (instance) el[pluginName] = instance;
-    else return;
-
-    // 3. OPERATOR PIPELINE
-    const opPipeline = [];
-    attributes.forEach(attr => {
-        if (!attr.name.startsWith(prefix + '-')) return;
-        let key = attr.name.substring(prefix.length + 1);
-        if (!key.startsWith('$')) return;
-        let val = attr.value;
-        try { val = JSON.parse(val); } catch(e) {}
-        let opName = key; 
-        opPipeline.push(opName, [val]);
-    });
-
-    if (opPipeline.length > 0) {
-        await executePipeline(el, opPipeline, pluginName, instance, config);
+        console.log(`Initialized ${name}`);
+    } catch (e) {
+        console.error(`Error initializing ${name}:`, e);
     }
+    if (instance) el[name] = instance;
 }
 
-async function executePipeline(element, pipelineArray, pluginName, currentCtx, config = {}) {
-    let parentCtx = window;
-    const instance = element[pluginName] || currentCtx; 
-
-    for (let i = 0; i < pipelineArray.length; i++) {
-        const item = pipelineArray[i];
-        if (Array.isArray(item)) continue;
-
-        if (typeof item === 'string') {
-            let opName = item;
-
-            if ((typeof currentCtx === 'undefined' || currentCtx === null) && instance) {
-                currentCtx = instance;
-            }
-
-            if (opName.toLowerCase() === '$this') {
-                const args = (i + 1 < pipelineArray.length && Array.isArray(pipelineArray[i + 1])) ? pipelineArray[i + 1] : [];
-                const mapDef = args[0]; 
-                if (Array.isArray(mapDef)) {
-                    mapDef.forEach(def => {
-                        applyMapping(element, instance, def);
-                    });
-                }
-                continue;
-            }
-
-            if (opName.startsWith('$')) {
-                if (!currentCtx) {
-                        if (element[pluginName]) currentCtx = element[pluginName];
-                        if (!currentCtx) {
-                        console.warn(`Context undefined for operator ${opName}. Skipping.`);
-                        continue;
-                        }
-                }
-
-                let cleanName = opName.substring(1); 
-                if (!cleanName.includes('.')) {
-                        cleanName = cleanName.replace(/-/g, '');
-                }
-
-                let realKey = cleanName;
-                if (!cleanName.includes('.') && currentCtx && (typeof currentCtx === 'object' || typeof currentCtx === 'function')) {
-                    try {
-                        const keys = Object.keys(currentCtx.constructor?.prototype || currentCtx); 
-                        const found = keys.find(k => k.toLowerCase() === cleanName.toLowerCase());
-                        if (found) realKey = found;
-                        else {
-                                const directFound = Object.keys(currentCtx).find(k => k.toLowerCase() === cleanName.toLowerCase());
-                                if(directFound) realKey = directFound;
-                        }
-                    } catch (e) {}
+/**
+ * Generic Parameter Processor
+ * Handles: 
+ * - $this / $this.children
+ * - $window.path.to.function(arg)
+ * - $anime.stagger(100)
+ */
+function processParams(el, params) {
+    if (typeof params === 'string' && params.startsWith('$')) {
+        try {
+            // 1. Check for Method Call: $root.path.to.func(arg)
+            const callMatch = params.match(/^\$([^.]+)\.(.+)\((.*)\)$/);
+            if (callMatch) {
+                const [_, root, path, arg] = callMatch;
+                const obj = (root === 'this') ? el : window[root];
+                
+                // If root object exists, drill down
+                if (obj) {
+                    const func = path.split('.').reduce((o, k) => (o || {})[k], obj);
+                    if (typeof func === 'function') {
+                        // Parse argument if JSON-like, else string
+                        const parsedArg = arg ? (function() { try { return JSON.parse(arg); } catch(e) { return arg; } })() : undefined;
+                        return func(parsedArg);
+                    }
                 }
-                opName = realKey;
             }
-
-            const [parent, val] = resolvePath(i === 0 ? window : currentCtx, opName);
             
-            if (typeof val === 'undefined') {
-                console.warn(`Method/Prop "${opName}" not found on context.`);
-                continue;
+            // 2. Check for Property Access: $root.path.to.prop or just $root
+            const propMatch = params.match(/^\$([^.]+)(?:\.(.+))?$/);
+            if (propMatch) {
+                const [_, root, path] = propMatch;
+                const obj = (root === 'this') ? el : window[root];
+                if (!obj) return params; // Return raw string if root not found
+                if (!path) return obj;
+                
+                const val = path.split('.').reduce((o, k) => (o || {})[k], obj);
+                // Convert HTMLCollections to Arrays
+                return (val instanceof HTMLCollection) ? Array.from(val) : val;
             }
-
-            parentCtx = parent;
-            currentCtx = val;
-
-            if (typeof currentCtx === 'function') {
-                let args = [];
-                if (i + 1 < pipelineArray.length && Array.isArray(pipelineArray[i + 1])) {
-                    args = processParams(element, pipelineArray[i + 1], config, instance, pluginName);
-                }
-
-                try {
-                    const finalArgs = (args.length === 1) ? [args[0]] : args; 
-                    try {
-                        currentCtx = await currentCtx.apply(parentCtx, finalArgs);
-                    } catch (err) {
-                        currentCtx = new currentCtx(...finalArgs);
-                        parentCtx = currentCtx;
-                    }
-                } catch(e) {
-                    console.error(`Exec error ${opName}`, e);
-                }
-            }
-        }
-    }
-    return currentCtx;
-}
-
-// --- HELPERS ---
-function applyMapping(element, instance, def) {
-    if (def.includes('=')) {
-        const [lhs, rhs] = def.split('=').map(s => s.trim());
-        const pathRaw = rhs;
-        const match = lhs.match(/^[$]?([\w\.]+)(\(\))?$/);
-        if (!match) return; 
-        const alias = match[1];
-        const isFunction = match[2] === '()'; 
-        
-        if (isFunction) {
-            element[alias] = function(val) {
-                if (arguments.length > 0) return assignDeep(instance, pathRaw, val);
-                else return resolveDeep(instance, pathRaw);
-            };
-        } else {
-            Object.defineProperty(element, alias, {
-                get: () => resolveDeep(instance, pathRaw),
-                set: (v) => assignDeep(instance, pathRaw, v),
-                configurable: true
-            });
-        }
-    } else {
-        if (typeof instance[def] === 'function') {
-            element[def] = instance[def].bind(instance);
+        } catch (e) {
+            console.warn("Failed to resolve dynamic token:", params);
         }
     }
-}
-
-function processParams(element, params, config, instance, pluginName) {
-    if (params === "$this") return element;
-    if (params === "$config") return config;
-    if (params === "$root" || params === "$instance") return instance;
-    if (typeof params === 'string' && params === `$${pluginName}`) return instance;
-    if (typeof params === 'string' && params.startsWith('$this.')) return resolveDeep(element, params.substring(6));
-    if (Array.isArray(params)) return params.map(p => processParams(element, p, config, instance, pluginName));
+    
+    if (Array.isArray(params)) return params.map(p => processParams(el, p));
     if (typeof params === 'object' && params !== null) {
         const res = {};
-        for(let k in params) res[k] = processParams(element, params[k], config, instance, pluginName);
+        for (let k in params) res[k] = processParams(el, params[k]);
         return res;
     }
     return params;
 }
 
-function resolveDeep(obj, path) {
-    if (!obj || !path) return undefined;
-    return path.split('.').reduce((o, k) => (o || {})[k], obj);
-}
-function assignDeep(obj, path, val) {
-    if (!obj || !path) return;
-    const parts = path.split('.');
-    let target = obj;
-    for(let i=0; i<parts.length-1; i++) target = target[parts[i]];
-    const last = parts[parts.length-1];
-    if(typeof target[last] === 'function') target[last](val);
-    else target[last] = val;
-}
-function resolvePath(obj, path) {
-    if (!obj || !path) return [null, undefined];
-    const parts = path.split('.');
-    let current = obj;
-    let parent = null;
-    for (const part of parts) {
-        if (!current) return [null, undefined];
-        parent = current;
-        current = current[part];
-    }
-    return [parent, current];
-}
-
 // --- OBSERVER INTEGRATION ---
 Observer.init({
     name: "plugin",
@@ -540,4 +405,9 @@ Observer.init({
     callback: (mutation) => {
         init(mutation.target);
     }
-});
+});
+
+// Auto-init for existing elements
+if (typeof document !== 'undefined') {
+    init(document.querySelectorAll("[plugin]"));
+}