Add note on case mapping

Author: Josh-Cena

package.json

@@ -55,6 +55,7 @@
     "clsx": "^2.0.0",
     "color": "^4.2.3",
     "copy-text-to-clipboard": "^3.2.0",
+    "core-js": "^3.33.2",
     "github-slugger": "^2.0.0",
     "hast-util-to-text": "^4.0.0",
     "prism-react-renderer": "^2.1.0",

project-words.txt

@@ -1,20 +1,32 @@
+casedness
 cena
 charis
+closedness
 cmyk
+codomain
 conlang
 copiable
 coursetable
+dialytika
+dotless
 estree
+flattenable
 huayu
 infty
+injectivity
 joshcena
 katex
 kitchensink
 kwargs
+letterlike
+lext
 luo
+mathbb
 mathcal
+mathtt
 mdast
 mdxjs
+mediavalist
 metastring
 naclo
 noninteractive
@@ -23,15 +35,21 @@ numpy
 peaceiris
 pipeable
 posix
+prosgegrammeni
 randcolor
 rehype
 saturationl
 scrolly
 sida
 silw
+surjectivity
 svgr
+tonos
 triaging
 tseslint
+uext
 wfla
 wordcloud
+yiwn
+ypogegrammeni
 zhihu

server/pre-render.ts

