chore(preview): remove tokens support (#174)

Author: larbish

Diff for: src/runtime/components/ContentPreviewMode.vue

@@ -144,7 +144,7 @@ onMounted(async () => {
 
   socket.on('draft:unauthorized', () => {
     clearSyncTimeout()
-    error.value = 'Unauthorized preview token'
+    error.value = 'Unauthorized preview'
     previewReady.value = false
   })
   socket.on('disconnect', () => {

Diff for: src/runtime/composables/useStudio.ts

@@ -29,12 +29,9 @@ export const useStudio = () => {
 
   // App config (required)
   const initialAppConfig = useDefaultAppConfig()
-  let initialTokensConfig: object
-
   const storage = useState<Storage | null>('studio-client-db', () => null)
 
   if (!storage.value) {
-    // @ts-expect-error custom hook
     nuxtApp.hook('content:storage', (_storage: Storage) => {
       storage.value = _storage
     })
@@ -81,33 +78,6 @@ export const useStudio = () => {
     }
   }
 
-  const syncPreviewTokensConfig = (tokensConfig?: ParsedContent) => {
-    // Tokens config (optional; depends on the presence of pinceauTheme provide)
-    // TODO: Improve typings
-    // TODO: Use `inject()` but wrong context seem to be resolved; while $pinceauTheme global property is present in `app` context
-    const themeSheet = nuxtApp?.vueApp?._context?.config?.globalProperties?.$pinceauTheme as Record<string, unknown>
-
-    // Pinceau might be not present, or not booted yet
-    if (!themeSheet || !themeSheet?.updateTheme) return
-
-    // Set initial tokens config on first call
-    if (!initialTokensConfig) {
-      initialTokensConfig = JSON.parse(JSON.stringify((themeSheet?.theme as Record<string, unknown>).value || {}))
-    }
-
-    // Call updateTheme with new config
-    callWithNuxt(
-      nuxtApp,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      themeSheet.updateTheme as any,
-      [
-        // Using `defu` to merge with initial tokens
-        // This is important to revert to default values for missing properties
-        defu(tokensConfig as ParsedContent, initialTokensConfig),
-      ],
-    )
-  }
-
   const syncPreview = async (data: PreviewResponse) => {
     // Preserve db files in case storage is not ready yet (see check below)
     dbFiles = data.files = data.files || dbFiles || []
@@ -117,21 +87,18 @@ export const useStudio = () => {
       return false
     }
 
-    // Empty dbFiles array once storage is ready
+    // Empty dbFiles array once storage is ready to clear memory
     dbFiles = []
 
     const mergedFiles = mergeDraft(data.files, data.additions, data.deletions)
 
     // Handle content files
-    const contentFiles = mergedFiles.filter(item => !([StudioConfigFiles.appConfig, StudioConfigFiles.nuxtConfig, StudioConfigFiles.tokensConfig].includes(item.path)))
+    const contentFiles = mergedFiles.filter(item => !([StudioConfigFiles.appConfig, StudioConfigFiles.nuxtConfig].includes(item.path)))
     await syncPreviewFiles(storage.value, contentFiles)
 
     const appConfig = mergedFiles.find(item => item.path === StudioConfigFiles.appConfig)
     syncPreviewAppConfig(appConfig?.parsed as ParsedContent)
 
-    const tokensConfig = mergedFiles.find(item => item.path === StudioConfigFiles.tokensConfig)
-    syncPreviewTokensConfig(tokensConfig?.parsed as ParsedContent)
-
     requestRerender()
 
     return true
@@ -211,7 +178,6 @@ export const useStudio = () => {
 
   const requestRerender = async () => {
     if (contentConfig?.documentDriven) {
-      // @ts-expect-error Update all cached pages
       const { pages } = callWithNuxt(nuxtApp, useContentState)
 
       const contents = await Promise.all(Object.keys(pages.value).map(async (key) => {
@@ -235,7 +201,6 @@ export const useStudio = () => {
 
     syncPreviewFiles,
     syncPreviewAppConfig,
-    syncPreviewTokensConfig,
     requestPreviewSynchronization,
 
     findContentWithId,
@@ -334,16 +299,6 @@ export const useStudio = () => {
           if (shouldRemoveAppConfig) {
             syncPreviewAppConfig(undefined)
           }
-
-          const tokensConfig = additions.find(item => item.path === StudioConfigFiles.tokensConfig)
-          if (tokensConfig) {
-            syncPreviewTokensConfig(tokensConfig?.parsed)
-          }
-          const shouldRemoveTokensConfig = deletions.find(item => item.path === StudioConfigFiles.tokensConfig)
-          if (shouldRemoveTokensConfig) {
-            syncPreviewTokensConfig(undefined)
-          }
-          break
         }
       }
     })
@@ -361,7 +316,6 @@ export const useStudio = () => {
       route.meta.studio_page_contentId = page?._id
     })
 
-    // @ts-expect-error custom hook
     nuxtApp.hook('nuxt-studio:preview:ready', () => {
       window.parent.postMessage({
         type: 'nuxt-studio:preview:ready',

Diff for: src/runtime/server/routes/studio.ts

@@ -1,6 +1,5 @@
 import type { ComponentMeta } from 'vue-component-meta'
 import { eventHandler } from 'h3'
-import { joinURL } from 'ufo'
 import { useRuntimeConfig, useAppConfig } from '#imports'
 // @ts-expect-error import does exist
 import components from '#nuxt-component-meta/nitro'
@@ -30,7 +29,7 @@ export default eventHandler(async () => {
 
   const appConfig = useAppConfig()
   const runtimeConfig = useRuntimeConfig()
-  const { app, contentSchema, appConfigSchema, studio, content } = runtimeConfig
+  const { contentSchema, appConfigSchema, studio, content } = runtimeConfig
   const { sources, ignores, locales, defaultLocale, highlight, navigation, documentDriven, experimental } = content as Record<string, unknown>
 
   // Delete GitHub tokens for multiple source to avoid exposing them
@@ -46,15 +45,6 @@ export default eventHandler(async () => {
       dir,
     }
   })
-  const hasPinceau = (runtimeConfig?.pinceau as Record<string, unknown>)?.studio
-  let tokensConfig
-  let tokensConfigSchema
-  if (hasPinceau) {
-    // @ts-expect-error Support for __pinceau_tokens_{schema|config}.json
-    tokensConfig = await $fetch.native(joinURL(app.baseURL, '/__pinceau_tokens_config.json')).then(r => r.json())
-    // @ts-expect-error Support for __pinceau_tokens_{schema|config}.json
-    tokensConfigSchema = await $fetch.native(joinURL(app.baseURL, '/__pinceau_tokens_schema.json')).then(r => r.json())
-  }
 
   return {
     // Studio version
@@ -66,9 +56,6 @@ export default eventHandler(async () => {
     // app.config
     appConfigSchema: appConfigSchema || {},
     appConfig,
-    // tokens.config
-    tokensConfigSchema,
-    tokensConfig,
     // @nuxt/content
     content: { sources: safeSources, ignores, locales, defaultLocale, highlight, navigation, documentDriven, experimental },
     // nuxt-component-meta

Diff for: src/runtime/utils/index.ts

@@ -3,7 +3,6 @@ export * from './files'
 export const StudioConfigFiles = {
   appConfig: 'app.config.ts',
   nuxtConfig: 'nuxt.config.ts',
-  tokensConfig: 'tokens.config.ts',
 }
 
 export const createSingleton = <T, Params extends Array<unknown>>(fn: () => T) => {

Diff for: src/theme.ts

@@ -3,146 +3,76 @@ import type { JSType, Schema, InputValue } from 'untyped'
 
 export type ConfigInputsTypes =
   | Exclude<JSType, 'symbol' | 'function' | 'any' | 'bigint'>
-  | 'default' | 'icon' | 'file' | 'media' | 'component' | 'design-token'
-
-export type DesignTokensInputsTypes = 'color' | 'size' | 'shadow' | 'size' | 'opacity' | 'font' | 'font-weight' | 'font-size' | 'letter-spacing'
+  | 'default' | 'icon' | 'file' | 'media' | 'component'
 
 export type PickerTypes = 'media-picker' | 'icon-picker'
 
-export type InputsTypes = DesignTokensInputsTypes | ConfigInputsTypes
-
 export type PartialSchema = Pick<Schema, 'title' | 'description' | 'default' | 'required'> & { [key: string]: unknown }
 
-const supportedFields: { [key in InputsTypes]: Schema } = {
+const supportedFields: { [key in ConfigInputsTypes]: Schema } = {
   /**
    * Raw types
    */
-  'default': {
+  default: {
     type: 'string',
     tags: [
       '@studioInput string',
     ],
   },
-  'string': {
+  string: {
     type: 'string',
     tags: [
       '@studioInput string',
     ],
   },
-  'number': {
+  number: {
     type: 'number',
     tags: [
       '@studioInput number',
     ],
   },
-  'boolean': {
+  boolean: {
     type: 'boolean',
     tags: [
       '@studioInput boolean',
     ],
   },
-  'array': {
+  array: {
     type: 'array',
     tags: [
       '@studioInput array',
     ],
   },
-  'design-token': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-    ],
-  },
-  'object': {
+  object: {
     type: 'object',
     tags: [
       '@studioInput object',
     ],
   },
-  'file': {
+  file: {
     type: 'string',
     tags: [
       '@studioInput file',
     ],
   },
-  'media': {
+  media: {
     type: 'string',
     tags: [
       '@studioInput media',
     ],
   },
-  'component': {
+  component: {
     type: 'string',
     tags: [
       '@studioInput component',
     ],
   },
-  'icon': {
+  icon: {
     type: 'string',
     tags: [
       '@studioInput icon',
     ],
   },
-
-  /**
-   * Design Tokens
-   */
-  'color': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType color',
-    ],
-  },
-  'size': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType size',
-    ],
-  },
-  'shadow': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType shadow',
-    ],
-  },
-  'opacity': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType opacity',
-    ],
-  },
-  'font': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType font',
-    ],
-  },
-  'font-weight': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType font-weight',
-    ],
-  },
-  'font-size': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType size',
-    ],
-  },
-  'letter-spacing': {
-    type: 'string',
-    tags: [
-      '@studioInput design-token',
-      '@studioInputTokenType size',
-    ],
-  },
 }
 
 export type StudioFieldData =