@ahmedrowaihi/pdf-forge-cli 1.0.0-canary.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@ahmedrowaihi/pdf-forge-cli",
+  "version": "1.0.0-canary.0",
+  "description": "A live preview of your PDF templates right in your browser.",
+  "bin": {
+    "pdf-dev": "./dist/index.js"
+  },
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ahmedrowaihi/react-pdf-forge.git",
+    "directory": "packages/react-pdf"
+  },
+  "keywords": [
+    "react",
+    "pdf"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "@babel/parser": "^7.27.0",
+    "@babel/traverse": "^7.27.0",
+    "chokidar": "^4.0.3",
+    "commander": "^13.0.0",
+    "conf": "^15.0.2",
+    "debounce": "^2.0.0",
+    "esbuild": "^0.25.0",
+    "glob": "^11.0.0",
+    "jiti": "2.4.2",
+    "log-symbols": "^7.0.0",
+    "mime-types": "^3.0.0",
+    "normalize-path": "^3.0.0",
+    "nypm": "0.6.2",
+    "ora": "^8.0.0",
+    "prompts": "2.4.2",
+    "socket.io": "^4.8.1",
+    "tsconfig-paths": "4.2.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "7.20.5",
+    "@types/babel__traverse": "7.20.7",
+    "@types/mime-types": "2.1.4",
+    "@types/prompts": "2.4.9",
+    "next": "^16",
+    "react": "^19",
+    "react-dom": "^19",
+    "typescript": "5.8.3",
+    "@ahmedrowaihi/pdf-forge-components": "1.0.0-canary.0",
+    "@ahmedrowaihi/pdf-forge-core": "1.0.0-canary.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "build:watch": "tsdown --watch src",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/src/commands/build.ts

@@ -0,0 +1,249 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import logSymbols from 'log-symbols';
+import { installDependencies, type PackageManagerName, runScript } from 'nypm';
+import ora from 'ora';
+import { getPreviewServerLocation } from '../utils/get-preview-server-location.js';
+import {
+  getTemplatesDirectoryMetadata,
+  type TemplatesDirectory,
+} from '../utils/get-templates-directory-metadata.js';
+import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping.js';
+
+interface Args {
+  dir: string;
+  packageManager: PackageManagerName;
+}
+
+const setNextEnvironmentVariablesForBuild = async (
+  templatesDirRelativePath: string,
+  builtPreviewAppPath: string,
+) => {
+  const nextConfigContents = `
+import path from 'path';
+const templatesDirRelativePath = path.normalize('${templatesDirRelativePath}');
+const userProjectLocation = '${process.cwd().replace(/\\/g, '/')}';
+const previewServerLocation = '${builtPreviewAppPath.replace(/\\/g, '/')}';
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  env: {
+    NEXT_PUBLIC_IS_BUILDING: 'true',
+    TEMPLATES_DIR_RELATIVE_PATH: templatesDirRelativePath,
+    TEMPLATES_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, templatesDirRelativePath),
+    PREVIEW_SERVER_LOCATION: previewServerLocation,
+    USER_PROJECT_LOCATION: userProjectLocation
+  },
+  outputFileTracingRoot: previewServerLocation,
+  serverExternalPackages: ['esbuild'],
+  typescript: {
+    ignoreBuildErrors: true
+  },
+  experimental: {
+    webpackBuildWorker: true
+  },
+}
+
+export default nextConfig`;
+
+  await fs.promises.writeFile(
+    path.resolve(builtPreviewAppPath, './next.config.mjs'),
+    nextConfigContents,
+    'utf8',
+  );
+};
+
+const getTemplateSlugsFromTemplateDirectory = (
+  templateDirectory: TemplatesDirectory,
+  templatesDirectoryAbsolutePath: string,
+) => {
+  const directoryPathRelativeToTemplatesDirectory =
+    templateDirectory.absolutePath
+      .replace(templatesDirectoryAbsolutePath, '')
+      .trim();
+
+  const slugs = [] as Array<string>[];
+  for (const filename of templateDirectory.templateFilenames) {
+    slugs.push(
+      path
+        .join(directoryPathRelativeToTemplatesDirectory, filename)
+        .split(path.sep)
+        // sometimes it gets empty segments due to trailing slashes
+        .filter((segment) => segment.length > 0),
+    );
+  }
+  for (const directory of templateDirectory.subDirectories) {
+    slugs.push(
+      ...getTemplateSlugsFromTemplateDirectory(
+        directory,
+        templatesDirectoryAbsolutePath,
+      ),
+    );
+  }
+
+  return slugs;
+};
+
+// we do this because otherwise it won't be able to find the templates
+// after build
+const forceSSGForPDFPreviews = async (
+  templatesDirPath: string,
+  builtPreviewAppPath: string,
+) => {
+  const templatesDirectoryMetadata = (await getTemplatesDirectoryMetadata(
+    templatesDirPath,
+  ))!;
+
+  const parameters = getTemplateSlugsFromTemplateDirectory(
+    templatesDirectoryMetadata,
+    templatesDirPath,
+  ).map((slug) => ({ slug }));
+
+  const removeForceDynamic = async (filePath: string) => {
+    const contents = await fs.promises.readFile(filePath, 'utf8');
+
+    await fs.promises.writeFile(
+      filePath,
+      contents.replace("export const dynamic = 'force-dynamic';", ''),
+      'utf8',
+    );
+  };
+  await removeForceDynamic(
+    path.resolve(builtPreviewAppPath, './src/app/layout.tsx'),
+  );
+  await removeForceDynamic(
+    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
+  );
+
+  await fs.promises.appendFile(
+    path.resolve(builtPreviewAppPath, './src/app/preview/[...slug]/page.tsx'),
+    `
+
+export function generateStaticParams() { 
+  return Promise.resolve(
+    ${JSON.stringify(parameters)}
+  );
+}`,
+    'utf8',
+  );
+};
+
+const updatePackageJson = async (builtPreviewAppPath: string) => {
+  const packageJsonPath = path.resolve(builtPreviewAppPath, './package.json');
+  const packageJson = JSON.parse(
+    await fs.promises.readFile(packageJsonPath, 'utf8'),
+  ) as {
+    name: string;
+    scripts: Record<string, string>;
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+  };
+  // Clean up package.json for preview server
+  packageJson.scripts.build = 'next build';
+  packageJson.scripts.start = 'next start';
+  delete packageJson.scripts.postbuild;
+
+  packageJson.name = 'preview-server';
+
+  for (const [dependency, version] of Object.entries(
+    packageJson.devDependencies,
+  )) {
+    packageJson.devDependencies[dependency] = version.replace('workspace:', '');
+  }
+
+  delete packageJson.devDependencies['@ahmedrowaihi/pdf-forge-components'];
+  delete packageJson.scripts.prepare;
+
+  await fs.promises.writeFile(
+    packageJsonPath,
+    JSON.stringify(packageJson),
+    'utf8',
+  );
+};
+
+export const build = async ({
+  dir: templatesDirRelativePath,
+  packageManager,
+}: Args) => {
+  try {
+    const previewServerLocation = await getPreviewServerLocation();
+
+    const spinner = ora({
+      text: 'Starting build process...',
+      prefixText: '  ',
+    }).start();
+    registerSpinnerAutostopping(spinner);
+
+    spinner.text = `Checking if ${templatesDirRelativePath} folder exists`;
+    if (!fs.existsSync(templatesDirRelativePath)) {
+      process.exit(1);
+    }
+
+    const templatesDirPath = path.join(process.cwd(), templatesDirRelativePath);
+    const staticPath = path.join(templatesDirPath, 'static');
+
+    const builtPreviewAppPath = path.join(process.cwd(), '.react-pdf');
+
+    if (fs.existsSync(builtPreviewAppPath)) {
+      spinner.text = 'Deleting pre-existing `.react-pdf` folder';
+      await fs.promises.rm(builtPreviewAppPath, { recursive: true });
+    }
+
+    spinner.text = 'Copying preview app from CLI to `.react-pdf`';
+    await fs.promises.cp(previewServerLocation, builtPreviewAppPath, {
+      recursive: true,
+      filter: (source: string) => {
+        // do not copy the CLI files
+        return (
+          !/(\/|\\)cli(\/|\\)?/.test(source) &&
+          !/(\/|\\)\.next(\/|\\)?/.test(source) &&
+          !/(\/|\\)\.turbo(\/|\\)?/.test(source) &&
+          !/(\/|\\)node_modules(\/|\\)?$/.test(source)
+        );
+      },
+    });
+
+    if (fs.existsSync(staticPath)) {
+      spinner.text = 'Copying `static` folder into `.react-pdf/public/static`';
+      const builtStaticDirectory = path.resolve(
+        builtPreviewAppPath,
+        './public/static',
+      );
+      await fs.promises.cp(staticPath, builtStaticDirectory, {
+        recursive: true,
+      });
+    }
+
+    spinner.text =
+      'Setting Next environment variables for preview app to work properly';
+    await setNextEnvironmentVariablesForBuild(
+      templatesDirRelativePath,
+      builtPreviewAppPath,
+    );
+
+    spinner.text = 'Setting server side generation for the PDF preview pages';
+    await forceSSGForPDFPreviews(templatesDirPath, builtPreviewAppPath);
+
+    spinner.text = "Updating package.json's build and start scripts";
+    await updatePackageJson(builtPreviewAppPath);
+
+    spinner.text = 'Installing dependencies on `.react-pdf`';
+    await installDependencies({
+      cwd: builtPreviewAppPath,
+      silent: true,
+      packageManager,
+    });
+
+    spinner.stopAndPersist({
+      text: 'Successfully prepared `.react-pdf` for `next build`',
+      symbol: logSymbols.success,
+    });
+
+    await runScript('build', {
+      packageManager,
+      cwd: builtPreviewAppPath,
+    });
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};

package/src/commands/dev.ts

@@ -0,0 +1,27 @@
+import fs from 'node:fs';
+import { setupHotreloading, startDevServer } from '../utils/index.js';
+
+interface Args {
+  dir: string;
+  port: string;
+}
+
+export const dev = async ({ dir: templatesDirRelativePath, port }: Args) => {
+  try {
+    if (!fs.existsSync(templatesDirRelativePath)) {
+      console.error(`Missing ${templatesDirRelativePath} folder`);
+      process.exit(1);
+    }
+
+    const devServer = await startDevServer(
+      templatesDirRelativePath,
+      templatesDirRelativePath, // defaults to ./templates/static for the static files that are served to the preview
+      Number.parseInt(port, 10),
+    );
+
+    await setupHotreloading(devServer, templatesDirRelativePath);
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};

package/src/commands/export.ts

@@ -0,0 +1,204 @@
+import fs, { unlinkSync, writeFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import url from 'node:url';
+import type { Options } from '@ahmedrowaihi/pdf-forge-core';
+import { type BuildFailure, build } from 'esbuild';
+import { glob } from 'glob';
+import logSymbols from 'log-symbols';
+import normalize from 'normalize-path';
+import ora, { type Ora } from 'ora';
+import type React from 'react';
+import { renderingUtilitiesExporter } from '../utils/esbuild/renderring-utilities-exporter.js';
+import {
+  getTemplatesDirectoryMetadata,
+  type TemplatesDirectory,
+} from '../utils/get-templates-directory-metadata.js';
+import { tree } from '../utils/index.js';
+import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping.js';
+
+const getTemplatesFromDirectory = (templateDirectory: TemplatesDirectory) => {
+  const templatePaths = [] as string[];
+  for (const filename of templateDirectory.templateFilenames) {
+    templatePaths.push(path.join(templateDirectory.absolutePath, filename));
+  }
+  for (const directory of templateDirectory.subDirectories) {
+    templatePaths.push(...getTemplatesFromDirectory(directory));
+  }
+
+  return templatePaths;
+};
+
+type ExportTemplatesOptions = Options & {
+  silent?: boolean;
+  pretty?: boolean;
+};
+
+const filename = url.fileURLToPath(import.meta.url);
+
+const require = createRequire(filename);
+
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+export const exportTemplates = async (
+  pathToWhereTemplateMarkupShouldBeDumped: string,
+  templatesDirectoryPath: string,
+  options: ExportTemplatesOptions,
+) => {
+  /* Delete the out directory if it already exists */
+  if (fs.existsSync(pathToWhereTemplateMarkupShouldBeDumped)) {
+    fs.rmSync(pathToWhereTemplateMarkupShouldBeDumped, { recursive: true });
+  }
+
+  let spinner: Ora | undefined;
+  if (!options.silent) {
+    spinner = ora('Preparing files...\n').start();
+    registerSpinnerAutostopping(spinner);
+  }
+
+  const templatesDirectoryMetadata = await getTemplatesDirectoryMetadata(
+    path.resolve(process.cwd(), templatesDirectoryPath),
+    true,
+  );
+
+  if (typeof templatesDirectoryMetadata === 'undefined') {
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols.error,
+        text: `Could not find the directory at ${templatesDirectoryPath}`,
+      });
+    }
+    return;
+  }
+
+  const allTemplates = getTemplatesFromDirectory(templatesDirectoryMetadata);
+
+  try {
+    await build({
+      bundle: true,
+      entryPoints: allTemplates,
+      format: 'cjs',
+      jsx: 'automatic',
+      loader: { '.js': 'jsx' },
+      logLevel: 'silent',
+      outExtension: { '.js': '.cjs' },
+      outdir: pathToWhereTemplateMarkupShouldBeDumped,
+      platform: 'node',
+      plugins: [renderingUtilitiesExporter(allTemplates)],
+      write: true,
+    });
+  } catch (exception) {
+    if (spinner) {
+      spinner.stopAndPersist({
+        symbol: logSymbols.error,
+        text: 'Failed to build PDF templates',
+      });
+    }
+
+    const buildFailure = exception as BuildFailure;
+    console.error(`\n${buildFailure.message}`);
+
+    process.exit(1);
+  }
+
+  if (spinner) {
+    spinner.succeed();
+  }
+
+  const allBuiltTemplates = glob.sync(
+    normalize(`${pathToWhereTemplateMarkupShouldBeDumped}/**/*.cjs`),
+    {
+      absolute: true,
+    },
+  );
+
+  for await (const template of allBuiltTemplates) {
+    try {
+      if (spinner) {
+        spinner.text = `rendering ${template.split('/').pop()}`;
+        spinner.render();
+      }
+      delete require.cache[template];
+      const templateModule = require(template) as {
+        default: React.FC;
+        render: (
+          element: React.ReactElement,
+          options: Record<string, unknown>,
+        ) => Promise<string>;
+        reactPDFCreateReactElement: typeof React.createElement;
+      };
+      const rendered = await templateModule.render(
+        templateModule.reactPDFCreateReactElement(templateModule.default, {}),
+        options,
+      );
+      const htmlPath = template.replace(
+        '.cjs',
+        options.plainText ? '.txt' : '.html',
+      );
+      writeFileSync(htmlPath, rendered);
+      unlinkSync(template);
+    } catch (exception) {
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error,
+          text: `failed when rendering ${template.split('/').pop()}`,
+        });
+      }
+      console.error(exception);
+      process.exit(1);
+    }
+  }
+  if (spinner) {
+    spinner.succeed('Rendered all files');
+    spinner.text = 'Copying static files';
+    spinner.render();
+  }
+
+  // ex: templates/static
+  const staticDirectoryPath = path.join(templatesDirectoryPath, 'static');
+
+  if (fs.existsSync(staticDirectoryPath)) {
+    const pathToDumpStaticFilesInto = path.join(
+      pathToWhereTemplateMarkupShouldBeDumped,
+      'static',
+    );
+    // cp('-r', ...) will copy *inside* of the static directory if it exists
+    // causing a duplication of static files, so we need to delete ir first
+    if (fs.existsSync(pathToDumpStaticFilesInto))
+      await fs.promises.rm(pathToDumpStaticFilesInto, { recursive: true });
+
+    try {
+      await fs.promises.cp(staticDirectoryPath, pathToDumpStaticFilesInto, {
+        recursive: true,
+      });
+    } catch (exception) {
+      console.error(exception);
+      if (spinner) {
+        spinner.stopAndPersist({
+          symbol: logSymbols.error,
+          text: 'Failed to copy static files',
+        });
+      }
+      console.error(
+        `Something went wrong while copying the file to ${pathToWhereTemplateMarkupShouldBeDumped}/static, ${exception}`,
+      );
+      process.exit(1);
+    }
+  }
+
+  if (spinner && !options.silent) {
+    spinner.succeed();
+
+    const fileTree = await tree(pathToWhereTemplateMarkupShouldBeDumped, 4);
+
+    console.log(fileTree);
+
+    spinner.stopAndPersist({
+      symbol: logSymbols.success,
+      text: 'Successfully exported PDF templates',
+    });
+  }
+};

