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

package/package.json

@@ -1,20 +1,24 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.2.2",
+  "version": "0.4.0-beta.10",
   "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",
+    "lodash": "^4.17.21",
     "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",
     "vue-tsc": "1.8.13",
     "vue3-ts-jsoneditor": "2.9.0",
-    "vuetify": "3.3.17"
+    "vuetify": "3.4.0"
   },
   "devDependencies": {
     "@tailor-cms/eslint-config": "0.0.2"
@@ -26,7 +30,7 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
-    "lint": "eslint --ext .js,.ts,.vue .",
+    "lint": "eslint --ext .ts,.vue .",
     "lint:fix": "pnpm lint --fix"
   }
 }

package/src/App.vue

@@ -5,15 +5,33 @@ import ky from 'ky';
 import AppBar from './components/AppBar.vue';
 import MainLayout from './components/MainLayout.vue';
 
-const SERVER_HOST = `localhost:${import.meta.env.VITE_TCE_SERVER_PORT || 8030}`;
-const api = ky.create({ prefixUrl: `http://${SERVER_HOST}` });
-const ws = new WebSocket(`ws://${SERVER_HOST}`);
+interface ContentElement {
+  id: number;
+  uid: string;
+}
+
+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({});
 
-const element = ref({});
 onMounted(async () => {
-  element.value = await getElement();
-  ws.addEventListener('message', (event) => {
-    element.value = JSON.parse(event.data);
+  await getElement();
+  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();
   });
 });
 
