hotwire_native_rails 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5cd95ffaf194bb91e5f601aa7dde53a93d3e47bc7e859b69348abc6d86aba97a
-  data.tar.gz: 7575cd5a82c3499610e41db9ea37d1a58aa8850e5fda8d3f516e31752e6d7357
+  metadata.gz: c99841c967e01bca985531db7d5cfcc08b4068542a9377d4785accf30df06647
+  data.tar.gz: 0347e31a0697276735e135a3992a7827148a42287e7ebb766e153c4bcbb0f054
 SHA512:
-  metadata.gz: 3755dcc7413bf37957901a0a877168bee454b65f29e6942d81d18b0492b6f4ea5fabdd8167591811d0ac2766e0377d6ff249c04d5fb3e867623e205b9eb1b1e6
-  data.tar.gz: aa9862acb940543a56d8cec09f0461af28bc21038cc15b77569f54bd91350613fe06b7f2a86fe6acc5b5304b4ab1698728e85190da89e420197cea492f17c60e
+  metadata.gz: aecb1c68523353ca6ffe80e95427fb155fc57a9d8041c71f4c6713767ea371453a3e907e2cec799e298fa1b80cbc5092f806278bd4f9743e88831386107b9f48
+  data.tar.gz: 238a0fc863a5e1310c0451169d0fcf32cba2817aa36c99522012c1893b0a87cd55ba690b7f78b29d21ccb43ea58740faf96b12e148b9e2c414613f0c01c9ab35

data/README.md

@@ -1,43 +1,52 @@
-# HotwireNativeRails
+# Hotwire Native Rails generator
 
-TODO: Delete this and the text below, and describe your gem
-
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/hotwire_native_rails`. To experiment with that code, run `bin/console` for an interactive prompt.
+Power pack to make your Rails app [Hotwire Native](https://native.hotwired.dev)
 
 ## Installation
 
-TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
-
-Install the gem and add to the application's Gemfile by executing:
+Install the gem:
 
-```bash
-bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+```sh
+bundle add hotwire_native_rails
 ```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+Run the generator:
 
