turboflow-rails 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +21 -0
  3. data/README.md +107 -0
  4. data/Rakefile +12 -0
  5. data/app/assets/javascripts/turboflow.js +2 -0
  6. data/lib/generators/turbo_flow/install/install_generator.rb +68 -0
  7. data/lib/generators/turbo_flow/install/templates/turboflow.rb +16 -0
  8. data/lib/turboflow/configuration.rb +14 -0
  9. data/lib/turboflow/engine.rb +20 -0
  10. data/lib/turboflow/helpers.rb +76 -0
  11. data/lib/turboflow/version.rb +5 -0
  12. data/lib/turboflow-rails.rb +18 -0
  13. metadata +86 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: e942f50abf3615f5681bbf286289892194890a8749fddf3b3ad371e06d5e6623
4
+ data.tar.gz: d8b647430b971fccf5e29af4cc871260d11e764015da1190628302c10ba87675
5
+ SHA512:
6
+ metadata.gz: 5fee8c4713de3108ec7b791f0ea55c7a44f52e33d1123075fbe6f3a2bdf5093d34766bf15708dce62fc3fca6200e680b21ef972a3b00bacb0c1faa1883997203
7
+ data.tar.gz: 1c81a3bb82caa0c2f5a11b974fb5309f5dce9c515ee0462ddd4f38ee77d7d4c79329f4930b5991a9003f6c4eff29b03cdd4822b8c0d301ed4245d2941dbac7d0
data/MIT-LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 TurboFlow
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md ADDED
@@ -0,0 +1,107 @@
1
+ # TurboFlow Rails
2
+
3
+ Smooth page transitions for Rails applications with Hotwire Turbo.
4
+
5
+ ## Installation
6
+
7
+ Add this line to your application's Gemfile:
8
+
9
+ ```ruby
10
+ gem 'turboflow-rails'
11
+ ```
12
+
13
+ And then execute:
14
+ ```bash
15
+ bundle install
16
+ ```
17
+
18
+ Run the install generator:
19
+ ```bash
20
+ bin/rails generate turbo_flow:install
21
+ ```
22
+
23
+ This will:
24
+ - Create a configuration file at `config/initializers/turboflow.rb`
25
+ - Add `turboflow_meta_tags` to your application layout
26
+
27
+ ## Setup
28
+
29
+ The install generator automatically adds to your application layout:
30
+
31
+ ```erb
32
+ <!-- In <head> section -->
33
+ <%= turboflow_meta_tags %>
34
+ ```
35
+
36
+ The `turboflow_meta_tags` helper includes everything needed:
37
+ - View Transitions API meta tag
38
+ - TurboFlow configuration from your initializer
39
+ - TurboFlow JavaScript library
40
+
41
+ No changes to your `<body>` tag are required - TurboFlow works with standard HTML.
42
+
43
+ ## Usage
44
+
45
+ ### Basic Links
46
+
47
+ ```erb
48
+ <%= link_flow_to "About", about_path, flow: :slide %>
49
+ <%= link_flow_to "Contact", contact_path, flow: :zoom %>
50
+ <%= button_flow_to "Delete", post_path, flow: :fade, method: :delete %>
51
+ ```
52
+
53
+ ### Forms
54
+
55
+ ```erb
56
+ <%= form_flow_with model: @post, flow: :slide, success_flow: :fade do |form| %>
57
+ <!-- form fields -->
58
+ <% end %>
59
+ ```
60
+
61
+ ### Turbo Frames
62
+
63
+ ```erb
64
+ <%= turboflow_frame_tag "modal", flow: :zoom do %>
65
+ <!-- frame content -->
66
+ <% end %>
67
+ ```
68
+
69
+ ### Morphing Elements
70
+
71
+ ```erb
72
+ <%= turboflow_morph_target :hero do %>
73
+ <h1>This will morph between pages</h1>
74
+ <% end %>
75
+
76
+ <%= turboflow_target :card, flow: :fade do %>
77
+ <p>Custom element transition</p>
78
+ <% end %>
79
+ ```
80
+
81
+ ## Configuration
82
+
83
+ Create an initializer `config/initializers/turboflow.rb`:
84
+
85
+ ```ruby
86
+ TurboFlow.configure do |config|
87
+ config.default_transition = :fade
88
+ config.duration = 300
89
+ config.easing = "ease-out"
90
+ config.debug = Rails.env.development?
91
+ config.reduced_motion = :respect # :respect | :force | :disable
92
+ end
93
+ ```
94
+
95
+ ## Available Transitions
96
+
97
+ - `fade` - Fade in/out
98
+ - `slide` - Slide horizontally
99
+ - `slideUp` - Slide vertically up
100
+ - `slideDown` - Slide vertically down
101
+ - `zoom` - Scale in/out
102
+ - `flip` - 3D flip
103
+ - `morph` - Morph between elements with same ID
104
+
105
+ ## License
106
+
107
+ MIT License
data/Rakefile ADDED
@@ -0,0 +1,12 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "bundler/gem_tasks"
4
+ require "rake/testtask"
5
+
6
+ Rake::TestTask.new(:test) do |t|
7
+ t.libs << "test"
8
+ t.libs << "lib"
9
+ t.test_files = FileList["test/**/*_test.rb"]
10
+ end
11
+
12
+ task default: :test
data/app/assets/javascripts/turboflow.js ADDED
@@ -0,0 +1,2 @@
1
+ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).TurboFlow=e()}(this,function(){"use strict";class t{constructor(t={}){this.defaults={defaultTransition:"fade",duration:300,easing:"ease-out",debug:!1,autoInject:!0,reducedMotion:"respect",prefersReducedMotionFallback:"none",cleanupInterval:5e3,frames:{},streams:{append:"fade-up",prepend:"fade-down",replace:"morph",update:"morph",remove:"fade-out",before:"slide-right",after:"slide-left"},targets:{},customAnimations:{}},this.config=this.merge(this.defaults,t),this.listeners=new Set}merge(t,e){const n={...t};for(const r in e)e[r]&&"object"==typeof e[r]&&!Array.isArray(e[r])?n[r]=this.merge(t[r]||{},e[r]):n[r]=e[r];return n}get(t=null){if(!t)return this.config;const e=t.split(".");let n=this.config;for(const r of e)if(n=n[r],void 0===n)return;return n}set(t,e){const n=t.split("."),r=n.pop();let i=this.config;for(const s of n)i[s]&&"object"==typeof i[s]||(i[s]={}),i=i[s];const o=i[r];return i[r]=e,this.notifyListeners(t,e,o),this}update(t){const e={...this.config};return this.config=this.merge(this.config,t),this.notifyListeners("*",this.config,e),this}reset(t={}){const e={...this.config};return this.config=this.merge(this.defaults,t),this.notifyListeners("reset",this.config,e),this}getTransitionForElement(t){return t?t.dataset.turboFlow?t.dataset.turboFlow:t.dataset.turboFlowTarget?t.dataset.turboFlowTarget:"TURBO-FRAME"===t.tagName&&t.id&&this.config.frames[t.id]||this.config.defaultTransition:this.config.defaultTransition}getStreamTransition(t){return this.config.streams[t]||this.config.defaultTransition}getFrameTransition(t){return this.config.frames[t]||this.config.defaultTransition}shouldAnimate(){if(!this.config.autoInject)return!1;if("respect"===this.config.reducedMotion){return!window.matchMedia("(prefers-reduced-motion: reduce)").matches}return"disable"!==this.config.reducedMotion}getReducedMotionFallback(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches&&"respect"===this.config.reducedMotion?this.config.prefersReducedMotionFallback:null}addListener(t){return this.listeners.add(t),()=>this.listeners.delete(t)}removeListener(t){this.listeners.delete(t)}notifyListeners(t,e,n){this.listeners.forEach(r=>{try{r(t,e,n)}catch(i){this.config.debug&&console.error("Config listener error:",i)}})}validate(){const t=[];("number"!=typeof this.config.duration||this.config.duration<0)&&t.push("Duration must be a positive number"),("number"!=typeof this.config.cleanupInterval||this.config.cleanupInterval<0)&&t.push("Cleanup interval must be a positive number");const e=["respect","disable","force"];return e.includes(this.config.reducedMotion)||t.push(`Reduced motion must be one of: ${e.join(", ")}`),t.length>0?t:null}export(){return JSON.parse(JSON.stringify(this.config))}import(t){const e=this.validate();if(e)throw new Error(`Invalid configuration: ${e.join("; ")}`);return this.update(t),this}}class e{constructor(){this.animations=new Map,this.keyframes=new Map}register(t,e){if(!t||!e)throw new Error("Animation name and definition are required");return this.animations.set(t,{...e,name:t,keyframes:e.keyframes||{},duration:e.duration||300,easing:e.easing||"ease-out"}),this}get(t){return this.animations.get(t)}has(t){return this.animations.has(t)}generateCSS(t,e={}){var n;const r=this.get(t);if(!r)return console.warn(`Animation "${t}" not found`),"";const i=e.duration||r.duration,o=e.easing||r.easing,s=`turbo-flow-${t}-${Date.now()}`,a=(null==(n=r.viewTransitions)?void 0:n.new)||{from:{},to:{}};return{keyframeCSS:this.generateKeyframes(s,a),animationCSS:`${s} ${i}ms ${o}`,keyframeName:s}}generateKeyframes(t,e){return`@keyframes ${t} { ${Object.entries(e).map(([t,e])=>`${t} { ${Object.entries(e).map(([t,e])=>`${this.kebabCase(t)}: ${e};`).join(" ")} }`).join(" ")} }`}generateViewTransitionCSS(t,e="forward"){const n=this.get(t);if(!n)return"";let r=n.viewTransitions;n.directions&&n.directions[e]&&(r=n.directions[e]);const{old:i,new:o}=r||{};if(!i||!o)return"";return`\n ${this.generateKeyframes(`turbo-flow-${t}-old-${e}`,i)}\n ${this.generateKeyframes(`turbo-flow-${t}-new-${e}`,o)}\n ::view-transition-old(turbo-flow-${t}) {\n animation: turbo-flow-${t}-old-${e} ${n.duration}ms ${n.easing};\n }\n ::view-transition-new(turbo-flow-${t}) {\n animation: turbo-flow-${t}-new-${e} ${n.duration}ms ${n.easing};\n }\n `}kebabCase(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}list(){return Array.from(this.animations.keys())}clear(){this.animations.clear(),this.keyframes.clear()}}class n{constructor(){this.cache=new Map,this.listeners=new Map,this.defaultTransition=null}scan(t=document){const e={links:[],forms:[],frames:[],targets:[]};t.querySelectorAll("a[data-turbo-flow], a[data-turbo-flow-target]").forEach(t=>{const n=t.dataset.turboFlow,r=t.dataset.turboFlowTarget;n&&e.links.push({element:t,transition:n,href:t.href}),r&&e.targets.push({element:t,transition:r,id:t.id})});t.querySelectorAll("form[data-turbo-flow]").forEach(t=>{e.forms.push({element:t,transition:t.dataset.turboFlow,successTransition:t.dataset.turboFlowSuccess,errorTransition:t.dataset.turboFlowError,action:t.action,method:t.method})});t.querySelectorAll("turbo-frame[data-turbo-flow]").forEach(t=>{e.frames.push({element:t,transition:t.dataset.turboFlow,id:t.id})});return t.querySelectorAll("[data-turbo-flow-target]").forEach(t=>{t.matches("a, form, turbo-frame")||e.targets.push({element:t,transition:t.dataset.turboFlowTarget,id:t.id})}),this.cache.set(t,e),e}findTransition(t){var e;if(!t)return this.defaultTransition;const n=null==(e=t.dataset)?void 0:e.turboFlow;if(n)return n;const r=t.closest("a[data-turbo-flow]");if(r)return r.dataset.turboFlow;const i=t.closest("form[data-turbo-flow]");return i?i.dataset.turboFlow:this.defaultTransition}attachListeners(){const t=t=>{const e=t.target.closest("a[data-turbo-flow]");if(e){const n=e.dataset.turboFlow;this.notifyListeners("link:click",{element:e,transition:n,event:t})}},e=t=>{const e=t.target;if(e.matches("form[data-turbo-flow]")){const n=e.dataset.turboFlow;this.notifyListeners("form:submit",{element:e,transition:n,event:t})}},n=t=>{const e=this.findTransition(t.target);this.notifyListeners("turbo:before-render",{transition:e,event:t})},r=t=>{var e;const n=t.target,r=(null==(e=n.dataset)?void 0:e.turboFlow)||this.defaultTransition;this.notifyListeners("turbo:before-frame-render",{element:n,transition:r,event:t})};document.addEventListener("click",t),document.addEventListener("submit",e),document.addEventListener("turbo:before-render",n),document.addEventListener("turbo:before-frame-render",r),this.cleanup=()=>{document.removeEventListener("click",t),document.removeEventListener("submit",e),document.removeEventListener("turbo:before-render",n),document.removeEventListener("turbo:before-frame-render",r)}}on(t,e){return this.listeners.has(t)||this.listeners.set(t,new Set),this.listeners.get(t).add(e),()=>{var n;null==(n=this.listeners.get(t))||n.delete(e)}}notifyListeners(t,e){const n=this.listeners.get(t);n&&n.forEach(t=>t(e))}setDefaultTransition(t){this.defaultTransition=t}clearCache(){this.cache.clear()}clear(){this.cache.clear(),this.listeners.clear(),this.cleanup&&this.cleanup()}getCached(t=document){return this.cache.get(t)}}class r{constructor(t){this.registry=t,this.generated=new Map,this.viewTransitionNames=new Set}generate(t){const e=[],n=new Set;return t.links&&t.links.forEach(t=>{this.generateTransitionCSS(t.transition,e,n)}),t.forms&&t.forms.forEach(t=>{this.generateTransitionCSS(t.transition,e,n),t.successTransition&&this.generateTransitionCSS(t.successTransition,e,n)}),t.frames&&t.frames.forEach(t=>{this.generateTransitionCSS(t.transition,e,n,t.id)}),t.targets&&t.targets.forEach(t=>{this.generateElementTransitionCSS(t,e)}),e.join("\n")}generateTransitionCSS(t,e,n,r=null){if(!t||n.has(t))return;const i=this.registry.get(t);if(!i)return;n.add(t);const o=i.directions||{},s=o.forward||o.back||o.none;o.forward&&e.push(this.generateDirectionalCSS(t,"forward",o.forward,i)),o.back&&e.push(this.generateDirectionalCSS(t,"back",o.back,i)),o.none&&e.push(this.generateDirectionalCSS(t,"none",o.none,i)),i.viewTransitions&&!s&&e.push(this.generateDirectionalCSS(t,"none",i.viewTransitions,i))}generateDirectionalCSS(t,e,n,r){const{old:i,new:o}=n;if(!i||!o)return"";const s=`turbo-flow-${t}-old-${e}`,a=`turbo-flow-${t}-new-${e}`,c=this.generateKeyframes(s,i),l=this.generateKeyframes(a,o),d=r.duration||300,u=r.easing||"ease-out";let f="";return f="forward"===e?`html.turboflow-${t}[data-turbo-visit-direction="forward"]`:"back"===e?`html.turboflow-${t}[data-turbo-visit-direction="back"]`:`html.turboflow-${t}:not([data-turbo-visit-direction])`,`\n ${c}\n ${l}\n ${f}::view-transition-old(root) {\n animation: ${s} ${d}ms ${u};\n }\n ${f}::view-transition-new(root) {\n animation: ${a} ${d}ms ${u};\n }\n `}generateElementTransitionCSS(t,e){if(!t.id||!t.transition)return;if("morph"===t.transition){const n=`turbo-flow-morph-${t.id}`;return this.viewTransitionNames.add(n),void e.push(`\n #${t.id} {\n view-transition-name: ${n};\n }\n `)}const n=this.registry.get(t.transition);if(!n)return;const r=`turbo-flow-element-${t.id}`;if(this.viewTransitionNames.add(r),e.push(`\n #${t.id} {\n view-transition-name: ${r};\n }\n `),n.viewTransitions){const{old:t,new:i}=n.viewTransitions;if(!t||!i)return;const o=`${r}-old`,s=`${r}-new`,a=this.generateKeyframes(o,t),c=this.generateKeyframes(s,i),l=n.duration||300,d=n.easing||"ease-out";e.push(`\n ${a}\n ${c}\n ::view-transition-old(${r}) {\n animation: ${o} ${l}ms ${d};\n }\n ::view-transition-new(${r}) {\n animation: ${s} ${l}ms ${d};\n }\n `)}}generateKeyframes(t,e){return`@keyframes ${t} { ${Object.entries(e).map(([t,e])=>`${t} { ${Object.entries(e).map(([t,e])=>`${this.kebabCase(t)}: ${e};`).join(" ")} }`).join(" ")} }`}kebabCase(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}clear(){this.generated.clear(),this.viewTransitionNames.clear()}}class i{constructor(){this.styleElement=null,this.styleId="turbo-flow-styles",this.injectedCSS=new Map}inject(t,e=null){if(!t)return;const n=e?`${this.styleId}-${e}`:this.styleId;if(this.injectedCSS.has(n)){if(this.injectedCSS.get(n)===t)return}let r=document.getElementById(n);return r||(r=document.createElement("style"),r.id=n,r.setAttribute("data-turbo-flow","true"),document.head.appendChild(r)),r.textContent=t,this.injectedCSS.set(n,t),e||(this.styleElement=r),r}append(t,e=null){const n=e?`${this.styleId}-${e}`:this.styleId;let r=document.getElementById(n);if(!r)return this.inject(t,e);const i=(this.injectedCSS.get(n)||"")+"\n"+t;return r.textContent=i,this.injectedCSS.set(n,i),r}remove(t=null){const e=t?`${this.styleId}-${t}`:this.styleId,n=document.getElementById(e);n&&(n.remove(),this.injectedCSS.delete(e),t||this.styleElement!==n||(this.styleElement=null))}clear(){document.querySelectorAll('style[data-turbo-flow="true"]').forEach(t=>t.remove()),this.injectedCSS.clear(),this.styleElement=null}getInjectedCSS(t=null){const e=t?`${this.styleId}-${t}`:this.styleId;return this.injectedCSS.get(e)||null}hasInjectedCSS(t=null){const e=t?`${this.styleId}-${t}`:this.styleId;return this.injectedCSS.has(e)}update(t,e=null){return this.inject(t,e)}createMediaQueryWrapper(t,e){return`@media ${e} {\n${t}\n}`}injectForReducedMotion(t){const e=this.createMediaQueryWrapper(t,"(prefers-reduced-motion: reduce)");return this.inject(e,"reduced-motion")}cleanup(){const t=[];this.injectedCSS.forEach((e,n)=>{document.getElementById(n)||t.push(n)}),t.forEach(t=>{this.injectedCSS.delete(t)})}}const o=Object.freeze(Object.defineProperty({__proto__:null,fade:{name:"fade",duration:300,easing:"ease-out",viewTransitions:{old:{from:{opacity:1},to:{opacity:0}},new:{from:{opacity:0},to:{opacity:1}}},directions:{forward:null,back:null,none:null}},flip:{name:"flip",duration:400,easing:"ease-in-out",viewTransitions:{old:{from:{transform:"perspective(600px) rotateY(0deg)",opacity:1},to:{transform:"perspective(600px) rotateY(-90deg)",opacity:0}},new:{from:{transform:"perspective(600px) rotateY(90deg)",opacity:0},to:{transform:"perspective(600px) rotateY(0deg)",opacity:1}}},directions:{forward:{old:{from:{transform:"perspective(600px) rotateY(0deg)",opacity:1},to:{transform:"perspective(600px) rotateY(-90deg)",opacity:0}},new:{from:{transform:"perspective(600px) rotateY(90deg)",opacity:0},to:{transform:"perspective(600px) rotateY(0deg)",opacity:1}}},back:{old:{from:{transform:"perspective(600px) rotateY(0deg)",opacity:1},to:{transform:"perspective(600px) rotateY(90deg)",opacity:0}},new:{from:{transform:"perspective(600px) rotateY(-90deg)",opacity:0},to:{transform:"perspective(600px) rotateY(0deg)",opacity:1}}},none:{old:{from:{transform:"perspective(600px) rotateY(0deg)",opacity:1},to:{transform:"perspective(600px) rotateY(-45deg)",opacity:0}},new:{from:{transform:"perspective(600px) rotateY(45deg)",opacity:0},to:{transform:"perspective(600px) rotateY(0deg)",opacity:1}}}}},morph:{name:"morph",duration:400,easing:"cubic-bezier(0.4, 0, 0.2, 1)",viewTransitions:{old:{from:{opacity:1},to:{opacity:0}},new:{from:{opacity:0},to:{opacity:1}}},directions:{forward:null,back:null,none:null},requiresElement:!0,usesViewTransitionName:!0},slide:{name:"slide",duration:300,easing:"ease-out",viewTransitions:{old:{from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(-100%)",opacity:0}},new:{from:{transform:"translateX(100%)",opacity:0},to:{transform:"translateX(0)",opacity:1}}},directions:{forward:{old:{from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(-100%)",opacity:0}},new:{from:{transform:"translateX(100%)",opacity:0},to:{transform:"translateX(0)",opacity:1}}},back:{old:{from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(100%)",opacity:0}},new:{from:{transform:"translateX(-100%)",opacity:0},to:{transform:"translateX(0)",opacity:1}}},none:{old:{from:{transform:"translateX(0)",opacity:1},to:{transform:"translateX(-50%)",opacity:0}},new:{from:{transform:"translateX(50%)",opacity:0},to:{transform:"translateX(0)",opacity:1}}}}},slideDown:{name:"slide-down",duration:300,easing:"ease-out",viewTransitions:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(100%)",opacity:0}},new:{from:{transform:"translateY(-100%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}},directions:{forward:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(100%)",opacity:0}},new:{from:{transform:"translateY(-100%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}},back:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(-100%)",opacity:0}},new:{from:{transform:"translateY(100%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}},none:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(50%)",opacity:0}},new:{from:{transform:"translateY(-50%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}}}},slideUp:{name:"slide-up",duration:300,easing:"ease-out",viewTransitions:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(-100%)",opacity:0}},new:{from:{transform:"translateY(100%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}},directions:{forward:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(-100%)",opacity:0}},new:{from:{transform:"translateY(100%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}},back:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(100%)",opacity:0}},new:{from:{transform:"translateY(-100%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}},none:{old:{from:{transform:"translateY(0)",opacity:1},to:{transform:"translateY(-50%)",opacity:0}},new:{from:{transform:"translateY(50%)",opacity:0},to:{transform:"translateY(0)",opacity:1}}}}},zoom:{name:"zoom",duration:300,easing:"ease-out",viewTransitions:{old:{from:{transform:"scale(1)",opacity:1},to:{transform:"scale(1.1)",opacity:0}},new:{from:{transform:"scale(0.9)",opacity:0},to:{transform:"scale(1)",opacity:1}}},directions:{forward:{old:{from:{transform:"scale(1)",opacity:1},to:{transform:"scale(0.8)",opacity:0}},new:{from:{transform:"scale(1.2)",opacity:0},to:{transform:"scale(1)",opacity:1}}},back:{old:{from:{transform:"scale(1)",opacity:1},to:{transform:"scale(1.2)",opacity:0}},new:{from:{transform:"scale(0.8)",opacity:0},to:{transform:"scale(1)",opacity:1}}},none:{old:{from:{transform:"scale(1)",opacity:1},to:{transform:"scale(0.95)",opacity:0}},new:{from:{transform:"scale(1.05)",opacity:0},to:{transform:"scale(1)",opacity:1}}}}}},Symbol.toStringTag,{value:"Module"}));class s{constructor(o={}){this.config=new t(o),this.registry=new e,this.scanner=new n,this.generator=new r(this.registry),this.injector=new i,this.initialized=!1,this.currentTransition=null,this.navigationHistory=new Map,this.registerDefaultAnimations()}init(){return this.initialized?(console.warn("TurboFlow already initialized"),this):(this.scanner.setDefaultTransition(this.config.get("defaultTransition")),this.setupEventListeners(),this.injectBaseStyles(),this.initialized=!0,this)}configure(t){return this.config.update(t),this.scanner.setDefaultTransition(this.config.get("defaultTransition")),this.injectBaseStyles(),this}registerAnimation(t,e){return this.registry.register(t,e),this}registerDefaultAnimations(){Object.entries(o).forEach(([t,e])=>{this.registry.register(t,e)})}injectBaseStyles(){}setupEventListeners(){document.addEventListener("turbo:click",this.handleClick.bind(this)),document.addEventListener("turbo:submit-start",this.handleSubmitStart.bind(this)),document.addEventListener("turbo:before-visit",this.handleBeforeVisit.bind(this)),document.addEventListener("turbo:visit",this.handleVisit.bind(this)),document.addEventListener("turbo:before-render",this.handleBeforeRender.bind(this)),document.addEventListener("turbo:render",this.handleRender.bind(this)),document.addEventListener("turbo:load",this.handleLoad.bind(this)),document.addEventListener("turbo:before-frame-render",this.handleBeforeFrameRender.bind(this)),document.addEventListener("turbo:before-stream-render",this.handleBeforeStreamRender.bind(this))}handleRender(){this.config.get("debug")&&(console.log("TurboFlow: Render event fired"),console.log("TurboFlow: Current HTML classes during render:",document.documentElement.className),console.log("TurboFlow: data-turbo-visit-direction:",document.documentElement.getAttribute("data-turbo-visit-direction")))}handleClick(t){const e=t.target.closest("a[data-turbo-flow]");e&&(this.currentTransition=e.dataset.turboFlow,this.config.get("debug")&&console.log("TurboFlow: Click detected, transition:",this.currentTransition))}handleSubmitStart(t){const e=t.target;e&&e.dataset.turboFlow&&(this.currentTransition=e.dataset.turboFlow,this.config.get("debug")&&console.log("TurboFlow: Form submit detected, transition:",this.currentTransition))}handleBeforeVisit(t){if(!this.config.shouldAnimate())return;let e=this.currentTransition;if(!e){const n=document.querySelector(`a[href="${t.detail.url}"]`);e=(null==n?void 0:n.dataset.turboFlow)?n.dataset.turboFlow:this.config.get("defaultTransition")}this.pendingTransition=e,this.pendingUrl=t.detail.url,this.currentUrl=window.location.href,this.config.get("debug")&&console.log("TurboFlow: Before visit, storing transition:",e||this.config.get("defaultTransition"))}handleVisit(t){if(this.config.shouldAnimate()&&!this.pendingTransition){if("restore"===t.detail.action){const e=window.location.href,n=this.navigationHistory.get(e);n?(this.pendingTransition=n,this.pendingUrl=t.detail.url,this.config.get("debug")&&console.log("TurboFlow: Restore navigation detected, using stored transition:",n)):(this.pendingTransition=this.config.get("defaultTransition"),this.pendingUrl=t.detail.url,this.config.get("debug")&&console.log("TurboFlow: Restore navigation, no stored transition, using default"))}}}handleBeforeRender(t){if(this.pendingTransition){const t=document.documentElement.getAttribute("data-turbo-visit-direction");let e=this.pendingTransition;if("back"===t){const t=this.pendingUrl,n=this.navigationHistory.get(t);n&&(e=n,this.config.get("debug")&&console.log("TurboFlow: Back navigation, using stored transition:",n))}else if(this.currentUrl){if(this.navigationHistory.set(this.currentUrl,e),this.navigationHistory.size>50){const t=this.navigationHistory.keys().next().value;this.navigationHistory.delete(t)}this.config.get("debug")&&console.log("TurboFlow: Stored transition for leaving URL:",this.currentUrl,"→",e)}const n=this.generator.generate({links:[{transition:e}]});n&&(this.injector.inject(n,"turboflow-active-transition"),this.config.get("debug")&&console.log("TurboFlow: Injected CSS for transition:",e));const r=this.registry.list().map(t=>`turboflow-${t}`);document.documentElement.classList.remove(...r),document.documentElement.classList.add(`turboflow-${e}`),this.config.get("debug")&&(console.log("TurboFlow: Before render - Added class:",`turboflow-${e}`),console.log("TurboFlow: data-turbo-visit-direction:",t),console.log("TurboFlow: Navigation history size:",this.navigationHistory.size)),this.pendingTransition=null,this.pendingUrl=null,this.currentUrl=null}setTimeout(()=>{document.documentElement.classList.remove(...this.registry.list().map(t=>`turboflow-${t}`)),this.config.get("debug")&&console.log("TurboFlow: Cleaned up classes")},1e3)}handleLoad(){this.currentTransition=null,this.scanner.clearCache();const t=this.scanner.scan(document.body);if(t.targets&&t.targets.length>0){const e=t.targets.filter(t=>t.id&&t.transition&&("morph"===t.transition||this.registry.get(t.transition)));if(e.length>0){const t=this.generator.generate({targets:e});t&&(this.injector.inject(t,"element-transitions"),this.config.get("debug")&&console.log("TurboFlow: Generated CSS for element transitions:",e.map(t=>`${t.id}:${t.transition}`)))}}this.config.get("debug")&&console.log("TurboFlow: Page loaded, found elements:",t)}handleBeforeFrameRender(t){if(!this.config.shouldAnimate())return;const e=t.target,n=this.config.getFrameTransition(e.id);if(n){const t=this.generator.generate({frames:[{id:e.id,transition:n}]});t&&this.injector.inject(t,`frame-${e.id}`)}}handleBeforeStreamRender(t){if(!this.config.shouldAnimate())return;const e=t.detail.action,n=this.config.getStreamTransition(e);if(n){const t=this.generator.generate({streams:[{action:e,transition:n}]});t&&this.injector.inject(t,`stream-${e}`)}}destroy(){return document.removeEventListener("turbo:click",this.handleClick),document.removeEventListener("turbo:submit-start",this.handleSubmitStart),document.removeEventListener("turbo:before-visit",this.handleBeforeVisit),document.removeEventListener("turbo:visit",this.handleVisit),document.removeEventListener("turbo:before-render",this.handleBeforeRender),document.removeEventListener("turbo:load",this.handleLoad),document.removeEventListener("turbo:before-frame-render",this.handleBeforeFrameRender),document.removeEventListener("turbo:before-stream-render",this.handleBeforeStreamRender),this.injector.clear(),this.scanner.clearCache(),this.generator.clear(),this.navigationHistory.clear(),this.initialized=!1,this}}if("undefined"!=typeof window&&!window.TurboFlow){const t=()=>{window.TurboFlow=new s,window.TurboFlow.init()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",t):t()}return s});
2
+ //# sourceMappingURL=turboflow.umd.js.map
data/lib/generators/turbo_flow/install/install_generator.rb ADDED
@@ -0,0 +1,68 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "rails/generators/base"
4
+
5
+ module TurboFlow
6
+ class InstallGenerator < Rails::Generators::Base
7
+ source_root File.expand_path("templates", __dir__)
8
+
9
+ def create_initializer
10
+ template "turboflow.rb", "config/initializers/turboflow.rb"
11
+ end
12
+
13
+ def update_application_layout
14
+ return unless File.exist?(application_layout_path)
15
+
16
+ insert_turboflow_meta_tags
17
+ # No longer replacing body tags - just use regular <body> tags
18
+ end
19
+
20
+ def display_post_install_message
21
+ say "\n" + "="*60, :blue
22
+ say "TurboFlow installation complete!", :green
23
+ say "="*60 + "\n", :blue
24
+
25
+ say "\nLayout Updates:", :yellow
26
+ say " • turboflow_meta_tags added to <head>\n"
27
+
28
+ say "\nUsage Examples:", :yellow
29
+ say " • Link with transition:"
30
+ say " • <%= link_flow_to 'About', about_path, flow: :slide %>\n"
31
+
32
+ say " • Button with transition:"
33
+ say " • <%= button_flow_to 'Submit', path, flow: :zoom %>\n"
34
+
35
+ say " • Available transitions: fade, slide, zoom, flip, morph\n"
36
+
37
+ say "\nConfiguration:", :yellow
38
+ say " • Edit config/initializers/turboflow.rb to customize defaults\n"
39
+
40
+ say "\nDocumentation:", :yellow
41
+ say " • https://github.com/Nickiam7/turboflow\n"
42
+ end
43
+
44
+ private
45
+
46
+ def application_layout_path
47
+ Rails.root.join("app/views/layouts/application.html.erb")
48
+ end
49
+
50
+ def insert_turboflow_meta_tags
51
+ return if File.read(application_layout_path).include?("turboflow_meta_tags")
52
+
53
+ # Use Thor's insert_into_file method for clean insertion
54
+ insert_into_file application_layout_path,
55
+ "\n <%= turboflow_meta_tags %>",
56
+ after: "<%= csp_meta_tag %>"
57
+
58
+ say " ✅ Added turboflow_meta_tags to layout", :green
59
+ rescue Errno::ENOENT
60
+ say " ⚠️ Could not find csp_meta_tag in layout", :yellow
61
+ end
62
+
63
+ # No longer needed - regular body tags work fine
64
+ # def replace_body_tags
65
+ # # Removed - TurboFlow works with regular <body> tags
66
+ # end
67
+ end
68
+ end
data/lib/generators/turbo_flow/install/templates/turboflow.rb ADDED
@@ -0,0 +1,16 @@
1
+ # frozen_string_literal: true
2
+
3
+ TurboFlow.configure do |config|
4
+ # Default transition for all links
5
+ # Options: :fade, :slide, :slideUp, :slideDown, :slideLeft, :slideRight, :zoom, :flip
6
+ config.default_transition = :fade
7
+
8
+ # Animation duration in milliseconds
9
+ config.duration = 300
10
+
11
+ # CSS easing function
12
+ config.easing = "ease-out"
13
+
14
+ # Enable debug logging
15
+ config.debug = Rails.env.development?
16
+ end
data/lib/turboflow/configuration.rb ADDED
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ module TurboFlow
4
+ class Configuration
5
+ attr_accessor :default_transition, :duration, :easing, :debug
6
+
7
+ def initialize
8
+ @default_transition = :fade
9
+ @duration = 300
10
+ @easing = "ease-out"
11
+ @debug = false
12
+ end
13
+ end
14
+ end
data/lib/turboflow/engine.rb ADDED
@@ -0,0 +1,20 @@
1
+ # frozen_string_literal: true
2
+
3
+ module TurboFlow
4
+ class Engine < ::Rails::Engine
5
+ isolate_namespace TurboFlow
6
+
7
+ initializer "turboflow.helpers" do
8
+ ActiveSupport.on_load(:action_view) do
9
+ include TurboFlow::Helpers
10
+ end
11
+ end
12
+
13
+ initializer "turboflow.assets" do |app|
14
+ app.config.assets.paths << Engine.root.join("app/assets/javascripts")
15
+ app.config.assets.precompile += %w[
16
+ turboflow.js
17
+ ]
18
+ end
19
+ end
20
+ end
data/lib/turboflow/helpers.rb ADDED
@@ -0,0 +1,76 @@
1
+ # frozen_string_literal: true
2
+
3
+ module TurboFlow
4
+ module Helpers
5
+ def turboflow_meta_tags
6
+ safe_join([
7
+ tag(:meta, name: "view-transition", content: "same-origin"),
8
+ turboflow_config_script,
9
+ turboflow_script_tag
10
+ ])
11
+ end
12
+
13
+ def turboflow_script_tag
14
+ javascript_include_tag("turboflow", "data-turbo-track": "reload")
15
+ end
16
+
17
+ def turboflow_body_tag(options = {}, &block)
18
+ content_tag(:body, options, &block)
19
+ end
20
+
21
+ def turboflow_config_script
22
+ config = TurboFlow.configuration
23
+
24
+ javascript_tag do
25
+ <<~JS.html_safe
26
+ window.TurboFlowConfig = {
27
+ defaultTransition: '#{config.default_transition}',
28
+ duration: #{config.duration},
29
+ easing: '#{config.easing}',
30
+ debug: #{config.debug}
31
+ };
32
+
33
+ if (window.TurboFlow) {
34
+ window.TurboFlow.configure(window.TurboFlowConfig);
35
+ } else {
36
+ document.addEventListener('DOMContentLoaded', function() {
37
+ if (window.TurboFlow) {
38
+ window.TurboFlow.configure(window.TurboFlowConfig);
39
+ }
40
+ });
41
+ }
42
+ JS
43
+ end
44
+ end
45
+
46
+ def link_flow_to(name = nil, options = nil, html_options = nil, &block)
47
+ if block_given?
48
+ html_options = options || {}
49
+ options = name
50
+ name = capture(&block)
51
+ else
52
+ html_options ||= {}
53
+ end
54
+
55
+ flow = html_options.delete(:flow)
56
+ html_options["data-turbo-flow"] = flow.to_s if flow
57
+
58
+ link_to(name, options, html_options)
59
+ end
60
+
61
+ def button_flow_to(name = nil, options = nil, html_options = nil, &block)
62
+ if block_given?
63
+ html_options = options || {}
64
+ options = name
65
+ name = capture(&block)
66
+ else
67
+ html_options ||= {}
68
+ end
69
+
70
+ flow = html_options.delete(:flow)
71
+ html_options["data-turbo-flow"] = flow.to_s if flow
72
+
73
+ button_to(name, options, html_options)
74
+ end
75
+ end
76
+ end
data/lib/turboflow/version.rb ADDED
@@ -0,0 +1,5 @@
1
+ # frozen_string_literal: true
2
+
3
+ module TurboFlow
4
+ VERSION = "0.1.0"
5
+ end
data/lib/turboflow-rails.rb ADDED
@@ -0,0 +1,18 @@
1
+ # frozen_string_literal: true
2
+
3
+ require "turboflow/version"
4
+ require "turboflow/configuration"
5
+ require "turboflow/engine"
6
+ require "turboflow/helpers"
7
+
8
+ module TurboFlow
9
+ class << self
10
+ def configuration
11
+ @configuration ||= Configuration.new
12
+ end
13
+
14
+ def configure
15
+ yield(configuration)
16
+ end
17
+ end
18
+ end
metadata ADDED
@@ -0,0 +1,86 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: turboflow-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - Nick McNeany
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2025-09-18 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: rails
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: 7.0.0
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: 7.0.0
27
+ - !ruby/object:Gem::Dependency
28
+ name: turbo-rails
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - ">="
32
+ - !ruby/object:Gem::Version
33
+ version: 1.0.0
34
+ type: :runtime
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - ">="
39
+ - !ruby/object:Gem::Version
40
+ version: 1.0.0
41
+ description: TurboFlow brings native app-like page transitions to Rails applications
42
+ using Hotwire Turbo and the View Transitions API
43
+ email:
44
+ - nick@railsyeah.com
45
+ executables: []
46
+ extensions: []
47
+ extra_rdoc_files: []
48
+ files:
49
+ - MIT-LICENSE
50
+ - README.md
51
+ - Rakefile
52
+ - app/assets/javascripts/turboflow.js
53
+ - lib/generators/turbo_flow/install/install_generator.rb
54
+ - lib/generators/turbo_flow/install/templates/turboflow.rb
55
+ - lib/turboflow-rails.rb
56
+ - lib/turboflow/configuration.rb
57
+ - lib/turboflow/engine.rb
58
+ - lib/turboflow/helpers.rb
59
+ - lib/turboflow/version.rb
60
+ homepage: https://github.com/Nickiam7/TurboFlow
61
+ licenses:
62
+ - MIT
63
+ metadata:
64
+ homepage_uri: https://github.com/Nickiam7/TurboFlow
65
+ source_code_uri: https://github.com/Nickiam7/TurboFlow
66
+ changelog_uri: https://github.com/Nickiam7/TurboFlow/blob/main/CHANGELOG.md
67
+ post_install_message:
68
+ rdoc_options: []
69
+ require_paths:
70
+ - lib
71
+ required_ruby_version: !ruby/object:Gem::Requirement
72
+ requirements:
73
+ - - ">="
74
+ - !ruby/object:Gem::Version
75
+ version: 2.7.0
76
+ required_rubygems_version: !ruby/object:Gem::Requirement
77
+ requirements:
78
+ - - ">="
79
+ - !ruby/object:Gem::Version
80
+ version: '0'
81
+ requirements: []
82
+ rubygems_version: 3.0.3.1
83
+ signing_key:
84
+ specification_version: 4
85
+ summary: Smooth page transitions for Rails applications with Turbo
86
+ test_files: []