Fumadocs CLI

Copy"bin": {
  "cli": "./dist/index.js"
},

Copyconst program = new Command().option('--config <string>');
 
program
  .name('fumadocs')
  .description('CLI to setup Fumadocs, init a config')
  .version(packageJson.version)
  .action(async () => {
    if (await initConfig()) {
      console.log(picocolors.green('Initialized a `./cli.json` config file.'));
    } else {
      console.log(picocolors.redBright('A config file already exists.'));
    }
  });

Copyconst dirShortcuts: Record<string, string> = {
  ':preview': 'https://preview.fumadocs.dev/registry',
  ':dev': 'http://localhost:3000/registry',
};

Copyfunction createClientFromDir(dir = 'https://fumadocs.dev/registry') {
  if (dir in dirShortcuts) dir = dirShortcuts[dir];
 
  return dir.startsWith('http://') || dir.startsWith('https://')
    ? new HttpRegistryConnector(dir)
    : new LocalRegistryConnector(dir);
}

Copyconst subRegistry = UIRegistries[config.uiLibrary];
 
if (input.length === 0) {
  const spin = spinner();
  spin.start('fetching registry');
 
  async function scan(subRegistry?: string, prefix?: string): Promise<AddOption[]> {
    const info = await connector.fetchRegistryInfo(subRegistry);
 
    return info.indexes.map((item) => ({
      label: `${prefix ? `${picocolors.bold(prefix)} - ` : ''}${item.title ?? item.name}`,
      value: { name: item.name, subRegistry },
      hint: item.description,
    }));
  }
 
  spin.stop(picocolors.bold(picocolors.greenBright('registry fetched')));
  const value = await autocompleteMultiselect({
    message: 'Select components to install',
    options: [
      ...(await scan(undefined, 'common')),
      ...(await scan('fumadocs/sanity', 'sanity')),
      ...(await scan(subRegistry, 'ui')),
    ].sort((a, b) => a.label.localeCompare(b.label)),
  });

Copy  if (isCancel(value)) {
    outro('Ended');
    return;
  }
 
  targets = value;
} else {
  targets = await Promise.all(
    input.map(async (item) =>
      (await connector.hasComponent(item)) ? { name: item } : { subRegistry, name: item },
    ),
  );
}

