feat: adds main entry to packages package.json

README.md

@@ -788,6 +788,15 @@ const handleRequest = (req, res) => {
 };
 ```
 
+Tip: wouter can pre-fill `ssrSearch`, if `ssrPath` contains the `?` character. So these are equivalent:
+
+```jsx
+<Router ssrPath="/goods?sort=asc" />;
+
+// is the same as
+<Router ssrPath="/goods" ssrSearch="sort=asc" />;
+```
+
 On the client, the static markup must be hydrated in order for your app to become interactive. Note
 that to avoid having hydration warnings, the JSX rendered on the client must match the one used by
 the server, so the `Router` component must be present.

packages/wouter-preact/package.json

@@ -17,6 +17,7 @@
     "types/**/*.d.ts",
     "types/*.d.ts"
   ],
+  "main": "esm/index.js",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",

packages/wouter/package.json

@@ -17,6 +17,7 @@
     "types/**/*.d.ts",
     "types/*.d.ts"
   ],
+  "main": "esm/index.js",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",

packages/wouter/src/index.js

@@ -116,6 +116,10 @@ export const Router = ({ children, ...props }) => {
   // holds to the context value: the router object
   let value = parent;
 
+  // when `ssrPath` contains a `?` character, we can extract the search from it
+  const [path, search] = props.ssrPath?.split("?") ?? [];
+  if (search) (props.ssrSearch = search), (props.ssrPath = path);
+
   // what is happening below: to avoid unnecessary rerenders in child components,
   // we ensure that the router object reference is stable, unless there are any
   // changes that require reload (e.g. `base` prop changes -> all components that
@@ -220,17 +224,12 @@ export const Link = forwardRef((props, ref) => {
     : h("a", { ...restProps, href, onClick, children, ref });
 });
 
-const flattenChildren = (children) => {
-  return Array.isArray(children)
-    ? [].concat(
-        ...children.map((c) =>
-          c && c.type === Fragment
-            ? flattenChildren(c.props.children)
-            : flattenChildren(c)
-        )
+const flattenChildren = (children) =>
+  Array.isArray(children)
+    ? children.flatMap((c) =>
+        flattenChildren(c && c.type === Fragment ? c.props.children : c)
       )
     : [children];
-};
 
 export const Switch = ({ children, location }) => {
   const router = useRouter();

packages/wouter/test/router.test.tsx

@@ -51,6 +51,45 @@ it("alters the current router with `parser` and `hook` options", () => {
   expect(router.hook).toBe(hook);
 });
 
+it("accepts `ssrPath` and `ssrSearch` params", () => {
+  const { result } = renderHook(() => useRouter(), {
+    wrapper: (props) => (
+      <Router ssrPath="/users" ssrSearch="a=b&c=d">
+        {props.children}
+      </Router>
+    ),
+  });
+
+  expect(result.current.ssrPath).toBe("/users");
+  expect(result.current.ssrSearch).toBe("a=b&c=d");
+});
+
+it("can extract `ssrSearch` from `ssrPath` after the '?' symbol", () => {
+  let ssrPath: string | undefined = "/no-search";
+  let ssrSearch: string | undefined = undefined;
+
+  const { result, rerender } = renderHook(() => useRouter(), {
+    wrapper: (props) => (
+      <Router ssrPath={ssrPath} ssrSearch={ssrSearch}>
+        {props.children}
+      </Router>
+    ),
+  });
+
+  expect(result.current.ssrPath).toBe("/no-search");
+  expect(result.current.ssrSearch).toBe(undefined);
+
+  ssrPath = "/with-search?a=b&c=d";
+  rerender();
+
+  expect(result.current.ssrPath).toBe("/with-search");
+  expect(result.current.ssrSearch).toBe("a=b&c=d");
+
+  ssrSearch = "x=y&z=w";
+  rerender();
+  expect(result.current.ssrSearch).toBe("a=b&c=d");
+});
+
 it("shares one router instance between components", () => {
   const RouterGetter = ({ el }: { el: ReactElement }) => {
     const router = useRouter();