Skip to content

Commit c8e92c6

Browse files
committed
Move components to their own file
1 parent 19a7076 commit c8e92c6

File tree

2 files changed

+102
-101
lines changed

2 files changed

+102
-101
lines changed

src/js/src/components.ts

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from "preact/compat";
2+
import ReactDOM from "preact/compat";
3+
import { createLocationObject, pushState, replaceState } from "./utils";
4+
import { HistoryProps, LinkProps, NavigateProps } from "./types";
5+
6+
/**
7+
* Interface used to bind a ReactPy node to React.
8+
*/
9+
export function bind(node) {
10+
return {
11+
create: (type, props, children) =>
12+
React.createElement(type, props, ...children),
13+
render: (element) => {
14+
ReactDOM.render(element, node);
15+
},
16+
unmount: () => ReactDOM.unmountComponentAtNode(node),
17+
};
18+
}
19+
20+
/**
21+
* History component that captures browser "history go back" actions and notifies the server.
22+
*/
23+
export function History({ onHistoryChangeCallback }: HistoryProps): null {
24+
// Tell the server about history "popstate" events
25+
React.useEffect(() => {
26+
const listener = () => {
27+
onHistoryChangeCallback(createLocationObject());
28+
};
29+
30+
// Register the event listener
31+
window.addEventListener("popstate", listener);
32+
33+
// Delete the event listener when the component is unmounted
34+
return () => window.removeEventListener("popstate", listener);
35+
});
36+
37+
// Tell the server about the URL during the initial page load
38+
React.useEffect(() => {
39+
onHistoryChangeCallback(createLocationObject());
40+
return () => {};
41+
}, []);
42+
return null;
43+
}
44+
45+
/**
46+
* Link component that captures clicks on anchor links and notifies the server.
47+
*
48+
* This component is not the actual `<a>` link element. It is just an event
49+
* listener for ReactPy-Router's server-side link component.
50+
*/
51+
export function Link({ onClickCallback, linkClass }: LinkProps): null {
52+
React.useEffect(() => {
53+
// Event function that will tell the server about clicks
54+
const handleClick = (event: Event) => {
55+
let click_event = event as MouseEvent;
56+
if (!click_event.ctrlKey) {
57+
event.preventDefault();
58+
let to = (event.currentTarget as HTMLElement).getAttribute("href");
59+
pushState(to);
60+
onClickCallback(createLocationObject());
61+
}
62+
};
63+
64+
// Register the event listener
65+
let link = document.querySelector(`.${linkClass}`);
66+
if (link) {
67+
link.addEventListener("click", handleClick);
68+
} else {
69+
console.warn(`Link component with class name ${linkClass} not found.`);
70+
}
71+
72+
// Delete the event listener when the component is unmounted
73+
return () => {
74+
if (link) {
75+
link.removeEventListener("click", handleClick);
76+
}
77+
};
78+
});
79+
return null;
80+
}
81+
82+
/**
83+
* Client-side portion of the navigate component, that allows the server to command the client to change URLs.
84+
*/
85+
export function Navigate({
86+
onNavigateCallback,
87+
to,
88+
replace = false,
89+
}: NavigateProps): null {
90+
React.useEffect(() => {
91+
if (replace) {
92+
replaceState(to);
93+
} else {
94+
pushState(to);
95+
}
96+
onNavigateCallback(createLocationObject());
97+
return () => {};
98+
}, []);
99+
100+
return null;
101+
}

src/js/src/index.ts

Lines changed: 1 addition & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1 @@
1-
import React from "preact/compat";
2-
import ReactDOM from "preact/compat";
3-
import { createLocationObject, pushState, replaceState } from "./utils";
4-
import { HistoryProps, LinkProps, NavigateProps } from "./types";
5-
6-
/**
7-
* Interface used to bind a ReactPy node to React.
8-
*/
9-
export function bind(node) {
10-
return {
11-
create: (type, props, children) =>
12-
React.createElement(type, props, ...children),
13-
render: (element) => {
14-
ReactDOM.render(element, node);
15-
},
16-
unmount: () => ReactDOM.unmountComponentAtNode(node),
17-
};
18-
}
19-
20-
/**
21-
* History component that captures browser "history go back" actions and notifies the server.
22-
*/
23-
export function History({ onHistoryChangeCallback }: HistoryProps): null {
24-
// Tell the server about history "popstate" events
25-
React.useEffect(() => {
26-
const listener = () => {
27-
onHistoryChangeCallback(createLocationObject());
28-
};
29-
30-
// Register the event listener
31-
window.addEventListener("popstate", listener);
32-
33-
// Delete the event listener when the component is unmounted
34-
return () => window.removeEventListener("popstate", listener);
35-
});
36-
37-
// Tell the server about the URL during the initial page load
38-
React.useEffect(() => {
39-
onHistoryChangeCallback(createLocationObject());
40-
return () => {};
41-
}, []);
42-
return null;
43-
}
44-
45-
/**
46-
* Link component that captures clicks on anchor links and notifies the server.
47-
*
48-
* This component is not the actual `<a>` link element. It is just an event
49-
* listener for ReactPy-Router's server-side link component.
50-
*/
51-
export function Link({ onClickCallback, linkClass }: LinkProps): null {
52-
React.useEffect(() => {
53-
// Event function that will tell the server about clicks
54-
const handleClick = (event: Event) => {
55-
let click_event = event as MouseEvent;
56-
if (!click_event.ctrlKey) {
57-
event.preventDefault();
58-
let to = (event.currentTarget as HTMLElement).getAttribute("href");
59-
pushState(to);
60-
onClickCallback(createLocationObject());
61-
}
62-
};
63-
64-
// Register the event listener
65-
let link = document.querySelector(`.${linkClass}`);
66-
if (link) {
67-
link.addEventListener("click", handleClick);
68-
} else {
69-
console.warn(`Link component with class name ${linkClass} not found.`);
70-
}
71-
72-
// Delete the event listener when the component is unmounted
73-
return () => {
74-
if (link) {
75-
link.removeEventListener("click", handleClick);
76-
}
77-
};
78-
});
79-
return null;
80-
}
81-
82-
/**
83-
* Client-side portion of the navigate component, that allows the server to command the client to change URLs.
84-
*/
85-
export function Navigate({
86-
onNavigateCallback,
87-
to,
88-
replace = false,
89-
}: NavigateProps): null {
90-
React.useEffect(() => {
91-
if (replace) {
92-
replaceState(to);
93-
} else {
94-
pushState(to);
95-
}
96-
onNavigateCallback(createLocationObject());
97-
return () => {};
98-
}, []);
99-
100-
return null;
101-
}
1+
export { bind, History, Link, Navigate } from "./components";

0 commit comments

Comments
 (0)