@caperjs/core 0.1.0

package/cli/voiceover/generateVoiceoverCSV.mjs

@@ -0,0 +1,158 @@
+import fs from 'node:fs';
+
+// Default voiceover attributes
+const defaultVoice = 'en-US-Wavenet-D'; // Example Google voice ID
+const defaultGender = 'female';
+const defaultLanguage = 'en-US';
+const defaultCaption = 'Y';
+
+// Function to load existing CSV data into a map
+function loadExistingCsv(filePath) {
+  const csvMap = new Map();
+  if (fs.existsSync(filePath)) {
+    const csvData = fs.readFileSync(filePath, 'utf8');
+    const lines = csvData.split('\n');
+    lines.forEach((line, index) => {
+      if (line && index > 0) {
+        // Skip header
+        const parts = line.split('\t'); // Use tab to split
+        const filename = parts[0];
+        csvMap.set(filename, parts);
+      }
+    });
+  }
+  return csvMap;
+}
+
+function updateOrAddLine(filename, lineText, csvMap) {
+  lineText = stripHtmlTags(lineText);
+
+  if (csvMap.has(filename)) {
+    const parts = csvMap.get(filename);
+    parts[1] = lineText; // Update the line text
+  } else {
+    // Create new line with defaults if they are not present
+    const newLine = [filename, lineText, defaultVoice, defaultGender, defaultLanguage, defaultCaption];
+    csvMap.set(filename, newLine);
+  }
+}
+
+function stripHtmlTags(str) {
+  // Replace <strong> tag with asterisks for emphasis
+  str = str.replace(/<strong>/g, '*');
+  str = str.replace(/<\/strong>/g, '*');
+
+  // Replace <em> tag with underscores for emphasis
+  str = str.replace(/<em>/g, '_');
+  str = str.replace(/<\/em>/g, '_');
+
+  // Remove other HTML tags
+  str = str.replace(/<[^>]*>/g, '');
+  return str;
+}
+
+// Function to parse the object and create CSV content
+function parseOrUpdateVoiceoverData(data, existingCsvMap) {
+  let csvContent = 'FILENAME\tLINE\tSCRATCH_VOICE\tSCRATCH_GENDER\tSCRATCH_LANGUAGE\tCAPTION\n';
+
+  for (const key in data) {
+    const value = data[key];
+
+    // Handle replace object structure
+    if (value && typeof value === 'object' && 'replace' in value) {
+      const { replace, replaceOpts } = value;
+
+      // Parse replacement options
+      if (replaceOpts && replaceOpts.startsWith('[') && replaceOpts.endsWith(']')) {
+        const options = replaceOpts.slice(1, -1).split('|');
+
+        // Generate a line for each replacement option
+        options.forEach((option, index) => {
+          const filename = `${key}_${index}`;
+          const replacedText = replace.replace(/\{[^}]+\}/, option.trim());
+          updateOrAddLine(filename, replacedText, existingCsvMap);
+        });
+      } else {
+        // If no valid replaceOpts, just use the replace text as is
+        updateOrAddLine(key, replace, existingCsvMap);
+      }
+    }
+    // Handle existing string array format
+    else if (typeof value === 'string' && value.startsWith('[') && value.endsWith(']')) {
+      const options = value.slice(1, -1).split('|');
+      options.forEach((option, index) => {
+        const filename = `${key}_${index}`;
+        updateOrAddLine(filename, option, existingCsvMap);
+      });
+    }
+    // Handle simple string
+    else if (typeof value === 'string') {
+      updateOrAddLine(key, value, existingCsvMap);
+    }
+  }
+
+  existingCsvMap.forEach((parts) => {
+    csvContent += parts.join('\t') + '\n';
+  });
+
+  return csvContent;
+}
+
+export async function generateVoiceoverCSV(inputDirs, outputDir) {
+  console.log('inputDirs', inputDirs);
+  // Split input directories and trim whitespace
+  const directories = inputDirs.split(',').map((dir) => dir.trim());
+
+  // Process each directory
+  for (const inputDir of directories) {
+    // Skip if directory doesn't exist
+    if (!fs.existsSync(inputDir)) {
+      console.warn(`Warning: Directory ${inputDir} does not exist, skipping...`);
+      continue;
+    }
+
+    const files = fs.readdirSync(inputDir).filter((file) => !file.startsWith('.'));
+    for (const file of files) {
+      const filePath = `${inputDir}/${file}`;
+      console.log('filePath', filePath);
+      // only process files that end with .js or .ts or .json
+      if (!file.endsWith('.js') && !file.endsWith('.ts') && !file.endsWith('.json')) {
+        console.log('Skipping file', file);
+        continue;
+      }
+
+      let fileData = fs.readFileSync(filePath, 'utf-8');
+      // if the file is a js or ts file, extract a JSON object by finding the first occurrence of '{'
+      if (file.endsWith('.js') || file.endsWith('.ts')) {
+        const startIndex = fileData.indexOf('{');
+        const endIndex = fileData.lastIndexOf('}');
+        fileData = fileData.slice(startIndex, endIndex + 1);
+        // ensure it's valid json by eliminating single quotes and comments
+        fileData = fileData
+          .replace(/\/\/.*/g, '')
+          .replace(/\/\*.*\*\//g, '')
+          .replace(/'/g, '"');
+        // wrap the keys in double quotes
+        fileData = fileData.replace(/(\w+):/g, '"$1":');
+        // remove trailing commas
+        fileData = fileData.replace(/,(\s*})/g, '$1');
+      }
+      // parse the JSON object
+      fileData = JSON.parse(fileData);
+
+      // Use the directory name as part of the output filename to avoid conflicts
+      const dirName = inputDir.split('/').filter(Boolean).pop() || 'default';
+      const csvFilePath = `${outputDir}/${dirName}_${file.replace(/\.\w+$/, '')}.csv`;
+
+      const existingCsvMap = loadExistingCsv(csvFilePath);
+      // generate the CSV content
+      const csvContent = parseOrUpdateVoiceoverData(fileData, existingCsvMap);
+
+      if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+      }
+      // write the CSV content to the file
+      fs.writeFileSync(csvFilePath, csvContent);
+    }
+  }
+}

