Skip to content

Commit 1b62ceb

Browse files
committed
Include TypeScript in devDependencies of packages
1 parent 5200a30 commit 1b62ceb

File tree

4 files changed

+109
-25
lines changed

4 files changed

+109
-25
lines changed

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ Changes since the last non-beta release.
2727

2828
- **Attribution Comment**: Added HTML comment attribution to Rails views containing React on Rails functionality. The comment automatically displays which version is in use (open source React on Rails or React on Rails Pro) and, for Pro users, shows the license status. This helps identify React on Rails usage across your application. [PR #1857](https://github.com/shakacode/react_on_rails/pull/1857) by [AbanoubGhadban](https://github.com/AbanoubGhadban).
2929

30+
#### Bug Fixes
31+
32+
- **Use as Git dependency**: All packages can now be installed as Git dependencies. This is useful for development and testing purposes. See
33+
3034
#### Breaking Changes
3135

3236
- **React on Rails Core Package**: Several Pro-only methods have been removed from the core package and are now exclusively available in the `react-on-rails-pro` package. If you're using any of the following methods, you'll need to migrate to React on Rails Pro:

CONTRIBUTING.md

Lines changed: 98 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,59 +49,68 @@ It's critical to configure your IDE/editor to ignore certain directories. Otherw
4949
- /spec/dummy/tmp
5050
- /spec/react_on_rails/dummy-for-generators
5151

52-
# Configuring your test app to use your local fork
52+
# Example apps
5353

54-
You can test the `react-on-rails` gem using your own external test app or the gem's internal `spec/dummy` app. The `spec/dummy` app is an example of the various setup techniques you can use with the gem.
54+
The [`spec/dummy` app](https://github.com/shakacode/react_on_rails/blob/master/spec/dummy) is an example of the various setup techniques you can use with the gem.
5555

56-
```text
57-
├── test_app
58-
| └── client
59-
└── react_on_rails
60-
└── spec
61-
└── dummy
62-
```
56+
There are also two such apps for React on Rails Pro: [one using the Node renderer](https://github.com/shakacode/react_on_rails/blob/master/react_on_rails_pro/spec/dummy) and [one using ExecJS](https://github.com/shakacode/react_on_rails/blob/master/react_on_rails_pro/spec/execjs-compatible-dummy).
57+
58+
When you add a new feature, consider adding an example demonstrating it to the example apps.
59+
60+
# Testing your changes in an external application
61+
62+
You may also want to test your React on Rails changes with your own application.
63+
There are three main ways to do it: using local dependencies, Git dependencies, or tarballs.
64+
65+
## Local version
6366

64-
## Testing the Ruby Gem
67+
### Ruby
6568

66-
If you want to test the ruby parts of the gem with an application before you release a new version of the gem, you can specify the path to your local version via your test app's Gemfile:
69+
To make your Rails app use a local version of our gems, use
6770

6871
```ruby
69-
gem "react_on_rails", path: "../path-to-react-on-rails"
72+
gem "react_on_rails", path: "<React on Rails root>"
7073
```
7174

72-
Note that you will need to bundle install after making this change, but also that **you will need to restart your Rails application if you make any changes to the gem**.
75+
and/or
7376

74-
## Testing the Node package for React on Rails via Yalc
77+
```ruby
78+
gem "react_on_rails_pro", path: "<React on Rails root>/react_on_rails_pro"
79+
```
80+
81+
Note that you will need to run `bundle install` after making this change, but also that **you will need to restart your Rails application if you make any changes to the gem**.
7582

76-
In addition to testing the Ruby parts out, you can also test the Node package parts of the gem with an external application. First, be **sure** to build the NPM package:
83+
### JS
84+
85+
First, be **sure** to build the NPM package:
7786

7887
```sh
79-
cd react_on_rails/
88+
cd <React on Rails root>
8089
yarn
8190

8291
# Update the lib directory with babel compiled files
8392
yarn run build-watch
8493
```
8594

86-
You need to do this once:
95+
You need to do this once to make sure your app depends on our package:
8796

8897
```
89-
# Will send the updates to other folders
98+
cd <React on Rails root>/packages/react-on-rails
9099
yalc publish
91-
cd spec/dummy
100+
cd <your project root>
92101
yalc add react-on-rails
93102
```
94103

95104
The workflow is:
96105

97106
1. Make changes to the node package.
98-
2. **CRITICAL**: Run yalc push to send updates to all linked apps:
107+
2. **CRITICAL**: Run `yalc push` to send updates to all linked apps:
99108

100109
```
101-
cd <top dir>
110+
cd <React on Rails root>/packages/react-on-rails
102111
# Will send the updates to other folders - MUST DO THIS AFTER ANY CHANGES
103112
yalc push
104-
cd spec/dummy
113+
cd <your project root>
105114
106115
# Will update from yalc
107116
yarn
@@ -119,10 +128,75 @@ Package [email protected] added ==> /Users/justin/shakacode/react-o
119128
Don't forget you may need to run yarn after adding packages with yalc to install/update dependencies/bin scripts.
120129
```
121130

122-
#### Example: Testing NPM changes with the dummy app
131+
Of course, you can do the same with `react-on-rails-pro` and `@shakacode-tools/react-on-rails-pro-node-renderer` packages.
132+
133+
This is the approach `spec/dummy` apps use, so you can also look at their implementation.
134+
135+
### Example: Testing NPM changes with the dummy app
123136

124137
1. Add `console.log('Hello!')` to [clientStartup.ts, function render](https://github.com/shakacode/react_on_rails/blob/master/packages/react-on-rails/src/clientStartup.ts) in `/packages/react-on-rails/src/clientStartup.ts` to confirm we're getting an update to the node package client side. Do the same for function `serverRenderReactComponent` in [/packages/react-on-rails/src/serverRenderReactComponent.ts](https://github.com/shakacode/react_on_rails/blob/master/packages/react-on-rails/src/serverRenderReactComponent.ts).
125-
2. Refresh the browser if the server is already running or start the server using `foreman start` from `react_on_rails/spec/dummy` and navigate to `http://localhost:5000/`. You will now see the `Hello!` message printed in the browser's console. If you did not see that message, then review the steps above for the workflow of making changes and pushing them via yalc.
138+
2. Refresh the browser if the server is already running or start the server using `foreman start` from `react_on_rails/spec/dummy` and navigate to `http://localhost:3000/`. You will now see the `Hello!` message printed in the browser's console. If you did not see that message, then review the steps above for the workflow of making changes and pushing them via yalc.
139+
140+
## Git dependencies
141+
142+
If you push your local changes to Git, you can use them as dependencies as follows:
143+
144+
### Ruby
145+
146+
Adjust depending on the repo you pushed to and commit/branch you want to use, see [Bundler documentation](https://bundler.io/guides/git.html):
147+
148+
```ruby
149+
gem 'react_on_rails',
150+
git: 'https://github.com/shakacode/react_on_rails',
151+
branch: 'master'
152+
gem 'react_on_rails_pro',
153+
git: 'https://github.com/shakacode/react_on_rails',
154+
glob: 'react_on_rails_pro/react_on_rails_pro.gemspec',
155+
branch: 'master'
156+
```
157+
158+
### JS
159+
160+
The way to depend on a subfolder of a Git repo unfortunately depends on your package manager.
161+
The examples below are for the `master` branch of `react-on-rails` package.
162+
163+
#### Yarn Berry
164+
165+
See https://yarnpkg.com/protocol/git#workspaces-support.
166+
167+
```shell
168+
yarn add "[email protected]:shakacode/react_on_rails.git#workspace=react-on-rails&head=master"
169+
```
170+
171+
#### PNPM (starting from v9)
172+
173+
See https://github.com/pnpm/pnpm/issues/4765.
174+
175+
```shell
176+
pnpm add "github:shakacode/react_on_rails/repo#master&path:packages/react-on-rails"
177+
```
178+
179+
#### Fallback for other package managers
180+
181+
You can use https://gitpkg.vercel.app/about with a custom script:
182+
183+
```shell
184+
npm install "https://gitpkg.vercel.app/shakacode/react_on_rails/packages/react-on-rails?master&scripts.postinstall=yarn%20install%20--ignore-scripts%20%26%26%20yarn%20run%20prepack"
185+
```
186+
187+
## Tarball
188+
189+
This method works only for JS packages, not for Ruby gems.
190+
191+
Run `yarn pack` in the package you modified, upload the tarball somewhere
192+
(for example, to S3 and generate a pre-signed URL)
193+
and run
194+
195+
```shell
196+
npm install <tarball url>
197+
```
198+
199+
or the equivalent command for your package manager.
126200

127201
# Development Setup for Gem and Node Package Contributors
128202

packages/react-on-rails-pro/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "React on Rails Pro package with React Server Components support",
55
"type": "module",
66
"scripts": {
7-
"build": "yarn run clean && yarn run tsc",
7+
"build": "yarn run clean && yarn run tsc",
88
"build-watch": "yarn run clean && yarn run tsc --watch",
99
"clean": "rm -rf ./lib",
1010
"test": "jest tests",
@@ -56,6 +56,9 @@
5656
"dependencies": {
5757
"react-on-rails": "16.1.1"
5858
},
59+
"devDependencies": {
60+
"typescript": "^5.8.3"
61+
},
5962
"peerDependencies": {
6063
"react": ">= 16",
6164
"react-dom": ">= 16",

packages/react-on-rails/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@
5454
"./@internal/base/client": "./lib/base/client.js",
5555
"./@internal/base/full": "./lib/base/full.js"
5656
},
57+
"devDependencies": {
58+
"typescript": "^5.8.3"
59+
},
5760
"peerDependencies": {
5861
"react": ">= 16",
5962
"react-dom": ">= 16",

0 commit comments

Comments
 (0)