feat(live-preview-vue): new live-preview-vue package (#5933)

Co-authored-by: Christian Gil <mrcgam.christian@gmail.com>

packages/live-preview-vue/.eslintignore

@@ -0,0 +1,10 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp

packages/live-preview-vue/.eslintrc.js

@@ -0,0 +1,37 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  extends: ['@payloadcms'],
+  overrides: [
+    {
+      extends: ['plugin:@typescript-eslint/disable-type-checked'],
+      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
+    },
+    {
+      files: ['package.json', 'tsconfig.json'],
+      rules: {
+        'perfectionist/sort-array-includes': 'off',
+        'perfectionist/sort-astro-attributes': 'off',
+        'perfectionist/sort-classes': 'off',
+        'perfectionist/sort-enums': 'off',
+        'perfectionist/sort-exports': 'off',
+        'perfectionist/sort-imports': 'off',
+        'perfectionist/sort-interfaces': 'off',
+        'perfectionist/sort-jsx-props': 'off',
+        'perfectionist/sort-keys': 'off',
+        'perfectionist/sort-maps': 'off',
+        'perfectionist/sort-named-exports': 'off',
+        'perfectionist/sort-named-imports': 'off',
+        'perfectionist/sort-object-types': 'off',
+        'perfectionist/sort-objects': 'off',
+        'perfectionist/sort-svelte-attributes': 'off',
+        'perfectionist/sort-union-types': 'off',
+        'perfectionist/sort-vue-attributes': 'off',
+      },
+    },
+  ],
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+  root: true,
+}

packages/live-preview-vue/.prettierignore

@@ -0,0 +1,10 @@
+.tmp
+**/.git
+**/.hg
+**/.pnp.*
+**/.svn
+**/.yarn/**
+**/build
+**/dist/**
+**/node_modules
+**/temp

packages/live-preview-vue/.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "commonjs"
+  }
+}

packages/live-preview-vue/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@payloadcms/live-preview-vue",
+  "version": "0.1.0",
+  "description": "The official live preview Vue SDK for Payload",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/payloadcms/payload.git",
+    "directory": "packages/live-preview-vue"
+  },
+  "license": "MIT",
+  "homepage": "https://payloadcms.com",
+  "author": "Payload CMS, Inc.",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "prepublishOnly": "pnpm clean && pnpm turbo build"
+  },
+  "dependencies": {
+    "@payloadcms/live-preview": "workspace:^0.x"
+  },
+  "devDependencies": {
+    "@payloadcms/eslint-config": "workspace:*",
+    "vue": "^3.0.0",
+    "payload": "workspace:*"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "exports": {
+    ".": {
+      "default": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "require": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    },
+    "main": "./dist/index.js",
+    "registry": "https://registry.npmjs.org/",
+    "types": "./dist/index.d.ts"
+  },
+  "files": [
+    "dist"
+  ]
+}

packages/live-preview-vue/src/index.ts

@@ -0,0 +1,58 @@
+import type { Ref } from 'vue'
+
+import { ready, subscribe, unsubscribe } from '@payloadcms/live-preview'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+/**
+ * Vue composable to implement Payload CMS Live Preview.
+ *
+ * {@link https://payloadcms.com/docs/live-preview/frontend View the documentation}
+ */
+export const useLivePreview = <T>(props: {
+  apiRoute?: string
+  depth?: number
+  initialData: T
+  serverURL: string
+}): {
+  data: Ref<T>
+  isLoading: Ref<boolean>
+} => {
+  const { apiRoute, depth, initialData, serverURL } = props
+  const data = ref(initialData) as Ref<T>
+  const isLoading = ref(true)
+  const hasSentReadyMessage = ref(false)
+
+  const onChange = (mergedData: T) => {
+    data.value = mergedData
+    isLoading.value = false
+  }
+
+  let subscription: (event: MessageEvent) => void
+
+  onMounted(() => {
+    subscription = subscribe({
+      apiRoute,
+      callback: onChange,
+      depth,
+      initialData,
+      serverURL,
+    })
+
+    if (!hasSentReadyMessage.value) {
+      hasSentReadyMessage.value = true
+
+      ready({
+        serverURL,
+      })
+    }
+  })
+
+  onUnmounted(() => {
+    unsubscribe(subscription)
+  })
+
+  return {
+    data,
+    isLoading,
+  }
+}

packages/live-preview-vue/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true, // Make sure typescript knows that this module depends on their references
+    "noEmit": false /* Do not emit outputs. */,
+    "emitDeclarationOnly": true,
+    "outDir": "./dist" /* Specify an output folder for all emitted files. */,
+    "rootDir": "./src" /* Specify the root folder within your source files. */,
+    "jsx": "react"
+  },
+  "exclude": [
+    "dist",
+    "build",
+    "tests",
+    "test",
+    "node_modules",
+    ".eslintrc.js",
+    "src/**/*.spec.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx"
+  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts", "src/**/*.json"],
+  "references": [{ "path": "../payload" }] // db-mongodb depends on payload
+}