tailmix 0.4.7 → 0.4.8

data/app/javascript/tailmix/runtime/index.js

@@ -0,0 +1,130 @@
+import {Component} from './component';
+import {PluginManager} from './plugins';
+
+/**
+ * The Tailmix global object that manages the lifecycle of components and plugins.
+ * It provides methods for starting the application, hydration of components,
+ */
+const Tailmix = {
+    _namedInstances: {},
+    _components: new Map(),
+    _definitions: {},
+    _pluginManager: new PluginManager(),
+    _observer: null,
+
+    /**
+     * Starts the Tailmix application by loading component definitions and initializing components.
+     */
+    start() {
+        this.loadDefinitions();
+        this._namedInstances = {};
+        this._components.clear();
+
+        this.hydrate(document.body);
+        this.observeChanges();
+    },
+
+    /**
+     * Hydrate components within the specified root element.
+     * @param rootElement
+     */
+    hydrate(rootElement) {
+        const componentElements = rootElement.querySelectorAll('[data-tailmix-component]');
+        componentElements.forEach(element => {
+            if (this._components.has(element)) return;
+
+            const componentName = element.dataset.tailmixComponent;
+            const definition = this._definitions[componentName];
+            if (!definition) { /* ... */
+                return;
+            }
+
+            const component = new Component(element, definition, this._pluginManager);
+            this._components.set(element, component);
+
+            const componentId = element.dataset.tailmixId;
+            if (componentId) {
+                this._namedInstances[componentId] = component;
+            }
+        });
+
+        // External trigger binding
+        const triggerElements = rootElement.querySelectorAll('[data-tailmix-trigger-for]');
+        triggerElements.forEach(element => {
+            const targetId = element.dataset.tailmixTriggerFor;
+            const targetComponent = this._namedInstances[targetId];
+            if (targetComponent) {
+                targetComponent.dispatcher.bindAction(element);
+            }
+        });
+    },
+
+    /**
+     * Loads and parses the component definitions from a script tag with the attribute `data-tailmix-definitions`.
+     * If a valid JSON content is found, it assigns it to the `definitions` variable.
+     * Logs an error message to the console in case of parsing failure.
+     *
+     * @return {void} Does not return a value.
+     */
+    loadDefinitions() {
+        const definitionsTag = document.querySelector('script[data-tailmix-definitions]');
+        if (definitionsTag) {
+            try {
+                this._definitions = JSON.parse(definitionsTag.textContent);
+            } catch (e) {
+                console.error("Tailmix: Failed to parse component definitions.", e);
+            }
+        }
+    },
+
+    /**
+     * Retrieves a component associated with the nearest ancestor element
+     * that has the `data-tailmix-component` attribute.
+     *
+     * @param {Element} element - The DOM element from which the component search begins.
+     * @return {*} The component associated with the identified ancestor element, or `undefined` if no component is found.
+     */
+    getComponent(element) {
+        const root = element.closest('[data-tailmix-component]');
+        return root ? this._components.get(root) : undefined;
+    },
+
+    registerPlugin(plugin) {
+        this._pluginManager.register(plugin);
+    },
+
+    /**
+     * Observes changes in the DOM and rehydrates components when they are added or modified.
+     */
+    observeChanges() {
+        if (this._observer) this._observer.disconnect();
+
+        this._observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach(node => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            // If the component itself was added
+                            if (node.matches('[data-tailmix-component]')) {
+                                this.hydrate(node);
+                            }
+                            // If a parent was added, which may contain components
+                            this.hydrate(node);
+                        }
+                    });
+                }
+            }
+        });
+
+        this._observer.observe(document.body, {childList: true, subtree: true});
+    }
+};
+
+// Initialize Tailmix on page load
+document.addEventListener("turbo:load", () => {
+    console.log("Tailmix starting...");
+    Tailmix.start();
+});
+
+
+export default Tailmix;

data/app/javascript/tailmix/runtime/plugins.js

