Restructure application

client/package.json

@@ -10,11 +10,11 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/lab": "^5.0.0-alpha.146",
     "@mui/material": "^5.14.11",
-    "@uidotdev/usehooks": "^2.3.1",
     "css-element-queries": "^1.2.3",
     "downloadjs": "^1.4.7",
     "file-select-dialog": "^1.5.4",
     "internal-renderers": "file:../internal-renderers",
+    "js-yaml": "^4.1.0",
     "json-beautify": "^1.1.1",
     "json-rpc-2.0": "^1.6.0",
     "lodash": "^4.17.21",
@@ -71,6 +71,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/downloadjs": "^1.4.4",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.199",
     "@types/md5": "^2.3.3",
     "@types/memoizee": "^0.4.9",

client/src/components/generic/Property.tsx

@@ -6,7 +6,7 @@ import { truncate } from "lodash";
 import { ReactNode } from "react";
 import { Flex } from "./Flex";
 import { Space } from "./Space";
-import YAML from "yaml";
+import YAML from "js-yaml";
 
 type Props = {
   label?: ReactNode;
@@ -24,7 +24,7 @@ function stringify(obj: any) {
     default:
       return (
         <code>
-          {truncate(YAML.stringify(obj).replace("\n", ", "), {
+          {truncate(YAML.dump(obj).replace("\n", ", "), {
             length: 30,
           })}
         </code>

client/src/components/inspector/SelectionMenu.tsx

@@ -8,10 +8,7 @@ import {
   MenuList,
   Typography,
 } from "@mui/material";
-import {
-  getLayerHandler,
-  SelectionInfoProvider,
-} from "components/layer-editor/layers/LayerSource";
+import { getLayerHandler, SelectionInfoProvider } from "layers/Layer";
 import { SelectEvent as RendererSelectEvent } from "components/renderer/Renderer";
 import { chain, Dictionary, entries, merge } from "lodash";
 import { useCache } from "pages/TreePage";

client/src/components/inspector/TraceRenderer.tsx

@@ -17,7 +17,7 @@ import {
 import { Renderer, RendererEvent } from "renderer";
 import { Placeholder } from "./Placeholder";
 import { SelectionMenu } from "./SelectionMenu";
-import { RenderLayer } from "components/layer-editor/layers/LayerSource";
+import { RenderLayer } from "layers/Layer";
 import { RendererProps, SelectEvent } from "components/renderer/Renderer";
 import { useLoading } from "slices/loading";
 import { useRenderers } from "slices/renderers";

client/src/components/layer-editor/LayerEditor.tsx

@@ -25,7 +25,7 @@ import {
   useState,
 } from "react";
 import { Layer } from "slices/layers";
-import { inferLayerName, layerHandlers } from "./layers/LayerSource";
+import { inferLayerName, layerHandlers } from "../../layers/Layer";
 
 type LayerEditorProps = {
   value: Layer;

client/src/components/renderer/parser/parse.ts

@@ -1,4 +1,4 @@
-import { Dictionary as Dict, flatMap, range } from "lodash";
+import { Dictionary as Dict, range } from "lodash";
 import {
   ComponentDefinition,
   ComponentDefinitionMap,
@@ -37,7 +37,7 @@ export function parse<T extends IntrinsicComponentMap>(
   return definition.flatMap((c) => {
     const { $ } = c;
     const c2 = parseFor(c);
-    return flatMap(c2, (component) => {
+    return c2.flatMap((component) => {
       const scoped = applyScope(
         normalize(context),
         normalize(component) as any

client/src/components/renderer/parser/parseTrace.ts

@@ -8,7 +8,7 @@ import {
   ParseTraceWorkerReturnType,
 } from "./parseTrace.worker";
 import parseGridWorkerUrl from "./parseTrace.worker.ts?worker&url";
-import { stringify } from "yaml";
+import { dump } from "js-yaml";
 
 export class ParseTraceWorker extends Worker {
   constructor() {
@@ -37,7 +37,7 @@ export function useTraceParser(params: ParseTraceWorkerParameters) {
             );
             return output;
           } catch (e) {
-            push("Error parsing", `${stringify(e)}`);
+            push("Error parsing", `${dump(e)}`);
           }
         }
       }),

client/src/components/renderer/parser/parseTrace.worker.ts

@@ -1,4 +1,4 @@
-import { chain, findLast, map, mapValues, negate } from "lodash";
+import { chain, findLast, mapValues, negate } from "lodash";
 import {
   CompiledComponent,
   EventContext,
@@ -8,8 +8,8 @@ import {
 } from "protocol";
 import { ComponentEntry } from "renderer";
 import { mapProperties } from "./mapProperties";
-import { parse as parseComponents } from "./parse";
 import { normalizeConstant } from "./normalize";
+import { parse as parseComponents } from "./parse";
 
 const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
   x === undefined || x === null;
@@ -35,7 +35,7 @@ function parse({
     event: TraceEvent,
     ctx?: EventContext
   ): CompiledComponent<string, Record<string, any>>[] =>
-    map(parsed, (p) =>
+    parsed.map((p) =>
       mapProperties<
         ParsedComponent<string, any>,
         CompiledComponent<string, Record<string, any>>
@@ -83,8 +83,8 @@ function parse({
     .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(i))))
     .value();
   return {
-    stepsPersistent: map(steps, "persistent"),
-    stepsTransient: map(steps, "transient"),
+    stepsPersistent: steps.map((c) => c.persistent),
+    stepsTransient: steps.map((c) => c.transient),
   };
 }
 

client/src/components/layer-editor/layers/LayerSource.tsx → client/src/layers/Layer.tsx

@@ -5,17 +5,17 @@ import { Dictionary } from "lodash";
 import { TraceEvent } from "protocol";
 import { createElement, FC, ReactNode } from "react";
 import { Layer } from "slices/layers";
-import { mapLayerSource } from "./mapLayerSource";
-import { queryLayerSource } from "./queryLayerSource";
-import { traceLayerSource } from "./traceLayerSource";
+import { controller as mapController } from "./map";
+import { controller as queryController } from "./query";
+import { controller as traceController } from "./trace";
 
 export type SelectionInfoProvider = FC<{
   layer?: string;
   event?: SelectEvent;
   children?: (menu: SelectionMenuContent) => ReactNode;
 }>;
 
-export type LayerSource<K extends string, T> = {
+export type LayerController<K extends string, T> = {
   key: K;
   editor: FC<EditorSetterProps<Layer<T>>>;
   renderer: FC<{ layer?: Layer<T> }>;
@@ -52,8 +52,8 @@ export function getLayerHandler(layer?: Layer) {
   return layerHandlers[layer?.source?.type ?? ""];
 }
 
-export const layerHandlers: Dictionary<LayerSource<string, any>> = {
-  map: mapLayerSource,
-  trace: traceLayerSource,
-  query: queryLayerSource,
+export const layerHandlers: Dictionary<LayerController<string, any>> = {
+  map: mapController,
+  trace: traceController,
+  query: queryController,
 };

client/src/layers/index.tsx

@@ -0,0 +1 @@
+export * from "./Layer";

client/src/components/layer-editor/layers/mapLayerSource.tsx → client/src/layers/map/index.tsx

@@ -1,17 +1,17 @@
 import { MapPicker } from "components/app-bar/Input";
-import { NodeList } from "components/render/renderer/generic/NodeList";
+import { Option } from "components/layer-editor/Option";
 import { getParser } from "components/renderer";
+import { NodeList } from "components/renderer/NodeList";
 import { ParsedMap } from "components/renderer/map-parser/Parser";
 import { useEffectWhen } from "hooks/useEffectWhen";
 import { useMapContent } from "hooks/useMapContent";
 import { useParsedMap } from "hooks/useParsedMap";
+import { LayerController, inferLayerName } from "layers";
 import { isUndefined, round, set, startCase } from "lodash";
 import { withProduce } from "produce";
 import { useMemo } from "react";
 import { Map } from "slices/UIState";
 import { Layer, useLayer } from "slices/layers";
-import { LayerSource, inferLayerName } from "./LayerSource";
-import { Option } from "./Option";
 
 export type MapLayerData = {
   map?: Map;
@@ -20,7 +20,7 @@ export type MapLayerData = {
 
 export type MapLayer = Layer<MapLayerData>;
 
-export const mapLayerSource: LayerSource<"map", MapLayerData> = {
+export const controller = {
   key: "map",
   inferName: (layer) =>
     layer?.source?.map
@@ -75,8 +75,8 @@ export const mapLayerSource: LayerSource<"map", MapLayerData> = {
       }
       return {};
     }, [parsedMap, event]);
-    const menu = useMemo(() => {
-      return {
+    const menu = useMemo(
+      () => ({
         ...(layer &&
           point &&
           !isUndefined(node) && {
@@ -90,8 +90,9 @@ export const mapLayerSource: LayerSource<"map", MapLayerData> = {
               },
             },
           }),
-      };
-    }, [point, node, layer, layers, setLayer]);
+      }),
+      [point, node, layer, layers, setLayer]
+    );
     return <>{children?.(menu)}</>;
   },
-};
+} satisfies LayerController<"map", MapLayerData>;