get-smart 0.0.1

data/files/javascript/hotwire/advanced/stimulus_mutation_observer.md

@@ -0,0 +1,23 @@
+## 🔍 Stimulus Controller with MutationObserver
+Combine Stimulus with `MutationObserver` to react to Turbo Stream DOM changes inside your controller. Perfect for initializing third‑party libraries dynamically.
+
+```javascript
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.observer = new MutationObserver(() => this.initializeWidget())
+    this.observer.observe(this.element, { childList: true, subtree: true })
+  }
+
+  initializeWidget() {
+    // initialize or refresh your widget
+  }
+
+  disconnect() {
+    this.observer.disconnect()
+  }
+}
+```
+
+Attach this controller to any container receiving streamed content.

data/files/javascript/hotwire/advanced/streaming_large_payloads.md

@@ -0,0 +1,16 @@
+## 📡 Streaming Large Payloads via Turbo Streams
+For large binary or text data, chunk and stream parts as separate Turbo Stream messages. This reduces jank and keeps UI responsive.
+
+```ruby
+# controller
+def download
+  response.headers['Content-Type'] = 'text/vnd.turbo-stream.html'
+  self.response_body = Enumerator.new do |y|
+    File.open(@big_file, 'r').each(1.kilobyte) do |chunk|
+      y << turbo_stream.append('output', chunk)
+    end
+  end
+end
+```
+
+Turbo will append each chunk to your `#output` container in near real‑time.

data/files/javascript/hotwire/advanced/turbo_error_handling.md

@@ -0,0 +1,14 @@
+## 🚨 Error Handling in Turbo Stream Responses
+Catch server errors in Turbo Streams and display fallback UI. Add a global listener for `turbo:before-fetch-response`.
+
+```javascript
+document.addEventListener('turbo:before-fetch-response', (event) => {
+  const { fetchResponse } = event.detail
+  if (!fetchResponse.ok) {
+    event.preventDefault()
+    showErrorBanner(`Error ${fetchResponse.status}: ${fetchResponse.statusText}`)
+  }
+})
+```
+
+Preventing default stops Turbo from processing the stream, giving you control UI-side.

data/files/javascript/hotwire/advanced/turbo_frame_preload_cache.md

@@ -0,0 +1,23 @@
+## 📦 Preloading Turbo Frame Content with Cache
+Cache Turbo Frame responses in memory to avoid refetching when users toggle between frames. Manage a simple JS map keyed by URL.
+
+```javascript
+const frameCache = new Map()
+
+document.addEventListener("turbo:before-fetch-response", (event) => {
+  const { fetchResponse, fetchRequest } = event.detail
+  if (fetchRequest.url.includes('/dashboard/section')) {
+    frameCache.set(fetchRequest.url, fetchResponse.clone())
+  }
+})
+
+document.addEventListener("turbo:before-fetch-request", (event) => {
+  const url = event.detail.fetchOptions.url
+  if (frameCache.has(url)) {
+    event.preventDefault()
+    Turbo.renderStreamMessage(frameCache.get(url).text)
+  }
+})
+```
+
+This avoids duplicate HTTP calls for cached frames.

data/files/javascript/hotwire/advanced/turbo_native_integration.md

@@ -0,0 +1,14 @@
+## 📱 Integrating Turbo Native for Hybrid Apps
+Use Turbo Native to power your iOS/Android hybrid apps with your Rails back end. Customize the native view controller lifecycle hooks in JavaScript.
+
+```javascript
+document.addEventListener('turbo:visit', (event) => {
+  NativeBridge.postMessage('visitStarted', {url: event.detail.url})
+})
+
+document.addEventListener('turbo:load', () => {
+  NativeBridge.postMessage('pageLoaded')
+})
+```
+
+This lets the native layer display loading indicators or manage navigation stacks.

data/files/javascript/hotwire/beginner/basic_stimulus_controller.md

