Skip to content
Permalink
Browse files

Add React and TS to webpacker; add react-rails gem

  • Loading branch information
riggraz committed Aug 25, 2019
1 parent 01cc6eb commit 24339c0e0868923930cd07299b60982d38a7a0e8
@@ -34,6 +34,9 @@ gem 'devise', git: 'https://github.com/plataformatec/devise'
# Administration panel
gem "administrate", git: "https://github.com/thoughtbot/administrate.git"

# React
gem 'react-rails'

group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
@@ -88,6 +88,10 @@ GEM
public_suffix (>= 2.0.2, < 4.0)
autoprefixer-rails (9.6.1)
execjs
babel-source (5.8.35)
babel-transpiler (0.7.0)
babel-source (>= 4.0, < 6)
execjs (~> 2.0)
bcrypt (3.1.13)
bindex (0.8.1)
bootsnap (1.4.4)
@@ -105,6 +109,7 @@ GEM
childprocess (1.0.1)
rake (< 13.0)
concurrent-ruby (1.1.5)
connection_pool (2.2.2)
crass (1.0.4)
datetime_picker_rails (0.0.7)
momentjs-rails (>= 2.8.1)
@@ -200,6 +205,12 @@ GEM
rb-fsevent (0.10.3)
rb-inotify (0.10.0)
ffi (~> 1.0)
react-rails (2.6.0)
babel-transpiler (>= 0.7.0)
connection_pool
execjs
railties (>= 3.2)
tilt
regexp_parser (1.6.0)
responders (3.0.0)
actionpack (>= 5.0)
@@ -302,6 +313,7 @@ DEPENDENCIES
pg (>= 0.18, < 2.0)
puma (~> 3.11)
rails (~> 6.0.0)
react-rails
rspec-rails
sass-rails (~> 5)
selenium-webdriver
No changes.
@@ -0,0 +1,19 @@
import * as React from "react";

interface IProps {
name: string;
}

class Hello extends React.Component<IProps> {
render () {
const {name} = this.props;

return (
<React.Fragment>
<span>Hello {name}!</span>
</React.Fragment>
);
}
}

export default Hello;
@@ -17,3 +17,7 @@ require("../stylesheets/application")
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
@@ -0,0 +1,5 @@
// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);
@@ -1,2 +1,6 @@
<h1><%= @board.name %></h1>
<p><%= @board.description %></p>

<%=
react_component('Hello', { name: 'TypeScript on React on Rails' })
%>
@@ -34,6 +34,13 @@ module.exports = function(api) {
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
require('@babel/preset-react').default,
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
@@ -66,6 +73,12 @@ module.exports = function(api) {
{
async: false
}
],
isProductionEnv && [
require('babel-plugin-transform-react-remove-prop-types').default,
{
removeImport: true
}
]
].filter(Boolean)
}
@@ -1,6 +1,8 @@
const { environment } = require('@rails/webpacker')
const typescript = require('./loaders/typescript')
const webpack = require('webpack')

environment.loaders.prepend('typescript', typescript)
environment.plugins.append(
'Provide',
new webpack.ProvidePlugin({
@@ -0,0 +1,11 @@
const PnpWebpackPlugin = require('pnp-webpack-plugin')

module.exports = {
test: /\.(ts|tsx)?(\.erb)?$/,
use: [
{
loader: 'ts-loader',
options: PnpWebpackPlugin.tsLoaderOptions()
}
]
}
@@ -34,6 +34,9 @@ default: &default
- .woff2

extensions:
- .tsx
- .ts
- .jsx
- .mjs
- .js
- .sass
@@ -2,14 +2,24 @@
"name": "app",
"private": true,
"dependencies": {
"@babel/preset-react": "^7.0.0",
"@rails/actioncable": "^6.0.0-alpha",
"@rails/activestorage": "^6.0.0-alpha",
"@rails/ujs": "^6.0.0-alpha",
"@rails/webpacker": "^4.0.7",
"@types/react": "^16.9.2",
"@types/react-dom": "^16.9.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bootstrap": "4.3.1",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"turbolinks": "^5.2.0"
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react_ujs": "^2.6.0",
"ts-loader": "^6.0.4",
"turbolinks": "^5.2.0",
"typescript": "^3.5.3"
},
"version": "0.1.0",
"devDependencies": {
@@ -0,0 +1,20 @@
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"jsx": "react"
},
"exclude": [
"**/*.spec.ts",
"node_modules",
"vendor",
"public"
],
"compileOnSave": false
}

0 comments on commit 24339c0

Please sign in to comment.
You can’t perform that action at this time.