package/cli/voiceover/index.mjs

@@ -0,0 +1 @@
+export { generateVoiceoverCSV } from './generateVoiceoverCSV.mjs';

package/cli.mjs

@@ -0,0 +1,157 @@
+#!/usr/bin/env node
+
+import { bgRed, bold, green, red, white } from 'kleur/colors';
+
+import fs from 'node:fs';
+import process from 'node:process';
+import { add } from './cli/add.mjs';
+import { generateCaptions } from './cli/audio/cc.mjs';
+import { compress } from './cli/audio/index.mjs';
+import { create } from './cli/create.mjs';
+import { installPeerDeps } from './cli/install-peerdeps.mjs';
+import { update } from './cli/update.mjs';
+import { runBuild, runPreview, startDevServer } from './cli/vite.mjs';
+import { generateVoiceoverCSV } from './cli/voiceover/index.mjs';
+
+const currentVersion = process.versions.node;
+const requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);
+const minimumMajorVersion = 18;
+
+if (requiredMajorVersion < minimumMajorVersion) {
+  console.error(`Node.js v${currentVersion} is out of date and unsupported!`);
+  console.error(`Please use Node.js v${minimumMajorVersion} or higher.`);
+  process.exit(1);
+}
+
+const { version } = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf-8'));
+
+const args = process.argv.slice(2);
+
+const hr = () => {
+  return console.log(bold(green('-'.repeat(80))));
+};
+
+if (!(!args[0] || args[0] === 'version')) {
+  console.log(bold(green(`Caper ${version}`)));
+}
+
+if (args.length === 0) {
+  console.log(bold(green('Caper - Please provide a subcommand.')));
+  process.exit(1);
+}
+
+let pkg, newVersion, voInputDir, voCSVDirectory, audioDirectory, captionsCSVDirectory, captionsOutputDirectory;
+
+switch (args[0]) {
+  case 'install':
+    await installPeerDeps();
+    break;
+  case 'version':
+    break;
+  case 'dev':
+  case 'start':
+    await startDevServer();
+    break;
+  case 'build':
+    await runBuild();
+    break;
+  case 'preview':
+    await runPreview();
+    break;
+  case 'add':
+    await add(args.slice(1));
+    break;
+  case 'create': {
+    let packageManager = 'npm'; // Default to npm
+    let projectPath = '.'; // Default to current directory
+
+    // Parse arguments
+    for (let i = 1; i < args.length; i++) {
+      if (args[i] === '--use-yarn') {
+        packageManager = 'yarn';
+      } else if (args[i] === '--use-pnpm') {
+        packageManager = 'pnpm';
+      } else if (!args[i].startsWith('--')) {
+        projectPath = args[i];
+      }
+    }
+    await create(projectPath, packageManager);
+    break;
+  }
+  case 'update':
+    hr();
+    console.log(bold(green(`Updating Caper to the latest version...`)));
+    await update();
+    pkg = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf-8'));
+    newVersion = pkg.version;
+    console.log(`${bold(green(`Updated Caper to version ${newVersion}`))}`);
+    hr();
+    break;
+  case 'vo':
+    hr();
+    switch (args[1]) {
+      case 'generate':
+        console.log(bold(green(`Caper is generating a new voiceover file...`)));
+        voInputDir = args[2] || './src/locales';
+        voCSVDirectory = args[3] || './src/assets/audio/vo/csv';
+        try {
+          await generateVoiceoverCSV(voInputDir, voCSVDirectory);
+          console.log(
+            bold(green(`Caper has finished generating your voiceover CSV(s)! Find them in "${voCSVDirectory}."`)),
+          );
+        } catch (e) {
+          console.log(e);
+          console.error(bold(bgRed(white(`Error generating voiceover CSV(s):`))), red(e));
+        }
+        break;
+      default:
+        console.error(bold(bgRed(white(`Unknown VO command: "${args[1]}".`))), red(`Please use "generate".`));
+        break;
+    }
+    hr();
+    break;
+  case 'audio':
+    hr();
+    switch (args[1]) {
+      case 'compress':
+        audioDirectory = args[2] || './src/assets/audio';
+        console.log(bold(green(`Caper is compressing your audio files...`)));
+        try {
+          await compress(audioDirectory);
+        } catch (e) {
+          console.error(red(`Error compressing your audio files: ${e}`));
+        }
+        console.log(
+          bold(green(`Caper has finished compressing your audio files! Find them in "${audioDirectory}/output."`)),
+        );
+        break;
+      case 'captions':
+        captionsCSVDirectory = args[2] || './src/assets/audio/captions';
+        captionsOutputDirectory = args[3] || './src/assets/json';
+        console.log(bold(green(`Caper is preparing your closed captioning files...`)));
+        try {
+          await generateCaptions(captionsCSVDirectory, captionsOutputDirectory);
+          console.log(
+            bold(
+              green(
+                `Caper has finished generating your closed captioning files! Find them in "${captionsOutputDirectory}/cc.json"`,
+              ),
+            ),
+          );
+        } catch (e) {
+          console.error(bold(bgRed(white(`Error generating captions:`))), red(e));
+        }
+        break;
+      default:
+        console.error(
+          bold(bgRed(white(`Unknown audio command: "${args[1]}".`))),
+          red(`Please use "compress" or "captions".`),
+        );
+        break;
+    }
+    hr();
+    break;
+  default:
+    console.error(red(bold(`Caper - Unknown subcommand: ${args[0]}`)));
+    process.exit(1);
+}

