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

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.5.5-beta.4",
+  "version": "0.5.5-beta.6",
   "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",

package/src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import ky from 'ky';
+import { v4 as uuid } from '@lukeed/uuid/secure';
 
 import AppBar from './components/AppBar.vue';
 import MainLayout from './components/MainLayout.vue';
@@ -11,29 +12,33 @@ interface ContentElement {
 }
 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 api = ky.create({ prefixUrl: VITE_SERVER_RUNTIME_URL });
 const wsProtocol = serverRuntimeUrl.protocol === 'http:' ? 'ws:' : 'wss:';
 
 const element = ref<ContentElement>();
 const userState = ref({});
 
 onMounted(async () => {
-  await getElement();
-  const ws = new WebSocket(
-    `${wsProtocol}//${serverRuntimeUrl.host}${apiPrefix}`,
-  );
+  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);
-    const elementUid = element.value?.uid;
-    if (elementUid && elementUid !== event.entityId) return;
+    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();
+    if (event.type === 'userContext:change') getElement(elementId);
   });
 });
 
@@ -41,9 +46,9 @@ function timeout(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-async function getElement(): Promise<any> {
+async function getElement(elementId: string): Promise<any> {
   try {
-    const res = await api('content-element').json();
+    const res = await api(`content-element/${elementId}`).json();
     const { element: elementVal, userState: userStateVal } = res as any;
     element.value = elementVal;
     userState.value = userStateVal;
@@ -51,12 +56,12 @@ async function getElement(): Promise<any> {
     console.log('Error on element get', error);
     await timeout(2000);
     console.log('Retrying element get...');
-    return getElement();
+    return getElement(elementId);
   }
 }
 
 async function resetElement() {
-  const id = element.value?.id;
+  const id = element.value?.uid;
   if (!id) return;
   await resetState();
   const path = `content-element/${id}/reset-element`;
@@ -64,7 +69,7 @@ async function resetElement() {
 }
 
 async function resetState() {
-  const id = element.value?.id;
+  const id = element.value?.uid;
   if (!id) return;
   const path = `content-element/${id}/reset-state`;
   return api.post(path);

package/src/components/MainLayout.vue

@@ -1,21 +1,27 @@
 <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"
+        :is-loaded="true"
+      />
+      <BottomPanel
+        id="panelBottom"
+        :element="props.element"
+        :is-loaded="true"
+        :user-state="props.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 +33,30 @@ 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(() => {
-  // Client/server vertical split
-  Split([`#panelTop`, `#panelBottom`], {
-    direction: 'vertical',
-    sizes: [70, 30],
-  });
+  isMounted.value = true;
+});
+
+const setupPreview = () => {
+  setTimeout(() => {
+    Split([`#panelTop`, `#panelBottom`], {
+      direction: 'vertical',
+      sizes: [70, 30],
+    });
+  }, 50);
   setTimeout(() => {
     isLoaded.value = true;
-  }, 2500);
-});
+  }, 2000);
+};
 </script>
 
 <style>

package/src/components/PreviewPanel.vue

@@ -3,7 +3,7 @@
     <div :id="PANELS.EDIT" class="d-flex flex-1-1-50">
       <iframe
         :key="`author-${isLoaded ? new Date().getTime() : 0}`"
-        :src="VITE_EDIT_RUNTIME_URL"
+        :src="`${VITE_EDIT_RUNTIME_URL}?id=${elementId}`"
         class="flex-1-1-100"
         frameBorder="0"
         title="Edit component container"
@@ -13,7 +13,7 @@
     <div :id="PANELS.DISPLAY" class="d-flex flex-1-1-50">
       <iframe
         :key="`display-${isLoaded ? new Date().getTime() : 0}`"
-        :src="VITE_DISPLAY_RUNTIME_URL"
+        :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<{ isLoaded: Boolean, elementId: string }>();
 
 const initPanels = () => {
   previewPanelSplit.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {

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

@@ -25,14 +25,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 })],