import the App

Author: mallowigi

src/App.svelte

@@ -0,0 +1,51 @@
+<script>
+  import {onMount} from 'svelte';
+  import yaml from 'js-yaml';
+  // import * as api from './api';
+  // import {app} from '../src2/$app';
+  // import Panel from '~src/components/Panel.svelte';
+  import Loading from '~components/Loading.svelte';
+
+  onMount(async _ => {
+    console.log('did');
+  //   $app.loading = true;
+  //   // Just waiting
+  //   await new Promise(resolve => setTimeout(resolve, 1000));
+  //   // Now fetching
+  //   const themesYml = await api.get('themes.yml');
+  //   const allThemes = yaml.load(themesYml);
+  //   const themes = [
+  //     ...allThemes.material,
+  //     ...allThemes.other,
+  //   ];
+  //
+  //   // Load themes
+  //   $app.loadThemes(themes);
+  //   // Get settings from local storage
+  //   await $app.fetchSettings();
+  //   // Add defaults
+  //   $app.loadDefaults();
+  //
+  //   $app.loading = false;
+  });
+</script>
+
+<style>
+  .main {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+</style>
+
+
+<main class='main'>
+  <Loading></Loading>
+  <!--    {#if !$app.loading}-->
+  <!--        <Panel></Panel>-->
+  <!--    {/if}-->
+</main>

src/popup.svelte

@@ -1,41 +1,17 @@
 <script lang="ts">
-  export let count = 0;
-  let action: string = null;
-  function increment() {
-    count += 1;
-    action = "increment";
-  }
-  function decrement() {
-    count -= 1;
-    action = "decrement";
-  }
+import App from '~App.svelte';
 </script>
 
-<style>
-  .container {
-    min-width: 470px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 47px;
-  }
-  .action {
-    color: #470;
-    font-weight: bold;
-  }
-  .text-center {
-    text-align: center;
+<style lang='scss'>
+  :global {
+    body {
+      margin: 0;
+      padding: 0;
+      min-width: 1024px;
+      min-height: 800px;
+      background: var(--bg, #263238);
+    }
   }
 </style>
 
-<div>
-  <h2 class="text-center">
-    Welcome to your <a href="https://www.plasmo.com" target="_blank">Plasmo</a> Extension!
-  </h2>
-  <div class="container">
-    <button on:click={decrement}>-</button>
-    <p>Current count: <b>{count}</b></p>
-    <button on:click={increment}>+</button>
-  </div>
-  {#if action}<p class="action text-center">{action}</p>{/if}
-</div>
+<App/>

src2/App.svelte

@@ -1,6 +1,6 @@
-const sveltePreprocess = require('svelte-preprocess');
+import sveltePreprocess from 'svelte-preprocess';
 
-module.exports = {
+export default {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
   preprocess: sveltePreprocess(),

svelte.config.js svelte.config.mjs

@@ -11,9 +11,7 @@
   ],
   "compilerOptions": {
     "paths": {
-      "~*": [
-        "./*"
-      ]
+      "~*": ["src/*"]
     },
     "baseUrl": "."
   }