rails_hotwire_notes.txt

Channels (Action Cable)
========================================================================

> rails g channel room

app/channels
├── application_cable
│   ├── channel.rb		*
│   └── connection.rb	*
└── room_channel.rb <----------


app/javascript/channels
├── consumer.js
├── index.js
└── room_channel.js	<----------

Now, 

channel.rb:

	module ApplicationCable
	  class Channel < ActionCable::Channel::Base
	  end
	end

connection.rb:

module ApplicationCable

  class Connection < ActionCable::Connection::Base
    identified_by :current_user
    def connect
      logger.info "========================== connected"
      # logger.info env['warden'].user.id
      self.current_user = find_verified_user		<-- used with devise
      logger.add_tags 'ActionCable', current_user.id
    end

    protected

    def find_verified_user # this checks whether a user is authenticated with devise
      if verified_user = env['warden'].user
        verified_user
      else
        reject_unauthorized_connection
      end
    end
  end
end

room_channel.rb:

	class RoomChannel < ApplicationCable::Channel
	  def subscribed
		stream_from "room_channel"		<-----------------
	  end

	  def unsubscribed
		# Any cleanup needed when channel is unsubscribed
	  end
	end

----

room_channel.js:

	import consumer from "./consumer"

	consumer.subscriptions.create("RoomChannel", {
	  connected() {
		// Called when the subscription is ready for use on the server
		console.log("connected")
	  },

	  disconnected() {
		// Called when the subscription has been terminated by the server
	  },

	  received(data) {
		// Called when there's incoming data on the websocket for this channel
	  }
	});


- From anywhere in rails, do

    ActionCable.server.broadcast "room_channel", message: "helllo"

# This will be captured inside room_channel.js:

	received(data) {
		// Called when there's incoming data on the websocket for this channel
		
		--> data['message']
	}

- To send a message from client to server (channel).

    consumer.send({
		command: 'message', data: JSON.stringify({	
			message: 'This is a cool chat app.'
		}), 
		identifier: JSON.stringify({
			channel: "RoomChannel"
		})
	});





Stimulus
========================================================================

# # https://www.stimulus-components.com/docs/stimulus-lightbox/


# After setting up your rails with stimulus (Rails 7 by defualt)
- You need to know that Turbolinks and UJS Replaced by Turbo and Stimulus


	├── application.js
	├── controllers
	│   ├── application.js
	│   ├── hello_controller.js
	│   └── index.js
	└── lib.js	// ignore

	application.js:
	
		// Entry point for the build script in your package.json
		import "@hotwired/turbo-rails"
		import "./controllers"
	
		# add this to capture whenever turbolink is loaded
		# check other events
		# with jQuery
		$(document).on('turbo:load', function() {})	
		
		# Or vanilla
		document.addEventListener("turbo:before-cache", function() {})
		document.addEventListener("turbo:load", function() {})
	
	
	controllers/index.js
	
		// This file is auto-generated by ./bin/rails stimulus:manifest:update
		// Run that command whenever you add a new controller or create them with
		// ./bin/rails generate stimulus controllerName

		import { application } from "./application"

		import HelloController from "./hello_controller"
		application.register("hello", HelloController);

	controllers/application.js

		import { Application } from "@hotwired/stimulus"

		const application = Application.start()

		// Configure Stimulus development experience
		application.debug = false
		window.Stimulus   = application

		export { application }

	controllers/hello_controller.js
			
		import { Controller } from "@hotwired/stimulus"

		export default class extends Controller {
		  connect() {
			this.element.textContent = "Hello World!"	// this will replace everything inside the controller element
		  }
		}


- create a new controller. app/javascript/controllers/demo_controller.js:

	import { Controller } from "@hotwired/stimulus"

	export default class extends Controller {
		connect() {
			this.element.textContent = "Hello World!"
		}
	  
		# conditional loading .. return true to load
		static get shouldLoad() {
			return true;	// false
		}
	}
	
	- this includes a list of properties to be used
	
		this.application		-> stimulus application instance
		this.element			-> html element and therefor you can read the id
		this.element.dataset	-> to read values of data-id="1" as this.element.dataset.id
		this.element.value		-> to read the value of element (input field)
	

- Register the controller in index.js

	import DemoController from "./demo_controller"
	application.register("demo", DemoController);
	
	# If you use Stimulus for Rails with an import map or Webpack together with the @hotwired/stimulus-webpack-helpers package, 
	your application will automatically load and register controller classes following the conventions above.
	# In our case (esbuild) If not, your application must manually load and register each controller class.

- View

	<div id="1" data-id="1" data-controller="demo">
	</div>

	# You can have as many views you want in the same page, all will be activated by the same controller
	# check for which element
	
		connect() {
			this.element.dataset.id	--> 1
		
			const element = this.element;
			const data = element.dataset;
			const id = element.id	# this is possible if used id=""

			if (data.id == 1) {
			  element.textContent = "Hello 1"
			} else {
			  element.textContent = "Hello 2"
			}
		}

