|
| 1 | +import { Scanner } from '@tailwindcss/oxide' |
| 2 | +import fs from 'fs' |
| 3 | +import { ServerConfigT } from 'metro-config' |
| 4 | +import { Resolution } from 'metro-resolver' |
| 5 | +import path from 'path' |
| 6 | +import { compileVirtual } from './compileVirtual' |
| 7 | +import { getSources } from './getSources' |
| 8 | +import { injectThemes } from './injectThemes' |
| 9 | +import { ExtendedBundler, ExtendedFileSystem, FileChangeEvent, Platform, UniwindMetroTransformerOptions } from './types' |
| 10 | +import { areSetsEqual } from './utils' |
| 11 | + |
| 12 | +const getVirtualPath = (platform: string) => `${platform}.uniwind.${platform === Platform.Web ? 'css' : 'js'}` |
| 13 | +const getPlatformFromVirtualPath = (path: string) => { |
| 14 | + const [, platform] = path.match(/^(\w+)\.uniwind\./) ?? [] |
| 15 | + |
| 16 | + return platform as Platform | undefined |
| 17 | +} |
| 18 | +const platforms = [Platform.iOS, Platform.Android, Platform.Web] |
| 19 | + |
| 20 | +type EnchangeMiddlewareParameters = Parameters<ServerConfigT['enhanceMiddleware']> |
| 21 | + |
| 22 | +export class UniwindBareRN { |
| 23 | + private virtualModules = new Map<string, string>() |
| 24 | + private injectedThemesScript = '' |
| 25 | + private css = '' |
| 26 | + private candidates = new Set<string>() |
| 27 | + |
| 28 | + constructor(private readonly uniwindOptions: UniwindMetroTransformerOptions) { |
| 29 | + this.injectedThemesScript = injectThemes(uniwindOptions) |
| 30 | + } |
| 31 | + |
| 32 | + init(metroServer: EnchangeMiddlewareParameters[1]) { |
| 33 | + const bundler = metroServer.getBundler().getBundler() |
| 34 | + const watcher = bundler.getWatcher() |
| 35 | + |
| 36 | + bundler.getDependencyGraph().then(async graph => { |
| 37 | + // @ts-expect-error Hidden property |
| 38 | + this.ensureFileSystemPatched(graph._fileSystem) |
| 39 | + this.ensureBundlerPatched(bundler) |
| 40 | + |
| 41 | + watcher.on('change', (event: FileChangeEvent) => { |
| 42 | + if ('eventsQueue' in event) { |
| 43 | + if ( |
| 44 | + // Listen only to changes in JS/TS/css files |
| 45 | + !event.eventsQueue.some(event => { |
| 46 | + return ['.js', '.jsx', '.ts', '.tsx', '.css'].some(ext => event.filePath.endsWith(ext)) |
| 47 | + }) || event.eventsQueue.every(event => event.filePath.endsWith('uniwind.css')) |
| 48 | + ) { |
| 49 | + return |
| 50 | + } |
| 51 | + |
| 52 | + const css = fs.readFileSync(this.uniwindOptions.input, 'utf-8') |
| 53 | + const candidates = new Set(this.getCandidates(css)) |
| 54 | + const tailwindHasChanged = css !== this.css || !areSetsEqual(this.candidates, candidates) |
| 55 | + |
| 56 | + if (!tailwindHasChanged) { |
| 57 | + return |
| 58 | + } |
| 59 | + |
| 60 | + this.injectedThemesScript = injectThemes(this.uniwindOptions) |
| 61 | + this.css = css |
| 62 | + this.candidates = candidates |
| 63 | + |
| 64 | + platforms.forEach(platform => { |
| 65 | + watcher.emit( |
| 66 | + 'change', |
| 67 | + { |
| 68 | + eventsQueue: [{ |
| 69 | + filePath: getVirtualPath(platform), |
| 70 | + metadata: { |
| 71 | + modifiedTime: Date.now(), |
| 72 | + size: 1, |
| 73 | + type: 'virtual', |
| 74 | + }, |
| 75 | + type: 'change', |
| 76 | + }], |
| 77 | + } satisfies FileChangeEvent, |
| 78 | + ) |
| 79 | + }) |
| 80 | + } |
| 81 | + }) |
| 82 | + |
| 83 | + await Promise.all(platforms.map(platform => this.getVirtualFile(platform))) |
| 84 | + }) |
| 85 | + } |
| 86 | + |
| 87 | + resolve(resolved: Resolution, platform: string | null) { |
| 88 | + if (('filePath' in resolved && resolved.filePath !== this.uniwindOptions.input)) { |
| 89 | + return resolved |
| 90 | + } |
| 91 | + |
| 92 | + if (platform !== Platform.iOS && platform !== Platform.Android && platform !== Platform.Web) { |
| 93 | + return resolved |
| 94 | + } |
| 95 | + |
| 96 | + return { |
| 97 | + ...resolved, |
| 98 | + filePath: getVirtualPath(platform), |
| 99 | + } |
| 100 | + } |
| 101 | + |
| 102 | + private ensureBundlerPatched(bundler: ExtendedBundler) { |
| 103 | + if (bundler.transformFile.__uniwind_patched) { |
| 104 | + return |
| 105 | + } |
| 106 | + |
| 107 | + const transformFile = bundler.transformFile.bind(bundler) |
| 108 | + |
| 109 | + bundler.transformFile = async ( |
| 110 | + filePath, |
| 111 | + transformOptions, |
| 112 | + fileBuffer, |
| 113 | + ) => { |
| 114 | + const isVirtualFile = this.virtualModules.has(filePath) |
| 115 | + |
| 116 | + if (filePath.endsWith('/components/web/uniwind-metro-injected.js')) { |
| 117 | + fileBuffer = Buffer.from(this.injectedThemesScript) |
| 118 | + } |
| 119 | + |
| 120 | + if (isVirtualFile) { |
| 121 | + const platform = getPlatformFromVirtualPath(filePath) |
| 122 | + |
| 123 | + if (platform) { |
| 124 | + const virtualFile = await this.getVirtualFile(platform) |
| 125 | + |
| 126 | + fileBuffer = Buffer.from([ |
| 127 | + virtualFile, |
| 128 | + platform !== Platform.Web ? this.injectedThemesScript : '', |
| 129 | + ].join('')) |
| 130 | + } |
| 131 | + } |
| 132 | + |
| 133 | + return transformFile(filePath, transformOptions, fileBuffer) |
| 134 | + } |
| 135 | + |
| 136 | + bundler.transformFile.__uniwind_patched = true |
| 137 | + } |
| 138 | + |
| 139 | + private ensureFileSystemPatched(fs: ExtendedFileSystem) { |
| 140 | + if (!fs.getSha1.__uniwind_patched) { |
| 141 | + const original_getSha1 = fs.getSha1.bind(fs) |
| 142 | + |
| 143 | + fs.getSha1 = filename => { |
| 144 | + if (this.virtualModules.has(filename)) { |
| 145 | + return `${filename}-${Date.now()}` |
| 146 | + } |
| 147 | + |
| 148 | + return original_getSha1(filename) |
| 149 | + } |
| 150 | + fs.getSha1.__uniwind_patched = true |
| 151 | + } |
| 152 | + |
| 153 | + return fs |
| 154 | + } |
| 155 | + |
| 156 | + private async getVirtualFile(platform: Platform) { |
| 157 | + const virtualFile = await compileVirtual({ |
| 158 | + candidates: Array.from(this.candidates), |
| 159 | + platform, |
| 160 | + css: this.css, |
| 161 | + cssPath: this.uniwindOptions.input, |
| 162 | + themes: this.uniwindOptions.themes, |
| 163 | + }) |
| 164 | + const injected = injectThemes(this.uniwindOptions) |
| 165 | + |
| 166 | + this.injectedThemesScript = injected |
| 167 | + this.virtualModules.set(getVirtualPath(platform), virtualFile) |
| 168 | + |
| 169 | + return virtualFile |
| 170 | + } |
| 171 | + |
| 172 | + private getCandidates(css: string) { |
| 173 | + const sources = getSources(css, path.dirname(this.uniwindOptions.input)) |
| 174 | + const candidates = new Scanner({ sources }).scan() |
| 175 | + |
| 176 | + return candidates |
| 177 | + } |
| 178 | +} |
0 commit comments