createSplApp.js

import fs, { readFileSync } from 'node:fs'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import spawn from 'cross-spawn'
import minimist from 'minimist'
import prompts from 'prompts'
import {
    bold,
    cyan,
    green,
    magenta,
    red,
    reset,
    yellow,
} from 'kolorist'

const argv = minimist(process.argv.slice(2), {
    default: { help: false },
    alias: { h: "help", t: "template", help: "h", v: "version", version: "v" },
    string: ["_"]
})
const cwd = process.cwd()


// prettier-ignore
const helpMessage = `\
Usage: create-spl [OPTION]... [DIRECTORY]

Create a new SPL app project in JavaScript
With no arguments, start the CLI in interactive mode.

Options:
  -t, --template NAME        use a specific template
  -h, --help                 display this help message

Available templates:
${yellow('basic-web')}
${green('basic-web-with-mapviewer')}
${cyan('basic-web-with-user-management')}`

const FRAMEWORKS = [
    {
        name: 'spljsengine',
        display: 'spl-js-engine',
        color: yellow,
        variants: [
            {
                name: 'basic-web',
                display: 'basic-web ↗',
                color: yellow,
            },
            {
                name: 'basic-web-user-management',
                display: 'basic-web-with-user-management ↗',
                color: cyan,
            },
            {
                name: 'basic-web-mapviewer',
                display: 'basic-web-with-mapviewer ↗',
                color: green,
            },
        ],
    },
    {
        name: 'others',
        display: 'Others',
        color: reset,
        variants: [
            {
                name: 'create-other-spl',
                display: 'create-other-extra ↗',
                color: reset,
                customCommand: '',
            },
            {
                name: 'create-other-spl-more',
                display: 'create-other-spl-more ↗',
                color: reset,
                customCommand: '',
            },
        ],
    },
];


const TEMPLATES = FRAMEWORKS.map(
    f => (f.variants && f.variants.map(v => v.name)) || [f.name]
).reduce((a, b) => a.concat(b), [])

const renameFiles = {
    _gitignore: ".gitignore"
}

const defaultTargetDir = "spl-project"

