Migrate to the latest tce-boot version

.devcontainer/devcontainer.json

@@ -0,0 +1,62 @@
+{
+  "name": "Tailor - Modal Content Element",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
+  "features": {
+    "ghcr.io/devcontainers-extra/features/pnpm:2": {},
+    "ghcr.io/devcontainers/features/github-cli:1": {}
+  },
+  "forwardPorts": [8080, 8010, 8020, 8030],
+  "portsAttributes": {
+    "8080": {
+      "label": "Content Element Kit preview",
+      "onAutoForward": "notify"
+    },
+    "8010": {
+      "label": "Edit runtime",
+      "onAutoForward": "silent"
+    },
+    "8020": {
+      "label": "Display runtime",
+      "onAutoForward": "silent"
+    },
+    "8030": {
+      "label": "Server runtime",
+      "onAutoForward": "silent"
+    }
+  },
+  "postCreateCommand": "pnpm install --frozen-lockfile && pnpm build",
+  "postAttachCommand": "/bin/bash .devcontainer/setup.sh && pnpm dev",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "editor.formatOnSave": true,
+        "eslint.enable": true,
+        "prettier.requireConfig": true,
+        "files.exclude": {
+          "**/.pnpm": true,
+          "**/node_modules": true
+        },
+        "workbench.colorTheme": "One Dark Pro",
+        "oneDarkPro.editorFontLigatures": true,
+        "oneDarkPro.bold": true,
+        "oneDarkPro.italic": true,
+        "editor.fontSize": 20,
+        "editor.fontFamily": "'Dank Mono', 'Fira Code', monospace",
+        "editor.fontLigatures": true
+      },
+      "extensions": [
+        "akamud.vscode-theme-onedark",
+        "zhuangtongfa.Material-theme",
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "mikestead.dotenv",
+        "sainoba.px-to-rem",
+        "stylelint.vscode-stylelint",
+        "zhuangtongfa.material-theme",
+        "EditorConfig.EditorConfig",
+        "Vue.volar",
+        "GitHub.copilot"
+      ]
+    }
+  }
+}

.devcontainer/setup.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+# This script sets port 8030 to public in GitHub Codespaces to handle preflight request issues.
+# @see https://github.com/community/community/discussions/15351
+
+set -euo pipefail
+
+# Default server port assumed for codespace environment
+DEFAULT_SERVER_PORT=8030
+
+if [[ -n "${CODESPACE_NAME:-}" ]]; then
+    echo "Setting port $DEFAULT_SERVER_PORT to public in Codespace: $CODESPACE_NAME"
+    gh codespace ports visibility "$DEFAULT_SERVER_PORT:public" -c "$CODESPACE_NAME"
+else
+    echo "Not running in a Codespace, skipping port visibility change."
+fi

.env.example

@@ -10,6 +10,13 @@ EDIT_RUNTIME_URL=http://localhost:8002
 DISPLAY_RUNTIME_URL=http://localhost:8003
 SERVER_RUNTIME_URL=http://localhost:8004
 
+# AI service configuration
+# If AI_UI_ENABLED is set to true, the AI service will be enabled and model id
+# and secret key must be provided.
+AI_UI_ENABLED=
+AI_MODEL_ID=
+AI_SECRET_KEY=
+
 # Content Element env variables; TCE_ prefix is required
 # Will be loaded to the server runtime
 TCE_TEST=123

.github/actions/setup/action.yml

@@ -6,7 +6,7 @@ runs:
   - name: Setup node to enable caching
     uses: actions/setup-node@v4
     with:
-      node-version: 22.12
+      node-version: 24
       cache: 'pnpm'
       cache-dependency-path: './pnpm-lock.yaml'
   - name: Install dependencies

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+.pnpm-store
 /dist/
 
 # OS
@@ -14,6 +15,7 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+nohup.out
 
 # Editor directories and files
 .idea

Dockerfile

@@ -1,7 +1,7 @@
 ARG PNPM_HOME="/root/.local/share/pnpm"
-ARG PNPM_VERSION="8.8.0"
+ARG PNPM_VERSION="10.12.3"
 
-FROM node:20.10.0-alpine3.18
+FROM node:24-alpine
 ARG PNPM_HOME
 ARG PNPM_VERSION
 # github and ssh

README.md

@@ -2,8 +2,6 @@
 
 Tailor modal content element component.
 
-Make sure to set TAILOR_NEXT=true .env variable to enable Vue 3 based authoring runtime.
-
 ## Usage
 
 Run

eslint.config.js

@@ -0,0 +1,18 @@
+import tailorConfig from '@tailor-cms/eslint-config/base.js';
+
+export default [
+  ...tailorConfig,
+  {
+    ignores: ['dist/**', 'packages/**'],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+  },
+];

package.json

@@ -6,28 +6,26 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "concurrently 'pnpm boot:cek' 'pnpm boot:display' -n cek,display-runtime -c blue,cyan",
-    "boot:cek": "cd ./node_modules/@tailor-cms/tce-boot && pnpm start",
-    "boot:display": "export TCE_DISPLAY_DIR=${PWD}/packages/display/dist && cd ./node_modules/@tailor-cms/tce-display-runtime && pnpm dev",
+    "dev": "pnpm boot:cek",
+    "boot:cek": "cd ./node_modules/@tailor-cms/tce-boot && pnpm start --default-display",
     "build": "pnpm -r run build",
