Dennis Hackethal
@dennis.hackethal·Joined Jun 2024·2,804 ideas: 1,840 adoptable, 964 rejectable
Founder Veritula.
Author. Software engineer. Ex Apple. Translator of The Beginning of Infinity.
dennishackethal.com
#5858·Dennis HackethalOP revised 1 day ago·AI-assistedMake Hiccdown reactive, like Reagent: a helper method as the first element marks a component, as in
[method(:product_card), @product]. AMethodknows its module and name, so a later request can callProductsHelper#product_cardagain for the same records.The server keeps track of which components each page rendered, with which records, and gives each component's element the id
dom_id(record), as turbo streams do. When a record changes (after_commit, checking that it actually changed), the server tells the pages showing it, over Action Cable. Each page then requests just that component, which renders in the viewer's own request, with their user, session, locale, time zone and CSRF token, and swaps it in with a turbo stream.Rendering the component in the request that changed the record would save that round trip, but that request has none of the viewers' context: it would render for the wrong user, or have to rebuild each viewer's context and render once per viewer.
A first pass can skip checking whether a change affects what a component shows, as when a product's name changes on a page that only shows its price.
Measured on Veritula locally, on a discussion of 213 ideas:
- The whole discussion page, which a Turbo refresh re-renders: 211 ms and 506 KB, of which loading the whole tree (
Idea.tree) takes 18 ms andHiccdown.to_html35 ms. - One idea's own markup, without its replies: 0.4 ms (median; 0.9 ms at the 90th percentile).
- One idea's HTML with its replies: 3.3 KB (median).
A component request would cost the request's fixed overhead, loading that idea's part of the tree (18 ms at most) and about a millisecond of rendering: an estimated 10–30 ms and a few KB, about ten times faster and a hundred times smaller than the whole page. The whole page grows with the discussion while a component stays about the same, and the browser morphing 500 KB of DOM, which I didn't measure, comes on top.
Mark components with Method objects, which later requests can call again, instead of procs
Make Hiccdown reactive, like Reagent: a proc as the first element marks a component, as in [->(product) { [:li, product.name] }, @product].
The server keeps track of which components each page rendered, with which records, and gives each component's element the id dom_id(record), as turbo streams do. When a record changes (after_commit, checking that it actually changed), the server tells the pages showing it, over Action Cable. Each page then requests just that component, which renders in the viewer's own request, with their user, session, locale, time zone and CSRF token, and swaps it in with a turbo stream.
Rendering the component in the request that changed the record would save that round trip, but that request has none of the viewers' context: it would render for the wrong user, or have to rebuild each viewer's context and render once per viewer.
A first pass can skip checking whether a change affects what a component shows, as when a product's name changes on a page that only shows its price.
Make Hiccdown reactive, like Reagent: a helper method as the first element marks a component, as in [method(:product_card), @product]. A Method knows its module and name, so a later request can call ProductsHelper#product_card again for the same records.
The server keeps track of which components each page rendered, with which records, and gives each component's element the id dom_id(record), as turbo streams do. When a record changes (after_commit, checking that it actually changed), the server tells the pages showing it, over Action Cable. Each page then requests just that component, which renders in the viewer's own request, with their user, session, locale, time zone and CSRF token, and swaps it in with a turbo stream.
Rendering the component in the request that changed the record would save that round trip, but that request has none of the viewers' context: it would render for the wrong user, or have to rebuild each viewer's context and render once per viewer.
A first pass can skip checking whether a change affects what a component shows, as when a product's name changes on a page that only shows its price.
#5855·Dennis HackethalOP, 1 day ago·AI-assistedTurbo 8 already does most of this. With
broadcasts_refreshesand morphing, each viewer's page re-renders in their own request when a record changes, keeping scroll position and form state. Components would only save rendering and sending the rest of the page.
On large pages, like Veritula's discussions, that's too expensive: a refresh re-renders the whole page for every viewer, sends all of it, and morphs all of it, for a change to one idea. Components re-render, send and morph only what changed, so they'd give the same result as morphing on pages where morphing the whole page is too slow to use.
#5853·Dennis HackethalOP revised 1 day ago·AI-assistedMake Hiccdown reactive, like Reagent: a proc as the first element marks a component, as in
[->(product) { [:li, product.name] }, @product].The server keeps track of which components each page rendered, with which records, and gives each component's element the id
dom_id(record), as turbo streams do. When a record changes (after_commit, checking that it actually changed), the server tells the pages showing it, over Action Cable. Each page then requests just that component, which renders in the viewer's own request, with their user, session, locale, time zone and CSRF token, and swaps it in with a turbo stream.Rendering the component in the request that changed the record would save that round trip, but that request has none of the viewers' context: it would render for the wrong user, or have to rebuild each viewer's context and render once per viewer.
A first pass can skip checking whether a change affects what a component shows, as when a product's name changes on a page that only shows its price.
Procs can't be found again in a later request. The lambda a helper built while rendering the page is gone by the time the page asks for the component, so the server has no way to call it again.
#5853·Dennis HackethalOP revised 1 day ago·AI-assistedMake Hiccdown reactive, like Reagent: a proc as the first element marks a component, as in
[->(product) { [:li, product.name] }, @product].The server keeps track of which components each page rendered, with which records, and gives each component's element the id
dom_id(record), as turbo streams do. When a record changes (after_commit, checking that it actually changed), the server tells the pages showing it, over Action Cable. Each page then requests just that component, which renders in the viewer's own request, with their user, session, locale, time zone and CSRF token, and swaps it in with a turbo stream.Rendering the component in the request that changed the record would save that round trip, but that request has none of the viewers' context: it would render for the wrong user, or have to rebuild each viewer's context and render once per viewer.
A first pass can skip checking whether a change affects what a component shows, as when a product's name changes on a page that only shows its price.
Turbo 8 already does most of this. With broadcasts_refreshes and morphing, each viewer's page re-renders in their own request when a record changes, keeping scroll position and form state. Components would only save rendering and sending the rest of the page.
Spell out how components update, and why each page fetches its own
Some Reagent-like way to make things reactive using proc as first element? And then the server keeps track of which procs have been rendered, which items have changed, and re-renders that part of the template in a turbo stream?
Make Hiccdown reactive, like Reagent: a proc as the first element marks a component, as in [->(product) { [:li, product.name] }, @product].
The server keeps track of which components each page rendered, with which records, and gives each component's element the id dom_id(record), as turbo streams do. When a record changes (after_commit, checking that it actually changed), the server tells the pages showing it, over Action Cable. Each page then requests just that component, which renders in the viewer's own request, with their user, session, locale, time zone and CSRF token, and swaps it in with a turbo stream.
Rendering the component in the request that changed the record would save that round trip, but that request has none of the viewers' context: it would render for the wrong user, or have to rebuild each viewer's context and render once per viewer.
A first pass can skip checking whether a change affects what a component shows, as when a product's name changes on a page that only shows its price.
#1984·Dennis HackethalOP, about 1 year agoHiccdown should have support for ids and class names in the tag symbol. Like Hiccup.
12ruby[:'div#my-id.my-class.another-class']# => <div id="my-id" class="my-class another-class"></div>It should also allow mixing:
12ruby[:'div#my-id.my-class.another-class', {id: 'override', class: 'additive'}]# => <div id="override" class="my-class another-class additive"></div>In other words, the id from the hash would override the id from the symbol, and the class from the hash would be added to the classes from the symbol.
Done as of 3a304be, to be released in version 1.6.0, as described here. The id and classes can come in any order after the tag name, and two ids in one tag raise ArgumentError.
#5847·Dennis HackethalOP, 1 day ago·AI-assistedA helper method that calls another action's helper method by name can get another helper's. Rails mixes every helper into every view, so calling
indexfromItemsHelper#createruns whichever helper'sindexRails included last, such asPagesHelper#index:123456789rubymodule ItemsHelperdef index[:ul, @items.map { |i| [:li, i.name] }]enddef createindex # PagesHelper#index, not ItemsHelper#indexendendAction names like
index,showandeditare in many helpers, and the Readme encourages helper methods calling one another.
#4331·Dennis HackethalOP, 8 months agoUse frame layout for turbo frame requests? https://discuss.rubyonrails.org/t/the-right-way-to-override-render-method/84765/2
They already do: turbo-rails gives frame requests its own minimal layout, and Hiccdown leaves it be. As of c5ce76f, to be released in version 1.6.0, a test checks that frame requests keep Turbo's frame layout even where ApplicationHelper#layout exists, and a system test (e71df95) loads a frame in a browser.
#4330·Dennis HackethalOP, 8 months agoRedirects result in two additional requests, the first of which is a turbo-stream request that renders nothing, thus (presumably) prompting the browser to make another request for the same resource.
Doesn't reproduce as of e71df95. In the app in test/dummy, a form whose action redirects takes one POST and one GET in a headless browser, which a system test now checks.
Probably, and they're fixed. Hiccdown used to force a layout (layout: true, then layout: !request.format.turbo_stream?), overriding the layout method turbo-rails relies on, and turbo-stream requests failed with "no default layout" (fef00cb). cf92f06, in version 1.5.2, stopped forcing a layout. As of c5ce76f and 4a087e4, to be released in version 1.6.0, tests check that frame requests keep Turbo's frame layout and that turbo streams get none, and the app in test/dummy shows it in a browser.
A helper method that calls another action's helper method by name can get another helper's. Rails mixes every helper into every view, so calling index from ItemsHelper#create runs whichever helper's index Rails included last, such as PagesHelper#index:
123456789
module ItemsHelperdef index[:ul, @items.map { |i| [:li, i.name] }]enddef createindex # PagesHelper#index, not ItemsHelper#indexendend
Action names like index, show and edit are in many helpers, and the Readme encourages helper methods calling one another.
#5845·Dennis HackethalOP, 1 day ago·AI-assistedOn Rails 8.1, Hiccdown's
capturehands keyword arguments to the block as key-value pairs rather than as keywords.capture(text: 'foo') { |text:| text }raisesArgumentError: missing keyword: :textinstead of returning'foo', and a block that takes them as a hash,{ |options| … }, gets[:text, 'foo']instead of{text: 'foo'}.Earlier versions of Rails pass keywords on to the block as a hash, which Hiccdown leaves alone.
Fixed as of 99b6280, to be released in version 1.6.0.
On Rails 8.1, Hiccdown's capture hands keyword arguments to the block as key-value pairs rather than as keywords. capture(text: 'foo') { |text:| text } raises ArgumentError: missing keyword: :text instead of returning 'foo', and a block that takes them as a hash, { |options| … }, gets [:text, 'foo'] instead of {text: 'foo'}.
Earlier versions of Rails pass keywords on to the block as a hash, which Hiccdown leaves alone.
#4329·Dennis HackethalOP, 8 months agoIs there a way to teach user-built helpers how to process Hiccdown? Or maybe intercepting
capturealready took care of this?
Mostly, intercepting capture already took care of it: helpers of your own that pass a block on to Rails' helpers, or return Hiccdown, worked. Hiccdown given to Rails' helpers as content didn't, as in content_tag(:div, yield), tag.div([:span, 'foo']) or link_to([:span, 'foo'], path). As of 134deb9, to be released in version 1.6.0, it does.
#4328·Dennis HackethalOP, 8 months agoCould the application layout live in ApplicationHelper#layout?
Yes. As of 4fd7a0e, to be released in version 1.6.0, the layout named X lives in XHelper#layout, just as it would in layouts/X.html.erb, so the application layout lives in ApplicationHelper#layout. yield and yield(:title) work as in an ERB layout, and layout files keep working for a gradual migration.