@tailor-cms/tce-preview-runtime 0.0.4 → 0.0.15

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.0.4",
+  "version": "0.0.15",
   "dependencies": {
     "@mdi/font": "^7.0.96",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vueuse/core": "^9.1.1",
+    "ky": "^0.31.4",
+    "sort-object-keys": "^1.1.3",
     "split.js": "^1.6.4",
     "typescript": "^5.1.6",
-    "vite-plugin-vuetify": "^1.0.2",
     "vite": "^3.0.7",
+    "vite-plugin-vuetify": "^1.0.2",
     "vue": "^3.2.37",
+    "vue-json-pretty": "^2.2.4",
     "vue-tsc": "^0.39.5",
     "vuetify": "^3.3.14"
   },

package/src/App.vue

@@ -1,12 +1,37 @@
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+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}`);
+
+const element = ref({});
+onMounted(async () => {
+  element.value = await getElement();
+  ws.addEventListener('message', (event) => {
+    element.value = JSON.parse(event.data);
+  });
+});
+
+async function getElement() {
+  try {
+    const response = await api('content-element').json();
+    return response || {};
+  } catch (error) {
+    console.log('Error on element get', error);
+    return { msg: 'Error upon retrieving element state' };
+  }
+}
 </script>
 
 <template>
   <v-app>
     <AppBar />
-    <MainLayout class="mt-14" />
+    <MainLayout :element="element" class="mt-14" />
   </v-app>
 </template>
 

package/src/components/AppBar.vue

@@ -1,23 +1,37 @@
 <script setup lang="ts">
-import { useToggle } from '@vueuse/core';
-
 import logoUrl from '../assets/logo.png';
-import { useDarkGlobal } from '../utils';
+import { useGlobalState } from '../state';
 
-const isDark = useDarkGlobal();
-const toggleDark = useToggle(isDark);
+const { isDark, toggleDark, showEdit, showDisplay, showBothComponents } =
+  useGlobalState();
 </script>
 
 <template>
-  <v-app-bar :color="isDark ? 'blue-grey-darken-4' : 'grey-lighten-4'">
+  <v-app-bar :color="isDark ? 'blue-grey-darken-4' : 'grey-lighten-5'">
     <template #prepend>
-      <v-app-bar-nav-icon>
-        <img :src="logoUrl" alt="Tailor logo" width="32" />
+      <v-app-bar-nav-icon class="ml-3">
+        <v-avatar :color="isDark ? 'blue-grey-darken-4' : '#333'" size="48">
+          <img :src="logoUrl" alt="Tailor logo" width="30" />
+        </v-avatar>
       </v-app-bar-nav-icon>
     </template>
-    <v-app-bar-title> Dev Kit </v-app-bar-title>
+    <v-app-bar-title class="ml-3 font-weight-bold">Dev Kit</v-app-bar-title>
     <v-spacer />
-    <v-btn icon>
+    <v-btn-toggle class="mr-4" density="compact" borderless>
+      <v-btn @click="showEdit">
+        <span>Edit</span>
+        <v-icon end>mdi-pencil</v-icon>
+      </v-btn>
+      <v-btn @click="showDisplay">
+        <span>Preview</span>
+        <v-icon end>mdi-fullscreen</v-icon>
+      </v-btn>
+      <v-btn @click="showBothComponents">
+        <span>Both</span>
+        <v-icon end>mdi-math-norm-box</v-icon>
+      </v-btn>
+    </v-btn-toggle>
+    <v-btn href="https://github.com/tailor-cms/t-xt" icon>
       <v-icon>mdi-github</v-icon>
     </v-btn>
     <v-btn icon @click.prevent="toggleDark()">

package/src/components/MainLayout.vue

@@ -1,42 +1,89 @@
 <script setup lang="ts">
+import 'vue-json-pretty/lib/styles.css';
+
+import * as sortObject from 'sort-object-keys';
 import { onMounted, ref, watch } from 'vue';
 import Split from 'split.js';
+import VueJsonPretty from 'vue-json-pretty';
 
-import { useDarkGlobal } from '../utils';
-const isDark = useDarkGlobal();
-const iframe = ref<HTMLIFrameElement>();
+const SERVER_PROP_ORDER = [
+  'id',
+  'uid',
+  'type',
+  'position',
+  'data',
+  'meta',
+  'refs',
+  'contentId',
+  'contentSignature',
+  'linked',
+  'detached',
+  'createdAt',
+  'updatedAt',
+  'deletedAt',
+];
 
-watch(isDark, (value) => {
-  iframe.value?.contentWindow?.postMessage(
-    `theme-${value ? 'dark' : 'light'}`,
-    '*',
-  );
-});
+import { PANELS, useGlobalState } from '../state';
+
+const LIGHT_BACKGROUND = '#ECEFF1';
+const DARK_BACKGROUND = '#CFD8DC';
+
+const props = defineProps<{ element: any }>();
+const { isDark, splitJs } = useGlobalState();
+const backgroundColor = ref('');
 
-onMounted(() => Split(['#splitA', '#splitB']));
+watch(
+  isDark,
+  (value) => {
+    backgroundColor.value = value ? DARK_BACKGROUND : LIGHT_BACKGROUND;
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  // Component preview split
+  splitJs.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
+    minSize: [0, 0],
+  });
+  // Client/server vertical split
+  Split([`#panelTop`, `#panelBottom`], {
+    direction: 'vertical',
+    sizes: [70, 30],
+  });
+});
 </script>
 
 <template>
