feat: metro transformer and patch bare metro (#87)

* feat: metro transformer and patch bare metro

* chore: always apply patch

* chore: fix test

Author: Brentlok

packages/uniwind/build.config.ts

@@ -43,6 +43,11 @@ export default defineBuildConfig({
             input: './src/metro',
             name: 'metro/index',
         },
+        {
+            builder: 'rollup',
+            input: './src/metro/metro-transformer.ts',
+            name: 'metro/metro-transformer',
+        },
         {
             builder: 'mkdist',
             input: './src/metro',
@@ -70,6 +75,8 @@ export default defineBuildConfig({
     externals: [
         /@tailwindcss/,
         'lightningcss',
+        /metro-cache/,
+        /metro\/private/,
     ],
     rollup: {
         emitCJS: true,

packages/uniwind/specs/utils.ts

@@ -4,6 +4,7 @@ import { compileVirtual } from '../src/metro/compileVirtual'
 import { Platform } from '../src/metro/types'
 import { UniwindRuntimeMock } from './mocks'
 import path = require('path')
+import type { GenerateStyleSheetsCallback } from '../src/core/types'
 
 export const getStyleSheetsFromCandidates = async <T extends string>(...candidates: Array<T>) => {
     const cwd = process.cwd()
@@ -18,9 +19,9 @@ export const getStyleSheetsFromCandidates = async <T extends string>(...candidat
         themes: ['light', 'dark'],
     })
 
-    new Function(virtualJS)()
+    const { UniwindStore } = await import('../src/core/native')
 
-    return globalThis.__uniwind__computeStylesheet(UniwindRuntimeMock)
+    UniwindStore.reinit(new Function('rt', `return ${virtualJS}`) as GenerateStyleSheetsCallback)
 }
 
 export const twSize = (size: number) => size * 4

packages/uniwind/src/core/config/index.native.ts

@@ -0,0 +1,13 @@
+import { UniwindStore } from '../native'
+import { GenerateStyleSheetsCallback } from '../types'
+import { Uniwind } from './config'
+
+Object.defineProperty(Uniwind, '__reinit', {
+    configurable: false,
+    enumerable: false,
+    value: (generateStyleSheetCallback: GenerateStyleSheetsCallback) => {
+        UniwindStore.reinit(generateStyleSheetCallback)
+    },
+})
+
+export * from './config'

packages/uniwind/src/core/config/themeChange.native.ts

@@ -4,6 +4,6 @@ import { UniwindRuntime } from '../native/runtime'
 
 export const themeChange = (theme: string) => {
     UniwindRuntime.currentThemeName = theme
-    UniwindStore.reload()
+    UniwindStore.reinit()
     UniwindStore.notifyListeners([StyleDependency.Theme])
 }

packages/uniwind/src/core/native/store.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-depth */
 import { Dimensions, Platform } from 'react-native'
 import { Orientation, StyleDependency } from '../../types'
-import { ComponentState, RNStyle, Style, StyleSheets } from '../types'
+import { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets } from '../types'
 import { parseBoxShadow, parseFontVariant, parseTransformsMutation, resolveGradient } from './parsers'
 import { UniwindRuntime } from './runtime'
 
@@ -10,7 +10,7 @@ type StylesResult = {
     dependencies: Array<StyleDependency>
 }
 
-export class UniwindStoreBuilder {
+class UniwindStoreBuilder {
     stylesheets = {} as StyleSheets
     listeners = {
         [StyleDependency.ColorScheme]: new Set<() => void>(),
@@ -21,7 +21,6 @@ export class UniwindStoreBuilder {
         [StyleDependency.FontScale]: new Set<() => void>(),
         [StyleDependency.Rtl]: new Set<() => void>(),
     }
-    initialized = false
     runtime = UniwindRuntime
     cache = new Map<string, StylesResult>()
 
@@ -51,11 +50,6 @@ export class UniwindStoreBuilder {
             return this.cache.get(cacheKey)!
         }
 
-        if (!this.initialized) {
-            this.initialized = true
-            this.reload()
-        }
-
         const result = this.resolveStyles(className, state)
 
         this.cache.set(cacheKey, result)
@@ -70,8 +64,8 @@ export class UniwindStoreBuilder {
         return result
     }
 
-    reload = () => {
-        const styleSheet = globalThis.__uniwind__computeStylesheet(this.runtime)
+    reinit = (generateStyleSheetCallback?: GenerateStyleSheetsCallback) => {
+        const styleSheet = generateStyleSheetCallback?.(this.runtime) ?? this.stylesheets
         const themeVars = styleSheet[`__uniwind-theme-${this.runtime.currentThemeName}`]
         const platformVars = styleSheet[`__uniwind-platform-${Platform.OS}`]
 
@@ -211,13 +205,6 @@ export class UniwindStoreBuilder {
 
 export const UniwindStore = new UniwindStoreBuilder()
 
-if (__DEV__) {
-    globalThis.__uniwind__hot_reload = () => {
-        UniwindStore.reload()
-        UniwindStore.notifyListeners([StyleDependency.Theme])
-    }
-}
-
 Dimensions.addEventListener('change', ({ window }) => {
     const newOrientation = window.width > window.height ? Orientation.Landscape : Orientation.Portrait
     const orientationChanged = UniwindStore.runtime.orientation !== newOrientation

packages/uniwind/src/core/types.ts

@@ -22,6 +22,8 @@ export type Style = {
 
 export type StyleSheets = Record<string, Array<Style> | (() => unknown)>
 
+export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => StyleSheets
+
 type UserThemes = UniwindConfig extends { themes: infer T extends readonly string[] } ? T
     : readonly string[]
 
@@ -75,8 +77,6 @@ export type UniwindComponentProps =
     }
 
 declare global {
-    var __uniwind__computeStylesheet: (runtime: UniwindRuntime) => StyleSheets
-    var __uniwind__hot_reload: () => void
     var __uniwindThemes__: ReadonlyArray<string> | undefined
 }
 

packages/uniwind/src/metro/metro-css-patches.ts

@@ -0,0 +1,57 @@
+import type { Graph, Result as GraphResult } from '@expo/metro/metro/DeltaBundler/Graph'
+import FileStoreBase from 'metro-cache/private/stores/FileStore'
+import type { Options as GraphOptions } from 'metro/private/DeltaBundler/types'
+import os from 'os'
+import path from 'path'
+
+class FileStore<T> extends FileStoreBase<T> {
+    async set(key: Buffer, value: any): Promise<void> {
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (value?.output?.[0]?.data?.css?.skipCache) {
+            return
+        }
+
+        return super.set(key, value)
+    }
+}
+
+export const cacheStore = new FileStore<any>({
+    root: path.join(os.tmpdir(), 'metro-cache'),
+})
+
+interface TraverseDependencies {
+    (paths: readonly string[], options: GraphOptions<any>): Promise<GraphResult<any>>
+    __patched?: boolean
+}
+
+export const patchMetroGraphToSupportUncachedModules = () => {
+    const { Graph } = require('metro/private/DeltaBundler/Graph') as typeof import('metro/private/DeltaBundler/Graph')
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const original_traverseDependencies = Graph.prototype.traverseDependencies as unknown as TraverseDependencies
+
+    if (original_traverseDependencies.__patched) {
+        return
+    }
+
+    original_traverseDependencies.__patched = true
+
+    function traverseDependencies(this: Graph, paths: Array<string>, options: GraphOptions<any>) {
+        this.dependencies.forEach(dependency => {
+            if (
+                dependency.output.find(file => file.data.css?.skipCache === true)
+                && !paths.includes(dependency.path)
+            ) {
+                // @ts-expect-error Hidden property
+                dependency.unstable_transformResultKey = `${dependency.unstable_transformResultKey}.`
+                paths.push(dependency.path)
+            }
+        })
+
+        return original_traverseDependencies.call(this, paths, options)
+    }
+
+    // @ts-expect-error patch Graph traverseDependencies method
+    Graph.prototype.traverseDependencies = traverseDependencies
+    traverseDependencies.__patched = true
+}

packages/uniwind/src/metro/metro-transformer.ts

@@ -0,0 +1,89 @@
+import { Scanner } from '@tailwindcss/oxide'
+import fs from 'fs'
+import { JsTransformerConfig, JsTransformOptions } from 'metro-transform-worker'
+import path from 'path'
+import { name } from '../../package.json'
+import { compileVirtual } from './compileVirtual'
+import { getSources } from './getSources'
+import { injectThemes } from './injectThemes'
+import { Platform, UniwindConfig } from './types'
+
+let worker: typeof import('metro-transform-worker')
+
+try {
+    worker = require('@expo/metro-config/build/transform-worker/transform-worker.js')
+} catch {
+    worker = require('metro-transform-worker')
+}
+
+export const transform = async (
+    config: JsTransformerConfig & {
+        uniwind: UniwindConfig
+    },
+    projectRoot: string,
+    filePath: string,
+    data: Buffer,
+    options: JsTransformOptions,
+) => {
+    const isCss = options.type !== 'asset' && filePath.endsWith('.css')
+
+    if (filePath.endsWith('/components/web/metro-injected.js')) {
+        const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
+        const injectedThemesCode = injectThemes({
+            input: cssPath,
+            themes: config.uniwind.themes,
+            dtsPath: config.uniwind.dtsFile,
+        })
+
+        data = Buffer.from(injectedThemesCode)
+    }
+
+    if (!isCss) {
+        return worker.transform(config, projectRoot, filePath, data, options)
+    }
+
+    const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
+    const injectedThemesCode = injectThemes({
+        input: cssPath,
+        themes: config.uniwind.themes,
+        dtsPath: config.uniwind.dtsFile,
+    })
+    const css = fs.readFileSync(filePath, 'utf-8')
+    const sources = getSources(css, path.dirname(cssPath))
+    const candidates = new Scanner({ sources }).scan()
+    const virtualCode = await compileVirtual({
+        css,
+        platform: options.platform as Platform,
+        themes: config.uniwind.themes,
+        polyfills: config.uniwind.polyfills,
+        candidates,
+        cssPath,
+    })
+    const isWeb = options.platform === Platform.Web
+
+    data = Buffer.from(
+        isWeb
+            ? virtualCode
+            : [
+                `import { Uniwind } from '${name}';`,
+                `Uniwind.__reinit(rt => ${virtualCode});`,
+                injectedThemesCode,
+            ].join(''),
+        'utf-8',
+    )
+
+    const transform: any = await worker.transform(
+        config,
+        projectRoot,
+        `${filePath}${isWeb ? '' : '.js'}`,
+        data,
+        options,
+    )
+
+    transform.output[0].data.css = {
+        skipCache: true,
+        code: '',
+    }
+
+    return transform
+}

packages/uniwind/src/metro/stylesheet/serializeStylesheet.ts

@@ -170,7 +170,6 @@ const serialize = (value: any): string => {
 }
 
 export const serializeStylesheet = (stylesheet: Stylesheet) => {
-    const hotReloadFN = 'globalThis.__uniwind__hot_reload?.();'
     const currentColor = `get currentColor() { return function() { return rt.colorScheme === 'dark' ? '#ffffff' : '#000000' } },`
 
     const serializedStylesheet = Object.entries(stylesheet).map(([key, value]) => {
@@ -181,11 +180,11 @@ export const serializeStylesheet = (stylesheet: Stylesheet) => {
         return `"${key}": ${stringifiedValue}`
     }).join(',\n')
 
-    const js = `globalThis.__uniwind__computeStylesheet = rt => ({ ${currentColor} ${serializedStylesheet} });${hotReloadFN}`
+    const js = `({ ${currentColor} ${serializedStylesheet} })`
 
     try {
         // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
-        new Function(`function validateJS() { ${js} }`)
+        new Function(`function validateJS() { const fn = rt => ${js} }`)
     } catch {
         Logger.error('Failed to create virtual js')
         return ''

packages/uniwind/src/metro/types.ts

@@ -10,21 +10,8 @@ import type {
     Token,
     TokenOrValue,
 } from 'lightningcss'
-import type Bundler from 'metro/private/Bundler'
 import { ColorScheme, Orientation } from '../types'
 
-type WithUniwindPatch<T> = T & {
-    __uniwind_patched?: boolean
-}
-
-export type ExtendedBundler = Bundler & {
-    transformFile: WithUniwindPatch<Bundler['transformFile']>
-}
-
-export type ExtendedFileSystem = {
-    getSha1: WithUniwindPatch<(filename: string) => string>
-}
-
 export type Polyfills = {
     rem?: number
 }
@@ -83,13 +70,3 @@ export type ProcessMetaValues = {
 export type StyleSheetTemplate = {
     [K: string]: Array<MediaQueryResolver & Record<string, unknown>>
 }
-
-type FileChange = {
-    filePath: string
-    type: string
-    metadata: any
-}
-
-export type FileChangeEvent = {
-    eventsQueue: Array<FileChange>
-}