@tailor-cms/tce-preview-runtime 0.5.5-beta.6 → 1.1.0-beta.5

package/eslint.config.js

@@ -0,0 +1,19 @@
+import tailorConfig from '@tailor-cms/eslint-config';
+
+export default [
+  ...tailorConfig,
+  {
+    ignores: ['**/components.d.ts', '**/shims-vue.d.ts'],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+      },
+    },
+  },
+];

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.5.5-beta.6",
+  "description": "Preview content element client side runtime",
+  "author": "Studion <info@gostudion.com>",
+  "version": "1.1.0-beta.5",
   "type": "module",
   "dependencies": {
-    "@lukeed/uuid": "^2.0.1",
-    "@lukeed/csprng": "^1.0.2",
     "@mdi/font": "7.4.47",
-    "@vitejs/plugin-vue": "5.2.1",
-    "@vueuse/core": "12.5.0",
+    "@vitejs/plugin-vue": "5.2.4",
+    "@vueuse/core": "13.3.0",
     "date-fns": "^4.1.0",
-    "ky": "1.7.4",
-    "lodash": "^4.17.21",
-    "sass": "1.84.0",
+    "ky": "1.8.1",
+    "lodash-es": "^4.17.21",
+    "sass": "1.89.1",
     "split.js": "1.6.5",
     "stringify-object": "^5.0.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"
+    "typescript": "5.8.3",
+    "vite": "6.3.5",
+    "vite-plugin-vuetify": "2.1.1",
+    "vue": "3.5.16",
+    "vue-tsc": "2.2.10",
+    "vuetify": "3.8.7",
+    "@tailor-cms/cek-common": "1.1.0-beta.5"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "@types/stringify-object": "^4.0.5",
-    "@tailor-cms/eslint-config": "0.0.2"
+    "eslint": ">=9.28.0",
+    "@tailor-cms/eslint-config": "0.0.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview",
-    "lint": "eslint --ext .ts,.vue .",
+    "lint": "eslint .",
     "lint:fix": "pnpm lint --fix"
   }
 }

package/src/App.vue

@@ -1,79 +1,52 @@
 <script setup lang="ts">
+import {
+  getApiClient,
+  initWebSocket,
+  resolveElementId,
+} from '@tailor-cms/cek-common';
 import { onMounted, ref } from 'vue';
-import ky from 'ky';
-import { v4 as uuid } from '@lukeed/uuid/secure';
+import type { Element } from '@tailor-cms/cek-common';
 
 import AppBar from './components/AppBar.vue';
 import MainLayout from './components/MainLayout.vue';
 
-interface ContentElement {
-  id: number;
-  uid: string;
-}
 const { VITE_SERVER_RUNTIME_URL } = import.meta.env;
 const serverRuntimeUrl = new URL(VITE_SERVER_RUNTIME_URL);
-const api = ky.create({ prefixUrl: VITE_SERVER_RUNTIME_URL });
-const wsProtocol = serverRuntimeUrl.protocol === 'http:' ? 'ws:' : 'wss:';
+const api = getApiClient(VITE_SERVER_RUNTIME_URL);
 
-const element = ref<ContentElement>();
+const element = ref<Element>();
 const userState = ref({});
 
-onMounted(async () => {
-  const url = new URL(window.location.href);
-  const elementId = url.searchParams.get('id');
-  if (!elementId) {
-    url.searchParams.set('id', uuid());
-    window.location.href = url.toString();
-    return;
-  }
-  await getElement(elementId);
-  const wsUrl = `${wsProtocol}//${serverRuntimeUrl.host}?id=${elementId}`;
-  const ws = new WebSocket(wsUrl);
-  ws.addEventListener('message', (message) => {
-    const event = JSON.parse(message.data);
-    if (elementId && elementId !== event.entityId) return;
-    if (event.type === 'userState:update') {
-      userState.value = event.payload;
-    }
-    if (event.type === 'element:update') {
-      element.value = event.payload;
-    }
-    if (event.type === 'userContext:change') getElement(elementId);
-  });
-});
+const timeout = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
 
