@tnotesjs/ui 0.2.0 → 0.3.0

package/src/excalidraw/fonts.test.ts

@@ -1,66 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import {
-  getExcalidrawAssetPath,
-  inlineExcalidrawFonts,
-  resolveFontUrl,
-  setExcalidrawAssetPath
-} from './fonts'
-
-const SVG = `<svg><style>@font-face{src:url(https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/fonts/Virgil/Virgil-Regular.woff2)}</style></svg>`
-
-function fetchReturning(bytes: number[], ok = true) {
-  return vi.fn(async () => ({
-    ok,
-    status: ok ? 200 : 404,
-    arrayBuffer: async () => new Uint8Array(bytes).buffer
-  })) as unknown as typeof fetch
-}
-
-describe('画布字体自包含', () => {
-  it('把字体基址换成配置的本地目录', () => {
-    expect(
-      resolveFontUrl(
-        'https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/fonts/Virgil/Virgil-Regular.woff2',
-        '/excalidraw/'
-      )
-    ).toBe('/excalidraw/fonts/Virgil/Virgil-Regular.woff2')
-    expect(resolveFontUrl('/fonts/Virgil/x.woff2')).toBe('/fonts/Virgil/x.woff2')
-  })
-
-  it('把 SVG 里的字体内联成 data URL，不再有外链', async () => {
-    const result = await inlineExcalidrawFonts(SVG, {
-      base: '/excalidraw/',
-      fetchImpl: fetchReturning([1, 2, 3, 4])
-    })
-
-    expect(result.inlined).toBe(1)
-    expect(result.remaining).toEqual([])
-    expect(result.svg).toContain('data:font/woff2;base64,')
-    expect(result.svg).not.toContain('esm.sh')
-  })
-
-  it('取不到字体时如实报告 remaining，不静默失败', async () => {
-    const result = await inlineExcalidrawFonts(SVG, {
-      base: '/excalidraw/',
-      fetchImpl: fetchReturning([], false)
-    })
-
-    expect(result.inlined).toBe(0)
-    expect(result.remaining).toEqual(['/excalidraw/fonts/Virgil/Virgil-Regular.woff2'])
-    expect(result.svg).toBe(SVG)
-  })
-
-  it('没有字体引用时不做任何事', async () => {
-    const result = await inlineExcalidrawFonts('<svg></svg>', {
-      fetchImpl: fetchReturning([1])
-    })
-    expect(result.inlined).toBe(0)
-    expect(result.remaining).toEqual([])
-  })
-
-  it('资产基址可设置与读取（离线必需）', () => {
-    setExcalidrawAssetPath('/excalidraw/')
-    expect(getExcalidrawAssetPath()).toBe('/excalidraw/')
-  })
-})

package/src/excalidraw/renderer.test.ts

