budibase/packages/client/src/components/ClientApp.svelte

<script>
  import { writable } from "svelte/store"
  import { setContext, onMount } from "svelte"
  import Component from "./Component.svelte"
  import NotificationDisplay from "./NotificationDisplay.svelte"
  import ConfirmationDisplay from "./ConfirmationDisplay.svelte"
  import Provider from "./Provider.svelte"
  import SDK from "../sdk"
  import {
    createContextStore,
    initialise,
    screenStore,
    authStore,
    routeStore,
    builderStore,
  } from "../store"
  import { TableNames, ActionTypes } from "../constants"
  import SettingsBar from "./preview/SettingsBar.svelte"
  import SelectionIndicator from "./preview/SelectionIndicator.svelte"
  import HoverIndicator from "./preview/HoverIndicator.svelte"

  // Provide contexts
  setContext("sdk", SDK)
  setContext("component", writable({}))
  setContext("context", createContextStore())

  let dataLoaded = false

  // Load app config
  onMount(async () => {
    await initialise()
    await authStore.actions.fetchUser()
    dataLoaded = true
    if ($builderStore.inBuilder) {
      builderStore.actions.notifyLoaded()
    }
  })

  // Register this as a refreshable datasource so that user changes cause
  // the user object to be refreshed
  $: actions = [
    {
      type: ActionTypes.RefreshDatasource,
      callback: () => authStore.actions.fetchUser(),
      metadata: { dataSource: { type: "table", tableId: TableNames.USERS } },
    },
  ]

  // Redirect to home layout if no matching route
  $: {
    if (dataLoaded && $routeStore.routerLoaded && !$routeStore.activeRoute) {
      if ($authStore) {
        routeStore.actions.navigate("/")
      } else {
        const returnUrl = `${window.location.pathname}${window.location.hash}`
        const encodedUrl = encodeURIComponent(returnUrl)
        window.location = `/builder/auth/login?returnUrl=${encodedUrl}`
      }
    }
  }

  $: themeClass = $builderStore.theme || "spectrum--light"
</script>

{#if dataLoaded && $screenStore.activeLayout}
  <div
    id="spectrum-root"
    lang="en"
    dir="ltr"
    class="spectrum spectrum--medium {themeClass}"
  >
    <Provider key="user" data={$authStore} {actions}>
      <div id="app-root">
        {#key $screenStore.activeLayout._id}
          <Component instance={$screenStore.activeLayout.props} />
        {/key}
      </div>
      <NotificationDisplay />
      <ConfirmationDisplay />
      <!-- Key block needs to be outside the if statement or it breaks -->
      {#key $builderStore.selectedComponentId}
        {#if $builderStore.inBuilder}
          <SettingsBar />
        {/if}
      {/key}
      <!--
        We don't want to key these by componentID as they control their own
        re-mounting to avoid flashes.
      -->
      {#if $builderStore.inBuilder}
        <SelectionIndicator />
        <HoverIndicator />
      {/if}
    </Provider>
  </div>
{/if}

<style>
  #spectrum-root,
  #app-root {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
  #app-root {
    position: relative;
    border: 1px solid var(--spectrum-global-color-gray-300);
  }

  /* Custom scrollbars */
  :global(::-webkit-scrollbar) {
    width: 8px;
    height: 8px;
  }
  :global(::-webkit-scrollbar-track) {
    background: var(--spectrum-alias-background-color-default);
  }
  :global(::-webkit-scrollbar-thumb) {
    background-color: var(--spectrum-global-color-gray-400);
    border-radius: 4px;
  }
  :global(::-webkit-scrollbar-corner) {
    background: var(--spectrum-alias-background-color-default);
  }
  :global(*) {
    scrollbar-width: thin;
    scrollbar-color: var(--spectrum-global-color-gray-400)
      var(--spectrum-alias-background-color-default);
  }
</style>