creo 0.0.3-dev → 0.0.4-dev

package/src/{record/record.spec.ts → data-structures/record/Record.spec.ts}

@@ -1,14 +1,43 @@
-import { expect, test } from "bun:test";
-import { record, onDidUpdate } from "./record";
+import { expect, test, mock } from "bun:test";
+import { record, RecordOf, onDidUpdate, isRecord } from "./Record";
 
 test("Can define objects", () => {
   const obj = record({
     hello: "world",
   });
 
+  // @ts-ignore
   expect(obj).toEqual({ hello: "world" });
 });
 
+test("Refers to the same objects", () => {
+  const test = record({
+    foo: {
+      bar: "baz",
+    },
+  });
+
+  expect(test.foo).toBe(test.foo);
+});
+
+test("Updates fields correctly", () => {
+  const test: RecordOf<any> = record({
+    foo: {
+      bar: "baz",
+    },
+  });
+
+  expect(test.foo.bar).toBe("baz");
+
+  test.foo.bar = "123";
+
+  expect(test.foo.bar).toBe("123");
+
+  test.foo = { hello: "world" };
+  expect(test.foo.bar).toBe(undefined);
+  expect(test.foo.hello).toBe("world");
+});
+
 test("Notifies on object updates", async () => {
   const obj = record({
     hello: "world",
@@ -48,6 +77,7 @@ test("Implies updates immediately", async () => {
     },
   });
 
+  // @ts-ignore
   expect(obj).toEqual({
     hello: {
       world: "foo",
@@ -56,6 +86,7 @@ test("Implies updates immediately", async () => {
 
   obj.hello.world = "new";
 
+  // @ts-ignore
   expect(obj).toEqual({
     hello: {
       world: "new",
@@ -144,3 +175,66 @@ test("Supports iterable", async () => {
 
   iterate(...obj);
 });
+
+test("`has` works with records", async () => {
+  const originalObject = {
+    foo: "bar",
+    baz: "test",
+    nested: {
+      support: "exist",
+    },
+  };
+  const wrapped = record(originalObject);
+
+  expect(isRecord(originalObject)).toBe(false);
+  expect(isRecord(wrapped)).toBe(true);
+  expect("foo" in wrapped).toBe(true);
+  expect("test" in wrapped).toBe(false);
+  expect("support" in wrapped.nested).toBe(true);
+  expect("foo" in wrapped.nested).toBe(false);
+});
+
+test("Double tracked on nested object works correctly", async () => {
+  const originalObject = {
+    foo: "bar",
+    baz: "test",
+    nested: {
+      support: "exist",
+    },
+  };
+
+  // This object is not tracked under the same parent, but might be considered in future to allow better objects and record composition.
+  // It would require objects to have multiple parents (so essentially many<=>many concept.)
+  const additionalObject = {
+    nested: originalObject.nested,
+    foo: "123",
+    hello: "234",
+  };
+
+  const originalWrappped = record(originalObject);
+
+  const additionalWrapped = record(additionalObject);
+
+  const recordedNested = record(originalWrappped.nested);
+
+  const mockFn = mock();
+
+  onDidUpdate(originalWrappped, () => {
+    mockFn();
+    expect(originalObject.nested).toEqual(originalWrappped.nested);
+  });
+  onDidUpdate(additionalWrapped, () => {
+    // We should never hit that path
+    expect(1).toBe(0);
+    mockFn();
+  });
+  onDidUpdate(recordedNested, () => {
+    mockFn();
+    // @ts-ignore
+    expect(recordedNested).toEqual({ support: "updated" });
+  });
+  originalWrappped.nested.support = "updated";
+  // Updates are propagated in microtick queue, so we wait single tick
+  await Promise.resolve();
+  expect(mockFn).toHaveBeenCalledTimes(2);
+});

package/src/data-structures/record/Record.ts

@@ -0,0 +1,145 @@
+/**
+ * Ideas:
+ * [x] didUpdate support
+ * [x] Proxy proxifies all children as well
+ * [x] Support nested updates + nested listeners (e.g. only part of the object)
+ * [x] Cache records
+ * [ ] Keep track on updates, until there are no users on the old state
+ * [ ] Support symbol iterator
+ * [ ] Add js dispose tracker to automatically close listeners
+ * [ ] Allow to "stop propagate" changes if needed (or allow catching changes only on top level)
+ */
+
+import { Maybe } from "../maybe/Maybe";
+import { Wildcard } from "../wildcard/wildcard";
+import { isRecordLike } from "./IsRecordLike";
+
+// #region Record Type
+const ParentRecord = Symbol("parent-record");
+// const example: RecordOf<{foo: 'bar'}> = {
+//   foo: 'bar',
+//   [ParentRecord]: null // Root record
+// }
+export type RecordOf<T extends object> = T & {
+  [ParentRecord]: Maybe<WeakRef<RecordOf<Wildcard>>>;
+};
+type RecordDidChangeListener<T extends object> = (record: RecordOf<T>) => void;
+
+export function isRecord<T extends object>(value: T): value is RecordOf<T> {
+  return ParentRecord in value;
+}
+
+// #region Weak map for listenets
+const didUpdateMap: WeakMap<
+  RecordOf<Wildcard>,
+  Set<RecordDidChangeListener<Wildcard>>
+> = new WeakMap();
+
+// #region Update notifier
+const scheduledUpdatesNotifiers: Set<RecordOf<Wildcard>> = new Set();
+let shouldScheduleMicrotask = true;
+function queuedNotifier() {
+  function iterate(record: RecordOf<Wildcard>) {
+    const listeners = didUpdateMap.get(record);
+    listeners?.forEach((listener) => {
+      listener(record);
+    });
+    const maybeParent: Maybe<RecordOf<Wildcard>> = record[ParentRecord];
+    if (maybeParent) {
+      iterate(maybeParent);
+    }
+  }
+  shouldScheduleMicrotask = true;
+  scheduledUpdatesNotifiers.forEach(iterate);
+}
+function recordDidUpdate<T extends object>(record: RecordOf<T>) {
+  scheduledUpdatesNotifiers.add(record);
+  shouldScheduleMicrotask && queueMicrotask(queuedNotifier);
+  shouldScheduleMicrotask = false;
+}
+
+type InternalOnly = never;
+
+// #region Record creation, fields wrapper
+function creoRecord<TNode extends object, T extends object>(
+  parent: Maybe<RecordOf<TNode>>,
+  value: T,
+): RecordOf<T> {
+  const parentWeakRef = parent != null ? new WeakRef(parent) : null;
+
+  type CacheField<K extends keyof T> = T[K] extends object
+    ? Maybe<RecordOf<T[K]>>
+    : never;
+  type Cache = { [K in keyof T]: CacheField<K> };
+  const cache: Cache = {} as Cache;
+  const record: RecordOf<T> = new Proxy(value, {
+    // @ts-ignore we override `has` to improve typing
+    has<K extends keyof T>(target: T, property: K): boolean {
+      if (property === ParentRecord) {
+        return true;
+      }
+      return property in target;
+    },
+    // @ts-ignore we override `get` to improve typing
+    get<K extends keyof T>(target: T, property: K): T[K] {
+      const val = target[property];
+
+      if (property === ParentRecord) {
+        // Only for internal use
+        return parentWeakRef?.deref() as InternalOnly;
+      }
+      // If the value is cached, return the cached record:
+      if (cache[property] != null) {
+        return cache[property] as T[K];
+      }
+      // No cached value:
+      if (isRecordLike(val)) {
+        // Object / Array, etc.
+        // we proxify all nested objects / arrays to ensure correct behaviour
+        const childRecord = creoRecord(record, val);
+        cache[property] = childRecord as CacheField<K>;
+        return childRecord;
+      }
+
+      // Primitive value:
+      return val;
+    },
+    set<K, TNewValue>(target: T, property: K, newValue: TNewValue) {
+      // property is actually the keyof K, but TS defines Proxy differently:
+      const prop: keyof T = property as keyof T;
+      const value: T[typeof prop] = newValue as T[typeof prop];
+
+      target[prop] = value;
+      if (cache[prop] != null) {
+        cache[prop] = null as Cache[keyof Cache];
+      }
+      recordDidUpdate(record);
+      return true;
+    },
+  }) as RecordOf<T>;
+  didUpdateMap.set(record, new Set());
+  return record;
+}
+
+// #region Public API
+export function record<TNode extends object>(value: TNode): RecordOf<TNode> {
+  if (isRecord(value)) {
+    return value;
+  }
+  return creoRecord(null, value);
+}
+
+export function onDidUpdate<T extends object>(
+  record: RecordOf<T>,
+  listener: (record: RecordOf<T>) => void,
+): () => void {
+  const listeners = didUpdateMap.get(record);
+  if (!listeners) {
+    // Safe-guard: Essentialy this path cannot happen
+    throw new TypeError(`Record ${record} was created without listener`);
+  }
+  listeners.add(listener);
+  return function unsubscribe() {
+    listeners.delete(listener);
+  };
+}

package/src/data-structures/shalllowEqual/shallowEqual.ts

@@ -0,0 +1,26 @@
+import { Wildcard } from "../wildcard/wildcard";
+
+export function shallowEqual(a: Wildcard, b: Wildcard): boolean {
+  if (a === b) return true;
+
+  if (
+    typeof a !== "object" ||
+    a === null ||
+    typeof b !== "object" ||
+    b === null
+  ) {
+    return false;
+  }
+
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) return false;
+
+  for (let i = 0; i < keysA.length; i++) {
+    const key = keysA[i];
+    if (!Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/data-structures/simpleKey/simpleKey.ts

@@ -0,0 +1,8 @@
+let i = 0;
+
+export function generateNextKey(childrenSize: number): string {
+  if (i === Number.MAX_SAFE_INTEGER) {
+    i = 0;
+  }
+  return `c:${i++}:${childrenSize}`;
+}

package/src/data-structures/wildcard/wildcard.ts

@@ -0,0 +1 @@
+export type Wildcard = any;

package/src/examples/SimpleTodoList/SimpleTodoList.ts

@@ -0,0 +1,53 @@
+import { Block, Button, creo, Inline, Text } from "../../creo";
+import { Maybe } from "../../data-structures/maybe/Maybe";
+import { _ } from "../../data-structures/null/null";
+
+type Todo = { text: string };
+
+export const SimpleTodoList = creo<{ text: string; todos: Array<Todo> }>(
+  (c) => {
+    const todos: Array<Todo> = c.tracked(c.p.todos);
+    let button: () => Maybe<HTMLElement>;
+    return {
+      didMount() {
+        console.warn("did mount");
+        console.log(button());
+        button()?.addEventListener("click", () => {
+          todos.push({ text: `Task #${todos.length}` });
+        });
+        // button?.extension.getButton().addEventListener("click", () => {
+        //   todos.push({ text: `New Todo: ${counter++}` });
+        // });
+      },
+      render() {
+        console.log("rendering todo list");
+        Inline(_, () => {
+          Text(c.p.text);
+        });
+        Block(_, () => {
+          Text("Hello inside container");
+          Block(_, () => {
+            TodoList({ todos });
+          });
+        });
+        button = Button(_, () => Text("Add todo"));
+      },
+    };
+  },
+);
+
+export const TodoList = creo<{ todos: Array<Todo> }>((c) => {
+  const todos: Array<Todo> = c.tracked(c.p.todos);
+  return {
+    render() {
+      console.log("rendering todos");
+      todos.map((todo) => {
+        console.log(todo);
+        Block({ class: "todo" }, () => {
+          console.log(`Entity: ${todo.text}`);
+          Text(`Entity: ${todo.text}`);
+        });
+      });
+    },
+  };
+});

package/src/globals.d.ts

@@ -0,0 +1 @@
+declare const __DEV__: boolean;

package/src/main.ts

@@ -1,13 +1,24 @@
+import { record } from "./data-structures/record/Record";
+import { DomEngine } from "./DOM/DomEngine";
+import { SimpleTodoList } from "./examples/SimpleTodoList/SimpleTodoList";
 import "./style.css";
 
-document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-  <div>
-    <h1>Vite + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
-  </div>
-`;
+const todoList = record([
+  { text: "First" },
+  { text: "Second" },
+  { text: "Third" },
+]);
+
+const engine = new DomEngine(document.querySelector("#app") as HTMLElement);
+engine.render(() => {
+  SimpleTodoList({
+    text: "Hello world",
+    todos: todoList,
+  });
+});
+
+todoList.push({ text: "New item" });
+
+setTimeout(() => {
+  todoList[2].text = "123";
+}, 1000);

package/src/style.css

@@ -1,96 +1,41 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+.todo {
+    margin: 10px;
+    border: 1px solid blue;
 }

package/src/ui/html/Block.ts

@@ -0,0 +1,10 @@
+import { creo, ui } from "../../creo";
+
+export const Block = creo<{
+  // TODO replace with nice UI params
+  [key: string]: string;
+}>((c) => ({
+  render() {
+    ui("div", c.p, c.slot);
+  },
+}));

package/src/ui/html/Button.ts

@@ -0,0 +1,12 @@
+import { creo, ui } from "../../creo";
+
+export const Button = creo<{
+  // TODO replace with nice UI params
+  [key: string]: string;
+}>((c) => {
+  return {
+    render() {
+      ui("button", c.p, c.slot);
+    },
+  };
+});

package/src/ui/html/HStack.ts

@@ -0,0 +1,10 @@
+import { creo, ui } from "../../creo";
+
+export const HStack = creo<{
+  // TODO replace with nice UI params
+  [key: string]: string;
+}>((c) => ({
+  render() {
+    ui("div", c.p, c.slot);
+  },
+}));

package/src/ui/html/Inline.ts

@@ -0,0 +1,12 @@
+import { creo, ui } from "../../creo";
+
+export const Inline = creo<{
+  // TODO replace with nice UI params
+  [key: string]: string;
+}>((c) => {
+  return {
+    render() {
+      ui("span", c.p, c.slot);
+    },
+  };
+});

package/src/ui/html/List.ts

@@ -0,0 +1,10 @@
+import { creo, ui } from "../../creo";
+
+export const List = creo<{
+  // TODO replace with nice UI params
+  [key: string]: string;
+}>((c) => ({
+  render() {
+    ui("div", c.p, c.slot);
+  },
+}));

package/src/ui/html/Text.ts

@@ -0,0 +1,9 @@
+import { creo, ui } from "../../creo";
+
+export const Text = creo<string>((c) => {
+  return {
+    render() {
+      ui("text", c.p);
+    },
+  };
+});

package/src/ui/html/VStack.ts

@@ -0,0 +1,11 @@
+import { creo, ui } from "../../creo";
+
+export const VStack = creo<{
+  // TODO replace with nice UI params
+  [key: string]: string;
+}>((c) => ({
+  render() {
+    ui("div", c.p, c.slot);
+  },
+  // TODO allow `with` field to enable the `slot`
+}));

package/tsconfig.json

@@ -3,8 +3,9 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ESNext", "ES2020", "DOM", "DOM.Iterable"],
     "skipLibCheck": true,
+    "experimentalDecorators": true,
 
     /* Bundler mode */
     "moduleResolution": "bundler",
@@ -13,7 +14,6 @@
     "isolatedModules": true,
     "noEmit": true,
 
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

package/vite.config.js

@@ -0,0 +1,10 @@
+import { defineConfig, loadEnv } from "vite";
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  return {
+    define: {
+      __DEV__: env.__DEV__,
+    },
+  };
+});