lucent-laravel/front/js/main.js

import { axiosInstance } from "./bootstrap";
import { mount, setContext, unmount } from "svelte";

// 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 SchemaEntry from "./entry/SchemaEntry/SchemaEntry.svelte";
import BuildReport from "./svelte/build/Report.svelte";

const entryComponents = {
  members: Members,
  recordEdit: RecordEdit,
  recordNotFound: RecordNotFound,
  contentIndex: ContentIndex,
  homeIndex: HomeEntry,
  buildReport: BuildReport,
  register: Register,
  login: Login,
  verify: Verify,
  profile: Profile,
  setup: SetupIndex,
  schemas: SchemaEntry,
};

let loadedComponents = [];

let loadSvelte = function () {
  loadedComponents.map((comp) => unmount(comp));
  loadedComponents = [];

  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 [];
    }
    // props.axios = axiosInstance;

    const compOptions = {
      target: element,
      props: props,
    };
    loadedComponents = [...loadedComponents, mount(view, compOptions)];
  };
  Array.from(elements).map(loadElement);
};

document.addEventListener("DOMContentLoaded", loadSvelte);