immutable-js · jdeniau · Apr 7, 2025 · Apr 6, 2025 · Apr 7, 2025 · Apr 7, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -114,7 +114,7 @@
     "globals": "^15.15.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.6.4",
-    "jsonml-html": "^1.1.0",
+    "jsonml-html": "^1.2.0",
     "make-synchronous": "0.1.1",
     "marked": "^11.2.0",
     "marked-highlight": "^2.1.0",

diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import { Metadata } from 'next';
 import React from 'react';
 import '../../styles/globals.css';
+import '../../styles/prism-theme.css';
 
 export const metadata: Metadata = {
   title: 'Immutable.js',

diff --git a/website/src/app/play/page.tsx b/website/src/app/play/page.tsx
@@ -32,12 +32,35 @@ export default function OverviewDocPage() {
         <DocSearch />
         <h1>Playgroud ({version})</h1>
 
+        {/*
+Debug with:
+
+List([
+  'apple',
+  'banana',
+  'coconut',
+  123,
+  null,
+  undefined,
+  new Date()
+])
+  .push('dragonfruit')
+  .map((fruit) => upperFirst(fruit))
+
+*/}
+
         <ReplNoSSR
-          defaultValue={`const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+          defaultValue={`const upperFirst = (str) => typeof str === 'string'
+  ? str.charAt(0).toUpperCase() + str.slice(1)
+  : str;
 
-List(['apple', 'banana', 'coconut'])
-    .push('dragonfruit')
-    .map((fruit) => upperFirst(fruit))
+List([
+  'apple',
+  'banana',
+  'coconut',
+])
+  .push('dragonfruit')
+  .map((fruit) => upperFirst(fruit))
 `}
         />
       </div>

diff --git a/website/src/repl/Editor.tsx b/website/src/repl/Editor.tsx
@@ -2,10 +2,11 @@ import { useEffect, useRef } from 'react';
 import { basicSetup } from 'codemirror';
 import { EditorView, keymap } from '@codemirror/view';
 import { defaultKeymap, indentWithTab } from '@codemirror/commands';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Extension } from '@codemirror/state';
 import { javascript } from '@codemirror/lang-javascript';
 // TODO activate this when we have a dark mode
-// import { oneDark } from '@codemirror/theme-one-dark';
+import { oneDark } from '@codemirror/theme-one-dark';
+import useDarkMode from '../useDarkMode';
 
 type Props = {
   value: string;
@@ -14,6 +15,7 @@ type Props = {
 
 export function Editor({ value, onChange }: Props): JSX.Element {
   const editor = useRef<HTMLDivElement>(null);
+  const darkMode = useDarkMode();
 
   const onUpdate = EditorView.updateListener.of((v) => {
     onChange(v.state.doc.toString());
@@ -29,11 +31,13 @@ export function Editor({ value, onChange }: Props): JSX.Element {
         basicSetup,
         keymap.of([...defaultKeymap, indentWithTab]),
         javascript(),
-        // TODO activate this when we have a dark mode
-        // oneDark,
+        darkMode ? oneDark : undefined,
 
         onUpdate,
-      ],
+      ].filter(
+        (value: Extension | undefined): value is Extension =>
+          typeof value !== 'undefined'
+      ),
     });
 
     const view = new EditorView({
@@ -44,7 +48,7 @@ export function Editor({ value, onChange }: Props): JSX.Element {
     return () => {
       view.destroy();
     };
-  }, []);
+  }, [darkMode]);
 
   return <div className="repl-editor" ref={editor}></div>;
 }
diff --git a/website/src/repl/Repl.tsx b/website/src/repl/Repl.tsx
@@ -16,7 +16,7 @@ function Repl({ defaultValue }: Props): JSX.Element {
 
   useEffect(() => {
     const workerScript = `
-    importScripts('https://cdn.jsdelivr.net/npm/immutable@5.1.1', 'https://cdn.jsdelivr.net/npm/immutable-devtools@0.1.5');
+    importScripts('https://cdn.jsdelivr.net/npm/immutable@5.1.1', 'https://cdn.jsdelivr.net/npm/@jdeniau/immutable-devtools@0.2.0');
 
       // extract all Immutable exports to have them available in the worker automatically
       const {

diff --git a/website/src/useDarkMode.ts b/website/src/useDarkMode.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+export default function useDarkMode(): boolean {
+  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const [darkMode, setDarkMode] = useState(darkModeMediaQuery.matches);
+
+  useEffect(() => {
+    const handleChange = (e: MediaQueryListEvent) => {
+      setDarkMode(e.matches);
+    };
+    darkModeMediaQuery.addEventListener('change', handleChange);
+    return () => {
+      darkModeMediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [darkModeMediaQuery]);
+
+  return darkMode;
+}
diff --git a/website/styles/globals.css b/website/styles/globals.css
@@ -1,5 +1,9 @@
 @import url('//code.cdn.mozilla.net/fonts/fira.css');
 
+:root {
+  color-scheme: light dark;
+}
+
 html,
 body {
   --link-color: #4183c4;
@@ -8,6 +12,10 @@ body {
   --header-bg-color: #6dbcdb;
   --body-color: #626466;
   --code-block-bg-color: #f4f4f4;
+  --code-block-color: #484a4c;
+
+  background-color: #ffffff;
+  color: var(--body-color);
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-text-size-adjust: 100%;
@@ -17,6 +25,21 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+@media (prefers-color-scheme: dark) {
+  html,
+  body {
+    --link-color: #79a6f6;
+    --link-hover-color: #5683d4;
+    --header-color: #e0e0e0;
+    --header-bg-color: #2b3a42;
+    --body-color: #c0c0c0;
+    --code-block-bg-color: #2e2e2e;
+    --code-block-color: #d1d5da;
+
+    background-color: #121212;
+  }
+}
+
 body,
 input {
   color: var(--body-color);
@@ -65,8 +88,8 @@ a:hover {
 pre,
 code {
   font-family: 'Fira Mono', Menlo, monospace;
-  background: #f9f8f7;
-  color: #484a4c;
+  background: var(--code-block-bg-color);
+  color: var(--code-block-color);
   font-size: 0.9375em;
   letter-spacing: -0.015em;
 }
@@ -112,67 +135,6 @@ blockquote > :last-child {
   padding-left: 2ch;
 }
 
-/* TODO: not random colors */
-
-.token.punctuation,
-.token.ignore,
-.t.interfaceDef,
-.t.member,
-.t.callSig {
-  color: #808890;
-}
-
-.token.function,
-.token.class-name,
-.token.qualifier,
-.t.fnQualifier,
-.t.fnName {
-  color: #32308e;
-}
-
-.token.primitive,
-.t.primitive {
-  color: #922;
-}
-
-.token.number,
-.t.typeParam {
-  color: #905;
-}
-
-.t.typeQualifier,
-.t.typeName {
-  color: #013679;
-}
-
-.t.param {
-  color: #945277;
-}
-
-.t.memberName {
-  color: teal;
-}
-
-.token.block-keyword,
-.token.keyword,
-.t.keyword {
-  color: #a51;
-}
-
-.token.string,
-.token.regex {
-  color: #df5050;
-}
-
-.token.operator {
-  color: #a67f59;
-}
-
-.token.comment {
-  color: #998;
-  font-style: italic;
-}
-
 a.try-it {
   position: absolute;
   cursor: pointer;
@@ -458,6 +420,16 @@ img {
   color: #141420;
 }
 
+@media (prefers-color-scheme: dark) {
+  .toolBar {
+    color: #bbb;
+  }
+
+  .toolBar .selected {
+    color: #fff;
+  }
+}
+
 @media only screen and (max-width: 680px) {
   .toolBar {
     display: none;
@@ -547,7 +519,7 @@ img {
 }
 
 .typeHeader {
-  color: #555;
+  color: light-dark(#555, #fff);
   font-size: 1.5em;
   font-weight: normal;
   margin: 1rem 0;
@@ -560,7 +532,7 @@ img {
 }
 
 .infoHeader {
-  color: #555;
+  color: light-dark(#555, #fff);
   font-size: 10px;
   letter-spacing: 0.25ch;
   line-height: 16px;