@@ -0,0 +1,19 @@
+## 🕹️ Create a Basic Stimulus Controller
+
+Generate a new controller and connect it to your HTML elements.
+
+```bash
+rails generate stimulus hello
+```  
+```javascript
+// app/javascript/controllers/hello_controller.js
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  connect() {
+    console.log("Hello, Stimulus!")
+  }
+}
+```  
+```erb
+<div data-controller="hello"></div>
+```

data/files/javascript/hotwire/beginner/basic_turbo_frame.md

@@ -0,0 +1,10 @@
+## 🔗 Wrap Content in a Turbo Frame
+
+Turbo Frames let you update only a section of the page. Wrap the content you want to target in a `<turbo-frame>` tag.
+
+```erb
+<turbo-frame id="notifications">
+  <%= render @notifications %>
+</turbo-frame>
+```  
+Now you can update the `notifications` frame independently from the rest of the page.

data/files/javascript/hotwire/beginner/disable_turbo_drive_on_link.md

@@ -0,0 +1,8 @@
+## 🔧 Disable Turbo Drive on a Specific Link
+
+Turbo Drive intercepts link clicks by default. To opt out for a specific link, add `data-turbo="false"`.
+
+```erb
+<%= link_to "Full reload page", some_path, data: { turbo: false } %>
+```  
+This will perform a full page load instead of a Turbo visit.

data/files/javascript/hotwire/beginner/importmap_pin_turbo.md

@@ -0,0 +1,13 @@
+## 📦 Pin Turbo with Importmap
+
+If you’re using Importmap instead of Webpacker, pin Turbo in `config/importmap.rb` so it’s available in your front-end code.
+
+```ruby
+# config/importmap.rb
+pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
+```  
+Then import it in `app/javascript/application.js`:
+
+```javascript
+import "@hotwired/turbo-rails"
+```

data/files/javascript/hotwire/beginner/install_hotwire.md

@@ -0,0 +1,12 @@
+## ⚙️ Install Hotwire in Rails
+
+Begin by adding Hotwire to your Rails application. Hotwire is split into Turbo and Stimulus, and you can install both with a single command.
+
+```bash
+gem 'turbo-rails'
+```  
+```bash
+bundle install
+rails turbo:install
+```  
+This will add the necessary gems, JavaScript packages, and update your application layout to include Turbo.

data/files/javascript/hotwire/beginner/install_stimulus.md

@@ -0,0 +1,8 @@
+## 🌱 Install Stimulus in Rails
+
+Stimulus is the JavaScript framework paired with Turbo. To install, run:
+
+```bash
+rails stimulus:install
+```  
+This command sets up the `controllers/` directory and imports Stimulus in your application JavaScript.

data/files/javascript/hotwire/beginner/render_turbo_stream_response.md

@@ -0,0 +1,17 @@
+## 📤 Render Turbo Stream Responses
+
+In your controller, respond to Turbo Stream requests with `format.turbo_stream`. Create a `.turbo_stream.erb` view to send updates back to the client.
+
+```ruby
+def create
+  @comment = @post.comments.create(comment_params)
+  respond_to do |format|
+    format.html { redirect_to @post }
+    format.turbo_stream
+  end
+end
+```  
+```erb
+<!-- app/views/comments/create.turbo_stream.erb -->
+<%= turbo_stream.append "comments", partial: "comments/comment", locals: { comment: @comment } %>
+```

data/files/javascript/hotwire/beginner/stimulus_actions.md

@@ -0,0 +1,19 @@
+## 🎬 Bind Events with Stimulus Actions
+
+Use `data-action` to connect DOM events to controller methods.
+
+```erb
+<button data-controller="counter"
+        data-action="click->counter#increment">
+  Click me
+</button>
+```  
+```javascript
+// app/javascript/controllers/counter_controller.js
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  increment() {
+    this.element.textContent = parseInt(this.element.textContent || 0) + 1
+  }
+}
+```

data/files/javascript/hotwire/beginner/stimulus_targets.md

