Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions .github/markdown-link-check-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{
"ignorePatterns": [
{
"pattern": "^http://localhost"
},
{
"pattern": "^https://localhost"
},
{
"pattern": "^mailto:"
},
{
"pattern": "^https://www\\.npmjs\\.(org|com)"
},
{
"pattern": "^https://your-shared-addr\\.c9users\\.io"
},
{
"pattern": "^https://hichee\\.com"
},
{
"pattern": "^https://github\\.com/shakacode/react-webpack-rails-tutorial/blob/master/config/webpacker\\.yml$"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you make the tool ignore URLs that point to the "react-webpack-rails-tutorial" repo?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is only for the webpacker.yml file, because it's not in the current master branch of react-webpack-rails-tutorial, so it will cause a 404 error when the checker runs. We should keep it for people upgrading, so I'm ignoring it to avoid triggering the checker workflow. Am I missing something?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can update links to refer for files from the commit at which these files are created

},
{
"pattern": "^https://github\\.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack\\.client\\.base\\.config\\.js"
}
],
"replacementPatterns": [
{
"pattern": "^/",
"replacement": "https://github.com/shakacode/react_on_rails/blob/master/"
}
],
"httpHeaders": [
{
"urls": ["https://docs.github.com", "https://github.com"],
"headers": {
"Accept": "text/html"
}
}
],
"timeout": "20s",
"retryOn429": true,
"retryCount": 3,
"fallbackRetryDelay": "30s",
"aliveStatusCodes": [200, 206]
}
36 changes: 36 additions & 0 deletions .github/workflows/check-markdown-links.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
name: Check Markdown Links

on:
push:
branches: [master]
paths:
- '**.md'
- '.github/workflows/check-markdown-links.yml'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The config file .github/markdown-link-check-config.json should be included as well, since changing it can affect whether the check passes. I initially thought this file shouldn't be included, but the options starting on line 26 do matter.

- '.github/markdown-link-check-config.json'
pull_request:
paths:
- '**.md'
- '.github/workflows/check-markdown-links.yml'
- '.github/markdown-link-check-config.json'
schedule:
# Run weekly on Monday at 8am UTC
- cron: '0 8 * * 1'
workflow_dispatch:

