Skip to content

Commit f4f1927

Browse files
ihabadhamihabadham
committed
feat: migrate to React on Rails v16 auto-registration
- Configure auto-registration with components_subdirectory and auto_load_bundle - Add nested_entries to shakapacker.yml for v16 compatibility - Restructure components into ComponentName/ror_components/ directories - Move App, RouterApp, NavigationBarApp, SimpleCommentScreen, Footer components - Handle RescriptShow component with compiled JS copy - Create stores-registration.js for manual store registration - Update server-bundle.js to import stores and generated bundle - Remove client-bundle.js (manual registration no longer needed) - Update .gitignore for generated packs - Successfully generate auto-registration packs
1 parent 1dcc3f7 commit f4f1927

File tree

13 files changed

+155
-70
lines changed

13 files changed

+155
-70
lines changed

‎Procfile.dev‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Procfile for development using HMR
22
# You can run these commands in separate shells
33
rescript: yarn res:dev
4-
redis: redis-server
4+
# redis: redis-server # Commented out - Redis is already running system-wide
55
rails: bundle exec rails s -p 3000
66
wp-client: HMR=true RAILS_ENV=development NODE_ENV=development bin/shakapacker-dev-server
77
wp-server: bundle exec rake react_on_rails:locale && HMR=true SERVER_BUNDLE_ONLY=yes bin/shakapacker --watch

client/app/bundles/comments/components/Footer/Footer.jsx renamed to client/app/bundles/comments/components/Footer/ror_components/Footer.jsx

File renamed without changes.

client/app/bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen.jsx renamed to client/app/bundles/comments/components/SimpleCommentScreen/ror_components/SimpleCommentScreen.jsx

File renamed without changes.

‎client/app/bundles/comments/rescript/RescriptShow/ror_components/RescriptShow.jsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
// Generated by ReScript, PLEASE EDIT WITH CARE
2+
3+
import * as React from "react";
4+
import * as Header from "./Header/Header.bs.js";
5+
import * as Actions from "./Actions/Actions.bs.js";
6+
import * as AlertError from "./CommentList/AlertError/AlertError.bs.js";
7+
import * as ActionCable from "./bindings/ActionCable.bs.js";
8+
import * as CommentForm from "./CommentForm/CommentForm.bs.js";
9+
import * as CommentList from "./CommentList/CommentList.bs.js";
10+
import * as JsxRuntime from "react/jsx-runtime";
11+
12+
function reducer(param, action) {
13+
if (typeof action !== "object") {
14+
return {
15+
commentsFetchStatus: "FetchError"
16+
};
17+
} else {
18+
return {
19+
commentsFetchStatus: {
20+
TAG: "CommentsFetched",
21+
_0: action._0
22+
}
23+
};
24+
}
25+
}
26+
27+
function ReScriptShow$default(props) {
28+
var match = React.useReducer(reducer, {
29+
commentsFetchStatus: {
30+
TAG: "CommentsFetched",
31+
_0: []
32+
}
33+
});
34+
var dispatch = match[1];
35+
var fetchData = async function () {
36+
var comments = await Actions.Fetch.fetchComments();
37+
if (comments.TAG === "Ok") {
38+
return dispatch({
39+
TAG: "SetComments",
40+
_0: comments._0
41+
});
42+
} else {
43+
return dispatch("SetFetchError");
44+
}
45+
};
46+
var subscribeToCommentsChannel = function () {
47+
return ActionCable.subscribeConsumer("CommentsChannel", {
48+
connected: (function () {
49+
console.log("Connected");
50+
}),
51+
received: (function (data) {
52+
dispatch({
53+
TAG: "SetComments",
54+
_0: [data]
55+
});
56+
}),
57+
disconnected: (function () {
58+
console.log("Disconnected");
59+
})
60+
});
61+
};
62+
React.useEffect((function () {
63+
var scription = subscribeToCommentsChannel();
64+
return (function () {
65+
scription.unsubscribe();
66+
});
67+
}), []);
68+
React.useEffect((function () {
69+
fetchData();
70+
}), []);
71+
var comments = match[0].commentsFetchStatus;
72+
var tmp;
73+
tmp = typeof comments !== "object" ? JsxRuntime.jsx(AlertError.make, {
74+
errorMsg: "Can't fetch the comments!"
75+
}) : JsxRuntime.jsx(CommentList.make, {
76+
comments: comments._0
77+
});
78+
return JsxRuntime.jsxs("div", {
79+
children: [
80+
JsxRuntime.jsxs("h2", {
81+
children: [
82+
"Rescript + Rails Backend (with ",
83+
JsxRuntime.jsx("a", {
84+
children: "react_on_rails gem",
85+
href: "https://github.com/shakacode/react_on_rails"
86+
}),
87+
")"
88+
]
89+
}),
90+
JsxRuntime.jsx(Header.make, {}),
91+
JsxRuntime.jsxs("div", {
92+
children: [
93+
JsxRuntime.jsx("h2", {
94+
children: "Comments"
95+
}),
96+
JsxRuntime.jsxs("ul", {
97+
children: [
98+
JsxRuntime.jsx("li", {
99+
children: "Text supports Github Flavored Markdown."
100+
}),
101+
JsxRuntime.jsx("li", {
102+
children: "Comments older than 24 hours are deleted."
103+
}),
104+
JsxRuntime.jsx("li", {
105+
children: "Name is preserved. Text is reset, between submits"
106+
}),
107+
JsxRuntime.jsx("li", {
108+
children: "To see Action Cable instantly update two browsers, open two browsers and submit a comment!"
109+
})
110+
]
111+
}),
112+
JsxRuntime.jsx(CommentForm.make, {
113+
fetchData: fetchData
114+
}),
115+
tmp
116+
],
117+
className: "prose max-w-none prose-a:text-sky-700 prose-li:my-0"
118+
})
119+
]
120+
});
121+
}
122+
123+
var $$default = ReScriptShow$default;
124+
125+
export {
126+
reducer ,
127+
$$default as default,
128+
}
129+
/* react Not a pure module */

