app.js in lookbook-0.4.7

- old
+ new
@@ -1,76 +1,60 @@
 import { install } from "@github/hotkey";
 import Alpine from "alpinejs";
-import Fern from "@ryangjchandler/fern";
-import AlpineTooltip from "@ryangjchandler/alpine-tooltip";
-import AlpineClipboard from "@ryangjchandler/alpine-clipboard";
-import Screen from "./utils/screen";
-import split from "./utils/split";
-import page from "./page";
-import workbench from "./workbench";
-import preview from "./workbench/preview";
-import inspector from "./workbench/inspector";
-import param from "./workbench/param";
-import nav from "./nav";
-import navNode from "./nav/node";
-import navLeaf from "./nav/leaf";
-import sizeObserver from "./utils/size_observer";
-import reloader from "./utils/reloader";
-import clipboard from "./utils/clipboard";
+import Persist from "@alpinejs/persist";
+import Morph from "@alpinejs/morph";
+import Tooltip from "@ryangjchandler/alpine-tooltip";
 
-window.Alpine = Alpine;
+import page from "./components/page";
+import inspector from "./components/inspector";
+import previewWindow from "./components/preview-window";
+import filter from "./components/filter";
+import param from "./components/param";
+import nav from "./components/nav";
+import navItem from "./components/nav-item";
+import navGroup from "./components/nav-group";
+import splitter from "./components/splitter";
+import copy from "./components/copy";
+import sizes from "./components/sizes";
 
+import initFilterStore from "./stores/filter";
+import initLayoutStore from "./stores/layout";
+import initNavStore from "./stores/nav";
+import initSidebarStore from "./stores/sidebar";
+import initInspectorStore from "./stores/inspector";
+
 // Plugins
 
-Alpine.plugin(Fern);
-Alpine.plugin(AlpineTooltip);
-Alpine.plugin(AlpineClipboard);
-Alpine.plugin(Screen);
+Alpine.plugin(Persist);
+Alpine.plugin(Morph);
+Alpine.plugin(Tooltip);
 
 // Stores
 
-Alpine.store("page", {
-  reflowing: false,
-  doc: window.document,
-});
+Alpine.store("filter", initFilterStore(Alpine));
+Alpine.store("layout", initLayoutStore(Alpine));
+Alpine.store("nav", initNavStore(Alpine));
+Alpine.store("sidebar", initSidebarStore(Alpine));
+Alpine.store("inspector", initInspectorStore(Alpine));
 
-Alpine.persistedStore("nav", {
-  width: 280,
-  filter: "",
-  open: {},
-});
+// Components
 
-Alpine.persistedStore("inspector", {
-  height: 200,
-  active: "source",
-});
-
-Alpine.persistedStore("preview", {
-  width: "100%",
-});
-
-// Components & utils
-
 Alpine.data("page", page);
-Alpine.data("nav", nav);
-Alpine.data("navNode", navNode);
-Alpine.data("navLeaf", navLeaf);
-Alpine.data("workbench", workbench);
-Alpine.data("preview", preview);
+Alpine.data("splitter", splitter);
+Alpine.data("previewWindow", previewWindow);
+Alpine.data("copy", copy);
 Alpine.data("inspector", inspector);
+Alpine.data("filter", filter);
 Alpine.data("param", param);
-Alpine.data("clipboard", clipboard);
-Alpine.data("sizeObserver", sizeObserver);
-Alpine.data("split", split);
+Alpine.data("sizes", sizes);
+Alpine.data("nav", nav);
+Alpine.data("navItem", navItem);
+Alpine.data("navGroup", navGroup);
 
 // Init
 
 for (const el of document.querySelectorAll("[data-hotkey]")) {
   install(el);
-}
-
-if (window.SOCKET_PATH) {
-  reloader(window.SOCKET_PATH).start();
 }
 
 window.Alpine = Alpine;
 Alpine.start();