crazy stuff

front/js/main.js

@@ -1,54 +1,64 @@
-import {axiosInstance} from "./bootstrap";
-import "../sass/app.scss";
-import Account from "./svelte/Account.svelte";
-import Channel from "./svelte/Channel.svelte";
-import Mustache from "mustache";
-import 'htmx.org';
+import { axiosInstance } from "./bootstrap";
+import { mount, setContext, unmount } from "svelte";
 
-Mustache.escape = function (value) {
-    return value;
-};
+// import "../sass/app.scss";
+import "../css/app.css";
+import Register from "./svelte/account/Register.svelte";
+import Login from "./svelte/account/Login.svelte";
+import Verify from "./svelte/account/Verify.svelte";
+import Profile from "./svelte/account/Profile.svelte";
+import SetupIndex from "./svelte/setup/Index.svelte";
+import Members from "./svelte/members/Members.svelte";
+import RecordNotFound from "./svelte/records/NotFound.svelte";
+import RecordEdit from "./svelte/records/Edit.svelte";
+import ContentIndex from "./svelte/content/Index.svelte";
+import HomeEntry from "./entry/HomeEntry/HomeEntry.svelte";
+import BuildReport from "./svelte/build/Report.svelte";
 
-
-// Define all components
 const entryComponents = {
-    account: Account,
-    channel: Channel,
+  members: Members,
+  recordEdit: RecordEdit,
+  recordNotFound: RecordNotFound,
+  contentIndex: ContentIndex,
+  homeIndex: HomeEntry,
+  buildReport: BuildReport,
+  register: Register,
+  login: Login,
+  verify: Verify,
+  profile: Profile,
+  setup: SetupIndex,
 };
 
 let loadedComponents = [];
 
 let loadSvelte = function () {
-    loadedComponents.map((comp) => comp.$destroy());
-    loadedComponents = [];
+  loadedComponents.map((comp) => unmount(comp));
+  loadedComponents = [];
 
-    const elements = document.body.querySelectorAll(".lucent-component");
-    if (elements.length === 0) {
-        return;
+  const elements = document.body.querySelectorAll(".lucent-component");
+  if (elements.length === 0) {
+    return;
+  }
+  const loadElement = function (element) {
+    const jsonData = document.getElementById("json-data").innerHTML;
+
+    const props = JSON.parse(jsonData);
+    const [__, view] = Object.entries(entryComponents).find(
+      ([key, _]) => props.view === key,
+    );
+
+    if (!view) {
+      return [];
     }
-    const loadElement = function (element) {
-        const componentId = element.attributes["data-layout"].value;
-        const [_, component] = Object.entries(entryComponents).find(
-            ([key, _]) => componentId === key
-        );
-        if (!component) {
-            return [];
-        }
+    // props.axios = axiosInstance;
 
-        const jsonData = document.getElementById(
-            "json-" + componentId
-        ).innerHTML;
-        const props = JSON.parse(jsonData);
-        props.axios = axiosInstance;
-        const compOptions = {
-            target: element,
-            props: props,
-        };
-
-        loadedComponents = [...loadedComponents, new component(compOptions)];
+    const compOptions = {
+      target: element,
+      props: props,
     };
-    Array.from(elements).map(loadElement);
+    loadedComponents = [...loadedComponents, mount(view, compOptions)];
+  };
+  Array.from(elements).map(loadElement);
 };
 
-// document.addEventListener("turbo:load", loadSvelte);
 document.addEventListener("DOMContentLoaded", loadSvelte);