@@ -0,0 +1,35 @@
+class PluginManager {
+    constructor() {
+        this.plugins = [];
+    }
+
+    /**
+     * Registers a plugin with the plugin manager.
+     * @param plugin
+     */
+    register(plugin) {
+        if (!plugin.name) {
+            console.error("Tailmix Plugin Error: a plugin must have a name.", plugin);
+            return;
+        }
+        this.plugins.push(plugin);
+    }
+
+    /**
+     * Connects a component to all registered plugins.
+     * @param component
+     */
+    connect(component) {
+        this.plugins.forEach(plugin => {
+            if (typeof plugin.connect === 'function') {
+                const pluginConfig = component.definition.plugins?.[plugin.name];
+                if (pluginConfig) {
+                    plugin.connect(component.api, pluginConfig);
+                }
+            }
+        });
+    }
+}
+
+export {PluginManager};
+

data/app/javascript/tailmix/runtime/updater.js

@@ -0,0 +1,140 @@
+export class Updater {
+    constructor(component) {
+        this.component = component;
+        this.definition = component.definition;
+    }
+
+    run(newState, oldState) {
+        for (const elementName in this.definition.elements) {
+            const elementNode = this.component.elements[elementName];
+            const elementDef = this.definition.elements[elementName];
+
+            if (!elementNode || !elementDef) continue;
+
+            this.updateElement(elementNode, elementDef, newState, oldState);
+        }
+    }
+
+    updateElement(elementNode, elementDef, newState, oldState) {
+        this.updateClasses(elementNode, elementDef, newState);
+        this.updateAttributes(elementNode, elementDef, newState);
+        this.updateContent(elementNode, elementDef, newState);
+    }
+
+    updateClasses(elementNode, elementDef, newState) {
+        const targetClasses = this.calculateTargetClasses(elementDef, newState);
+        const currentClasses = new Set(elementNode.classList);
+
+        // We compare current classes with target classes and apply the difference.
+        targetClasses.forEach(cls => {
+            if (!currentClasses.has(cls)) {
+                elementNode.classList.add(cls);
+            }
+        });
+
+        currentClasses.forEach(cls => {
+            if (!targetClasses.has(cls)) {
+                // We avoid removing base classes that were originally in HTML.
+                // (This is a simple heuristic; it can be improved if base classes are in the definition)
+                const isBaseClass = !this.isVariantClass(elementDef, cls);
+                if (!targetClasses.has(cls) && !isBaseClass) {
+                    elementNode.classList.remove(cls);
+                }
+            }
+        });
+    }
+
+    updateAttributes(elementNode, elementDef, newState) {
+        if (elementDef.attribute_bindings) {
+            for (const attrName in elementDef.attribute_bindings) {
+                if (["text", "html"].includes(attrName)) continue;
+
+                const stateKey = elementDef.attribute_bindings[attrName];
+                const newValue = newState[stateKey];
+
+                // We update the attribute only if it has changed.
+                if (elementNode.getAttribute(attrName) !== newValue) {
+                    if (newValue === null || newValue === undefined) {
+                        elementNode.removeAttribute(attrName);
+                    } else {
+                        elementNode.setAttribute(attrName, newValue);
+                    }
+                }
+            }
+        }
+    }
+
+    updateContent(elementNode, elementDef, newState) {
+        const bindings = elementDef.attribute_bindings;
+        if (!bindings) return;
+
+        // Обработка `bind :text`
+        const textStateKey = bindings.text;
+        if (textStateKey !== undefined) {
+            const newText = newState[textStateKey] || '';
+            if (elementNode.textContent !== newText) {
+                elementNode.textContent = newText;
+            }
+        }
+
+        // Обработка `bind :html`
+        const htmlStateKey = bindings.html;
+        if (htmlStateKey !== undefined) {
+            const newHtml = newState[htmlStateKey] || '';
+            if (elementNode.innerHTML !== newHtml) {
+                elementNode.innerHTML = newHtml;
+            }
+        }
+    }
+
+    calculateTargetClasses(elementDef, state) {
+        const classes = new Set();
+
+        // 1. We add base classes (if any are in the definition).
+        // (We skip this for now, as they are already in the HTML)
+
+        // 2. We apply classes from active variants (dimensions).
+        if (elementDef.dimensions) {
+            for (const dimName in elementDef.dimensions) {
+                const dimDef = elementDef.dimensions[dimName];
+                const stateValue = state[dimName] !== undefined ? state[dimName] : dimDef.default;
+
+                const variantDef = dimDef.variants?.[stateValue];
+                if (variantDef?.classes) {
+                    variantDef.classes.forEach(cls => classes.add(cls));
+                }
+            }
+        }
+
+        // 3. We apply classes from active compound variants.
+        if (elementDef.compound_variants) {
+            elementDef.compound_variants.forEach(cv => {
+                const conditions = cv.on;
+                const modifications = cv.modifications;
+
+                const isMatch = Object.entries(conditions).every(([key, value]) => {
+                    return state[key] === value;
+                });
+
+                if (isMatch && modifications.classes) {
+                    modifications.classes.forEach(cls => classes.add(cls));
+                }
+            });
+        }
+
+        return classes;
+    }
+
+    isVariantClass(elementDef, className) {
+        if (elementDef.dimensions) {
+            for (const dimName in elementDef.dimensions) {
+                const dim = elementDef.dimensions[dimName];
+                for (const variantName in dim.variants) {
+                    if (dim.variants[variantName].classes?.includes(className)) return true;
+                }
+            }
+        }
+        // ... a check can also be added for compound_variants
+        return false;
+    }
+}