-  <main>
-    <div class="d-flex flex-row h-100">
-      <iframe
-        id="splitA"
-        ref="iframe"
-        class="w-full p-4"
-        frameBorder="0"
-        sandbox="allow-scripts"
-        src="http://localhost:8010"
-        title="Edit component container"
-      ></iframe>
-      <iframe
-        id="splitB"
-        ref="iframe"
-        class="w-full p-4"
-        frameBorder="0"
-        sandbox="allow-scripts"
-        src="http://localhost:8020"
-        title="Display component container"
-      ></iframe>
+  <main :class="{ 'dark-theme': isDark }">
+    <div id="panelTop" class="d-flex">
+      <div class="d-flex flex-grow-1">
+        <iframe
+          :id="PANELS.EDIT"
+          :style="{ backgroundColor }"
+          frameBorder="0"
+          sandbox="allow-scripts"
+          src="http://localhost:8010"
+          title="Edit component container"
+        >
+        </iframe>
+        <iframe
+          :id="PANELS.DISPLAY"
+          :style="{ backgroundColor }"
+          frameBorder="0"
+          sandbox="allow-scripts"
+          src="http://localhost:8020"
+          title="Display component container"
+        >
+        </iframe>
+      </div>
+    </div>
+    <div id="panelBottom" :style="{ backgroundColor }">
+      <v-tabs density="compact" hide-slider>
+        <v-tab>Server state</v-tab>
+      </v-tabs>
+      <div class="pa-5">
+        <VueJsonPretty :data="sortObject(props.element, SERVER_PROP_ORDER)" />
+      </div>
     </div>
   </main>
 </template>
@@ -51,8 +98,21 @@ main {
 }
 
 .gutter.gutter-horizontal {
-  background-color: #333;
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
   cursor: col-resize;
+  background-color: #fff;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+}
+
+.gutter.gutter-vertical {
+  cursor: row-resize !important;
+  background-color: #fff;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+}
+
+.dark-theme {
+  .gutter.gutter-horizontal,
+  .gutter.gutter-vertical {
+    background-color: #333;
+  }
 }
 </style>

package/src/state/index.ts

@@ -0,0 +1 @@
+export * from './preview';

package/src/state/preview.ts

@@ -0,0 +1,40 @@
+import { createGlobalState, useToggle } from '@vueuse/core';
+import { ref } from 'vue';
+
+export const PANELS = {
+  EDIT: 'editPanel',
+  DISPLAY: 'displayPanel',
+  STATE: 'statePanel',
+};
+
+export const useGlobalState = createGlobalState(() => {
+  // Control color scheme
+  const isDark = ref(false);
+  const toggleDark = useToggle(isDark);
+
+  // Control panels
+  const visiblePanels = ref(['EDIT', 'DISPLAY', 'STATE']);
+  const splitJs = ref();
+  const showEdit = () => {
+    visiblePanels.value = [PANELS.EDIT];
+    if (splitJs.value) splitJs.value?.setSizes([100, 0]);
+  };
+  const showDisplay = () => {
+    visiblePanels.value = [PANELS.DISPLAY];
+    if (splitJs.value) splitJs.value?.setSizes([0, 100]);
+  };
+  const showBothComponents = () => {
+    visiblePanels.value = [PANELS.EDIT, PANELS.DISPLAY];
+    if (splitJs.value) splitJs.value?.setSizes([50, 50]);
+  };
+
+  return {
+    isDark,
+    toggleDark,
+    visiblePanels,
+    splitJs,
+    showEdit,
+    showDisplay,
+    showBothComponents,
+  };
+});

package/src/utils/helpers.ts

@@ -1,3 +0,0 @@
-import { createGlobalState, useDark } from '@vueuse/core';
-
-export const useDarkGlobal = createGlobalState(() => useDark());

package/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './helpers';