chore: support Next 13 (#17)

* chore: add .nvmrc file

* chore: add support for Next.js v13

* chore: replace @testing-library/react-hooks with @testing-library/react

* fix: package start command

* chore: convert demo to TS

* refactor: port to typescript

* chore: dedupe lock file

* fix: makeContextualHref types

* chore: replace compile script with build

* chore: include only dist in package

Author: toomuchdesign

.gitignore

@@ -17,3 +17,4 @@ demo/out
 !.prettierrc
 !.travis.yml
 !.github
+!.nvmrc

.nvmrc

@@ -0,0 +1 @@
+16

babel.config.js

@@ -1,6 +1,13 @@
+import React from 'react';
 import styles from './Grid.module.css';
 
-export default function Grid({ small, children }) {
+export default function Grid({
+  small,
+  children,
+}: {
+  small?: boolean;
+  children: React.ReactNode;
+}) {
   return (
     <div className={styles.wrapper}>
       <div

demo/.babelrc

@@ -1,6 +1,6 @@
 import Grid from './Grid';
 import SquaredLink from './SquaredLink';
-import { backgroundColors } from 'demo/pages/index';
+import { backgroundColors } from '../pages/index';
 
 const InitialStateGrid = () => {
   return (

demo/components/Grid.js renamed to demo/components/Grid.tsx

@@ -1,7 +1,17 @@
 import styles from './styles.module.css';
 import PostGrid from './PostGrid';
 
-const Post = ({ id, pathname, pageState, showPostGrid }) => {
+const Post = ({
+  id,
+  pathname,
+  pageState,
+  showPostGrid,
+}: {
+  id: string;
+  pathname: string;
+  pageState?: string;
+  showPostGrid?: boolean;
+}) => {
   return (
     <div className={styles.post}>
       <h2>I am the post {id}</h2>

demo/components/InitialStateGrid.js renamed to demo/components/InitialStateGrid.tsx

@@ -1,9 +1,9 @@
 import Grid from './Grid';
 import SquaredLink from './SquaredLink';
-import { useContextualRouting } from 'src';
+import { useContextualRouting } from '../../dist';
 export const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
 
-export default function PostGrid({ small }) {
+export default function PostGrid({ small }: { small?: boolean }) {
   const { makeContextualHref } = useContextualRouting();
 
   return (

demo/components/Post.js renamed to demo/components/Post.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Link from 'next/link';
+import styles from './SquaredLink.module.css';
+
+export default function SquaredLink({
+  href,
+  as,
+  style,
+  children,
+}: {
+  href: string;
+  as?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link className={styles.postCard} href={href} as={as} style={style}>
+      {children}
+    </Link>
+  );
+}

demo/components/PostGrid.js renamed to demo/components/PostGrid.tsx

@@ -0,0 +1,5 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}

demo/components/SquaredLink.js

@@ -1,5 +1,5 @@
 .background {
-  height: 100%;
+  height: 100vh;
   transition: background ease 0.3s;
 }
 

demo/components/SquaredLink.tsx

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demo/global.css

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'demo/styles.css';
+import '../global.css';
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

demo/index-styles.module.css renamed to demo/index.module.css

@@ -1,21 +1,26 @@
-import styles from 'demo/index-styles.module.css';
+import styles from '../index.module.css';
 import { useRouter } from 'next/router';
 import Modal from 'react-modal';
-import Post from 'demo/components/Post';
-import PostGrid from 'demo/components/PostGrid';
-import InitialStateGrid from 'demo/components/InitialStateGrid';
-import { useContextualRouting } from '../../src';
+import Post from '../components/Post';
+import PostGrid from '../components/PostGrid';
+import InitialStateGrid from '../components/InitialStateGrid';
+import { useContextualRouting } from '../../dist';
 export const backgroundColors = {
   1: '#9b55b7',
   2: '#e77e22',
   3: '#2c97dd',
-};
+} as const;
 
 Modal.setAppElement('#__next');
 
 const Index = () => {
   const router = useRouter();
-  const pageState = router.query.state;
+  const pageState = Array.isArray(router.query.state)
+    ? undefined
+    : router.query.state;
+  const postId = Array.isArray(router.query.postId)
+    ? undefined
+    : router.query.postId;
   const { returnHref } = useContextualRouting();
 
   return (
@@ -35,7 +40,7 @@ const Index = () => {
           }}
         >
           <Post
-            id={router.query.postId}
+            id={postId}
             pathname={router.pathname}
             pageState={pageState}
             showPostGrid

demo/next-env.d.ts

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
-import Post from 'demo/components/Post';
-import { data } from 'demo/components/PostGrid';
+import Post from '../../components/Post';
+import { data } from '../../components/PostGrid';
 
 const PostPage = ({ id }) => {
   const router = useRouter();

demo/pages/_app.js renamed to demo/pages/_app.tsx

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}