@@ -0,0 +1,21 @@
+## 🎯 Define and Use Stimulus Targets
+
+Stimulus Targets let you reference elements in your controller.
+
+```javascript
+// app/javascript/controllers/form_controller.js
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static targets = ["input", "output"]
+  greet() {
+    this.outputTarget.textContent = `Hello, ${this.inputTarget.value}`
+  }
+}
+```  
+```erb
+<div data-controller="form">
+  <input data-form-target="input" type="text">
+  <button data-action="click->form#greet">Greet</button>
+  <div data-form-target="output"></div>
+</div>
+```

data/files/javascript/hotwire/beginner/stimulus_values.md

@@ -0,0 +1,26 @@
+## 🧮 Use Stimulus Values for Configuration
+
+Stimulus Values let you pass data into your controller in a typed manner.
+
+```javascript
+// app/javascript/controllers/clock_controller.js
+import { Controller } from "@hotwired/stimulus"
+export default class extends Controller {
+  static values = { interval: Number }
+  connect() {
+    this.tick()
+    this.timer = setInterval(() => this.tick(), this.intervalValue)
+  }
+  tick() {
+    this.element.textContent = new Date().toLocaleTimeString()
+  }
+  disconnect() {
+    clearInterval(this.timer)
+  }
+}
+```  
+```erb
+<div data-controller="clock"
+     data-clock-interval-value="1000">
+</div>
+```

data/files/javascript/hotwire/beginner/target_turbo_frame_navigation.md

@@ -0,0 +1,8 @@
+## 🚀 Navigate Within a Turbo Frame
+
+To load a link’s response into a specific frame, use `data-turbo-frame` with the frame’s ID.
+
+```erb
+<%= link_to "Load more posts", posts_path(page: 2), data: { turbo_frame: "posts" } %>
+```  
+The response will replace the contents of `<turbo-frame id="posts">`.

data/files/javascript/hotwire/beginner/turbo_form_remote_submission.md

@@ -0,0 +1,13 @@
+## 📝 Use Turbo for AJAX Form Submissions
+
+Turbo automatically intercepts form submissions. Simply wrap your form in a Turbo Frame or use `data-turbo="true"` for AJAX behavior.
+
+```erb
+<turbo-frame id="comment_form">
+  <%= form_with(model: [post, Comment.new]) do |f| %>
+    <%= f.text_area :body %>
+    <%= f.submit "Add Comment" %>
+  <% end %>
+</turbo-frame>
+```  
+The form will submit via AJAX and update the frame with the server response.

data/files/javascript/hotwire/beginner/turbo_programmatic_navigation.md

@@ -0,0 +1,12 @@
+## 🏃 Programmatic Navigation with Turbo.visit
+
+Turbo exposes a `Turbo.visit` method for navigating via JavaScript. Use it for custom link handling.
+
+```javascript
+import { Turbo } from "@hotwired/turbo-rails"
+
+document.getElementById("my-button").addEventListener("click", () => {
+  Turbo.visit("/dashboard")
+})
+```  
+This performs a Turbo Drive visit to `/dashboard`, updating the page without a full reload.

data/files/javascript/hotwire/beginner/turbo_stream_append.md

@@ -0,0 +1,10 @@
+## ➕ Append Elements with Turbo Stream
+
+Use `turbo_stream.append` in your `.turbo_stream.erb` to add new elements at the end of a list or container.
+
+```erb
+<%= turbo_stream.append "messages" do %>
+  <div id="message_<%= message.id %>"><%= message.body %></div>
+<% end %>
+```  
+The client will insert the new `<div>` inside `<turbo-frame id="messages">` or the element with ID `messages`.

data/files/javascript/hotwire/beginner/turbo_stream_remove.md

@@ -0,0 +1,8 @@
+## ❌ Remove Elements with Turbo Stream
+
+You can remove DOM elements by targeting their IDs in a `.turbo_stream.erb` template.
+
+```erb
+<%= turbo_stream.remove dom_id(@task) %>
+```  
+When the server renders this, Turbo will find and remove the HTML element matching that ID.

