Skip to content

Commit ec5f7b5

Browse files
sergeysovasergeysova
authored
Merge pull request #6 from atomic-router/fix/ssr-support
2 parents d97eecd + c0a2759 commit ec5f7b5

File tree

9 files changed

+158
-101
lines changed

9 files changed

+158
-101
lines changed

‎babel.config.js‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
module.exports = {
22
plugins: [
3-
['effector/babel-plugin', { factories: ['./src/create-route-view', './src/create-routes-view'] }],
4-
['@babel/plugin-proposal-class-properties', { loose: true }],
5-
'@babel/plugin-proposal-object-rest-spread',
6-
'@babel/plugin-proposal-optional-chaining',
7-
'@babel/plugin-proposal-nullish-coalescing-operator',
3+
[
4+
"effector/babel-plugin",
5+
{ factories: ["./src/create-route-view", "./src/create-routes-view"] },
6+
],
7+
["@babel/plugin-proposal-class-properties", { loose: true }],
8+
"@babel/plugin-proposal-object-rest-spread",
9+
"@babel/plugin-proposal-optional-chaining",
10+
"@babel/plugin-proposal-nullish-coalescing-operator",
811
],
912
presets: [
10-
['@babel/preset-env', { loose: true }],
11-
['@babel/preset-typescript'],
12-
['@babel/preset-react', { "runtime": "automatic" }]
13+
["@babel/preset-env", { loose: true }],
14+
["@babel/preset-typescript"],
15+
["@babel/preset-react", { runtime: "automatic" }],
1316
],
1417
};

