funicular 0.0.1 → 0.1.0

data/mrblib/file_upload.rb

@@ -0,0 +1,184 @@
+require 'rng'
+
+module Funicular
+  module FileUpload
+    JS_HELPER_CODE = <<~JAVASCRIPT
+      (function() {
+        'use strict';
+        // Avoid duplicate mounting
+        if (window.funicularFormDataUpload) {
+          return;
+        }
+        // FormData upload helper
+        window.funicularFormDataUpload = function(url, fieldsObj, fileFieldName, fileRefId) {
+          const formData = new FormData();
+          for (const [key, value] of Object.entries(fieldsObj)) {
+            formData.append(key, String(value));
+          }
+          if (fileFieldName && fileRefId !== null && fileRefId !== undefined) {
+            const file = window.picorubyRefs[fileRefId];
+            if (file) {
+              formData.append(fileFieldName, file);
+            }
+          }
+          return fetch(url, {
+            method: 'PATCH',
+            body: formData
+          }).then(response => response.json());
+        };
+        console.log('Funicular helpers mounted');
+      })();
+    JAVASCRIPT
+
+    def self.mount
+      script = JS.document.createElement("script")
+      script[:textContent] = JS_HELPER_CODE
+      JS.document.body.appendChild(script)
+      JS.document.body.removeChild(script)
+    end
+
+    # Select a file from input element and generate preview
+    # @param input_id [String] DOM element ID of the file input
+    # @param block [Proc] Callback with preview data URL (or nil if no file)
+    def self.select_file_with_preview(input_id, &block)
+      input = JS.document.getElementById(input_id)
+      return block.call(nil, nil) unless input
+
+      # @type var files: Array[JS::Object]
+      files = input[:files]
+      if !files || files.length.to_i == 0
+        return block.call(nil, nil)
+      end
+
+      file = files[0]
+
+      # Use URL.createObjectURL instead of FileReader for preview
+      # This is simpler and doesn't require async callbacks
+      if file.nil?
+        raise "Selected file is nil"
+      else
+        url = JS.global[:URL]
+        if url.is_a?(JS::Object)
+          preview_url = url.createObjectURL(file)
+        else
+          preview_url = nil
+        end
+      end
+
+      # Call the block with file and preview URL
+      # @type var preview_url: String
+      block.call(file, preview_url) if block
+    end
+
+    # Upload data with FormData (supports file upload)
+    # @param url [String] Upload URL
+    # @param fields [Hash] Form fields to include
+    # @param file_field [String] Name of the file field
+    # @param file [JS::Object] File object from input element
+    # @param block [Proc] Callback with response data
+    def self.upload_with_formdata(url, fields: {}, file_field: nil, file: nil, &block)
+      # Store file and callback ID
+      @callback_counters ||= [] # steep:ignore UnannotatedEmptyCollection
+      callback_id = _ = nil
+      while true
+        callback_id = RNG.random_int
+        break unless @callback_counters.include?(callback_id)
+      end
+      @callback_counters << callback_id
+
+      if file
+        JS.global[:_tempFileForUpload] = file
+      end
+
+      # Build fields object as JSON string
+      fields_json = JSON.generate(fields)
+
+      # Call JavaScript helper
+      # Note: The helper returns a Promise that resolves to JSON data (not Response)
+      script = JS.document.createElement("script")
+      script_code = <<~JS
+        (function() {
+          var fieldsObj = JSON.parse('#{fields_json.gsub("'", "\\\\'")}');
+          var fileRefId = null;
+          if (window._tempFileForUpload) {
+            fileRefId = window.picorubyRefs.indexOf(window._tempFileForUpload);
+          }
+          // Call helper and store result as JSON string when Promise resolves
+          window.funicularFormDataUpload(
+            '#{url}',
+            fieldsObj,
+            #{file_field ? "'#{file_field}'" : 'null'},
+            fileRefId
+          ).then(function(data) {
+            // Store as JSON string for easy Ruby parsing
+            window._funicularUploadResult_#{callback_id} = JSON.stringify(data);
+          }).catch(function(error) {
+            window._funicularUploadResult_#{callback_id} = JSON.stringify({error: error.toString()});
+          });
+        })();
+      JS
+      script[:textContent] = script_code
+      JS.document.body.appendChild(script)
+      JS.document.body.removeChild(script)
+
+      # Poll for result (simple polling approach)
+      counter = 0
+      json_str = nil
+      while true
+        counter += 1
+        sleep 0.1
+        json_str = JS.global[:"_funicularUploadResult_#{callback_id}"]
+        break if json_str && !json_str.to_s.empty?
+        if 100 < counter
+          puts "[WARN] Timeout waiting for upload result. Return without calling block."
+          return
+        end
+      end
+
+      # Get JSON string from global variable (already retrieved above)
+      result = JSON.parse(json_str.to_s)
+
+      block.call(result) if block
+      puts "[DEBUG] Block called"
+    ensure
+      # Always cleanup global references, even on timeout or error
+      if callback_id
+        @callback_counters.delete(callback_id) if @callback_counters
+        if JS.global[:"_funicularUploadResult_#{callback_id}"]
+          JS.global[:"_funicularUploadResult_#{callback_id}"] = nil
+        end
+      end
+      if JS.global[:_tempFileForUpload]
+        JS.global[:_tempFileForUpload] = nil
+      end
+    end
+
+    # Helper: Store file in global variable for later use
+    def self.store_file(input_id, storage_key = '_selectedFile')
+      input = JS.document.getElementById(input_id)
+      return nil unless input
+
+      # @type var files: Array[JS::Object]
+      files = input[:files]
+      if !files || files.length.to_i == 0
+        JS.global[storage_key] = nil
+        return nil
+      end
+
+      file = files[0]
+      JS.global[storage_key] = file
+      file
+    end
+
+    # Helper: Retrieve stored file
+    def self.retrieve_file(storage_key = '_selectedFile')
+      file = JS.global[storage_key]
+      JS.global[storage_key] = nil if file
+      if file.is_a?(JS::Object)
+        file
+      else
+        nil
+      end
+    end
+  end
+end

