Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

!feat: upgrade react-subapp package to react-router v6 #1890

Merged
merged 2 commits into from
Jun 15, 2022
Merged

!feat: upgrade react-subapp package to react-router v6 #1890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24c6812
upgrade and refactor react-subapp to react-router v6
mristic505 Jun 13, 2022
e726d80
remove extra empty comment from test expectations
mristic505 Jun 15, 2022
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
19 changes: 9 additions & 10 deletions packages/subapp-react/lib/framework-lib.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const ReactDOMServer = require("react-dom/server");
const { default: AppContext } = require("../dist/node/app-context");
const ReactRedux = optionalRequire("react-redux", { default: {} });
const { Provider } = ReactRedux;
const ReactRouterDom = optionalRequire("react-router-dom");
const { StaticRouter } = require("react-router-dom/server");
const { Stream } = require("stream");
class FrameworkLib {
constructor(ref) {
Expand Down Expand Up @@ -103,11 +103,15 @@ class FrameworkLib {
if (typeof subAppServer.renderer === "function") {
return subAppServer.renderer(element, options);
}


// When the content above all Suspense boundaries is ready.
// This is used when we are streaming content
if(options.useStream) {
return this.onShellReady(element);
}

// If we don't want streaming
// This will fire after the entire page content is ready.
// You can use this for crawlers or static generation.
return this.onAllReady(element);
}

Expand Down Expand Up @@ -223,18 +227,13 @@ class FrameworkLib {
}

wrapReactRouter() {
assert(
ReactRouterDom && ReactRouterDom.StaticRouter,
`subapp ${this.ref.subApp.name} specified useReactRouter without a StartComponent, \
and can't generate it because module react-router-dom with StaticRouter is not found`
);
return props2 =>
React.createElement(
ReactRouterDom.StaticRouter,
StaticRouter,
props2,
React.createElement(this.ref.subApp.Component)
);
}
}

module.exports = FrameworkLib;
module.exports = FrameworkLib;
26 changes: 13 additions & 13 deletions packages/subapp-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,29 +32,29 @@
"dist"
],
"dependencies": {
"@babel/runtime": "^7.8.3",
"@babel/runtime": "^7.17.9",
"optional-require": "^1.1.6",
"subapp-util": "^1.1.4",
"subapp-web": "^1.0.52"
},
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.7.7",
"@babel/cli": "^7.17.10",
"@babel/core": "^7.17.10",
"@babel/plugin-transform-runtime": "^7.17.10",
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"@babel/register": "^7.17.7",
"@xarc/app": "^10.0.13",
"babel-preset-minify": "^0.5.1",
"electrode-archetype-njs-module-dev": "^3.0.3",
"jsdom": "^15.2.1",
"jsdom": "^19.0.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^6.0.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"redux": "^4.0.1",
"run-verify": "^1.2.2",
"react-redux": "^8.0.1",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"redux": "^4.2.0",
"run-verify": "^1.2.6",
"subapp-pkg-util": "../subapp-pkg-util"
},
"peerDependencies": {
Expand Down
64 changes: 31 additions & 33 deletions packages/subapp-react/test/spec/ssr-framework.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
const url = require("url");
const React = require("react"); // eslint-disable-line
const lib = require("../../lib");
const { withRouter, Routes } = require("react-router");
const { Route, Switch } = require("react-router-dom"); // eslint-disable-line
const { Routes, Route } = require("react-router-dom"); // eslint-disable-line
const { asyncVerify } = require("run-verify");
const Redux = require("redux");
const { connect } = require("react-redux");
Expand Down Expand Up @@ -61,8 +60,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello </div>`)
);
});

Expand All @@ -83,8 +82,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
);
});

Expand All @@ -107,8 +106,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
);
});

Expand All @@ -129,8 +128,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
);
});

Expand All @@ -152,8 +151,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
);
});

Expand All @@ -176,8 +175,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
);
});

Expand Down Expand Up @@ -219,7 +218,7 @@ describe("SSR React framework", function () {
stream.on("error", next);
},
res => {
expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`);
expect(res).contains(`<div>Hello <!-- -->foo bar</div>`);
expect(framework.initialStateStr).equals(`{"test":"foo bar"}`);
expect(context.user).to.have.property("storeContainer");
expect(storeReady).equal(true);
Expand Down Expand Up @@ -253,8 +252,8 @@ describe("SSR React framework", function () {
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
res => {
// renderToPipeableSrteam adds a <!-- --> before and after props
expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
expect(framework.initialStateStr).equals(undefined);
}
);
Expand Down Expand Up @@ -328,8 +327,8 @@ describe("SSR React framework", function () {
return asyncVerify(
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
// renderToPipeableSrteam adds a <!-- --> before and after props
res => expect(res).contains(`<div>Hello <!-- -->foo bar<!-- --></div>`)
// renderToPipeableSrteam adds a <!-- --> before props
res => expect(res).contains(`<div>Hello <!-- -->foo bar</div>`)
);
});

Expand Down Expand Up @@ -364,26 +363,25 @@ describe("SSR React framework", function () {
() => framework.handleSSR(),
(stream, next) => getStreamWritable(stream, next),
res => {
// renderToPipeableSrteam adds a <!-- --> before and after props
expect(res).contains(`<div>IS_SSR: <!-- -->true<!-- --> HAS_REQUEST: <!-- -->yes<!-- --></div>`);
// renderToPipeableSrteam adds a <!-- --> before props
expect(res).contains(`<div>IS_SSR: <!-- -->true<!-- --> HAS_REQUEST: <!-- -->yes</div>`);
expect(request.foo).equals("bar");
}
);

});

it("should render subapp with react-router StaticRouter", () => {
const TestComponent = () => {
return <div>Hello test path</div>;
};
const Component = withRouter(props => {
return (
<Switch>
<Route path="/test" component={TestComponent} {...props} />
<Route path="/foo" component={() => "bar"} {...props} />
</Switch>
);
});
it("should render subapp with react-router StaticRouter", async () => {
const TestComponent = () => <div>Hello test path</div>;
const FooBar = () => <div>foo</div>;

const Component = (props) => (
<Routes>
<Route path="/test" element={<TestComponent {...props} />} />
<Route path="/foo" element={<FooBar {...props} />} />
</Routes>
);

const framework = new lib.FrameworkLib({
subApp: {
useReactRouter: true,
Expand Down