Rspack spike

.gitignore

@@ -32,3 +32,13 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity
+
+# Generated React on Rails packs
+**/generated/**

Gemfile

@@ -53,3 +53,9 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+# gem "react_on_rails", "= 15.0"
+
+gem "react_on_rails", path: "../../react_on_rails"
+
+gem "shakapacker", path: "/Users/justin/shakacode/shakapacker/shakapacker-popmenu"

Gemfile.lock

@@ -1,3 +1,24 @@
+PATH
+  remote: ../../react_on_rails
+  specs:
+    react_on_rails (16.0.1.rc.2)
+      addressable
+      connection_pool
+      execjs (~> 2.5)
+      rails (>= 5.2)
+      rainbow (~> 3.0)
+      shakapacker (>= 6.0)
+
+PATH
+  remote: /Users/justin/shakacode/shakapacker/shakapacker-popmenu
+  specs:
+    shakapacker (8.4.0)
+      activesupport (>= 5.2)
+      package_json
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
+
 GEM
   remote: https://rubygems.org/
   specs:
@@ -110,6 +131,7 @@ GEM
     erubi (1.13.1)
     et-orbi (1.3.0)
       tzinfo
+    execjs (2.10.0)
     fugit (1.11.2)
       et-orbi (~> 1, >= 1.2.11)
       raabro (~> 1.4)
@@ -185,6 +207,7 @@ GEM
     nokogiri (1.18.9-x86_64-linux-musl)
       racc (~> 1.4)
     ostruct (0.6.3)
+    package_json (0.1.0)
     parallel (1.27.0)
     parser (3.3.9.0)
       ast (~> 2.4.1)
@@ -202,6 +225,8 @@ GEM
     raabro (1.4.0)
     racc (1.8.1)
     rack (3.2.1)
+    rack-proxy (0.7.7)
+      rack
     rack-session (2.1.1)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
@@ -284,6 +309,7 @@ GEM
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 4.0)
       websocket (~> 1.0)
+    semantic_range (3.1.0)
     solid_cable (3.0.12)
       actioncable (>= 7.2)
       activejob (>= 7.2)
@@ -365,8 +391,10 @@ DEPENDENCIES
   kamal
   puma (>= 5.0)
   rails (~> 8.0.2, >= 8.0.2.1)
+  react_on_rails!
   rubocop-rails-omakase
   selenium-webdriver
+  shakapacker!
   solid_cable
   solid_cache
   solid_queue

Procfile.dev

@@ -0,0 +1,5 @@
+# Procfile for development using HMR (SSR enabled)
+# You can run these commands in separate shells
+rails: bundle exec rails s -p 3000
+wp-client: WEBPACK_SERVE=true bin/shakapacker-dev-server
+wp-server: SERVER_BUNDLE_ONLY=true bin/shakapacker --watch

Procfile.dev-prod-assets

@@ -0,0 +1,8 @@
+# Procfile for development with production assets 
+# Uses production-optimized, precompiled assets with development environment
+# Uncomment additional processes as needed for your app
+
+rails: bundle exec rails s -p 3001
+# sidekiq: bundle exec sidekiq -C config/sidekiq.yml
+# redis: redis-server
+# mailcatcher: mailcatcher --foreground

Procfile.dev-static-assets

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+js: bin/shakapacker --watch

app/controllers/hello_world_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class HelloWorldController < ApplicationController
+  layout "hello_world"
+
+  def index
+    @hello_world_props = { name: "Stranger" }
+  end
+end

app/javascript/packs/application.js

@@ -0,0 +1,15 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+// Uncomment to copy all static images under ./images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('./images', true)
+// const imagePath = (name) => images(name, true)

app/javascript/packs/server-bundle.js

@@ -0,0 +1,3 @@
+// import statement added by react_on_rails:generate_packs rake task
+import "./../generated/server-bundle-generated.js"
+// Placeholder comment - auto-generated imports will be prepended here by react_on_rails:generate_packs

app/javascript/src/HelloWorld/ror_components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+  color: green;
+  font-weight: bold;
+}

app/javascript/src/HelloWorldApp/actions/helloWorldActionCreators.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/prefer-default-export */
+
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+
+// Action interface
+export interface UpdateNameAction {
+  type: typeof HELLO_WORLD_NAME_UPDATE;
+  text: string;
+}
+
+// Union type for all actions
+export type HelloWorldAction = UpdateNameAction;
+
+// Action creator with proper TypeScript typing
+export const updateName = (text: string): UpdateNameAction => ({
+  type: HELLO_WORLD_NAME_UPDATE,
+  text,
+});

