@primitiv-ui/tokens 0.1.0

package/src/server.test.ts

@@ -0,0 +1,159 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import http from 'node:http'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import os from 'node:os'
+
+import { createSyncServer } from './server'
+
+describe('createSyncServer', () => {
+  let outDir: string
+  let server: http.Server
+  let port: number
+
+  beforeEach(async () => {
+    outDir = await fs.mkdtemp(path.join(os.tmpdir(), 'tokens-sync-'))
+    server = createSyncServer({ outDir })
+    await new Promise<void>((resolve) =>
+      server.listen(0, '127.0.0.1', () => resolve()),
+    )
+    const address = server.address()
+    if (typeof address === 'string' || address === null) {
+      throw new Error('server did not bind to a port')
+    }
+    port = address.port
+  })
+
+  afterEach(async () => {
+    await new Promise<void>((resolve, reject) =>
+      server.close((err) => (err ? reject(err) : resolve())),
+    )
+    await fs.rm(outDir, { recursive: true, force: true })
+  })
+
+  function url(path = '/sync'): string {
+    return `http://127.0.0.1:${port}${path}`
+  }
+
+  it('writes the six DTCG files to disk on POST /sync', async () => {
+    const payload = {
+      primitives: {
+        'font-family': { sans: { $type: 'string', $value: 'Asta Sans' } },
+      },
+      palette: { light: {}, dark: {} },
+      foreground: { light: {}, dark: {} },
+      intent: { light: {}, dark: {} },
+      context: { comfortable: {} },
+      interaction: {},
+    }
+
+    const response = await fetch(url(), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+
+    expect(response.status).toBe(200)
+    expect(
+      JSON.parse(
+        await fs.readFile(path.join(outDir, 'primitives.json'), 'utf8'),
+      ),
+    ).toEqual(payload.primitives)
+    expect(
+      JSON.parse(
+        await fs.readFile(path.join(outDir, 'palette.json'), 'utf8'),
+      ),
+    ).toEqual(payload.palette)
+    expect(
+      JSON.parse(
+        await fs.readFile(path.join(outDir, 'foreground.json'), 'utf8'),
+      ),
+    ).toEqual(payload.foreground)
+    expect(
+      JSON.parse(
+        await fs.readFile(path.join(outDir, 'intent.json'), 'utf8'),
+      ),
+    ).toEqual(payload.intent)
+    expect(
+      JSON.parse(
+        await fs.readFile(path.join(outDir, 'context.json'), 'utf8'),
+      ),
+    ).toEqual(payload.context)
+    expect(
+      JSON.parse(
+        await fs.readFile(path.join(outDir, 'interaction.json'), 'utf8'),
+      ),
+    ).toEqual(payload.interaction)
+  })
+
+  it('includes the CORS Allow-Origin header on a successful sync', async () => {
+    const response = await fetch(url(), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ primitives: {}, palette: {}, intent: {}, context: {}, interaction: {} }),
+    })
+
+    expect(response.headers.get('access-control-allow-origin')).toBe('*')
+  })
+
+  it('answers OPTIONS preflight with CORS headers and 204', async () => {
+    const response = await fetch(url(), { method: 'OPTIONS' })
+
+    expect(response.status).toBe(204)
+    expect(response.headers.get('access-control-allow-origin')).toBe('*')
+    expect(response.headers.get('access-control-allow-methods')).toContain(
+      'POST',
+    )
+    expect(response.headers.get('access-control-allow-headers')).toContain(
+      'Content-Type',
+    )
+  })
+
+  it('returns 400 when the request body is not valid JSON', async () => {
+    const response = await fetch(url(), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: 'not json',
+    })
+
+    expect(response.status).toBe(400)
+  })
+
+  it('returns 404 for paths other than /sync', async () => {
+    const response = await fetch(url('/other'), { method: 'POST' })
+
+    expect(response.status).toBe(404)
+  })
+
+  it('returns 405 for unsupported methods on /sync', async () => {
+    const response = await fetch(url(), { method: 'GET' })
+
+    expect(response.status).toBe(405)
+  })
+
+  it('writes pretty-printed JSON with a trailing newline', async () => {
+    const payload = {
+      primitives: {
+        color: { red: { $type: 'color', $value: '#ff0000' } },
+      },
+      palette: {},
+      intent: {},
+      context: {},
+      interaction: {},
+    }
+
+    await fetch(url(), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+
+    const written = await fs.readFile(
+      path.join(outDir, 'primitives.json'),
+      'utf8',
+    )
+
+    expect(written).toMatch(/\n$/)
+    expect(written).toContain('  "color"')
+  })
+})

package/src/server.ts

@@ -0,0 +1,89 @@
+/**
+ * Tiny HTTP server that accepts a DTCG payload from the sync plugin and
+ * writes the three layer files into `outDir` atomically.
+ *
+ * Designed for local dev only: it binds to 127.0.0.1, replies with a
+ * permissive CORS allow-list, and has no auth. Run it via the
+ * `sync:serve` script — never expose it on a public interface.
+ */
+
+import http from 'node:http'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+import type { DtcgFiles } from './dtcg'
+
+export interface SyncServerOptions {
+  /** Directory the three DTCG files are written into. */
+  outDir: string
+}
+
+const CORS_HEADERS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+} as const
+
+const DTCG_FILE_NAMES = ['primitives', 'palette', 'foreground', 'intent', 'context', 'interaction'] as const
+
+/** Creates the HTTP server. Call `.listen(port)` to start accepting requests. */
+export function createSyncServer(options: SyncServerOptions): http.Server {
+  return http.createServer((req, res) => {
+    void handleRequest(req, res, options)
+  })
+}
+
+async function handleRequest(
+  req: http.IncomingMessage,
+  res: http.ServerResponse,
+  options: SyncServerOptions,
+): Promise<void> {
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204, CORS_HEADERS)
+    res.end()
+    return
+  }
+
+  if (req.url !== '/sync') {
+    res.writeHead(404, CORS_HEADERS)
+    res.end()
+    return
+  }
+
+  if (req.method !== 'POST') {
+    res.writeHead(405, { ...CORS_HEADERS, Allow: 'POST, OPTIONS' })
+    res.end()
+    return
+  }
+
+  let body = ''
+  for await (const chunk of req) body += chunk
+
+  let payload: DtcgFiles
+  try {
+    payload = JSON.parse(body)
+  } catch {
+    res.writeHead(400, { ...CORS_HEADERS, 'Content-Type': 'application/json' })
+    res.end(JSON.stringify({ error: 'Invalid JSON' }))
+    return
+  }
+
+  await writeDtcgFiles(payload, options.outDir)
+
+  res.writeHead(200, { ...CORS_HEADERS, 'Content-Type': 'application/json' })
+  res.end(JSON.stringify({ ok: true }))
+}
+
+async function writeDtcgFiles(
+  files: DtcgFiles,
+  outDir: string,
+): Promise<void> {
+  await fs.mkdir(outDir, { recursive: true })
+  for (const name of DTCG_FILE_NAMES) {
+    const target = path.join(outDir, `${name}.json`)
+    const tmp = `${target}.tmp`
+    const json = JSON.stringify(files[name] ?? {}, null, 2) + '\n'
+    await fs.writeFile(tmp, json, 'utf8')
+    await fs.rename(tmp, target)
+  }
+}