-```bash
-gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+```sh
+rails g hotwire_native
 ```
 
 ## Usage
 
-TODO: Write usage instructions here
-
-## Development
+#### Helpers
+- `viewport_meta_tag` - forbid zooming on mobile/native
+- use `data: { turbo_action: replace_if_native }` to submit authentication forms & forms in modals
+- `:mobile` request variant. `index.html+mobile.erb`
+- override link_to to not open internal links in in-app browser on native app
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+#### CSS
+- `turbo-native:` css variant (works with CSS and Tailwind)
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+#### Bridge Components
+- install Hotwire Native Bridge (works with Importmaps and Node)
+- add default bridge components (`Form`, `Menu`, `Button`)
+- add `Nav` (UIMenu) bridge component
+- `bridge_form_with` - easily apply Bridge `Form` component
 
-## Contributing
+#### Path Configuration
+- `path_configuration_controller` for `ios` and `android`
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hotwire_native_rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/hotwire_native_rails/blob/master/CODE_OF_CONDUCT.md).
-
-## License
+## Development
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+Make a release to rubygems:
 
-## Code of Conduct
+```sh
+# 1. update version in version.rb
+# 2. zip the gem
+gem build hotwire_native_rails.gemspec
+# 3. push the zip to rubygems
+gem push hotwire_native_rails-0.2.0.gem
+```
 
-Everyone interacting in the HotwireNativeRails project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/hotwire_native_rails/blob/master/CODE_OF_CONDUCT.md).
+- [Github source](https://github.com/yshmarov/hotwire_native_rails)
+- [Rubygems source](https://rubygems.org/gems/hotwire_native_rails)

data/lib/generators/hotwire_native/hotwire_native_generator.rb

@@ -1,17 +1,103 @@
 class HotwireNativeGenerator < Rails::Generators::Base
   source_root File.expand_path("templates", __dir__)
 
+  def add_gems
+    gem "browser"
+  end
+
   def copy_files
+    # helpers
     copy_file "helpers/hotwire_native_helper.rb", "app/helpers/hotwire_native_helper.rb"
     copy_file "test_unit/hotwire_native_helper_test.rb", "test/helpers/hotwire_native_helper_test.rb"
 
-    # copy conent of https://raw.githubusercontent.com/hotwired/hotwire-native-demo/refs/heads/main/public/javascript/controllers/bridge/form_controller.js to app/javascript/controllers/bridge/form_controller.js
-    # copy_file "bridge/form_controller.js", "app/javascript/controllers/bridge/form_controller.js"
+    # routes
+    copy_file "routes/hotwire_native.rb", "config/routes/hotwire_native.rb"
+    copy_file "controllers/hotwire_native/v1/android/path_configuration_controller.rb", "app/controllers/hotwire_native/v1/android/path_configuration_controller.rb"
+    copy_file "controllers/hotwire_native/v1/ios/path_configuration_controller.rb", "app/controllers/hotwire_native/v1/ios/path_configuration_controller.rb"
+
+    # :native request variant
+    copy_file "controllers/concerns/device_format.rb", "app/controllers/concerns/device_format.rb"
+ end
+
+  def add_detect_device_to_application_controller
+    inject_into_class "app/controllers/application_controller.rb", ApplicationController, "  include DetectDevice\n"
+  end
+
+  def add_routes
+    route "draw(:hotwire_native)"
+  end
+
+  # https://native.hotwired.dev/reference/bridge-installation
+  def install_javascript
+    copy_file "javascript/controllers/bridge/button_controller.js", "app/javascript/controllers/bridge/button_controller.js"
+    copy_file "javascript/controllers/bridge/menu_controller.js", "app/javascript/controllers/bridge/menu_controller.js"
+    copy_file "javascript/controllers/bridge/form_controller.js", "app/javascript/controllers/bridge/form_controller.js"
+    copy_file "javascript/controllers/bridge/overflow_menu_controller.js", "app/javascript/controllers/bridge/overflow_menu_controller.js"
+    copy_file "javascript/controllers/bridge/nav_controller.js", "app/javascript/controllers/bridge/nav_controller.js"
+
+    run "bin/importmap pin @hotwired/stimulus @hotwired/hotwire-native-bridge" if importmaps?
+    run "yarn add @hotwired/stimulus @hotwired/hotwire-native-bridge" if node?
+  end
+
+  def add_viewport_meta_tag
+    gsub_file "app/views/layouts/application.html.erb", "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">", "<%= viewport_meta_tag %>"
+  end
+
+  def add_css_variants
+    return add_tailwind_css_variants if tailwind?
+
+    add_turbo_native_css
+  end
+
+  def add_platform_identifier
+    gsub_file "app/views/layouts/application.html.erb", "<html>", "<html <%= platform_identifier %>>"
+  end
+
+  def set_page_title
+    gsub_file "app/views/layouts/application.html.erb", /<title>.*<\/title>/, "<title><%= page_title %></title>"
+  end
+
+  private
+
+  def importmaps?
+    Rails.root.join("config/importmap.rb").exist?
+  end
+
+  def node?
+    Rails.root.join("package.json").exist?
+  end
+
+  def tailwind?
+    Rails.root.join("config/tailwind.config.js").exist?
+  end
+
+  # class="turbo-native:hidden"
+  # class="non-turbo-native:hidden"
+  def add_tailwind_css_variants
+    prepend_to_file "config/tailwind.config.js", "const plugin = require('tailwindcss/plugin')\n"
+
+    inject_into_file "config/tailwind.config.js", after: "plugins: [" do
+      <<-JS
+
+  plugin(function({ addVariant }) {
+    addVariant("turbo-native", "html[data-turbo-native] &"),
+    addVariant("non-turbo-native", "html:not([data-turbo-native]) &")
+  }),
+      JS
+    end
+  end
 
-    # path_configuration file
+  # class="turbo-native:hidden"
+  def add_turbo_native_css
+    gsub_file "app/views/layouts/application.html.erb", "<body>", "<body class=\"<%= \"turbo-native\" if turbo_native_app? %>\">"
 
-    # tailwind
+    append_to_file "app/assets/stylesheets/application.css" do
+      <<-CSS
 
-    # devise variant
+body.turbo-native .turbo-native:hidden {
+  display: none;
+}
+      CSS
+    end
   end
 end

data/lib/generators/hotwire_native/templates/controllers/concerns/device_format.rb

@@ -0,0 +1,13 @@
+module DeviceFormat
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :set_variant
+  end
+
+  private
+
+  def set_variant
+    return request.variant = :mobile if turbo_native_app? || browser.device.mobile?
+  end
+end

data/lib/generators/hotwire_native/templates/controllers/hotwire_native/v1/android/path_configuration_controller.rb

@@ -0,0 +1,5 @@
+class HotwireNative::V1::Android::PathConfigurationsController < ActionController::Base
+  def show
+    render json: {}
+  end
+end

data/lib/generators/hotwire_native/templates/controllers/hotwire_native/v1/ios/path_configuration_controller.rb

@@ -0,0 +1,49 @@
+class HotwireNative::V1::Ios::PathConfigurationsController < ActionController::Base
+  def show
+    render json:
+      {
+        "settings": {
+          "enable_feature_x": true
+        },
+        "rules": [
+          {
+            "patterns": [
+              "/new$",
+              "/edit$",
+              "/signin$",
+              "/strada-form$"
+            ],
+            "properties": {
+              "context": "modal",
+              "pull_to_refresh_enabled": false
+            }
+          },
+          {
+            "patterns": [
+              "/numbers$"
+            ],
+            "properties": {
+              "view_controller": "numbers"
+            }
+          },
+          {
+            "patterns": [
+              "/numbers/[0-9]+$"
+            ],
+            "properties": {
+              "view_controller": "numbers_detail",
+              "context": "modal"
+            }
+          },
+          {
+            "patterns": [
+              "^/$"
+            ],
+            "properties": {
+              "presentation": "replace_root"
+            }
+          },
+        ]
+      }
+  end
+end

data/lib/generators/hotwire_native/templates/helpers/hotwire_native_helper.rb

@@ -1,27 +1,48 @@
 # frozen_string_literal: true
 
 module HotwireNativeHelper
+  # before
+  # <title><%= content_for(:title) || "My App" %></title>
+  # after
+  # <title><%= page_title %></title>
+  # usage
+  # <% content_for :turbo_native_title, "Sign in" %>
+  # <% content_for :title, "Sign in | My App" %>
+  def page_title
+    if turbo_native_app?
+      content_for(:turbo_native_title) || content_for(:title) || Rails.application.class.module_parent.name
+    else
+      content_for(:title) || Rails.application.class.module_parent.name
+    end
+  end
+
+  # forbid zooming on mobile devices
   def viewport_meta_tag
     content = ['width=device-width,initial-scale=1']
     content << 'maximum-scale=1, user-scalable=0' if turbo_native_app? || browser.device.mobile?
     tag.meta(name: 'viewport', content: content.join(','))
   end
 
+  # set on <html> tag
   def platform_identifier
     'data-turbo-native' if turbo_native_app?
   end
 
+  # link_to 'Next', next_path, data: { turbo_action: replace_if_native }
+  # https://turbo.hotwired.dev/handbook/drive#application-visits
   def replace_if_native
     return 'replace' if turbo_native_app?
 
     'advance'
   end
 
+  # override link_to to not open internal links in in-app browser on native app
   def link_to(name = nil, options = nil, html_options = {}, &block)
     html_options[:target] = '' if turbo_native_app? && internal_url?(url_for(options))
     super(name, options, html_options, &block)
   end
 
+  # https://github.com/joemasilotti/daily-log/blob/main/rails/app/helpers/form_helper.rb
   class BridgeFormBuilder < ActionView::Helpers::FormBuilder
     def submit(value = nil, options = {})
       options[:data] ||= {}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/button_controller.js

@@ -0,0 +1,20 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+// Source:
+// https://native.hotwired.dev/ios/bridge-components
+// Docs:
+// https://blog.corsego.com/hotwire-native-bridge-button
+export default class extends BridgeComponent {
+  static component = "button"
+
+  connect() {
+    super.connect()
+
+    const element = this.bridgeElement
+    const title = element.bridgeAttribute("title")
+    const image = element.bridgeAttribute("ios-image")
+    const side = element.bridgeAttribute("side") || "right"
+    this.send("connect", {title, image, side}, () => {
+      this.element.click()
+    })
+  }
+}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/form_controller.js

@@ -0,0 +1,34 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+// Source:
+// https://github.com/hotwired/hotwire-native-demo/blob/main/public/javascript/controllers/bridge/form_controller.js
+// Docs:
+// https://blog.corsego.com/hotwire-native-form-component
+export default class extends BridgeComponent {
+  static component = "form"
+  static targets = [ "submit" ]
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const submitButton = new BridgeElement(this.submitTarget)
+    const submitTitle = submitButton.title
+
+    this.send("connect", { submitTitle }, () => {
+      this.submitTarget.click()
+    })
+  }
+
+  submitStart(event) {
+    this.submitTarget.disabled = true
+    this.send("submitDisabled")
+  }
+
+  submitEnd(event) {
+    this.submitTarget.disabled = false
+    this.send("submitEnabled")
+  }
+}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/menu_controller.js

@@ -0,0 +1,47 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+import { BridgeElement } from "@hotwired/hotwire-native-bridge"
+// Source:
+// https://github.com/hotwired/hotwire-native-demo/blob/main/public/javascript/controllers/bridge/menu_controller.js
+// Docs:
+// https://blog.corsego.com/hotwire-native-bridge-menu-component
+export default class extends BridgeComponent {
+  static component = "menu"
+  static targets = [ "title", "item" ]
+
+  show(event) {
+    if (this.enabled) {
+      event.stopImmediatePropagation()
+      this.notifyBridgeToDisplayMenu(event)
+    }
+  }
+
+  notifyBridgeToDisplayMenu(event) {
+    const title = new BridgeElement(this.titleTarget).title
+    const items = this.makeMenuItems(this.itemTargets)
+
+    this.send("display", { title, items }, message =>  {
+      const selectedIndex = message.data.selectedIndex
+      const selectedItem = new BridgeElement(this.itemTargets[selectedIndex])
+
+      selectedItem.click()
+    })
+  }
+
+  makeMenuItems(elements) {
+    const items = elements.map((element, index) => this.menuItem(element, index))
+    const enabledItems = items.filter(item => item)
+
+    return enabledItems
+  }
+
+  menuItem(element, index) {
+    const bridgeElement = new BridgeElement(element)
+
+    if (bridgeElement.disabled) return null
+
+    return {
+      title: bridgeElement.title,
+      index: index
+    }
+  }
+}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/nav_controller.js

@@ -0,0 +1,36 @@
+import { BridgeComponent, BridgeElement } from "@hotwired/hotwire-native-bridge"
+
+// Docs:
+// https://blog.corsego.com/hotwire-native-ui-menu-dropdown
+export default class extends BridgeComponent {
+  static component = "nav"
+  static targets = ["item"]
+
+  connect() {
+    super.connect()
+
+    const items = this.itemTargets.map((item, index) => {
+      const itemElement = new BridgeElement(item)
+
+      return {
+        title: itemElement.title,
+        image: itemElement.bridgeAttribute("image") ?? "none",
+        destructive: item.dataset.turboMethod === "delete",
+        state: itemElement.bridgeAttribute("state") ?? "off",
+        index
+      }
+    })
+
+    const element = this.bridgeElement
+    const title = element.bridgeAttribute("title") ?? ""
+    const side = element.bridgeAttribute("side") || "left"
+    const image = element.bridgeAttribute("image") || "none"
+
+    this.send("connect", { items, title, image, side }, (message) => {
+      const selectedIndex = message.data.selectedIndex
+      const selectedItem = new BridgeElement(this.itemTargets[selectedIndex]);
+
+      selectedItem.click()
+    })
+  }
+}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/overflow_menu_controller.js

@@ -0,0 +1,22 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+// Source:
+// https://github.com/hotwired/hotwire-native-demo/blob/main/public/javascript/controllers/bridge/overflow_menu_controller.js
+// Docs:
+// https://blog.corsego.com/hotwire-native-bridge-menu-component
+
+export default class extends BridgeComponent {
+  static component = "overflow-menu"
+
+  connect() {
+    super.connect()
+    this.notifyBridgeOfConnect()
+  }
+
+  notifyBridgeOfConnect() {
+    const label = this.bridgeElement.title
+
+    this.send("connect", { label }, () => {
+      this.bridgeElement.click()
+    })
+  }
+}

data/lib/generators/hotwire_native/templates/javascript/controllers/bridge/review_prompt_controller.js

@@ -0,0 +1,11 @@
+import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
+// Docs:
+// https://blog.corsego.com/hotwire-native-leave-a-review-bridge-component
+export default class extends BridgeComponent {
+  static component = "review-prompt"
+
+  connect() {
+    super.connect()
+    this.send("connect")
+  }
+}

data/lib/generators/hotwire_native/templates/routes/hotwire_native.rb

@@ -0,0 +1,10 @@
+namespace :hotwire_native do
+  namespace :v1 do
+    namespace :android do
+      resource :path_configuration, only: :show
+    end
+    namespace :ios do
+      resource :path_configuration, only: :show
+    end
+  end
+end

data/lib/generators/hotwire_native/templates/test_unit/hotwire_native_helper_test.rb

@@ -1,6 +1,7 @@
 require 'test_helper'
 
 class HotwireNativeHelperTest < ActionView::TestCase
+  # add more tests
   setup do
     def root_url
       "http://test.host/"

data/lib/hotwire_native_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module HotwireNativeRails
-  VERSION = "0.1.0"
+  VERSION = "0.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_native_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Yaro Shm
@@ -28,7 +28,17 @@ files:
 - Rakefile
 - hotwire_native_rails.gemspec
 - lib/generators/hotwire_native/hotwire_native_generator.rb
+- lib/generators/hotwire_native/templates/controllers/concerns/device_format.rb
+- lib/generators/hotwire_native/templates/controllers/hotwire_native/v1/android/path_configuration_controller.rb
+- lib/generators/hotwire_native/templates/controllers/hotwire_native/v1/ios/path_configuration_controller.rb
 - lib/generators/hotwire_native/templates/helpers/hotwire_native_helper.rb
+- lib/generators/hotwire_native/templates/javascript/controllers/bridge/button_controller.js
+- lib/generators/hotwire_native/templates/javascript/controllers/bridge/form_controller.js
+- lib/generators/hotwire_native/templates/javascript/controllers/bridge/menu_controller.js
+- lib/generators/hotwire_native/templates/javascript/controllers/bridge/nav_controller.js
+- lib/generators/hotwire_native/templates/javascript/controllers/bridge/overflow_menu_controller.js
+- lib/generators/hotwire_native/templates/javascript/controllers/bridge/review_prompt_controller.js
+- lib/generators/hotwire_native/templates/routes/hotwire_native.rb
 - lib/generators/hotwire_native/templates/test_unit/hotwire_native_helper_test.rb
 - lib/hotwire_native_rails.rb
 - lib/hotwire_native_rails/version.rb