sync-3 (#46)

* refactor attempt

* fixes

* simplify

* tad simpler

* simpler again

* simplerrr

* patch resolution architecture instead of adhoc implicit structure

* simplr

* simpler

* simplerrrrrr

* cleanup

* faster

* crude double-reflection to fix old demo bug

* fix the stuff i broke

* minor code quality bits

* unexport

* types

* use HAST types

* types cleanup

Author: OrionReed

package-lock.json

@@ -4,7 +4,16 @@ export class CustomAttribute<E extends Element = Element> {
   static define() {
     if (customAttributes.isDefined(this.attributeName)) return;
 
-    customAttributes.define(this.attributeName, this);
+    // Auto-generate accessor on Element.prototype: folk-sync → folkSync
+    const attrName = this.attributeName;
+    const propName = attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    Object.defineProperty(Element.prototype, propName, {
+      get() {
+        return customAttributes.get(this, attrName);
+      },
+    });
+
+    customAttributes.define(attrName, this);
   }
 
   readonly #ownerElement: E;

packages/dom/src/CustomAttribute.ts

@@ -116,6 +116,7 @@
     "webcola": "^3.4.0"
   },
   "devDependencies": {
+    "@types/hast": "^3.0.4",
     "@types/wicg-file-system-access": "^2023.10.7",
     "expect": "^29.7.0",
     "mitata": "^1.0.34",

packages/labs/package.json

@@ -0,0 +1,47 @@
+/** Bidirectional map that keeps two maps in sync */
+export class BiMap<A, B> {
+  #aToB = new Map<A, B>();
+  #bToA = new Map<B, A>();
+
+  set(a: A, b: B): void {
+    this.#aToB.set(a, b);
+    this.#bToA.set(b, a);
+  }
+
+  getByA(a: A): B | undefined {
+    return this.#aToB.get(a);
+  }
+
+  getByB(b: B): A | undefined {
+    return this.#bToA.get(b);
+  }
+
+  hasA(a: A): boolean {
+    return this.#aToB.has(a);
+  }
+
+  hasB(b: B): boolean {
+    return this.#bToA.has(b);
+  }
+
+  deleteByA(a: A): boolean {
+    const b = this.#aToB.get(a);
+    if (b === undefined) return false;
+    this.#aToB.delete(a);
+    this.#bToA.delete(b);
+    return true;
+  }
+
+  deleteByB(b: B): boolean {
+    const a = this.#bToA.get(b);
+    if (a === undefined) return false;
+    this.#bToA.delete(b);
+    this.#aToB.delete(a);
+    return true;
+  }
+
+  clear(): void {
+    this.#aToB.clear();
+    this.#bToA.clear();
+  }
+}

packages/labs/src/BiMap.ts

@@ -1,4 +1,4 @@
-import { CustomAttribute, customAttributes } from '@folkjs/dom/CustomAttribute';
+import { CustomAttribute } from '@folkjs/dom/CustomAttribute';
 import { css, html } from '@folkjs/dom/tags';
 import {
   CompletionRequest,
@@ -19,6 +19,12 @@ import { RefID } from './utils/ref-id';
 export const VALID_LSP_LANGUAGES = ['js', 'ts', 'json', 'css'] as const;
 export type LSPLanguage = (typeof VALID_LSP_LANGUAGES)[number];
 
+declare global {
+  interface Element {
+    folkLsp: FolkLSPAttribute | undefined;
+  }
+}
+
 // TODOs
 // incremental updates
 //  - input event only tells us what text is added.
@@ -69,18 +75,6 @@ class LanguageServerPool {
 export class FolkLSPAttribute extends CustomAttribute<HTMLElement> {
   static override attributeName = 'folk-lsp';
 
-  static override define() {
-    if (!customAttributes.isDefined(this.attributeName)) {
-      Object.defineProperty(Element.prototype, 'lsp', {
-        get() {
-          return customAttributes.get(this, FolkLSPAttribute.attributeName) as FolkLSPAttribute | undefined;
-        },
-      });
-    }
-
-    super.define();
-  }
-
   static #highlightRegistry = {
     'folk-lsp-error': new Highlight(),
     'folk-lsp-warning': new Highlight(),

packages/labs/src/dom-json.ts

@@ -182,18 +182,18 @@ export class FolkObserver {
       if (target instanceof FolkShape) {
         target.addEventListener('transform', this.#onTransform);
         callback({ target, contentRect: target.getTransformDOMRect() });
-      } else if (target.shape !== undefined) {
+      } else if (target.folkShape !== undefined) {
         target.addEventListener('transform', this.#onTransform);
-        callback({ target, contentRect: target.shape as unknown as DOMRectReadOnly });
+        callback({ target, contentRect: target.folkShape as unknown as DOMRectReadOnly });
       } else {
         this.#vo.observe(target);
       }
     } else {
       const contentRect =
         target instanceof FolkShape
           ? target.getTransformDOMRect()
-          : target.shape !== undefined
-            ? (target.shape as unknown as DOMRectReadOnly)
+          : target.folkShape !== undefined
+            ? (target.folkShape as unknown as DOMRectReadOnly)
             : target.getBoundingClientRect();
       callback({ target, contentRect });
     }
@@ -223,7 +223,7 @@ export class FolkObserver {
     callbacks.delete(callback);
 
     if (callbacks.size === 0) {
-      if (target instanceof FolkShape || target.shape !== undefined) {
+      if (target instanceof FolkShape || target.folkShape !== undefined) {
         target.removeEventListener('transform', this.#onTransform);
       } else {
         this.#vo.unobserve(target);

packages/labs/src/folk-lsp-attribute.ts

@@ -42,19 +42,19 @@ export class FolkRegion extends ReactiveElement {
   #onTransform = (event: TransformEvent) => {
     const el = event.target as Element;
 
-    if (this === el || this.shape === undefined || el.shape === undefined) return;
+    if (this === el || this.folkShape === undefined || el.folkShape === undefined) return;
 
-    const overlap = R.overlap(getAbsoluteRectangle(this.shape), getAbsoluteRectangle(el.shape));
+    const overlap = R.overlap(getAbsoluteRectangle(this.folkShape), getAbsoluteRectangle(el.folkShape));
     if (this.contains(el) && overlap < 0.49) {
       this.parentElement!.moveBefore!(el, null);
 
-      el.shape!.x += this.shape!.x;
-      el.shape!.y += this.shape!.y;
+      el.folkShape!.x += this.folkShape!.x;
+      el.folkShape!.y += this.folkShape!.y;
     } else if (!this.contains(el) && overlap > 0.51) {
       this.moveBefore!(el, null);
 
-      el.shape!.x -= this.shape!.x;
-      el.shape!.y -= this.shape!.y;
+      el.folkShape!.x -= this.folkShape!.x;
+      el.folkShape!.y -= this.folkShape!.y;
     }
   };
 }

packages/labs/src/folk-observer.ts

@@ -1,5 +1,5 @@
 import { IPointTransform, TransformStack } from '@folkjs/canvas';
-import { CustomAttribute, customAttributes } from '@folkjs/dom/CustomAttribute';
+import { CustomAttribute } from '@folkjs/dom/CustomAttribute';
 import { ResizeManager } from '@folkjs/dom/ResizeManger';
 import { css } from '@folkjs/dom/tags';
 import * as M from '@folkjs/geometry/Matrix2D';
@@ -11,30 +11,20 @@ import { ShapeConnectedEvent, ShapeDisconnectedEvent, TransformEvent, type Shape
 
 declare global {
   interface Element {
-    shape: FolkShapeAttribute | undefined;
+    folkShape: FolkShapeAttribute | undefined;
   }
 }
 
 const resizeManager = new ResizeManager();
 
+// Define FolkShapeOverlay before FolkShapeAttribute class initialization
+// since FolkShapeAttribute.#overlay uses document.createElement('folk-shape-overlay')
+FolkShapeOverlay.define();
+
 // TODO: if an auto position/size is defined as a style then we should probably save it and set it back
 export class FolkShapeAttribute extends CustomAttribute implements Shape2DObject, IPointTransform {
   static override attributeName = 'folk-shape';
 
-  static override define() {
-    if (!customAttributes.isDefined(this.attributeName)) {
-      FolkShapeOverlay.define();
-
-      Object.defineProperty(Element.prototype, 'shape', {
-        get() {
-          return customAttributes.get(this, FolkShapeAttribute.attributeName) as FolkShapeAttribute | undefined;
-        },
-      });
-    }
-
-    super.define();
-  }
-
   static #overlay = document.createElement('folk-shape-overlay');
 
   static styles = css`

packages/labs/src/folk-region.ts

@@ -258,9 +258,9 @@ export class FolkShapeOverlay extends ReactiveElement {
           if (this.#shape === null) {
             const el = document.querySelector('[folk-shape]');
 
-            if (el?.shape === undefined) return;
+            if (el?.folkShape === undefined) return;
 
-            this.open(el.shape, el as HTMLElement);
+            this.open(el.folkShape, el as HTMLElement);
           }
 
           this.focus();
@@ -330,7 +330,7 @@ export class FolkShapeOverlay extends ReactiveElement {
     }
 
     if (event instanceof FocusEvent) {
-      if (event.relatedTarget !== this.shape?.ownerElement) {
+      if (event.relatedTarget !== this.#ownerElement) {
         this.#spatialTabMode = false;
         this.close();
       }