@@ -1,148 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { createExcalidrawSvgRenderer } from './renderer'
-import { SvgCache } from './scene'
-
-const scene = (extra: Record<string, unknown> = {}) =>
-  JSON.stringify({
-    type: 'excalidraw',
-    elements: [{ id: 'rect-1' }],
-    appState: {},
-    files: {},
-    ...extra
-  })
-
-function setup(options: {
-  content: string
-  theme?: 'light' | 'dark'
-  render?: () => Promise<string>
-}) {
-  const renderCalls: Array<{ dark: boolean }> = []
-  const cache = new SvgCache(4)
-  const renderer = createExcalidrawSvgRenderer({
-    getContent: () => options.content,
-    getTheme: () => options.theme ?? 'light',
-    cache,
-    loadExporter: async () => ({
-      renderExcalidrawSvg: async (_scene, exportOptions) => {
-        renderCalls.push(exportOptions)
-        if (options.render) return await options.render()
-        return `<svg data-dark="${exportOptions.dark}">ok</svg>`
-      }
-    })
-  })
-  return { renderer, renderCalls, cache }
-}
-
-beforeEach(() => {
-  vi.restoreAllMocks()
-})
-
-describe('只读画布渲染器', () => {
-  it('渲染成功的 SVG 变成 data URL，不触碰文件系统', async () => {
-    const { renderer, renderCalls } = setup({ content: scene() })
-    await renderer.render()
-
-    expect(renderer.state.value).toBe('ready')
-    expect(renderer.dataUrl.value).toMatch(/^data:image\/svg\+xml;charset=utf-8,/)
-    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('<svg')
-    expect(renderCalls).toHaveLength(1)
-  })
-
-  it('相同内容与主题命中缓存，不重复导出', async () => {
-    const cache = new SvgCache(4)
-    const calls: number[] = []
-    const make = () =>
-      createExcalidrawSvgRenderer({
-        getContent: () => scene(),
-        getTheme: () => 'light',
-        cache,
-        loadExporter: async () => ({
-          renderExcalidrawSvg: async () => {
-            calls.push(1)
-            return '<svg>once</svg>'
-          }
-        })
-      })
-    await make().render()
-    await make().render()
-    expect(calls).toHaveLength(1)
-  })
-
-  it('深色主题单独缓存，导出选项跟随主题', async () => {
-    const { renderer, renderCalls, cache } = setup({ content: scene(), theme: 'dark' })
-    await renderer.render()
-    expect(renderCalls[0]).toEqual({ dark: true })
-    expect(cache.size).toBe(1)
-    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('data-dark="true"')
-  })
-
-  it('非法 JSON 与空场景进入错误态，且不调用导出器', async () => {
-    const broken = setup({ content: '{ nope' })
-    await broken.renderer.render()
-    expect(broken.renderer.state.value).toBe('error')
-    expect(broken.renderer.errorReason.value).toContain('合法 JSON')
-    expect(broken.renderCalls).toHaveLength(0)
-
-    const empty = setup({ content: JSON.stringify({ type: 'excalidraw', elements: [] }) })
-    await empty.renderer.render()
-    expect(empty.renderer.state.value).toBe('error')
-    expect(empty.renderer.errorReason.value).toBe('空画布')
-  })
-
-  it('导出抛错时进入错误态而不是崩掉', async () => {
-    const { renderer } = setup({
-      content: scene(),
-      render: async () => {
-        throw new Error('导出失败')
-      }
-    })
-    await renderer.render()
-    expect(renderer.state.value).toBe('error')
-    expect(renderer.errorReason.value).toBe('导出失败')
-    expect(renderer.dataUrl.value).toBe('')
-  })
-
-  it('在途结果过期时被丢弃（内容已变化）', async () => {
-    let release: ((svg: string) => void) | undefined
-    const calls: string[] = []
-    let content = scene()
-    const renderer = createExcalidrawSvgRenderer({
-      getContent: () => content,
-      getTheme: () => 'light',
-      cache: new SvgCache(4),
-      loadExporter: async () => ({
-        renderExcalidrawSvg: async () => {
-          calls.push(content)
-          if (calls.length === 1) {
-            return await new Promise<string>((resolve) => {
-              release = resolve
-            })
-          }
-          return '<svg>new</svg>'
-        }
-      })
-    })
-
-    const first = renderer.render()
-    content = scene({ elements: [{ id: 'newer' }] })
-    const second = renderer.render()
-    // 等两次 render 都进入 exporter（动态 import 需要一个微任务）
-    for (let tick = 0; tick < 5 && !release; tick += 1) await Promise.resolve()
-    release?.('<svg>stale</svg>')
-    await Promise.all([first, second])
-
-    expect(decodeURIComponent(renderer.dataUrl.value)).toContain('new')
-    expect(decodeURIComponent(renderer.dataUrl.value)).not.toContain('stale')
-  })
-
-  it('释放后清空 data URL，之后再渲染不再产生输出', async () => {
-    const { renderer } = setup({ content: scene() })
-    await renderer.render()
-    renderer.dispose()
-    expect(renderer.dataUrl.value).toBe('')
-    await renderer.render()
-    expect(renderer.state.value).toBe('idle')
-    expect(renderer.dataUrl.value).toBe('')
-  })
-})

package/src/markdown/image.test.ts

