hotwire_react 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 94a67c7d39f7bd4321fa153ad690442940e9691e47ff4bda0c7451614377b766
+  data.tar.gz: 16c15c83a00301fd0279485b3e3a9c6733f6aa99f0b9abf72b378c3578199b6b
+SHA512:
+  metadata.gz: 10bc6be8594332fff0b57d8549c2dfd6c9258b57fdee42c5ff4ed4d99bd06b8557852446ebd4805255291ee6d4729e7e50dc25aee1a9d4a25deda5d051f6b4a9
+  data.tar.gz: e362627e89542acbf3d325568a3176770acbd4428edf9a48b7bcdd05cfe7ace20a402146a32df5a0f7ca8a6c0b64db58faa9298b208d2f4bd7e54e94835b32a5

data/.rspec

@@ -0,0 +1,3 @@
+--format documentation
+--color
+--require spec_helper

data/.rubocop.yml

@@ -0,0 +1,8 @@
+AllCops:
+  TargetRubyVersion: 3.0
+
+Style/StringLiterals:
+  EnforcedStyle: double_quotes
+
+Style/StringLiteralsInInterpolation:
+  EnforcedStyle: double_quotes

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Carl Dawson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,152 @@
+# HotwireReact
+
+HotwireReact is a Ruby gem that seamlessly integrates React into Rails 7 projects using esbuild. 
+
+It allows you to create React components in the app/javascript/components directory and include them in your Rails views with a <%= component "ComponentName" %> helper. 
+
+This gem is designed to work alongside Hotwire, providing a useTurboFetch hook to allow React components to send JSON to Rails controllers and receive back and render TurboStreams.
+
+## Features
+
+- **Easy Integration**: Add React components to your Rails views effortlessly.
+- **Hotwire/ Compatibility**: Use the useTurboFetch hook for seamless integration with TurboStreams.
+- **JavaScript and TypeScript Support**: Write your components in either JavaScript or TypeScript.
+- **Automatic Setup**: Installs react and react-dom (and types and TypeScript, if using) and sets up your project with necessary files.
+
+
+## Installation
+
+Create a new Rails 7 project using esbuild:
+
+```
+rails new my_app -j esbuild
+```
+
+Add this line to your application's Gemfile:
+
+```
+gem 'hotwire_react'
+```
+
+And then execute:
+
+```
+bundle install
+```
+
+Next, run the install generator:
+
+```
+rails generate hotwire_react:install:js # for JavaScript
+rails generate hotwire_react:install:ts # for TypeScript
+```
+
+This will install the necessary JavaScript dependencies and copy the required files into your app/javascript directory.
+
+## Usage
+
+### Creating React Components
+
+Create a React component in app/javascript/components, an example component is already created for you:
+
+```tsx
+import React from "react";
+
+type HelloProps = {
+  name: String
+}
+
+const Hello = ({ name }: HelloProps) => {
+  if (name === undefined) {
+    return (
+      <h1>Hello from HotwireReact!</h1>
+    )
+  }
+  
+  return (
+    <h1>Hello, { name }!</h1>
+  )
+}
+
+export default Hello
+```
+
+Make sure you add this component to the components/index.ts:
+
+```ts
+import Hello from "./Hello";
+
+interface Components {
+  [key: string]: ({}: any) => React.JSX.Element;
+}
+
+const components: Components = {
+  Hello,
+  // Add other components here
+};
+
+export default components;
+```
+
+### Including Components in Rails Views
+
+Now you can use the component in a Rails view:
+
+```rb
+<%= component "Hello" %>
+```
+
+### Components with Props
+
+You can pass props (if required by your components) as follows:
+
+```rb
+<%= component "Hello", { name: @name } %>
+```
+
+### The useTurboFetch hook
+
+With the useTurboFetch hook you can continue to use TurboStreams to update page content as you would in a standard Rails application. Create a React form that uses the hook like so:
+
+```tsx
+import React, { useState, FormEvent, ChangeEvent } from "react";
+import useTurboFetch from "../hooks/useTurboFetch";
+
+const MessageForm = () => {
+  const [content, setContent] = useState('');
+  const { turboFetch } = useTurboFetch();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    turboFetch(event.currentTarget.action, "POST", { message: { content } });
+    setContent('');
+  }
+
+  const handleMessageChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setContent(event.target.value);
+  }
+
+  return (
+    <form action="/messages" onSubmit={handleSubmit}>
+      <input type="text" value={content} onChange={handleMessageChange}/>
+      <button type="submit">Submit</button>
+    </form>
+  )
+}
+
+export default MessageForm
+```
+
+Here turboFetch replaces the standard fetch call.
+
+## Configuration
+
+By default, HotwireReact will automatically configure your Rails application. If you need to customize the setup, you can modify the generated files in the app/javascript directory.
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/carldaws/hotwire_react.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: %i[spec rubocop]

data/lib/generators/hotwire_react/install/js/js_generator.rb