data/docs/01_getting_started.md

@@ -34,87 +34,6 @@ This command will add tailmix to your importmap.rb and ensure its JavaScript is
 Let's create a simple BadgeComponent to see Tailmix in action.
 
 #### 1. Define the Component Class
-   
-Create a new file in `app/components/badge_component.rb`:
-
-```ruby
-# app/components/badge_component.rb
-class BadgeComponent
-  include Tailmix
-  attr_reader :ui, :text
-
-  def initialize(text, color: :gray)
-    @ui = tailmix(color: color)
-    @text = text
-  end
-
-  tailmix do
-    element :badge, "inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full" do
-      dimension :color, default: :gray do
-        variant :gray,    "bg-gray-100 text-gray-600"
-        variant :success, "bg-green-100 text-green-700"
-        variant :danger,  "bg-red-100 text-red-700"
-      end
-    end
-  end
-end
-```
-
-#### 2. Use it in a View
-   
-Now, you can use this component in any ERB view:
-
-```html
-<%# Create two instances of our badge with different variants %>
-<% success_badge = BadgeComponent.new("Active", color: :success) %>
-<% danger_badge = BadgeComponent.new("Inactive", color: :danger) %>
-
-<span <%= tag.attributes **success_badge.ui.badge %>>
-  <%= success_badge.text %>
-</span>
-
-<span <%= tag.attributes **danger_badge.ui.badge %>>
-  <%= danger_badge.text %>
-</span>
-```
-
-#### View Usage .arb (Ruby Arbre)
-
-```ruby
-# app/views/components/_badge.arb
-success_badge = BadgeComponent.new("Active", color: :success)
-danger_badge = BadgeComponent.new("Inactive", color: :danger)
-
-span success_badge.ui.badge do
-  success_badge.text
-end
-
-span danger_badge.ui.badge do
-  danger_badge.text
-end
-```
-
-#### 3. The Resulting HTML
-   
-This will produce the following clean and semantic HTML:
-
-```html
-<span class="inline-flex ... bg-green-100 text-green-700" data-tailmix-badge="color:success">
-  Active
-</span>
-
-<span class="inline-flex ... bg-red-100 text-red-700" data-tailmix-badge="color:danger">
-  Inactive
-</span>
-```
-
-Notice the `data-tailmix-badge` attribute, which serves as both a stable selector and a state indicator for your component.
-
-## Next Steps
-
-- You've successfully created your first component! To learn more about the power of Tailmix, check out these documents:
 
-- DSL Reference: For a deep dive into every available DSL method.
 
-- Cookbook: For practical, real-world examples of common UI components.
 