async function init() {
    const argTargetDir = formatTargetDir(argv._[0])
    const argTemplate = argv.template || argv.t

    const help = argv.help
    if (help) {
        console.log(helpMessage)
        return
    }

    let targetDir = argTargetDir || defaultTargetDir
    const getProjectName = () =>
        targetDir === "." ? path.basename(path.resolve()) : targetDir

    let result

    prompts.override({
        overwrite: argv.overwrite
    })

    try {
        result = await prompts(
            [
                {
                    type: argTargetDir ? null : "text",
                    name: "projectName",
                    message: reset("Project name:"),
                    initial: defaultTargetDir,
                    onState: state => {
                        targetDir = formatTargetDir(state.value) || defaultTargetDir
                    }
                },
                {
                    type: () =>
                        !fs.existsSync(targetDir) || isEmpty(targetDir) ? null : "select",
                    name: "overwrite",
                    message: () =>
                        (targetDir === "."
                            ? "Current directory"
                            : `Target directory "${targetDir}"`) +
                        ` is not empty. Please choose how to proceed:`,
                    initial: 0,
                    choices: [
                        {
                            title: "Remove existing files and continue",
                            value: "yes"
                        },
                        {
                            title: "Cancel operation",
                            value: "no"
                        },
                        {
                            title: "Ignore files and continue",
                            value: "ignore"
                        }
                    ]
                },
                {
                    type: (_, { overwrite }) => {
                        if (overwrite === "no") {
                            throw new Error(red("✖") + " Operation cancelled")
                        }
                        return null
                    },
                    name: "overwriteChecker"
                },
                {
                    type: () => (isValidPackageName(getProjectName()) ? null : "text"),
                    name: "packageName",
                    message: reset("Package name:"),
                    initial: () => toValidPackageName(getProjectName()),
                    validate: dir =>
                        isValidPackageName(dir) || "Invalid package.json name"
                },
                {
                    type:
                        argTemplate && TEMPLATES.includes(argTemplate) ? null : "select",
                    name: "framework",
                    message:
                        typeof argTemplate === "string" && !TEMPLATES.includes(argTemplate)
                            ? reset(
                                `"${argTemplate}" isn't a valid template. Please choose from below: `
                            )
                            : reset("Select a derivation engine:"),
                    initial: 0,
                    choices: FRAMEWORKS.map(framework => {
                        const frameworkColor = framework.color
                        return {
                            title: frameworkColor(framework.display || framework.name),
                            value: framework
                        }
                    })
                },
                {
                    type: framework =>
                        framework && framework.variants ? "select" : null,
                    name: "variant",
                    message: reset("Select a derivation engine:"),
                    choices: framework =>
                        framework.variants.map(variant => {
                            const variantColor = variant.color
                            return {
                                title: variantColor(variant.display || variant.name),
                                value: variant.name
                            }
                        })
                }
            ],
            {
                onCancel: () => {
                    throw new Error(red("✖") + " Operation cancelled")
                }
            }
        )
    } catch (cancelled) {
        console.log(cancelled.message)
        return
    }

    // user choice associated with prompts
    const { framework, overwrite, packageName, variant } = result

    const root = path.join(cwd, targetDir)

    if (overwrite === "yes") {
        emptyDir(root)
    } else if (!fs.existsSync(root)) {
        fs.mkdirSync(root, { recursive: true })
    }

    // determine template
    let template = variant || framework?.name || argTemplate

    const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent)
    const pkgManager = pkgInfo ? pkgInfo.name : "npm"
    const isYarn1 = pkgManager === "yarn" && pkgInfo?.version.startsWith("1.")
        ;

    const { customCommand } =
        FRAMEWORKS.flatMap(f => f.variants).find(v => v.name === template) ?? {}

    if (customCommand) {
        const fullCustomCommand = customCommand
            .replace(/^npm create /, () => {
                // `bun create` uses it's own set of templates,
                // the closest alternative is using `bun x` directly on the package
                if (pkgManager === "bun") {
                    return "bun x create-"
                }
                return `${pkgManager} create `
            })
            // Only Yarn 1.x doesn't support `@version` in the `create` command
            .replace("@latest", () => (isYarn1 ? "" : "@latest"))
            .replace(/^npm exec/, () => {
                // Prefer `pnpm dlx`, `yarn dlx`, or `bun x`
                if (pkgManager === "pnpm") {
                    return "pnpm dlx"
                }
                if (pkgManager === "yarn" && !isYarn1) {
                    return "yarn dlx"
                }
                if (pkgManager === "bun") {
                    return "bun x"
                }
                // Use `npm exec` in all other cases,
                // including Yarn 1.x and other custom npm clients.
                return "npm exec"
            })

        const [command, ...args] = fullCustomCommand.split(" ")
        // we replace TARGET_DIR here because targetDir may include a space
        const replacedArgs = args.map(arg =>
            arg.replace("TARGET_DIR", () => targetDir)
        )
        const { status } = spawn.sync(command, replacedArgs, {
            stdio: "inherit"
        })
        process.exit(status ?? 0)
    }

    let calcFramework = framework;

    if (argTemplate) {
        // find the framework that the template belongs to
        calcFramework = FRAMEWORKS.find(f =>
            f.variants?.map(v => v.name).includes(template)
        )
    }

    // First add the template from the engine
    const engineTemplateDir = path.resolve(
        fileURLToPath(import.meta.url),
        "..",
        `template-${framework?.name || calcFramework.name}`,
        "template-base"
    )

    // Then add the template from the framework
    const templateDir = path.resolve(
        fileURLToPath(import.meta.url),
        "..",
        `template-${framework?.name || calcFramework.name}`,
        `template-${template}`
    )

    let write = (file, content) => {
        const targetPath = path.join(root, renameFiles[file] ?? file)
        if (content) {
            fs.writeFileSync(targetPath, content)
        } else {
            copy(path.join(engineTemplateDir, file), targetPath)
        }
    }

    const engineFiles = fs.readdirSync(engineTemplateDir)
    for (const file of engineFiles.filter(f => f !== "package.json")) {
        write(file)
    }

    write = (file, content) => {
        const targetPath = path.join(root, renameFiles[file] ?? file)
        if (content) {
            fs.writeFileSync(targetPath, content)
        } else {
            copy(path.join(templateDir, file), targetPath)
        }
    }

    const templateFiles = fs.readdirSync(templateDir)
    for (const file of templateFiles) {
        write(file)
    }

    const pkg = JSON.parse(
        fs.readFileSync(path.join(templateDir, `package.json`), "utf-8")
    )

    pkg.name = packageName || getProjectName()
    pkg.bin[pkg.name] = 'cli/index.js';

    write("package.json", JSON.stringify(pkg, null, 2) + "\n")

    const uvl = fs.readFileSync(path.join(templateDir, `base.uvl`), "utf-8")
    write("base.uvl", uvl.replace("<spl-name>", pkg.name))

    const cdProjectName = path.relative(cwd, root)
    console.log(`\nDone. Now run:\n`)
    if (root !== cwd) {
        console.log(
            `  cd ${cdProjectName.includes(" ") ? `"${cdProjectName}"` : cdProjectName
            }`
        )
    }
    switch (pkgManager) {
        case "yarn":
            console.log("  yarn")
            console.log("  yarn generate <product-route>")
            break
        default:
            console.log(`  ${pkgManager} install`)
            console.log(`  npx ${pkg.name} generate <product-route>`)
            break
    }
    console.log()
}


function formatTargetDir(targetDir) {
    return targetDir?.trim().replace(/\/+$/g, "")
}

function copy(src, dest) {
    const stat = fs.statSync(src)
    if (stat.isDirectory()) {
        copyDir(src, dest)
    } else {
        fs.copyFileSync(src, dest)
    }
}

function isValidPackageName(projectName) {
    return /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(
        projectName
    )
}

function toValidPackageName(projectName) {
    return projectName
        .trim()
        .toLowerCase()
        .replace(/\s+/g, "-")
        .replace(/^[._]/, "")
        .replace(/[^a-z\d\-~]+/g, "-")
}

function copyDir(srcDir, destDir) {
    fs.mkdirSync(destDir, { recursive: true })
    for (const file of fs.readdirSync(srcDir)) {
        const srcFile = path.resolve(srcDir, file)
        const destFile = path.resolve(destDir, file)
        copy(srcFile, destFile)
    }
}

function isEmpty(path) {
    const files = fs.readdirSync(path)
    return files.length === 0 || (files.length === 1 && files[0] === ".git")
}

function emptyDir(dir) {
    if (!fs.existsSync(dir)) {
        return
    }
    for (const file of fs.readdirSync(dir)) {
        if (file === ".git") {
            continue
        }
        fs.rmSync(path.resolve(dir, file), { recursive: true, force: true })
    }
}

function pkgFromUserAgent(userAgent) {
    if (!userAgent) return undefined
    const pkgSpec = userAgent.split(" ")[0]
    const pkgSpecArr = pkgSpec.split("/")
    return {
        name: pkgSpecArr[0],
        version: pkgSpecArr[1]
    }
}

init().catch(err => {
    console.error(err)
});