jobs:
markdown-link-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Check markdown links
uses: tcort/github-action-markdown-link-check@a800ad5f1c35bf61987946fd31c15726a1c9f2ba # v1.1.0
with:
use-quiet-mode: 'yes'
use-verbose-mode: 'no'
config-file: '.github/markdown-link-check-config.json'
folder-path: 'docs/'
file-extension: '.md'
max-depth: -1
check-modified-files-only: 'no'
base-branch: 'master'
2 changes: 1 addition & 1 deletion Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
react_on_rails (16.0.1.rc.0)
react_on_rails (16.0.1.rc.2)
addressable
connection_pool
execjs (~> 2.5)
Expand Down
2 changes: 1 addition & 1 deletion NEWS.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ _A history of the news. A few bullets at the top will also show on the [README.m
- 2017-04-09: 8.0.0 beta work to include webpacker_lite gem has begun. See [#786](https://github.com/shakacode/react_on_rails/issues/786).
- 2017-04-03: 6.9.3 Released! Props rendered in JSON script tag. Page size is smaller now due to less escaping!
- 2017-03-06: Updated to Webpack v2!
- 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://www.reactrails.com/). Docs [here](docs/guides/i18n.md).
- 2017-03-02: Demo of internationalization (i18n) is live at [reactrails.com](https://reactrails.com/). Docs [here](docs/guides/i18n.md).
- 2017-02-28: See [discussions here on Webpacker](https://github.com/rails/webpacker/issues/139) regarding how Webpacker will allow React on Rails to avoid using the asset pipeline in the near future.
- 2017-02-28: Upgrade to Webpack v2 or use the `--bail` option in your Webpack script for test and production builds. See the discussion on [PR #730](https://github.com/shakacode/react_on_rails/pull/730).
- 2016-11-03: Spoke at [LA Ruby: "React on Rails: Why, What, and How?"](http://www.meetup.com/laruby/events/234825187/). [Video and pictures in this article](https://blog.shakacode.com/my-react-on-rails-talk-at-the-la-ruby-rails-meetup-november-10-2016-eaaa83aff800#.ej6h4eglp).
Expand Down
2 changes: 1 addition & 1 deletion docs/additional-details/manual-installation-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The only requirements within this directory for basic React on Rails integration
1. Your Webpack configuration files:
1. Create outputs in a directory like `/public/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
1. Provide server rendering if you wish to use that feature.
1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our JavaScript API docs](../api/javascript-api.md) and the [React on Rails source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.client.js).
1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See [our JavaScript API docs](../api/javascript-api.md) and the [React on Rails source](https://github.com/shakacode/react_on_rails/tree/master/node_package/src/ReactOnRails.client.ts).
1. Set your registration file as an "entry" point in your Webpack configs.
1. Configure scripts in `client/package.json` as shown in the example apps. These are used for building your Webpack assets. Also do this for your top-level `package.json`.

Expand Down
10 changes: 6 additions & 4 deletions docs/additional-details/upgrade-webpacker-v3-to-v4.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# Upgrading rails/webpacker v3.5 to v4
# Upgrading rails/webpacker v3.5 to v4 (Outdated)

_Note: This guide is outdated. The configuration files it references were removed when React on Rails moved to Shakapacker. For migrating from Webpacker to Shakapacker, see the Shakapacker guide to upgrading to [version 6](https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md) and [version 7](https://github.com/shakacode/shakapacker/blob/master/docs/v7_upgrade.md)._

The following steps can be followed to update a Webpacker v3.5 app to v4.

1. Update the gem `webpacker` and the package `@rails/webpacker`
1. Merge changes from the new default [.babelrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.babelrc) to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
1. Copy the file [.browserslistrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.browserslistrc) to `/`.
1. Merge any differences between [config/webpacker.yml](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/webpacker.yml) and your `/config/webpacker.yml`.
1. Merge changes from the new default `.babelrc` to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
1. Copy the file `.browserslistrc` to `/`.
1. Merge any differences between `config/webpacker.yml` and your `/config/webpacker.yml`.

Here is an [example commit of these changes](https://github.com/shakacode/react_on_rails-tutorial-v11/pull/1/files).
2 changes: 1 addition & 1 deletion docs/api/redux-store-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ yield
...
```

Components should be created as [stateless function(al) components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions). Since you can pass in initial props via the helper `redux_store`, you do not need to pass any props directly to the component. Instead, the component hydrates by connecting to the store.
Components should be created as [function components](https://react.dev/learn/your-first-component#defining-a-component). Since you can pass in initial props via the helper `redux_store`, you do not need to pass any props directly to the component. Instead, the component hydrates by connecting to the store.

**\_comments.html.erb**

Expand Down
2 changes: 1 addition & 1 deletion docs/api/view-helpers-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ Renderer functions are not meant to be used on the server since there's no DOM o
[React Router](https://reactrouter.com/) is supported, including server-side rendering! See:

1. [React on Rails docs for React Router](../javascript/react-router.md)
2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/RouterApp.server.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/RouterApp.server.jsx).
3. [Code Splitting docs](../javascript/code-splitting.md) for information about how to set up code splitting for server rendered routes.

---
Expand Down
2 changes: 1 addition & 1 deletion docs/contributor-info/linters.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ Rule severity is configured with `'off'`, `'warn'` or `'error'`. In older config

Rules can also take a few additional options. In this case, the rule can be set to an array, the first item of which is the severity and the rest are options.

See file [.eslintrc](https://github.com/shakacode/react_on_rails/tree/master/.eslintrc) for examples of configuration
See file [.eslintrc](https://github.com/shakacode/react_on_rails/tree/master/lib/generators/react_on_rails/templates/.eslintrc) for examples of configuration

### Specify/Override rules in code

Expand Down
4 changes: 2 additions & 2 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ This documentation assumes the usage of ReactOnRails with Shakapacker 7. For ins
1. Do the quick [tutorial](./guides/tutorial.md).
2. Add React on Rails to an existing Rails app per [the instructions](./guides/installation-into-an-existing-rails-app.md).
3. Look at [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy), a simple, no DB example.
4. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [www.reactrails.com](http://reactrails.com).
4. Look at [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial); it's a full-featured example live at [reactrails.com](https://reactrails.com).

## Basic Installation

Expand Down Expand Up @@ -104,7 +104,7 @@ issue.
<%= react_component("HelloWorld", props: { name: "Stranger" }) %>
```

- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://reactjs.org/docs/context.html). See [Render-Functions and the RailsContext](./guides/render-functions-and-railscontext.md) for more details on this topic.
- This is what your HelloWorld.js file might contain. The railsContext is always available for any parameters that you _always_ want available for your React components. It has _nothing_ to do with the concept of the [React Context](https://react.dev/reference/react/useContext). See [Render-Functions and the RailsContext](./guides/render-functions-and-railscontext.md) for more details on this topic.

```js
import React from 'react';
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/how-react-on-rails-works.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ If you open the HTML source of any web page using React on Rails, you'll see the
1. A script tag containing the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads, using this data to build and initialize your React components.
1. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server-side logs can be configured only to be sent to the server logs.

You can see all this on the source for [reactrails.com](https://www.reactrails.com/)
You can see all this on the source for [reactrails.com](https://reactrails.com/)

## Building the Bundles

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,4 @@ end

Note, full details of the React on Rails configuration are [here in docs/basics/configuration.md](https://shakacode.com/react-on-rails/docs/guides/configuration/).

See the doc file [docs/basics/generator-functions-and-railscontext.md](https://shakacode.com/react-on-rails/docs/guides/generator-functions-and-railscontext/#rails-context) for how your client-side code uses the device information
See the doc file [render-functions-and-railscontext.md](./render-functions-and-railscontext.md#rails-context) for how your client-side code uses the device information
2 changes: 1 addition & 1 deletion docs/guides/render-functions-and-railscontext.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ use shared Redux stores, you get two params passed to your function that creates
1. `props`: Props that you pass in the view helper of either `react_component` or `redux_store`
2. `railsContext`: Rails contextual information, such as the current pathname. You can customize
this in your config file. **Note**: The `railsContext` is not related to the concept of a
["context" for React components](https://facebook.github.io/react/docs/context.html#how-to-use-context).
["context" for React components](https://react.dev/reference/react/useContext).

These parameters (`props` and `railsContext`) will be the same for client- and server-side rendering,
except for the property `railsContext.serverSide` which tells you which one it is.
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/webpack-configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

[Webpack](https://webpack.js.org) is the JavaScript npm package that prepares all your client-side assets. The Rails asset pipeline used to be the preferable way to prepare client-side assets.

[Shakapacker](https://github.com/shakcode/shakapacker) (the official successor of [rails/webpacker](https://github.com/rails/webpacker)) is the Ruby gem that mainly gives us 2 things:
[Shakapacker](https://github.com/shakacode/shakapacker) (the official successor of [rails/webpacker](https://github.com/rails/webpacker)) is the Ruby gem that mainly gives us 2 things:

1. View helpers for placing the Webpack bundles on your Rails views. React on Rails depends on these view helpers.
2. A layer of abstraction on top of Webpack customization. The base setup works great for the client-side Webpack configuration.
Expand Down
2 changes: 1 addition & 1 deletion docs/home.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
1. [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy) example repo for a simple configuration of Webpack via the `shakacode/shakapacker` gem
that supports SSR.
2. Example repo of [React on Rails Tutorial With SSR, HMR fast refresh, and TypeScript](https://github.com/shakacode/react_on_rails_demo_ssr_hmr) for a new way to set up the creation of your SSR bundle with `shakacode/shakapacker`.
3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](http://reactrails.com).
3. Live, [open source](https://github.com/shakacode/react-webpack-rails-tutorial), example of this gem, see [reactrails.com](https://reactrails.com).

# Other Resources

Expand Down
Binary file added docs/images/bundle-splitting-hello-world.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 3 additions & 5 deletions docs/javascript/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,12 +121,10 @@ There's an implemented example of code splitting in the `spec/dummy` folder of t

See:

- [spec/dummy/client/app/startup/client-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/client-bundle.js)
- [spec/dummy/client/app/packs/client-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/client-bundle.js)
- [spec/dummy/client/app/packs/server-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/server-bundle.js)
- [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx) # Code splitting implemented here
- [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
- [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
- [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)

_Note: The DeferredRender example components referenced in older versions of this document have been removed as this code splitting approach is outdated._

### Comparison of Server vs. Client Code

Expand Down
2 changes: 1 addition & 1 deletion docs/javascript/credits.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@

The origins of the project began with the need to do a rich JavaScript interface for a ShakaCode's client. The choice to use Webpack and Rails is described in [Fast Rich Client Rails Development With Webpack and the ES6 Transpiler](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/).

The gem project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators. Many others have [contributed](https://github.com/shakacode/react_on_rails/graphs/contributors).
The gem project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alex35mil) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators. Many others have [contributed](https://github.com/shakacode/react_on_rails/graphs/contributors).

The gem was initially inspired by the [react-rails gem](https://github.com/reactjs/react-rails).
2 changes: 1 addition & 1 deletion docs/javascript/images.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const assetLoaderRules = [

```

A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
A full example can be found at [spec/dummy/client/app/startup/ImageExample.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ImageExample.jsx)

You are free to use images either in image tags or as background images in SCSS files. You can
use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as
Expand Down
2 changes: 1 addition & 1 deletion docs/javascript/react-and-redux.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Communication Between Components

See [Communicate Between Components](https://web.archive.org/web/20160527122908/https://facebook.github.io/react/tips/communicate-between-components.html).
See [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components).

# Redux Reducers

Expand Down
2 changes: 1 addition & 1 deletion docs/javascript/troubleshooting-build-errors.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ This guide covers common webpack build errors encountered when using react_on_ra

## Table of Contents

- [Missing Routes File Error](#missing-routes-file-error)
- [Missing Routes File Error](#missing-routes-file-error-js-routes-gem)
- [ProvidePlugin Module Resolution Errors](#provideplugin-module-resolution-errors)
- [Environment Setup Dependencies](#environment-setup-dependencies)
- [Shakapacker Compatibility Issues](#shakapacker-compatibility-issues)
Expand Down
Loading
Loading