saagie-ui/scripts/dts.js

Saagie UI from Saagie Design System

/* eslint-disable import/no-extraneous-dependencies */
const dtsgen = require('react-to-typescript-definitions');
const { writeFileSync, mkdirSync } = require('fs');
const path = require('path');
const glob = require('glob');

function getModuleName(url) {
  const fileName = path.basename(url).replace('.js', '');
  const firstChar = fileName.charAt(0);
  const directory = path.dirname(url);

  // If the filename is in lowercase and is not a helper, we need to capitalize it
  if (firstChar === fileName.charAt(0).toLowerCase() && directory !== 'src/js/_helpers' && !directory.includes('react')) {
    return firstChar.toUpperCase() + fileName.slice(1);
  } else {
    return fileName;
  }
}

function newModuleEntry(moduleName, files) {
  return [
    `declare module "${moduleName}" {`,
    ...files.map((urlPath) => `    export {${getModuleName(
      urlPath
    )}} from "${urlPath.replace('.js', '')}"`),
    '}',
  ].join('\n');
}

function globSync(pattern) {
  return glob.sync(pattern, { ignore: ['**/*.test.js', '**/index.js']});
}

// Used to enhance the props interface inferred by adding generic HTML props
const EXTEND_PROPS_STRING = `Props {
    [key: string]: any;`;

const root = globSync('src/js/**/*.js');
const mainFiles = globSync('src/react/core/**/*.js');
const formsyFiles = globSync('src/react/formsy/**/*.js');
const projectsFiles = globSync('src/react/projects/**/*.js');

const definitions = [root, mainFiles, formsyFiles, projectsFiles].flat().map((urlPath) => {
  const definition = dtsgen.generateFromFile(
    urlPath.replace('.js', ''),
    urlPath
  );

  return definition.replace('Props {', EXTEND_PROPS_STRING);
});

 
mkdirSync('./react', { recursive: true });
writeFileSync(
  './index.d.ts',
   `
   ${newModuleEntry('saagie-ui', root)}\n
   ${newModuleEntry('saagie-ui/react', mainFiles)}\n
   ${newModuleEntry('saagie-ui/react/formsy', formsyFiles)}\n
   ${newModuleEntry('saagie-ui/react/projects', projectsFiles)}\n
   ${definitions.join('')}
   `
 );

writeFileSync(
  './react/index.d.ts',
  `
  ${newModuleEntry('saagie-ui', root)}\n
  ${newModuleEntry('saagie-ui/react', mainFiles)}\n
  ${newModuleEntry('saagie-ui/react/formsy', formsyFiles)}\n
  ${newModuleEntry('saagie-ui/react/projects', projectsFiles)}\n
  ${definitions.join('')}
  `
);