data/examples/_modal_component.arb

@@ -1,36 +1,28 @@
 # Arbre view:
 
-modal = SuperModalComponent.new(size: :lg, open: true)
+modal_component = ModalComponent.new(open: false, id: :user_profile_modal)
+ui = modal_component.ui
 
-# modal.lock!
-ui = modal.ui
+button "Open Modal Outer", tailmix_trigger_for(:user_profile_modal, :toggle_open)
 
-div ui.base do
-  div ui.overlay
-  div ui.open do
-    "open"
-  end
+div ui.container.component do
+  button "Open Modal", ui.open_button
 
-  div ui.panel do
-    button ui.close_button do
-      span "Close"
-    end
+  div ui.base do
+    div ui.overlay
 
-    h3 ui.title do
-      "Payment Successful"
-    end
-
-    div ui.body do
-      "Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order."
-    end
-
-    div ui.footer do
-      button ui.confirm_button do
-        span "Confirm Purchase"
-        div ui.spinner do
-          span "Loading..."
+    div ui.panel do
+      div ui.title do
+        h3 "Modal Title"
+        button ui.close_button do
+          text_node "✖"
         end
       end
+
+      div ui.body do
+        para "This is the main content of the modal. It's powered by the new Tailmix Runtime!"
+      end
     end
   end
 end
+

data/examples/modal_component.rb

@@ -8,186 +8,62 @@ class ModalComponent
   attr_reader :ui
 
   tailmix do
-    element :base, "fixed inset-0 z-50 flex items-center justify-center" do
-      dimension :open, default: true do
-        variant true, "visible opacity-100"
-        variant false, "invisible opacity-0"
-      end
-      stimulus.controller("modal").action_payload(:toggle, as: :toggle_data)
-    end
-
-    element :overlay, "fixed inset-0 bg-black/50 transition-opacity" do
-      stimulus.context("modal").action(:click, :close)
-    end
+    plugin :auto_focus, on: :open_button, delay: 100
+    state :open, default: false, toggle: true
 
-    element :panel, "relative bg-white rounded-lg shadow-xl transition-transform transform" do
-      dimension :size, default: :md do
-        variant :sm, "w-full max-w-sm p-4" do
-          classes "dark:text-slate-400", group: :dark_mode
-          classes "one two"
-        end
-        variant :md, "w-full max-w-md p-6"
-        variant :lg, "w-full max-w-lg p-8"
-      end
-      stimulus.context("modal").target("panel")
+    element :container do
     end
 
-    element :title, "text-lg font-semibold text-gray-900"
-    element :body, "mt-2 text-sm text-gray-600"
-    element :close_button, "absolute top-2 right-2 p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-600" do
-      stimulus.context("modal").action(:click, :close)
+    element :open_button do
+      # We attach the `click` event to our auto-generated action.
+      on :click, :toggle_open
     end
 
-    element :footer, "mt-4 pt-4 border-t flex justify-end"
-    element :confirm_button, "relative inline-flex items-center px-4 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700" do
-      stimulus.controller("form-submission")
-              .action(:click, :submit)
-              .action_payload(:enter_pending_state, as: :pending_data)
+    element :base do
+      dimension :open do
+        variant true, "fixed inset-0 z-50 flex items-center justify-center visible opacity-100 transition-opacity"
+        variant false, "invisible opacity-0"
+      end
     end
 
-    element :spinner, "absolute inset-0 flex items-center justify-center hidden"
-
-    action :toggle, method: :toggle do
-      element :overlay do
-        classes "hidden"
-      end
-      element :panel do
-        classes "hidden"
+    element :overlay do
+      dimension :open do
+        variant true, "fixed inset-0 bg-black/50"
+        variant false, "hidden"
       end
+      on :click, :toggle_open
     end
 
-    action :lock, method: :add do
-      element :close_button do
-        classes "hidden"
-      end
-      element :panel do
-        data locked: true, reason: "processing"
+    element :panel, "relative bg-white rounded-lg shadow-xl" do
+      dimension :open do
+        variant true, "block"
+        variant false, "hidden"
       end
     end
 
