build: types seems to work

package.json

@@ -18,6 +18,13 @@
   ],
   "main": "dist/index.js",
   "type": "module",
+  "exports": {
+    "import": {
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
       "*": [
@@ -126,6 +133,7 @@
     "playwright": "^1.42.0",
     "prettier": "^3.2.5",
     "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-sourcemaps": "^0.6.3",

packages/example-nextjs/src/app/Form.tsx

@@ -4,7 +4,8 @@ import { Button } from './components/Button';
 import { Field } from './components/Field';
 import { Input } from './components/Input';
 
-import { form, useUrlState } from './form';
+import { useUrlState } from '../../../../dist';
+import { form } from './form';
 
 export const Form = ({ className }: { className?: string }) => {
   const { state, updateState, updateUrl } = useUrlState(form);

packages/example-nextjs/src/app/Status.tsx

@@ -1,7 +1,9 @@
 'use client';
 import React from 'react';
 import { Field } from './components/Field';
-import { form, useUrlState } from './form';
+
+import { form } from './form';
+import { useUrlState } from '../../../../dist';
 
 export const Status = ({ className }: { className?: string }) => {
   const { state } = useUrlState(form);

packages/example-nextjs/src/app/form.ts

@@ -1,7 +1,3 @@
-import { useRouter, usePathname, useSearchParams } from 'next/navigation';
-import React from 'react';
-import { type JSONCompatible, useUrlEncode } from '../../../urlstate';
-
 export const form: Form = {
   name: '',
   age: '',
@@ -15,38 +11,3 @@ type Form = {
   'agree to terms': boolean;
   tags: { id: string; value: { text: string; time: Date } }[];
 };
-
-export function useUrlState<T>(defaultState?: JSONCompatible<T>) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const { parse, stringify } = useUrlEncode(defaultState);
-  const searchParams = useSearchParams();
-  const [state, setState] = React.useState(() => parse(searchParams));
-
-  React.useEffect(() => {
-    setState((curr) => {
-      const newVal = parse(searchParams);
-      return JSON.stringify(curr) === JSON.stringify(newVal) ? curr : newVal;
-    });
-  }, [parse, searchParams]);
-
-  const updateState = React.useCallback(
-    (value: typeof state | ((currState: typeof state) => typeof state)) => {
-      typeof value === 'function'
-        ? setState((curr) => value(curr))
-        : setState(value);
-    },
-    [],
-  );
-
-  const updateUrl = React.useCallback(
-    (value: typeof state | ((currState: typeof state) => typeof state)) => {
-      typeof value === 'function'
-        ? router.push(`${pathname}?${stringify(value(state))}`)
-        : router.push(`${pathname}?${stringify(value)}`);
-    },
-    [pathname, router, stringify, state],
-  );
-
-  return { updateUrl, updateState, state };
-}

packages/example-nextjs/src/app/test/Comp1.tsx

@@ -1,16 +1,16 @@
 'use client';
 import React from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { useUrlEncode } from '../../../../urlstate/useUrlEncode';
+import { useUrlEncode } from '../../../../urlstate';
 import { Textarea } from './Textarea';
 import { fromJSON, toJSON } from './utils';
 
 export const Comp1 = ({ className }: { className: string }) => {
   const router = useRouter();
   const pathname = usePathname();
 
-  const { stringify } = useUrlEncode();
-  const [state, setState] = React.useState('');
+  const { stringify } = useUrlEncode<object>();
+  const [state, setState] = React.useState({});
 
   React.useEffect(() => {
     router.push(`${pathname}?${stringify(state)}`);

packages/example-nextjs/src/app/test/Comp2.tsx

@@ -8,7 +8,7 @@ import { toJSON } from './utils';
 export const Comp2 = ({ className }: { className: string }) => {
   const searchParams = useSearchParams();
 
-  const { parse } = useUrlEncode();
+  const { parse } = useUrlEncode<object>();
 
   return (
     <Textarea

packages/index.ts

@@ -1 +1,7 @@
-export { encode, decode, type Type } from './urlstate';
+export {
+  encode,
+  decode,
+  type Type,
+  useUrlEncode,
+  useUrlState,
+} from './urlstate';

packages/urlstate/index.ts

@@ -1,5 +1,6 @@
 import { encode, decode } from './encoder';
 import { type Type, type JSONCompatible, typeOf } from './utils';
 import { useUrlEncode } from './useUrlEncode';
-export { encode, decode, typeOf, useUrlEncode };
+import { useUrlState } from './useUrlState';
+export { encode, decode, typeOf, useUrlEncode, useUrlState };
 export type { Type, JSONCompatible };

packages/urlstate/useUrlEncode.ts

@@ -1,8 +1,6 @@
 import React from 'react';
-import { encode, decode, typeOf, type JSONCompatible } from '.';
-
-// TODO: export
-// https://nodejs.org/api/packages.html#packages_package_entry_points
+import { typeOf, type JSONCompatible } from './utils';
+import { encode, decode } from './encoder';
 
 // TODO: JSDoc docs
 export function useUrlEncode<T>(stateShape?: JSONCompatible<T>) {

packages/urlstate/useUrlState.ts

@@ -0,0 +1,39 @@
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import React from 'react';
+import { useUrlEncode } from './useUrlEncode';
+import { type JSONCompatible } from './utils';
+
+export function useUrlState<T>(defaultState?: JSONCompatible<T>) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { parse, stringify } = useUrlEncode(defaultState);
+  const searchParams = useSearchParams();
+  const [state, setState] = React.useState(() => parse(searchParams));
+
+  React.useEffect(() => {
+    setState((curr) => {
+      const newVal = parse(searchParams);
+      return JSON.stringify(curr) === JSON.stringify(newVal) ? curr : newVal;
+    });
+  }, [parse, searchParams]);
+
+  const updateState = React.useCallback(
+    (value: typeof state | ((currState: typeof state) => typeof state)) => {
+      typeof value === 'function'
+        ? setState((curr) => value(curr))
+        : setState(value);
+    },
+    [],
+  );
+
+  const updateUrl = React.useCallback(
+    (value: typeof state | ((currState: typeof state) => typeof state)) => {
+      typeof value === 'function'
+        ? router.push(`${pathname}?${stringify(value(state))}`)
+        : router.push(`${pathname}?${stringify(value)}`);
+    },
+    [pathname, router, stringify, state],
+  );
+
+  return { updateUrl, updateState, state };
+}

rollup.config.js

@@ -1,10 +1,11 @@
 import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import ignore from 'rollup-plugin-ignore';
+// import commonjs from '@rollup/plugin-commonjs';
+// import ignore from 'rollup-plugin-ignore';
 import { terser } from 'rollup-plugin-terser';
 import sourcemaps from 'rollup-plugin-sourcemaps';
 import typescript from '@rollup/plugin-typescript';
 import filesize from 'rollup-plugin-filesize';
+// import copy from 'rollup-plugin-copy';
 import pkg from './package.json';
 
 const input = 'packages/index.ts';
@@ -15,23 +16,30 @@ const clearScreen = { watch: { clearScreen: false } };
 
 console.log({ isProduction, sourcemap });
 
-const external = [
-  ...Object.keys(pkg.peerDependencies || {}),
-  (id) => /^react$|^react-dom$|^@babel\/runtime/.test(id),
-];
+// const external = [
+//   ...Object.keys(pkg.peerDependencies || {}),
+//   (id) => /^react$|^react-dom$|^next|^next\/navigation|^\@next|^@babel\/runtime/.test(id),
+// ];
+const external = ['react', 'react-dom', 'next/navigation']
+
 const plugins = [
-  ignore(['fs', 'net', 'react', 'react-dom', 'prop-types', 'PropTypes']),
+  // ignore(['fs', 'net', 'react', 'react-dom', 'prop-types', 'PropTypes', 'next', 'next/navigation', '@next']),
   resolve({
     include: ['node_modules/**'],
   }),
   typescript({
     tsconfig: './tsconfig.json',
     compilerOptions: { sourceMap: sourcemap, declarationMap: sourcemap },
   }),
-  commonjs(),
 
+  // commonjs(),
   !isProduction && sourcemaps(),
   isProduction && terser({ ecma: '2020' }),
+  // copy({
+  //   targets: [
+  //     { src: './package.json', dest: 'dist' },
+  //   ]
+  // }),
   filesize(),
 ].filter(Boolean);