package/src/commands/start.ts

@@ -0,0 +1,35 @@
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { getPreviewServerLocation } from '../utils/get-preview-server-location.js';
+
+export const start = async () => {
+  try {
+    const previewServerLocation = await getPreviewServerLocation();
+
+    const usersProjectLocation = process.cwd();
+    const builtPreviewPath = path.resolve(usersProjectLocation, './.react-pdf');
+    if (!fs.existsSync(builtPreviewPath)) {
+      console.error(
+        "Could not find .react-pdf, maybe you haven't ran pdf-dev build?",
+      );
+      process.exit(1);
+    }
+
+    const nextStart = spawn('npx', ['next', 'start', builtPreviewPath], {
+      cwd: previewServerLocation,
+      stdio: 'inherit',
+    });
+
+    process.on('SIGINT', () => {
+      nextStart.kill('SIGINT');
+    });
+
+    nextStart.on('exit', (code) => {
+      process.exit(code ?? 0);
+    });
+  } catch (error) {
+    console.log(error);
+    process.exit(1);
+  }
+};

package/src/index.ts

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+import { program } from 'commander';
+import { build } from './commands/build.js';
+import { dev } from './commands/dev.js';
+import { exportTemplates } from './commands/export.js';
+import { start } from './commands/start.js';
+import { packageJson } from './utils/packageJson.js';
+
+const PACKAGE_NAME = 'react-pdf';
+
+program
+  .name(PACKAGE_NAME)
+  .description('A live preview of your PDF templates right in your browser')
+  .version(packageJson.version);
+
+program
+  .command('dev')
+  .description('Starts the preview PDF development app')
+  .option(
+    '-d, --dir <path>',
+    'Directory with your PDF templates',
+    './templates',
+  )
+  .option('-p --port <port>', 'Port to run dev server on', '3000')
+  .action(dev);
+
+program
+  .command('build')
+  .description('Copies the preview app for onto .react-pdf and builds it')
+  .option(
+    '-d, --dir <path>',
+    'Directory with your PDF templates',
+    './templates',
+  )
+  .option(
+    '-p --packageManager <name>',
+    'Package name to use on installation on `.react-pdf`',
+    'npm',
+  )
+  .action(build);
+
+program
+  .command('start')
+  .description('Runs the built preview app that is inside of ".react-pdf"')
+  .action(start);
+
+program
+  .command('export')
+  .description('Build the templates to the `out` directory')
+  .option('--outDir <path>', 'Output directory', 'out')
+  .option('-p, --pretty', 'Pretty print the output', false)
+  .option('-t, --plainText', 'Set output format as plain text', false)
+  .option(
+    '-d, --dir <path>',
+    'Directory with your PDF templates',
+    './templates',
+  )
+  .option(
+    '-s, --silent',
+    'To, or not to show a spinner with process information',
+    false,
+  )
+  .action(({ outDir, pretty, plainText, silent, dir: srcDir }) =>
+    exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
+  );
+
+program.parse();

package/src/utils/conf.ts

@@ -0,0 +1,10 @@
+import Conf from 'conf';
+
+// Just simple encryption. This isn't completely safe
+// because anyone can find this key here
+const encryptionKey = 'h2#x658}1#qY(@!:7,BD1J)q12$[tM25';
+
+export const conf = new Conf<Record<string, unknown>>({
+  projectName: 'react-pdf',
+  encryptionKey,
+});

package/src/utils/esbuild/escape-string-for-regex.ts

@@ -0,0 +1,3 @@
+export function escapeStringForRegex(string: string) {
+  return string.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
+}