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

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.0.4",
+  "version": "0.0.16",
   "dependencies": {
     "@mdi/font": "^7.0.96",
     "@vitejs/plugin-vue": "^3.0.3",
     "@vueuse/core": "^9.1.1",
+    "ky": "^0.31.4",
     "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-tsc": "^0.39.5",
+    "vue3-ts-jsoneditor": "^2.9.0",
     "vuetify": "^3.3.14"
   },
   "devDependencies": {

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 ? '#29292f' : '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 ? 'transparent' : '#29292f'" 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,79 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { onMounted } from 'vue';
+import JsonEditor from 'vue3-ts-jsoneditor';
 import Split from 'split.js';
 
-import { useDarkGlobal } from '../utils';
-const isDark = useDarkGlobal();
-const iframe = ref<HTMLIFrameElement>();
+import { PANELS, useGlobalState } from '../state';
 
-watch(isDark, (value) => {
-  iframe.value?.contentWindow?.postMessage(
-    `theme-${value ? 'dark' : 'light'}`,
-    '*',
-  );
-});
+// TODO: Enforce order
+// const SERVER_PROP_ORDER = [
+//   'id',
+//   'uid',
+//   'type',
+//   'position',
+//   'data',
+//   'meta',
+//   'refs',
+//   'contentId',
+//   'contentSignature',
+//   'linked',
+//   'detached',
+//   'createdAt',
+//   'updatedAt',
+//   'deletedAt',
+// ];
+
+const props = defineProps<{ element: any }>();
+const { isDark, splitJs } = useGlobalState();
 
-onMounted(() => Split(['#splitA', '#splitB']));
+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 panel">
+      <div class="d-flex flex-grow-1">
+        <iframe
+          :id="PANELS.EDIT"
+          frameBorder="0"
+          sandbox="allow-scripts"
+          src="http://localhost:8010"
+          title="Edit component container"
+        >
+        </iframe>
+        <iframe
+          :id="PANELS.DISPLAY"
+          frameBorder="0"
+          sandbox="allow-scripts"
+          src="http://localhost:8020"
+          title="Display component container"
+        >
+        </iframe>
+      </div>
+    </div>
+    <div id="panelBottom" class="panel">
+      <v-tabs density="compact" hide-slider>
+        <v-tab>Server state</v-tab>
+      </v-tabs>
+      <div class="pa-5">
+        <JsonEditor
+          :dark-theme="isDark"
+          :main-menu-bar="false"
+          :status-bar="false"
+          :value="props.element"
+          mode="text"
+        />
+      </div>
     </div>
   </main>
 </template>
@@ -44,6 +81,10 @@ onMounted(() => Split(['#splitA', '#splitB']));
 <style>
 main {
   height: calc(100vh - var(--nav-height));
+
+  .panel {
+    background-color: #eceff1;
+  }
 }
 
 .gutter {
@@ -51,8 +92,26 @@ 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;
+  }
+
+  .jse-theme-dark .cm-content,
+  .jse-theme-dark .cm-gutters {
+    background-color: #29292f !important;
+  }
 }
 </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';