data/files/javascript/hotwire/expert/stimulus_reflex_hotwire.md

@@ -0,0 +1,27 @@
+## 🤝 Combine StimulusReflex with Hotwire for Ultra‑Fast Interactivity
+
+Use StimulusReflex actions to drive minimal server‑round trips, then fall back to Turbo Streams for partial DOM updates. This hybrid approach maximizes interactivity with stateful reflexes.
+
+```rb
+# app/reflexes/item_reflex.rb
+def increase_quantity(item_id)
+  item = Item.find(item_id)
+  item.increment!(:quantity)
+  morph "#item_#{item_id}", render(partial: "items/item", locals: { item: item })
+end
+```
+```js
+// controllers/item_controller.js
+import { Controller } from "@hotwired/stimulus";
+import StimulusReflex from "stimulus_reflex";
+
+export default class extends Controller {
+  connect() {
+    StimulusReflex.register(this);
+  }
+
+  increase() {
+    this.stimulate("ItemReflex#increase_quantity", this.data.get("id"));
+  }
+}
+```

data/files/javascript/hotwire/expert/stimulus_turbo_event_bridge.md

@@ -0,0 +1,24 @@
+## 🌀 Bridge Stimulus Controllers and Turbo via Custom Events
+
+Emit custom events in a Stimulus controller to trigger Turbo Drive navigations or frame updates without coupling to Turbo internals. Listening for custom events keeps your JS modular and testable.
+
+```js
+// controllers/navigation_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener("navigate-to", this.handleNavigate);
+  }
+
+  handleNavigate = (event) => {
+    window.Turbo.visit(event.detail.url);
+  }
+
+  triggerNavigation() {
+    this.element.dispatchEvent(new CustomEvent("navigate-to", {
+      detail: { url: "/reports" }, bubbles: true
+    }));
+  }
+}
+```

data/files/javascript/hotwire/expert/turbo_auth_redirect_handling.md

@@ -0,0 +1,13 @@
+## 🔐 Handle Authentication Redirects Gracefully in Turbo Drives
+
+Intercept 401/403 responses globally to redirect Turbo navigations to the login page, then replay the original intent on successful auth. This avoids broken pages and preserves user flow.
+
+```js
+addEventListener("turbo:fetch-response", async (event) => {
+  const response = event.detail.fetchResponse.response;
+  if (response.status === 401) {
+    event.preventDefault();
+    await window.Turbo.visit("/login?redirect_to=" + encodeURIComponent(window.location.pathname));
+  }
+});
+```

data/files/javascript/hotwire/expert/turbo_cable_namespace.md

@@ -0,0 +1,19 @@
+## 🏷️ Namespaced Turbo Stream Channels for Scalable Apps
+
+Prefix Turbo Stream broadcasts with dynamic targets and channels to avoid collisions in multi‑tenant or componentized views. Use string interpolation on both client and server sides.
+
+```erb
+<turbo-stream action="replace" target="comment_#{comment.id}_user_#{user.id}">
+  <template>
+    <%= render partial: "comments/comment", locals: { comment: comment } %>
+  </template>
+</turbo-stream>
+```
+
+```js
+consumer.subscriptions.create({ channel: "CommentsChannel", room: "post_#{postId}" }, {
+  received(data) {
+    window.Turbo.renderStreamMessage(data);
+  }
+});
+```

data/files/javascript/hotwire/expert/turbo_cache_control.md

@@ -0,0 +1,15 @@
+## 🗄️ Fine‑Tune Turbo Drive Caching Strategies
+
+Override the default cache behavior by listening to Turbo events and manually controlling snapshot storage. You can drop or replace snapshots for specific frames to avoid stale content.
+
+```js
+document.addEventListener("turbo:before-cache", () => {
+  // Remove dynamic elements before caching
+  document.querySelectorAll('.live-chart').forEach(el => el.remove());
+});
+
+document.addEventListener("turbo:visit", () => {
+  // Expire snapshot on certain visits
+  turbo.session.clearCache();
+});
+```

