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

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.4.0-beta.4",
+  "version": "0.4.0",
   "dependencies": {
+    "@lukeed/uuid": "^2.0.1",
     "@mdi/font": "7.2.96",
     "@vitejs/plugin-vue": "4.3.4",
     "@vueuse/core": "10.4.1",
@@ -11,6 +12,7 @@
     "sass": "1.68.0",
     "split.js": "1.6.5",
     "typescript": "5.2.2",
+    "universal-cookie": "^6.1.3",
     "vite": "4.4.9",
     "vite-plugin-vuetify": "1.0.2",
     "vue": "3.3.4",

package/src/App.vue

@@ -7,6 +7,7 @@ import MainLayout from './components/MainLayout.vue';
 
 interface ContentElement {
   id: number;
+  uid: string;
 }
 
 const appUrl = new URL(window.location.href);
@@ -19,19 +20,18 @@ const element = ref<ContentElement>();
 const userState = ref({});
 
 onMounted(async () => {
-  const { element: elementVal, userState: userStateVal } = await getElement();
-  element.value = elementVal;
-  userState.value = userStateVal;
+  await getElement();
   ws.addEventListener('message', (message) => {
     const event = JSON.parse(message.data);
-    const elementId = element.value?.id;
-    if (elementId && elementId !== event.entityId) return;
+    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();
   });
 });
 
@@ -41,7 +41,10 @@ function timeout(ms: number) {
 
 async function getElement(): Promise<any> {
   try {
-    return api('content-element').json();
+    const res = await api('content-element').json();
+    const { element: elementVal, userState: userStateVal } = res as any;
+    element.value = elementVal;
+    userState.value = userStateVal;
   } catch (error) {
     console.log('Error on element get', error);
     await timeout(2000);

package/src/main.ts

@@ -1,11 +1,18 @@
 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 cookies = new Cookies(null, { path: '/' });
+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

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