Skip to content

Commit 8f3d178

Browse files
ihabadhamihabadham
authored
React on Rails Generator Overhaul & Developer Experience Enhancement
MAJOR IMPROVEMENTS Generator Architecture Redesign: - Simplified component structure: Replaced complex client/server split with unified HelloWorld.jsx approach - Smart documentation: Added inline guidance for when client/server separation is needed - Better file organization: Improved ror_components directory structure with clear migration paths - Eliminated bad imports: Fixed server components incorrectly importing from client files Enhanced Developer Experience: - Restored colorized output: Re-added Rainbow-colored URLs and visual hierarchy to bin/dev help (wrongly reverted in bd4210b) - Improved messaging: Better generator success messages with proper endpoint URLs (/hello_world) - Visual polish: Enhanced help command with emojis, colors, and better formatting - Process manager detection: Smart detection of Overmind/Foreman with tailored recommendations Technical Refinements: - Babel configuration cleanup: Resolved duplicate preset conflicts common in yalc development - Yalc integration: Improved local development workflow with proper package linking - Linting compliance: Fixed ESLint/Prettier formatting and RuboCop style violations - Template consolidation: Streamlined generator templates for better maintainability DOCUMENTATION & GUIDANCE Comprehensive TODO Roadmap: - Created detailed improvement plan covering advanced patterns, TypeScript support, and real-world examples - Documented migration paths from Webpacker to Shakapacker - Outlined future generator flags for different architectural patterns Inline Developer Education: - Added clear comments explaining when to use client/server split patterns - Provided examples for React Router, styled-components, and other libraries requiring separation - Included migration guidance from simple to advanced architectures PROBLEM SOLVING Issues Resolved: - Generator regression: Fixed components not rendering despite correct file structure - Import conflicts: Eliminated circular dependencies in generated templates - Configuration conflicts: Addressed Babel preset duplication issues - Visual regression: Restored accidentally removed colorization and formatting Quality Improvements: - Consistent code style: Applied ESLint auto-fixes and RuboCop corrections - Better error messaging: Improved guidance for common development issues - Process management: Enhanced development server startup with better visual feedback IMPACT This overhaul transforms the React on Rails v15 generator from a complex, error-prone setup into a streamlined, educational, and visually appealing developer experience. New users get a working foundation immediately, while experienced developers receive clear guidance for advanced patterns. The enhanced bin/dev help command now serves as both a functional tool and an educational resource, making React on Rails more accessible to developers at all skill levels.
1 parent 3ed127f commit 8f3d178

File tree

97 files changed

+2498
-794
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+2498
-794
lines changed

