@digigov/cli-build 2.0.0-0c4be34e → 2.0.0-107d908d

package/copy-files.js

@@ -1,14 +1,11 @@
-import { logger, resolveProject } from "@digigov/cli/lib";
-import fs from "fs-extra";
-import path from "path";
-import glob from "globby";
+import { logger, resolveProject } from '@digigov/cli/lib';
+import fs from 'fs-extra';
+import path from 'path';
+import glob from 'globby';
 
 const packagePath = process.cwd();
-
-function getBuildPath() {
-  const project = resolveProject();
-  return path.join(project.root, project.distDir);
-}
+const project = resolveProject();
+const buildPath = path.join(project.root, project.distDir);
 
 /**
  * Copy a file from the package to the build directory
@@ -17,10 +14,20 @@ function getBuildPath() {
  */
 function includeFileInBuild(file) {
   const sourcePath = path.resolve(packagePath, file);
-  const buildPath = getBuildPath();
   const targetPath = path.resolve(buildPath, path.basename(file));
   fs.copySync(sourcePath, targetPath);
-  logger.log(`Copied ${sourcePath} to ${targetPath}`);
+  logger.debug(`Copied ${sourcePath} to build directory`);
+}
+
+function copyRegistryFilesToSrc() {
+  const registryPath = path.resolve(buildPath, 'registry/index.js');
+  const lazyPath = path.resolve(buildPath, 'lazy/index.js');
+  if (!fs.existsSync(registryPath) || !fs.existsSync(lazyPath)) return;
+
+  const srcPath = path.resolve(buildPath, 'src');
+  logger.debug(`Copying registry and lazy files to ${srcPath}`);
+  fs.copySync(registryPath, path.resolve(srcPath, 'registry.js'));
+  fs.copySync(lazyPath, path.resolve(srcPath, 'lazy.js'));
 }
 
 /**
@@ -28,23 +35,24 @@ function includeFileInBuild(file) {
  */
 function createRootPackageFile() {
   const packageData = fs.readFileSync(
-    path.resolve(packagePath, "./package.json"),
-    "utf8",
+    path.resolve(packagePath, './package.json'),
+    'utf8'
   );
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } =
     JSON.parse(packageData);
   const newPackageData = {
     ...packageDataOther,
     private: false,
-    main: "./cjs/index.js",
-    module: "./index.js",
-    typings: "./index.d.ts",
+    main: './cjs/index.js',
+    module: './index.js',
+    typings: './index.d.ts',
   };
-  const buildPath = getBuildPath();
-  const targetPath = path.resolve(buildPath, "./package.json");
+  const targetPath = path.resolve(buildPath, './package.json');
 
-  fs.writeFileSync(targetPath, JSON.stringify(newPackageData, null, 2), "utf8");
-  logger.log(`Created package.json in ${targetPath}`);
+  fs.writeFileSync(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8');
+  logger.debug(`Created package.json in build directory`);
 
   return newPackageData;
 }
