Function ExecutableProject

site/ui/ExecutableProject.tsx:216–286

()

  );

export const ExecutableProject: NoPropComponent = (): any => {
  const {name: title, summary: description = '', executables} = usePageNode();
  const {devDependencies, version} = usePackageData();
  if (executables == null) {
    return null;
  }
  const cleanDescription = description.replaceAll(/\s+/g, ' ').trim();
  const {html = '', less = '', tsx = ''} = executables;
  const files = executables.files ?? {};

  const imports = getImportMap(html);
  const dependencies = getDependencies(imports, version, devDependencies);
  const svelte = Object.keys(files).some((path) => path.endsWith('.svelte'));
  const react =
    imports.react != null ||
    imports['react-dom/client'] != null ||
    imports['react/jsx-runtime'] != null;
  const solid = imports['solid-js'] != null || imports['solid-js/web'] != null;
  const framework: Framework = svelte
    ? 'svelte'
    : react
      ? 'react'
      : solid
        ? 'solid'
        : 'none';
  const entryFileName =
    getEntryFileName(files) ??
    (react || solid ? 'src/main.jsx' : 'src/main.js');
  const styleFileName = less.trim() == '' ? undefined : 'src/index.less';
  const viteConfig = getViteConfig(framework, devDependencies);
  const project = {
    title,
    description: cleanDescription,
    template: 'node',
    files: {
      '.npmrc': 'legacy-peer-deps=true\n',
      ...files,
      ...(html == '' && files['index.html'] != null
        ? {}
        : {'index.html': getHtml(title, html, entryFileName)}),
      ...(styleFileName == null ? {} : {[styleFileName]: getLess(less)}),
      ...(tsx == ''
        ? {}
        : {
            [entryFileName]: getSource(
              (styleFileName == null ? '' : `import './index.less';\n\n`) + tsx,
            ),
          }),
      'package.json': getPackageJson(
        title,
        dependencies,
        framework,
        devDependencies,
        styleFileName != null,
      ),
      ...(viteConfig == null
        ? {}
        : {