import assert from 'node:assert/strict' import { execFileSync } from 'node:child_process' import fs from 'node:fs' import path from 'node:path' import process from 'node:process' import { chromium, firefox, webkit } from '@playwright/test' import react from '@vitejs/plugin-react' import ts from 'typescript' import { build, preview } from 'vite' import { packedFiles } from '../../scripts/package-check.mjs' import { consumerDirectory, removeConsumer, run, workspace, writeJson } from '../../scripts/package-consumer.mjs' import { hash, readMember } from './releases.mjs' assert.equal(process.version.slice(1), fs.readFileSync(path.join(workspace, '.node-version'), 'utf8').trim()) assert.equal(process.env.npm_config_user_agent?.split(' ')[0], 'yarn/1.22.22') const yarn = process.env.npm_execpath assert(yarn && fs.existsSync(yarn)) const before = process.argv.includes('--before') const output = fs.mkdtempSync(path.join(workspace, 'refactor/.cache/react-consumer-')) const consumer = consumerDirectory() const report = { task: 'EX-01', before, node: process.version, source: execFileSync('git', ['rev-parse', 'HEAD'], { cwd: workspace, encoding: 'utf8' }).trim(), packages: [], browsers: [], passed: false } console.log(`React consumer evidence: ${output}`) try { const dependencies = {} for (const name of ['artplayer', 'artplayer-plugin-danmuku', 'artplayer-plugin-document-pip']) { const archive = path.join(output, `${name}.tgz`) fs.writeFileSync(path.join(output, `${name}-pack.log`), run([yarn, 'pack', '--filename', archive], path.join(workspace, 'packages', name))) dependencies[name] = `file:${archive.replaceAll('\\', '/')}` report.packages.push({ name, archive, sha256: hash(fs.readFileSync(archive)) }) } const rootManifest = JSON.parse(fs.readFileSync(path.join(workspace, 'package.json'), 'utf8')) for (const name of ['react', 'react-dom', '@types/react', '@types/react-dom']) dependencies[name] = rootManifest.devDependencies[name] writeJson(path.join(consumer, 'package.json'), { name: 'react-artplayer-isolated-consumer', private: true, type: 'module', dependencies }) fs.writeFileSync(path.join(output, 'install.log'), run([yarn, 'install', '--offline', '--ignore-scripts', '--non-interactive'], consumer)) const lock = fs.readFileSync(path.join(consumer, 'yarn.lock')) fs.writeFileSync(path.join(output, 'consumer-yarn.lock'), lock) fs.writeFileSync(path.join(output, 'frozen.log'), run([yarn, 'install', '--offline', '--frozen-lockfile', '--force', '--ignore-scripts', '--non-interactive'], consumer)) assert.deepEqual(fs.readFileSync(path.join(consumer, 'yarn.lock')), lock) for (const pkg of report.packages) { for (const member of packedFiles(pkg.archive)) { assert.deepEqual(fs.readFileSync(path.join(consumer, 'node_modules', pkg.name, member.replace(/^package\//, ''))), readMember(pkg.archive, member)) } } const example = path.join(workspace, 'example/react.js') fs.cpSync(path.join(example, 'src'), path.join(consumer, 'src'), { recursive: true }) fs.copyFileSync(path.join(example, 'index.html'), path.join(consumer, 'index.html')) fs.copyFileSync(path.join(example, 'tsconfig.json'), path.join(consumer, 'tsconfig.json')) if (before) { const old = execFileSync('git', ['show', '3e39fc745f4dc98eba678ca081e86c1d3cc965cd:example/react.js/src/Player.tsx'], { cwd: workspace }) fs.writeFileSync(path.join(consumer, 'src/Player.tsx'), old) report.beforeWrapper = hash(old) } for (const file of ['lifecycle.tsx', 'consumer.tsx']) fs.copyFileSync(path.join(workspace, 'test/react', file), path.join(consumer, file)) fs.writeFileSync(path.join(consumer, 'harness.html'), '
') fs.mkdirSync(path.join(consumer, 'public')) const media = fs.readFileSync(path.join(workspace, 'test/browser/media/pattern.mp4')) fs.writeFileSync(path.join(consumer, 'public/pattern.mp4'), media) fs.copyFileSync(path.join(example, 'public/vite.svg'), path.join(consumer, 'public/vite.svg')) report.media = { file: 'test/browser/media/pattern.mp4', sha256: hash(media) } report.inputs = Object.fromEntries(['src/Player.tsx', 'src/player-options.ts', 'src/App.tsx', 'src/main.tsx', 'index.html', 'lifecycle.tsx', 'consumer.tsx'].map(file => [file, hash(fs.readFileSync(path.join(consumer, file)))])) const config = ts.readConfigFile(path.join(consumer, 'tsconfig.json'), ts.sys.readFile) assert.equal(config.error, undefined) const parsed = ts.parseJsonConfigFileContent({ ...config.config, include: ['src', 'consumer.tsx', 'lifecycle.tsx'] }, ts.sys, consumer) assert.deepEqual(parsed.errors, []) const host = ts.createCompilerHost(parsed.options) host.getCurrentDirectory = () => consumer const program = ts.createProgram(parsed.fileNames, parsed.options, host) const diagnostics = ts.getPreEmitDiagnostics(program).map(d => ({ code: d.code, file: d.file?.fileName, text: ts.flattenDiagnosticMessageText(d.messageText, '\n') })) report.types = { version: ts.version, diagnostics } assert.deepEqual(diagnostics, []) const library = fs.realpathSync(path.dirname(ts.sys.getExecutingFilePath())) for (const file of program.getSourceFiles()) { const actual = fs.realpathSync(file.fileName) assert(actual.startsWith(fs.realpathSync(consumer) + path.sep) || (path.dirname(actual) === library && /^lib\..*\.d\.ts$/.test(path.basename(actual))), `Types escaped consumer: ${actual}`) } for (const mode of ['development', 'production']) { const outDir = path.join(output, mode) await build({ root: consumer, configFile: false, plugins: [react()], mode, define: { 'process.env.NODE_ENV': JSON.stringify(mode) }, build: { outDir, emptyOutDir: false, rollupOptions: { input: { app: path.join(consumer, 'index.html'), harness: path.join(consumer, 'harness.html') } } } }) const server = await preview({ root: consumer, configFile: false, build: { outDir }, preview: { host: '127.0.0.1', port: 0, open: false } }) const address = server.httpServer.address() const base = `http://127.0.0.1:${address.port}` try { for (const [engine, type] of Object.entries({ chromium, firefox, webkit })) { const browser = await type.launch() const row = { mode, engine, version: browser.version(), checks: [], passed: false } report.browsers.push(row) const page = await browser.newPage() const unexpected = [] page.on('pageerror', error => unexpected.push(error.message)) await page.route('https://artplayer.org/assets/sample/danmuku.xml', route => route.fulfill({ contentType: 'text/xml', body: '