nitropage/src/features/editor/data/layout.ts

A free and open source, extensible visual page builder based on SolidStart.

import { Accessor, createMemo } from "solid-js";
import { createStore, produce, reconcile } from "solid-js/store";
import { useLayout } from "../../../data/layout";
import { prepareElementsForReconcile } from "../lib/reconcile";

export const useLayoutWithReconcile = (
  id: Accessor<string | undefined | null>,
) => {
  const layout = useLayout(id);
  const [state, setState] = createStore<
    Exclude<ReturnType<typeof layout>, undefined>
  >({} as any);

  return createMemo(() => {
    const nextLayout = layout();
    if (!nextLayout) return;

    if (state.id && state.revision.id !== nextLayout.revision.id) {
      setState(
        produce((d) =>
          prepareElementsForReconcile(
            d.revision.elements,
            nextLayout.revision.elements,
          ),
        ),
      );
    }

    setState(
      reconcile(structuredClone(nextLayout), { key: null, merge: true }),
    );
    return state;
  }) as typeof layout;
};