immutable-js · jdeniau · Apr 19, 2025 · Apr 7, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "build:prepare": "./resources/prepare-dist.sh",
     "build:stats": "node ./resources/dist-stats.mjs",
     "website:build": "cd website && next build && next-sitemap",
-    "website:dev": "cd website && next dev",
+    "website:dev": "cd website && next dev --turbopack",
     "check-build-output": "node ./resources/check-build-output.mjs",
     "check-git-clean": "./resources/check-git-clean.sh",
     "benchmark": "node ./resources/benchmark.js",
@@ -99,7 +99,7 @@
     "@size-limit/preset-small-lib": "^11.2.0",
     "@types/prismjs": "^1.26.3",
     "@types/random-seed": "0.3.5",
-    "@types/react": "17.0.11",
+    "@types/react": "19.1.0",
     "benchmark": "2.1.4",
     "codemirror": "^6.0.1",
     "colors": "1.4.0",
@@ -119,14 +119,14 @@
     "marked": "^11.2.0",
     "marked-highlight": "^2.1.0",
     "microtime": "3.1.1",
-    "next": "^14.1.0",
+    "next": "15.2.4",
     "next-sitemap": "4.2.3",
     "npm-run-all": "4.1.5",
     "prettier": "^3.5.0",
     "prismjs": "^1.29.0",
     "random-seed": "0.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "rimraf": "2.7.1",
     "rollup": "4.34.8",
     "size-limit": "^11.2.0",