@@ -1,86 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  formatImageAttrs,
-  formatImageWidthAttr,
-  normalizeImageAlign,
-  normalizeImageWidth,
-  parseImageAttrs,
-  parseImageWidthAttr,
-  pasteDisplayWidthPx,
-  serializeImageMarkdown
-} from './image'
-
-describe('image markdown helpers', () => {
-  it('accepts w and width, with or without a percent sign', () => {
-    expect(parseImageWidthAttr(' {w=50%} ')).toEqual({ width: '50%', rest: '' })
-    expect(parseImageWidthAttr('{width=33}')).toEqual({ width: '33%', rest: '' })
-    expect(parseImageWidthAttr('not-an-attr')).toEqual({
-      width: '',
-      rest: 'not-an-attr'
-    })
-  })
-
-  it('folds pasted bitmap width by device pixel ratio', () => {
-    expect(pasteDisplayWidthPx(800, 2)).toBe('400px')
-    expect(pasteDisplayWidthPx(400, 1)).toBe('400px')
-    expect(pasteDisplayWidthPx(20, 2)).toBe('')
-    expect(pasteDisplayWidthPx(0, 2)).toBe('')
-  })
-
-  it('accepts pixel widths from drag-resize', () => {
-    expect(parseImageWidthAttr('{w=400px}')).toEqual({ width: '400px', rest: '' })
-    expect(normalizeImageWidth('400px')).toBe('400px')
-    expect(normalizeImageWidth('8px')).toBe('')
-  })
-
-  it('parses alignment beside width in one brace group', () => {
-    expect(parseImageAttrs('{w=50% align=center}')).toEqual({
-      width: '50%',
-      align: 'center',
-      rest: ''
-    })
-    expect(parseImageAttrs('{align=right}')).toEqual({
-      width: '',
-      align: 'right',
-      rest: ''
-    })
-    expect(parseImageAttrs('{w=400px,align=center}')).toEqual({
-      width: '400px',
-      align: 'center',
-      rest: ''
-    })
-    expect(normalizeImageAlign('middle')).toBe('center')
-    expect(formatImageAttrs({ width: '400px', align: 'center' })).toBe('{w=400px align=center}')
-    expect(formatImageAttrs({ align: 'left' })).toBe('')
-  })
-
-  it('rejects empty, zero, and over-wide values', () => {
-    expect(normalizeImageWidth('')).toBe('')
-    expect(normalizeImageWidth('0%')).toBe('')
-    expect(normalizeImageWidth('120%')).toBe('')
-    expect(normalizeImageWidth('auto')).toBe('')
-  })
-
-  it('serializes caption as alt and omits natural width', () => {
-    expect(
-      serializeImageMarkdown({
-        alt: '知识库资源示意',
-        src: '../assets/pixel.svg',
-        width: '50%'
-      })
-    ).toBe('![知识库资源示意](../assets/pixel.svg) {w=50%}')
-    expect(serializeImageMarkdown({ alt: '', src: '../assets/pixel.svg' })).toBe(
-      '![](../assets/pixel.svg)'
-    )
-    expect(formatImageWidthAttr('100')).toBe('{w=100%}')
-    expect(
-      serializeImageMarkdown({
-        alt: '',
-        src: '../assets/shot.png',
-        width: '400px',
-        align: 'right'
-      })
-    ).toBe('![](../assets/shot.png) {w=400px align=right}')
-  })
-})

package/src/swiper/hydrate.test.ts

@@ -1,61 +0,0 @@
-// @vitest-environment happy-dom
-
-import { describe, expect, it } from 'vitest'
-
-import { hydrateTnSwipers } from './hydrate'
-
-function swiperShell(titles: string[]): HTMLElement {
-  const root = document.createElement('div')
-  root.innerHTML = `
-    <div class="tn-swiper">
-      <div class="tn-swiper-tabs"></div>
-      <div class="swiper-container">
-        <div class="swiper-wrapper">
-          ${titles
-            .map(
-              (title) =>
-                `<div class="swiper-slide" data-title="${title}"><img alt="${title}" src="/${title}.svg"></div>`
-            )
-            .join('')}
-        </div>
-      </div>
-    </div>
-  `
-  document.body.append(root)
-  return root
-}
-
-describe('hydrateTnSwipers', () => {
-  it('builds tabs and shows only the active slide', () => {
-    const root = swiperShell(['A', 'B', 'C'])
-    expect(hydrateTnSwipers(root)).toBe(1)
-
-    const host = root.querySelector('.tn-swiper')!
-    const tabs = [...host.querySelectorAll('.tn-tab')].map((tab) => tab.textContent)
-    expect(tabs).toEqual(['A', 'B', 'C'])
-    expect(host.querySelectorAll('.tn-tab-nav')).toHaveLength(3) // < / >
-
-    const slides = [...host.querySelectorAll('.swiper-slide')] as HTMLElement[]
-    expect(slides[0]!.classList.contains('is-active')).toBe(true)
-    expect(slides[0]!.hidden).toBe(false)
-    expect(slides[1]!.hidden).toBe(true)
-    expect(slides[2]!.hidden).toBe(true)
-
-    ;(host.querySelectorAll('.tn-tab')[1] as HTMLButtonElement).click()
-    expect(slides[0]!.hidden).toBe(true)
-    expect(slides[1]!.hidden).toBe(false)
-    expect(slides[1]!.classList.contains('is-active')).toBe(true)
-
-    // Idempotent
-    expect(hydrateTnSwipers(root)).toBe(0)
-    root.remove()
-  })
-
-  it('omits the tab bar for a single slide', () => {
-    const root = swiperShell(['solo'])
-    hydrateTnSwipers(root)
-    expect(root.querySelector('.tn-swiper-tabs')).toBeNull()
-    expect(root.querySelector('.swiper-slide')!.classList.contains('is-active')).toBe(true)
-    root.remove()
-  })
-})