app/javascript/src/HelloWorldApp/components/HelloWorld.module.css

@@ -0,0 +1,4 @@
+.bright {
+  color: green;
+  font-weight: bold;
+}

app/javascript/src/HelloWorldApp/components/HelloWorld.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import * as style from './HelloWorld.module.css';
+import type { PropsFromRedux } from '../containers/HelloWorldContainer';
+
+// Component props are inferred from Redux container
+type HelloWorldProps = PropsFromRedux;
+
+const HelloWorld: React.FC<HelloWorldProps> = ({ name, updateName }) => (
+  <div>
+    <h3>
+      Hello,
+      {name}!
+    </h3>
+    <hr />
+    <form>
+      <label className={style.bright} htmlFor="name">
+        Say hello to:
+        <input id="name" type="text" value={name} onChange={(e) => updateName(e.target.value)} />
+      </label>
+    </form>
+  </div>
+);
+
+export default HelloWorld;

app/javascript/src/HelloWorldApp/constants/helloWorldConstants.ts

@@ -0,0 +1,6 @@
+/* eslint-disable import/prefer-default-export */
+
+export const HELLO_WORLD_NAME_UPDATE = 'HELLO_WORLD_NAME_UPDATE' as const;
+
+// Action type for TypeScript
+export type HelloWorldActionType = typeof HELLO_WORLD_NAME_UPDATE;

app/javascript/src/HelloWorldApp/containers/HelloWorldContainer.ts

@@ -0,0 +1,20 @@
+// Simple example of a React "smart" component
+
+import { connect, ConnectedProps } from 'react-redux';
+import HelloWorld from '../components/HelloWorld';
+import * as actions from '../actions/helloWorldActionCreators';
+import type { HelloWorldState } from '../reducers/helloWorldReducer';
+
+// Which part of the Redux global state does our component want to receive as props?
+const mapStateToProps = (state: HelloWorldState) => ({ name: state.name });
+
+// Create the connector
+const connector = connect(mapStateToProps, actions);
+
+// Infer the props from Redux state and actions
+export type PropsFromRedux = ConnectedProps<typeof connector>;
+
+// Don't forget to actually use connect!
+// Note that we don't export HelloWorld, but the redux "connected" version of it.
+// See https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples
+export default connector(HelloWorld);

app/javascript/src/HelloWorldApp/reducers/helloWorldReducer.ts

@@ -0,0 +1,22 @@
+import { combineReducers } from 'redux';
+import { HELLO_WORLD_NAME_UPDATE } from '../constants/helloWorldConstants';
+import { HelloWorldAction } from '../actions/helloWorldActionCreators';
+
+// State interface
+export interface HelloWorldState {
+  name: string;
+}
+
+// Individual reducer with TypeScript types
+const name = (state: string = '', action: HelloWorldAction): string => {
+  switch (action.type) {
+    case HELLO_WORLD_NAME_UPDATE:
+      return action.text;
+    default:
+      return state;
+  }
+};
+
+const helloWorldReducer = combineReducers<HelloWorldState>({ name });
+
+export default helloWorldReducer;

app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.client.tsx

