ttcMD: allow for typing metadata

lib/tcmd/TokenIdentifiers.tsx

@@ -11,27 +11,27 @@ type SearchFunction = (s: string, start: number, end: number) => {
   lastIndex: number;
 };
 
-type TokenIdentifier = {
+type TokenIdentifier<M> = {
   rx: RegExp;
-  parse: (s: string) => Token;
+  parse: (s: string) => Token<M>;
   search?: SearchFunction;
 };
 
 type TokenIdentifierMap = Map<
   string,
-  TokenIdentifier
+  TokenIdentifier<any>
 >;
 
 export const TokenRenderers = new Map<
   string,
-  TokenRenderer
+  TokenRenderer<any>
 >();
 
-type IdentifierRegistration = (
+type IdentifierRegistration = <N = Record<string, string>>(
   type: string,
   match: RegExp,
-  parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
-  renderFunction: TokenRenderer,
+  parseFunction: (s: string, rx: RegExp) => IdentifiedToken<N>,
+  renderFunction: TokenRenderer<N>,
   openTagRx?: RegExp,
   closeTagRx?: RegExp,
 ) => void;
@@ -42,28 +42,28 @@ export function buildIdentifierMap(): [
 ] {
   const TokenIdentifiers = new Map<
     string,
-    TokenIdentifier
+    TokenIdentifier<any>
   >();
 
-  function registerIdentifier(
+  function registerIdentifier<M>(
     type: string,
     match: RegExp,
-    parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
-    renderFunction: TokenRenderer,
+    parseFunction: (s: string, rx: RegExp) => IdentifiedToken<M>,
+    renderFunction: TokenRenderer<M>,
   ): void;
-  function registerIdentifier(
+  function registerIdentifier<M>(
     type: string,
     match: RegExp,
-    parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
-    renderFunction: TokenRenderer,
+    parseFunction: (s: string, rx: RegExp) => IdentifiedToken<M>,
+    renderFunction: TokenRenderer<M>,
     openTagRx: RegExp,
     closeTagRx: RegExp,
   ): void;
-  function registerIdentifier(
+  function registerIdentifier<M = Record<string, string>>(
     type: string,
     match: RegExp,
-    parseFunction: (s: string, rx: RegExp) => IdentifiedToken,
-    renderFunction: TokenRenderer,
+    parseFunction: (s: string, rx: RegExp) => IdentifiedToken<M>,
+    renderFunction: TokenRenderer<M>,
     openTagRx?: RegExp,
     closeTagRx?: RegExp,
   ) {
@@ -76,7 +76,7 @@ export function buildIdentifierMap(): [
           type,
         };
 
-        return { ...token, ...identifiedToken };
+        return { ...token, ...identifiedToken } as Token<M>;
       },
       search: (openTagRx && closeTagRx)
         ? (s, start, end) => {
@@ -99,7 +99,7 @@ export function buildIdentifierMap(): [
 export const buildOnlyDefaultElements = () => {
   const [TokenIdentifiers, registerIdentifier] = buildIdentifierMap();
 
-  TokenRenderers.set("text", (t) => {
+  TokenRenderers.set("text", (t: Token<any>) => {
     debugger;
     return (
       <span className="whitespace-pre-wrap">
@@ -114,7 +114,7 @@ export const buildOnlyDefaultElements = () => {
   const rendersChildrenOnly = true;
 
   // grid
-  registerIdentifier(
+  registerIdentifier<{ columns: string }>(
     "grid",
     /(?<!\/)(?:\[\])+\n+((?:.|\n)*?)\n+\/\[\]/g,
     (s) => {
@@ -140,7 +140,7 @@ export const buildOnlyDefaultElements = () => {
           } as React.CSSProperties}
           className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
         >
-          {children?.map((c, i) => (
+          {children?.map((c) => (
             <div key={c.uuid}>
               {c.render(c)}
             </div>
@@ -240,7 +240,7 @@ export const buildOnlyDefaultElements = () => {
                   key={c.uuid}
                   data-depth={metadata.initialDepth}
                 >
-                  {c.children?.map((c) => (
+                  {c.children?.map((c: Token<any>) => (
                     <Fragment key={c.uuid}>{c.render(c)}</Fragment>
                   ))}
                 </li>
@@ -463,7 +463,7 @@ export const buildOnlyDefaultElements = () => {
         content={children?.map((c) => (
           <Fragment key={uuid}>{c.render(c)}</Fragment>
         )) ||
-          metadata.content}
+          token.content}
         preferredAlign="centered"
         preferredEdge="bottom"
         className="cursor-pointer mx-2"

types.d.ts

@@ -1,5 +1,5 @@
-type IdentifiedToken = {
-  metadata: Record<string, string>;
+type IdentifiedToken<M> = {
+  metadata: M;
   children?: Token[];
   uuid: string;
   raw: string;
@@ -8,21 +8,21 @@ type IdentifiedToken = {
   rendersContentOnly?: boolean;
 };
 
-type TokenRenderer = (t: Token) => ReactNode;
+type TokenRenderer<M> = (t: Token<M>) => ReactNode;
 
 type TokenAttributes = {
   type: string;
   render: TokenRenderer;
 };
 
-type Token = IdentifiedToken & TokenAttributes;
+type Token<M = Record<string, string>> = IdentifiedToken<M> & TokenAttributes;
 
-type TokenMarker = {
+type TokenMarker<M = Record<string, string>> = {
   start: number;
   end: number;
   type: string;
   parent?: TokenMarker;
-  token: Token;
+  token: Token<M>;
 };
 
 type FrontMatter = Record<string, string>;