- Controllers


	# identifiers naming
		
		controllers/demo_controller.js -> data-controller="demo"
		
		clipboard_controller.js 		clipboard
		date_picker_controller.js 		date-picker
		users/list_item_controller.js 	users--list-item	<-----
		local-time-controller.js 		local-time	

	# scope

		# Everything inside this div within the scope of controller including the parent
		<div data-id="1" data-controller="demo">	
			<h1>Hello</h1>	
		</div>

		# nested
		<ul id="parent" data-controller="list">
		  <li data-list-target="item">One</li>
		  <li>
			<ul id="child" data-controller="list">
			  <li data-list-target="item">I am</li>			<------ not part of parent scope
			</ul>
		  </li>
		</ul>	

		# you can have multiple controllers, also you can have multiple elements on the page reference to the same controller
		<div data-controller="clipboard list-item"></div>
		
	# cross controllers communications

		# The Controller class has a convenience method called (dispatch)
		# Both controllers need to be set on the same view (scope)

		class ClipboardController extends Controller {
		  static targets = [ "source" ]

		  copy() {
			  
			# dispatch event called "copy" 
			# with payload in detail: { content: this.sourceTarget.value }
			this.dispatch("copy", { target: document, detail: { content: this.sourceTarget.value } })		--> read the value in input field 
																											--> <input data-clipboard-target="source" type="text" value="1234" readonly>		
			this.sourceTarget.select()
			document.execCommand("copy")	<-- execute the command dispatch copy
		  }
		}
		
		class EffectsController extends Controller {
		  flash({ detail: { content } }) {
			// e.detail.content
			// e.target	-----> the sender element	(clipboard) .. tyou can pass document { target: document, detail: { content: this.sourceTarget.value } }
			// e.params
			// e.type	-----> clipboard:copy
			
			console.log(content) // 1234
		  }
		}

		<div data-controller="clipboard effects" data-action="clipboard:copy->effects#flash">	2 --> this will call flash method once clipboard.copy id dispatched !!
		  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
		  <button data-action="clipboard#copy">Copy to Clipboard</button>						1 --> this will invoke method copy()
		</div>
		
		# For distant controllers / views use @document
		
		data-action="clipboard:copy@document->effects#flash"	
		


	# Directly Invoking Other Controllers

		class MyController extends Controller {
		  static targets = [ "other" ]							 

		  copy() {
			const otherController = this.application.getControllerForElementAndIdentifier(this.otherTarget, 'other')
			otherController.otherMethod()	
		  }
		}	
		
		
	# a batter way 
	
	export default class extends Controller {
		connect () {
			this.element[this.identifier] = this
		}

		name () {
			this.element.innerHTML = `I am ${this.element.dataset.name}.`
		}
	}

	// index.html
	<div id="person" data-controller="test" data-name="Steve"></div>
		
	// run this in your console
	document.querySelector('#person').test.name()
	
		
	# https://www.betterstimulus.com/interaction/controller-dom-mapper.html


	#### be aware of the  Turbolinks’ preview cache
	*********************************************
	[D]uring standard navigation (via Application Visits), Turbolinks will immediately restore the page from cache and display it as a preview while simultaneously loading a fresh copy from the network. This gives the illusion of instantaneous page loads for frequently accessed locations.

	when dealing with action generated from a link with href="#" .. use in action fun:
	
		event.preventDefault()

	You can disable preview
		
		<meta name="turbo-cache-control" content="no-preview">
	
	Or disable caching completely 
	
		<meta name="turbo-cache-control" content="no-cache">

	Set these meta data for certain pages, or all pages except --> use content_for



	# Callbacks

		initialize() 								Once, when the controller is first instantiated
		[name]TargetConnected(target: Element) 		Anytime a target is connected to the DOM
		connect() 									Anytime the controller is connected to the DOM
		[name]TargetDisconnected(target: Element) 	Anytime a target is disconnected from the DOM
		disconnect() 								Anytime the controller is disconnected from the DOM


		- So if you have
		
			static targets = [ "name", "output" ]		-->		<input data-hello-target="name" type="text">
															<h2 data-hello-target="output"></h2>
		This will be called:
		
			nameTargetConnected(e) {
				console.log("name ......... connected");
				e.value = "45"	// initial value
			}
		
	# Params (within controller)
	
		<div data-controller="demo" data-id="1" data-demo-page="1" data-demo-some-param="3" data-id="1">
		
		# can be captured
		
			this.element.dataset.id
			this.element.dataset.demoPage
			this.element.dataset.demoSomeParam
		
		
	# state
	
		<div data-controller="slideshow" data-index="1">
		
		initialize() {
			this.index = Number(this.element.dataset.index)	// whatever variable
		}	
		
		# you can use values
				
		
- Actions

	# view
	<div data-controller="gallery">
		<button data-action="click->gallery#next">…</button>
	</div>
	
	# gallery_controller.js
	next(event) {
		// …
		// event.type 	The name of the event (e.g. "click")
		// event.target 	The target that dispatched the event (i.e. the innermost element that was clicked)
		// event.currentTarget 	The target on which the event listener is installed (either the element with the data-action attribute, or document or window)
		// event.params 	The action params passed by the action submitter element
		
		// event.preventDefault() 	Cancels the event’s default behavior (e.g. following a link or submitting a form)
		// event.stopPropagation() 	Stops the event before it bubbles up to other listeners on parent elements
		
		// event.stopImmediatePropagation()	This will ignore any further actions (multiple actions)
	}

	# click here can be removed for certain element to use the default
	
		click->gallery#next	
	
	# defaults
	
		a 					click
		button 				click
		details				toggle	// what is this ?
		form 				submit
		input 				input
		input type=submit 	click
		select 				change
		textarea 			input
		
	# Global Events
	# You can append @window or @document to the event name in an action descriptor to install the event listener on window or document
		
		data-action="resize@window->gallery#layout"
		
	# options
	# check https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters
	
		data-action="scroll->gallery#layout:!passive"
		
		:capture 	{ capture: true }
		:once 	{ once: true }
		:passive 	{ passive: true }
		:!passive 	{ passive: false }

	# you can have multiple actions
	
		<input type="text" data-action="focus->field#highlight input->search#update">

	# Params - How to read params from events
	
		<div data-controller="demo" data-demo-some-param="3" data-id="1">	--> e.params.some
	
		data-[controller]-id-param="12345" 						123 		Number
		data-[controller]-url-param="/votes" 					"/votes" 	String
		data-[controller]-payload-param='{"value":"1234567"}' 	{ value: 1234567 } 	Object
		data-[controller]-active-param="true" 					true 	Boolean

		# from controller
		func(e) {
			e.params.url	--> "/votes" 
		}
	
		# shortcut to read only params from event
		upvote({ params }) {
		  // { id: 12345, url: "/votes", active: true, payload: { value: 1234567 } }
		  console.log(params) 
		}		
	
		upvote({ params: { id, url } }) {
		  console.log(id) // 12345
		  console.log(url) // "/votes"
		}


- Targets
	
	# Targets let you reference important elements by name.
	# https://www.npmjs.com/package/stimulus-data-bindings

	<input type="text" data-search-target="query">
	
	# to read it from controller
	
		const tragets = ['search']
		...		
		this.searchTarget
	
	# As 
	
		Kind 		Name 					Value
		---------------------------------------------------------------------
		Singular 	this.[name]Target 		The first matching target in scope
		Plural 		this.[name]Targets 		An array of all matching targets in scope
		Existential this.has[Name]Target 	A boolean indicating whether there is a matching target in scope
											# if (this.hasResultsTarget) { this.resultsTarget.innerHTML = "…"}

	# properites
	
		this.searchTarget.textContent
		this.searchTarget.value
		
		# Yes since the target here is an HTML element .. 

	# Shared Targets
	
		<form data-controller="search checkbox">
		  <input type="checkbox" data-search-target="projects" data-checkbox-target="input">
		  <input type="checkbox" data-search-target="messages" data-checkbox-target="input">
		  …
		</form>		

		# Inside the checkbox controller, this.inputTargets returns an array with both checkboxes.


	# Optional
	
		if (this.hasResultsTarget) {
		  this.resultsTarget.innerHTML = "…"
		}

	﹟Connected and Disconnected Callbacks
	
		# Target element callbacks let you respond whenever a target element is added or removed within the controller’s element.
		
		export default class extends Controller {
		  static targets = [ "item" ]

		  itemTargetConnected(element) {
			this.sortElements(this.itemTargets)
		  }

		  itemTargetDisconnected(element) {
			this.sortElements(this.itemTargets)
		  }

		  // Private
		  sortElements(itemTargets) { /* ... */ }
		}
	

