create-babylonjs 9.0.0 → 9.2.2

package/dist/generators/bundlerConfig.d.ts

@@ -0,0 +1,7 @@
+import type { ProjectOptions } from "../index";
+interface BundlerConfigResult {
+    filename: string;
+    content: string;
+}
+export declare function generateBundlerConfig(options: ProjectOptions): BundlerConfigResult | null;
+export {};

package/dist/generators/bundlerConfig.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateBundlerConfig = generateBundlerConfig;
+function viteConfig(options) {
+    const filename = options.language === "ts" ? "vite.config.ts" : "vite.config.js";
+    const content = `import { defineConfig } from "vite";
+
+export default defineConfig({
+    // https://vitejs.dev/config/
+});
+`;
+    return { filename, content };
+}
+function webpackConfig(options) {
+    const { language } = options;
+    const ext = language === "ts" ? "ts" : "js";
+    const filename = "webpack.config.js";
+    const tsRule = language === "ts"
+        ? `
+            {
+                test: /\\.tsx?$/,
+                use: "ts-loader",
+                exclude: /node_modules/,
+            },`
+        : "";
+    const resolve = language === "ts"
+        ? `
+    resolve: {
+        extensions: [".tsx", ".ts", ".js"],
+    },`
+        : "";
+    const content = `const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    entry: "./src/index.${ext}",
+    output: {
+        filename: "bundle.js",
+        path: path.resolve(__dirname, "dist"),
+        clean: true,
+    },${resolve}
+    module: {
+        rules: [${tsRule}
+        ],
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: "./index.html",
+        }),
+    ],
+    devServer: {
+        static: "./dist",
+        hot: true,
+        open: true,
+    },
+};
+`;
+    return { filename, content };
+}
+function rollupConfig(options) {
+    const { language } = options;
+    const ext = language === "ts" ? "ts" : "js";
+    const filename = "rollup.config.mjs";
+    const tsImport = language === "ts" ? `import typescript from "@rollup/plugin-typescript";\n` : "";
+    const tsPlugin = language === "ts" ? `        typescript(),\n` : "";
+    const content = `import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+${tsImport}import serve from "rollup-plugin-serve";
+import livereload from "rollup-plugin-livereload";
+
+const production = process.env.BUILD === "production";
+
+export default {
+    input: "src/index.${ext}",
+    output: {
+        file: "dist/bundle.js",
+        format: "iife",
+        sourcemap: !production,
+    },
+    plugins: [
+        resolve({ browser: true }),
+        commonjs(),
+${tsPlugin}        !production && serve({
+            open: true,
+            contentBase: ["", "dist"],
+            port: 3000,
+        }),
+        !production && livereload("dist"),
+    ],
+};
+`;
+    return { filename, content };
+}
+function generateBundlerConfig(options) {
+    switch (options.bundler) {
+        case "vite":
+            return viteConfig(options);
+        case "webpack":
+            return webpackConfig(options);
+        case "rollup":
+            return rollupConfig(options);
+        case "none":
+            return null;
+    }
+}

package/dist/generators/indexHtml.d.ts

@@ -0,0 +1,2 @@
+import type { ProjectOptions } from "../index";
+export declare function generateIndexHtml(options: ProjectOptions): string;

