hotwire_native_rails 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5cd95ffaf194bb91e5f601aa7dde53a93d3e47bc7e859b69348abc6d86aba97a
-  data.tar.gz: 7575cd5a82c3499610e41db9ea37d1a58aa8850e5fda8d3f516e31752e6d7357
+  metadata.gz: 4a4224784bdab848b3b193b9902b70940618a3d37aa48b9502f5e98756fe4d31
+  data.tar.gz: cf49ce2b8982ae85ac45032bf39f64b20971f6521e83e9080a417fb0269fd9da
 SHA512:
-  metadata.gz: 3755dcc7413bf37957901a0a877168bee454b65f29e6942d81d18b0492b6f4ea5fabdd8167591811d0ac2766e0377d6ff249c04d5fb3e867623e205b9eb1b1e6
-  data.tar.gz: aa9862acb940543a56d8cec09f0461af28bc21038cc15b77569f54bd91350613fe06b7f2a86fe6acc5b5304b4ab1698728e85190da89e420197cea492f17c60e
+  metadata.gz: 92d384f1c486c93494a14e2635739a335e68a599201fcf3642ce1f19986d1d2b951fd7fbfb3a0e85bec69d0bddc45f6b34e0df5c23a7e6aae5c9f5f635c43755
+  data.tar.gz: 2bf89e359cd0e1518367f32ae7edd349e6aee123ccdd09b4cbb73335d8c113d6b230838f56bee15aee092b4de791615a113eaf90622214807b68a01c83138863

data/README.md

@@ -1,43 +1,39 @@
-# 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_rails
 ```
 
 ## Usage
 
-TODO: Write usage instructions here
-
-## Development
-
-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.
-
-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).
-
-## Contributing
-
-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).
+#### 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
 
-## License
+#### CSS
+- `turbo-native:` css variant (works with CSS and Tailwind)
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+#### Bridge Components
+- install Hotwire Native Bridge (works with Importmaps and Node)
+- add default bridge components (`Form`, `Menu`, `Button`)
+- `bridge_form_with` - easily apply Bridge Form component
 
-## Code of Conduct
+#### Path Configuration
+- `path_configuration_controller` for `ios` and `android`
 
-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).
+gem build hotwire_native_rails.gemspec
+gem push hotwire_native_rails-0.1.0.gem

data/lib/generators/hotwire_native/hotwire_native_generator.rb

@@ -1,17 +1,98 @@
 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"
+
+    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
+
+  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,5 @@
+class HotwireNative::V1::Ios::PathConfigurationsController < ActionController::Base
+  def show
+    render json: {}
+  end
+end

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

@@ -1,27 +1,33 @@
 # frozen_string_literal: true
 
 module HotwireNativeHelper
+  # 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/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.2.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.2.0
 platform: ruby
 authors:
 - Yaro Shm
@@ -28,7 +28,16 @@ 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/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