@@ -0,0 +1,23 @@
+import { useMemo, type FC } from 'react';
+import { Provider } from 'react-redux';
+
+import configureStore, { type RailsProps } from '../store/helloWorldStore';
+import HelloWorldContainer from '../containers/HelloWorldContainer';
+
+// Props interface matches what Rails will pass from the controller
+interface HelloWorldAppProps extends RailsProps {}
+
+// See documentation for https://github.com/reactjs/react-redux.
+// This is how you get props from the Rails view into the redux store.
+// This code here binds your smart component to the redux store.
+const HelloWorldApp: FC<HelloWorldAppProps> = (props) => {
+  const store = useMemo(() => configureStore(props), [props]);
+
+  return (
+    <Provider store={store}>
+      <HelloWorldContainer />
+    </Provider>
+  );
+};
+
+export default HelloWorldApp;

app/javascript/src/HelloWorldApp/ror_components/HelloWorldApp.server.tsx

@@ -0,0 +1,5 @@
+import HelloWorldApp from './HelloWorldApp.client';
+// This could be specialized for server rendering
+// For example, if using React Router, we'd have the SSR setup here.
+
+export default HelloWorldApp;

app/javascript/src/HelloWorldApp/store/helloWorldStore.ts

@@ -0,0 +1,18 @@
+import { createStore } from 'redux';
+import type { Store, PreloadedState } from 'redux';
+import helloWorldReducer from '../reducers/helloWorldReducer';
+import type { HelloWorldState } from '../reducers/helloWorldReducer';
+
+// Rails props interface - customize based on your Rails controller
+export interface RailsProps {
+  name: string;
+  [key: string]: any; // Allow additional props from Rails
+}
+
+// Store type
+export type HelloWorldStore = Store<HelloWorldState>;
+
+const configureStore = (railsProps: RailsProps): HelloWorldStore =>
+  createStore(helloWorldReducer, railsProps as PreloadedState<HelloWorldState>);
+
+export default configureStore;

app/javascript/types/css-modules.d.ts

@@ -0,0 +1,15 @@
+// TypeScript definitions for CSS modules
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.module.sass" {
+  const classes: { [key: string]: string };
+  export default classes;
+}

app/views/hello_world/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Hello World</h1>
+<%= react_component("HelloWorldApp", props: @hello_world_props, prerender: true) %>

app/views/layouts/application.html.erb

@@ -19,6 +19,7 @@
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag "application" %>
+    <%= javascript_pack_tag "application" %>
   </head>
 
   <body>

app/views/layouts/hello_world.html.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ReactOnRailsWithShakapacker</title>
+    <%= csrf_meta_tags %>
+
+    <!-- Empty pack tags - React on Rails injects component CSS/JS here -->
+    <%= stylesheet_pack_tag %>
+    <%= javascript_pack_tag %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

babel.config.js

@@ -0,0 +1,36 @@
+// The source code including full typescript support is available at: 
+// https://github.com/shakacode/react_on_rails_demo_ssr_hmr/blob/master/babel.config.js
+
+module.exports = function (api) {
+  const defaultConfigFunc = require('shakapacker/package/babel/preset.js')
+  const resultConfig = defaultConfigFunc(api)
+  const isProductionEnv = api.env('production')
+
+  const changesOnDefault = {
+    presets: [
+      [
+        '@babel/preset-react',
+        {
+          development: !isProductionEnv,
+          useBuiltIns: true,
+          runtime: 'automatic'
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      // Enable React Refresh (Fast Refresh) only when webpack-dev-server is running (HMR mode)
+      // This prevents React Refresh from trying to connect when using static compilation
+      !isProductionEnv && process.env.WEBPACK_SERVE && 'react-refresh/babel',
+      isProductionEnv && ['babel-plugin-transform-react-remove-prop-types',
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean),
+  }
+
+  resultConfig.presets = [...resultConfig.presets, ...changesOnDefault.presets]
+  resultConfig.plugins = [...resultConfig.plugins, ...changesOnDefault.plugins ]
+
+  return resultConfig
+}