@@ -21,10 +39,12 @@ function timeout(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-async function getElement() {
+async function getElement(): Promise<any> {
   try {
-    const response: any = await api('content-element').json();
-    return response?.element || {};
+    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);
@@ -32,12 +52,33 @@ async function getElement() {
     return getElement();
   }
 }
+
+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 resetState() {
+  const id = element.value?.id;
+  if (!id) return;
+  const path = `content-element/${id}/reset-state`;
+  return api.post(path);
+}
 </script>
 
 <template>
   <v-app>
     <AppBar />
-    <MainLayout :element="element" class="mt-14" />
+    <MainLayout
+      :element="element"
+      :user-state="userState"
+      class="mt-14"
+      @reset-element="resetElement"
+      @reset-state="resetState"
+    />
   </v-app>
 </template>
 

package/src/components/AppBar.vue

@@ -2,11 +2,11 @@
 import logoUrl from '../assets/logo.png';
 import { useGlobalState } from '../state';
 
-const { isDark, showEdit, showDisplay, showBothComponents } = useGlobalState();
+const { showEdit, showDisplay, showBothComponents } = useGlobalState();
 </script>
 
 <template>
-  <v-app-bar :color="isDark ? 'grey-darken-4' : 'grey-lighten-4'" elevation="1">
+  <v-app-bar color="blue-grey-darken-4" elevation="6">
     <template #prepend>
       <v-app-bar-nav-icon class="ml-2">
         <img :src="logoUrl" alt="Tailor logo" width="36" />
@@ -16,25 +16,21 @@ const { isDark, showEdit, showDisplay, showBothComponents } = useGlobalState();
       Content Element Kit
       <v-chip
         class="ml-3 mb-1 text-body-2"
-        color="teal-accent-4"
+        color="#23F48B"
         density="compact"
         variant="tonal"
       >
-        0.3.0
+        0.4.0
       </v-chip>
     </v-app-bar-title>
     <v-spacer />
-    <v-btn-toggle
-      :variant="isDark ? 'flat' : 'tonal'"
-      class="mr-4"
-      density="compact"
-    >
+    <v-btn-toggle class="mr-4" density="compact">
       <v-btn @click="showEdit">
-        <span>Edit</span>
+        <span>Authoring</span>
         <v-icon end>mdi-pencil</v-icon>
       </v-btn>
       <v-btn @click="showDisplay">
-        <span>Display</span>
+        <span>End-user</span>
         <v-icon end>mdi-fullscreen</v-icon>
       </v-btn>
       <v-btn @click="showBothComponents">

package/src/components/BottomPanel.vue

@@ -1,26 +1,75 @@
 <template>
   <div v-show="isLoaded">
-    <v-tabs density="compact" hide-slider>
-      <v-tab>Server state</v-tab>
+    <v-tabs v-model="state.selectedTab">
+      <v-tab :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">
+        <VChip
+          append-icon="mdi-account"
+          class="mr-2"
+          color="green"
+          size="small"
+        >
+          {{ state.userInteractions.length }}
+        </VChip>
+        End-User state history
+      </v-tab>
     </v-tabs>
     <div class="pa-6">
-      <JsonEditor
-        v-if="isLoaded"
-        :main-menu-bar="false"
-        :status-bar="false"
-        :value="orderKeys(props.element)"
-        mode="text"
-      />
+      <v-window v-model="state.selectedTab">
+        <v-window-item :value="1">
+          <VBtn
+            class="mb-4"
+            color="indigo-darken-4"
+            variant="tonal"
+            @click="$emit('resetElement')"
+          >
+            <VIcon class="mr-2 left">mdi-refresh</VIcon>
+            Reset content element
+          </VBtn>
+          <MutationList :changes="state.elementHistory" />
+        </v-window-item>
+        <v-window-item :value="2">
+          <VBtn
+            class="mb-4"
+            color="indigo-darken-4"
+            variant="tonal"
+            @click="$emit('resetState')"
+          >
+            <VIcon class="mr-2 left">mdi-refresh</VIcon>
+            Reset state context
+          </VBtn>
+          <MutationList :changes="state.userInteractions" />
+        </v-window-item>
+      </v-window>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import JsonEditor from 'vue3-ts-jsoneditor';
+import { reactive, watch } from 'vue';
+import { format as formatDate } from 'date-fns';
 
-const props = defineProps<{ element: any; isLoaded: Boolean }>();
+import MutationList from './MutationList.vue';
 
-const orderKeys = (val: any) => {
+defineEmits(['resetElement', 'resetState']);
+const props = defineProps<{
+  isLoaded: Boolean;
+  element: any;
+  userState: any;
+}>();
+
+const state = reactive({
+  selectedTab: 1,
+  elementHistory: [] as any[],
+  userInteractions: [] as any[],
+});
+
+const orderContentElementKeys = (val: any) => {
   return [
     'id',
     'uid',
@@ -41,4 +90,31 @@ const orderKeys = (val: any) => {
     return acc;
   }, {});
 };
+
+watch(
+  () => props.element,
+  (val) => {
+    if (val.updatedAt === state.elementHistory[0]?.data?.updatedAt) return;
+    state.elementHistory.unshift({
+      id: state.elementHistory.length,
+      title: formatDate(val.updatedAt, 'HH:mm:ss'),
+      data: orderContentElementKeys(val),
+    });
+    state.selectedTab = 1;
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.userState,
+  (val) => {
+    state.userInteractions.unshift({
+      id: state.userInteractions.length,
+      title: formatDate(new Date(), 'HH:mm:ss'),
+      data: val,
+    });
+    state.selectedTab = 2;
+  },
+  { deep: true },
+);
 </script>

package/src/components/MainLayout.vue

@@ -7,7 +7,8 @@ import PreviewPanel from './PreviewPanel.vue';
 import SplashLoader from './SplashLoader.vue';
 import { useGlobalState } from '../state';
 
-const props = defineProps<{ element: any }>();
+defineEmits(['resetElement', 'resetState']);
+const props = defineProps<{ element: any; userState: any }>();
 
 const { isDark } = useGlobalState();
 const isLoaded = ref(false);
@@ -51,7 +52,10 @@ onMounted(() => {
       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>

package/src/components/MutationList.vue

@@ -0,0 +1,39 @@
+<template>
+  <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
+          :disabled="index === 0"
+          :ripple="false"
+          class="mb-1"
+          @click="toggleExpand(item)"
+        >
+          <v-card-title 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-if="isExpanded(item) || index === 0">
+            <JsonEditor
+              :main-menu-bar="false"
+              :status-bar="false"
+              :value="item.raw.data"
+              mode="text"
+            />
+          </v-card-text>
+        </v-card>
+      </template>
+    </template>
+  </VDataIterator>
+</template>
+
+<script setup lang="ts">
+import JsonEditor from 'vue3-ts-jsoneditor';
+
+defineProps<{ changes: any[] }>();
+</script>
+
+<style scoped lang="scss">
+.v-card--disabled > :not(.v-card__loader) {
+  opacity: 1 !important;
+}
+</style>

package/src/components/PreviewPanel.vue

@@ -3,10 +3,9 @@
     <div :id="PANELS.EDIT" class="d-flex flex-1-1-50">
       <iframe
         :key="`author-${isLoaded ? new Date().getTime() : 0}`"
+        :src="VITE_EDIT_RUNTIME_URL"
         class="flex-1-1-100"
         frameBorder="0"
-        sandbox="allow-scripts"
-        src="http://localhost:8010"
         title="Edit component container"
       >
       </iframe>
@@ -14,10 +13,9 @@
     <div :id="PANELS.DISPLAY" class="d-flex flex-1-1-50">
       <iframe
         :key="`display-${isLoaded ? new Date().getTime() : 0}`"
+        :src="VITE_DISPLAY_RUNTIME_URL"
         class="flex-1-1-100"
         frameBorder="0"
-        sandbox="allow-scripts"
-        src="http://localhost:8020"
         title="Display component container"
       >
       </iframe>
@@ -31,6 +29,7 @@ import Split from 'split.js';
 
 import { PANELS, useGlobalState } from '../state';
 
+const { VITE_DISPLAY_RUNTIME_URL, VITE_EDIT_RUNTIME_URL } = import.meta.env;
 const { previewPanelSplit } = useGlobalState();
 
 defineProps<{ isLoaded: Boolean }>();

package/src/components/SplashLoader.vue

@@ -6,13 +6,13 @@
           <img :src="logo" alt="Logo" width="88" />
         </div>
         <div class="splash-loader__text text-body-1">
-          <div>Booting Teaching Element Kit....</div>
+          <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 v0.3.0</div>
+          <div class="font-weight-bold">Beta preview v0.4.0</div>
         </div>
       </div>
     </div>

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

@@ -1,14 +1,36 @@
 import { defineConfig } from 'vite';
+import pick from 'lodash/pick';
 import vue from '@vitejs/plugin-vue';
 import vuetify from 'vite-plugin-vuetify';
 
+const config = pick(process.env, [
+  'EDIT_RUNTIME_URL',
+  'DISPLAY_RUNTIME_URL',
+  'SERVER_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),
+);
+
 // https://vitejs.dev/config/
 export default defineConfig((): any => {
   return {
     root: './src',
     server: {
-      host: '0.0.0.0', // Accept connections from any host (Docker)
-      port: 8080,
+      // 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',
     optimizeDeps: { entries: ['./src/main.js'] },