client/app/bundles/comments/startup/App.jsx renamed to client/app/bundles/comments/startup/App/ror_components/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Provider } from 'react-redux';
22
import React from 'react';
33
import ReactOnRails from 'react-on-rails';
44

5-
import NonRouterCommentsContainer from '../containers/NonRouterCommentsContainer.jsx';
5+
import NonRouterCommentsContainer from '../../../containers/NonRouterCommentsContainer.jsx';
66
import 'intl/locale-data/jsonp/en';
77
import 'intl/locale-data/jsonp/de';
88
import 'intl/locale-data/jsonp/ja';

client/app/bundles/comments/startup/NavigationBarApp.jsx renamed to client/app/bundles/comments/startup/NavigationBarApp/ror_components/NavigationBarApp.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { Provider } from 'react-redux';
55
import React from 'react';
66
import ReactOnRails from 'react-on-rails';
77

8-
import NavigationBar from '../components/NavigationBar/NavigationBar.jsx';
9-
import NavigationBarContainer from '../containers/NavigationBarContainer.jsx';
10-
import * as paths from '../constants/paths';
8+
import NavigationBar from '../../../components/NavigationBar/NavigationBar.jsx';
9+
import NavigationBarContainer from '../../../containers/NavigationBarContainer.jsx';
10+
import * as paths from '../../../constants/paths';
1111

1212
/*
1313
* Export a function that returns a ReactComponent, depending on a store named SharedReduxStore.

client/app/bundles/comments/startup/ClientRouterApp.jsx renamed to client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.client.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
// Compare to ../ServerRouterApp.jsx
1+
// Compare to ./RouterApp.server.jsx
22
import { Provider } from 'react-redux';
33
import React from 'react';
44
import ReactOnRails from 'react-on-rails';
55
import { BrowserRouter } from 'react-router-dom';
6-
import routes from '../routes/routes.jsx';
6+
import routes from '../../../routes/routes.jsx';
77

88
function ClientRouterApp(_props) {
99
const store = ReactOnRails.getStore('routerCommentsStore');

client/app/bundles/comments/startup/ServerRouterApp.jsx renamed to client/app/bundles/comments/startup/RouterApp/ror_components/RouterApp.server.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
// Compare to ../ClientRouterApp.jsx
1+
// Compare to ./RouterApp.client.jsx
22
import { Provider } from 'react-redux';
33
import React from 'react';
44
import { StaticRouter } from 'react-router-dom/server';
55
import ReactOnRails from 'react-on-rails';
6-
import routes from '../routes/routes.jsx';
6+
import routes from '../../../routes/routes.jsx';
77

88
function ServerRouterApp(_props, railsContext) {
99
const store = ReactOnRails.getStore('routerCommentsStore');

‎client/app/packs/client-bundle.js‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎client/app/packs/server-bundle.js‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,5 @@
1-
// Example of React + Redux
2-
import ReactOnRails from 'react-on-rails';
1+
// Import stores registration
2+
import './stores-registration';
33

4-
import App from '../bundles/comments/startup/App';
5-
import RouterApp from '../bundles/comments/startup/ServerRouterApp';
6-
import SimpleCommentScreen from '../bundles/comments/components/SimpleCommentScreen/SimpleCommentScreen';
7-
import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
8-
import routerCommentsStore from '../bundles/comments/store/routerCommentsStore';
9-
import commentsStore from '../bundles/comments/store/commentsStore';
10-
import Footer from '../bundles/comments/components/Footer/Footer';
11-
import RescriptShow from '../bundles/comments/rescript/ReScriptShow.bs.js';
12-
13-
ReactOnRails.register({
14-
App,
15-
RouterApp,
16-
NavigationBarApp,
17-
SimpleCommentScreen,
18-
Footer,
19-
RescriptShow,
20-
});
21-
22-
ReactOnRails.registerStore({
23-
routerCommentsStore,
24-
commentsStore,
25-
});
4+
// import statement added by react_on_rails:generate_packs rake task
5+
import "./../generated/server-bundle-generated.js";

0 commit comments

Comments
 (0)