@tailor-cms/tce-preview-runtime 0.5.5-beta.4 → 1.1.0-beta.1

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,38 +1,39 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.5.5-beta.4",
+  "description": "Preview content element client side runtime",
+  "author": "Studion <info@gostudion.com>",
+  "version": "1.1.0-beta.1",
   "type": "module",
   "dependencies": {
-    "@lukeed/uuid": "^2.0.1",
     "@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.1"
   },
   "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,74 +1,56 @@
 <script setup lang="ts">
+import {
+  getApiClient,
+  initWebSocket,
+  resolveElementId,
+} from '@tailor-cms/cek-common';
 import { onMounted, ref } from 'vue';
-import ky from 'ky';
+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 apiPrefix = '/tce-server';
-const api = ky.create({ prefixUrl: apiPrefix });
-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 () => {
-  await getElement();
-  const ws = new WebSocket(
-    `${wsProtocol}//${serverRuntimeUrl.host}${apiPrefix}`,
-  );
-  ws.addEventListener('message', (message) => {
-    const event = JSON.parse(message.data);
-    const elementUid = element.value?.uid;
-    if (elementUid && elementUid !== 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();
-  });
-});
-
-function timeout(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
+const timeout = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));
 
-async function getElement(): Promise<any> {
+async function load(id: string): Promise<any> {
   try {
-    const res = await api('content-element').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();
+    return load(id);
   }
 }
 
-async function resetElement() {
-  const id = element.value?.id;
-  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?.id;
-  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 ws = initWebSocket(serverRuntimeUrl, elementId);
+  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') load(elementId);
+  });
+});
 </script>
 
 <template>
@@ -78,8 +60,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;
 }>();

package/src/components/MainLayout.vue

@@ -1,21 +1,22 @@
 <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')"
-    />
+    <SplashLoader :is-visible="!isInitialized" />
+    <template v-if="isInitialized">
+      <PreviewPanel id="panelTop" :element-id="element.uid" />
+      <BottomPanel
+        id="panelBottom"
+        :element="element"
+        :user-state="userState"
+        class="preview-panel-bottom"
+        @reset-element="$emit('resetElement')"
+        @reset-state="$emit('resetState')"
+      />
+    </template>
   </main>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import Split from 'split.js';
 
 import BottomPanel from './BottomPanel.vue';
@@ -27,18 +28,25 @@ 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);
 
 onMounted(() => {
-  // Client/server vertical split
-  Split([`#panelTop`, `#panelBottom`], {
-    direction: 'vertical',
-    sizes: [70, 30],
-  });
-  setTimeout(() => {
-    isLoaded.value = true;
-  }, 2500);
+  isMounted.value = true;
+});
+
+watch(isInitialized, (val) => {
+  if (val) setupPreview();
 });
+
+const setupPreview = () => {
+  setTimeout(() => {
+    Split([`#panelTop`, `#panelBottom`], {
+      direction: 'vertical',
+      sizes: [70, 30],
+    });
+  }, 50);
+};
 </script>
 
 <style>

package/src/components/PreviewPanel.vue

@@ -1,9 +1,9 @@
 <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}`"
-        :src="VITE_EDIT_RUNTIME_URL"
+        :key="`author-${new Date().getTime()}`"
+        :src="`${VITE_EDIT_RUNTIME_URL}?id=${elementId}`"
         class="flex-1-1-100"
         frameBorder="0"
         title="Edit component container"
@@ -12,8 +12,8 @@
     </div>
     <div :id="PANELS.DISPLAY" class="d-flex flex-1-1-50">
       <iframe
-        :key="`display-${isLoaded ? new Date().getTime() : 0}`"
-        :src="VITE_DISPLAY_RUNTIME_URL"
+        :key="`display-${new Date().getTime()}`"
+        :src="`${VITE_DISPLAY_RUNTIME_URL}?id=${elementId}`"
         class="flex-1-1-100"
         frameBorder="0"
         title="Display component container"
@@ -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 }>();
+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/src/main.ts

@@ -1,21 +1,11 @@
 import '@mdi/font/css/materialdesignicons.css';
 import 'vuetify/styles';
 
-import Cookies from 'universal-cookie';
 import { createApp } from 'vue';
 import { createVuetify } from 'vuetify';
-import { v4 as uuid } from '@lukeed/uuid/secure';
 
 import App from './App.vue';
 
-const CLIENT_ID_KEY = 'cekClientId';
-const { VITE_CODESPACES_DOMAIN: codespaceDomain } = import.meta.env;
-const cookieOptions: any = { path: '/' };
-if (codespaceDomain) cookieOptions.domain = codespaceDomain;
-
-const cookies = new Cookies(null, cookieOptions);
-if (!cookies.get(CLIENT_ID_KEY)) cookies.set(CLIENT_ID_KEY, uuid());
-
 createApp(App)
   .use(createVuetify({ icons: { defaultSet: 'mdi' } }))
   .mount('#app');

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 => {
@@ -25,14 +22,6 @@ export default defineConfig((): any => {
       // Accept connections from any host (Docker)
       host: '0.0.0.0',
       port: parseInt(config.PREVIEW_RUNTIME_PORT, 10),
-      proxy: {
-        '/tce-server': {
-          target: config.SERVER_RUNTIME_URL,
-          ws: true,
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/tce-server/, ''),
-        },
-      },
     },
     logLevel: 'warn',
     plugins: [vue(), vuetify({ autoImport: true })],

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'],
-};