-    "lint": "pnpm -r run lint",
-    "lint:fix": "pnpm -r run lint --fix",
+    "lint": "pnpm -r run lint && eslint .",
+    "lint:fix": "pnpm -r run lint --fix && eslint . --fix",
+    "nuke:dist": "pnpm -r run nuke:dist",
+    "nuke": "pnpm -r run nuke && pnpm dlx del-cli node_modules",
     "test": "pnpm playwright test --config ./test/playwright.config.ts"
   },
-  "bin": {
-    "@tailor-cms/tce-template": "bin/index.cjs"
-  },
   "devDependencies": {
-    "@changesets/cli": "^2.27.12",
-    "@playwright/test": "1.50.1",
-    "@tailor-cms/eslint-config": "0.0.2",
-    "@tailor-cms/tce-boot": "1.0.7",
-    "@tailor-cms/tce-display-runtime": "0.6.13",
-    "@types/node": "^22.13.1",
-    "concurrently": "^9.1.2",
-    "dotenv": "^16.4.7",
-    "prettier": "3.5.0",
-    "typescript": "^5.7.3"
+    "@changesets/cli": "^2.29.5",
+    "@playwright/test": "1.53.2",
+    "@tailor-cms/cek-e2e": "^1.3.2",
+    "@tailor-cms/eslint-config": "1.1.2",
+    "@tailor-cms/tce-boot": "1.3.2",
+    "@types/node": "^24.0.12",
+    "dotenv": "^17.1.0",
+    "eslint": "^9.30.1",
+    "prettier": "^3.6.2",
+    "typescript": "^5.8.3"
   },
-  "packageManager": "pnpm@9.0.6+sha512.f6d863130973207cb7a336d6b439a242a26ac8068077df530d6a86069419853dc1ffe64029ec594a9c505a3a410d19643c870aba6776330f5cfddcf10a9c1617"
+  "packageManager": "pnpm@10.12.3"
 }

packages/display/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tailor-cms/ce-modal-display
 
+## 0.1.0
+
+### Minor Changes
+
+- Migrates package to the latest tce-boot version, adds AI config and devcontainers. Updates dependencies to the latest versions.
+
 ## 0.0.3
 
 ### Patch Changes

packages/display/eslint.config.js

@@ -0,0 +1,19 @@
+import tailorConfig from '@tailor-cms/eslint-config';
+
+export default [
+  ...tailorConfig,
+  {
+    ignores: ['**/components.d.ts', 'dist/**'],
+  },
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+      },
+    },
+  },
+];

packages/display/package.json

@@ -3,7 +3,7 @@
   "description": "Tailor CMS modal end-user component",
   "author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -17,24 +17,27 @@
   ],
   "scripts": {
     "dev": "vite build --watch",
-    "build": "vue-tsc && vite build",
-    "lint": "eslint --ext .js,.ts,.vue ./src",
-    "lint:fix": "pnpm lint --fix"
+    "build": "pnpm nuke:dist && vue-tsc && vite build",
+    "lint": "eslint ./src",
+    "lint:fix": "pnpm lint --fix",
+    "nuke": "pnpm dlx del-cli dist node_modules",
+    "nuke:dist": "pnpm dlx del-cli dist",
+    "prepublish": "pnpm build"
   },
   "peerDependencies": {
     "vue": "^3.5.13"
   },
   "devDependencies": {
     "@tailor-cms/ce-modal-manifest": "workspace:*",
-    "@tailor-cms/eslint-config": "0.0.2",
-    "@types/lodash": "^4.17.6",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.0",
-    "vue-tsc": "^2.2.0"
+    "@tailor-cms/eslint-config": "1.1.2",
+    "@types/lodash-es": "^4.17.12",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.3",
+    "vue-tsc": "^3.0.1"
   },
   "dependencies": {
-    "lodash": "^4.17.21"
+    "lodash-es": "^4.17.21"
   },
   "publishConfig": {
     "access": "public"

packages/display/src/components/Display.vue

@@ -1,14 +1,22 @@
+<!-- eslint-disable vue/no-undef-components -->
 <template>
-  <div class="tce-root text-center ma-4">
-    <VDialog scrollable>
+  <div class="tce-modal-root text-center ma-4">
+    <VDialog max-width="600" scrollable>
       <template #activator="{ props: activatorProps }">
-        <VBtn v-bind="activatorProps">{{ data.title || 'Open Modal' }}</VBtn>
+        <VBtn v-bind="activatorProps" color="primary-darken-1" rounded="md">
+          {{ element.data.title || 'Open Modal' }}
+        </VBtn>
       </template>
       <template #default="{ isActive }">
         <VCard>
-          <VCardActions>
-            <VBtn icon="mdi-close" @click="isActive.value = false" />
-          </VCardActions>
+          <VCardTitle class="d-flex justify-space-between align-center">
+            {{ element.data.title || 'Modal Content' }}
+            <VBtn
+              icon="mdi-close"
+              variant="text"
+              @click="isActive.value = false"
+            />
+          </VCardTitle>
           <VDivider />
           <VCardText>
             <VAlert v-if="!embeds.length" type="info" variant="tonal">
@@ -24,18 +32,16 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { ElementData } from '@tailor-cms/ce-modal-manifest';
-import sortBy from 'lodash/sortBy';
+import { Element } from '@tailor-cms/ce-modal-manifest';
+import { sortBy } from 'lodash-es';
 
-const props = defineProps<{ id: number; data: ElementData; userState: any }>();
+const props = defineProps<{ element: Element; userState: any }>();
 defineEmits(['interaction']);
 
-const embeds = computed(() => sortBy(props.data.embeds, 'position'));
+const embeds = computed(() => sortBy(props.element.data.embeds, 'position'));
 </script>
 
 <style scoped>
-.tce-root {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 1rem;
+.tce-modal-root {
 }
 </style>