package/dist/generators/indexHtml.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateIndexHtml = generateIndexHtml;
+function generateIndexHtml(options) {
+    const { bundler, moduleFormat } = options;
+    const styles = `
+        html, body {
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        #renderCanvas {
+            width: 100%;
+            height: 100%;
+            touch-action: none;
+        }`;
+    // CDN-only (no bundler, UMD)
+    if (bundler === "none") {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Babylon.js App</title>
+    <style>${styles}
+    </style>
+    <script src="https://cdn.babylonjs.com/babylon.js"><\/script>
+    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"><\/script>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <script>
+        const canvas = document.getElementById("renderCanvas");
+        const engine = new BABYLON.Engine(canvas, true);
+
+        const createScene = async function () {
+            const scene = new BABYLON.Scene(engine);
+
+            // Load a glTF model
+            await BABYLON.AppendSceneAsync("https://assets.babylonjs.com/meshes/boombox.glb", scene);
+
+            // Create a default camera that frames the loaded model
+            scene.createDefaultCamera(true, true, true);
+            // Rotate the camera to face the front of the model
+            scene.activeCamera.alpha += Math.PI;
+
+            // Create a default environment (skybox + ground + environment lighting)
+            scene.createDefaultEnvironment({
+                createGround: true,
+                createSkybox: true,
+            });
+
+            return scene;
+        };
+
+        createScene().then(function (scene) {
+            engine.runRenderLoop(function () {
+                scene.render();
+            });
+        });
+
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
+    <\/script>
+</body>
+</html>
+`;
+    }
+    // Vite serves index.html from root — entry via <script type="module">
+    if (bundler === "vite") {
+        const ext = moduleFormat === "umd" && options.language === "js" ? "js" : options.language === "ts" ? "ts" : "js";
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Babylon.js App</title>
+    <style>${styles}
+    </style>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <script type="module" src="/src/index.${ext}"><\/script>
+</body>
+</html>
+`;
+    }
+    // Webpack uses HtmlWebpackPlugin — no script tag needed
+    if (bundler === "webpack") {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Babylon.js App</title>
+    <style>${styles}
+    </style>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+</body>
+</html>
+`;
+    }
+    // Rollup — bundle injected into dist/, reference it
+    if (bundler === "rollup") {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Babylon.js App</title>
+    <style>${styles}
+    </style>
+</head>
+<body>
+    <canvas id="renderCanvas"></canvas>
+    <script src="dist/bundle.js"><\/script>
+</body>
+</html>
+`;
+    }
+    return "";
+}

package/dist/generators/packageJson.d.ts

@@ -0,0 +1,2 @@
+import type { ProjectOptions } from "../index";
+export declare function generatePackageJson(options: ProjectOptions): string;

package/dist/generators/packageJson.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePackageJson = generatePackageJson;
+function generatePackageJson(options) {
+    const { projectName, moduleFormat, language, bundler } = options;
+    const deps = {};
+    const devDeps = {};
+    const scripts = {};
+    // Core Babylon.js dependency + loaders
+    if (moduleFormat === "es6") {
+        deps["@babylonjs/core"] = "^9.0.0";
+        deps["@babylonjs/loaders"] = "^9.0.0";
+    }
+    else {
+        deps["babylonjs"] = "^9.0.0";
+        deps["babylonjs-loaders"] = "^9.0.0";
+    }
+    // TypeScript
+    if (language === "ts") {
+        devDeps["typescript"] = "^5.4.0";
+    }
+    // Bundler-specific deps and scripts
+    switch (bundler) {
+        case "vite":
+            devDeps["vite"] = "^6.0.0";
+            if (language === "ts") {
+                scripts["dev"] = "vite";
+                scripts["build"] = "tsc && vite build";
+                scripts["preview"] = "vite preview";
+            }
+            else {
+                scripts["dev"] = "vite";
+                scripts["build"] = "vite build";
+                scripts["preview"] = "vite preview";
+            }
+            break;
+        case "webpack":
+            devDeps["webpack"] = "^5.90.0";
+            devDeps["webpack-cli"] = "^6.0.0";
+            devDeps["webpack-dev-server"] = "^5.0.0";
+            devDeps["html-webpack-plugin"] = "^5.6.0";
+            if (language === "ts") {
+                devDeps["ts-loader"] = "^9.5.0";
+            }
+            scripts["dev"] = "webpack serve --mode development";
+            scripts["build"] = "webpack --mode production";
+            break;
+        case "rollup":
+            devDeps["rollup"] = "^4.10.0";
+            devDeps["@rollup/plugin-node-resolve"] = "^16.0.0";
+            devDeps["@rollup/plugin-commonjs"] = "^28.0.0";
+            devDeps["rollup-plugin-serve"] = "^3.0.0";
+            devDeps["rollup-plugin-livereload"] = "^2.0.0";
+            if (language === "ts") {
+                devDeps["@rollup/plugin-typescript"] = "^12.0.0";
+                devDeps["tslib"] = "^2.6.0";
+            }
+            scripts["dev"] = "rollup -c -w";
+            scripts["build"] = "rollup -c --environment BUILD:production";
+            break;
+    }
+    const pkg = {
+        name: projectName,
+        version: "1.0.0",
+        private: true,
+        type: bundler === "vite" ? "module" : undefined,
+        scripts,
+        dependencies: deps,
+        devDependencies: devDeps,
+    };
+    // Remove undefined fields
+    Object.keys(pkg).forEach((key) => {
+        if (pkg[key] === undefined) {
+            delete pkg[key];
+        }
+    });
+    return JSON.stringify(pkg, null, 2) + "\n";
+}