@@ -0,0 +1,34 @@
+module HotwireReact
+  module Generators
+    module Install
+      class JsGenerator < Rails::Generators::Base
+        source_root File.expand_path('templates', __dir__)
+
+        def copy_setup_script
+          copy_file "setup_hotwire_react.sh", "bin/setup_hotwire_react.sh"
+          chmod "bin/setup_hotwire_react.sh", 0755
+        end
+
+        def copy_react_controller
+          copy_file "controllers/react_controller.js", "app/javascript/controllers/react_controller.js"
+        end
+
+        def copy_turbo_hook
+          copy_file "hooks/useTurboFetch.jsx", "app/javascript/hooks/useTurboFetch.jsx"
+        end
+
+        def copy_example_component
+          copy_file "components/Hello.jsx", "app/javascript/components/Hello.jsx"
+        end
+
+        def copy_components_index
+          copy_file "components/index.js", "app/javascript/components/index.js"
+        end
+
+        def add_yarn_dependencies
+          run "bin/setup_hotwire_react.sh"
+        end
+      end
+    end
+  end
+end

data/lib/generators/hotwire_react/install/js/templates/components/Hello.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Hello = () => {
+  return (
+    <h1>Hello from HotwireReact!</h1>
+  )
+}
+
+export default Hello

data/lib/generators/hotwire_react/install/js/templates/components/index.js

@@ -0,0 +1,8 @@
+import Hello from "./Hello";
+
+const components = { 
+  Hello 
+  // add more components here
+}
+
+export default components

data/lib/generators/hotwire_react/install/js/templates/controllers/react_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import components from "../components";
+
+// Connects to data-controller="react"
+export default class extends Controller {
+  static values = {
+    component: String,
+    props: Object
+  }
+
+  connect() {
+    const componentName = this.componentValue;
+    const root = ReactDOM.createRoot(this.element);
+
+    const component = components[componentName];
+    if (component) {
+      root.render(React.createElement(component, this.propsValue, null));
+    } else {
+      console.error(`Component ${componentName} not found`)
+    }
+  }
+}

data/lib/generators/hotwire_react/install/js/templates/hooks/useTurboFetch.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import { Turbo } from "@hotwired/turbo-rails";
+
+const useTurboFetch = () => {
+  const [token, setToken] = useState(null);
+
+  useEffect(() => {
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+    setToken(csrfToken);
+  }, []);
+
+  const turboFetch = async (url, method, body) => {
+    if (!token) {
+      console.error("CSRF token is not set");
+      return;
+    }
+
+    try {
+      const response = await fetch(url, {
+        method: method,
+        headers: {
+          Accept: "text/vnd.turbo-stream.html",
+          "X-CSRF-Token": token,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body)
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response failed");
+      }
+
+      const responseText = await response.text();
+      Turbo.renderStreamMessage(responseText);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log(error.message);
+      } else {
+        console.log("An unknown error occurred");
+      }
+    }
+  };
+
+  return { turboFetch };
+}
+
+export default useTurboFetch;

data/lib/generators/hotwire_react/install/js/templates/setup_hotwire_react.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+yarn add react react-dom
+./bin/rails stimulus:manifest:update

data/lib/generators/hotwire_react/install/ts/templates/components/Hello.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+type HelloProps = {
+  name: String
+}
+
+const Hello = ({ name }: HelloProps) => {
+  if (name === undefined) {
+    return (
+      <h1>Hello from HotwireReact!</h1>
+    )
+  }
+  
+  return (
+    <h1>Hello, { name }!</h1>
+  )
+}
+
+export default Hello

data/lib/generators/hotwire_react/install/ts/templates/components/index.ts

@@ -0,0 +1,12 @@
+import Hello from "./Hello";
+
+interface Components {
+  [key: string]: ({}: any) => React.JSX.Element;
+}
+
+const components: Components = {
+  Hello,
+  // Add other components here
+};
+
+export default components;

data/lib/generators/hotwire_react/install/ts/templates/controllers/react_controller.ts

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus";
+import React from "react";
+import ReactDOM from "react-dom/client";
+import components from "../components";
+
+// Connects to data-controller="react"
+export default class extends Controller {
+  static values = {
+    component: String,
+    props: Object
+  }
+
+  declare componentValue: string;
+  declare propsValue: Object;
+
+  connect() {
+    const componentName = this.componentValue;
+    const root = ReactDOM.createRoot(this.element);
+
+    const component = components[componentName];
+    if (component) {
+      root.render(React.createElement(component, this.propsValue, null));
+    } else {
+      console.error(`Component ${componentName} not found`)
+    }
+  }
+}

data/lib/generators/hotwire_react/install/ts/templates/hooks/useTurboFetch.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import { Turbo } from "@hotwired/turbo-rails";
+
+const useTurboFetch = () => {
+  const [token, setToken] = useState<string | null | undefined>(null);
+
+  useEffect(() => {
+    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+    setToken(csrfToken);
+  }, []);
+
+  const turboFetch = async (url: string, method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE", body: Object) => {
+    if (!token) {
+      console.error("CSRF token is not set");
+      return;
+    }
+
+    try {
+      const response = await fetch(url, {
+        method: method,
+        headers: {
+          Accept: "text/vnd.turbo-stream.html",
+          "X-CSRF-Token": token,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(body)
+      });
+
+      if (!response.ok) {
+        throw new Error("Network response failed");
+      }
+
+      const responseText = await response.text();
+      Turbo.renderStreamMessage(responseText);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log(error.message);
+      } else {
+        console.log("An unknown error occurred");
+      }
+    }
+  };
+
+  return { turboFetch };
+}
+
+export default useTurboFetch;

