@things-factory/figure-ui 10.1.29 → 10.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/figure-ui",
-  "version": "10.1.29",
+  "version": "10.1.31",
   "publishConfig": {
     "access": "public",
     "@things-factory:registry": "https://registry.npmjs.org"
@@ -37,8 +37,8 @@
     "@operato/shell": "^10.0.0",
     "@operato/styles": "^10.0.0",
     "@operato/utils": "^10.0.0",
-    "@things-factory/figure-service": "^10.1.29",
+    "@things-factory/figure-service": "^10.1.31",
     "three": "^0.185.1"
   },
-  "gitHead": "e6bf9dec003fe5e794746aaeb5852b3b50478232"
+  "gitHead": "5213e6f9913b40ea2618a2111d9884b792dbaa01"
 }

package/test/brand-palette.test.ts

@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict'
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs'
+import { join, relative } from 'node:path'
 import test from 'node:test'
 
 /**
@@ -22,10 +22,13 @@ import test from 'node:test'
  */
 
 const HERE = import.meta.dirname
-const BRAND = join(HERE, '..', 'client', 'themes', 'brand.css')
-const THEMES = ['light.css', 'dark.css'].map(f => join(HERE, '..', 'client', 'themes', f))
-/** 저작 하네스. 이 저장소 안의 두 번째 사본 자리다. */
-const HARNESS = join(HERE, '..', '..', '..', 'test', 'browser', 'modeller-page.mjs')
+const FOLDER = 'harness-theme'
+const BRAND = join(HERE, '..', 'client', FOLDER, 'brand.css')
+const THEMES = ['light.css', 'dark.css'].map(f => join(HERE, '..', 'client', FOLDER, f))
+/** 저작 하네스 둘. 이 저장소 안의 두 번째 사본 자리다. */
+const HARNESSES = ['modeller-page.mjs', 'real-modeller.mjs'].map(f =>
+  join(HERE, '..', '..', '..', 'test', 'browser', f)
+)
 
 const read = (path: string) => readFileSync(path, 'utf8')
 
