fix(mobile-web): prepare design system before build

scripts/mobile-web-build.cjs

@@ -125,7 +125,7 @@ function getMobileWebBuildMarkerPath(mobileWebDir) {
  * clean/install/build cycle can be skipped. Escape hatches:
  *   --force flag / BITFUN_MOBILE_WEB_FORCE_BUILD=1 env.
  */
-function getMobileWebRebuildPlan(mobileWebDir, force = false) {
+function getMobileWebRebuildPlan(mobileWebDir, force = false, rootDir = ROOT_DIR) {
   const fs = require('fs');
 
   if (force) {
@@ -145,6 +145,17 @@ function getMobileWebRebuildPlan(mobileWebDir, force = false) {
     path.join(mobileWebDir, 'index.html'),
     path.join(mobileWebDir, 'package.json'),
     path.join(mobileWebDir, 'tsconfig.json'),
+    path.join(rootDir, 'pnpm-lock.yaml'),
+    path.join(rootDir, 'pnpm-workspace.yaml'),
+    path.join(rootDir, 'design-system', 'package.json'),
+    path.join(rootDir, 'design-system', 'packages', 'design-tokens', 'package.json'),
+    path.join(rootDir, 'design-system', 'packages', 'design-tokens', 'scripts'),
+    path.join(rootDir, 'design-system', 'packages', 'design-tokens', 'src'),
+    path.join(rootDir, 'design-system', 'packages', 'theme-bitfun', 'package.json'),
+    path.join(rootDir, 'design-system', 'packages', 'theme-bitfun', 'scripts'),
+    path.join(rootDir, 'design-system', 'packages', 'theme-bitfun', 'src'),
+    path.join(rootDir, 'design-system', 'tooling', 'token-engine', 'package.json'),
+    path.join(rootDir, 'design-system', 'tooling', 'token-engine', 'src'),
   ];
   for (const entry of fs.readdirSync(mobileWebDir)) {
     if (entry.startsWith('vite.config.')) {
@@ -163,7 +174,7 @@ function getMobileWebRebuildPlan(mobileWebDir, force = false) {
   if (newestInput && newestInput.mtimeMs > markerMtimeMs) {
     return {
       shouldBuild: true,
-      reason: `mobile-web inputs changed since the last build (${path.relative(ROOT_DIR, newestInput.path)})`,
+      reason: `mobile-web inputs changed since the last build (${path.relative(rootDir, newestInput.path)})`,
     };
   }
 
@@ -262,4 +273,5 @@ if (require.main === module) {
 module.exports = {
   buildMobileWeb,
   cleanStaleMobileWebResources,
+  getMobileWebRebuildPlan,
 };

scripts/mobile-web-build.test.mjs

@@ -0,0 +1,85 @@
+import assert from 'node:assert/strict';
+import { createRequire } from 'node:module';
+import { mkdirSync, readFileSync, utimesSync, writeFileSync } from 'node:fs';
+import { mkdtemp } from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import test from 'node:test';
+
+const require = createRequire(import.meta.url);
+const { getMobileWebRebuildPlan } = require('./mobile-web-build.cjs');
+
+function write(root, relativePath, contents = '') {
+  const target = path.join(root, relativePath);
+  mkdirSync(path.dirname(target), { recursive: true });
+  writeFileSync(target, contents);
+  return target;
+}
+
+function setMtime(target, seconds) {
+  utimesSync(target, seconds, seconds);
+}
+
+test('mobile-web lifecycle prepares its generated design-system package entries', () => {
+  const packageJson = JSON.parse(
+    readFileSync(new URL('../src/mobile-web/package.json', import.meta.url), 'utf8'),
+  );
+  const prepareCommand = 'pnpm --dir ../../design-system run prepare:consumer-dev';
+
+  assert.equal(packageJson.scripts['prepare:design-system'], prepareCommand);
+  assert.equal(packageJson.scripts.predev, 'pnpm run prepare:design-system');
+  assert.equal(packageJson.scripts['pretype-check'], 'pnpm run prepare:design-system');
+  assert.equal(packageJson.scripts.prebuild, 'pnpm run prepare:design-system');
+});
+
+test('requests a mobile-web rebuild when a theme source changes', async () => {
+  const root = await mkdtemp(path.join(os.tmpdir(), 'bitfun-mobile-web-build-'));
+  const mobileWebDir = path.join(root, 'src/mobile-web');
+  const output = write(root, 'src/mobile-web/dist/index.html', '<main>old</main>');
+  const marker = write(
+    root,
+    'src/mobile-web/node_modules/.cache/bitfun-mobile-web-build-marker',
+    'old build\n',
+  );
+  const themeSource = write(
+    root,
+    'design-system/packages/theme-bitfun/src/light.tokens.json',
+    '{}\n',
+  );
+  const now = Date.now() / 1000;
+  setMtime(output, now - 20);
+  setMtime(marker, now - 10);
+  setMtime(themeSource, now);
+
+  const plan = getMobileWebRebuildPlan(mobileWebDir, false, root);
+
+  assert.equal(plan.shouldBuild, true);
+  assert.match(plan.reason, /design-system[\\/]packages[\\/]theme-bitfun[\\/]src[\\/]light\.tokens\.json/);
+});
+
+test('reuses mobile-web output when only generated design-system output is newer', async () => {
+  const root = await mkdtemp(path.join(os.tmpdir(), 'bitfun-mobile-web-build-'));
+  const mobileWebDir = path.join(root, 'src/mobile-web');
+  const mobileSource = write(root, 'src/mobile-web/src/main.tsx', 'export {};\n');
+  const output = write(root, 'src/mobile-web/dist/index.html', '<main>current</main>');
+  const marker = write(
+    root,
+    'src/mobile-web/node_modules/.cache/bitfun-mobile-web-build-marker',
+    'current build\n',
+  );
+  const generatedTheme = write(
+    root,
+    'design-system/packages/theme-bitfun/dist/index.js',
+    'export {};\n',
+  );
+  const now = Date.now() / 1000;
+  setMtime(mobileSource, now - 30);
+  setMtime(output, now - 20);
+  setMtime(marker, now - 10);
+  setMtime(generatedTheme, now);
+
+  assert.deepEqual(getMobileWebRebuildPlan(mobileWebDir, false, root), {
+    shouldBuild: false,
+    reason: 'mobile-web dist is up to date; skipping clean/install/build (use --force or BITFUN_MOBILE_WEB_FORCE_BUILD=1 to rebuild)',
+  });
+});

src/mobile-web/package.json

@@ -4,6 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "prepare:design-system": "pnpm --dir ../../design-system run prepare:consumer-dev",
+    "predev": "pnpm run prepare:design-system",
+    "pretype-check": "pnpm run prepare:design-system",
+    "prebuild": "pnpm run prepare:design-system",
     "dev": "vite",
     "type-check": "tsc --noEmit",
     "build": "vite build",