create-playcanvas 0.2.6 → 0.3.0

package/templates/react-ts/src/main.tsx

@@ -1,10 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import './index.css';
+import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <StrictMode>
+        <App />
+    </StrictMode>
+);

package/templates/react-ts/src/vite-env.d.ts

@@ -1 +1,13 @@
 /// <reference types="vite/client" />
+
+declare module 'playcanvas/scripts/esm/camera-controls.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const CameraControls: typeof Script & (new () => Script);
+}
+
+declare module 'playcanvas/scripts/esm/grid.mjs' {
+    import type { Script } from 'playcanvas';
+
+    export const Grid: typeof Script & (new () => Script);
+}

package/templates/react-ts/tsconfig.json

@@ -1,7 +1,26 @@
 {
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
+        "jsx": "react-jsx",
+
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src", "vite.config.ts"]
 }

package/templates/react-ts/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+    plugins: [react()]
+});

package/templates/vanilla-ts/README.md

@@ -1,114 +1,54 @@
-# PlayCanvas + Vite Starter
+# PlayCanvas + TypeScript Starter
 
-A modern, batteries-included starter for building WebGL/PlayCanvas experiences with TypeScript.
-
-* **PlayCanvas** `^2.8.2` – high-performance WebGL engine
-* **Vite** `^7` – ultra-fast dev server & bundler with HMR
-* **TypeScript** `~5.8` – static typing out-of-the-box
-* **ESLint** `^9` – linting with recommended TypeScript rules
-
----
+A Vite-powered PlayCanvas Engine project with TypeScript, hot module replacement, ESLint and Prettier.
 
 ## Prerequisites
 
