@tailor-cms/tce-preview-runtime 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tailor-cms/tce-preview-runtime
 
+## 0.5.2
+
+### Patch Changes
+
+- Remove first boot delay, cleanup.
+
 ## 0.5.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.5.1",
+  "version": "0.5.2",
+  "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.1",
     "@mdi/font": "7.4.47",

package/src/App.vue

@@ -14,13 +14,13 @@ const appUrl = new URL(window.location.href);
 const apiPrefix = '/tce-server';
 const api = ky.create({ prefixUrl: apiPrefix });
 const wsProtocol = appUrl.protocol === 'http:' ? 'ws:' : 'wss:';
-const ws = new WebSocket(`${wsProtocol}//${appUrl.host}${apiPrefix}`);
 
 const element = ref<ContentElement>();
 const userState = ref({});
 
 onMounted(async () => {
   await getElement();
+  const ws = new WebSocket(`${wsProtocol}//${appUrl.host}${apiPrefix}`);
   ws.addEventListener('message', (message) => {
     const event = JSON.parse(message.data);
     const elementUid = element.value?.uid;

package/src/components/AppBar.vue

@@ -1,11 +1,3 @@
-<script setup lang="ts">
-import logoUrl from '../assets/logo.png';
-import { useGlobalState } from '../state';
-import { version } from './../../package.json';
-
-const { showEdit, showDisplay, showBothComponents } = useGlobalState();
-</script>
-
 <template>
   <VAppBar color="blue-grey-darken-4" elevation="6">
     <template #prepend>
@@ -47,3 +39,11 @@ const { showEdit, showDisplay, showBothComponents } = useGlobalState();
     </VBtn>
   </VAppBar>
 </template>
+
+<script setup lang="ts">
+import logoUrl from '../assets/logo.png';
+import { useGlobalState } from '../state';
+import { version } from './../../package.json';
+
+const { showEdit, showDisplay, showBothComponents } = useGlobalState();
+</script>

package/src/components/MainLayout.vue

@@ -1,3 +1,19 @@
+<template>
+  <main :class="{ 'dark-theme': isDark }">
+    <SplashLoader :is-visible="!isLoaded" />
+    <PreviewPanel id="panelTop" :is-loaded="isLoaded" />
+    <BottomPanel
+      id="panelBottom"
+      :element="props.element"
+      :is-loaded="isLoaded"
+      :user-state="props.userState"
+      class="preview-panel-bottom"
+      @reset-element="$emit('resetElement')"
+      @reset-state="$emit('resetState')"
+    />
+  </main>
+</template>
+
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import Split from 'split.js';
@@ -13,53 +29,16 @@ const props = defineProps<{ element: any; userState: any }>();
 const { isDark } = useGlobalState();
 const isLoaded = ref(false);
 
-const runtimeId = import.meta.env.VITE_RUNTIME_ID;
-const bootRegistry = JSON.parse(
-  localStorage.getItem('element-kit-boot') || '{}',
-);
-const isFirstBoot = !bootRegistry[runtimeId];
-if (isFirstBoot) {
-  localStorage.setItem(
-    'element-kit-boot',
-    JSON.stringify({
-      ...bootRegistry,
-      [runtimeId]: true,
-    }),
-  );
-}
-
 onMounted(() => {
   // Client/server vertical split
   Split([`#panelTop`, `#panelBottom`], {
     direction: 'vertical',
     sizes: [70, 30],
   });
-  setTimeout(
-    () => {
-      isLoaded.value = true;
-      if (isFirstBoot) document.location.reload();
-    },
-    isFirstBoot ? 25000 : 5000,
-  );
+  setTimeout(() => { isLoaded.value = true; }, 5000);
 });
 </script>
 
-<template>
-  <main :class="{ 'dark-theme': isDark }">
-    <SplashLoader :is-first-boot="isFirstBoot" :is-visible="!isLoaded" />
-    <PreviewPanel id="panelTop" :is-loaded="isLoaded" />
-    <BottomPanel
-      id="panelBottom"
-      :element="props.element"
-      :is-loaded="isLoaded"
-      :user-state="props.userState"
-      class="preview-panel-bottom"
-      @reset-element="$emit('resetElement')"
-      @reset-state="$emit('resetState')"
-    />
-  </main>
-</template>
-
 <style>
 main {
   height: calc(100vh - var(--nav-height));

package/src/components/SplashLoader.vue

@@ -7,11 +7,6 @@
         </div>
         <div class="splash-loader__text text-body-1">
           <div>Booting Content Element Kit....</div>
-          <v-progress-linear
-            v-if="isFirstBoot"
-            :model-value="progress"
-            class="my-3"
-          />
           <div class="font-weight-bold">Beta preview v{{ version }}</div>
         </div>
       </div>
@@ -19,57 +14,30 @@
   </transition>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
 import logoUrl from '../assets/logo.png';
 import { version } from './../../package.json';
 
-export default {
-  props: {
-    isVisible: {
-      type: Boolean,
-      required: true,
-    },
-    isFirstBoot: {
-      type: Boolean,
-      required: true,
-    },
-    logo: {
-      type: String,
-      default: logoUrl,
-    },
-    color: {
-      type: String,
-      default: '#00bfa5',
-    },
-    backgroundColor: {
-      type: String,
-      default: '#fff',
-    },
-  },
-  data: () => ({
-    interval: 0,
-    progress: 0,
-  }),
-  computed: {
-    version: () => version,
-  },
-  mounted() {
-    this.setColor();
-    if (!this.isFirstBoot) return;
-    this.interval = setInterval(() => {
-      this.progress += 1;
-      if (this.progress === 100) clearInterval(this.interval);
-    }, 200);
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    setColor() {
-      document.documentElement.style.setProperty('--splash-color', this.color);
-    },
-  },
-};
+interface Props {
+  isVisible: boolean;
+  logo?: string;
+  color?: string;
+  backgroundColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  logo: logoUrl,
+  color: '#00bfa5',
+  backgroundColor: '#fff',
+});
+
+onMounted(() => {
+  const color = props.color || '#00bfa5';
+  document.documentElement.style.setProperty('--splash-color', color);
+});
 </script>
 
 <style lang="scss" scoped>