feat(json-crdt-extensions): 🎸 improve slice registry typing

Author: streamich

src/json-crdt-extensions/peritext/registry/SliceRegistry.ts

@@ -1,14 +1,14 @@
 import {PeritextMlElement} from '../block/types';
 import {NodeBuilder} from '../../../json-crdt-patch';
-import type {JsonMlNode} from 'very-small-parser/lib/html/json-ml/types';
+import type {JsonMlElement} from 'very-small-parser/lib/html/json-ml/types';
 import type {FromHtmlConverter, SliceTypeDefinition, ToHtmlConverter} from './types';
 
 export class SliceRegistry {
-  private map: Map<string | number, SliceTypeDefinition> = new Map();
-  private toHtmlMap: Map<string | number, ToHtmlConverter> = new Map();
+  private map: Map<string | number, SliceTypeDefinition<any, any, any>> = new Map();
+  private toHtmlMap: Map<string | number, ToHtmlConverter<any>> = new Map();
   private fromHtmlMap: Map<string, FromHtmlConverter[]> = new Map();
 
-  public add<Type extends number | string, Schema extends NodeBuilder>(def: SliceTypeDefinition<Type, Schema>): void {
+  public add<Type extends number | string, Schema extends NodeBuilder, Inline extends boolean = true>(def: SliceTypeDefinition<Type, Schema, Inline>): void {
     const {type, toHtml, fromHtml} = def;
     this.map.set(type, def);
     if (toHtml) this.toHtmlMap.set(type, toHtml);
@@ -21,17 +21,19 @@ export class SliceRegistry {
       }
   }
 
-  public toHtml(el: PeritextMlElement): JsonMlNode | undefined {
+  public toHtml(el: PeritextMlElement): ReturnType<ToHtmlConverter<any>> | undefined {
     const converter = this.toHtmlMap.get(el[0]);
     return converter ? converter(el) : undefined;
   }
 
-  public fromHtml(el: JsonMlNode): PeritextMlElement | undefined {
+  public fromHtml(el: JsonMlElement): ReturnType<FromHtmlConverter<any, any>> | undefined {
     const tag = el[0] + '';
     const converters = this.fromHtmlMap.get(tag);
-    for (const converter of converters ?? []) {
-      const result = converter(el);
-      if (result) return result;
+    if (converters) {
+      for (const converter of converters) {
+        const result = converter(el);
+        if (result) return result;
+      }
     }
     return;
   }

src/json-crdt-extensions/peritext/registry/registry.ts

@@ -1,6 +1,6 @@
 import {s} from "../../../json-crdt-patch";
 import {JsonNodeView} from "../../../json-crdt/nodes";
-import {PeritextMlElement} from "../block/types";
+import {SchemaToJsonNode} from "../../../json-crdt/schema/types";
 import {CommonSliceType} from "../slice";
 import {SliceRegistry} from "./SliceRegistry";
 
@@ -9,13 +9,23 @@ import {SliceRegistry} from "./SliceRegistry";
  */
 export const registry = new SliceRegistry();
 
+const aSchema = s.obj({
+  href: s.str<string>(''),
+  title: s.str<string>(''),
+});
+
 registry.add({
   type: CommonSliceType.a,
-  schema: s.obj({
-    href: s.str(''),
-    title: s.str(''),
-  }),
-  toHtml: (el) => {
-    throw new Error('Not implemented');
+  schema: aSchema,
+  // toHtml: (el) => ['a', {...el[1]?.data}],
+  fromHtml: {
+    a: (jsonml) => {
+      const attr = jsonml[1] || {};
+      const data: JsonNodeView<SchemaToJsonNode<typeof aSchema>> = {
+        href: attr.href ?? '',
+        title: attr.title ?? '',
+      };
+      return [CommonSliceType.a, data];
+    }
   },
 });

src/json-crdt-extensions/peritext/registry/types.ts

@@ -1,20 +1,20 @@
 import type {NodeBuilder} from '../../../json-crdt-patch';
 import type {JsonNodeView} from '../../../json-crdt/nodes';
-import {SchemaToJsonNode} from '../../../json-crdt/schema/types';
+import type {SchemaToJsonNode} from '../../../json-crdt/schema/types';
 import type {PeritextMlElement} from '../block/types';
-import type {JsonMlNode} from 'very-small-parser/lib/html/json-ml/types';
+import type {JsonMlElement} from 'very-small-parser/lib/html/json-ml/types';
 
-export interface SliceTypeDefinition<Type extends number | string, Schema extends NodeBuilder> {
+export interface SliceTypeDefinition<Type extends number | string = number | string, Schema extends NodeBuilder = NodeBuilder, Inline extends boolean = true> {
   type: Type;
   schema: Schema;
-  toHtml?: ToHtmlConverter<PeritextMlElement<Type, JsonNodeView<SchemaToJsonNode<Schema>>, true>>;
+  toHtml?: ToHtmlConverter<PeritextMlElement<Type, JsonNodeView<SchemaToJsonNode<Schema>>, Inline>>;
   fromHtml?: {
-    [htmlTag: string]: FromHtmlConverter<PeritextMlElement<Type, JsonNodeView<SchemaToJsonNode<Schema>>, true>>;
+    [htmlTag: string]: FromHtmlConverter<Type, JsonNodeView<SchemaToJsonNode<Schema>>>;
   };
 }
 
-export type ToHtmlConverter<El extends PeritextMlElement<any, any, any>> =
-  (element: El) => JsonMlNode;
+export type ToHtmlConverter<El extends PeritextMlElement<any, any, any> = PeritextMlElement<string | number, unknown, boolean>> =
+  (element: El) => [tag: string, attr: Record<string, string> | null];
 
-export type FromHtmlConverter<El extends PeritextMlElement<any, any, any>> =
-  (jsonml: JsonMlNode) => El | undefined;
+export type FromHtmlConverter<Type extends number | string = string | number, Data = unknown> =
+  (jsonml: JsonMlElement) => [type: Type, data: Data];

src/json-crdt-patch/builder/schema.ts

@@ -152,7 +152,7 @@ export namespace nodes {
    * s.obj({
    *   href: s.str('https://example.com'),
    * })
-   *  .optional<nodes.obj({
+   *   .optional<nodes.obj({
    *     title: nodes.str,
    *   })>()
    * ```