‎.github/workflows/examples.yml‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,21 @@ jobs:
1111
strategy:
1212
fail-fast: false
1313
matrix:
14-
versions: ['oldest', 'newest']
14+
ruby-version: ['3.2', '3.4']
15+
dependency-level: ['minimum', 'latest']
16+
include:
17+
- ruby-version: '3.2'
18+
dependency-level: 'minimum'
19+
- ruby-version: '3.4'
20+
dependency-level: 'latest'
21+
exclude:
22+
- ruby-version: '3.2'
23+
dependency-level: 'latest'
24+
- ruby-version: '3.4'
25+
dependency-level: 'minimum'
1526
env:
1627
SKIP_YARN_COREPACK_CHECK: 0
17-
BUNDLE_FROZEN: ${{ matrix.versions == 'oldest' && 'false' || 'true' }}
28+
BUNDLE_FROZEN: ${{ matrix.dependency-level == 'minimum' && 'false' || 'true' }}
1829
runs-on: ubuntu-22.04
1930
steps:
2031
- uses: actions/checkout@v4
@@ -40,7 +51,7 @@ jobs:
4051
- name: Setup Ruby
4152
uses: ruby/setup-ruby@v1
4253
with:
43-
ruby-version: ${{ matrix.versions == 'oldest' && '3.0' || '3.3' }}
54+
ruby-version: ${{ matrix.ruby-version }}
4455
bundler: 2.5.9
4556
- name: Setup Node
4657
uses: actions/setup-node@v4
@@ -58,18 +69,18 @@ jobs:
5869
echo "Yarn version: "; yarn --version
5970
echo "Bundler version: "; bundle --version
6071
- name: run conversion script to support shakapacker v6
61-
if: matrix.versions == 'oldest'
72+
if: matrix.dependency-level == 'minimum'
6273
run: script/convert
6374
- name: Save root ruby gems to cache
6475
uses: actions/cache@v4
6576
with:
6677
path: vendor/bundle
67-
key: package-app-gem-cache-${{ hashFiles('Gemfile.lock') }}-${{ matrix.versions }}
78+
key: package-app-gem-cache-${{ hashFiles('Gemfile.lock') }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
6879
- id: get-sha
6980
run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
7081
- name: Install Node modules with Yarn for renderer package
7182
run: |
72-
yarn install --no-progress --no-emoji ${{ matrix.versions == 'newest' && '--frozen-lockfile' || '' }}
83+
yarn install --no-progress --no-emoji ${{ matrix.dependency-level == 'latest' && '--frozen-lockfile' || '' }}
7384
sudo yarn global add yalc
7485
- name: yalc publish for react-on-rails
7586
run: yalc publish
@@ -95,12 +106,12 @@ jobs:
95106
run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
96107
- name: Set packer version environment variable
97108
run: |
98-
echo "CI_PACKER_VERSION=${{ matrix.versions }}" >> $GITHUB_ENV
109+
echo "CI_DEPENDENCY_LEVEL=${{ matrix.dependency-level }}" >> $GITHUB_ENV
99110
- name: Main CI
100111
if: steps.changed-files.outputs.any_changed == 'true'
101-
run: bundle exec rake run_rspec:${{ matrix.versions == 'oldest' && 'web' || 'shaka' }}packer_examples
112+
run: bundle exec rake run_rspec:shakapacker_examples
102113
- name: Store test results
103114
uses: actions/upload-artifact@v4
104115
with:
105-
name: main-rspec-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
116+
name: main-rspec-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
106117
path: ~/rspec

‎.github/workflows/main.yml‎

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,20 @@ jobs:
1010
build-dummy-app-webpack-test-bundles:
1111
strategy:
1212
matrix:
13-
versions: ['oldest', 'newest']
13+
ruby-version: ['3.2', '3.4']
14+
node-version: ['20', '22']
15+
include:
16+
- ruby-version: '3.2'
17+
node-version: '20'
18+
dependency-level: 'minimum'
19+
- ruby-version: '3.4'
20+
node-version: '22'
21+
dependency-level: 'latest'
22+
exclude:
23+
- ruby-version: '3.2'
24+
node-version: '22'
25+
- ruby-version: '3.4'
26+
node-version: '20'
1427
runs-on: ubuntu-22.04
1528
steps:
1629
- uses: actions/checkout@v4
@@ -19,7 +32,7 @@ jobs:
1932
- name: Setup Ruby
2033
uses: ruby/setup-ruby@v1
2134
with:
22-
ruby-version: ${{ matrix.versions == 'oldest' && '3.0' || '3.3' }}
35+
ruby-version: ${{ matrix.ruby-version }}
2336
bundler: 2.5.9
2437
# libyaml-dev is needed for psych v5
2538
# this gem depends on sdoc which depends on rdoc which depends on psych
@@ -28,7 +41,7 @@ jobs:
2841
- name: Setup Node
2942
uses: actions/setup-node@v4
3043
with:
31-
node-version: ${{ matrix.versions == 'oldest' && '16' || '20' }}
44+
node-version: ${{ matrix.node-version }}
3245
cache: yarn
3346
cache-dependency-path: '**/yarn.lock'
3447
- name: Print system information
@@ -41,23 +54,23 @@ jobs:
4154
echo "Yarn version: "; yarn --version
4255
echo "Bundler version: "; bundle --version
4356
- name: run conversion script to support shakapacker v6
44-
if: matrix.versions == 'oldest'
57+
if: matrix.dependency-level == 'minimum'
4558
run: script/convert
4659
- name: Install Node modules with Yarn for renderer package
4760
run: |
48-
yarn install --no-progress --no-emoji ${{ matrix.versions == 'newest' && '--frozen-lockfile' || '' }}
61+
yarn install --no-progress --no-emoji ${{ matrix.dependency-level == 'latest' && '--frozen-lockfile' || '' }}
4962
sudo yarn global add yalc
5063
- name: yalc publish for react-on-rails
5164
run: yalc publish
5265
- name: yalc add react-on-rails
5366
run: cd spec/dummy && yalc add react-on-rails
5467
- name: Install Node modules with Yarn for dummy app
55-
run: cd spec/dummy && yarn install --no-progress --no-emoji ${{ matrix.versions == 'newest' && '--frozen-lockfile' || '' }}
68+
run: cd spec/dummy && yarn install --no-progress --no-emoji ${{ matrix.dependency-level == 'latest' && '--frozen-lockfile' || '' }}
5669
- name: Save dummy app ruby gems to cache
5770
uses: actions/cache@v4
5871
with:
5972
path: spec/dummy/vendor/bundle
60-
key: dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}-${{ matrix.versions }}
73+
key: dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
6174
- name: Install Ruby Gems for dummy app
6275
run: |
6376
cd spec/dummy
@@ -68,21 +81,34 @@ jobs:
6881
- name: generate file system-based packs
6982
run: cd spec/dummy && RAILS_ENV="test" bundle exec rake react_on_rails:generate_packs
7083
- name: Build test bundles for dummy app
71-
run: cd spec/dummy && rm -rf public/webpack/test && yarn run build:rescript && RAILS_ENV="test" NODE_ENV="test" bin/${{ matrix.versions == 'oldest' && 'web' || 'shaka' }}packer
84+
run: cd spec/dummy && rm -rf public/webpack/test && yarn run build:rescript && RAILS_ENV="test" NODE_ENV="test" bin/shakapacker
7285
- id: get-sha
7386
run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
7487
- name: Save test Webpack bundles to cache (for build number checksum used by RSpec job)
7588
uses: actions/cache/save@v4
7689
with:
7790
path: spec/dummy/public/webpack
78-
key: dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}-${{ matrix.versions }}
91+
key: dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
7992

