[Chore] Watch mode in EUI

packages/eui/package.json

@@ -21,6 +21,7 @@
     "build:i18ntokens": "node ./scripts/build_i18ntokens.mjs",
     "build": "yarn build:clean && yarn build:i18ntokens && node ./scripts/compile-eui.js",
     "build-pack": "yarn build && yarn pack",
+    "serve": "node scripts/serve-eui.js",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
     "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix",

packages/eui/scripts/compile-eui.js

@@ -8,6 +8,7 @@ const dtsGenerator = require('dts-generator').default;
 
 const packageRootDir = path.resolve(__dirname, '..');
 const srcDir = path.join(packageRootDir, 'src');
+const buildDirs = ['lib', 'es', 'dist', 'optimize', 'test-env'];
 
 const IGNORE_BUILD = ['**/webpack.config.js', '**/*.d.ts'];
 const IGNORE_TESTS = [
@@ -224,13 +225,21 @@ async function compileLib() {
   console.log(chalk.green('✔ Finished compiling src/'));
 
   // Use `tsc` to emit typescript declaration files for .ts files
-  console.log('Generating typescript definitions file');
-  execSync(`node ${path.resolve(__dirname, 'dtsgenerator.js')}`, {
-    stdio: 'inherit',
-  });
-  // validate the generated eui.d.ts doesn't contain errors
-  execSync('tsc --noEmit -p tsconfig-builttypes.json', { stdio: 'inherit' });
-  console.log(chalk.green('✔ Finished generating definitions'));
+  if (process.argv.includes('--no-declarations')) {
+    console.log(
+      chalk.yellow('Skipping TypeScript definitions file generation')
+    );
+  } else {
+    console.log('Generating TypeScript definitions file...');
+
+    execSync(`node ${path.resolve(__dirname, 'dtsgenerator.js')}`, {
+      stdio: 'inherit',
+    });
+
+    // validate the generated eui.d.ts doesn't contain errors
+    execSync('tsc --noEmit -p tsconfig-builttypes.json', { stdio: 'inherit' });
+    console.log(chalk.green('✔ Finished generating definitions'));
+  }
 
   await copySvgFiles();
 }
@@ -240,63 +249,79 @@ async function compileBundle() {
 
   await fs.mkdir(distDir);
 
-  console.log('Building test utils .d.ts files...');
+  if (process.argv.includes('--no-declarations')) {
+    console.log(chalk.yellow('Skipping test utils .d.ts files generation'));
+  } else {
+    console.log('Building test utils .d.ts files...');
+
+    const destinationDirs = [
+      'lib/test',
+      'es/test',
+      'optimize/lib/test',
+      'optimize/es/test',
+    ].map((dir) => path.join(packageRootDir, dir));
+
+    const testDirectories = ['rtl', 'enzyme'];
+    const testDTSFiles = new glob.Glob('test/**/*.d.ts', {
+      cwd: srcDir,
+      realpath: true,
+    });
 
-  const destinationDirs = [
-    'lib/test',
-    'es/test',
-    'optimize/lib/test',
-    'optimize/es/test',
-  ].map((dir) => path.join(packageRootDir, dir));
+    for (const dir of destinationDirs) {
+      const relativeDir = path.relative(packageRootDir, dir);
+
+      dtsGenerator({
+        prefix: '',
+        out: `${dir}/index.d.ts`,
+        baseDir: path.resolve(__dirname, '..', 'src/test/'),
+        files: ['index.ts'],
+        resolveModuleId({ currentModuleId }) {
+          return `@elastic/eui/${relativeDir}${
+            currentModuleId !== 'index' ? `/${currentModuleId}` : ''
+          }`;
+        },
+        resolveModuleImport({ currentModuleId, importedModuleId }) {
+          if (currentModuleId === 'index') {
+            return `@elastic/eui/${relativeDir}/${importedModuleId.replace(
+              './',
+              ''
+            )}`;
+          }
+          return null;
+        },
+      });
+
+      for (const testDir of testDirectories) {
+        await fs.mkdir(path.join(dir, testDir), { recursive: true });
+      }
 
-  const testDirectories = ['rtl', 'enzyme'];
-  const testDTSFiles = new glob.Glob('test/**/*.d.ts', {
-    cwd: srcDir,
-    realpath: true,
-  });
+      for await (const filePath of testDTSFiles) {
+        const fullPath = path.join(srcDir, filePath);
 
-  for (const dir of destinationDirs) {
-    const relativeDir = path.relative(packageRootDir, dir);
-
-    dtsGenerator({
-      prefix: '',
-      out: `${dir}/index.d.ts`,
-      baseDir: path.resolve(__dirname, '..', 'src/test/'),
-      files: ['index.ts'],
-      resolveModuleId({ currentModuleId }) {
-        return `@elastic/eui/${relativeDir}${
-          currentModuleId !== 'index' ? `/${currentModuleId}` : ''
-        }`;
-      },
-      resolveModuleImport({ currentModuleId, importedModuleId }) {
-        if (currentModuleId === 'index') {
-          return `@elastic/eui/${relativeDir}/${importedModuleId.replace(
-            './',
-            ''
-          )}`;
-        }
-        return null;
-      },
-    });
+        const relativePath = filePath.replace(/^test\//, '');
+        const destPath = path.join(dir, relativePath);
 
-    for (const testDir of testDirectories) {
-      await fs.mkdir(path.join(dir, testDir), { recursive: true });
+        await fs.copyFile(fullPath, destPath);
+      }
     }
 
-    for await (const filePath of testDTSFiles) {
-      const fullPath = path.join(srcDir, filePath);
-
-      const relativePath = filePath.replace(/^test\//, '');
-      const destPath = path.join(dir, relativePath);
+    console.log(chalk.green('✔ Finished test utils files'));
+  }
+}
 
-      await fs.copyFile(fullPath, destPath);
-    }
+async function cleanup() {
+  for (const dir of buildDirs) {
+    await fs.rm(path.join(packageRootDir, dir), {
+      recursive: true,
+      force: true,
+    });
   }
 
-  console.log(chalk.green('✔ Finished test utils files'));
+  console.log('Cleaned up old build directories');
 }
 
 async function compile() {
+  await cleanup();
   await compileLib();
   await compileBundle();
 }

packages/eui/scripts/serve-eui.js

@@ -0,0 +1,138 @@
+const chokidar = require('chokidar');
+const chalk = require('chalk');
+const { spawn, execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs/promises');
+
+// Constants for Kibana local testing
+const SHOULD_SYNC_TO_KIBANA = process.argv.includes('--kibana');
+const EUI_ROOT = execSync('git rev-parse --show-toplevel', {
+  encoding: 'utf-8',
+}).trim();
+const KIBANA_ROOT = path.resolve(EUI_ROOT, '../kibana');
+const KIBANA_NODE_MODULES = path.join(KIBANA_ROOT, 'node_modules');
+const KIBANA_NODE_MODULES_EUI = path.join(
+  KIBANA_NODE_MODULES,
+  '@elastic',
+  'eui'
+);
+
+// Constants for EUI watch mode
+const EUI_WORKSPACE = path.join(
+  EUI_ROOT,
+  execSync(
+    `yarn workspaces list --json | jq -r 'select(.name == "@elastic/eui") | .location'`,
+    { encoding: 'utf-8', cwd: EUI_ROOT }
+  ).trim()
+);
+const EUI_WORKSPACE_SRC = path.join(EUI_WORKSPACE, 'src');
+const COMPILE_EUI_SCRIPT = path.join(__dirname, 'compile-eui.js');
+
+let isCompiling = false;
+let queuedCompile = false;
+let isInitialCompile = true;
+
+function runCompile() {
+  if (isCompiling) {
+    queuedCompile = true;
+    return;
+  }
+
+  isCompiling = true;
+
+  if (isInitialCompile) {
+    console.log('Initial compilation...');
+    isInitialCompile = false;
+  } else {
+    console.log('Change detected, running compile...');
+  }
+
+  const child = spawn('node', [COMPILE_EUI_SCRIPT, ...process.argv.slice(2)], {
+    stdio: 'inherit',
+  });
+
+  child.on('close', async (code) => {
+    isCompiling = false;
+
+    if (code === 0) {
+      console.log(chalk.green('✔ Finished watching compile'));
+
+      await moveToKibana();
+
+      if (queuedCompile) {
+        queuedCompile = false;
+        runCompile();
+      }
+    } else {
+      console.log(chalk.red('Watch compile failed. Waiting for changes...'));
+
+      // Don't re-run a failed compile automatically
+      queuedCompile = false;
+    }
+  });
+}
+
+const watcher = chokidar.watch(EUI_WORKSPACE_SRC, {
+  ignoreInitial: true,
+  ignored: /(^|[\/\\])\../, // ignore dotfiles
+});
+
+console.log('Watching for changes in `src/`...');
+
+watcher.on('add', () => runCompile());
+watcher.on('change', () => runCompile());
+watcher.on('unlink', () => runCompile());
+watcher.on('addDir', () => runCompile());
+watcher.on('unlinkDir', () => runCompile());
+
+async function moveToKibana() {
+  if (!SHOULD_SYNC_TO_KIBANA) return;
+
+  try {
+    try {
+      await fs.access(KIBANA_ROOT);
+    } catch {
+      console.log(
+        chalk.yellow(`Kibana directory not found at ${KIBANA_ROOT}. Skipping.`)
+      );
+      return;
+    }
+
+    await fs.mkdir(KIBANA_NODE_MODULES_EUI, { recursive: true });
+
+    const tarballName = 'eui-watch.tgz';
+    const tarballPath = path.join(EUI_WORKSPACE, tarballName);
+
+    try {
+      console.log(`Generating tarball...`);
+
+      execSync(`yarn pack --filename "${tarballPath}"`, {
+        cwd: EUI_WORKSPACE,
+        stdio: 'ignore',
+      });
+
+      console.log(`Extracting tarball into ${KIBANA_NODE_MODULES_EUI}...`);
+
+      execSync(
+        `tar -xzf "${tarballPath}" -C "${KIBANA_NODE_MODULES_EUI}" --strip-components=1`
+      );
+
+      // Touch `package.json` to update the modified time
+      const now = new Date();
+      await fs.utimes(
+        path.join(KIBANA_NODE_MODULES_EUI, 'package.json'),
+        now,
+        now
+      );
+
+      console.log(chalk.green('✔ Successfully updated EUI in Kibana'));
+    } finally {
+      // Clean up the tarball
+      await fs.rm(tarballPath, { force: true });
+    }
+  } catch (e) {
+    console.log(chalk.red('Failed to extract in Kibana:', e));
+  }
+}
+
+runCompile();