package/dist/generators/sceneCode.d.ts

@@ -0,0 +1,2 @@
+import type { ProjectOptions } from "../index";
+export declare function generateSceneCode(options: ProjectOptions): string;

package/dist/generators/sceneCode.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSceneCode = generateSceneCode;
+const GLTF_MODEL_URL = "https://assets.babylonjs.com/meshes/boombox.glb";
+// ES6 scene code — tree-shakeable imports
+function es6Scene(language) {
+    const canvasCast = language === "ts" ? " as HTMLCanvasElement" : "";
+    const arcCamImport = language === "ts" ? '\nimport { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";' : "";
+    const alphaCast = language === "ts" ? "(scene.activeCamera as ArcRotateCamera)" : "scene.activeCamera";
+    return `import { Engine } from "@babylonjs/core/Engines/engine";
+import { Scene } from "@babylonjs/core/scene";
+import { AppendSceneAsync } from "@babylonjs/core/Loading/sceneLoader";${arcCamImport}
+
+// Side-effect imports: these register plugins and augment prototypes at load time
+import "@babylonjs/core/Loading/loadingScreen";
+import "@babylonjs/core/Helpers/sceneHelpers";
+import "@babylonjs/core/Materials/standardMaterial";
+import "@babylonjs/core/Materials/PBR/pbrMaterial";
+import "@babylonjs/core/Materials/Textures/Loaders/envTextureLoader";
+import "@babylonjs/loaders/glTF";
+
+const canvas = document.getElementById("renderCanvas")${canvasCast};
+const engine = new Engine(canvas, true);
+
+const createScene = async () => {
+    const scene = new Scene(engine);
+
+    // Load a glTF model
+    await AppendSceneAsync("${GLTF_MODEL_URL}", scene);
+
+    // Create a default camera that frames the loaded model
+    scene.createDefaultCamera(true, true, true);
+    // Rotate the camera to face the front of the model
+    ${alphaCast}.alpha += Math.PI;
+
+    // Create a default environment (skybox + ground + environment lighting)
+    scene.createDefaultEnvironment({
+        createGround: true,
+        createSkybox: true,
+    });
+
+    return scene;
+};
+
+createScene().then((scene) => {
+    engine.runRenderLoop(() => {
+        scene.render();
+    });
+});
+
+window.addEventListener("resize", () => {
+    engine.resize();
+});
+`;
+}
+// UMD scene code — global BABYLON namespace
+function umdScene(language) {
+    if (language === "ts") {
+        return `import * as BABYLON from "babylonjs";
+import "babylonjs-loaders";
+
+const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
+const engine = new BABYLON.Engine(canvas, true);
+
+const createScene = async (): Promise<BABYLON.Scene> => {
+    const scene = new BABYLON.Scene(engine);
+
+    // Load a glTF model
+    await BABYLON.AppendSceneAsync("${GLTF_MODEL_URL}", scene);
+
+    // Create a default camera that frames the loaded model
+    scene.createDefaultCamera(true, true, true);
+    // Rotate the camera to face the front of the model
+    (scene.activeCamera as BABYLON.ArcRotateCamera).alpha += Math.PI;
+
+    // Create a default environment (skybox + ground + environment lighting)
+    scene.createDefaultEnvironment({
+        createGround: true,
+        createSkybox: true,
+    });
+
+    return scene;
+};
+
+createScene().then((scene) => {
+    engine.runRenderLoop(() => {
+        scene.render();
+    });
+});
+
+window.addEventListener("resize", () => {
+    engine.resize();
+});
+`;
+    }
+    // UMD + JS — imports needed because this file is always bundled
+    // (CDN-only projects inline the scene code directly in index.html)
+    return `import * as BABYLON from "babylonjs";
+import "babylonjs-loaders";
+
+const canvas = document.getElementById("renderCanvas");
+const engine = new BABYLON.Engine(canvas, true);
+
+const createScene = async () => {
+    const scene = new BABYLON.Scene(engine);
+
+    // Load a glTF model
+    await BABYLON.AppendSceneAsync("${GLTF_MODEL_URL}", scene);
+
+    // Create a default camera that frames the loaded model
+    scene.createDefaultCamera(true, true, true);
+    // Rotate the camera to face the front of the model
+    scene.activeCamera.alpha += Math.PI;
+
+    // Create a default environment (skybox + ground + environment lighting)
+    scene.createDefaultEnvironment({
+        createGround: true,
+        createSkybox: true,
+    });
+
+    return scene;
+};
+
+createScene().then((scene) => {
+    engine.runRenderLoop(() => {
+        scene.render();
+    });
+});
+
+window.addEventListener("resize", () => {
+    engine.resize();
+});
+`;
+}
+function generateSceneCode(options) {
+    const { moduleFormat, language } = options;
+    if (moduleFormat === "es6") {
+        return es6Scene(language);
+    }
+    return umdScene(language);
+}