diff --git a/website/next-env.d.ts b/website/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/website/src/ArrowDown.tsx b/website/src/ArrowDown.tsx
@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 export function ArrowDown({ isActive }: { isActive: boolean }): JSX.Element {
   return (
     <svg

diff --git a/website/src/Defs.tsx b/website/src/Defs.tsx
@@ -1,4 +1,4 @@
-import type { ReactFragment, ReactNode } from 'react';
+import type { FocusEvent, JSX, MouseEvent, ReactNode } from 'react';
 import { Fragment, useCallback, useState } from 'react';
 import Link from 'next/link';
 import {
@@ -250,7 +250,7 @@ function Hover({
 }) {
   const [isOver, setIsOver] = useState(false);
   const mouseOver = useCallback(
-    (event) => {
+    (event: MouseEvent | FocusEvent) => {
       event.stopPropagation();
       setIsOver(true);
     },
@@ -413,15 +413,16 @@ function typeLength(type: Type): number {
   throw new Error('Type with unknown kind ' + JSON.stringify(type));
 }
 
-function interpose<T>(
+function interpose<T extends JSX.Element>(
   between: ReactNode,
   array: Array<T>
-): Array<T | ReactFragment> {
-  const result = [];
+): Array<JSX.Element> {
+  const result: Array<JSX.Element> = [];
   let i = 0;
   for (const value of array) {
     result.push(value, <Fragment key={`b:${i++}`}>{between}</Fragment>);
   }
   result.pop();
+
   return result;
 }
diff --git a/website/src/app/docs/[version]/[type]/page.tsx b/website/src/app/docs/[version]/[type]/page.tsx
@@ -21,10 +21,11 @@ type Params = {
 };
 
 type Props = {
-  params: Params;
+  params: Promise<Params>;
 };
 
-export async function generateMetadata({ params }: Props) {
+export async function generateMetadata(props: Props) {
+  const params = await props.params;
   const version = getVersionFromParams(params);
   const defs = getTypeDefs(version);
   const def = Object.values(defs.types).find((d) => d.label === params.type);
@@ -38,13 +39,8 @@ export async function generateMetadata({ params }: Props) {
   };
 }

-export default function TypeDocPage({
-  // versions,
-  // version,
-  // def,
-  // sidebarLinks,
-  params,
-}: Props) {
+export default async function TypeDocPage(props: Props) {
+  const params = await props.params;
   const version = getVersionFromParams(params);
   const defs = getTypeDefs(version);
 

diff --git a/website/src/app/docs/[version]/layout.tsx b/website/src/app/docs/[version]/layout.tsx
@@ -3,13 +3,14 @@ import { ImmutableConsole } from '../../../ImmutableConsole';
 import { getVersions } from '../../../static/getVersions';
 import { getVersionFromParams } from '../../getVersionFromParams';
 
-export default function VersionLayout({
-  children,
-  params,
-}: {
+export default async function VersionLayout(props: {
   children: React.ReactNode;
-  params: { version: string };
+  params: Promise<{ version: string }>;
 }) {
+  const params = await props.params;
+
+  const { children } = props;
+
   const versions = getVersions();
 
   const version = getVersionFromParams(params);

diff --git a/website/src/app/docs/[version]/page.tsx b/website/src/app/docs/[version]/page.tsx
@@ -16,18 +16,20 @@ type Params = {
 };
 
 type Props = {
-  params: Params;
+  params: Promise<Params>;
 };
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const version = getVersionFromParams(params);
 
   return {
     title: `Documentation ${version} — Immutable.js`,
   };
 }
 
-export default function OverviewDocPage({ params }: Props) {
+export default async function OverviewDocPage(props: Props) {
+  const params = await props.params;
   const version = getVersionFromParams(params);
   const defs = getTypeDefs(version);
   const overviewData = getOverviewData(defs);

diff --git a/website/src/app/not-found.tsx b/website/src/app/not-found.tsx
@@ -0,0 +1,13 @@
+import Link from 'next/link';
+
+export default function NotFound() {
+  return (
+    <>
+      <div className="pageBody">
+        <h2>Not Found</h2>
+        <p>Could not find requested resource</p>
+        <Link href="/">Return Home</Link>
+      </div>
+    </>
+  );
+}
diff --git a/website/src/app/play/page.tsx b/website/src/app/play/page.tsx
@@ -4,7 +4,7 @@ import { getTypeDefs } from '../../static/getTypeDefs';
 import { DocSearch } from '../../DocSearch';
 import { SideBar } from '../../Sidebar';
 import { getSidebarLinks } from '../../getSidebarLinks';
-import dynamic from 'next/dynamic';
+import Repl from '../../repl/Repl';
 
 export async function generateStaticParams() {
   return [...getVersions().map((version) => ({ version }))];
@@ -16,8 +16,6 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-const ReplNoSSR = dynamic(() => import('../../repl/Repl'), { ssr: false });
-
 export default function OverviewDocPage() {
   const versions = getVersions();
   const version = versions[0];
@@ -49,7 +47,7 @@ List([
 
 */}
 
-        <ReplNoSSR
+        <Repl
           defaultValue={`const upperFirst = (str) => typeof str === 'string'
   ? str.charAt(0).toUpperCase() + str.slice(1)
   : str;

diff --git a/website/src/repl/Editor.tsx b/website/src/repl/Editor.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type JSX } from 'react';
 import { basicSetup } from 'codemirror';
 import { EditorView, keymap } from '@codemirror/view';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';

diff --git a/website/src/repl/FormatterOutput.tsx b/website/src/repl/FormatterOutput.tsx
@@ -1,5 +1,5 @@
 import { toHTML } from 'jsonml-html';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type JSX } from 'react';
 
 /**
  * immutable-devtools is a console custom formatter.

diff --git a/website/src/repl/Repl.tsx b/website/src/repl/Repl.tsx
@@ -1,5 +1,6 @@
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+import dynamic from 'next/dynamic';
+import React, { useEffect, useRef, useState, type JSX } from 'react';
 import { Editor } from './Editor';
 import FormatterOutput from './FormatterOutput';
 import './repl.css';
@@ -154,4 +155,6 @@ function Repl({ defaultValue }: Props): JSX.Element {
   );
 }
 
-export default Repl;
+export default dynamic(() => Promise.resolve(Repl), {
+  ssr: false,
+});
diff --git a/website/styles/globals.css b/website/styles/globals.css
@@ -1,4 +1,4 @@
-@import url('//code.cdn.mozilla.net/fonts/fira.css');
+@import url('https://code.cdn.mozilla.net/fonts/fira.css');
 
 :root {
   color-scheme: light dark;