-* **Node.js ≥ 20.19.0** (or ≥ 22.12.0). Use [nvm](https://github.com/nvm-sh/nvm) to install/switch:
-
-```bash
-nvm install 22 # or 20.19+
-nvm use 22
-```
-
----
+Node.js 22.23.2 or later.
 
-## Getting Started
-
-Clone the repo and install dependencies:
+## Getting started
 
 ```bash
-git clone <your-repo-url> playcanvas-project
+npm create playcanvas@latest playcanvas-project -- --template vanilla-ts
 cd playcanvas-project
 npm install
-```
-
-Start the dev server with hot-module reload:
-
-```bash
 npm run dev
 ```
 
-Open <http://localhost:5173> to view the app. Any file changes trigger instant reloads.
-
----
+Open <http://localhost:5173>. Edit `src/App.ts` to test hot module replacement.
 
 ## Scripts
 
-| Command            | Description                          |
-|--------------------|--------------------------------------|
-| `npm run dev`      | Start Vite dev server with HMR       |
-| `npm run build`    | Type-check & bundle for production   |
-| `npm run preview`  | Preview the production build locally |
-| `npm run lint`     | Run ESLint over the codebase         |
+| Command             | Description                       |
+| ------------------- | --------------------------------- |
+| `npm run dev`       | Start the Vite development server |
+| `npm run build`     | Build for production              |
+| `npm run start`     | Preview the production build      |
+| `npm run lint`      | Run ESLint                        |
+| `npm run fmt`       | Check formatting                  |
+| `npm run typecheck` | Run TypeScript checks             |
 
----
+## Project structure
 
-## Project Structure
-
-```
+```text
 .
-├── public/               # Static assets copied as-is
+├── public/
+│   └── environment-map.png
 ├── src/
-│   ├── components/
-│   │   └── PlayCanvasCanvas.tsx  # React wrapper around a PlayCanvas application
-│   ├── App.tsx           # Entry component
-│   └── main.tsx          # Vite/React bootstrap
-├── vite.config.ts        # Vite + React plugin config
-└── ...
-```
-
-### `PlayCanvasCanvas.tsx` (concept)
-
-```tsx
-import { useEffect, useRef } from 'react'
-import * as pc from 'playcanvas'
-
-export default function PlayCanvasCanvas() {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    const canvas = canvasRef.current!
-    const app = new pc.Application(canvas, {})
-    app.start()
-    // demo scene setup here…
-
-    return () => app.destroy() // cleanup on unmount
-  }, [])
-
-  return <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
-}
+│   ├── assets/
+│   ├── App.ts
+│   ├── main.ts
+│   └── style.css
+├── eslint.config.mjs
+├── index.html
+└── tsconfig.json
 ```
 
-Use the component anywhere in your React tree to embed a PlayCanvas scene.
-
----
-
-## Linting & Formatting
-
-ESLint is pre-configured with TypeScript, React hooks, React Refresh, and global browser/node globals. Adjust `eslint.config.js` as your codebase grows.
-
----
-
-## Deployment
-
-Run `npm run build` to generate a static production bundle in `dist/`. Deploy the contents of that folder to any static hosting provider (Netlify, Vercel, GitHub Pages, Cloudflare Pages, etc.).
-
----
-
-## Further Reading
-
-* [PlayCanvas Engine Docs](https://developer.playcanvas.com/en/api/)
-* [Vite Docs](https://vitejs.dev/)
-* [TypeScript Handbook](https://www.typescriptlang.org/docs/)
+Run `npm run build` to generate a deployable static site in `dist/`.
 
----
+## Further reading
 
-Made with ❤️ and ☕ by **Your Name**. PRs and issues welcome!
+- [PlayCanvas Engine manual](https://developer.playcanvas.com/user-manual/engine/)
+- [PlayCanvas examples](https://playcanvas.github.io/)
+- [Vite documentation](https://vite.dev/)
+- [TypeScript documentation](https://www.typescriptlang.org/docs/)

package/templates/vanilla-ts/eslint.config.mjs

@@ -0,0 +1,3 @@
+import typescriptConfig from '@playcanvas/eslint-config/typescript';
+
+export default typescriptConfig;

package/templates/vanilla-ts/index.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PlayCanvas + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PlayCanvas + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
 </html>

package/templates/vanilla-ts/package.json

@@ -1,23 +1,30 @@
 {
-  "name": "playcanvas-project",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "predev": "node ./scripts/ensure-node-version.cjs",
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "playcanvas": "^2.17.2"
-  },
-  "devDependencies": {
-    "semver": "^7.7.4",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.8"
-  },
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  }
+    "name": "playcanvas-project",
+    "version": "0.0.0",
+    "private": true,
+    "description": "A PlayCanvas TypeScript project",
+    "type": "module",
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite",
+        "fmt": "prettier --check .",
+        "fmt:fix": "prettier --write .",
+        "lint": "eslint .",
+        "lint:fix": "eslint . --fix",
+        "start": "vite preview",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "playcanvas": "^2.21.3"
+    },
+    "devDependencies": {
+        "@playcanvas/eslint-config": "3.0.0-beta.8",
+        "eslint": "^9.39.5",
+        "prettier": "^3.9.6",
+        "typescript": "~6.0.3",
+        "vite": "^8.2.0"
+    },
+    "engines": {
+        "node": ">=22.23.2"
+    }
 }

package/templates/vanilla-ts/prettier.config.mjs

@@ -0,0 +1 @@
+export { default } from '@playcanvas/eslint-config/prettier';

package/templates/vanilla-ts/src/App.ts

@@ -1,35 +1,30 @@
+import type { Layer, Texture } from 'playcanvas';
 import {
-  createGraphicsDevice,
-  AppBase,
-  AppOptions,
-  RenderComponentSystem,
-  CameraComponentSystem,
-  ScriptComponentSystem,
-  TextureHandler,
-  ContainerHandler,
-  FILLMODE_FILL_WINDOW,
-  RESOLUTION_AUTO,
-  Entity,
-  Color,
-  Vec3,
-  Picker,
-  EVENT_MOUSEMOVE,
-  EVENT_MOUSEUP,
-  TouchDevice,
-  Mouse,
-  MeshInstance,
-  StandardMaterial,
-  Layer,
-  Asset,
-  AssetListLoader,
-  TEXTURETYPE_RGBP
+    createGraphicsDevice,
+    AppBase,
+    AppOptions,
+    RenderComponentSystem,
+    CameraComponentSystem,
+    ScriptComponentSystem,
+    TextureHandler,
+    ContainerHandler,
+    FILLMODE_FILL_WINDOW,
+    RESOLUTION_AUTO,
+    Entity,
+    Color,
+    Vec3,
+    Picker,
+    EVENT_MOUSEMOVE,
+    EVENT_MOUSEUP,
+    TouchDevice,
+    Mouse,
+    StandardMaterial,
+    Asset,
+    AssetListLoader,
+    TEXTURETYPE_RGBP
 } from 'playcanvas';
-
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
-
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
 import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
 
 import { throttle } from './utils';
 
@@ -38,10 +33,15 @@ const DEFAULT_COLOR = new Color(0.827, 0.827, 0.827);
 
 // Assets to load
 const assets = {
-  envAtlas: new Asset('env-atlas', 'texture', { url: '/environment-map.png' }, {
-    type: TEXTURETYPE_RGBP,
-    mipmaps: false
-  })
+    envAtlas: new Asset(
+        'env-atlas',
+        'texture',
+        { url: '/environment-map.png' },
+        {
+            type: TEXTURETYPE_RGBP,
+            mipmaps: false
+        }
+    )
 };
 
 /**
@@ -49,134 +49,132 @@ const assets = {
  * @param canvas - The canvas element
  * @param onClick - The function to call when the user clicks on the sphere
  */
-async function setupApp(canvas: HTMLCanvasElement, onClick: () => void) {
+const setupApp = async (canvas: HTMLCanvasElement, onClick: () => void) => {
+    if (!canvas) {
+        throw new Error('Canvas not found');
+    }
 
-  if (!canvas) {
-    throw new Error('Canvas not found');
-  }
+    // Create graphics device
+    const device = await createGraphicsDevice(canvas);
 
-  // Create graphics device
-  const device = await createGraphicsDevice(canvas);
+    // Create app options
+    const createOptions = new AppOptions();
+    createOptions.graphicsDevice = device;
+    createOptions.mouse = new Mouse(document.body);
+    createOptions.touch = new TouchDevice(document.body);
+    createOptions.componentSystems = [RenderComponentSystem, CameraComponentSystem, ScriptComponentSystem];
+    createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
 
-  // Create app options
-  const createOptions = new AppOptions();
-  createOptions.graphicsDevice = device;
-  createOptions.mouse = new Mouse(document.body);
-  createOptions.touch = new TouchDevice(document.body);
-  createOptions.componentSystems = [
-    RenderComponentSystem,
-    CameraComponentSystem,
-    ScriptComponentSystem
-  ];
-  createOptions.resourceHandlers = [TextureHandler, ContainerHandler];
-
-  // Create app
-  const app = new AppBase(canvas);
-  app.init(createOptions);
-
-  // Set the canvas to fill the window
-  app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
-  app.setCanvasResolution(RESOLUTION_AUTO);
-
-  // Ensure canvas is resized when window changes size
-  const resize = () => app.resizeCanvas();
-  window.addEventListener('resize', resize);
-
-  app.once('destroy', () => {
-    window.removeEventListener('resize', resize);
-  });
-
-  // Load assets
-  await new Promise<void>((resolve) => {
-    new AssetListLoader(Object.values(assets), app.assets).load(() => resolve());
-  });
-
-  app.start();
-
-  // Set up environment lighting (no skybox, just IBL)
-  app.scene.envAtlas = assets.envAtlas.resource;
-  const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
-  if (skyboxLayer) {
-    skyboxLayer.enabled = false;
-  }
-
-  // Create sphere entity
-  const sphere = new Entity('sphere');
-  sphere.setPosition(new Vec3(0, 0.5, 0));
-
-  // Create a new material
-  const material = new StandardMaterial();
-  material.diffuse.copy(DEFAULT_COLOR);
-  material.update();
-
-  sphere.addComponent('render', {
-    type: 'sphere',
-    material: material
-  });
-  app.root.addChild(sphere);
-
-  // Create camera entity
-  const camera = new Entity('camera');
-  camera.addComponent('camera', {
-    clearColor: new Color(0.09, 0.09, 0.09)
-  });
-  camera.setPosition(new Vec3(4, 1, 4));
-  app.root.addChild(camera);
-
-  // Create camera controls
-  camera.addComponent('script');
-  camera.script?.create(CameraControls);
-
-  // Create grid entity
-  const grid = new Entity('grid');
-  grid.addComponent('script');
-  grid.script?.create(Grid);
-  grid.setLocalScale(1000, 1000, 1000);
-  app.root.addChild(grid);
-
-  // Create a picker for mouse interaction
-  const picker = new Picker(app, 1, 1);
-  const worldLayer = app.scene.layers.getLayerByName('World');
-
-  const intersectsSphere = (x: number, y: number, layer: Layer): Promise<boolean> => {
-    if (!camera.camera) {
-      return Promise.resolve(false);
-    }
+    // Create app
+    const app = new AppBase(canvas);
+    app.init(createOptions);
 
-    const pickerScale = 0.5;
-    picker.resize(canvas.clientWidth * pickerScale, canvas.clientHeight * pickerScale);
+    // Set the canvas to fill the window
+    app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
+    app.setCanvasResolution(RESOLUTION_AUTO);
 
-    if (!layer) {
-      return Promise.resolve(false);
+    // Ensure canvas is resized when window changes size
+    const resize = () => app.resizeCanvas();
+    window.addEventListener('resize', resize);
+
+    app.once('destroy', () => {
+        window.removeEventListener('resize', resize);
+    });
+
+    // Load assets
+    await new Promise<void>((resolve) => {
+        new AssetListLoader(Object.values(assets), app.assets).load(() => resolve());
+    });
+
+    app.start();
+
+    // Set up environment lighting (no skybox, just IBL)
+    app.scene.envAtlas = assets.envAtlas.resource as Texture;
+    const skyboxLayer = app.scene.layers.getLayerByName('Skybox');
+    if (skyboxLayer) {
+        skyboxLayer.enabled = false;
     }
 
-    picker.prepare(camera.camera, app.scene, [layer]);
+    // Create sphere entity
+    const sphere = new Entity('sphere');
+    sphere.setPosition(new Vec3(0, 0.5, 0));
+
+    // Create a new material
+    const material = new StandardMaterial();
+    material.diffuse.copy(DEFAULT_COLOR);
+    material.update();
 
-    return picker.getSelectionAsync(x * pickerScale, y * pickerScale, 1, 1).then((meshInstances: MeshInstance[]): boolean => {
-      if (meshInstances.length === 0) return false;
-      return meshInstances[0] === sphere.render?.meshInstances[0];
+    sphere.addComponent('render', {
+        type: 'sphere',
+        material: material
     });
-  };
-
-  // On mouse move, check if hovering over sphere and update cursor/color
-  app.mouse?.on(EVENT_MOUSEMOVE, throttle((event) => {
-    if (!worldLayer) return;
-    intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
-      material.diffuse.copy(intersects ? HOVER_COLOR : DEFAULT_COLOR);
-      document.body.style.cursor = intersects ? 'pointer' : 'default';
-      material.update();
+    app.root.addChild(sphere);
+
+    // Create camera entity
+    const camera = new Entity('camera');
+    camera.addComponent('camera', {
+        clearColor: new Color(0.09, 0.09, 0.09)
     });
-  }, 100));
-
-  // On mouse up, check if clicked on sphere and call onClick
-  app.mouse?.on(EVENT_MOUSEUP, (event) => {
-    if (!worldLayer || !onClick) return;
-    intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
-      if (intersects) {
-        onClick();
-      }
+    camera.setPosition(new Vec3(4, 1, 4));
+    app.root.addChild(camera);
+
+    // Create camera controls
+    camera.addComponent('script');
+    camera.script?.create(CameraControls);
+
+    // Create grid entity
+    const grid = new Entity('grid');
+    grid.addComponent('script');
+    grid.script?.create(Grid);
+    grid.setLocalScale(1000, 1000, 1000);
+    app.root.addChild(grid);
+
+    // Create a picker for mouse interaction
+    const picker = new Picker(app, 1, 1);
+    const worldLayer = app.scene.layers.getLayerByName('World');
+
+    const intersectsSphere = (x: number, y: number, layer: Layer) => {
+        if (!camera.camera) {
+            return Promise.resolve(false);
+        }
+
+        const pickerScale = 0.5;
+        picker.resize(canvas.clientWidth * pickerScale, canvas.clientHeight * pickerScale);
+
+        if (!layer) {
+            return Promise.resolve(false);
+        }
+
+        picker.prepare(camera.camera, app.scene, [layer]);
+
+        return picker.getSelectionAsync(x * pickerScale, y * pickerScale, 1, 1).then((items) => {
+            if (items.length === 0) return false;
+            return items[0] === sphere.render?.meshInstances[0];
+        });
+    };
+
+    // On mouse move, check if hovering over sphere and update cursor/color
+    app.mouse?.on(
+        EVENT_MOUSEMOVE,
+        throttle((event) => {
+            if (!worldLayer) return;
+            intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
+                material.diffuse.copy(intersects ? HOVER_COLOR : DEFAULT_COLOR);
+                document.body.style.cursor = intersects ? 'pointer' : 'default';
+                material.update();
+            });
+        }, 100)
+    );
+
+    // On mouse up, check if clicked on sphere and call onClick
+    app.mouse?.on(EVENT_MOUSEUP, (event) => {
+        if (!worldLayer || !onClick) return;
+        intersectsSphere(event.x, event.y, worldLayer).then((intersects) => {
+            if (intersects) {
+                onClick();
+            }
+        });
     });
-  });
-}
+};
 
 export { setupApp };

package/templates/vanilla-ts/src/main.ts

@@ -1,7 +1,7 @@
-import './style.css'
-import typescriptLogo from './assets/typescript.svg'
-import playcanvasLogo from './assets/playcanvas.png'
-import { setupApp } from './App'
+import './style.css';
+import { setupApp } from './App';
+import playcanvasLogo from './assets/playcanvas.png';
+import typescriptLogo from './assets/typescript.svg';
 
 let count = 0;
 
@@ -33,13 +33,13 @@ document.querySelector<HTMLDivElement>('#root')!.innerHTML = `
       </p>
     </div>
   </div>
-`
+`;
 
 const counterElement = document.getElementById('counter')!;
 
 const increment = () => {
-  count++;
-  counterElement.textContent = `Click Count: ${count}`;
+    count++;
+    counterElement.textContent = `Click Count: ${count}`;
 };
 
 setupApp(document.getElementById('application-canvas') as HTMLCanvasElement, increment);