data/files/javascript/hotwire/expert/turbo_custom_validation.md

@@ -0,0 +1,25 @@
+## ✍️ Custom Form Validation with Turbo Streams
+
+Combine client‑side validation in Stimulus with Turbo Streams for server errors. Capture invalid fields and stream back per‑field errors without a full page reload.
+
+```js
+// controllers/form_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["input", "errors"];
+
+  async submit(event) {
+    event.preventDefault();
+    const formData = new FormData(this.element);
+    const response = await fetch(this.element.action, { method: "POST", body: formData });
+
+    if (response.ok) {
+      Turbo.visit(response.url);
+    } else {
+      const streams = await response.text();
+      window.Turbo.renderStreamMessage(streams);
+    }
+  }
+}
+```

data/files/javascript/hotwire/expert/turbo_debugging_profiling.md

@@ -0,0 +1,17 @@
+## 🐞 Debug Turbo Pipelines with Performance Tracing
+
+Instrument Turbo events and measure durations between `turbo:before-fetch-request` and `turbo:frame-render` to identify bottlenecks. Log timing data to your monitoring service.
+
+```js
+const timings = {};
+
+document.addEventListener("turbo:before-fetch-request", () => {
+  timings.start = performance.now();
+});
+
+document.addEventListener("turbo:frame-render", () => {
+  const elapsed = performance.now() - timings.start;
+  console.log(`Turbo frame render took ${elapsed.toFixed(2)}ms`);
+  // send to external monitoring
+});
+```

data/files/javascript/hotwire/expert/turbo_direct_upload_progress.md

@@ -0,0 +1,38 @@
+## 📤 Advanced File Upload Progress with Direct Uploads and Turbo Frames
+
+Combine Active Storage Direct Uploads with Stimulus to reflect real‑time progress inside a Turbo Frame. Listen to upload events and stream progress bars without full page refresh.
+
+```js
+import { Controller } from "@hotwired/stimulus";
+import { DirectUpload } from "@rails/activestorage";
+
+export default class extends Controller {
+  static targets = ["input", "progress"];
+
+  connect() {
+    this.inputTarget.addEventListener("direct-upload:initialize", (e) => {
+      this.progressTarget.value = 0;
+    });
+
+    this.inputTarget.addEventListener("direct-upload:progress", (e) => {
+      this.progressTarget.value = e.detail.progress;
+    });
+
+    this.inputTarget.addEventListener("direct-upload:end", () => {
+      this.progressTarget.value = 100;
+    });
+  }
+
+  upload() {
+    new DirectUpload(this.inputTarget.files[0], this.data.get("url"), this).create((error, blob) => {
+      if (!error) {
+        const hiddenField = document.createElement("input");
+        hiddenField.setAttribute("type", "hidden");
+        hiddenField.setAttribute("value", blob.signed_id);
+        this.element.appendChild(hiddenField);
+        this.element.requestSubmit();
+      }
+    });
+  }
+}
+```

data/files/javascript/hotwire/expert/turbo_fragment_caching.md

@@ -0,0 +1,11 @@
+## 🧩 Leverage Turbo Fragment Caching with Custom Keys
+
+Wrap expensive Turbo Stream partials in `fragment_cache` and provide custom cache keys based on multiple model timestamps. This reduces server render time for repeated updates.
+
+```erb
+<% cache([comment, user, cache_key_with_version(comment)]) do %>
+  <turbo-stream action="replace" target="comment_#{comment.id}">
+    <template><%= render partial: "comments/comment", locals: { comment: comment } %></template>
+  </turbo-stream>
+<% end %>
+```

data/files/javascript/hotwire/expert/turbo_frame_lazy_load.md