data/mrblib/form_builder.rb

@@ -0,0 +1,284 @@
+module Funicular
+  class FormBuilder
+    attr_reader :component, :model_key, :options
+
+    def initialize(component, model_key, options = {})
+      @component = component
+      @model_key = model_key
+      @options = options
+      @error_class = options[:error_class] || "text-red-600 text-sm mt-1"
+      @field_error_class = options[:field_error_class] || "border-red-500"
+    end
+
+    # Generic field builder for input elements
+    def build_field(field_name, field_type, field_options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      # Get current value from state
+      value = get_nested_value(@component.state, full_key) || ""
+
+      # Build input change handler
+      on_input = ->(event) do
+        new_value = event.target[:value]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      # Check for errors
+      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      has_error = !error_message.nil?
+
+      # Merge CSS classes (add error class if error exists)
+      css_class = field_options[:class]
+      css_class = css_class.to_s if css_class
+      css_class ||= ""
+
+      if has_error
+        if css_class.empty?
+          css_class = @field_error_class
+        else
+          css_class = "#{css_class} #{@field_error_class}"
+        end
+      end
+
+      # Build field attributes
+      attrs = {
+        type: field_type,
+        value: value,
+        oninput: on_input
+      }.merge(field_options.reject { |k, _| k == :class })
+
+      # Add class attribute if not empty
+      attrs[:class] = css_class unless css_class.empty?
+
+      # Render field + error message
+      @component.div do
+        @component.input(attrs)
+        if has_error
+          @component.div(class: @error_class) { error_message }
+        end
+      end
+    end
+
+    # Public field methods
+    def text_field(field_name, options = {})
+      build_field(field_name, "text", options)
+    end
+
+    def password_field(field_name, options = {})
+      build_field(field_name, "password", options)
+    end
+
+    def email_field(field_name, options = {})
+      build_field(field_name, "email", options)
+    end
+
+    def number_field(field_name, options = {})
+      build_field(field_name, "number", options)
+    end
+
+    def textarea(field_name, options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      value = get_nested_value(@component.state, full_key) || ""
+
+      on_input = ->(event) do
+        new_value = event.target[:value]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      has_error = !error_message.nil?
+
+      css_class = options[:class]
+      css_class = css_class.to_s if css_class
+      css_class ||= ""
+
+      if has_error
+        if css_class.empty?
+          css_class = @field_error_class
+        else
+          css_class = "#{css_class} #{@field_error_class}"
+        end
+      end
+
+      attrs = {
+        oninput: on_input
+      }.merge(options.reject { |k, _| k == :class })
+
+      attrs[:class] = css_class unless css_class.empty?
+
+      @component.div do
+        @component.textarea(attrs) { value }
+        if has_error
+          @component.div(class: @error_class) { error_message }
+        end
+      end
+    end
+
+    def checkbox(field_name, options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      value = get_nested_value(@component.state, full_key) || false
+
+      on_change = ->(event) do
+        new_value = event.target[:checked]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      attrs = {
+        type: "checkbox",
+        checked: value,
+        onchange: on_change
+      }.merge(options)
+
+      @component.input(attrs)
+    end
+
+    def select(field_name, choices, options = {})
+      field_key = field_name.to_s
+      full_key = "#{@model_key}.#{field_key}"
+
+      value = get_nested_value(@component.state, full_key) || ""
+
+      on_change = ->(event) do
+        new_value = event.target[:value]
+        set_nested_value(@model_key, field_key, new_value)
+      end
+
+      error_message = @component.state.errors ? @component.state.errors[field_key.to_sym] : nil
+      has_error = !error_message.nil?
+
+      css_class = options[:class]
+      css_class = css_class.to_s if css_class
+      css_class ||= ""
+
+      if has_error
+        if css_class.empty?
+          css_class = @field_error_class
+        else
+          css_class = "#{css_class} #{@field_error_class}"
+        end
+      end
+
+      attrs = {
+        onchange: on_change
+      }.merge(options.reject { |k, _| k == :class })
+
+      attrs[:class] = css_class unless css_class.empty?
+
+      @component.div do
+        @component.select(attrs) do
+          choices.each do |choice|
+            option_value, option_text = choice.is_a?(Array) ? choice : [choice, choice]
+            selected = value.to_s == option_value.to_s
+            @component.option(value: option_value, selected: selected) do
+              option_text
+            end
+          end
+        end
+        if has_error
+          @component.div(class: @error_class) { error_message }
+        end
+      end
+    end
+
+    def file_field(field_name, options = {})
+      field_key = field_name.to_s
+
+      # Check if custom onchange handler is provided
+      custom_handler = options.delete(:onchange)
+
+      # Default handler: store file name in state
+      default_handler = ->(event) do
+        file = event.target[:files] ? event.target[:files][0] : nil
+        file_name = if file.nil?
+                      nil
+                    else
+                      # @type var file: Hash[Symbol, String]
+                      file[:name]
+                    end
+        set_nested_value(@model_key, field_key, file_name)
+      end
+
+      on_change = custom_handler || default_handler
+
+      attrs = {
+        type: "file",
+        onchange: on_change
+      }.merge(options)
+
+      @component.input(attrs)
+    end
+
+    def submit(label = "Submit", options = {})
+      attrs = { type: "submit" }.merge(options)
+      @component.button(attrs) { label }
+    end
+
+    def label(field_name, text = nil, options = {})
+      text ||= field_name.to_s.split('_').map { |word| word.capitalize }.join(' ')
+      @component.label(options) { text }
+    end
+
+    private
+
+    # Get nested value from state (e.g., "user.username")
+    def get_nested_value(state, key_path)
+      keys = key_path.split('.')
+      value = state
+      keys.each do |key|
+        if value.respond_to?(key.to_sym)
+          value = value.send(key.to_sym)
+        elsif value.is_a?(Hash)
+          value = value[key.to_sym] || value[key]
+        else
+          value = nil
+        end
+        break if value.nil?
+      end
+      value
+    end
+
+    # Set nested value in state via patch
+    def set_nested_value(model_key, field_key, new_value)
+      # Handle nested keys like "address.city"
+      if field_key.include?('.')
+        # Complex nested update
+        keys = field_key.split('.')
+        current_model = @component.state.send(model_key.to_sym)
+        updated_model = deep_merge_value(current_model, keys, new_value)
+        @component.patch(model_key.to_sym => updated_model)
+      else
+        # Simple update
+        current_model = @component.state.send(model_key.to_sym)
+        if current_model.nil?
+          @component.patch(model_key.to_sym => { field_key.to_sym => new_value })
+        elsif current_model.is_a?(Hash)
+          updated_model = current_model.merge(field_key.to_sym => new_value)
+          @component.patch(model_key.to_sym => updated_model)
+        else
+          # Assume it's an object with instance variables
+          current_model.instance_variable_set("@#{field_key}", new_value)
+          @component.patch(model_key.to_sym => current_model)
+        end
+      end
+    end
+
+    # Deep merge helper for nested keys
+    def deep_merge_value(hash, keys, value)
+      return hash unless hash.is_a?(Hash)
+
+      hash = hash.dup
+      if keys.length == 1
+        hash[keys[0].to_sym] = value
+      else
+        key = keys[0].to_sym
+        hash[key] = deep_merge_value(hash[key] || {}, (keys[1..-1] || []), value)
+      end
+      hash
+    end
+  end
+end

data/mrblib/funicular.rb

@@ -0,0 +1,156 @@
+# The 'js' gem (picoruby-wasm) provides JavaScript interop and is only
+# available in wasm builds. During test builds, picoruby-wasm is excluded
+# from dependencies (see mrbgem.rake), so `require 'js'` raises LoadError.
+#
+# Additionally, gem init order is not guaranteed to be stable. A dummy
+# `require` in picoruby-mruby/mrblib/require.rb exists to suppress
+# LoadError during picogem_init, but if picoruby-require initializes
+# before this gem, the real `require` (which raises LoadError) will
+# already be active. Rescuing LoadError here makes the code robust
+# regardless of init order.
+begin
+  require 'js'
+rescue LoadError
+  # not available outside wasm environment
+end
+
+module Funicular
+  VERSION = '0.1.0'
+
+  def self.version
+    VERSION
+  end
+
+  def self.env
+    @env ||= EnvironmentInquirer.new(ENV['FUNICULAR_ENV'] || ENV['RAILS_ENV'] || 'development')
+  end
+
+  def self.env=(environment)
+    case environment
+    when EnvironmentInquirer
+      @env = environment
+    when nil
+      @env = nil
+    else
+      @env = EnvironmentInquirer.new(environment)
+    end
+    # @type ivar @env: EnvironmentInquirer?
+    @env
+  end
+
+  @router = nil
+
+  def self.router
+    @router
+  end
+
+  # Load schemas for models
+  # Usage:
+  #   Funicular.load_schemas({ User => "user", Session => "session" }) do
+  #     Funicular.start(container: 'app') { |router| ... }
+  #   end
+  def self.load_schemas(models, &block)
+    schemas_loaded = 0
+    total_schemas = models.size
+
+    check_completion = -> {
+      if schemas_loaded >= total_schemas
+        puts "[Funicular] All schemas loaded (#{schemas_loaded}/#{total_schemas})"
+        block.call if block
+      end
+    }
+
+    models.each do |model_class, schema_name|
+      HTTP.get("/api/schema/#{schema_name}") do |response|
+        if response.error?
+          puts "[Schema] Failed to load #{schema_name} schema: #{response.error_message}"
+        else
+          model_class.load_schema(response.data)
+          puts "[Schema] #{schema_name} model initialized"
+          schemas_loaded += 1
+          check_completion.call
+        end
+      end
+    end
+  end
+
+  # Start Funicular application
+  # Usage:
+  #   Funicular.start(MyComponent, container: 'app')
+  #   Funicular.start(MyComponent, container: 'app', props: { name: 'John' })
+  def self.start(component_class = nil, container: 'app', props: {}, &block)
+    # Export debug configuration to JavaScript
+    export_debug_config
+
+    # Initialize debug module in development mode
+    Funicular::Debug.expose_to_global if Funicular.env.development?
+
+    container_element = if container.is_a?(String)
+      JS.document.getElementById(container)
+    else
+      container
+    end
+
+    unless container_element
+      raise "Container element not found: #{container}"
+    end
+
+    # If block is given, use router mode
+    if block
+      router = Router.new(container_element)
+      @router = router
+      block.call(router)
+      router.start
+      return router
+    end
+
+    # Otherwise, mount single component (backward compatible)
+    if component_class
+      instance = component_class.new(props)
+      instance.mount(container_element)
+      return instance
+    end
+
+    raise "Either component_class or block must be provided"
+  rescue => e
+    puts "Exception in Funicular.start: #{e.message}"
+    puts e.backtrace
+    raise e
+  end
+
+  # Form builder configuration
+  class << self
+    attr_accessor :form_builder_config
+
+    def configure_forms
+      @form_builder_config ||= {
+        error_class: "text-red-600 text-sm mt-1",
+        field_error_class: "border-red-500"
+      }
+      yield @form_builder_config if block_given?
+    end
+  end
+
+  # Initialize default form configuration
+  configure_forms
+
+  # Debug highlighter configuration
+  class << self
+    attr_accessor :debug_color
+
+    def configure_debug
+      @debug_color = 'green'
+      yield self if block_given?
+    end
+  end
+
+  # Initialize default debug configuration
+  configure_debug
+
+  # Export debug_color to JavaScript global variable
+  def self.export_debug_config
+    if JS.global[:window]
+      JS.global[:window][:FUNICULAR_DEBUG_COLOR] = @debug_color # steep:ignore
+    end
+  end
+end

data/mrblib/http.rb

@@ -0,0 +1,89 @@
+module Funicular
+  module HTTP
+    class Response
+      attr_reader :data, :status, :ok
+
+      def initialize(status, data)
+        @status = status
+        @ok = @status >= 200 && @status < 300
+        @data = data
+      end
+
+      def error?
+        return true unless @ok
+        return false unless @data.is_a?(Hash)
+        @data["error"] || @data["errors"]
+      end
+
+      def error_message
+        return nil unless @data.is_a?(Hash)
+        @data["error"] || (@data["errors"].is_a?(Array) ? @data["errors"].join(", ") : @data["errors"])
+      end
+    end
+
+    def self.get(url, &block)
+      request("GET", url, nil, &block)
+    end
+
+    def self.post(url, body = nil, &block)
+      request("POST", url, body, &block)
+    end
+
+    def self.patch(url, body = nil, &block)
+      request("PATCH", url, body, &block)
+    end
+
+    def self.delete(url, &block)
+      request("DELETE", url, nil, &block)
+    end
+
+    def self.put(url, body = nil, &block)
+      request("PUT", url, body, &block)
+    end
+
+    # Get CSRF token from meta tag
+    # Note: Don't cache the token - Rails may rotate it after each request
+    def self.csrf_token
+      meta = JS.document.querySelector('meta[name="csrf-token"]')
+      if meta
+        # Use getAttribute method (direct method call on JS::Object)
+        token_obj = meta.getAttribute('content')
+        # Convert JS::Object to Ruby string
+        token_obj ? token_obj.to_s : nil
+      else
+        nil
+      end
+    end
+
+    private
+
+    def self.request(method, url, body, &block)
+      # @type var options: Hash[Symbol, String | Hash[String, String]]
+      options = { method: method, credentials: "include" }
+
+      headers = {} #: Hash[String, String]
+
+      if body
+        headers["Content-Type"] = "application/json"
+        options[:body] = JSON.generate(body)
+      end
+
+      # Add CSRF token for non-GET requests
+      if method != "GET"
+        token = csrf_token
+        headers["X-CSRF-Token"] = token if token
+      end
+
+      options[:headers] = headers unless headers.empty?
+
+      JS.global.fetch(url, options) do |response|
+        status = response.status.to_i
+        json_text = response.to_binary
+        data = JSON.parse(json_text)
+        # @type var status: Integer
+        http_response = Response.new(status, data)
+        block.call(http_response) if block
+      end
+    end
+  end
+end