- Values

	# You can read and write HTML data attributes on controller elements as typed values using special controller properties.
	# Example

		<div id="1" data-id="1" data-demo-url-value="/messages" data-controller="demo">
		</div>

	# You can have as many views you want in the same page, all will be activated by the same controller
	# check for which element
	
		static values = {
			url: String			--> this will read data-demo-url-value
									# contentType --> data-demo-content-type-value 
		}

		connect() {
			// this.element.dataset.id	--> 1
			fetch(this.urlValue).then(/* … */)
		}	
	
	# definition
	
		static values = {
			url: String,	// OR 	url: { type: String, default: '/bill' },
			interval: Number,
			params: Object
		  }	

	# types
	
		Array 		JSON.stringify(array) 	JSON.parse(value						[]
		Boolean 	boolean.toString() 		!(value == "0" || value == "false")		false
		Number 		number.toString() 		Number(value)							0
		Object 		JSON.stringify(object) 	JSON.parse(value)						{}
		String 		Itself 					Itself									""

	﹟Properties and Attributes

		Getter 		this.[name]Value 		Reads data-[identifier]-[name]-value
		Setter 		this.[name]Value= 		Writes data-[identifier]-[name]-value
		Existential this.has[Name]Value 	Tests for data-[identifier]-[name]-value

	# Callbacks
	
		export default class extends Controller {
		  static values = { url: String }

		  urlValueChanged(value, previousValue) {
			/* … */
		  }
		}


- Working With External Resources

	# fetch

		<div data-controller="content-loader"
		 data-content-loader-url-value="/messages.html"></div>

		fetch(this.urlValue)
		  .then(response => response.text())
		  .then(html => this.element.innerHTML = html)

		# to read json 
		<div data-controller="content-loader"
		 data-content-loader-url-value="/messages.json"></div>
		
		fetch(this.urlValue)
		  .then(response => response.json())
		  .then(data => {
			console.log(data);
		  })
	
	# releasing resources
	# you might run some interval to reload certain data every certain time

		connect() {
			this.refreshTimer = startRefreshing() {
				setInterval(() => {
				  this.load()
				}, this.refreshIntervalValue)
			}
		}
	
		disconnect() {
			if (this.refreshTimer) {
			  clearInterval(this.refreshTimer)
			}
		}



Good references
# https://www.betterstimulus.com/


Confirm Message Example
------------------------------------------------------------------------

- Link

	<%= link_to "Delete", message, method: :delete, data: { :turbo_method => :delete, :turbo_confirm => "Are you sure"} %>

- With controller

	<%= link_to "Delete", message, method: :delete, data: { :turbo_method => :delete, :turbo_confirm => "Are you sure"} %>
	<%= link_to "Delete", message, method: :delete, data: { :turbo_method => :delete,  action: "click->messages#delete" }  do %>

# Make sure to register it
messages_controller.js:

	import { Controller } from "@hotwired/stimulus"
	export default class extends Controller {
	  delete(event) {
		let confirmed = confirm("Are you sure ?");
		if(!confirmed) {
		  event.preventDefault();
		}
	  }
	}





Turbo
========================================================================
# Turbo bundles several techniques for creating fast, modern, progressively enhanced web applications without using much JavaScript.
# all the logic in front-end
# With Turbo, you let the server deliver HTML directly, which means all the logic for checking permissions, interacting directly with your domain model, and everything else that goes into programming an application can happen more or less exclusively within your favorite programming language.

- Turbo Drive accelerates links and form submissions by negating the need for full page reloads.
- Turbo Frames decompose pages into independent contexts, which scope navigation and can be lazily loaded.
- Turbo Streams deliver page changes over WebSocket, SSE or in response to form submissions using just HTML and a set of CRUD-like actions.
- Turbo Native lets your majestic monolith form the center of your native iOS and Android apps, with seamless transitions between web and native sections.

** It's all done by sending HTML over the wire. And for those instances when that's not enough, you can reach for the other side of Hotwire, and finish the job with Stimulus.

# https://github.com/jasonfb/hot-glue	(commercial)
# https://www.colby.so/posts/turbo-frames-on-rails

- Turbo is composed of Turbo Drive, Turbo Frames, Turbo Streams, and Turbo Native. 
- Each is a valuable piece of the puzzle but today we’re going to focus on Turbo Frames.


- Turbo Drive
-------------------------------------------------------------------------
- Turbo Drive gives you that same speed by using the same persistent-process model, but without requiring you to craft your entire application around the paradigm. 
- There’s no client-side router to maintain, there’s no state to carefully manage. 
- The persistent process is managed by Turbo, and you write your server-side code as though you were living back in the early aughts – blissfully isolated from the complexities of today’s SPA monstrosities!

- There are two types of visit: 
	- an application visit, which has an action of advance or replace, 
	- and a restoration visit, which has an action of restore.

- Application visit

	- network request
	- When the response arrives, Turbo Drive renders its HTML and completes the visit.

	Turbo.visit(location)
	
	# Preview
	# If possible, Turbo Drive will render a preview of the page from cache immediately after the visit starts. 
	# This improves the perceived speed of frequent navigation between the same pages.
	
	- If the visit’s location includes an anchor, Turbo Drive will attempt to scroll to the anchored element. Otherwise, it will scroll to the top of the page.
	- Uses: history.pushState.
	
	-You may wish to visit a location without pushing a new history entry onto the stack.
	
	Turbo.visit("/edit", { action: "replace" }) --> <a href="/edit" data-turbo-action="replace">Edit</a>
	
	
	Turbo.clearCache()				# Removes all entries from the Turbo Drive page cache. Call this when state has changed on the server that may affect cached pages.
	Turbo.setProgressBarDelay(ms)	# Sets the delay after which the progress bar will appear during navigation, in milliseconds. 
	Turbo.session.drive = false		# Turns Turbo Drive off by default. You must now opt-in to Turbo Drive on a per-link and per-form basis using data-turbo="true"
	
	
- Restoring

	Restoration visits have an action of restore and Turbo Drive reserves them for internal use. 
	You should not attempt to annotate links or invoke Turbo.visit with an action of restore.
	
	Turbo.visit("/edit", { action: "restore" })
	
- Canceling Visits Before They Start

	- Listen for the turbo:before-visit event to be notified when a visit is about to start, and use event.detail.url
	
	turbo:before-visit --> event.preventDefault()
	
- Pausing render 
	
	turbo:before-render --> event.preventDefault() --> event.detail.resume()
	
	document.addEventListener('turbo:before-render', async (event) => {
	  event.preventDefault()
	  await animateOut()
	  event.detail.resume()
	})
	
- Pausing Requests
	
	turbo:before-fetch-request --> event.preventDefault() --> event.detail.resume()
	
	document.addEventListener('turbo:before-fetch-request', async (event) => {
	  event.preventDefault()

	  const token = await getSessionToken(window.app)
	  event.detail.fetchOptions.headers['Authorization'] = `Bearer ${token}`

	  event.detail.resume()
	})
	
- Performing Visits With a Different Method
	
	<a href="/articles/54" data-turbo-method="delete">Delete the article</a>
	
- Disabling Turbo Drive on Specific Links or Forms

	<a href="/" data-turbo="false">Disabled</a>

	<form action="/messages" method="post" data-turbo="false">
	...
	</form>

	<div data-turbo="false">
	  <a href="/">Disabled</a>
	  <a href="/" data-turbo="true">Enabled</a>
	  <form action="/messages" method="post">
		...
	  </form>
	</div>

	- If you want Drive to be opt-in rather than opt-out, then you can set Turbo.session.drive = false; then, data-turbo="true" is used to enable Drive on a per-element basis. 
	- If you’re importing Turbo in a JavaScript pack, you can do this globally:

	import { Turbo } from "@hotwired/turbo-rails"
	Turbo.session.drive = false

- Displaying Progress

	During Turbo Drive navigation, the browser will not display its native progress indicator. 
	Turbo Drive installs a CSS-based progress bar to provide feedback while issuing a request.
	It appears automatically for any page that takes longer than 500ms to load. (You can change this delay with the Turbo.setProgressBarDelay method.)
	The progress bar is a <div> element with the class name turbo-progress-bar. Its default styles appear first in the document and can be overridden by rules that come later.
	
	<div class="turbo-progress-bar"></div>

- Reloading When Assets Change

	Turbo Drive can track the URLs of asset elements in <head> from one page to the next and automatically issue a full reload if they change.
	
	<head>
	  ...
	  <link rel="stylesheet" href="/application-258e88d.css" data-turbo-track="reload">
	  <script src="/application-cbd3cd4.js" data-turbo-track="reload"></script>
	</head>

	Ensuring Specific Pages Trigger a Full Reload
	
	<meta name="turbo-visit-control" content="reload">

- Setting a Root Location

	<head>
	  ...
	  <meta name="turbo-root" content="/app">
	</head>

- Form Submissions

	Form submissions can issue stateful requests using the HTTP POST method
	Link clicks only ever issue stateless HTTP GET requests.

	Events:
	
		turbo:submit-start
		turbo:before-fetch-request
		turbo:before-fetch-response
		turbo:submit-end

	During a submission, Turbo Drive will set the “submitter” element’s disabled attribute when the submission begins, then remove the attribute after the submission ends
	Submitter ->  HTMLFormElement.requestSubmit()
	
	addEventListener("turbo:submit-start", ({ target }) => {
	  for (const field of target.elements) {
		field.disabled = true
	  }
	})




- Turbo Frames: Decompose complex pages
-------------------------------------------------------------------------

- turbo-rails

	# https://github.com/hotwired/turbo-rails

		import { Turbo } from "@hotwired/turbo-rails"
		Turbo.session.drive = false

		Then you can use data-turbo="true" to enable Drive on a per-element basis.

		<%# app/views/todos/show.html.erb %>
		<%= turbo_frame_tag @todo do %>
		  <p><%= @todo.description %></p>

		  <%= link_to 'Edit this todo', edit_todo_path(@todo) %>
		<% end %>

		<%# app/views/todos/edit.html.erb %>
		<%= turbo_frame_tag @todo do %>
		  <%= render "form" %>

		  <%= link_to 'Cancel', todo_path(@todo) %>
		<% end %>


- Turbo Frames allow predefined parts of a page to be updated on request.
- Any links and forms inside a frame are captured, and the frame contents automatically updated after receiving a response. 
- Regardless of whether the server provides a full document, or just a fragment containing an updated version of the requested frame, only that particular frame will be extracted from the response to replace the existing content.
- Frames are created by wrapping a segment of the page in a <turbo-frame> element.

- At a high level, Turbo Frames are pieces of a webpage that can be updated independently, without impacting the rest of the content on the page.
- Links and forms within a frame will, by default, attempt to update only the content of the containing frame, whether the server sends a completely new HTML document or only a page fragment.
		
- Overview

		<%= turbo_frame_tag @message, :data => {:controller => "message"}  do %>
			
			<%= render @message %>
			
			<%= link_to "Edit this message", edit_message_path(@message)  %> |
			<%= link_to "Back to messages", messages_path, "data-turbo-frame": "_top" %> |
			<%= button_to "Delete", @message, method: :delete, data: { :action => "click->message#delete", :turbo => false }  %>	
		<% end %>

	- Notice the click->message#delete is a stimulus controller call

		==

		<turbo-frame id="message_1" data-controller="message">
			<!-- render messages/message -->		
		</turbo-frame>

	- When src is supplied, the frame will be populated after the initial page load via a separate HTTP request to the frame’s 
	
		<%= turbo_frame_tag "messages", src: messages_path  do %>
		<% end %>

		= 
		
		<turbo-frame id="messages">
		  <!-- A list of messages, perhaps -->
		</turbo-frame>


*- Navigating within frames

	- By default, links and forms within a Turbo Frame will perform the navigation within the frame, rather than performing a full page turn.
	
		<% @messages do |message| %>
		  <%= turbo_frame_tag message do %>
			<div>
			  <%= link_to message.body, edit_message_path(message) %>	--> this will load the edit form of this comment and replace it with original content
			</div>
		  <% end %>
		<% end %>

		=
		
		<turbo-frame id="message_1">
		  <div>
			<a href="/messages/1/edit">Message 1</a>
		  </div>
		</turbo-frame>

	- The Turbo Frame request is a normal HTML request with an additional Turbo-Frame header included in the request, with a value that matches the id of the target Turbo Frame.
	- You can identify if the request coming from a frame
	
		if turbo_frame_request?
		  render partial: "some_turbo_frame_partial"
		else
		  render partial: "some_other_partial"
		end

	- But it''s better to use the turbo_stream . variant to detect if request coming from a frame (dealing with turbo_streams) - see conditional template rendering using variants

    # When receving response  
	# Here Turbo Drive will do it's job and replaces the content of the target frame, leaving the rest of the page untouched.

	- The edit view could contain something like this.
	
		<%= turbo_frame_tag @message do %>
		  <%= form_with(model: @message) do |form| %>
			............
		  <% end %>
		<% end %>	

	- This will replace the frame tag of the related comment id 
	- Notice the request was a normal get to edit page request
	
		  # GET /messages/1/edit
		  def edit
		  end

	- From the server, you might redirect the user to the show page of the comment in the example (Create / POST)
	- When the request occurs within a Turbo Frame, a “redirect” still occurs, but rather than redirecting the page in the browser, the redirect is followed, the new HTML content is sent from the server, and that HTML is used to update the frame.
	
		  # POST /messages or /messages.json
		  def create
			@message = Message.new(message_params)
			respond_to do |format|
			  if @message.save
				format.html { redirect_to message_url(@message), notice: "Message was successfully created." }
				format.json { render :show, status: :created, location: @message }
			  else
				format.html { render :new, status: :unprocessable_entity }
				format.json { render json: @message.errors, status: :unprocessable_entity }
			  end
			end
		  end	
	
	- Therefor the view page will look like this
	
		<%= turbo_frame_tag @comment do %>
		  <div>
			<%= link_to @comment.body, edit_comment_path(@comment) %>
		  </div>
		<% end %>
		

- Breaking out of a frame
	
	<%= link_to comment.body, edit_comment_path(comment), data: { turbo_frame: "_top" } %>
	
	<%= turbo_frame_tag 'new_search', target: '_top' do %>
		<!-- any link inside will break the frame -->
	<% end %>
		
- Targeting a frame from the outside

	<a href="user/1/favorites" data-turbo-frame="main">
      Favorites
    </a>
	<turbo-frame id="main"></turbo-frame>
	
- Lazy loading Frames

	<%= turbo_frame_tag "lazy_frame", src: comments_path, loading: "lazy" do %>
	  <div>I'm a loading spinner</div>
	<% end %>
	
- Frame events (to be used by stimulus)

    turbo:frame-render
    turbo:frame-load

	document.addEventListener("turbo:frame-render", function(event) {
		console.log("turbo:frame-render")
		console.log(event.target)
	})

	Also, it will add a new attribute 'busy' while frame is loading, and rem,oved after done

- Refreshing Frames

	- In ideal circumstances, a Turbo Stream broadcast automatically updates the contents of the frame without needing a manual refresh, we don’t always get to work in ideal circumstances.
	- In this example
	
	<%# app/views/games/show.html.erb %>
	<%= turbo_frame_tag @game do %>
	  <div><%= @game.home_score %></div>
	  <div><%= @game.away_score %></div>
	  <%= link_to "Update score", game_path(@game) %>
	<% end %>
	
	- When you click update, the turbo-frame will be updated with an src like this:
	
	<turbo-frame id="game_10" reloadable="" src="http://localhost:3000/games/10">


- Conditional template rendering using variants

	- Now we need to understand the following:
		- Incoming links and form submites (GET, DELETE, POST). 
		- Are they within turbo_frame tag ? is the link turbo_link enabled / not, which target ? "data-turbo-frame": "_top" ?
		- What respond_to will be used for each link type: html, json, turbo_stream
		- what is the expected response: html page render / partial, redirect, turbo_stream inline, turbo_stream page ?
	
		* Note that this approach only works with form submissions with a method of POST, PUT, PATCH, or DELETE. By design, Not GET
	
	- As you use Turbo Frames in Rails, you’ll eventually run into the desire to have a single controller action respond to both Turbo Frame requests and regular, full-page requests.
	- A common example of this is rendering a /new page as both a standalone page and as frame content inside of a modal. 
	- You could implement a conditional in your controller action to check for the Turbo Frame header, but that quickly starts to clutter up your controllers.
	
	- An alternative approach is to use variants to render different content based on the inbound request headers, to keep your controllers cleaner.
	
		class ApplicationController < ActionController::Base
			before_action :turbo_frame_request_variant

			def destroy
			
				// destroy code here !!!
			
				respond_to do |format|
					format.turbo_stream do |variant|
						variant.turbo_frame {
							######################## Case 1
							# This shall render the turbo frame variant (delete.turbo_stream.erb)
							# Other wise, it will look into the html version
							# or you can simply redirect (make sure the requester is a button)
							# turbo-frame variant redirect
							redirect_to messages_url, notice: "Message was successfully destroyed."
						}
						variant.none {
							######################## Case 2
							# default redirect
							redirect_to messages_url, notice: "Message was successfully destroyed."
						}
					end	
					format.html {
						######################## Case 3
						redirect_to messages_url, notice: "Message was successfully destroyed.", status: 303
					}
				end
			end
			
		  private

		  def turbo_frame_request_variant
			request.variant = :turbo_frame if turbo_frame_request?
		  end
		end	
	
	* tables and Turbo Frames don’t play well together out of the box.

	- When DELETE for example
	
		- Redirect to the list page of items
		- Or, remove the item from the current table (list) using turbo_streams (each row in the table is actually attached to a trubo_frame)
		- We Have 

		# Usinf delete button (with form)
        <%= button_to "Delete btn turbo", @message, method: :delete, data: { :turbo_method => :delete, :action => "click->message#delete" }  %>
        
			- ### CASE 1
			- turbo_frame_request? = true			
			- Button with delete method will go as POST, with a payload : _method: delete			
			- From Show Page (With Turbo Frame)
			
				- Response will be a trubo stream here, Redirect to list page won't work cuz no id matching .. 
				- Responses for such cases should use the the trubo_stream response .. 
				
					- Remove the line od redirect
					
					respond_to do |format|
					  format.turbo_stream do |variant|
						variant.turbo_frame {
						  # redirect_to messages_url, notice: "Message was successfully destroyed.", status: 303
						}
					
					- Create a page with: destroy.turbo_stream.erb
					- Add the logic (based on trubo streams to make the proper chnage you want .. maybe deleting the item from the list .. 
				
				- To fix this case, add target: "_top" in the turbo_frame surrounding the link, this will lead to ####### CASE 2 in controller
			
					<%= turbo_frame_tag @message, :data => {:controller => "message"}, target: "_top"  do %>
        
				Or, add turbo_frame => "_top" to link
			
					<%= button_to "Delete 1", @message, method: :delete, data: { :turbo_method => :delete, :action => "click->message#delete", :turbo_frame => "_top" }  %>
        			
			- However, since we are talking about a trubo_stream variant here .. if we remove the redirect link from controller .. it will 
        
			- From List Page (with Turbo Frame)
				
				- ## CASE 1
				- with redirect_to messages_url, notice: "Message was successfully destroyed.", status: 303
				- Once you put the list page within turbo_frame, taking in consideration replacing the list of course				
				<%= button_to "Delete 1", message, method: :delete, data: { :turbo_method => :delete, :action => "click->messages#delete" }  %>

				- With turbo_stream
				- Sourround the index page with turb_from "messages"
				- Remove the redirect and make sure to reload the @messages = Message.all
				

				- ## CASE 2
				<%= link_to "Delete 2", message, method: :delete, data: {:turbo_method => :delete, :turbo_confirm => "Are you sure ?", :turbo_frame => "_top"}  %>

				- ## CASE 3
				<%= button_to "Delete 3", message, method: :delete, data: { :action => "click->messages#delete", :turbo => false }  %>
        
			- From List Page (Without Turbo Frame)        
				
				- ## CASE 2
				<%= button_to "Delete 1", message, method: :delete, data: { :turbo_method => :delete, :action => "click->messages#delete" }  %>
				<%= link_to "Delete 2", message, method: :delete, data: {:turbo_method => :delete, :turbo_confirm => "Are you sure ?", :turbo_frame => "_top"}  %>

				- ## CASE 3
				<%= button_to "Delete 3", message, method: :delete, data: { :action => "click->messages#delete", :turbo => false }  %>
			

		# Using a link with turbo helpers for method & confirm
		<%= link_to "Delete 2", @message, method: :delete, data: {:turbo_method => :delete, :turbo_confirm => "Are you sure ?", :turbo_frame => "_top"}  %>

			- ## CASE 2
			- turbo_frame_request? = false
			- THis will go to ## CASE 2 of course
			- The link is using turbo helpers for method & confirm message
			- We are using :turbo_frame => "_top" so the whole page will refresh since we are redirecting back to the list page
			- Again, without :turbo_frame => "_top" .. this will make it goes to ## CASE 1 .. and this might not work in the show page but in the list page

		# Using button, but without a trubo .. 
        <%= button_to "Delete 3", @message, method: :delete, data: { :action => "click->message#delete", :turbo => false }  %>

			- ## CASE 3
			- turbo_frame_request? = false
			- This is the easiest scenario, a simple redirect will do the job .. 


		** Remember again 
		* Note that this approach only works with form submissions with a method of POST, PUT, PATCH, or DELETE. By design, 
		* GET requests and streams don’t interact.

		* turbo_stream formats only used to make changes in the page, replacing a listof items could be the option, but also consider removing / replacing a row in the list for such scnarios
		

	
- Responding to a Turbo Frame request without a matching Turbo Frame

	- This will cause empty results .. look into javascript console
	
- Updating page URL when navigating within frame

	<%= form_with url: customers_path, method: :get, data: { turbo_frame: "customers", turbo_action: "advance" } do |form| %>
		<%# Some form content goes here %>
	<% end %>
	
	


- Turbo Streams: Deliver live page changes
-------------------------------------------------------------------------

- What’s a Turbo Stream?

	- Streams allow you to send snippets of HTML to the browser to make small changes to the DOM in response to events that happen on the server.
	- structure of response
	
		<turbo-stream action="action_to_take" target="element_to_update">
		  <template>
			<div id="element_to_update">
			  <!-- Some more html -->
			</div>
		  </template>
		</turbo-stream>
			
	- The <turbo-stream> element always includes an action, from the following possibilities:

		append
		prepend
		before
		after
		replace
		update
		remove

	- Turbo’s JavaScript processes these HTML snippets by reading the action and target from the stream tag and inserting (or removing) the wrapped HTML as appropriate.
	- Turbo Streams can be sent in response to a direct request from a browser (like submitting a form) or broadcast to subscribers over a WebSocket connection.

- Example

	# players_controller.rb
	  def create
		@player = Player.new(player_params)

		respond_to do |format|
		  if @player.save
			format.html { redirect_to @player, notice: "Player was successfully created." }
			format.turbo_stream
		  else
			format.html { render :new, status: :unprocessable_entity }
		  end
		end
	  end

	# app/views/players/create.turbo_stream.erb
	<%= turbo_stream.replace "players_form" do %>
	  <%= render partial: "new_player" %>
	<% end %>
	  
	=
	
	<turbo-stream action="replace" target="players_form">
	  <template>
		<!-- Content of new_player.html.erb partial -->
		<turbo-frame id="players_form">
		  <a href="/players/new">New Player</a>
		</turbo-frame>
	  </template>
	</turbo-stream>
		
* Note that this approach only works with form submissions with a method of POST, PUT, PATCH, or DELETE. By design, 
* GET requests and streams don’t interact.

- Rendering inline

	format.turbo_stream { render turbo_stream: turbo_stream.replace('players_form', partial: 'new_player') }

- Updating multiple elements at once

	create.turbo_stream.erb:
	
		<%= turbo_stream.replace "players_form" do %>
		  <%= render partial: "new_player" %>
		<% end %>
		<%= turbo_stream.append "players" do %>
		  <%= render partial: "player", locals: { player: @player } %>
		<% end %>
  
	- If you really dislike creating turbo_stream templates, you can also render multiple Streams inline in the controller like this:
	
		format.turbo_stream do
		  # Pass an array of turbo_streams to the render call

		  render turbo_stream: 
			[
			  turbo_stream.replace('players_form', partial: 'new_player'),
			  turbo_stream.append('players', partial: 'player', locals: { player: @player })
			]
		end
	
	
- @message with replies

	- In the same page where we view the @messages .. we have also out of the turbo_frame of the @message
	
	  <div class="p-6 bg-white shadow rounded-lg mt-2 mb-2">
		<div id="replies">
		  <%= render @message.replies %>								# each reply will be inside a tag with id (reply_1 .. ) this will be used later with broadcast changes
		  </div>
		</div>

	  <%#= link_to "New Reply", new_message_reply_path(@message) %>
	  <%= turbo_frame_tag "new_reply", src: new_message_reply_path(@message)   %>
	
	- So, when ever we create a reply .. we have in the replies controller:
	
		format.turbo_stream
		
	- which will lead to create.turbo_stream.erb:
	
		<%= turbo_stream.append "replies", @reply %>					# this to append a reply view to replies div
		<%= turbo_stream.update("replies_errors", "")  %>				# this will show any errors (in case we have errors block, see next secion (with errors))
		<%= turbo_stream.replace "new_reply", template: "replies/new", locals: { reply: @message.replies.new} %>	# this will return back the new reply form but empty


	- Notice, the state of replies are totally separate of the @message view which is displied within it's own turbo_frame
	- Therefor @message can update on spot with affectin also the replies state 
	
- With errors
	
	- If the object is not saved due to error
	
		format.turbo_stream { render :replies_errors }						# 

	replies_errors.turbo_stream.rb:
	
		<%= turbo_stream.update "replies_errors", partial: "replies/replies_errors" %>

	replies/_replies_errors.html.erb
	
		<div class="p-6 bg-red-100 shadow rounded-lg mt-2 mb-2">
		  <div style="color: red">
		  <h2><%= pluralize(@reply.errors.count, "error") %> prohibited this message from being saved:</h2>
		  <ul>
			<% @reply.errors.each do |error| %>
			  <li><%= error.full_message %></li>
			<% end %>
		  </ul>
		</div>
		</div>

	- In the new section of the reply
	
	  <div id="replies_errors">
      </div>
  
	- Or, you can render back the same new page
	
		format.turbo_stream { # route turbo validation errors
          render turbo_stream: turbo_stream.replace(
            "new_reply", template: "replies/new",
            locals: { reply: @reply})
        }

		# this will replace the page with the same code along with error messages .. 
	
		<% if defined?(reply)
		 @reply = reply
		 end
		%>
		<%= turbo_frame_tag "new_reply" do %>
		  <div class="p-6 bg-white shadow rounded-lg">
			<div id="replies_errors">
			</div>
			<%= render 'replies/form', reply: @reply %>
			<%#= link_to "Back", @reply.message %>
		  </div>
		<% end %>
	
  
  

- Broadcasting changes

	- In the page where it hold the @messages and replies section (where it will be updated automatically)
	
	<%= turbo_stream_from @message %>
	
	=
	
	<turbo-cable-stream-source channel="Turbo::StreamsChannel" signed-stream-name="IloybGtPaTh2Y21GcGJITTNaUzlOWlhOellXZGxMekUzIg==--41b4285a77e09be30000329a49f07929641d128f8e0102af3613487719c29405"></turbo-cable-stream-source>
	
	- Now, where ever there is a new reply for this @message .. just broadcast the change from the reply model
	
		reply.rb:
		
			after_create_commit -> {broadcast_append_to message }		# message is the parent instance message of this reply
	
	- When you refresh the page, notice in networking the request: cable and see messages
	
		{
			"type": "ping",
			"message": 1646938077
		}
	
		- So, if there is a new reply
		
		{
			"identifier": "{\"channel\":\"Turbo::StreamsChannel\",\"signed_stream_name\":\"IloybGtPaTh2Y21GcGJITTNaUzlOWlhOellXZGxMekUzIg==--41b4285a77e09be30000329a49f07929641d128f8e0102af3613487719c29405\"}",
			"message": "<turbo-stream action=\"append\" target=\"replies\"><template><p id=\"reply_139\">\n  <span class=\"px-2 py-1 rounded-lg mb-1 inline-block bg-gray-200\">10 Mar 18:49</span> ssdsdsd\n</p></template></turbo-stream>"
		}
	
	- Once you have the cable ready .. you don't need to append the reply as a turbo_stream
	
		<%#= turbo_stream.append "replies", @reply %>
	
	- You can apply that also when you destroy a reply .. it will be removed also .. notice 
	
		after_create_commit -> { broadcast_append_to message }
		after_destroy_commit -> { broadcast_remove_to message }
		after_update_commit -> { broadcast_replace_to message }			
		
		# message here is the channel name, this could be a string
		# To change the room name to a string, make sure to use the same string in 
		# 	<%= turbo_stream_from "string" %>
		# since this is inside reply model, the target will go to id="replies"
		# And the partial replies/_reply will be used to render the results

		- To change the target
		
		after_create_commit { broadcast_append_to(message, target: 'replies') }

		- to change the partial to render
		
		after_create_commit { broadcast_append_to(message, partial: 'a_special_reply') }

		# Try that from the console
		> Message.find(17).replies.first.destroy
		> Message.find(17).replies.first.update({:content => "ggggggggggggggggggggggggggggg"})

	- In order to use the JobQueue for broadcasted messages
	- broadcast_action_to vs. broadcast_action_later_to

		after_create_commit -> { broadcast_append_later_to message }
		
		# All commits can be replaced by a single broadcast
		# this will be queued by default
		
		broadcasts_to :message

		# it's recommended to use creation as job, but not for deletion or updating .. 
		
		
	- Broadcasting from a controller
	
		@reply.broadcast_append_later_to(@reply.message)
		
	- More magical methods
	- If you are dealing with the same model and it's view page ... (not using scopes as message / replies example above)
	
		message.rb:
		
			after_update_commit { broadcast_replace }
			Or
			broadcasts_to ->(_) { 'messages' }

		_message.html.erb:

			<%= turbo_stream_from @message %>

		- and there for .. If we’re using the model instance as the stream name

		message.rb:
		
			broadcasts
 
- Turbo streams don’t need turbo frames

	- Be careful, streams don't care about frames






- Turbo Events

(Note that when using jQuery, the data on the event must be accessed as $event.originalEvent.detail.)

    turbo:click fires when you click a Turbo-enabled link. The clicked element is the event target. Access the requested location with event.detail.url. Cancel this event to let the click fall through to the browser as normal navigation.

    turbo:before-visit fires before visiting a location, except when navigating by history. Access the requested location with event.detail.url. Cancel this event to prevent navigation.

    turbo:visit fires immediately after a visit starts. Access the requested location with event.detail.url and action with event.detail.action.

    turbo:submit-start fires during a form submission. Access the FormSubmission object with event.detail.formSubmission.

    turbo:before-fetch-request fires before Turbo issues a network request to fetch the page. Access the requested location with event.detail.url and the fetch options object with event.detail.fetchOptions. This event fires on the respective element (turbo-frame or form element) which triggers it and can be accessed with event.target property. Request can be canceled and continued with event.detail.resume (see Pausing Requests).

    turbo:before-fetch-response fires after the network request completes. Access the fetch options object with event.detail. This event fires on the respective element (turbo-frame or form element) which triggers it and can be accessed with event.target property.

    turbo:submit-end fires after the form submission-initiated network request completes. Access the FormSubmission object with event.detail.formSubmission along with FormSubmissionResult properties included within event.detail.

    turbo:before-cache fires before Turbo saves the current page to cache.

    turbo:before-render fires before rendering the page. Access the new <body> element with event.detail.newBody. Rendering can be canceled and continued with event.detail.resume (see Pausing Rendering).

    turbo:before-stream-render fires before rendering a Turbo Stream page update.

    turbo:render fires after Turbo renders the page. This event fires twice during an application visit to a cached location: once after rendering the cached version, and again after rendering the fresh version.

    turbo:load fires once after the initial page load, and again after every Turbo visit. Access visit timing metrics with the event.detail.timing object.

    turbo:frame-render fires right after <turbo-frame> element renders its view. The specific <turbo-frame> element is the event target. Access the FetchResponse object with event.detail.fetchResponse property.

    turbo:frame-load fires when <turbo-frame> element is navigated and finishes loading (fires after turbo:frame-render). The specific <turbo-frame> element is the event target.






- Turbo Native: Hybrid apps for iOS & Android
---------------------------------------------


	
















	



























CableReady
========================================================================

- CableReady is a Ruby gem that was first released in May 2017. 
- It lets you create great real-time user experiences by triggering client-side DOM changes, events and notifications over ActionCable web sockets. 
- These commands are called operations.
- You can broadcast one or many operations at once from inside a Reflex, as well as:
	
	- ActiveRecord callbacks, 
	- ActiveJobs, 
	- ActionCable Channels, 
	- controller actions, 
	- rake tasks and in response to API calls and webhooks.

- Other CableReady Tools

	- https://optimism.leastbad.com/
	- https://github.com/stimulusreflex/futurism	--> part of StimilusReflex
	



* Stimulus reflex
========================================================================
- Check Stimilus https://docs.stimulusreflex.com/quickstart
- https://devhints.io/stimulus-reflex

# For new projects

	rails new myproject --webpack=stimulus
	cd myproject

# For existing projects

	bundle exec rails webpacker:install:stimulus

# For both project types

	> bundle add stimulus_reflex
	> bundle exec rails stimulus_reflex:install
	
	# latest
	bundle add stimulus_reflex --version 3.5.0.pre8
	rake stimulus_reflex:install

# StimulusReflex requires Redis to be

	app/reflexes/
	├── application_reflex.rb
	├── counter_reflex.rb	<--------------
	└── example_reflex.rb


Any page:

	<a href="#"
	   data-reflex="click->Counter#increment"
	   data-step="1"
	   data-count="<%= @count.to_i %>"
	>Increment <%= @count.to_i %></a>

app/reflexes/counter_reflex.rb:

	class CounterReflex < ApplicationReflex
	  def increment
		@count = element.dataset[:count].to_i + element.dataset[:step].to_i
		# ActionCable.server.broadcast "room_channel", message: @count.to_s
		# morph "#messages", @count #render(partial: "path/to/foo")	<- decide which block#html and what data to render (even partials)
	  end
	end


- Using Stimilus.js Controller

	<!-- index.html.erb -->
	<a href="#"
	  data-controller="counter"
	  data-action="click->counter#increment"
	>Increment <%= @count %></a>
	
// counter_controller.js

	import { Controller } from 'stimulus'
	import StimulusReflex from 'stimulus_reflex'

	export default class extends Controller {
	  connect() {
		StimulusReflex.register(this)
	  }

	  increment(event) {
		event.preventDefault()
		this.stimulate('Counter#increment', 1)
	  }
	}

# counter_reflex.rb

	class CounterReflex < StimulusReflex::Reflex
	  def increment(step = 1)
		session[:count] = session[:count].to_i + step
	   end
	end

- morpth a certain selected div
- morth :nothing
- render the whole pa

The full page (default)				Yes		~50ms
All children of a CSS DOM selector	No		~15ms
Nothing at all						No		~6ms

Scoping Page Morphs

	data-reflex-root=".class, #id, [attribute]"

	<div data-reflex-root="[forward],[backward]">
	  <input type="text" value="<%= @words %>" data-reflex="keyup->Example#words">
	  <div forward><%= @words %></div>
	  <div backward><%= @words&.reverse %></div>
	</div>

Permanent Elements

	<div data-reflex-permanent>
	  <iframe src="https://ghbtns.com/github-btn.html?user=stimulusreflex&repo=stimulus_reflex&type=star&count=true" frameborder="0" scrolling="0" class="ghbtn"></iframe>
	  <iframe src="https://ghbtns.com/github-btn.html?user=stimulusreflex&repo=stimulus_reflex&type=fork&count=true" frameborder="0" scrolling="0" class="ghbtn"></iframe>
	</div>

Selector Morphs

	<header data-reflex="click->Example#change">
	  <div id="foo">
		<span class="spa"><%= message %></span>
	  </div>
	</header>

	class ExampleReflex < ApplicationReflex
	  def change
		morph "#foo", "Your muscles... they are so tight."
	  end
	end

Intelligent defaults

	yelling = element.value.upcase
	morph "#foo", render(partial: "path/to/foo", locals: {message: yelling})

	
- https://dev.to/phawk/hotwire-best-practices-for-stimulus-40e





Notes to activate Reflex on Rails 7 with Stimilus / esbuild
---------------------------------------------------------------------------------







ViewComponent
==================================================================================
# https://viewcomponent.org/

- A framework for creating reusable, testable & encapsulated view components, built to integrate seamlessly with Ruby on Rails.
- So, instead of building partials with direct database access for reusability !


	# app/components/message_component.rb

		class MessageComponent < ViewComponent::Base
		  def initialize(name:)
			@name = name
		  end
		end

	<%# app/components/message_component.html.erb %>

		<h1>Hello, <%= @name %>!</h1>

Which is rendered by calling:

	<%# app/views/demo/index.html.erb %>
	<%= render(MessageComponent.new(name: "World")) %>


* StimilusReflex is using ViewComponent
# https://viewcomponent.org/resources.html
# https://primer.style/view-components/components/menu#url

#* https://github.com/joshleblanc/view_component_reflex

- Generator


	> bin/rails generate component Example title

	# app/components/example_component.rb
	class ExampleComponent < ViewComponent::Base
	  def initialize(title:)
		@title = title
	  end
	end

	<%# app/components/example_component.html.erb %>
	<span title="<%= @title %>"><%= content %></span>

	# Use it
	<%= render(ExampleComponent.new(title: "my title")) do %>
	  Hello, World!			--> this will go to content
	<% end %>

	- with_content

	<%= render(ExampleComponent.new(title: "my title").with_content("Hello, World!")) %>

- Rendering from controllers 

	render(ExampleComponent.new(title: "My Title")) { "Hello, World!" }
	
- When rendering the same component multiple times for later reuse, use render_in:

	  def index
		# Doesn't work: triggers a `AbstractController::DoubleRenderError`
		# @reusable_icon = render IconComponent.new('close')

		# Doesn't work: renders the whole index view as a string
		# @reusable_icon = render_to_string IconComponent.new('close')

		# Works: renders the component as a string
		@reusable_icon = IconComponent.new('close').render_in(view_context)
	  end