package/dist/generators/tsConfig.d.ts

@@ -0,0 +1,2 @@
+import type { ProjectOptions } from "../index";
+export declare function generateTsConfig(options: ProjectOptions): string;

package/dist/generators/tsConfig.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTsConfig = generateTsConfig;
+function generateTsConfig(options) {
+    const { bundler, moduleFormat } = options;
+    const base = {
+        compilerOptions: {
+            target: "ES2020",
+            module: bundler === "vite" ? "ESNext" : "ES2020",
+            moduleResolution: bundler === "vite" ? "bundler" : "node",
+            strict: true,
+            esModuleInterop: true,
+            skipLibCheck: true,
+            forceConsistentCasingInFileNames: true,
+            outDir: "./dist",
+            sourceMap: true,
+        },
+        include: ["src"],
+    };
+    // UMD packages ship their own typings via the `babylonjs` package
+    if (moduleFormat === "umd") {
+        base.compilerOptions.types = ["babylonjs"];
+    }
+    return JSON.stringify(base, null, 2) + "\n";
+}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+export type ModuleFormat = "es6" | "umd";
+export type Language = "ts" | "js";
+export type Bundler = "vite" | "webpack" | "rollup" | "none";
+export interface ProjectOptions {
+    projectName: string;
+    moduleFormat: ModuleFormat;
+    language: Language;
+    bundler: Bundler;
+}