data/lib/generators/hotwire_react/install/ts/templates/setup_hotwire_react.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+yarn add react react-dom @types/react @types/react-dom typescript
+./bin/rails stimulus:manifest:update

data/lib/generators/hotwire_react/install/ts/templates/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "target": "ES2015"
+  }
+}

data/lib/generators/hotwire_react/install/ts/templates/types/turbo.d.ts

@@ -0,0 +1,6 @@
+declare module "@hotwired/turbo-rails" {
+  export namespace Turbo {
+    function renderStreamMessage(message: string): void;
+    // Add other methods and properties as needed
+  }
+}

data/lib/generators/hotwire_react/install/ts/ts_generator.rb

@@ -0,0 +1,42 @@
+module HotwireReact
+  module Generators
+    module Install
+      class TsGenerator < Rails::Generators::Base
+        source_root File.expand_path('templates', __dir__)
+
+        def copy_setup_script
+          copy_file "setup_hotwire_react.sh", "bin/setup_hotwire_react.sh"
+          chmod "bin/setup_hotwire_react.sh", 0755
+        end
+
+        def copy_ts_config
+          copy_file "tsconfig.json", "tsconfig.json"
+        end
+
+        def copy_react_controller
+          copy_file "controllers/react_controller.ts", "app/javascript/controllers/react_controller.ts"
+        end
+
+        def copy_turbo_hook
+          copy_file "hooks/useTurboFetch.tsx", "app/javascript/hooks/useTurboFetch.tsx"
+        end
+
+        def copy_turbo_types
+          copy_file "types/turbo.d.ts", "app/javascript/types/turbo.d.ts"
+        end
+
+        def copy_example_component
+          copy_file "components/Hello.tsx", "app/javascript/components/Hello.tsx"
+        end
+
+        def copy_components_index
+          copy_file "components/index.ts", "app/javascript/components/index.ts"
+        end
+
+        def add_yarn_dependencies
+          run "bin/setup_hotwire_react.sh"
+        end
+      end
+    end
+  end
+end

data/lib/hotwire_react/react_helper.rb

@@ -0,0 +1,7 @@
+module HotwireReact
+  module ReactHelper
+    def component(name, props = {})
+      content_tag(:div, nil, data: { controller: 'react', react_component_value: name, react_props_value: props.to_json })
+    end
+  end
+end

data/lib/hotwire_react/version.rb

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

data/lib/hotwire_react.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require_relative "hotwire_react/version"
+require_relative "hotwire_react/react_helper"
+
+module HotwireReact
+  class Railtie < Rails::Railtie
+    initializer "hotwire_react.view_helpers" do
+      ActionView::Base.send :include, ReactHelper
+    end
+  end
+end

data/sig/turbo_react.rbs

@@ -0,0 +1,4 @@
+module HotwireReact
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end

metadata

@@ -0,0 +1,69 @@
+--- !ruby/object:Gem::Specification
+name: hotwire_react
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Carl Dawson
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2024-06-04 00:00:00.000000000 Z
+dependencies: []
+description: HotwireReact integrates React into Rails 7 apps and allows you to combine
+  the power of Hotwire with React.
+email:
+- carldawson@hey.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rspec"
+- ".rubocop.yml"
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/generators/hotwire_react/install/js/js_generator.rb
+- lib/generators/hotwire_react/install/js/templates/components/Hello.jsx
+- lib/generators/hotwire_react/install/js/templates/components/index.js
+- lib/generators/hotwire_react/install/js/templates/controllers/react_controller.js
+- lib/generators/hotwire_react/install/js/templates/hooks/useTurboFetch.jsx
+- lib/generators/hotwire_react/install/js/templates/setup_hotwire_react.sh
+- lib/generators/hotwire_react/install/ts/templates/components/Hello.tsx
+- lib/generators/hotwire_react/install/ts/templates/components/index.ts
+- lib/generators/hotwire_react/install/ts/templates/controllers/react_controller.ts
+- lib/generators/hotwire_react/install/ts/templates/hooks/useTurboFetch.tsx
+- lib/generators/hotwire_react/install/ts/templates/setup_hotwire_react.sh
+- lib/generators/hotwire_react/install/ts/templates/tsconfig.json
+- lib/generators/hotwire_react/install/ts/templates/types/turbo.d.ts
+- lib/generators/hotwire_react/install/ts/ts_generator.rb
+- lib/hotwire_react.rb
+- lib/hotwire_react/react_helper.rb
+- lib/hotwire_react/version.rb
+- sig/turbo_react.rbs
+homepage: https://github.com/carldaws/hotwire_react
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/carldaws/hotwire_react
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.0.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.7
+signing_key:
+specification_version: 4
+summary: Adds React to Rails 7 apps which use jsbundling.
+test_files: []