zephyr_rb 1.0.1 → 1.0.2

data/src/dom_builder.rb

@@ -0,0 +1,94 @@
+# dom_builder.rb
+# frozen_string_literal: true
+
+require 'js'
+
+module ZephyrWasm
+  class DOMBuilder
+    attr_reader :root, :component
+
+    def initialize(root, component)
+      @root = root
+      @component = component
+      @doc = JS.global[:document]
+      @fragment = @doc.call(:createDocumentFragment)
+      @stack = [@fragment] # current parent stack
+    end
+
+    def method_missing(method_name, *args, **attrs, &block)
+      tag(method_name.to_s, *args, **attrs, &block)
+    end
+
+    def tag(name, *args, **attrs, &block)
+      el = @doc.call(:createElement, name)
+
+      # attributes & event handlers
+      attrs.each do |key, value|
+        next if value.nil?
+
+        if key.to_s.start_with?('on_') # event handler
+          event = key.to_s.sub('on_', '')
+          handler =
+            if value.respond_to?(:to_proc)
+              # Ruby lambda/proc provided (common case before you call .to_js)
+              value.to_js
+            elsif value.respond_to?(:to_js)
+              # Ruby object with .to_js (e.g., you passed ->{}.to_js explicitly)
+              value.to_js
+            else
+              # Already a JS::Object / native function
+              value
+            end
+          el.call(:addEventListener, event, handler)
+
+        elsif key == :class || key == :classes
+          el[:className] = value.to_s
+
+        elsif key == :style && value.is_a?(Hash)
+          value.each { |k, v| el[:style][k.to_s.gsub('_', '-')] = v }
+
+        elsif key == :checked || key == :disabled || key == :selected
+          # boolean properties should be set on the property, not attribute
+          el[key] = !!value
+
+        else
+          el.call(:setAttribute, key.to_s, value.to_s)
+        end
+      end
+
+      el[:textContent] = args.first.to_s if args.any?
+
+      # append to current parent; descend if block given
+      parent = @stack.last
+      parent.call(:appendChild, el)
+      if block
+        @stack.push(el)
+        yield
+        @stack.pop
+      end
+
+      el
+    end
+
+    def text(content)
+      node = @doc.call(:createTextNode, content.to_s)
+      @stack.last.call(:appendChild, node)
+      node
+    end
+
+    def apply
+      @root.call(:replaceChildren, @fragment)
+      # reset for the next render
+      @fragment = @doc.call(:createDocumentFragment)
+      @stack = [@fragment]
+    end
+
+    # Helpers
+    def render_if(condition, &block)
+      yield if condition
+    end
+    def render_each(collection, &block)
+      collection.each { |item| block.call(item) }
+    end
+  end
+end

data/src/registry.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module ZephyrWasm
+  module Registry
+    class << self
+      def components
+        @components ||= {}
+      end
+
+      def register(tag_name, component_class)
+        if components.key?(tag_name)
+          warn "Component '#{tag_name}' is already registered. Overwriting."
+        end
+        components[tag_name] = component_class
+      end
+
+      def get(tag_name)
+        components[tag_name]
+      end
+
+      def all
+        components
+      end
+
+      def clear
+        @components = {}
+      end
+    end
+  end
+end

data/src/zephyr-bridge.js

@@ -0,0 +1,69 @@
+// zephyr-bridge.js
+(() => {
+    const defined = new Set();
+    const pending = new Map();
+    let scheduled = false;
+
+    function defineOne(tag, meta) {
+        if (!tag || customElements.get(tag) || defined.has(tag)) return;
+
+        class RubyBackedElement extends HTMLElement {
+            static get observedAttributes() {
+                return (meta && meta.observedAttributes) || [];
+            }
+            connectedCallback() {
+                // Safe: this runs in a clean JS task after our scheduler fires
+                window.ZephyrWasm?.initComponent?.(this, tag);
+            }
+            disconnectedCallback() {
+                window.ZephyrWasm?.disconnectComponent?.(this);
+            }
+            attributeChangedCallback(name, oldValue, newValue) {
+                window.ZephyrWasm?.attributeChangedComponent?.(this, name, oldValue, newValue);
+            }
+        }
+
+        customElements.define(tag, RubyBackedElement);
+        defined.add(tag);
+        window.log?.(`✅ Registered component: ${tag}`);
+    }
+
+    function flush() {
+        scheduled = false;
+        for (const [tag, meta] of pending) defineOne(tag, meta);
+        pending.clear();
+        // Optional: reveal content area if you hide UI while loading
+        const loading = document.getElementById('loading');
+        const content = document.getElementById('content');
+        if (loading && content) {
+            loading.style.display = 'none';
+            content.style.display = 'block';
+            window.log?.('🎉 Zephyr WASM is ready!');
+        }
+    }
+
+    function scheduleDefine(tag, meta) {
+        pending.set(tag, meta);
+        if (!scheduled) {
+            scheduled = true;
+            // Use a macrotask (setTimeout) to ensure Ruby has fully unwound
+            setTimeout(flush, 0);
+        }
+    }
+
+    // Wrap ZephyrWasmRegistry so Ruby writes schedule a later define
+    const existing = window.ZephyrWasmRegistry || {};
+    const proxy = new Proxy(existing, {
+        set(target, prop, value) {
+            target[prop] = value;
+            scheduleDefine(prop, value);
+            return true;
+        }
+    });
+    window.ZephyrWasmRegistry = proxy;
+
+    // If Ruby populated entries before this script loaded, schedule them now
+    for (const [tag, meta] of Object.entries(existing)) {
+        scheduleDefine(tag, meta);
+    }
+})();

