docs: update

Author: sonofmagic

packages/weapp-tailwindcss/test/bundlers/gulp.unit.test.ts

@@ -0,0 +1,108 @@
+import type { Transform } from 'node:stream'
+import { Buffer } from 'node:buffer'
+import Vinyl from 'vinyl'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createPlugins } from '@/bundlers/gulp'
+import { createCache } from '@/cache'
+
+const getCompilerContextMock = vi.fn((_options?: unknown) => currentContext)
+
+vi.mock('@/context', () => ({
+  getCompilerContext: (options?: unknown) => getCompilerContextMock(options),
+}))
+
+let currentContext: any
+
+function createFile(path: string, contents: string) {
+  return new Vinyl({
+    cwd: '/',
+    base: '/src',
+    path,
+    contents: Buffer.from(contents),
+  })
+}
+
+async function runTransform(transform: Transform, file: Vinyl) {
+  return await new Promise<Vinyl>((resolve, reject) => {
+    transform.once('data', resolve)
+    transform.once('error', reject)
+    transform.write(file)
+    transform.end()
+  })
+}
+
+describe('bundlers/gulp createPlugins', () => {
+  let styleHandler: ReturnType<typeof vi.fn>
+  let templateHandler: ReturnType<typeof vi.fn>
+  let jsHandler: ReturnType<typeof vi.fn>
+  let setMangleRuntimeSet: ReturnType<typeof vi.fn>
+  let twPatcher: any
+
+  beforeEach(() => {
+    const cache = createCache()
+    const runtimeSet = new Set(['foo'])
+
+    styleHandler = vi.fn(async (source: string) => ({
+      css: `css:${source}`,
+    }))
+    templateHandler = vi.fn(async (source: string) => `tpl:${source}`)
+    jsHandler = vi.fn(async (source: string) => ({ code: `js:${source}` }))
+    setMangleRuntimeSet = vi.fn()
+    twPatcher = {
+      patch: vi.fn(),
+      getClassSet: vi.fn(async () => runtimeSet),
+      getClassSetV3: vi.fn(async () => runtimeSet),
+      majorVersion: 3,
+    }
+
+    currentContext = {
+      templateHandler,
+      styleHandler,
+      jsHandler,
+      setMangleRuntimeSet,
+      cache,
+      twPatcher,
+    }
+
+    getCompilerContextMock.mockClear()
+  })
+
+  it('processes files and caches results across runs', async () => {
+    const plugins = createPlugins()
+    expect(getCompilerContextMock).toHaveBeenCalled()
+    expect(twPatcher.patch).toHaveBeenCalledTimes(1)
+
+    const cssFile = createFile('/src/app.wxss', '.foo { color: red; }')
+    const processedCss = await runTransform(plugins.transformWxss(), cssFile)
+    expect(processedCss.contents?.toString()).toBe('css:.foo { color: red; }')
+    expect(styleHandler).toHaveBeenCalledTimes(1)
+    expect(setMangleRuntimeSet).toHaveBeenCalledTimes(1)
+    expect([...setMangleRuntimeSet.mock.calls[0][0]]).toEqual(['foo'])
+
+    const cachedCssFile = createFile('/src/app.wxss', '.foo { color: red; }')
+    const cachedCss = await runTransform(plugins.transformWxss(), cachedCssFile)
+    expect(styleHandler).toHaveBeenCalledTimes(1)
+    expect(cachedCss.contents?.toString()).toBe('css:.foo { color: red; }')
+
+    // Ensure runtime set is reused for JS handler
+    const jsFile = createFile('/src/app.js', 'console.log("hi")')
+    const processedJs = await runTransform(plugins.transformJs(), jsFile)
+    expect(jsHandler).toHaveBeenCalledTimes(1)
+    const runtimeSetFromCss = setMangleRuntimeSet.mock.calls[0][0]
+    expect(jsHandler).toHaveBeenCalledWith('console.log("hi")', runtimeSetFromCss, {})
+    expect(processedJs.contents?.toString()).toBe('js:console.log("hi")')
+
+    const cachedJsFile = createFile('/src/app.js', 'console.log("hi")')
+    await runTransform(plugins.transformJs(), cachedJsFile)
+    expect(jsHandler).toHaveBeenCalledTimes(1)
+
+    const wxmlFile = createFile('/src/app.wxml', '<view class="foo"></view>')
+    const processedHtml = await runTransform(plugins.transformWxml(), wxmlFile)
+    expect(templateHandler).toHaveBeenCalledTimes(1)
+    expect(processedHtml.contents?.toString()).toBe('tpl:<view class="foo"></view>')
+
+    const cachedHtmlFile = createFile('/src/app.wxml', '<view class="foo"></view>')
+    await runTransform(plugins.transformWxml(), cachedHtmlFile)
+    expect(templateHandler).toHaveBeenCalledTimes(1)
+  })
+})

packages/weapp-tailwindcss/test/bundlers/vite-plugin.unit.test.ts

