Mochi

git clone http://github.com/yampug/mochi cd mochi task build

mochi --initialize="my_fancy_project"

class HelloWorld
  @tag_name = "hello-world"  # Web Component tag name

  def initialize
    # Set up initial state
  end

  def reactables
    []  # Array of reactive property names
  end

  def html
    %Q{
      <div class="greeting">
        <h1>Hello, Mochi!</h1>
        <p>Welcome to modern Ruby web development</p>
      </div>
    }
  end

  def css
    %Q{
      .greeting {
        background: #f0f0f0;
        padding: 1rem;
        border-radius: 8px;
      }
    }
  end
end

class Counter
  @tag_name = "my-counter"

  def initialize
    @count = 0
  end

  def reactables
    ["count"]  # Makes @count reactive
  end

  def html
    %Q{
      <div class="counter">
        <h2>Count: {count}</h2>
        <button on:click={increment}>Increment</button>
        <button on:click={decrement}>Decrement</button>
      </div>
    }
  end

  def css
    %Q{
      .counter {
        background: #fff;
        border: 2px solid #ff0068;
        padding: 1rem;
        text-align: center;
      }

      button {
        margin: 0.5rem;
        padding: 0.5rem 1rem;
      }
    }
  end

  def increment
    @count += 1
  end

  def decrement
    @count -= 1
  end

  def mounted
    puts "Counter component mounted!"
  end

  def unmounted
    puts "Counter component unmounted!"
  end
end

mochi -i "./lib" -o "./dist" -m -tc

class UserProfile
  @tag_name = "user-profile"

  def initialize
    @user_name = "Guest"
    @avatar_url = "/default-avatar.png"
    @online = false
  end

  def reactables
    ["user_name", "avatar_url", "online"]
  end

  def html
    %Q{
      <div class="profile">
        <img src="{avatar_url}" alt="Avatar">
        <h3>{user_name}</h3>
        <span class="status {online}">
          {online} ? "Online" : "Offline"
        </span>
        <button on:click={toggle_status}>Toggle Status</button>
      </div>
    }
  end

  def css
    %Q{
      .profile {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .status.true { color: green; }
      .status.false { color: gray; }
    }
  end

  def toggle_status
    @online = !@online
  end
end

<!-- Only renders when the "/" page is visited-->
<mochi-route match="/">
    <div>
        <h3>Home Page</h3>
        <p>This is the home page.</p>
    </div>
</mochi-route>

<!-- Only renders when the "/contact" page is visited-->
<mochi-route match="/contact">
    <div>
        <h3>Contact Page</h3>
        <p>Get in touch with us!</p>
    </div>
</mochi-route>

class PostList
  @tag_name = "post-list"

  def initialize
    @posts = []
    @loading = true
    @error = nil
  end

  def reactables
    ["posts", "loading", "error"]
  end

  def html
    %Q{
      <div class="post-list">
        <h2>Latest Posts</h2>
        {loading} ? "<p>Loading posts...</p>" : ""
        {error} ? "<p class='error'>Error: {error}</p>" : ""
        <div class="posts">
          <!-- Posts will be rendered here -->
        </div>
      </div>
    }
  end

  def mounted
    load_posts
  end

  private

  def load_posts
    begin
      fetcher = Fetcher.create
      config = FetchConfigBuilder.new().build()

      http_resp = fetcher.fetch("/api/posts", config).__await__

      if http_resp.ok
        @posts = http_resp.body_as_hash().__await__
        @loading = false
        puts "Loaded #{@posts.length} posts"
      else
        @error = "Failed to load posts: #{http_resp.status_text}"
        @loading = false
      end
    rescue => e
      @error = "Network error: #{e.message}"
      @loading = false
    end
  end
end

def create_post(title, content)
  config = FetchConfigBuilder.new()
    .set_method("POST")
    .set_headers({
      "Content-Type" => "application/json",
      "Authorization" => "Bearer #{@auth_token}"
    })
    .set_body(JSON.generate({
      title: title,
      content: content
    }))
    .build()

  fetcher = Fetcher.create
  http_resp = fetcher.fetch("/api/posts", config).__await__

  if http_resp.ok
    new_post = http_resp.body_as_hash().__await__
    puts "Created post: #{new_post['title']}"
  else
    puts "Failed to create post: #{http_resp.status_text}"
  end
end

mochi -i "./src" -o "./dist" -m

<!DOCTYPE html>
<html>
    <head>
      <title>My Mochi App</title>
    </head>
    <body>
      <!-- Your components can be used as HTML elements -->
      <my-counter></my-counter>
      <chart-demo></chart-demo>

      <!-- Load Opal runtime first -->
      <script src="/js/opal-runtime.js"
              onload='Opal.require("native"); Opal.require("promise"); Opal.require("browser/setup/full");'></script>

      <!-- Then load your compiled components -->
      <script src="/js/bundle.js"></script>
    </body>
</html>