LV: Atomize core

.prettierrc.json5

@@ -0,0 +1,3 @@
+{
+    // Intentionally empty, uses prettier defaults
+}

packages/react/src/hooks/raisinToSnabdom.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import { h, VNode, VNodeData } from 'snabbdom';
 import {
+  cssSerializer,
   htmlUtil,
-  RaisinNode,
   RaisinDocumentNode,
-  cssSerializer,
+  RaisinNode,
 } from '@raisins/core';
+import { h, VNode, VNodeData } from 'snabbdom';
 import styleToObject from 'style-to-object';
 const { visit } = htmlUtil;
 

packages/react/src/hooks/useCore.tsx

@@ -50,12 +50,36 @@ export function getId(node: RaisinNode): string {
   return id;
 }
 
+// Should be made private
 export const InternalStateAtom = atom<InternalState>({
   redoStack: [],
   undoStack: [],
   current: htmlParser('<div></div>'),
 });
 
+export const SelectedAtom = atom(
+  (get) => get(InternalStateAtom).selected,
+  (get, set, next: RaisinNode) => {
+    set(InternalStateAtom, (prev: InternalState) => {
+      // TODO: Allows for selecting nodes that aren't part of the current tree. That doesn't make sense and should be prevented
+      return {
+        ...prev,
+        selected: next
+          ? { type: 'node', path: getPath(prev.current, next)! }
+          : undefined,
+      };
+    });
+  }
+);
+
+/**
+ * Derived map of parents
+ */
+export const ParentsAtom = atom((get) => {
+  const doc = get(InternalStateAtom).current;
+  return getParents(doc);
+});
+
 export const DeleteSelectedAtom = atom(null, (get, set) => {
   set(InternalStateAtom, (previous) => {
     if (previous.selected) {
@@ -91,24 +115,14 @@ export function useCore(
   metamodel: ComponentModel,
   initial: RaisinNode
 ): CoreModel {
-  const [state, setState] = useAtom(InternalStateAtom);
+  const [{ current }, setState] = useAtom(InternalStateAtom);
+
   useEffect(() => {
     setState({ redoStack: [], undoStack: [], current: initial });
   }, [initial]);
 
   const deleteSelected = useUpdateAtom(DeleteSelectedAtom);
-
-  const setSelected = (next?: RaisinNode) => {
-    setState((prev: InternalState) => {
-      // TODO: Allows for selecting nodes that aren't part of the current tree. That doesn't make sense and should be prevented
-      return {
-        ...prev,
-        selected: next
-          ? { type: 'node', path: getPath(prev.current, next)! }
-          : undefined,
-      };
-    });
-  };
+  const [selected, setSelected] = useAtom(SelectedAtom);
 
   function setNodeInternal(next: NewState<RaisinNode>, clearSelection = false) {
     setState((previous) => {
@@ -129,33 +143,16 @@ export function useCore(
     setNodeInternal((previous: RaisinNode) => remove(previous, n), undefined);
   }
   function duplicateNode(n: RaisinNode) {
-    const clone = duplicate(state.current, n);
+    const clone = duplicate(current, n);
     setNodeInternal(clone, true);
   }
-  function moveUp(n: RaisinNode) {
-    // TODO: Move selection up at same time
-    setNodeInternal((previousState: RaisinNode) => {
-      const parent = parents.get(n);
-      const currentIdx = parent!.children.indexOf(n);
-      const clone = move(previousState, n, parent!, currentIdx - 1);
-      return clone;
-    });
-  }
-  function moveDown(n: RaisinNode) {
-    // TODO: Move selection down at same time
-    setNodeInternal((previousState: RaisinNode) => {
-      const parent = parents.get(n);
-      const currentIdx = parent!.children.indexOf(n);
-      const clone = move(previousState, n, parent!, currentIdx + 1);
-      return clone;
-    });
-  }
+
   function insertNode(
     n: RaisinNode,
     parent: RaisinNodeWithChildren,
     idx: number
   ) {
-    const clone = insertAt(state.current, n, parent, idx);
+    const clone = insertAt(current, n, parent, idx);
     setNode(clone);
   }
   function replaceNode(prev: RaisinNode, next: RaisinNodeWithChildren) {
@@ -190,7 +187,7 @@ export function useCore(
     });
   }
   function getPathInternal(node: RaisinNode): NodePath {
-    return getPath(state.current, node)!;
+    return getPath(current, node)!;
   }
   function replacePathInternal(prev: NodePath, next: RaisinNodeWithChildren) {
     setState((previous) => {
@@ -208,34 +205,24 @@ export function useCore(
     });
   }
 
-  const { current } = state;
   const serialized = useMemo(() => serializer(current), [current]);
-  const parents = useMemo(() => getParents(current), [current]);
-
-  const slots = useMemo(() => getSlots(current, metamodel.getComponentMeta), [
-    metamodel,
-    current,
-  ]);
 
+  const [parents] = useAtom(ParentsAtom);
   function getAncestry(node: RaisinNode): RaisinNodeWithChildren[] {
-    return getAncestryUtil(state.current, node, parents);
+    return getAncestryUtil(current, node, parents);
   }
 
   const setSelectedId = (id: string) => setSelected(idToNode.get(id)!);
   return {
     initial: serializer(initial),
 
-    node: state.current,
+    node: current,
     serialized,
     html: serialized,
     setHtml,
-    parents,
     getAncestry,
-    slots,
 
-    selected: state.selected?.path
-      ? getNode(state.current, state.selected.path)
-      : undefined,
+    selected: selected?.path ? getNode(current, selected.path) : undefined,
     setSelected,
 
     getId,
@@ -245,8 +232,6 @@ export function useCore(
     removeNode,
     duplicateNode,
     insert: insertNode,
-    moveDown,
-    moveUp,
     replaceNode,
     replacePath: replacePathInternal,
     setNode,

packages/react/src/hooks/useEditor.tsx

@@ -27,16 +27,14 @@ export function useEditor(initialHTML: string): Model {
   // Binds global event handlers
   useHotkeys();
 
-  // @ts-ignore
   return {
     ...core,
     ...useStyleEditor({
       node: core.node,
       setNode: core.setNode,
-      parents: core.parents,
       componentModel: metamodel,
     }),
     ...metamodel,
-    ...useCanvas({...core, ...metamodel}),
+    ...useCanvas({ ...core, ...metamodel }),
   };
 }

packages/react/src/hooks/useHotkeys.ts

@@ -2,10 +2,9 @@ import hotkeys from 'hotkeys-js';
 import { useUpdateAtom } from 'jotai/utils';
 import { useEffect } from 'react';
 import { DeleteSelectedAtom } from './useCore';
-import { RedoAtom, UndoAtom } from "./HistoryAtoms";
+import { RedoAtom, UndoAtom } from './HistoryAtoms';
 
 export function useHotkeys() {
-
   const undo = useUpdateAtom(UndoAtom);
   const redo = useUpdateAtom(RedoAtom);
   const deleteSelected = useUpdateAtom(DeleteSelectedAtom);

packages/react/src/hooks/useStyleEditor.ts

@@ -1,13 +1,21 @@
-import { useMemo, useState } from 'react';
+import {
+  htmlUtil,
+  RaisinDocumentNode,
+  RaisinNode,
+  RaisinStyleNode,
+} from '@raisins/core';
 import * as css from 'css-tree';
-import { RaisinDocumentNode, RaisinNode, RaisinNodeWithChildren, RaisinStyleNode, htmlUtil } from '@raisins/core';
+import { useMemo, useState } from 'react';
 import { StateUpdater } from '../util/NewState';
 import { ComponentModel } from './useComponentModel';
 
 const { IdentityVisitor, replace, visit } = htmlUtil;
 
-type Props = { node: RaisinNode; setNode: StateUpdater<RaisinNode>; parents: WeakMap<RaisinNode, RaisinNodeWithChildren>; componentModel: ComponentModel };
-
+type Props = {
+  node: RaisinNode;
+  setNode: StateUpdater<RaisinNode>;
+  componentModel: ComponentModel;
+};
 
 // TODO: Color functions: https://github.com/scttcper/tinycolor
 export function useStyleEditor(props: Props) {
@@ -16,7 +24,7 @@ export function useStyleEditor(props: Props) {
     const nodes: RaisinStyleNode[] = [];
     visit(props.node, {
       ...IdentityVisitor,
-      onStyle: n => {
+      onStyle: (n) => {
         nodes.push(n);
         return n;
       },
@@ -25,18 +33,24 @@ export function useStyleEditor(props: Props) {
   }, [props.node]);
 
   // TOOD: This is volatile to Undo / Redo. It should reset based on Undo/Redo, but instead is cached
-  const [selectedSheet, setSelectedsheet] = useState<RaisinStyleNode | undefined>(undefined);
+  const [selectedSheet, setSelectedsheet] = useState<
+    RaisinStyleNode | undefined
+  >(undefined);
 
-  const updateSelectedSheet: StateUpdater<css.CssNodePlain> = next => {
+  const updateSelectedSheet: StateUpdater<css.CssNodePlain> = (next) => {
     props.setNode(
       // @ts-ignore
       (prev: RaisinDocumentNode) => {
-        const nextVal = typeof next === 'function' ? next(selectedSheet!.contents!) : next;
-        const newSheet: RaisinStyleNode = { ...selectedSheet!, contents: nextVal };
+        const nextVal =
+          typeof next === 'function' ? next(selectedSheet!.contents!) : next;
+        const newSheet: RaisinStyleNode = {
+          ...selectedSheet!,
+          contents: nextVal,
+        };
         setSelectedsheet(newSheet);
         return replace(prev, selectedSheet!, newSheet);
         // return prev;
-      },
+      }
     );
   };
   return {

packages/react/src/model/EditorModel.tsx

@@ -16,7 +16,6 @@ export type CoreModel = {
 
   setNode: StateUpdater<RaisinNode>;
 
-  parents: WeakMap<RaisinNode, RaisinNodeWithChildren>;
   getAncestry(node: RaisinNode): RaisinNodeWithChildren[];
 
   /*
@@ -37,8 +36,6 @@ export type CoreModel = {
   duplicateNode(node: RaisinNode): void;
   removeNode(node: RaisinNode): void;
   insert(node: RaisinNode, parent: RaisinNode, idx: number): void;
-  moveUp(node: RaisinNode): void;
-  moveDown(node: RaisinNode): void;
   replaceNode(prev: RaisinNode, next: RaisinNode): void;
   replacePath(prev: NodePath, next: RaisinNode): void;
 };

packages/react/src/views/Layers.tsx

@@ -119,8 +119,6 @@ export const Layers: FC<Model> = (model) => {
           <Toolbar>
             <button onClick={() => model.duplicateNode(element)}>dupe</button>
             <button onClick={() => model.removeNode(element)}>del</button>
-            <button onClick={() => model.moveUp(element)}>↑</button>
-            <button onClick={() => model.moveDown(element)}>↓</button>
           </Toolbar>
         </TitleBar>
       );