@@ -18,7 +18,7 @@ const render = (
 // Has leading slash; no trailing slash
 // e.g. ["/", "/about", "/404"]
 const routesToPrerender = (
-  await glob(toAbsolute("../src/pages/**/*.{tsx,mdx}"))
+  await glob(toAbsolute("../src/pages/**/[!_]*.{tsx,mdx}"))
 ).map((file) => {
   const name = Path.relative(toAbsolute("../src/pages"), file)
     .replace(/(?:\/?index)?\.(?:tsx|mdx)$/, "")

src/App.tsx

@@ -1,3 +1,6 @@
+import "core-js/proposals/set-methods-v2";
+import "core-js/proposals/iterator-helpers";
+
 import React from "react";
 import { routes } from "./routes";
 import { Route, Routes } from "react-router-dom";

src/components/Heading/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useContext } from "react";
+import React, { useEffect, useMemo, useContext, type ReactNode } from "react";
 import GithubSlugger, { slug } from "github-slugger";
 import styles from "./index.module.css";
 
@@ -26,6 +26,14 @@ function useSlugger(): GithubSlugger {
   return slugger;
 }
 
+function getText(children: ReactNode): string {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children))
+    return children.map(getText).filter(Boolean).join(" ");
+  if (React.isValidElement(children)) return getText(children.props.children);
+  return "";
+}
+
 export default function Heading({
   level,
   children,
@@ -42,7 +50,7 @@ export default function Heading({
   //   () => slugger.slug(children as string),
   //   [slugger, children],
   // );
-  const id = anchor ?? slug(children as string);
+  const id = anchor ?? slug(getText(children));
   return (
     <HeadingTag id={id}>
       <a href={`#${id}`} className={styles.anchor}>

src/global.css

@@ -151,6 +151,10 @@ td {
   border: 1px solid var(--color-text);
 }
 
+summary {
+  cursor: pointer;
+}
+
 .tooltip {
   --rt-opacity: 1;
   background-color: var(--color-background);

src/pages/notes/case-mapping/_DataTables.module.css

@@ -0,0 +1,15 @@
+.charSet {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.char {
+  min-width: 7em;
+}
+
+:global(.assertion-failed) {
+  color: red;
+  font-weight: bold;
+}

src/pages/notes/case-mapping/_DataTables.tsx

@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import styles from "./_DataTables.module.css";
+
+export function charCode(char: string): string {
+  return `${char} (${[...char]
+    .map(
+      (c) =>
+        `U+${c.codePointAt(0)!.toString(16).toUpperCase().padStart(4, "0")}`,
+    )
+    .join(" ")})`;
+}
+
+export function CharSet<T>({
+  set,
+  display,
+  assertSize,
+}: {
+  readonly set: Iterable<T>;
+  readonly display?: (char: T) => string;
+  readonly assertSize?: number;
+}): JSX.Element {
+  const values = [...set];
+  const assertionFailed =
+    assertSize !== undefined && values.length !== assertSize;
+  if (assertionFailed) {
+    console.error(
+      "Assertion failed: expected set of size",
+      assertSize,
+      "but got",
+      values.length,
+    );
+  }
+  if (values.length === 0) {
+    return (
+      <span className={clsx(assertionFailed && "assertion-failed")}>∅</span>
+    );
+  }
+
+  return (
+    <details>
+      <summary>
+        Character set (
+        <span className={clsx(assertionFailed && "assertion-failed")}>
+          {values.length}
+        </span>
+        )
+      </summary>
+      {display ? (
+        <ul>
+          {values.map((char, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={i}>{display(char)}</li>
+          ))}
+        </ul>
+      ) : (
+        <div className={styles.charSet}>
+          {values.map((char) => (
+            <span key={char as string} className={styles.char}>
+              {charCode(char as string)}
+            </span>
+          ))}
+        </div>
+      )}
+    </details>
+  );
+}

src/pages/notes/case-mapping/_data.tsx

@@ -0,0 +1,86 @@
+export function toLowerCase(char: string): string;
+export function toLowerCase(char: Iterable<string>): Set<string>;
+export function toLowerCase(
+  char: string | Iterable<string>,
+): string | Set<string> {
+  if (typeof char === "string") return char.toLowerCase().normalize("NFC");
+  return new Set(Iterator.from(char).map(toLowerCase));
+}
+
+export function toUpperCase(char: string): string;
+export function toUpperCase(char: Iterable<string>): Set<string>;
+export function toUpperCase(
+  char: string | Iterable<string>,
+): string | Set<string> {
+  if (typeof char === "string") return char.toUpperCase().normalize("NFC");
+  return new Set(Iterator.from(char).map(toUpperCase));
+}
+
+export function isChar(char: string): boolean {
+  return [...char].length === 1;
+}
+
+export function isUpperCase(char: string): boolean {
+  return /\p{Uppercase_Letter}/u.test(char);
+}
+
+export function isLowerCase(char: string): boolean {
+  return /\p{Lowercase_Letter}/u.test(char);
+}
+
+export const UC = new Set<string>();
+export const U = new Set<string>();
+export const L = new Set<string>();
+export const Uext = new Set<string>();
+export const Lext = new Set<string>();
+export const ML = new Set<string>();
+export const MU = new Set<string>();
+export const ML_ = new Set<string>();
+export const MU_ = new Set<string>();
+export const NL = new Set<string>();
+export const NU = new Set<string>();
+export const NL_ = new Set<string>();
+export const NU_ = new Set<string>();
+
+export function isI(c: string): boolean {
+  return toUpperCase(c) === c && toLowerCase(c) === c;
+}
+
+for (let c = 0; c < 0x10ffff; c++) {
+  const char = String.fromCodePoint(c).normalize("NFC");
+  if (isUpperCase(char)) Uext.add(char);
+  if (isLowerCase(char)) Lext.add(char);
+  if (!isChar(char) || isI(char)) continue;
+  UC.add(char);
+  const upper = toUpperCase(char);
+  const lower = toLowerCase(char);
+  if (isI(upper))
+    console.error(`Invariant broken: toUpperCase(${char}) = ${upper} ∈ I`);
+  else if (isI(lower))
+    console.error(`Invariant broken: toLowerCase(${char}) = ${lower} ∈ I`);
+  if (!isChar(upper)) {
+    if (isChar(toLowerCase(upper))) {
+      ML.add(char);
+      ML_.add(upper);
+    } else {
+      NL.add(char);
+      NL_.add(upper);
+    }
+  }
+  if (!isChar(lower)) {
+    if (isChar(toUpperCase(lower))) {
+      MU.add(char);
+      MU_.add(lower);
+    } else {
+      NU.add(char);
+      NU_.add(lower);
+    }
+  }
+  if (isUpperCase(char)) U.add(char);
+  if (isLowerCase(char)) L.add(char);
+}
+
+export const GrU = new Set(NL.values().filter((c) => toLowerCase(c) !== c));
+
+export const RU = toUpperCase(UC);
+export const RL = toLowerCase(UC);