@@ -0,0 +1,227 @@
+import type { OutputAsset, OutputChunk } from 'rollup'
+import type { Plugin, ResolvedConfig, TransformResult } from 'vite'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { UnifiedViteWeappTailwindcssPlugin } from '@/bundlers/vite'
+import { createCache } from '@/cache'
+
+const postcssHtmlTransformMock = vi.hoisted(() => vi.fn(() => ({ postcssPlugin: 'mocked-html-transform' }))) as ReturnType<typeof vi.fn>
+vi.mock('@weapp-tailwindcss/postcss/html-transform', () => ({
+  default: postcssHtmlTransformMock,
+}))
+
+const transformUVueMock = vi.hoisted(() => vi.fn((code: string, id: string) => ({ code: `uvue:${id}:${code}` }))) as ReturnType<typeof vi.fn>
+vi.mock('@/uni-app-x', () => ({
+  transformUVue: transformUVueMock,
+}))
+
+const getCompilerContextMock = vi.fn(() => currentContext)
+vi.mock('@/context', () => ({
+  getCompilerContext: (options?: unknown) => getCompilerContextMock(options),
+}))
+
+type InternalContext = ReturnType<typeof createContext>
+
+let currentContext: InternalContext
+
+function createContext(overrides: Partial<InternalContext> = {}) {
+  const cache = createCache()
+  const runtimeSet = new Set(['alpha'])
+
+  return {
+    disabled: false,
+    onLoad: vi.fn(),
+    onStart: vi.fn(),
+    onEnd: vi.fn(),
+    onUpdate: vi.fn(),
+    templateHandler: vi.fn(async (code: string) => `tpl:${code}`),
+    styleHandler: vi.fn(async (code: string) => ({
+      css: `css:${code}`,
+      map: {
+        toJSON: () => ({
+          version: 3,
+          file: 'style.css',
+          sources: ['style.css'],
+          names: [],
+          mappings: 'AAAA',
+          sourcesContent: [code],
+        }),
+      },
+    })),
+    jsHandler: vi.fn(async (code: string) => ({ code: `js:${code}` })),
+    mainCssChunkMatcher: vi.fn(() => true),
+    appType: 'uni-app',
+    setMangleRuntimeSet: vi.fn(),
+    cache,
+    cssMatcher: (file: string) => file.endsWith('.css'),
+    htmlMatcher: (file: string) => file.endsWith('.wxml'),
+    jsMatcher: (file: string) => file.endsWith('.js'),
+    wxsMatcher: () => false,
+    twPatcher: {
+      patch: vi.fn(),
+      getClassSet: vi.fn(async () => runtimeSet),
+      majorVersion: 3,
+      extract: vi.fn(async () => ({ classSet: runtimeSet })),
+    },
+    uniAppX: undefined as any,
+    runtimeLoaderPath: undefined,
+    mainChunkRegex: undefined,
+    cssEntries: undefined,
+    customReplaceDictionary: undefined,
+    ...overrides,
+  }
+}
+
+function createRollupAsset(source: string): OutputAsset {
+  return {
+    type: 'asset',
+    fileName: 'index.wxml',
+    name: undefined,
+    source,
+    needsCodeReference: false,
+  }
+}
+
+function createRollupChunk(code: string): OutputChunk {
+  return {
+    type: 'chunk',
+    fileName: 'index.js',
+    name: 'index',
+    code,
+    map: null,
+    facadeModuleId: null,
+    moduleIds: [],
+    modules: {},
+    imports: [],
+    exports: [],
+    dynamicImports: [],
+    implicitlyLoadedBefore: [],
+    importedBindings: {},
+    isEntry: true,
+    isDynamicEntry: false,
+    referencedFiles: [],
+  }
+}
+
+describe('bundlers/vite UnifiedViteWeappTailwindcssPlugin', () => {
+  beforeEach(() => {
+    currentContext = createContext()
+    getCompilerContextMock.mockClear()
+    postcssHtmlTransformMock.mockClear()
+    transformUVueMock.mockClear()
+  })
+
+  it('generates bundle assets and leverages cache', async () => {
+    const plugins = UnifiedViteWeappTailwindcssPlugin()
+    expect(plugins).toBeDefined()
+    const postPlugin = plugins?.find(plugin => plugin.name === 'weapp-tailwindcss:adaptor:post') as Plugin
+    expect(postPlugin).toBeTruthy()
+    expect(currentContext.onLoad).toHaveBeenCalledTimes(1)
+    expect(currentContext.twPatcher.patch).toHaveBeenCalledTimes(1)
+
+    const config = {
+      css: {
+        postcss: {
+          plugins: [
+            { postcssPlugin: 'postcss-html-transform' },
+            { postcssPlugin: 'other' },
+          ],
+        },
+      },
+    } as unknown as ResolvedConfig
+
+    postPlugin.configResolved?.(config)
+    expect(postcssHtmlTransformMock).toHaveBeenCalledTimes(1)
+    expect(config.css?.postcss?.plugins?.[0]).toEqual({ postcssPlugin: 'mocked-html-transform' })
+
+    const html = '<view class="foo">bar</view>'
+    const js = 'const demo = 1'
+    const css = '.foo { color: red; }'
+
+    const bundle = {
+      'index.wxml': createRollupAsset(html),
+      'index.js': createRollupChunk(js),
+      'index.css': {
+        ...createRollupAsset(css),
+        fileName: 'index.css',
+      },
+    }
+
+    await postPlugin.generateBundle?.({} as any, bundle)
+
+    expect(currentContext.onStart).toHaveBeenCalledTimes(1)
+    expect(currentContext.onEnd).toHaveBeenCalledTimes(1)
+    expect(currentContext.setMangleRuntimeSet).toHaveBeenCalledTimes(1)
+    expect([...currentContext.setMangleRuntimeSet.mock.calls[0][0]]).toEqual(['alpha'])
+
+    expect(currentContext.templateHandler).toHaveBeenCalledTimes(1)
+    expect((bundle['index.wxml'] as OutputAsset).source).toBe(`tpl:${html}`)
+
+    expect(currentContext.jsHandler).toHaveBeenCalledTimes(1)
+    expect((bundle['index.js'] as OutputChunk).code).toBe(`js:${js}`)
+
+    expect(currentContext.styleHandler).toHaveBeenCalledTimes(1)
+    expect((bundle['index.css'] as OutputAsset).source).toBe(`css:${css}`)
+
+    expect(currentContext.onUpdate).toHaveBeenCalledTimes(3)
+
+    const bundleSecondRun = {
+      'index.wxml': createRollupAsset(html),
+      'index.js': createRollupChunk(js),
+      'index.css': {
+        ...createRollupAsset(css),
+        fileName: 'index.css',
+      },
+    }
+
+    await postPlugin.generateBundle?.({} as any, bundleSecondRun)
+
+    expect(currentContext.templateHandler).toHaveBeenCalledTimes(1)
+    expect(currentContext.jsHandler).toHaveBeenCalledTimes(1)
+    expect(currentContext.styleHandler).toHaveBeenCalledTimes(1)
+    expect(currentContext.setMangleRuntimeSet).toHaveBeenCalledTimes(2)
+    expect(currentContext.onStart).toHaveBeenCalledTimes(2)
+    expect(currentContext.onEnd).toHaveBeenCalledTimes(2)
+    expect(currentContext.onUpdate).toHaveBeenCalledTimes(3)
+  })
+
+  it('returns undefined when disabled', () => {
+    currentContext = createContext({ disabled: true })
+    const plugins = UnifiedViteWeappTailwindcssPlugin()
+    expect(plugins).toBeUndefined()
+    expect(currentContext.twPatcher.patch).not.toHaveBeenCalled()
+  })
+
+  it('provides uni-app-x specific transforms', async () => {
+    const runtimeSet = new Set(['uvue'])
+    currentContext = createContext()
+    currentContext.uniAppX = { enabled: true }
+    currentContext.twPatcher = {
+      patch: vi.fn(),
+      getClassSet: vi.fn(async () => runtimeSet),
+      extract: vi.fn(async () => ({ classSet: runtimeSet })),
+      majorVersion: 4,
+    }
+    currentContext.setMangleRuntimeSet = vi.fn()
+    currentContext.onStart = vi.fn()
+    currentContext.onEnd = vi.fn()
+
+    const plugins = UnifiedViteWeappTailwindcssPlugin()
+    expect(plugins).toBeDefined()
+    const cssPlugin = plugins?.find(plugin => plugin.name === 'weapp-tailwindcss:uni-app-x:css') as Plugin
+    const cssPrePlugin = plugins?.find(plugin => plugin.name === 'weapp-tailwindcss:uni-app-x:css:pre') as Plugin
+    const nvuePlugin = plugins?.find(plugin => plugin.name === 'weapp-tailwindcss:uni-app-x:nvue') as Plugin
+
+    expect(cssPlugin?.transform).toBeTypeOf('function')
+    expect(cssPrePlugin?.transform).toBeTypeOf('function')
+    expect(nvuePlugin?.transform).toBeTypeOf('function')
+
+    const cssResult = await cssPlugin.transform?.('.foo { color: red; }', 'App.uvue?vue&type=style&index=0') as TransformResult
+    expect(cssResult?.code).toBe('css:.foo { color: red; }')
+    expect(cssResult?.map).toBeTruthy()
+
+    await nvuePlugin.buildStart?.()
+    const nvueResult = nvuePlugin.transform?.('console.log("x")', 'App.nvue')
+    expect(transformUVueMock).toHaveBeenCalledWith('console.log("x")', 'App.nvue', currentContext.jsHandler, runtimeSet)
+    expect(nvueResult).toEqual({ code: 'uvue:App.nvue:console.log("x")' })
+  })
+})