-    action :enter_pending_state, method: :add do
-      element :confirm_button do
-        classes "opacity-75 cursor-not-allowed"
-      end
-      element :spinner do
-        classes "flex"
-      end
+    element :close_button, "absolute top-2 right-2 p-1 text-gray-500 rounded-full cursor-pointer" do
+      on :click, :toggle_open
     end
-  end
 
-  def initialize(size: :md, open: false)
-    @ui = tailmix(size: size, open: open)
+    element :title, "text-lg font-semibold text-gray-900 p-4 border-b"
+    element :body, "p-4 text-gray-900"
   end
 
-  def lock!
-    @ui.action(:lock).apply!
+  def initialize(open: false, id: nil)
+    @ui = tailmix(open: open, id: id)
   end
 end
 
-puts "-" * 100
-# puts ModalComponent.dev.docs
-# puts ""
-# puts "Scaffolds:"
-# puts ""
-# puts ModalComponent.dev.stimulus.scaffold
-# puts ""
-
-# >>>
-#
-# == Tailmix Docs for ModalComponent ==
-# Signature: `initialize(open: true, size: :md)`
-#
-# Dimensions:
-#   - open (default: true)
-#     - true:
-#       - classes : "visible opacity-100"
-#     - false:
-#       - classes : "invisible opacity-0"
-#   - size (default: :md)
-#     - :sm:
-#       - classes : "w-full max-w-sm p-4"
-#       - classes (group: :dark_mode): "dark:text-slate-400"
-#       - classes : "one two"
-#     - :md:
-#       - classes : "w-full max-w-md p-6"
-#     - :lg:
-#       - classes : "w-full max-w-lg p-8"
-#
-# Actions:
-#   - :toggle
-#   - :lock
-#   - :enter_pending_state
-#
-# Stimulus:
-#   - on `modal` controller:
-#     - Targets: panel
-#     - Actions: close
-#
-# Stimulus:
-#   - on `form-submission` controller:
-#     - Actions: submit
-#
-# Scaffolds:
-#
-# // Generated by Tailmix for the "modal" controller
-# // Path: app/javascript/controllers/modal_controller.js
-# import { Controller } from "@hotwired/stimulus"
-# import Tailmix from "tailmix"
-#
-# export default class extends Controller {
-#   static targets = ['panel']
-#   static values = { toggleData: Object }
-#
-#   connect() {
-#     console.log("modal controller connected to", this.element);
-#   }
-#   toggle(event) {
-#      if (event) event.preventDefault();
-#      Tailmix.run({ config: this.toggleDataValue, controller: this });
-#   }
-#
-#   close() {
-#     console.log('modal#close fired');
-#   }
-# }
-# ------------------------------------------------------------
-#
-# // Generated by Tailmix for the "form-submission" controller
-# // Path: app/javascript/controllers/form-submission_controller.js
-# import { Controller } from "@hotwired/stimulus"
-# import Tailmix from "tailmix"
-#
-# export default class extends Controller {
-#   static targets = []
-#   static values = { pendingData: Object }
-#
-#   connect() {
-#     console.log("form-submission controller connected to", this.element);
-#   }
-#   enterPendingState(event) {
-#      if (event) event.preventDefault();
-#      Tailmix.run({ config: this.pendingDataValue, controller: this });
-#   }
-#
-#   submit() {
-#     console.log('form-submission#submit fired');
-#   }
-# }
-# ------------------------------------------------------------
-
-
-
-
-modal = ModalComponent.new(size: :lg, open: true)
-# modal.lock!
-ui = modal.ui
-
 
+modal = ModalComponent.new(open: false, id: :user_profile_modal)
+ui = modal.ui
 
 
 # puts "Definition:"
 # puts JSON.pretty_generate(stringify_keys(ModalComponent.tailmix_definition.to_h))
-# ui.action(:lock).apply!
+puts "-" * 100
+puts ModalComponent.dev.docs
+puts "-" * 100
 
 ModalComponent.dev.elements.each do |element_name|
   element = ui.send(element_name)