8093
dummy-app-integration-tests:
8194
needs: build-dummy-app-webpack-test-bundles
8295
strategy:
8396
fail-fast: false
8497
matrix:
85-
versions: ['oldest', 'newest']
98+
ruby-version: ['3.2', '3.4']
99+
node-version: ['20', '22']
100+
include:
101+
- ruby-version: '3.2'
102+
node-version: '20'
103+
dependency-level: 'minimum'
104+
- ruby-version: '3.4'
105+
node-version: '22'
106+
dependency-level: 'latest'
107+
exclude:
108+
- ruby-version: '3.2'
109+
node-version: '22'
110+
- ruby-version: '3.4'
111+
node-version: '20'
86112
runs-on: ubuntu-22.04
87113
steps:
88114
- uses: actions/checkout@v4
@@ -91,12 +117,12 @@ jobs:
91117
- name: Setup Ruby
92118
uses: ruby/setup-ruby@v1
93119
with:
94-
ruby-version: ${{ matrix.versions == 'oldest' && '3.0' || '3.3' }}
120+
ruby-version: ${{ matrix.ruby-version }}
95121
bundler: 2.5.9
96122
- name: Setup Node
97123
uses: actions/setup-node@v4
98124
with:
99-
node-version: ${{ matrix.versions == 'oldest' && '16' || '20' }}
125+
node-version: ${{ matrix.node-version }}
100126
cache: yarn
101127
cache-dependency-path: '**/yarn.lock'
102128
- name: Print system information
@@ -109,35 +135,35 @@ jobs:
109135
echo "Yarn version: "; yarn --version
110136
echo "Bundler version: "; bundle --version
111137
- name: run conversion script to support shakapacker v6
112-
if: matrix.versions == 'oldest'
138+
if: matrix.dependency-level == 'minimum'
113139
run: script/convert
114140
- name: Save root ruby gems to cache
115141
uses: actions/cache@v4
116142
with:
117143
path: vendor/bundle
118-
key: package-app-gem-cache-${{ hashFiles('Gemfile.lock') }}-${{ matrix.versions }}
144+
key: package-app-gem-cache-${{ hashFiles('Gemfile.lock') }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
119145
- name: Save dummy app ruby gems to cache
120146
uses: actions/cache@v4
121147
with:
122148
path: spec/dummy/vendor/bundle
123-
key: dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}-${{ matrix.versions }}
149+
key: dummy-app-gem-cache-${{ hashFiles('spec/dummy/Gemfile.lock') }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
124150
- id: get-sha
125151
run: echo "sha=\"$(git rev-parse HEAD)\"" >> "$GITHUB_OUTPUT"
126152
- name: Save test Webpack bundles to cache (for build number checksum used by RSpec job)
127153
uses: actions/cache@v4
128154
with:
129155
path: spec/dummy/public/webpack
130-
key: dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}-${{ matrix.versions }}
156+
key: dummy-app-webpack-bundle-${{ steps.get-sha.outputs.sha }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
131157
- name: Install Node modules with Yarn
132158
run: |
133-
yarn install --no-progress --no-emoji ${{ matrix.versions == 'newest' && '--frozen-lockfile' || '' }}
159+
yarn install --no-progress --no-emoji ${{ matrix.dependency-level == 'latest' && '--frozen-lockfile' || '' }}
134160
sudo yarn global add yalc
135161
- name: yalc publish for react-on-rails
136162
run: yalc publish
137163
- name: yalc add react-on-rails
138164
run: cd spec/dummy && yalc add react-on-rails
139165
- name: Install Node modules with Yarn for dummy app
140-
run: cd spec/dummy && yarn install --no-progress --no-emoji ${{ matrix.versions == 'newest' && '--frozen-lockfile' || '' }}
166+
run: cd spec/dummy && yarn install --no-progress --no-emoji ${{ matrix.dependency-level == 'latest' && '--frozen-lockfile' || '' }}
141167
- name: Dummy JS tests
142168
run: |
143169
cd spec/dummy
@@ -172,34 +198,34 @@ jobs:
172198
- name: generate file system-based packs
173199
run: cd spec/dummy && RAILS_ENV="test" bundle exec rake react_on_rails:generate_packs
174200
- name: Git Stuff
175-
if: matrix.versions == 'oldest'
201+
if: matrix.dependency-level == 'minimum'
176202
run: |
177203
git config user.email "[email protected]"
178204
git config user.name "Your Name"
179205
git commit -am "stop generators from complaining about uncommitted code"
180206
- run: cd spec/dummy && bundle info shakapacker
181207
- name: Set packer version environment variable
182208
run: |
183-
echo "CI_PACKER_VERSION=${{ matrix.versions }}" >> $GITHUB_ENV
209+
echo "CI_DEPENDENCY_LEVEL=ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}" >> $GITHUB_ENV
184210
- name: Main CI
185211
run: bundle exec rake run_rspec:all_dummy
186212
- name: Store test results
187213
uses: actions/upload-artifact@v4
188214
with:
189-
name: main-rspec-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
215+
name: main-rspec-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
190216
path: ~/rspec
191217
- name: Store artifacts
192218
uses: actions/upload-artifact@v4
193219
with:
194-
name: dummy-app-capybara-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
220+
name: dummy-app-capybara-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
195221
path: spec/dummy/tmp/capybara
196222
- name: Store artifacts
197223
uses: actions/upload-artifact@v4
198224
with:
199-
name: dummy-app-test-log-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
225+
name: dummy-app-test-log-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
200226
path: spec/dummy/log/test.log
201227
- name: Store artifacts
202228
uses: actions/upload-artifact@v4
203229
with:
204-
name: dummy-app-yarn-log-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
230+
name: dummy-app-yarn-log-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
205231
path: spec/dummy/yarn-error.log

‎.github/workflows/package-js-tests.yml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ jobs:
1010
build:
1111
strategy:
1212
matrix:
13-
versions: ['oldest', 'newest']
13+
node-version: ['20', '22']
1414
runs-on: ubuntu-22.04
1515
steps:
1616
- uses: actions/checkout@v4
@@ -19,7 +19,7 @@ jobs:
1919
- name: Setup Node
2020
uses: actions/setup-node@v4
2121
with:
22-
node-version: ${{ matrix.versions == 'oldest' && '16' || '20' }}
22+
node-version: ${{ matrix.node-version }}
2323
cache: yarn
2424
cache-dependency-path: '**/yarn.lock'
2525
- name: Print system information
@@ -30,11 +30,11 @@ jobs:
3030
echo "Node version: "; node -v
3131
echo "Yarn version: "; yarn --version
3232
- name: run conversion script
33-
if: matrix.versions == 'oldest'
33+
if: matrix.node-version == '20'
3434
run: script/convert
3535
- name: Install Node modules with Yarn for renderer package
3636
run: |
37-
yarn install --no-progress --no-emoji ${{ matrix.versions == 'newest' && '--frozen-lockfile' || '' }}
37+
yarn install --no-progress --no-emoji ${{ matrix.node-version == '22' && '--frozen-lockfile' || '' }}
3838
sudo yarn global add yalc
3939
- name: Run JS unit tests for Renderer package
4040
run: yarn test

‎.github/workflows/rspec-package-specs.yml‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ jobs:
1111
strategy:
1212
fail-fast: false
1313
matrix:
14-
versions: ['oldest', 'newest']
14+
ruby-version: ['3.2', '3.4']
15+
dependency-level: ['minimum', 'latest']
1516
env:
16-
BUNDLE_FROZEN: ${{ matrix.versions == 'oldest' && 'false' || 'true' }}
17+
BUNDLE_FROZEN: ${{ matrix.dependency-level == 'minimum' && 'false' || 'true' }}
1718
runs-on: ubuntu-22.04
1819
steps:
1920
- uses: actions/checkout@v4
@@ -22,7 +23,7 @@ jobs:
2223
- name: Setup Ruby
2324
uses: ruby/setup-ruby@v1
2425
with:
25-
ruby-version: ${{ matrix.versions == 'oldest' && '3.0' || '3.3' }}
26+
ruby-version: ${{ matrix.ruby-version }}
2627
bundler: 2.5.9
2728
- name: Print system information
2829
run: |
@@ -33,34 +34,34 @@ jobs:
3334
echo "Node version: "; node -v
3435
echo "Yarn version: "; yarn --version
3536
echo "Bundler version: "; bundle --version
36-
- name: run conversion script to support shakapacker v6
37-
if: matrix.versions == 'oldest'
37+
- name: run conversion script to use minimum supported dependency versions
38+
if: matrix.dependency-level == 'minimum'
3839
run: script/convert
3940
- name: Save root ruby gems to cache
4041
uses: actions/cache@v4
4142
with:
4243
path: vendor/bundle
43-
key: package-app-gem-cache-${{ hashFiles('Gemfile.lock') }}-${{ matrix.versions }}
44+
key: package-app-gem-cache-${{ hashFiles('Gemfile.lock') }}-${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
4445
- name: Install Ruby Gems for package
4546
run: bundle check --path=vendor/bundle || bundle _2.5.9_ install --path=vendor/bundle --jobs=4 --retry=3
4647
- name: Git Stuff
47-
if: matrix.versions == 'oldest'
48+
if: matrix.dependency-level == 'minimum'
4849
run: |
4950
git config user.email "[email protected]"
5051
git config user.name "Your Name"
5152
git commit -am "stop generators from complaining about uncommitted code"
52-
- name: Set packer version environment variable
53+
- name: Set dependency level environment variable
5354
run: |
54-
echo "CI_PACKER_VERSION=${{ matrix.versions }}" >> $GITHUB_ENV
55+
echo "CI_DEPENDENCY_LEVEL=${{ matrix.dependency-level }}" >> $GITHUB_ENV
5556
- name: Run rspec tests
5657
run: bundle exec rspec spec/react_on_rails
5758
- name: Store test results
5859
uses: actions/upload-artifact@v4
5960
with:
60-
name: main-rspec-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
61+
name: main-rspec-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
6162
path: ~/rspec
6263
- name: Store artifacts
6364
uses: actions/upload-artifact@v4
6465
with:
65-
name: main-test-log-${{ github.run_id }}-${{ github.job }}-${{ matrix.versions }}
66+
name: main-test-log-${{ github.run_id }}-${{ github.job }}-ruby${{ matrix.ruby-version }}-${{ matrix.dependency-level }}
6667
path: log/test.log

‎.prettierignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ spec/dummy/public
1313
**/*generated*
1414
*.res.js
1515

16-
# Prettier doesn't understand ERB syntax in YAML files
16+
# Prettier doesn't understand ERB syntax in YAML files and can damage templates
1717
.rubocop.yml
18+
*.yml
19+
*.yaml
1820
# Intentionally invalid
1921
spec/react_on_rails/fixtures/i18n/locales_symbols/

0 commit comments

Comments
 (0)