-function timeout(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-async function getElement(elementId: string): Promise<any> {
+async function load(id: string): Promise<any> {
   try {
-    const res = await api(`content-element/${elementId}`).json();
-    const { element: elementVal, userState: userStateVal } = res as any;
-    element.value = elementVal;
-    userState.value = userStateVal;
+    const res = await api.getElement(id);
+    element.value = res.element;
+    userState.value = res.userState;
   } catch (error) {
     console.log('Error on element get', error);
     await timeout(2000);
     console.log('Retrying element get...');
-    return getElement(elementId);
+    return load(id);
   }
 }
 
-async function resetElement() {
-  const id = element.value?.uid;
-  if (!id) return;
-  await resetState();
-  const path = `content-element/${id}/reset-element`;
-  return api.post(path);
+async function resetElement(id: string) {
+  await api.resetState(id);
+  return api.resetElement(id);
 }
 
-async function resetState() {
-  const id = element.value?.uid;
-  if (!id) return;
-  const path = `content-element/${id}/reset-state`;
-  return api.post(path);
-}
+onMounted(async () => {
+  const elementId = resolveElementId();
+  if (!elementId) return;
+  await load(elementId);
+  const wsBus = initWebSocket(serverRuntimeUrl, elementId);
+  wsBus.on('element:update', (v: Element) => (element.value = v));
+  wsBus.on('userState:update', (v: any) => (userState.value = v));
+  wsBus.on('userContext:change', (v: { index: number }) => load(elementId));
+});
 </script>
 
 <template>
@@ -83,8 +56,8 @@ async function resetState() {
       :element="element"
       :user-state="userState"
       class="mt-14"
-      @reset-element="resetElement"
-      @reset-state="resetState"
+      @reset-element="element && resetElement(element.uid)"
+      @reset-state="element && api.resetState(element.uid)"
     />
   </VApp>
 </template>

package/src/components/BottomPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="isLoaded">
+  <div>
     <VTabs v-model="state.selectedTab">
       <VTab :value="1">
         <VChip append-icon="mdi-pen" class="mr-2" color="indigo" size="small">
@@ -58,7 +58,6 @@ import MutationList from './MutationList.vue';
 
 defineEmits(['resetElement', 'resetState']);
 const props = defineProps<{
-  isLoaded: Boolean;
   element: any;
   userState: any;
 }>();
@@ -102,7 +101,7 @@ watch(
     });
     state.selectedTab = 1;
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
 watch(
@@ -115,6 +114,6 @@ watch(
     });
     state.selectedTab = 2;
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 </script>

package/src/components/MainLayout.vue

@@ -2,16 +2,11 @@
   <main :class="{ 'dark-theme': isDark }">
     <SplashLoader :is-visible="!isInitialized" />
     <template v-if="isInitialized">
-      <PreviewPanel
-        id="panelTop"
-        :element-id="element?.uid"
-        :is-loaded="true"
-      />
+      <PreviewPanel id="panelTop" :element-id="element.uid" />
       <BottomPanel
         id="panelBottom"
-        :element="props.element"
-        :is-loaded="true"
-        :user-state="props.userState"
+        :element="element"
+        :user-state="userState"
         class="preview-panel-bottom"
         @reset-element="$emit('resetElement')"
         @reset-state="$emit('resetState')"
@@ -33,19 +28,17 @@ defineEmits(['resetElement', 'resetState']);
 const props = defineProps<{ element: any; userState: any }>();
 
 const { isDark } = useGlobalState();
-
-const isLoaded = ref(false);
 const isMounted = ref(false);
 const isInitialized = computed(() => isMounted.value && props.element?.uid);
 
-watch(isInitialized, (val) => {
-  if (val) setupPreview();
-});
-
 onMounted(() => {
   isMounted.value = true;
 });
 
+watch(isInitialized, (val) => {
+  if (val) setupPreview();
+});
+
 const setupPreview = () => {
   setTimeout(() => {
     Split([`#panelTop`, `#panelBottom`], {
@@ -53,9 +46,6 @@ const setupPreview = () => {
       sizes: [70, 30],
     });
   }, 50);
-  setTimeout(() => {
-    isLoaded.value = true;
-  }, 2000);
 };
 </script>
 

package/src/components/PreviewPanel.vue

@@ -1,8 +1,8 @@
 <template>
-  <div v-show="isLoaded" class="d-flex flex-grow-1 preview-panel">
+  <div class="d-flex flex-grow-1 preview-panel">
     <div :id="PANELS.EDIT" class="d-flex flex-1-1-50">
       <iframe
-        :key="`author-${isLoaded ? new Date().getTime() : 0}`"
+        :key="`author-${new Date().getTime()}`"
         :src="`${VITE_EDIT_RUNTIME_URL}?id=${elementId}`"
         class="flex-1-1-100"
         frameBorder="0"
@@ -12,7 +12,7 @@
     </div>
     <div :id="PANELS.DISPLAY" class="d-flex flex-1-1-50">
       <iframe
-        :key="`display-${isLoaded ? new Date().getTime() : 0}`"
+        :key="`display-${new Date().getTime()}`"
         :src="`${VITE_DISPLAY_RUNTIME_URL}?id=${elementId}`"
         class="flex-1-1-100"
         frameBorder="0"
@@ -32,7 +32,7 @@ import { PANELS, useGlobalState } from '../state';
 const { VITE_DISPLAY_RUNTIME_URL, VITE_EDIT_RUNTIME_URL } = import.meta.env;
 const { previewPanelSplit } = useGlobalState();
 
-defineProps<{ isLoaded: Boolean, elementId: string }>();
+defineProps<{ elementId: string }>();
 
 const initPanels = () => {
   previewPanelSplit.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {

package/src/components/SplashLoader.vue

@@ -21,7 +21,7 @@ import logoUrl from '../assets/logo-new.svg';
 import { version } from './../../package.json';
 
 interface Props {
-  isVisible: boolean;
+  isVisible?: boolean;
   logo?: string;
   color?: string;
   backgroundColor?: string;

package/vite.config.ts

@@ -1,21 +1,18 @@
 import { defineConfig } from 'vite';
-import pick from 'lodash/pick';
+import { pick } from 'lodash-es';
 import vue from '@vitejs/plugin-vue';
 import vuetify from 'vite-plugin-vuetify';
 
-const env = process.env;
+const { env } = process;
 const config = pick(env, [
   'EDIT_RUNTIME_URL',
   'DISPLAY_RUNTIME_URL',
   'SERVER_RUNTIME_URL',
-  'PREVIEW_RUNTIME_URL',
   'PREVIEW_RUNTIME_PORT',
 ]);
 
 // Expose to Frontend by prefixing with VITE_
-Object.entries(config).forEach(
-  ([k, v]) => (process.env[`VITE_${k}`] = v as string),
-);
+Object.entries(config).forEach(([k, v]) => (process.env[`VITE_${k}`] = v));
 
 // https://vitejs.dev/config/
 export default defineConfig((): any => {

package/.eslintrc.cjs

@@ -1,13 +0,0 @@
-module.exports = {
-  root: true,
-  extends: '@tailor-cms/eslint-config',
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    ecmaVersion: 2022,
-    sourceType: 'module',
-    parser: '@typescript-eslint/parser',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    extraFileExtensions: ['vue'],
-  },
-  ignorePatterns: ['**/components.d.ts', '**/shims-vue.d.ts'],
-};