diff --git a/src/core/state/experimental.ts b/src/core/state/experimental.ts index f63b1e1..041e9e2 100644 --- a/src/core/state/experimental.ts +++ b/src/core/state/experimental.ts @@ -1,18 +1,21 @@ //import { Observable, Change } from "@gullerya/object-observer"; import onChange, { ApplyData } from "on-change"; import { - wrapWithProxy, - StoreProxy, - isProxy, - getProxyPath, - getProxyMeta, + wrapWithCursorProxy, + CursorProxy, + isCursorProxy, + getCursor, + getCursorProxyMeta, ObjPathProxy, -} from "../../utils/observer"; + getValueUsingPath, +} from "../../utils/index"; import * as Constants from "../constants"; -import { getValueUsingPath } from "../../utils/index"; -export type { ObjPathProxy } from "../../utils/observer"; -export { getProxyMeta, getProxyPath } from "../../utils/observer"; +export type { ObjPathProxy } from "../../utils/index"; +export { + getCursorProxyMeta as getProxyMeta, + getCursor as getProxyPath, +} from "../../utils/index"; export type Signal = { id: string; @@ -30,7 +33,7 @@ export type Signal = { value: T; }; -export type StoreCursor> = StoreProxy; +export type StoreCursor> = CursorProxy; type extractGeneric = Type extends ObjPathProxy ? X : never; @@ -138,7 +141,7 @@ const runWire = ( token: SubToken, subWireFactory: WireFactory ) => { - if (isProxy(arg)) { + if (isCursorProxy(arg)) { const cursor = arg as StoreCursor; const v = token(cursor); token.wire.value = v; @@ -265,7 +268,7 @@ export const createStore = ( (p, value, previousValue, change) => { const changePath = p.split("."); const toRun = new Set(); - console.log("chamge", change, changePath); + //console.log("chamge", change, changePath); // todo: improve this logic const manager = storeManager as StoreManager; for (const wire of manager.wires) { @@ -291,7 +294,7 @@ export const createStore = ( _runWires(toRun); [...manager.tasks].forEach(({ path, observor }) => { - console.log({ path, changePath, change }); + //console.log({ path, changePath, change }); if (path.join("/") === changePath.join("/")) { observor({ data: change, path: changePath, value }); } @@ -301,8 +304,11 @@ export const createStore = ( }, {} ); - console.log(observedObject); - const s = wrapWithProxy>(observedObject, storeManager); + //console.log(observedObject); + const s = wrapWithCursorProxy>( + observedObject, + storeManager + ); storeManager.value = observedObject; STORE_COUNTER++; @@ -312,8 +318,8 @@ export const createStore = ( export const reify = (cursor: T): extractGeneric => { const s = cursor as unknown as StoreCursor; - const manager: StoreManager = getProxyMeta(s); - const cursorPath = getProxyPath(s); + const manager: StoreManager = getCursorProxyMeta(s); + const cursorPath = getCursor(s); // console.log({ cursorPath, manager }); //console.log(JSON.stringify(manager.value)); const v = getValueUsingPath(manager.value as any, cursorPath); @@ -337,11 +343,11 @@ const decodeCursor = (str: string) => str.split("/").map(decodeURIComponent); const getSubtoken = (wire: Wire): SubToken => { const token: Partial = (arg: Signal | StoreCursor) => { //console.log("arg", arg); - if (isProxy(arg)) { + if (isCursorProxy(arg)) { const cursor = arg as StoreCursor; - const cursorPath = getProxyPath(cursor); + const cursorPath = getCursor(cursor); // todo: improve ts here and remove typecast - const manager = getProxyMeta(cursor); + const manager = getCursorProxyMeta(cursor); const encodedCursor = encodeCursor(cursorPath); diff --git a/src/stdlib/Each/index.tsx b/src/stdlib/Each/index.tsx index e2a7b00..704421e 100644 --- a/src/stdlib/Each/index.tsx +++ b/src/stdlib/Each/index.tsx @@ -9,11 +9,10 @@ import { import { h, component, Fragment } from "../../dom/index"; import { ComponentUtils, VElement } from "../../dom/types"; import { ParentWireContext } from "../../dom/index"; -import { META_FLAG, ObjPathProxy } from "../../utils/observer"; +import { META_FLAG, getCursor } from "../../utils/index"; import { TreeStep } from "../../dom/types"; import { getUtils, addNode, removeNode } from "../../dom/api"; import { reifyTree, getTreeStep } from "../../dom/traverser"; -import { getProxyMeta, getProxyPath } from "../../utils/observer"; import { getValueUsingPath } from "../../utils/index"; type ArrayOrObject = Array | { [key: string]: unknown }; @@ -55,19 +54,16 @@ export const Each: ( const cursor = props.cursor; const store: StoreManager = (cursor as any)[META_FLAG]; - const path: string[] = getProxyPath(cursor); - console.log("path,", path); + const path: string[] = getCursor(cursor); const value: any[] = getValueUsingPath(store.value as any, path) as any[]; - console.log("sss", store); - const observor = function ({ data, path }: StoreChange) { //console.debug("change", changes, path); - console.log("list change", data, path, value); + // console.log("list change", data, path, value); if (data.name == "push") { - const index = data.result as number; // push returns index + const index = (data.result as number) - 1; // push returns index const { treeStep, el } = renderArray( parentStep, props.renderItem, diff --git a/src/utils/cursor.ts b/src/utils/cursor.ts new file mode 100644 index 0000000..8421369 --- /dev/null +++ b/src/utils/cursor.ts @@ -0,0 +1,42 @@ +import { + createProxy, + getPath, + ObjPathProxy, + PATH_FLAG, +} from "./ts-object-path"; + +export type { ObjPathProxy } from "./ts-object-path"; + +export { PATH_FLAG } from "./ts-object-path"; +// used to save additional data in proxy +export const META_FLAG = Symbol("META_FLAG"); + +export type CursorProxy = ObjPathProxy; + +export type CursorProxyInternal = CursorProxy< + T, + V +> & { + [PATH_FLAG]: string[]; + [META_FLAG]: V; +}; + +export const wrapWithCursorProxy = ( + obj: T, + meta: any +): CursorProxy => { + const p = createProxy([], { + [META_FLAG]: meta, + }); + return p as CursorProxy; +}; + +export const isCursorProxy = (proxy: unknown) => + proxy && !!(proxy as CursorProxyInternal)[PATH_FLAG]; + +export const getCursor = (cursor: CursorProxy) => [ + ...(cursor as CursorProxyInternal)[PATH_FLAG], +]; + +export const getCursorProxyMeta = (cursor: CursorProxy) => + (cursor as CursorProxyInternal)[META_FLAG] as T; diff --git a/src/utils/index.ts b/src/utils/index.ts index 2cf4d58..d987d8b 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -2,3 +2,6 @@ export const getValueUsingPath = ( record: Record, path: string[] ) => path.reduce((record, item) => record[item], record); + +export * from "./crawl"; +export * from "./cursor"; diff --git a/src/utils/observer.ts b/src/utils/observer.ts deleted file mode 100644 index b72e267..0000000 --- a/src/utils/observer.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { - createProxy, - getPath, - ObjPathProxy, - PATH_FLAG, -} from "./ts-object-path"; - -export { PATH_FLAG } from "./ts-object-path"; -export type { ObjPathProxy } from "./ts-object-path"; - -export const CONTROL_FLAG = Symbol("CONTROL_FLAG"); -export const META_FLAG = Symbol("META_FLAG"); - -export type StoreProxy = ObjPathProxy; - -export type StoreProxyInternal = StoreProxy & { - [PATH_FLAG]: string[]; - [META_FLAG]: V; -}; - -export const wrapWithProxy = ( - obj: T, - meta: any -): StoreProxy => { - const p = createProxy([], { - [META_FLAG]: meta, - [CONTROL_FLAG]: (obj: any) => getPath(obj), - }); - return p as StoreProxy; -}; - -export const isProxy = (proxy: unknown) => - proxy && !!(proxy as StoreProxyInternal)[PATH_FLAG]; - -export const getProxyPath = (cursor: StoreProxy) => [ - ...(cursor as StoreProxyInternal)[PATH_FLAG], -]; - -export const getProxyMeta = (cursor: StoreProxy) => - (cursor as StoreProxyInternal)[META_FLAG] as T;