@@ -69,7 +72,7 @@ function colorOf(css: string, name: string): string {
 test('브랜드 색의 정본이 있다 — 없으면 아래 테스트가 다 통과해 버린다', () => {
   const brand = definitions(read(BRAND))
 
-  for (const name of ['--brand-figure', '--brand-figure-2', '--brand-figure-wash']) {
+  for (const name of ['--figure-brand', '--figure-brand-2', '--figure-brand-wash']) {
     assert.ok(brand.has(name), `${name} 이 brand.css 에 없다`)
   }
 })
@@ -92,30 +95,108 @@ test('하네스가 색을 스스로 정하지 않는다 — 이것이 원래 결
    * 하네스에서 보이는 화면과 앱에서 보일 화면이 다른 색이었고, 어느 쪽이 맞는지 알 방법이
    * 없었다.
    */
-  const css = read(HARNESS)
-  const own = [...definitions(css).keys()].filter(
-    name => name.startsWith('--md-sys-color-') || name.startsWith('--brand-')
+  for (const path of HARNESSES) {
+    const own = [...definitions(read(path)).keys()].filter(
+      name => name.startsWith('--md-sys-color-') || name.startsWith('--figure-')
+    )
+
+    assert.deepEqual(own, [], `${path} 가 색을 스스로 정한다: ${own.join(' · ')}`)
+  }
+})
+
+/*
+  이 셋은 `client/themes` 에 있었다. `@things-factory/builder` 의 `ThemeOverridePlugin` 이 모든 모듈의
+  `client/themes/*.css` 를 **파일 이름 하나당 하나만** 테마 묶음에 싣는다(앱이 맨 앞). 그래서 그 자리에
+  두면 두 가지로 무너진다 — 앱이 같은 이름을 갖는 순간 통째로 빠지거나(실제로 `light.css` · `dark.css`
+  가 figure 앱에서 그랬다), 이름을 비켜서 두면 앞의 것과 같은 선택자로 md-sys 칸을 덮어 묶음 순서가
+  색을 정한다. md-sys 슬롯은 모듈이 선언하지 않는다(ADR-0060 결정 2).
+
+  폴더가 `themes` 가 아니면 플러그인이 아예 보지 않는다. 그것이 이 폴더 이름이 하는 일이므로,
+  누가 되돌려 놓으면 여기서 빨강이 된다.
+*/
+test('figure-ui 는 client/themes 를 갖지 않는다 — 플러그인이 보는 자리다', () => {
+  const at = join(HERE, '..', 'client', 'themes')
+
+  assert.ok(
+    !existsSync(at),
+    `client/themes 가 다시 생겼다. 테마 묶음이 이 파일들을 집어 앱 색을 순서로 정하게 된다: ${at}`
   )
+})
 
-  assert.deepEqual(own, [], `하네스가 색을 스스로 정한다: ${own.join(' · ')}`)
+/*
+  `copy:files` 는 `copyfiles` 이고, 그것은 **지운 파일을 지우지 않는다.** `build:client` 도 clean 을 하지 않는다
+  (`copy:files && tsc` 뿐). 그래서 소스에서 css 를 옮기거나 지워도 산출물에는 옛 파일이 남고, 테마 묶음을 고르는
+  `ThemeOverridePlugin` 은 **산출물**을 glob 하므로 그 옛 파일을 계속 집는다.
+
+  이 폴더를 옮길 때 실제로 그랬다 — 소스는 `harness-theme` 인데 `dist-client/themes/` 의 세 파일이 그대로 남아
+  있었다. 위의 시험들은 소스를 읽으니 전부 초록이었다. UX 레인이 warehouse 에서 같은 것을 밟았다(화면이 옛 색
+  그대로였고 시험은 초록이었다).
+
+  그래서 산출물에만 있는 css 를 여기서 잡는다. 산출물이 아직 없으면 볼 것이 없다 — 그때는 건너뛴다.
+*/
+test('산출물에 소스에 없는 css 가 없다 — copyfiles 는 지운 것을 지우지 않는다', () => {
+  const source = join(HERE, '..', 'client')
+  const built = join(HERE, '..', 'dist-client')
+
+  if (!existsSync(built)) return
+
+  const cssUnder = (root: string): string[] => {
+    const found: string[] = []
+    const walk = (at: string) => {
+      for (const entry of readdirSync(at)) {
+        const full = join(at, entry)
+        if (statSync(full).isDirectory()) walk(full)
+        else if (entry.endsWith('.css')) found.push(relative(root, full))
+      }
+    }
+    walk(root)
+    return found.sort()
+  }
+
+  const orphans = cssUnder(built).filter(at => !existsSync(join(source, at)))
+
+  assert.deepEqual(
+    orphans,
+    [],
+    `산출물에만 있는 css: ${orphans.join(' · ')}\n` +
+      `소스에서 옮기거나 지운 것이 산출물에 남아 있다. 테마 묶음은 산출물을 보므로 이것이 계속 실린다.\n` +
+      `  rm -rf packages/figure-ui/dist-client && npm run build:client`
+  )
+})
+
+/*
+  옮긴 자리를 하네스가 가리키지 않으면 하네스는 스타일시트 없이 뜬다 — 오류 없이 무채색 화면이
+  되고, 아래 대비 시험들은 **어느 화면에도 없는 값**을 재게 된다.
+*/
+test('하네스 둘이 옮긴 팔레트를 가리킨다 — 밝은 것과 어두운 것 모두', () => {
+  for (const path of HARNESSES) {
+    const html = read(path)
+
+    for (const file of ['light.css', 'dark.css']) {
+      assert.ok(
+        html.includes(`/pkg/figure-ui/dist-client/${FOLDER}/${file}`),
+        `${path} 가 ${FOLDER}/${file} 를 싣지 않는다`
+      )
+    }
+  }
 })
 
 test('밝은 면과 어두운 면을 함께 든다 — 한쪽만 있으면 어두운 화면이 안 바뀐다', () => {
   const brand = read(BRAND)
 
-  assert.ok(definitions(brand).has('--brand-figure'), '밝은 면용이 없다')
-  assert.ok(definitions(brand).has('--brand-figure-2'), '어두운 면용이 없다')
+  assert.ok(definitions(brand).has('--figure-brand'), '밝은 면용이 없다')
+  assert.ok(definitions(brand).has('--figure-brand-2'), '어두운 면용이 없다')
 })
 
 test('브랜드 색 위의 흰 글자가 읽힌다 — 작은 글자 기준 4.5', () => {
-  const figure = colorOf(read(BRAND), '--brand-figure')
+  const figure = colorOf(read(BRAND), '--figure-brand')
   const measured = contrast(figure, '#ffffff')
 
   assert.ok(measured >= 4.5, `${figure} 위 흰 글자 대비가 ${measured.toFixed(2)} 다`)
 })
 
 test('어두운 면 위의 브랜드 색이 읽힌다 — 그쪽은 -2 가 맡는다', () => {
-  const bright = colorOf(read(BRAND), '--brand-figure-2')
+  const bright = colorOf(read(BRAND), '--figure-brand-2')
   const surface = colorOf(read(THEMES[1]!), '--md-sys-color-surface')
   const measured = contrast(bright, surface)
 
@@ -124,9 +205,9 @@ test('어두운 면 위의 브랜드 색이 읽힌다 — 그쪽은 -2 가 맡
 
 test('밝은 쪽 값을 어두운 면에 쓰지 않는다 — 이름이 뜻이고 값은 자리에 따라 다르다', () => {
   /*
-   * `--brand-figure` 를 어두운 면에 그대로 쓰면 대비 1.6 이라 사라진다. 그 실수를 잡는다.
+   * `--figure-brand` 를 어두운 면에 그대로 쓰면 대비 1.6 이라 사라진다. 그 실수를 잡는다.
    */
-  const figure = colorOf(read(BRAND), '--brand-figure')
+  const figure = colorOf(read(BRAND), '--figure-brand')
   const darkSurface = colorOf(read(THEMES[1]!), '--md-sys-color-surface')
 
   assert.ok(
@@ -135,7 +216,7 @@ test('밝은 쪽 값을 어두운 면에 쓰지 않는다 — 이름이 뜻이
   )
 
   const dark = read(THEMES[1]!)
-  assert.match(dark, /--md-sys-color-primary:\s*var\(--brand-figure-2\)/, '어두운 테마가 -2 를 안 쓴다')
+  assert.match(dark, /--md-sys-color-primary:\s*var\(--figure-brand-2\)/, '어두운 테마가 -2 를 안 쓴다')
 })
 
 test('글자 셋이 다 읽힌다 — 흐린 것까지', () => {