package/client.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Ambient types for caper app projects. Add "@caperjs/core/client" to the
+ * "types" array of your tsconfig.
+ */
+declare module 'caper-runtime';
+declare const __CAPER_APP_NAME: string;
+declare const __CAPER_APP_VERSION: string;

package/config/assetpack.mjs

@@ -0,0 +1,212 @@
+import { AssetPack, Logger } from '@assetpack/core';
+import { pixiPipes } from '@assetpack/core/pixi';
+import fs from 'node:fs';
+import process from 'node:process';
+import path from 'path';
+
+// Check if user config exists (synchronously)
+function hasUserAssetpackConfig() {
+  const configPath = path.join(process.cwd(), '.assetpack.mjs');
+  try {
+    return fs.existsSync(configPath);
+  } catch {
+    return false;
+  }
+}
+
+// Async function to load user config
+async function loadUserAssetpackConfig() {
+  if (!hasUserAssetpackConfig()) {
+    return null;
+  }
+
+  try {
+    const configPath = path.join(process.cwd(), '.assetpack.mjs');
+    const userConfig = await import(configPath);
+    Logger.info('Caper assetpack plugin:: Using user assetpack config from .assetpack.mjs');
+    return userConfig.default || userConfig;
+  } catch (error) {
+    Logger.error('Caper assetpack plugin:: Error loading user assetpack config:', error);
+    return null;
+  }
+}
+
+const cwd = process.cwd();
+
+/**
+ * AssetPack pipe that reads a {weight=<value>} filename tag and converts
+ * it into the `weights` array that PixiJS's loadWebFont expects.
+ *
+ * Usage: name the font file with both tags, e.g.
+ *   SpaceGrotesk-Bold{family=SpaceGrotesk}{weight=bold}{wf}.ttf
+ *
+ * AssetPack extracts `weight` as a scalar; PixiJS needs `weights` as a
+ * string[].  This pipe bridges the two.  Runs before the webfont pipe so
+ * the metadata is in place before any transform.
+ */
+function fontWeights() {
+  return {
+    folder: false,
+    name: 'font-weights',
+    defaultOptions: null,
+    tags: { weight: 'weight' },
+    test(asset) {
+      return asset.allMetaData[this.tags.weight] !== undefined;
+    },
+    async transform(asset) {
+      const raw = asset.allMetaData[this.tags.weight];
+      asset.metaData.weights = (Array.isArray(raw) ? raw : [raw]).map(String);
+      return [asset];
+    },
+  };
+}
+
+const defaultManifestUrl = 'assets.json';
+
+const defaultPixiPipesConfig = {
+  // Retina-first: raw art is authored at 2x native game pixels. AssetPack
+  // treats the source as the largest resolution listed, so this emits @2x
+  // plus downscaled 1x and 0.5x. Apps whose art is authored at 1x override
+  // `resolutions` in their .assetpack.mjs (or tag individual assets {fix}).
+  resolutions: { high: 2, default: 1, low: 0.5 },
+  // Quality-first compression: the upstream webp default (quality 80, lossy
+  // alpha) rings on anti-aliased UI edges, and browsers load .webp over .png.
+  // alphaQuality 100 makes the alpha channel lossless (kills edge halos);
+  // quality 92 + smartSubsample tame RGB bleed; png quality 100 skips palette
+  // quantization on the fallback. effort 6 only costs prod builds — dev
+  // rebuilds override the effort knobs below.
+  compression: {
+    jpg: true,
+    png: { quality: 100 },
+    webp: { quality: 92, alphaQuality: 100, smartSubsample: true, effort: 6 },
+  },
+  texturePacker: {
+    nameStyle: 'relative',
+    removeFileExtension: true,
+    texturePacker: { nameStyle: 'relative', removeFileExtension: true },
+  },
+  audio: {},
+  webfont: {},
+  manifest: { trimExtensions: true, createShortcuts: true, output: defaultManifestUrl },
+};
+
+// Effort/CPU knobs only — quality options are untouched, so dev output pixels
+// match production; dev rebuilds just spend less time squeezing bytes.
+const devCompressionEffort = {
+  png: { effort: 1, compressionLevel: 1 },
+  webp: { effort: 0 },
+};
+
+function devCompression(compression) {
+  if (!compression) return compression;
+  const result = { ...compression };
+  for (const [format, effort] of Object.entries(devCompressionEffort)) {
+    const current = result[format];
+    if (current === false) continue;
+    result[format] = { ...(current === true ? {} : current), ...effort };
+  }
+  return result;
+}
+
+export const assetpackConfig = (manifestUrl = defaultManifestUrl, pixiPipesConfig = {}, cacheBust) => {
+  pixiPipesConfig = { ...defaultPixiPipesConfig, ...pixiPipesConfig };
+
+  if (cacheBust !== undefined) {
+    pixiPipesConfig.cacheBust = cacheBust;
+  }
+  // NODE_ENV is read at call time, not module load: under the caper CLI this
+  // module is imported before vite's resolveConfig sets NODE_ENV, whereas
+  // assetpackConfig runs after (configResolved / user .assetpack.mjs import).
+  if (pixiPipesConfig.cacheBust === undefined) {
+    pixiPipesConfig.cacheBust = process.env.NODE_ENV === 'production';
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    pixiPipesConfig.compression = devCompression(pixiPipesConfig.compression);
+  }
+  const pipes = pixiPipes({ ...pixiPipesConfig });
+
+  // Insert fontWeights before the webfont pipe so that the {weight} tag
+  // is converted to a weights[] array before webfont processes the asset.
+  const wfIdx = pipes.findIndex((p) => p.name === 'webfont');
+  pipes.splice(wfIdx >= 0 ? wfIdx : 0, 0, fontWeights());
+
+  return {
+    manifestUrl,
+    entry: './assets',
+    logLevel: 'info',
+    pipes,
+  };
+};
+
+export default assetpackConfig;
+
+export function assetpackPlugin(manifestUrl = defaultManifestUrl, pixiPipesConfig = defaultPixiPipesConfig) {
+  let mode;
+  let ap;
+  let apConfig;
+  let isBuilding = false;
+  let server;
+
+  async function getConfig() {
+    if (!apConfig) {
+      const userConfig = await loadUserAssetpackConfig();
+      apConfig = userConfig || assetpackConfig(manifestUrl, pixiPipesConfig);
+    }
+  }
+
+  return {
+    name: 'vite-plugin-assetpack',
+    async configResolved(resolvedConfig) {
+      mode = resolvedConfig.command;
+      if (!resolvedConfig.publicDir) return;
+      await getConfig();
+      if (apConfig.output) return;
+      const publicDir = resolvedConfig.publicDir.replace(cwd, '');
+      const outputPath = path.join(publicDir, 'assets');
+      apConfig.output = path.isAbsolute(publicDir)
+        ? path.join('.', outputPath).replace(/\\/g, '/')
+        : `./${outputPath}`.replace(/\\/g, '/');
+      // on windows, for some reason, the output path is ./C:/Users/.../assets
+      // so we need to remove the first two characters
+      if (apConfig.output.indexOf('./C') === 0) {
+        apConfig.output = apConfig.output.substr(2);
+      }
+    },
+    buildStart: async () => {
+      if (isBuilding) return;
+      isBuilding = true;
+      // Load config if not already loaded
+      await getConfig();
+      if (mode === 'serve') {
+        if (ap) return;
+        ap = new AssetPack(apConfig);
+        // Vite does not reload the page when files under publicDir change, so
+        // without this the browser keeps serving stale assets after a rebuild.
+        // One reload per completed rebuild batch; the initial pass is skipped
+        // (the server isn't listening yet).
+        let initial = true;
+        await ap.watch(() => {
+          if (initial) {
+            initial = false;
+            return;
+          }
+          const hot = server?.environments?.client?.hot ?? server?.ws;
+          hot?.send({ type: 'full-reload', path: '*' });
+          Logger.info('Caper assetpack plugin:: assets rebuilt, reloading page');
+        });
+      } else {
+        await new AssetPack(apConfig).run();
+      }
+      isBuilding = false;
+    },
+    configureServer(devServer) {
+      server = devServer;
+    },
+    buildEnd: async () => {
+      if (ap) {
+        await ap.stop();
+        ap = undefined;
+      }
+    },
+  };
+}

package/config/tsconfig.base.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "rootDir": "${configDir}",
+    "baseUrl": "${configDir}",
+    "paths": {
+      "@/*": ["${configDir}/src/*"]
+    },
+    "types": ["vite/client", "vite-plugin-pwa/client", "@caperjs/core/client"],
+    "outDir": "${configDir}/dist",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "strictPropertyInitialization": false,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["${configDir}/caper.config.ts", "${configDir}/src", "${configDir}/src/**/*.d.ts"],
+  "exclude": ["${configDir}/.cache", "${configDir}/node_modules", "${configDir}/dist"]
+}