@@ -54,25 +62,24 @@ function createRootPackageFile() {
  *
  */
 function createNestedPackageFiles() {
-  const buildPath = getBuildPath();
-  const indexPaths = glob.sync(path.join(buildPath, "**/index.js"), {
-    ignore: [path.join(buildPath, "cjs/**")],
+  const indexPaths = glob.sync(path.join(buildPath, '**/index.js'), {
+    ignore: [path.join(buildPath, 'cjs/**')],
   });
 
   indexPaths.forEach((indexPath) => {
-    if (indexPath === path.join(buildPath, "index.js")) return;
+    if (indexPath === path.join(buildPath, 'index.js')) return;
     const packageData = {
       sideEffects: false,
-      module: "./index.js",
-      types: "./index.d.ts",
+      module: './index.js',
+      types: './index.d.ts',
       main: path.relative(
         path.dirname(indexPath),
-        indexPath.replace(buildPath, path.join(buildPath, "/cjs")),
+        indexPath.replace(buildPath, path.join(buildPath, '/cjs'))
       ),
     };
     fs.writeFileSync(
-      path.join(path.dirname(indexPath), "package.json"),
-      JSON.stringify(packageData, null, 2),
+      path.join(path.dirname(indexPath), 'package.json'),
+      JSON.stringify(packageData, null, 2)
     );
   });
 }
@@ -84,8 +91,9 @@ function createNestedPackageFiles() {
  * @param {string} string - The string to prepend
  */
 function prepend(file, string) {
-  const data = fs.readFileSync(file, "utf8");
-  fs.writeFileSync(file, string + data, "utf8");
+  const data = fs.readFileSync(file, 'utf8');
+  fs.writeFileSync(file, string + data, 'utf8');
+  logger.debug(`Prepended license to ${file}`);
 }
 
 /**
@@ -94,24 +102,23 @@ function prepend(file, string) {
  * @param {object} packageData - The package data
  */
 function addLicense(packageData) {
-  const buildPath = getBuildPath();
-  const license = `/** @license Digigov v${packageData["version"]}
+  const license = `/** @license Digigov v${packageData['version']}
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
 `;
-  ["./index.js", "./index.mjs"].map(async (file) => {
+  ['./index.js', './index.mjs'].map(async (file) => {
     try {
       prepend(path.resolve(buildPath, file), license);
     } catch (err) {
       if (
-        typeof err === "object" &&
+        typeof err === 'object' &&
         err &&
-        "code" in err &&
-        err.code === "ENOENT"
+        'code' in err &&
+        err.code === 'ENOENT'
       ) {
-        logger.log(`Skipped license for ${file}`);
+        logger.debug(`Skipped license for ${file}`);
       } else {
         throw err;
       }
@@ -123,14 +130,13 @@ function addLicense(packageData) {
  * Create separate index modules for each directory
  */
 function createSeparateIndexModules() {
-  const buildPath = getBuildPath();
-  const files = glob.sync(path.join(buildPath, "**/*.js"), {
-    ignore: [path.join(buildPath, "**/index.js")],
+  const files = glob.sync(path.join(buildPath, '**/*.js'), {
+    ignore: [path.join(buildPath, '**/index.js')],
   });
 
   files.forEach((file) => {
-    fs.mkdirSync(file.replace(/\.js$/, ""));
-    fs.renameSync(file, file.replace(/\.js$/, "/index.js"));
+    fs.mkdirSync(file.replace(/\.js$/, ''));
+    fs.renameSync(file, file.replace(/\.js$/, '/index.js'));
   });
 }
 
@@ -141,14 +147,15 @@ export default function run() {
   const packageData = createRootPackageFile();
   createSeparateIndexModules();
   createNestedPackageFiles();
+  copyRegistryFilesToSrc();
 
   [
     // use enhanced readme from workspace root for `@digigov/ui`
     // packageData.name === '@digigov/ui' ? '../../README.md' : './README.md',
-    "./src",
-    "./README.md",
-    "./CHANGELOG.md",
-    "../../LICENSE",
-  ].map((file) => includeFileInBuild(file)),
-    addLicense(packageData);
+    './src',
+    './README.md',
+    './CHANGELOG.md',
+    '../../LICENSE',
+  ].map((file) => includeFileInBuild(file));
+  addLicense(packageData);
 }

package/eslint.config.js

@@ -0,0 +1,3 @@
+import config from '@digigov/cli-lint/eslint.config';
+
+export default [...config];

package/generate-registry.js

@@ -0,0 +1,214 @@
+import { logger } from '@digigov/cli/lib';
+import path from 'path';
+import fs from 'fs-extra';
+import { SyntaxKind, Project as TsMorphProject } from 'ts-morph';
+import assert from 'assert';
+
+import { getProjectTsconfig } from './common.js';
+
+/** @typedef {Object} Project - Represents the project to be built
+ * @property {string} root - The project root directory
+ * @property {string} name - The project name as in package.json
+ * @property {string} distDir - The project build directory
+ */
+
+/**
+ * Generate registry file for the given project
+ *
+ * @param {Project} project - The project object
+ * @param {string} [registryFilename="registry.js"] - The name of the registry file
+ * @param {string[]} absoluteFilePaths - The absolute paths of the files to include in the registry
+ * @returns {Promise<string>} - The path to the generated registry file
+ */
+export async function generateRegistry(
+  project,
+  absoluteFilePaths,
+  registryFilename = 'registry.js'
+) {
+  const registryPath = ensureRegistryPath(project, registryFilename);
+
+  const relativePaths = absoluteFilePaths.map((path) => {
+    assert(
+      path.startsWith(project.root),
+      'Expected path to be in project root'
+    );
+    return toNodeResolvablePath(
+      path.replace(`${project.root}/src/`, `${project.name}/`)
+    );
+  });
+  let registryPaths = relativePaths.map((path) => ({
+    path,
+    uid: createUid(path),
+  }));
+
+  if (registryPaths.length === 0)
+    throw new Error(
+      'Could not generate registry. No exportable modules found.'
+    );
+
+  const importStatements = registryPaths.map(
+    (file) => `import * as ${file.uid} from "${file.path}";`
+  );
+  const componentsToExport = registryPaths.map(
+    (file) => `  '${file.path}': lazyImport(${file.uid})`
+  );
+
+  logger.debug(
+    `Including ${componentsToExport.length} items in ${registryPath}`
+  );
+
+  let registryFileContent = `
+${importStatements.join('\n')}
+function lazyImport(pkgImport) {
+  return new Proxy(
+    {},
+    {
+      get: (_target, name) => {
+        if (name === '__esModule' || name === 'default') {
+          return pkgImport.default;
+        } else if(
+          name === '*'
+        ) {
+          return pkgImport;
+        } else {
+          return pkgImport[name];
+        }
+      },
+    }
+  )
+}
+export default {
+${componentsToExport.join(',\n')}
+};
+`;
+  await fs.writeFile(registryPath, registryFileContent);
+
+  return registryPath;
+}
+
+/**
+ * Generate a lazy registry file for the given project
+ *
+ * @param {Project} project - The project object
+ * @param {string[]} filePaths - The files whose exports will be included in the lazy registry
+ * @param {string} [lazyFilename="lazy.js"] - The name of the registry file
+ * @returns {Promise<string>} - The path to the generated lazy registry file
+ */
+export async function generateLazyRegistry(
+  project,
+  filePaths,
+  lazyFilename = 'lazy.js'
+) {
+  const lazyPath = ensureRegistryPath(project, lazyFilename);
+
+  const tsMorphProject = new TsMorphProject({
+    tsConfigFilePath: getProjectTsconfig(project.root),
+  });
+
+  /** @type {Record<string, string>} */
+  let allComponents = {};
+
+  for (const filePath of filePaths) {
+    const sourceFile = tsMorphProject.addSourceFileAtPath(filePath);
+    const exports = sourceFile
+      .getExportSymbols()
+      .filter(isJsExport)
+      .map((symbol) => symbol.getName());
+
+    for (const exportedComponent of exports) {
+      if (
+        exportedComponent !== 'default' &&
+        exportedComponent.match(/^[A-Z]/)
+      ) {
+        if (
+          !allComponents[exportedComponent] ||
+          allComponents[exportedComponent].length < filePath.length // Make import path more specific
+        ) {
+          allComponents[exportedComponent] = toNodeResolvablePath(
+            filePath.replace(`${project.root}/src/`, `${project.name}/`)
+          );
+        }
+      }
+    }
+  }
+
+  const componentCount = Object.keys(allComponents).length;
+
+  if (componentCount === 0)
+    throw new Error(
+      'Could not generate lazy registry. No exportable components found.'
+    );
+
+  logger.debug(`Including ${componentCount} components in ${lazyPath}`);
+
+  const componentsToExport = Object.entries(allComponents)
+    .map(
+      ([component, filePath]) =>
+        `  '${component}': lazy(() => import('${filePath}').then((module) => ({ default: module['${component}'] })))`
+    )
+    .join(',\n');
+
+  const lazyFileContent = `import { lazy } from 'react';
+export default {
+${componentsToExport}
+};
+`;
+
+  await fs.writeFile(lazyPath, lazyFileContent);
+
+  return lazyPath;
+}
+
+/**
+ * Ensure that the registry file does not already exist at the given path
+ *
+ * @param {Project} project - The project object
+ * @param {string} fileName - The name of the registry file
+ */
+function ensureRegistryPath(project, fileName) {
+  const registryPath = path.join(project.root, project.distDir, fileName);
+  if (fs.existsSync(registryPath))
+    throw new Error(`A "${fileName}" file already exists at ${registryPath}.`);
+  return registryPath;
+}
+
+/**
+ * Extract a node-resolvable path
+ *
+ * @param {string} inputPath - The file path
+ * @returns {string} - The node-resolvable path
+ */
+function toNodeResolvablePath(inputPath) {
+  const dir = path.dirname(inputPath);
+  const base = path.basename(inputPath, path.extname(inputPath));
+
+  return base === 'index' ? dir : path.join(dir, base);
+}
+
+/**
+ * Create a UID from a path
+ *
+ * @param {string} inputPath - The path
+ * @returns {string} - The UID
+ */
+function createUid(inputPath) {
+  return inputPath.replace(/[/@\-.]/g, '_');
+}
+
+/**
+ * Check if a symbol is a JS export
+ *
+ * @param {import("ts-morph").Symbol} symbol - The symbol to check
+ */
+function isJsExport(symbol) {
+  const declarations = symbol.getDeclarations();
+  return declarations.some((declaration) => {
+    const kind = declaration.getKind();
+    return (
+      kind === SyntaxKind.FunctionDeclaration ||
+      kind === SyntaxKind.ClassDeclaration ||
+      kind === SyntaxKind.VariableDeclaration ||
+      kind === SyntaxKind.ExportSpecifier
+    );
+  });
+}

package/index.js

@@ -1,85 +1,118 @@
-import { DigigovCommand, resolveProject } from "@digigov/cli/lib";
-import copyFiles from "./copy-files.js";
+import { DigigovCommand, resolveProject, logger } from '@digigov/cli/lib';
+import { buildFormat, generateTypeDeclarationFiles } from './build.js';
+import { generateLazyRegistry, generateRegistry } from './generate-registry.js';
+import copyFiles from './copy-files.js';
 
-import fs from "fs-extra";
-import path from "path";
-import esbuild from "esbuild";
-import glob from "globby";
+import { Option } from 'commander';
+import path from 'path';
+import glob from 'globby';
+import assert from 'assert';
+import { getProjectTsconfig } from './common.js';
 
-const command = new DigigovCommand("build", import.meta.url).action(build);
+const command = new DigigovCommand('build', import.meta.url)
+  .option(
+    '--generate-registry',
+    'Generate a registry file for the build output'
+  )
+  .addOption(
+    new Option('--include-stories', 'Include stories in the output').implies({
+      generateRegistry: true,
+    })
+  )
+  .action(main);
 export default command;
 
+const SRC_GLOB = 'src/**/*.{tsx,ts,js,jsx}';
+const TEST_GLOBS = [
+  '**/*.test.{js,jsx,ts,tsx}',
+  '**/*.spec.{js,jsx,ts,tsx}',
+  '**/__tests__/**/*.{js,jsx,ts,tsx}',
+];
+const STORIES_GLOBS = [
+  '**/*.stories.{js,jsx,ts,tsx}',
+  '**/__stories__/**/*.{js,jsxts,tsx}',
+];
+
 /**
+ * @param {object} options - The command options
+ * @param {boolean} options.generateRegistry - Generate a registry file for the build output
+ * @param {boolean} options.includeStories - Include stories in the generated registry file
  * @param {DigigovCommand} ctx
  */
-async function build(_, ctx) {
-  await ctx.exec("rimraf", ["dist"]);
+async function main(options, ctx) {
   const project = resolveProject();
 
-  const distDir = path.resolve(project.root, project.distDir);
-  const basename = path.basename(project.root);
+  await ctx.exec('rimraf', [project.distDir]);
 
+  /**
+   * The project tsconfig, or undefined if the project is not using TypeScript
+   * @type {string | undefined}
+   */
+  let tsconfig;
   if (project.isTs) {
-    const tsconfigProduction = path.join(
-      project.root,
-      "tsconfig.production.json",
-    );
-    /** @type {string[]} */
-    const tsArgs = [];
-    if (fs.existsSync(tsconfigProduction)) {
-      tsArgs.push("--project", tsconfigProduction);
-    }
-    await ctx.exec("tsc", [
-      "--emitDeclarationOnly",
-      "--outDir",
-      "dist",
-      ...tsArgs,
-    ]);
-    if (fs.existsSync(path.join(distDir, basename))) {
-      const typesIncluded = fs.readdirSync(path.join(distDir));
-      const paths = fs.readdirSync(path.join(distDir, basename, project.src));
-      paths.forEach((p) => {
-        fs.renameSync(
-          path.join(distDir, basename, project.src, p),
-          path.join(distDir, p),
-        );
-      });
-      typesIncluded.forEach((typesDir) => {
-        fs.rmSync(path.join(distDir, typesDir), { recursive: true });
-      });
-    }
-  }
-
-  const files = glob.sync(
-    path.join(project.root, "src", "**/*.{tsx,ts,js,jsx}"),
-    {
-      ignore: ["**/*.{spec,test}.{ts,tsx,js,jsx}"],
-    },
-  );
-  const commonBuildOptions = {
-    entryPoints: files,
-    platform: "node",
-    sourcemap: true,
-    target: ["esnext"],
-    logLevel: "error",
-  };
-  if (fs.existsSync(path.join(project.root, "tsconfig.production.json"))) {
-    commonBuildOptions["tsconfig"] = "tsconfig.production.json";
-  } else if (fs.existsSync(path.join(project.root, "tsconfig.json"))) {
-    commonBuildOptions["tsconfig"] = "tsconfig.json";
+    tsconfig = getProjectTsconfig(project.root);
+    assert(tsconfig, 'Expected tsconfig to be in project');
+    await generateTypeDeclarationFiles(project, tsconfig, ctx);
   }
 
+  const ignore = [...TEST_GLOBS, ...STORIES_GLOBS];
+  const filesToBuild = await glob(path.join(project.root, SRC_GLOB), {
+    ignore,
+  });
+  logger.debug('Bundling ESM and CJS...');
   await Promise.all([
-    esbuild.build({
-      ...commonBuildOptions,
-      format: "esm",
-      outdir: `dist`,
+    buildFormat({
+      files: filesToBuild,
+      tsconfig: tsconfig,
+      format: 'cjs',
+      outdir: project.distDir + '/cjs',
     }),
-    esbuild.build({
-      ...commonBuildOptions,
-      format: "cjs",
-      outdir: `dist/cjs`,
+    buildFormat({
+      files: filesToBuild,
+      tsconfig,
+      format: 'esm',
+      outdir: project.distDir,
     }),
   ]);
+  logger.debug('Bundling done.');
+
+  if (options.generateRegistry) {
+    logger.debug('Generating registry files...');
+
+    const filesToIncludeInRegistry = filesToBuild.filter(
+      (file) => !(file.includes('native') || file.endsWith('.d.ts'))
+    );
+    let storiesFiles = null;
+    if (options.includeStories) {
+      logger.debug('Including stories in the registry...');
+
+      storiesFiles = await glob(
+        STORIES_GLOBS.map((glob) => path.join(project.root, project.src, glob)),
+        {
+          ignore: ['**/*.native.*, **/*.d.ts'],
+        }
+      );
+    }
+
+    const [, ...registryFilePaths] = await Promise.all([
+      storiesFiles
+        ? generateRegistry(project, storiesFiles, 'stories-registry.js')
+        : null,
+      generateRegistry(project, filesToIncludeInRegistry),
+      generateLazyRegistry(project, filesToIncludeInRegistry),
+    ]);
+
+    buildFormat({
+      files: registryFilePaths,
+      tsconfig: tsconfig,
+      format: 'cjs',
+      outdir: project.distDir + '/cjs',
+      noLogs: true,
+    });
+    logger.log('Generated registry files');
+  }
+
+  logger.debug('Copying files to build directory...');
   copyFiles();
+  logger.debug('Files copied.');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/cli-build",
-  "version": "2.0.0-0c4be34e",
+  "version": "2.0.0-107d908d",
   "description": "Build plugin for Digigov CLI",
   "main": "./index.js",
   "type": "module",
@@ -8,37 +8,28 @@
   "license": "BSD-2-Clause",
   "private": false,
   "dependencies": {
-    "@babel/cli": "7.12.1",
-    "@babel/compat-data": "7.12.5",
-    "@babel/core": "7.26.0",
-    "@babel/helper-validator-identifier": "7.9.5",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-proposal-object-rest-spread": "7.12.1",
-    "@babel/plugin-transform-object-assign": "7.12.1",
-    "@babel/plugin-transform-runtime": "7.12.1",
-    "@babel/preset-env": "7.12.13",
-    "@babel/preset-react": "7.12.13",
-    "@babel/preset-typescript": "7.12.1",
-    "babel-plugin-inline-import-data-uri": "1.0.1",
-    "babel-plugin-module-resolver": "4.0.0",
-    "babel-plugin-optimize-clsx": "1.1.1",
-    "babel-plugin-react-remove-properties": "0.3.0",
-    "babel-plugin-transform-dev-warning": "0.1.1",
-    "babel-plugin-transform-react-constant-elements": "6.23.0",
-    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "fs-extra": "11.2.0",
     "globby": "11.0.0",
-    "@digigov/babel-ts-to-proptypes": "1.1.0-rc.23",
-    "babel-plugin-istanbul": "7.0.0",
     "publint": "0.1.8",
     "rimraf": "3.0.2",
-    "esbuild": "0.23.0"
+    "esbuild": "0.23.0",
+    "commander": "12.1.0",
+    "ts-morph": "25.0.0"
   },
   "devDependencies": {
-    "publint": "0.1.8"
+    "@digigov/cli": "2.0.0-107d908d",
+    "@digigov/cli-lint": "2.0.0-107d908d",
+    "publint": "0.1.8",
+    "vitest": "2.1.3",
+    "@digigov/cli-test": "2.0.0-107d908d",
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "20.17.24",
+    "typescript": "5.6.2",
+    "eslint": "9.16.0",
+    "prettier": "3.4.2"
   },
   "peerDependencies": {
-    "@digigov/cli": "2.0.0-0c4be34e",
+    "@digigov/cli": "2.0.0-107d908d",
     "next": "13.1.1"
   },
   "peerDependenciesMeta": {
@@ -47,6 +38,8 @@
     }
   },
   "scripts": {
-    "publint": "publint"
+    "publint": "publint",
+    "lint": "digigov lint",
+    "typecheck": "tsc"
   }
 }

package/tsconfig.base.json

@@ -33,7 +33,10 @@
       "@digigov/react-experimental/*": ["../libs-ui/react-experimental/src/*"],
       "@digigov/react-experimental/": ["../libs-ui/react-experimental/src"],
       "@digigov/react-experimental": ["../libs-ui/react-experimental/src"],
-      "@digigov/storybook/*": ["../examples/storybook/stories/*"]
+      "@digigov/storybook/*": ["../examples/storybook/stories/*"],
+      "@uides/stepwise/*": ["./stepwise/src/*"],
+      "@uides/stepwise/": ["./stepwise/src"],
+      "@uides/stepwise": ["./stepwise/src"]
     }
   },
   "include": [

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@digigov/cli/tsconfig.cli",
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  },
+  "include": ["./*.js", "__tests__"],
+  "exclude": ["eslint.config.js", ".prettierrc.cjs"]
+}