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

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @tailor-cms/tce-preview-runtime
+
+## 0.5.2
+
+### Patch Changes
+
+- Remove first boot delay, cleanup.
+
+## 0.5.1
+
+### Patch Changes
+
+- Updated dependencies.

package/package.json

@@ -1,26 +1,28 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.5.0",
+  "version": "0.5.2",
+  "type": "module",
   "dependencies": {
     "@lukeed/uuid": "^2.0.1",
-    "@mdi/font": "7.2.96",
-    "@vitejs/plugin-vue": "4.3.4",
-    "@vueuse/core": "10.4.1",
-    "date-fns": "^3.2.0",
-    "ky": "1.0.1",
+    "@mdi/font": "7.4.47",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vueuse/core": "12.5.0",
+    "date-fns": "^4.1.0",
+    "ky": "1.7.4",
     "lodash": "^4.17.21",
-    "sass": "1.68.0",
+    "sass": "1.84.0",
     "split.js": "1.6.5",
     "stringify-object": "^5.0.0",
-    "typescript": "5.2.2",
-    "universal-cookie": "^6.1.3",
-    "vite": "4.4.9",
-    "vite-plugin-vuetify": "1.0.2",
-    "vue": "3.3.4",
-    "vue-tsc": "1.8.13",
-    "vuetify": "3.4.0"
+    "typescript": "5.7.3",
+    "universal-cookie": "^7.2.2",
+    "vite": "6.1.0",
+    "vite-plugin-vuetify": "2.1.0",
+    "vue": "3.5.13",
+    "vue-tsc": "2.2.0",
+    "vuetify": "3.7.11"
   },
   "devDependencies": {
+    "@types/stringify-object": "^4.0.5",
     "@tailor-cms/eslint-config": "0.0.2"
   },
   "publishConfig": {

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;
@@ -70,7 +70,7 @@ async function resetState() {
 </script>
 
 <template>
-  <v-app>
+  <VApp>
     <AppBar />
     <MainLayout
       :element="element"
@@ -79,7 +79,7 @@ async function resetState() {
       @reset-element="resetElement"
       @reset-state="resetState"
     />
-  </v-app>
+  </VApp>
 </template>
 
 <style>

package/src/components/AppBar.vue

@@ -1,49 +1,49 @@
-<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>
-  <v-app-bar color="blue-grey-darken-4" elevation="6">
+  <VAppBar color="blue-grey-darken-4" elevation="6">
     <template #prepend>
-      <v-app-bar-nav-icon class="ml-2">
+      <VAppBarNavIcon class="ml-2">
         <img :src="logoUrl" alt="Tailor logo" width="36" />
-      </v-app-bar-nav-icon>
+      </VAppBarNavIcon>
     </template>
-    <v-app-bar-title class="ml-2">
+    <VAppBarTitle class="ml-2">
       Content Element Kit
-      <v-chip
+      <VChip
         class="ml-3 mb-1 text-body-2"
         color="#23F48B"
         density="compact"
         variant="tonal"
       >
         {{ version }}
-      </v-chip>
-    </v-app-bar-title>
-    <v-spacer />
-    <v-btn-toggle class="mr-4" density="compact">
-      <v-btn @click="showEdit">
+      </VChip>
+    </VAppBarTitle>
+    <VSpacer />
+    <VBtnToggle class="mr-4" density="compact">
+      <VBtn @click="showEdit">
         <span>Authoring</span>
-        <v-icon end>mdi-pencil</v-icon>
-      </v-btn>
-      <v-btn @click="showDisplay">
+        <VIcon end>mdi-pencil</VIcon>
+      </VBtn>
+      <VBtn @click="showDisplay">
         <span>End-user</span>
-        <v-icon end>mdi-fullscreen</v-icon>
-      </v-btn>
-      <v-btn @click="showBothComponents">
+        <VIcon end>mdi-fullscreen</VIcon>
+      </VBtn>
+      <VBtn @click="showBothComponents">
         <span>Both</span>
-        <v-icon end>mdi-math-norm-box</v-icon>
-      </v-btn>
-    </v-btn-toggle>
-    <v-btn href="https://github.com/tailor-cms/tce-template" icon>
-      <v-icon>mdi-github</v-icon>
-    </v-btn>
-    <v-btn href="https://tailor-cms.github.io/xt/" icon>
-      <v-icon>mdi-book-outline</v-icon>
-    </v-btn>
-  </v-app-bar>
+        <VIcon end>mdi-math-norm-box</VIcon>
+      </VBtn>
+    </VBtnToggle>
+    <VBtn href="https://github.com/tailor-cms/tce-template" icon>
+      <VIcon>mdi-github</VIcon>
+    </VBtn>
+    <VBtn href="https://tailor-cms.github.io/xt/" icon>
+      <VIcon>mdi-book-outline</VIcon>
+    </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/BottomPanel.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-show="isLoaded">
-    <v-tabs v-model="state.selectedTab">
-      <v-tab :value="1">
+    <VTabs v-model="state.selectedTab">
+      <VTab :value="1">
         <VChip append-icon="mdi-pen" class="mr-2" color="indigo" size="small">
           {{ state.elementHistory.length }}
         </VChip>
         Authoring history
-      </v-tab>
-      <v-tab :value="2">
+      </VTab>
+      <VTab :value="2">
         <VChip
           append-icon="mdi-account"
           class="mr-2"
@@ -17,14 +17,14 @@
           {{ state.userInteractions.length }}
         </VChip>
         End-User state history
-      </v-tab>
-    </v-tabs>
+      </VTab>
+    </VTabs>
     <div class="pa-6">
-      <v-window v-model="state.selectedTab">
-        <v-window-item :value="1">
+      <VWindow v-model="state.selectedTab">
+        <VWindowItem :value="1">
           <VBtn
             class="mb-4"
-            color="indigo-darken-4"
+            color="indigoDarken4"
             variant="tonal"
             @click="$emit('resetElement')"
           >
@@ -32,11 +32,11 @@
             Reset content element
           </VBtn>
           <MutationList :changes="state.elementHistory" />
-        </v-window-item>
-        <v-window-item :value="2">
+        </VWindowItem>
+        <VWindowItem :value="2">
           <VBtn
             class="mb-4"
-            color="indigo-darken-4"
+            color="indigoDarken4"
             variant="tonal"
             @click="$emit('resetState')"
           >
@@ -44,8 +44,8 @@
             Reset state context
           </VBtn>
           <MutationList :changes="state.userInteractions" />
-        </v-window-item>
-      </v-window>
+        </VWindowItem>
+      </VWindow>
     </div>
   </div>
 </template>

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/MutationList.vue

@@ -2,23 +2,23 @@
   <VDataIterator :items="changes" :items-per-page="50" expand-on-click>
     <template #default="{ items, isExpanded, toggleExpand }">
       <template v-for="(item, index) in items" :key="item.raw.id">
-        <v-card
+        <VCard
           :disabled="index === 0"
           :ripple="false"
           class="mb-1"
-          @click="toggleExpand(item)"
+          @click="toggleExpand(item as any)"
         >
-          <v-card-title class="d-flex align-center">
+          <VCardTitle class="d-flex align-center">
             <v-icon color="orange-darken-3" icon="mdi-update" size="18" start />
             <div class="text-body-1">{{ item.raw.title }}</div>
-          </v-card-title>
-          <v-card-text
-            v-show="isExpanded(item) || index === 0"
+          </VCardTitle>
+          <VCardText
+            v-show="isExpanded(item as any) || index === 0"
             class="text-indigo-darken-4 bg-blue-grey-lighten-5 py-2 ma-3"
           >
             <pre>{{ stringifyObject(item.raw.data, { indent: '  ' }) }}</pre>
-          </v-card-text>
-        </v-card>
+          </VCardText>
+        </VCard>
       </template>
     </template>
   </VDataIterator>

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>

package/vite.config.ts

@@ -33,10 +33,6 @@ export default defineConfig((): any => {
       },
     },
     logLevel: 'warn',
-    optimizeDeps: {
-      include: ['universal-cookie'],
-      entries: ['./src/main.js'],
-    },
     plugins: [vue(), vuetify({ autoImport: true })],
   };
 });