feat(module): make server features fully opt-in (lighten nitro bundle)

Author: Tahul

build.config.ts

@@ -12,9 +12,18 @@ export default defineBuildConfig({
       input: './src/formats.ts',
       builder: 'rollup',
       name: 'formats'
+    },
+    {
+      input: './src/generate.ts',
+      builder: 'rollup',
+      name: 'generate'
     }
   ],
   externals: [
+    // ??
+    'formats.mjs',
+    'generate.mjs',
+    // ??
     '#design-tokens',
     'browser-style-dictionary',
     'ufo',

docs/content/1.guide/3.API.md

@@ -70,13 +70,15 @@ Theme tokens gets processed by [Style Dictionary](https://amzn.github.io/style-d
 
 - **Composable usage**
   ```ts
-  const token = useTokens('colors.primary')
+  const { $dt } = useTokens()
+
+  const primaryColor = $dt('colors.primary')
   ```
 
 - **`<template>` usage**
   ```vue
   <template>
-  <div :style="{ backgroundColor: $tokens('colors.primary') }">
+  <div :style="{ backgroundColor: $dt('colors.primary') }">
     Hello World
   </div>
   </template>
@@ -86,20 +88,20 @@ Theme tokens gets processed by [Style Dictionary](https://amzn.github.io/style-d
   ```vue
   <style lang="postcss" scoped>
   .header {
-    background-color: v-bind($tokens('colors.primary'));
+    background-color: v-bind($dt('colors.primary'));
   }
   </style>
   ```
 
 - **`import` usage**
   ```ts [tailwind.config.ts]
-  import { $tokens } from './.nuxt/theme/tokens.ts'
+  import { $dt } from '@nuxtjs/design-tokens'
 
   export default {
     theme: {
       extend: {
         colors: {
-          primary: $tokens('colors.primary')
+          primary: $dt('colors.primary')
         }
       }
     }
@@ -108,7 +110,7 @@ Theme tokens gets processed by [Style Dictionary](https://amzn.github.io/style-d
 
 - **`server` usage**
   ```ts [server/api/token.ts]
-  import { $tokens } from '#theme-tokens'
+  import { $dt } from '#design-tokens'
 
   export default defineHandler(() => {
     return $tokens('colors.base')

package.json

@@ -18,6 +18,14 @@
     "./module": {
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
+    },
+    "./formats": {
+      "import": "./dist/formats.mjs",
+      "require": "./dist/formats.cjs"
+    },
+    "./generate": {
+      "import": "./dist/generate.mjs",
+      "require": "./dist/generate.cjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -29,6 +37,8 @@
   "scripts": {
     "build": "nuxt-module-build",
     "dev": "nuxi dev playground",
+    "build:dev": "nuxi build playground",
+    "generate:dev": "nuxi generate playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxi prepare playground && nuxt-module-build --stub",
     "dev:fixtures": "./.github/scripts/fixture.sh",

playground/nuxt.config.ts

@@ -16,7 +16,7 @@ export default defineNuxtConfig({
 
   extends: [resolveThemeDir('./theme')],
 
-  theme: {
-    tokens: true
+  designTokens: {
+    server: false
   }
 })

playground/pages/index.vue

@@ -38,6 +38,12 @@
   </div>
 </template>
 
+<script setup lang="ts">
+const { fetch: fetchTokens, $t } = useTokens()
+
+const { data } = await useAsyncData(fetchTokens)
+</script>
+
 <style scoped lang="postcss">
 .app {
   height: 100vh;

src/generate.ts

@@ -0,0 +1,154 @@
+import { existsSync } from 'fs'
+import { rm, writeFile } from 'fs/promises'
+import type { Core as Instance } from 'browser-style-dictionary/types/browser'
+import StyleDictionary from 'browser-style-dictionary/browser.js'
+import { tsTypesDeclaration, tsFull, jsFull } from './formats'
+import type { NuxtDesignTokens } from './index'
+
+export const stubTokens = async (buildPath: string, force = false) => {
+  const files = {
+    'tokens.css': () => '/* This file is empty because no tokens has been provided. */',
+    'tokens.scss': () => '/* This file is empty because no tokens has been provided. */',
+    'tokens.json': () => '{}',
+    'index.js': jsFull,
+    'index.ts': tsFull,
+    'types.d.ts': tsTypesDeclaration
+  }
+
+  for (const [file, stubbingFunction] of Object.entries(files)) {
+    const path = `${buildPath}${file}`
+
+    if (force && existsSync(path)) { await rm(path) }
+
+    if (!existsSync(path)) { await writeFile(path, stubbingFunction ? stubbingFunction({ tokens: {} }) : '') }
+  }
+}
+
+export const generateTokens = async (
+  tokens: NuxtDesignTokens,
+  buildPath: string,
+  silent = true
+) => {
+  if (!tokens || !Object.keys(tokens).length) {
+    await stubTokens(buildPath, true)
+    return
+  }
+
+  let styleDictionary: Instance = StyleDictionary
+
+  styleDictionary.fileHeader = {}
+
+  styleDictionary.registerTransformGroup({
+    name: 'tokens-js',
+    transforms: ['name/cti/kebab', 'size/px', 'color/hex']
+  })
+
+  styleDictionary.registerFormat({
+    name: 'typescript/types-declaration',
+    formatter ({ dictionary }) {
+      return tsTypesDeclaration(dictionary)
+    }
+  })
+
+  styleDictionary.registerFormat({
+    name: 'typescript/full',
+    formatter ({ dictionary }) {
+      return tsFull(dictionary)
+    }
+  })
+
+  styleDictionary.registerFormat({
+    name: 'javascript/full',
+    formatter ({ dictionary }) {
+      return jsFull(dictionary)
+    }
+  })
+
+  styleDictionary = await styleDictionary.extend({
+    tokens,
+    platforms: {
+      scss: {
+        transformGroup: 'tokens-js',
+        buildPath,
+        files: [
+          {
+            destination: 'tokens.scss',
+            format: 'scss/variables'
+          }
+        ]
+      },
+
+      json: {
+        transformGroup: 'tokens-js',
+        buildPath,
+        files: [
+          {
+            destination: 'tokens.json',
+            format: 'json/flat'
+          }
+        ]
+      },
+
+      ts: {
+        transformGroup: 'tokens-js',
+        buildPath,
+        files: [
+          {
+            destination: 'index.ts',
+            format: 'typescript/full'
+          },
+          {
+            destination: 'types.d.ts',
+            format: 'typescript/types-declaration'
+          }
+        ]
+      },
+
+      js: {
+        transformGroup: 'tokens-js',
+        buildPath,
+        files: [
+          {
+            destination: 'index.js',
+            format: 'javascript/full'
+          }
+        ]
+      },
+
+      css: {
+        transformGroup: 'tokens-js',
+        buildPath,
+        files: [
+          {
+            destination: 'tokens.css',
+            format: 'css/variables'
+          }
+        ]
+      }
+    }
+  })
+
+  // Weird trick to disable nasty logging
+  if (silent) {
+    // @ts-ignore
+    // eslint-disable-next-line no-console
+    console._log = console.log
+    // eslint-disable-next-line no-console
+    console.log = () => {}
+  }
+
+  styleDictionary.cleanAllPlatforms()
+
+  await new Promise(resolve => setTimeout(resolve, 10))
+
+  styleDictionary.buildAllPlatforms()
+
+  await new Promise(resolve => setTimeout(resolve, 10))
+
+  // Weird trick to disable nasty logging
+  if (silent) {
+    // @ts-ignore
+    // eslint-disable-next-line no-console
+    console.log = console._log
+  }
+}

src/index.ts

@@ -10,6 +10,7 @@ export interface NuxtDesignTokens extends ThemeTokens, DesignTokens {
 }
 
 export interface NuxtDesignTokensConfig {
+  server?: boolean
   tokens?: NuxtDesignTokens | boolean | string
 }
 
@@ -28,6 +29,7 @@ export interface ModulePublicRuntimeConfig {
 // Non-reactive data taken from initial boot
 export interface ModulePrivateRuntimeConfig {
   tokensDir?: string
+  server?: boolean
   tokensFilePaths?: Array<string>
 }