@tailor-cms/tce-preview-runtime 0.0.4

package/.eslintrc.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  extends: '@tailor-cms/eslint-config',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    parser: '@typescript-eslint/parser',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    extraFileExtensions: ['vue'],
+  },
+  ignorePatterns: ['**/components.d.ts', '**/shims-vue.d.ts'],
+};

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# Content Element Kit preview

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="h-screen overflow-hidden dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Content Element Kit</title>
+  </head>
+  <body class="overflow-hidden">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@tailor-cms/tce-preview-runtime",
+  "version": "0.0.4",
+  "dependencies": {
+    "@mdi/font": "^7.0.96",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vueuse/core": "^9.1.1",
+    "split.js": "^1.6.4",
+    "typescript": "^5.1.6",
+    "vite-plugin-vuetify": "^1.0.2",
+    "vite": "^3.0.7",
+    "vue": "^3.2.37",
+    "vue-tsc": "^0.39.5",
+    "vuetify": "^3.3.14"
+  },
+  "devDependencies": {
+    "@tailor-cms/eslint-config": "0.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "serve": "vite preview",
+    "lint": "eslint --ext .js,.ts,.vue .",
+    "lint:fix": "pnpm lint --fix"
+  }
+}

package/src/App.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import AppBar from './components/AppBar.vue';
+import MainLayout from './components/MainLayout.vue';
+</script>
+
+<template>
+  <v-app>
+    <AppBar />
+    <MainLayout class="mt-14" />
+  </v-app>
+</template>
+
+<style>
+body {
+  --nav-height: 4.2rem;
+}
+</style>

package/src/components/AppBar.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useToggle } from '@vueuse/core';
+
+import logoUrl from '../assets/logo.png';
+import { useDarkGlobal } from '../utils';
+
+const isDark = useDarkGlobal();
+const toggleDark = useToggle(isDark);
+</script>
+
+<template>
+  <v-app-bar :color="isDark ? 'blue-grey-darken-4' : 'grey-lighten-4'">
+    <template #prepend>
+      <v-app-bar-nav-icon>
+        <img :src="logoUrl" alt="Tailor logo" width="32" />
+      </v-app-bar-nav-icon>
+    </template>
+    <v-app-bar-title> Dev Kit </v-app-bar-title>
+    <v-spacer />
+    <v-btn icon>
+      <v-icon>mdi-github</v-icon>
+    </v-btn>
+    <v-btn icon @click.prevent="toggleDark()">
+      <v-icon>mdi-theme-light-dark</v-icon>
+    </v-btn>
+  </v-app-bar>
+</template>

package/src/components/MainLayout.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import Split from 'split.js';
+
+import { useDarkGlobal } from '../utils';
+const isDark = useDarkGlobal();
+const iframe = ref<HTMLIFrameElement>();
+
+watch(isDark, (value) => {
+  iframe.value?.contentWindow?.postMessage(
+    `theme-${value ? 'dark' : 'light'}`,
+    '*',
+  );
+});
+
+onMounted(() => Split(['#splitA', '#splitB']));
+</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>
+    </div>
+  </main>
+</template>
+
+<style>
+main {
+  height: calc(100vh - var(--nav-height));
+}
+
+.gutter {
+  background-position: 50%;
+}
+
+.gutter.gutter-horizontal {
+  background-color: #333;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+  cursor: col-resize;
+}
+</style>

package/src/main.ts

@@ -0,0 +1,11 @@
+import '@mdi/font/css/materialdesignicons.css';
+import 'vuetify/styles';
+
+import { createApp } from 'vue';
+import { createVuetify } from 'vuetify';
+
+import App from './App.vue';
+
+createApp(App)
+  .use(createVuetify({ icons: { defaultSet: 'mdi' } }))
+  .mount('#app');

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/utils/helpers.ts

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

package/src/utils/index.ts

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

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vuetify from 'vite-plugin-vuetify';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 8080,
+  },
+  plugins: [vue(), vuetify({ autoImport: true })],
+});