Copyasync installInteractive(name: string, subRegistry?: string): Promise<void> {
  if (this.interactive) {
    throw new Error(`cannot install while installing another component`);
  }
 

Copyexport class FumadocsComponentInstaller extends ComponentInstaller {
  private interactive: {
    name: string;
    spin: SpinnerResult;
  } | null = null;
 
  constructor(connector: RegistryConnector, config: LoadedConfig, cwd?: string) {
    super(connector, {
      cwd,
      framework: config.framework,
      outDir: {
        base: config.baseDir,
        components: config.aliases.componentsDir,
        css: config.aliases.cssDir,
        layout: config.aliases.layoutDir,
        lib: config.aliases.libDir,
        ui: config.aliases.uiDir,
      },
      io: {
        onWarn: (message) => {
          this.interactive?.spin.message(message);
        },
        confirmFileOverride: async (options) => {
          if (!this.interactive) return true;
          const { name, spin } = this.interactive;
          spin.clear();
          const value = await confirm({
            message: `Do you want to override ${options.path}?`,
            initialValue: false,
          });
          if (isCancel(value)) {
            outro('Installation terminated');
            process.exit(0);
          }
          spin.start(picocolors.bold(picocolors.cyanBright(`Installing ${name}`)));
          return value;
        },
        onFileDownloaded: (options) => {
          this.interactive?.spin.message(options.path);
        },
      },
      plugins: [pluginPreserveLayouts()],
    });
  }

CopyconfirmFileOverride: async (options) => {
  if (!this.interactive) return true;
  const { name, spin } = this.interactive;
  spin.clear();
  const value = await confirm({
    message: `Do you want to override ${options.path}?`,
    initialValue: false,
  });
  if (isCancel(value)) {
    outro('Installation terminated');
    process.exit(0);
  }
  spin.start(picocolors.bold(picocolors.cyanBright(`Installing ${name}`)));
  return value;
},

Copytry {
  this.interactive = { name, spin };
  const deps = await super.install(name, subRegistry).then((res) => res.deps());
  spin.stop(picocolors.bold(picocolors.greenBright(`${name} installed`)));
 
  if (deps.hasRequired()) {
    log.message();
    box([...deps.dependencies, ...deps.devDependencies].join('\n'), 'New Dependencies');
    const pm = (await detectPackageManager())?.name ?? 'npm';

Copyconst pm = (await detectPackageManager())?.name ?? 'npm';
const value = await confirm({
  message: `Do you want to install with ${pm}?`,
});
 
if (isCancel(value)) {
  outro('Installation terminated');
  process.exit(0);
}
 

Copy  if (value) {
    const spin = spinner({
      errorMessage: 'Failed to install dependencies',
    });
    spin.start('Installing dependencies');
    await deps.installRequired(pm);
    spin.stop('Dependencies installed');
  } else {
    await deps.writeRequired();
  }
}

Copyreturn select<TargetInfo>({
  message: 'Which part do you want to customize?',
  options: [
    {
      label: 'All',
      hint: 'install the entire layout',
      value: selected,
    },
    {
      label: 'Replace & rewrite from minimal styles',
      hint: 'for those who want to build their own UI from ground up',
      value: {
        id: 'docs-min',
        targets: [{ name: 'layouts/docs-min' }],
        print() {
          printLayout(
            ['fumadocs-ui/layouts/docs', '@/layouts/docs'],
            ['fumadocs-ui/layouts/docs/page', '@/layouts/docs/page'],
          );
        },
      },
    },
    ...info.unlistedIndexes.flatMap((index) => {
      const prefix = `slots/${selected.id}`;
      if (!index.name.startsWith(prefix)) return [];
      let name = index.name.slice(prefix.length + 1);
 
      if (name.startsWith('page/')) {
        name = name.slice('page/'.length);
 
        return {
          label: `Page: ${name}`,
          hint: "only replace a part of layout's page, useful for adjusting details",
          value: {
            id: index.name,
            targets: [{ subRegistry, name: index.name }],
            print() {
              printSlot({
                at: `@/layouts/${selected.id}/page/slots/${name}`,
                layoutId: selected.id,
                name,
                isPage: true,
              });
            },
          } as TargetInfo,
        };
      }
 
      return {
        label: `Layout: ${name}`,
        hint: 'only replace a part of layout, useful for adjusting details',
        value: {
          id: index.name,
          targets: [{ subRegistry, name: index.name }],
          print() {
            printSlot({
              at: `@/layouts/${selected.id}/slots/${name}`,
              layoutId: selected.id,
              name,
              isPage: false,
            });
          },
        } as TargetInfo,
      };
    }),
  ],
});

Copyif (name.startsWith('page/')) {
  name = name.slice('page/'.length);
 
  return {
    label: `Page: ${name}`,
    hint: "only replace a part of layout's page, useful for adjusting details",
    value: {
      id: index.name,
      targets: [{ subRegistry, name: index.name }],
      print() {
        printSlot({
          at: `@/layouts/${selected.id}/page/slots/${name}`,
          layoutId: selected.id,
          name,
          isPage: true,
        });
      },
    } as TargetInfo,
  };
}
 
return {
  label: `Layout: ${name}`,
  hint: 'only replace a part of layout, useful for adjusting details',
  value: {
    id: index.name,
    targets: [{ subRegistry, name: index.name }],
    print() {
      printSlot({
        at: `@/layouts/${selected.id}/slots/${name}`,
        layoutId: selected.id,
        name,
        isPage: false,
      });
    },
  } as TargetInfo,
};

Copyexport type JsonTreeNode =
  | {
      type: 'file';
      name: string;
    }
  | {
      type: 'directory';
      name: string;
      contents: JsonTreeNode[];
    }
  | {
      type: 'report';
    }
  | {
      type: 'link';
      name: string;
    };

Copyif (item.type === 'directory') {
  if (item.contents.length === 1 && 'name' in item.contents[0]) {
    const child = item.contents[0];
 
    return toNode({
      ...child,
      name: `${item.name}/${child.name}`,
    });
  }

Copyexport function treeToMdx(input: JsonTreeNode[], noRoot = false): string {
  function toNode(item: JsonTreeNode): string {
    if (item.type === 'file' || item.type === 'link') {
      return `<File name=${JSON.stringify(item.name)} />`;
    }
 
    if (item.type === 'directory') {
      if (item.contents.length === 1 && 'name' in item.contents[0]) {
        const child = item.contents[0];
 
        return toNode({
          ...child,
          name: `${item.name}/${child.name}`,
        });
      }
 
      return `<Folder name=${JSON.stringify(item.name)}>
${item.contents.map(toNode).filter(Boolean).join('\n')}
</Folder>`;
    }
 
    return '';
  }
 
  let children = input.filter((v) => scanned.includes(v.type));
 
  if (noRoot && children.length === 1 && input[0].type === 'directory') {
    children = input[0].contents;
  }
 
  return `<Files>
${children.map(toNode).filter(Boolean).join('\n')}
</Files>`;
}

Copyexport function treeToJavaScript(
  input: JsonTreeNode[],
  noRoot?: boolean,
  importName = 'fumadocs-ui/components/files',
): string {
  return `import { File, Files, Folder } from ${JSON.stringify(importName)}
 
export default (${treeToMdx(input, noRoot)})`;
}

Copyconst jsExtensions = ['.js', '.tsx', '.jsx'];
const noRoot = !root;
let nodes: JsonTreeNode[];
 
try {
  nodes = JSON.parse(str ?? '') as JsonTreeNode[];
} catch {
  nodes = await runTree(str ?? './');
}
 
const out =
  js || (output && jsExtensions.includes(path.extname(output)))
    ? treeToJavaScript(nodes, noRoot, importName)
    : treeToMdx(nodes, noRoot);

Copyexport const registry: Registry = {
  name: 'fumadocs/radix-ui',
  dir,
  components: [
    ...commonComponents,
    ...(await findSlotComponents(dir)),
    // ... layout and component definitions
  ],
  dependencies: {
    'fumadocs-core': null,
    'fumadocs-ui': null,
    react: null,
  },
};

Copyexport async function findSlotComponents(dir: string): Promise<Component[]> {
  const slots: Component[] = [];
 
  for (const file of await glob('layouts/**/slots/*', { cwd: dir })) {
    const relativePath = path.relative('layouts', file);
    const name = relativePath
      .split(path.sep)
      .filter((v) => v !== 'slots')
      .join('/')
      .slice(0, -path.extname(relativePath).length);
 
    slots.push({
      name: `slots/${name}`,
      unlisted: true,
      files: [
        {
          path: file,
          type: 'layout',
          target: path.join('<dir>', relativePath),
        },
      ],
    });
  }
 
  return slots;
}

Copy// in shadcn cli, the order of files matters when writing import paths on consumer's codebase
export const registry: Registry = {
  name: 'fumadocs/radix-ui',
  dir,
  components: [
    ...commonComponents,
    ...(await findSlotComponents(dir)),

Copy  meta: {
    preserveAs: 'layouts/shared',
  },
},