@@ -0,0 +1,30 @@
+## 🌱 Lazy‑Load Turbo Frames with IntersectionObserver
+
+Combine Turbo Frames with the Intersection Observer API to defer loading offscreen frames. This technique reduces initial payloads and accelerates perceived page load.
+
+```js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["frame"];
+
+  connect() {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.src = entry.target.dataset.src;
+          observer.unobserve(entry.target);
+        }
+      });
+    });
+
+    observer.observe(this.frameTarget);
+  }
+}
+```
+
+In your view:
+
+```erb
+<turbo-frame id="feed" data-controller="lazy-load" data-lazy-load-target="frame" data-src="/feed" src="about:blank"></turbo-frame>
+```

data/files/javascript/hotwire/expert/turbo_low_level_api.md

@@ -0,0 +1,16 @@
+## 🔧 Use Low‑Level Turbo API for Maximal Control
+
+Tap into `window.Turbo.controllerAdapters` and `Turbo.session` internals to create custom drive behaviors, like selective snapshotting or on‑the‑fly link rewriting.
+
+```js
+// Override link click behavior globally
+Turbo.session.drive = true;
+
+Turbo.session.adapter.visitProposedToLocation = (anchor, location) => {
+  if (location.includes("/admin")) {
+    window.location = location; // bypass turbo for admin
+  } else {
+    Turbo.session.adapter.visitProposedToLocation(anchor, location);
+  }
+};
+```

data/files/javascript/hotwire/expert/turbo_native_mobile.md

@@ -0,0 +1,24 @@
+## 📱 Integrate Turbo Native for Hybrid Mobile Experiences
+
+Use Turbo Native on iOS/Android to bridge your Rails backend with a native shell. Customize webview hooks to handle deep links, custom headers, and offline caching.
+
+```swift
+// iOS: AppDelegate.swift
+turboSession.webViewConfiguration.applicationNameForUserAgent = "MyApp/1.0"
+
+turboSession.visit(URL(string: "https://example.com/dashboard")!)
+```  
+```kotlin
+// Android: MainActivity.kt
+val session = TurboSession.create(this, view)
+session.webView.webViewClient = object : TurboWebViewClient(session) {
+  override fun shouldOverrideUrlLoading(
+    view: WebView, request: WebResourceRequest
+  ): Boolean {
+    if (request.url.host == "example.com") return false
+    // handle external links
+    return true
+  }
+}
+session.loadUrl("https://example.com/dashboard")
+```

data/files/javascript/hotwire/expert/turbo_optimistic_ui.md

@@ -0,0 +1,29 @@
+## ⚡️ Implement Optimistic UI Updates in Turbo Frames
+
+Intercept form submissions in a custom Stimulus controller to speculatively render a loading state before the server response arrives. If the request succeeds, replace the frame content; on failure, revert back to the original HTML.
+
+```js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["form", "frame"];
+
+  async submit(event) {
+    event.preventDefault();
+    const originalHTML = this.frameTarget.innerHTML;
+    this.frameTarget.innerHTML = '<div class="loading">Saving...</div>';
+
+    const response = await fetch(this.formTarget.action, {
+      method: this.formTarget.method,
+      body: new FormData(this.formTarget)
+    });
+
+    if (response.ok) {
+      const html = await response.text();
+      this.frameTarget.outerHTML = html;
+    } else {
+      this.frameTarget.innerHTML = originalHTML;
+    }
+  }
+}
+```

data/files/javascript/hotwire/expert/turbo_stream_batch_updates.md

@@ -0,0 +1,20 @@
+## 🚀 Batch Update Multiple DOM Targets with Turbo Streams
+
+Leverage the `window.Turbo.renderStreamMessage` API to send multiple Turbo Stream actions in one payload, reducing round‑trips and improving perceived performance. You can compose multiple `<turbo-stream>` tags as a single string and render them atomically on the client.
+
+```js
+const stream = `
+  <turbo-stream action="replace" target="user_list">
+    <template>
+      ${userListHTML}
+    </template>
+  </turbo-stream>
+  <turbo-stream action="append" target="notifications">
+    <template>
+      <p>New real-time alert!</p>
+    </template>
+  </turbo-stream>
+`;
+
+window.Turbo.renderStreamMessage(stream);
+```