package/dist/index.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const prompts_1 = __importDefault(require("prompts"));
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const packageJson_1 = require("./generators/packageJson");
+const indexHtml_1 = require("./generators/indexHtml");
+const sceneCode_1 = require("./generators/sceneCode");
+const bundlerConfig_1 = require("./generators/bundlerConfig");
+const tsConfig_1 = require("./generators/tsConfig");
+async function main() {
+    console.log("\n🏗️  Create Babylon.js Project\n");
+    const response = await (0, prompts_1.default)([
+        {
+            type: "text",
+            name: "projectName",
+            message: "Project name:",
+            initial: "my-babylonjs-app",
+            validate: (value) => (value.trim().length > 0 ? true : "Project name is required"),
+        },
+        {
+            type: "select",
+            name: "moduleFormat",
+            message: "Module format:",
+            choices: [
+                { title: "ES6 (@babylonjs/core) — tree-shakeable ES modules", value: "es6" },
+                { title: "UMD (babylonjs) — global BABYLON namespace", value: "umd" },
+            ],
+        },
+        {
+            type: "select",
+            name: "language",
+            message: "Language:",
+            choices: [
+                { title: "TypeScript", value: "ts" },
+                { title: "JavaScript", value: "js" },
+            ],
+        },
+        {
+            type: "select",
+            name: "bundler",
+            message: "Bundler:",
+            choices: (_, values) => {
+                const base = [
+                    { title: "Vite", value: "vite" },
+                    { title: "Webpack", value: "webpack" },
+                    { title: "Rollup", value: "rollup" },
+                ];
+                if (values.moduleFormat === "umd") {
+                    base.push({ title: "None (CDN script tags only)", value: "none" });
+                }
+                return base;
+            },
+        },
+    ], {
+        onCancel: () => {
+            console.log("\nProject creation cancelled.");
+            process.exit(0);
+        },
+    });
+    const options = {
+        projectName: response.projectName.trim(),
+        moduleFormat: response.moduleFormat,
+        language: response.language,
+        bundler: response.bundler,
+    };
+    const targetDir = path_1.default.resolve(process.cwd(), options.projectName);
+    if (fs_1.default.existsSync(targetDir)) {
+        const { overwrite } = await (0, prompts_1.default)({
+            type: "confirm",
+            name: "overwrite",
+            message: `Directory "${options.projectName}" already exists. Overwrite?`,
+            initial: false,
+        });
+        if (!overwrite) {
+            console.log("Cancelled.");
+            process.exit(0);
+        }
+        fs_1.default.rmSync(targetDir, { recursive: true, force: true });
+    }
+    scaffoldProject(targetDir, options);
+    console.log(`\n✅ Project created in ./${options.projectName}\n`);
+    console.log("Next steps:\n");
+    console.log(`  cd ${options.projectName}`);
+    if (options.bundler !== "none") {
+        console.log("  npm install");
+        console.log("  npm run dev\n");
+    }
+    else {
+        console.log("  Open index.html in your browser\n");
+    }
+}
+function scaffoldProject(targetDir, options) {
+    fs_1.default.mkdirSync(targetDir, { recursive: true });
+    if (options.bundler === "none") {
+        // CDN-only: just an HTML file
+        writeFile(targetDir, "index.html", (0, indexHtml_1.generateIndexHtml)(options));
+        return;
+    }
+    // All bundler-based projects get these
+    writeFile(targetDir, "package.json", (0, packageJson_1.generatePackageJson)(options));
+    writeFile(targetDir, "index.html", (0, indexHtml_1.generateIndexHtml)(options));
+    const ext = options.language === "ts" ? "ts" : "js";
+    fs_1.default.mkdirSync(path_1.default.join(targetDir, "src"), { recursive: true });
+    writeFile(targetDir, `src/index.${ext}`, (0, sceneCode_1.generateSceneCode)(options));
+    if (options.language === "ts") {
+        writeFile(targetDir, "tsconfig.json", (0, tsConfig_1.generateTsConfig)(options));
+    }
+    const bundlerConfig = (0, bundlerConfig_1.generateBundlerConfig)(options);
+    if (bundlerConfig) {
+        writeFile(targetDir, bundlerConfig.filename, bundlerConfig.content);
+    }
+}
+function writeFile(dir, filePath, content) {
+    const fullPath = path_1.default.join(dir, filePath);
+    fs_1.default.mkdirSync(path_1.default.dirname(fullPath), { recursive: true });
+    fs_1.default.writeFileSync(fullPath, content, "utf-8");
+}
+main().catch((err) => {
+    console.error("Error:", err);
+    process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "create-babylonjs",
-    "version": "9.0.0",
+    "version": "9.2.2",
     "description": "Scaffold a new Babylon.js project with your choice of module format, language, and bundler.",
     "bin": {
         "create-babylonjs": "./dist/index.js"