‎package.json‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
22
"name": "atomic-router-react",
3+
"publishConfig": {
4+
"access": "public"
5+
},
36
"version": "0.0.0-this-version-will-be-set-from-ci",
47
"author": "Anton Kosykh",
58
"repository": {
@@ -11,8 +14,23 @@
1114
"module": "dist/atomic-router.esm.js",
1215
"unpkg": "dist/atomic-router.umd.js",
1316
"types": "dist/atomic-router.d.ts",
17+
"exports": {
18+
".": {
19+
"import": "./dist/atomic-router.esm.js",
20+
"require": "./dist/atomic-router.cjs.js",
21+
"default": "./dist/atomic-router.esm.js"
22+
},
23+
"./package.json": "./package.json",
24+
"./scope": {
25+
"import": "./dist/scope/atomic-router.esm.js",
26+
"require": "./dist/scope/atomic-router.cjs.js",
27+
"default": "./dist/scope/atomic-router.esm.js"
28+
}
29+
},
1430
"files": [
15-
"dist"
31+
"dist",
32+
"scope.d.ts",
33+
"scope.js"
1634
],
1735
"engines": {
1836
"node": ">=10"
@@ -54,7 +72,9 @@
5472
"effector-react": "^22.1.6",
5573
"jest": "^28.1.0",
5674
"jest-environment-jsdom": "^28.1.3",
75+
"prettier": "^2.7.1",
5776
"react": "^18.2.0",
77+
"react-dom": "^18.2.0",
5878
"rollup": "^2.77.2",
5979
"rollup-plugin-dts": "^4.2.2",
6080
"rollup-plugin-terser": "^7.0.2",

‎rollup.config.js‎

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,36 @@
1-
import babel from '@rollup/plugin-babel';
2-
import commonjs from '@rollup/plugin-commonjs';
3-
import dts from 'rollup-plugin-dts';
4-
import resolve from '@rollup/plugin-node-resolve';
5-
import { terser } from 'rollup-plugin-terser';
1+
import babel from "@rollup/plugin-babel";
2+
import commonjs from "@rollup/plugin-commonjs";
3+
import dts from "rollup-plugin-dts";
4+
import resolve from "@rollup/plugin-node-resolve";
5+
import { terser } from "rollup-plugin-terser";
66

7-
import pkg from './package.json';
8-
import { minifyConfig } from './build/minifications';
7+
import pkg from "./package.json";
8+
import { minifyConfig } from "./build/minifications";
99

10-
const extensions = ['.ts', '.tsx', '.js'];
10+
const extensions = [".ts", ".tsx", ".js"];
1111

1212
const resolverPlugin = resolve({ extensions });
1313

1414
const babelPlugin = babel({
15-
babelHelpers: 'bundled',
15+
babelHelpers: "bundled",
1616
sourceMaps: true,
1717
extensions,
1818
exclude: /node_modules.*/,
1919
});
2020

21+
const babelPluginScope = babel({
22+
babelHelpers: "bundled",
23+
sourceMaps: true,
24+
extensions,
25+
exclude: /node_modules.*/,
26+
overrides: [
27+
{
28+
test: () => true,
29+
plugins: [["effector/babel-plugin", { reactSsr: true, noDefaults: true }, "scoped"]],
30+
},
31+
],
32+
});
33+
2134
const createTerser = ({ inline }) =>
2235
terser(
2336
minifyConfig({
@@ -26,67 +39,76 @@ const createTerser = ({ inline }) =>
2639
})
2740
);
2841

29-
const input = 'src/index.tsx';
42+
const input = "src/index.tsx";
3043
const external = [
3144
...Object.keys(pkg.devDependencies),
3245
...Object.keys(pkg.peerDependencies),
46+
"effector-react/scope",
47+
"react/jsx-runtime",
3348
];
3449

50+
function createConfigs({ scope }) {
51+
return [
52+
{
53+
input,
54+
external,
55+
output: [
56+
{
57+
file: scope ? pkg.exports["./scope"].require : pkg.exports["."].require,
58+
format: "cjs",
59+
sourcemap: true,
60+
},
61+
{
62+
file: scope ? pkg.exports["./scope"].import : pkg.exports["."].import,
63+
format: "es",
64+
sourcemap: true,
65+
},
66+
],
67+
plugins: [
68+
scope ? babelPluginScope : babelPlugin,
69+
resolverPlugin,
70+
commonjs(),
71+
// createTerser({ inline: true }),
72+
],
73+
},
74+
{
75+
input,
76+
external,
77+
output: [
78+
{
79+
file: pkg.types,
80+
format: "es",
81+
},
82+
],
83+
plugins: [resolverPlugin, dts()],
84+
},
85+
];
86+
}
87+
3588
// eslint-disable-next-line import/no-anonymous-default-export
3689
export default [
3790
{
3891
input,
39-
external: ['effector', 'atomic-router', 'effector-react', 'react'],
92+
external: ["effector", "atomic-router", "effector-react", "react"],
4093
output: {
41-
name: 'atomicRouter',
94+
name: "atomicRouter",
4295
file: pkg.unpkg,
43-
format: 'umd',
96+
format: "umd",
4497
sourcemap: true,
4598
globals: {
46-
effector: 'effector',
47-
'effector-react': 'effectorReact',
48-
'atomic-router': 'atomicRouter',
49-
react: 'React',
99+
effector: "effector",
100+
"effector-react": "effectorReact",
101+
"atomic-router": "atomicRouter",
102+
react: "React",
50103
},
51104
},
52105
plugins: [
53106
babelPlugin,
54107
resolverPlugin,
55108
commonjs(),
56-
createTerser({ inline: false }),
57-
],
58-
},
59-
{
60-
input,
61-
external,
62-
output: [
63-
{
64-
file: pkg.main,
65-
format: 'cjs',
66-
sourcemap: true,
67-
},
68-
{
69-
file: pkg.module,
70-
format: 'es',
71-
sourcemap: true,
72-
},
73-
],
74-
plugins: [
75-
babelPlugin,
76-
resolverPlugin,
77-
commonjs(),
78-
createTerser({ inline: true }),
79-
],
80-
},
81-
{
82-
input,
83-
external,
84-
output: [
85-
{
86-
file: pkg.types,
87-
format: 'es',
88-
},
109+
// createTerser({ inline: false }),
89110
],
90-
plugins: [resolverPlugin, dts()],
91111
},
112+
...createConfigs({ scope: false }),
113+
...createConfigs({ scope: true }),
92114
];

‎scope.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./dist/atomic-router";

‎scope.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require("./dist/scope/atomic-router.cjs");

‎src/create-route-view.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React from 'react';
2-
import { combine } from 'effector';
3-
import { useStore } from 'effector-react';
4-
import { RouteInstance } from 'atomic-router';
1+
import React from "react";
2+
import { combine } from "effector";
3+
import { useUnit } from "effector-react";
4+
import { RouteInstance } from "atomic-router";
55

66
export const createRouteView = <Props,>(
77
route: RouteInstance<any> | RouteInstance<any>[],
88
View: React.FC<Props>
99
) => {
1010
const $isOpened = Array.isArray(route)
11-
? combine(combine(route.map((r) => r.$isOpened)), (isOpened) =>
12-
isOpened.includes(true)
13-
)
11+
? combine(combine(route.map((r) => r.$isOpened)), (isOpened) => isOpened.includes(true))
1412
: route.$isOpened;
1513

16-
return (props: Props) => {
17-
const isOpened = useStore($isOpened);
14+
function RouteView(props: Props) {
15+
const isOpened = useUnit($isOpened);
1816

1917
if (isOpened) {
2018
return <View {...props} />;
2119
}
2220

2321
return null;
24-
};
22+
}
23+
24+
return RouteView;
2525
};

‎src/create-routes-view.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1-
import { combine } from 'effector';
2-
import { useStore } from 'effector-react';
3-
import React, { FC } from 'react';
4-
import { RouteInstance } from 'atomic-router';
5-
import { createRouteView } from './create-route-view';
1+
import { combine } from "effector";
2+
import { useUnit } from "effector-react";
3+
import React, { FC } from "react";
4+
import { RouteInstance } from "atomic-router";
5+
import { createRouteView } from "./create-route-view";
66

77
export const createRoutesView = (config: {
88
routes: { route: RouteInstance<any> | RouteInstance<any>[]; view: FC<any> }[];
99
notFound?: FC<any>;
1010
}) => {
11-
const views = config.routes.map(({ route, view }) =>
12-
createRouteView(route, view)
13-
);
11+
const views = config.routes.map(({ route, view }) => createRouteView(route, view));
1412
const $isSomeOpened = combine(
1513
...config.routes
1614
.map(({ route }) => route)
@@ -23,7 +21,7 @@ export const createRoutesView = (config: {
2321
const NotFound = config.notFound;
2422

2523
return () => {
26-
const isSomeOpened = useStore($isSomeOpened);
24+
const isSomeOpened = useUnit($isSomeOpened);
2725

2826
if (!isSomeOpened && NotFound) {
2927
return <NotFound />;

‎src/link.tsx‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
1-
import React, { AnchorHTMLAttributes } from 'react';
2-
import clsx from 'clsx';
3-
import { useStore } from 'effector-react';
4-
import {
5-
buildPath,
6-
RouteParams,
7-
RouteQuery,
8-
RouteInstance,
9-
} from 'atomic-router';
1+
import React, { AnchorHTMLAttributes } from "react";
2+
import clsx from "clsx";
3+
import { useUnit } from "effector-react";
4+
import { buildPath, RouteInstance, RouteParams, RouteQuery } from "atomic-router";
105

11-
import { useRouter } from './router-provider';
6+
import { useRouter } from "./router-provider";
127

138
type Props<Params extends RouteParams> = {
149
to: RouteInstance<Params> | string;
@@ -17,18 +12,18 @@ type Props<Params extends RouteParams> = {
1712
className?: string;
1813
activeClassName?: string;
1914
inactiveClassName?: string;
20-
} & Exclude<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
15+
} & Exclude<AnchorHTMLAttributes<HTMLAnchorElement>, "href">;
2116

2217
export function Link<Params extends RouteParams>({
2318
to,
2419
params,
2520
query,
2621
className,
27-
activeClassName = 'active',
22+
activeClassName = "active",
2823
inactiveClassName,
2924
...props
3025
}: Props<Params>) {
31-
if (typeof to === 'string') {
26+
if (typeof to === "string") {
3227
return <NormalLink href={to} className={className} {...props} />;
3328
}
3429
return (
@@ -39,7 +34,7 @@ export function Link<Params extends RouteParams>({
3934
query,
4035
className,
4136
activeClassName,
42-
inactiveClassName: inactiveClassName,
37+
inactiveClassName,
4338
}}
4439
{...props}
4540
/>
@@ -58,7 +53,7 @@ function RouteLink<Params extends RouteParams>({
5853
params,
5954
query,
6055
className,
61-
activeClassName = 'active',
56+
activeClassName = "active",
6257
inactiveClassName,
6358
onClick,
6459
...props
@@ -74,10 +69,10 @@ function RouteLink<Params extends RouteParams>({
7469
const routeObj = router.routes.find((routeObj) => routeObj.route === to);
7570

7671
if (!routeObj) {
77-
throw new Error('[RouteLink] Route not found');
72+
throw new Error("[RouteLink] Route not found");
7873
}
7974

80-
const isOpened = useStore(routeObj.route.$isOpened);
75+
const [isOpened, navigate] = useUnit([routeObj.route.$isOpened, to.navigate]);
8176

8277
const href = buildPath({
8378
pathCreator: routeObj.path,
@@ -88,13 +83,10 @@ function RouteLink<Params extends RouteParams>({
8883
return (
8984
<a
9085
href={href}
91-
className={clsx(
92-
className,
93-
isOpened ? activeClassName : inactiveClassName
94-
)}
86+
className={clsx(className, isOpened ? activeClassName : inactiveClassName)}
9587
onClick={(evt) => {
9688
evt.preventDefault();
97-
to.navigate({
89+
navigate({
9890
params: params || ({} as Params),
9991
query: query || {},
10092
});

0 commit comments

Comments
 (0)