data/src/zephyr_wasm.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+require 'js'
+require 'json'
+
+# Zephyr WASM - Ruby Web Components compiled to WebAssembly
+# This runs entirely in the browser using ruby.wasm
+module ZephyrWasm
+  @@instance_map = ObjectSpace::WeakMap.new
+
+  class << self
+    def component(tag_name, &block)
+      raise ArgumentError, "Tag name must contain a hyphen" unless tag_name.include?('-')
+
+      component_class = Class.new(Component)
+      component_class.tag_name = tag_name
+      component_class.class_eval(&block) if block_given?
+
+      Registry.register(tag_name, component_class)
+
+      # Define the custom element in the browser
+      define_custom_element(tag_name, component_class)
+
+      component_class
+    end
+
+    def define_custom_element(tag_name, component_class)
+      # Store observed attributes for this component
+      observed_attrs = component_class.observed_attrs || []
+
+      # Initialize registry if needed (safe operation)
+      unless JS.global[:ZephyrWasmRegistry]
+        JS.global[:ZephyrWasmRegistry] = {}.to_js
+      end
+
+      # Store component metadata (safe - just property assignment)
+      JS.global[:ZephyrWasmRegistry][tag_name] = {
+        observedAttributes: observed_attrs
+      }.to_js
+
+      # JavaScript will poll this registry and register the custom elements
+      # This avoids nested VM operations during initialization
+    end
+
+    def init_component(element, tag_name)
+      component_class = Registry.get(tag_name)
+      return unless component_class
+
+      # Create Ruby component instance
+      instance = component_class.new(element)
+
+      # Store in weak map instead of on element
+      @@instance_map[element] = instance
+
+      # Call lifecycle method
+      instance.connected
+
+      # Initial render
+      instance.render
+    end
+
+    def disconnect_component(element)
+      instance = @@instance_map[element]
+      instance.disconnected if instance
+      @@instance_map.delete(element)
+    end
+
+    def attribute_changed_component(element, name, old_value, new_value)
+      instance = @@instance_map[element]
+      instance.attribute_changed(name, old_value, new_value) if instance
+    end
+  end
+end
+
+# Expose to JavaScript
+JS.global[:ZephyrWasm] = {
+  initComponent: ->(element, tag_name) {
+    ZephyrWasm.init_component(element, tag_name.to_s)
+  }.to_js,
+  disconnectComponent: ->(element) {
+    ZephyrWasm.disconnect_component(element)
+  }.to_js,
+  attributeChangedComponent: ->(element, name, old_value, new_value) {
+    ZephyrWasm.attribute_changed_component(element, name.to_s, old_value, new_value)
+  }.to_js
+}.to_js

metadata

@@ -1,25 +1,43 @@
 --- !ruby/object:Gem::Specification
 name: zephyr_rb
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.0.2
 platform: ruby
 authors:
 - Jesse Glover
-bindir: bin
+bindir: exe
 cert_chain: []
 date: 1980-01-02 00:00:00.000000000 Z
 dependencies: []
-executables: []
+description: ZephyrRb lets you build reactive web components using Ruby and WebAssembly.
+  Write your UI logic in Ruby with a declarative template syntax.
+email:
+- jesco@rpdevstudios.com
+executables:
+- zephyr-rb
 extensions: []
 extra_rdoc_files: []
 files:
 - README.md
 - dist/zephyrRB.js
-- lib/cli.rb
+- exe/zephyr-rb
+- lib/zephyr_rb.rb
+- lib/zephyr_rb/cli.rb
 - lib/zephyr_rb/version.rb
-- lib/zephyr_rb/zephyr_rb.rb
-licenses: []
-metadata: {}
+- src/browser.script.iife.js
+- src/component.rb
+- src/components.rb
+- src/dom_builder.rb
+- src/registry.rb
+- src/zephyr-bridge.js
+- src/zephyr_wasm.rb
+homepage: https://github.com/RPDevJesco/ZephyrRB
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/RPDevJesco/ZephyrRB
+  source_code_uri: https://github.com/RPDevJesco/ZephyrRB
+  bug_tracker_uri: https://github.com/RPDevJesco/ZephyrRB/issues
 rdoc_options: []
 require_paths:
 - lib
@@ -27,7 +45,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.7.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="