create-playcanvas 0.2.6 → 0.3.0

package/templates/react-ts/README.md

@@ -1,82 +1,55 @@
-# @playcanvas/react + TypeScript Starter
+# PlayCanvas React + TypeScript Starter
 
-A modern, batteries-included starter for building PlayCanvas experiences with React and TypeScript, HMR and ESLint.
+A Vite-powered `@playcanvas/react` 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:
+Node.js 22.23.2 or later.
 
-```bash
-nvm install 22 # or 20.19+
-nvm use 22
-```
-
----
-
-## Getting Started
-
-Scaffold and install dependencies:
+## Getting started
 
 ```bash
-npm create playcanvas@latest -t react-ts
+npm create playcanvas@latest playcanvas-project -- --template react-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/Scene.tsx` 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/
-│   ├── Scene.tsx         # React wrapper around a PlayCanvas application
-│   ├── App.tsx           # Entry component
-│   └── main.tsx          # Vite/React bootstrap
-├── vite.config.ts        # Vite + React plugin config
-└── ...
+│   ├── assets/
+│   ├── App.tsx
+│   ├── Scene.tsx
+│   └── main.tsx
+├── eslint.config.mjs
+├── index.html
+├── tsconfig.json
+└── vite.config.ts
 ```
 
-## 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)
-* [PlayCanvas React Docs](https://developer.playcanvas.com/user-manual/react/)
-* [React Docs](https://react.dev/)
-* [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 ❤️. PRs and issues welcome!
+- [PlayCanvas React manual](https://developer.playcanvas.com/user-manual/react/)
+- [React documentation](https://react.dev/)
+- [Vite documentation](https://vite.dev/)
+- [TypeScript documentation](https://www.typescriptlang.org/docs/)

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

@@ -0,0 +1,14 @@
+import reactConfig from '@playcanvas/eslint-config/react';
+import typescriptConfig from '@playcanvas/eslint-config/typescript';
+
+export default [
+    ...typescriptConfig,
+    ...reactConfig,
+    {
+        rules: {
+            'react/jsx-uses-react': 'off',
+            'react/prop-types': 'off',
+            'react/react-in-jsx-scope': 'off'
+        }
+    }
+];

package/templates/react-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 + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></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 + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
 </html>

package/templates/react-ts/package.json

@@ -1,29 +1,36 @@
 {
-  "name": "playcanvas-project",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "engines": {
-    "node": "^20.19.0 || >=22.12.0"
-  },
-  "scripts": {
-    "predev": "node ./scripts/ensure-node-version.cjs",
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@playcanvas/react": "^0.11.3",
-    "playcanvas": "^2.17.2",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
-  },
-  "devDependencies": {
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "semver": "^7.7.4",
-    "typescript": "~6.0.2",
-    "vite": "^8.0.8"
-  }
+    "name": "playcanvas-project",
+    "version": "0.0.0",
+    "private": true,
+    "description": "A PlayCanvas React 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/react": "^0.11.5",
+        "playcanvas": "^2.21.3",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8"
+    },
+    "devDependencies": {
+        "@playcanvas/eslint-config": "3.0.0-beta.8",
+        "@types/react": "^19.2.18",
+        "@types/react-dom": "^19.2.4",
+        "@vitejs/plugin-react": "^6.0.5",
+        "eslint": "^9.39.5",
+        "prettier": "^3.9.6",
+        "typescript": "~6.0.3",
+        "vite": "^8.2.0"
+    },
+    "engines": {
+        "node": ">=22.23.2"
+    }
 }

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

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

package/templates/react-ts/src/App.css

@@ -1,87 +1,75 @@
 #root {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100vw;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100vw;
 }
 
 header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 2rem;
 }
 
 .absolute {
-  position: absolute;
-  top: 0;
-  left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .full-bleed {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
 }
 
 .logo {
-  height: 2em;
-  padding: .5em;
-  will-change: filter;
-  transition: filter 300ms;
+    height: 2em;
+    padding: 0.5em;
+    will-change: filter;
+    transition: filter 300ms;
 }
 
 .playcanvas-logo {
-  border-radius: 100%;
+    border-radius: 100%;
 }
 
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+    filter: drop-shadow(0 0 2em #646cffaa);
 }
 
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-.card {
-  padding: 2em;
+    filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 .read-the-docs {
-  color: #888;
-}
-
-.container{
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
+    color: #888;
 }
 
 .overlay {
-  margin: 0 auto;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: stretch;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
+    margin: 0 auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: stretch;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
 }
 
 .overlay a {
-  pointer-events: auto;
+    pointer-events: auto;
 }
 
 .overlay > .grow {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .pill {
-  background-color: #000;
-  color: #fff;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
+    background-color: #000;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
 }
-

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

@@ -1,46 +1,43 @@
-import { Application } from "@playcanvas/react";
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import playcanvasLogo from './assets/playcanvas.png'
-import './App.css'
-import Scene from "./Scene";
+import { Application } from '@playcanvas/react';
+import { useState } from 'react';
+
+import playcanvasLogo from './assets/playcanvas.png';
+import reactLogo from './assets/react.svg';
+import './App.css';
+import Scene from './Scene';
 
 function App() {
-  const [count, setCount] = useState(0)
+    const [count, setCount] = useState(0);
 
-  return (
-    <>
-      <div className="full-bleed">
-        <Application className="playcanvas-app">
-          <Scene onClick={() => setCount((count) => count + 1)}/>
-        </Application>
-      </div>
-      <div className="absolute overlay">
-        <div className="grow">
-          <header>
-            <h1>PlayCanvas + React</h1>
-            <a href="https://developer.playcanvas.com/user-manual/react/" target="_blank">
-              <img src={playcanvasLogo} className="playcanvas-logo logo" alt="PlayCanvas logo" />
-            </a>
-            <a href="https://react.dev" target="_blank">
-              <img src={reactLogo} className="logo react" alt="React logo" />
-            </a>
-          </header>
-        </div>
-        <div>
-          <span className="pill">
-            Click Count: {count}
-          </span>
-          <p>
-            Edit <code>src/Scene.tsx</code> and save to test HMR
-          </p>
-        </div>
-        <p className="read-the-docs">
-          Click on the PlayCanvas and React logos to learn more
-        </p>
-      </div>
-    </>
-  )
+    return (
+        <>
+            <div className="full-bleed">
+                <Application className="playcanvas-app">
+                    <Scene onClick={() => setCount((count) => count + 1)} />
+                </Application>
+            </div>
+            <div className="absolute overlay">
+                <div className="grow">
+                    <header>
+                        <h1>PlayCanvas + React</h1>
+                        <a href="https://developer.playcanvas.com/user-manual/react/" target="_blank" rel="noreferrer">
+                            <img src={playcanvasLogo} className="playcanvas-logo logo" alt="PlayCanvas logo" />
+                        </a>
+                        <a href="https://react.dev" target="_blank" rel="noreferrer">
+                            <img src={reactLogo} className="logo react" alt="React logo" />
+                        </a>
+                    </header>
+                </div>
+                <div>
+                    <span className="pill">Click Count: {count}</span>
+                    <p>
+                        Edit <code>src/Scene.tsx</code> and save to test HMR
+                    </p>
+                </div>
+                <p className="read-the-docs">Click on the PlayCanvas and React logos to learn more</p>
+            </div>
+        </>
+    );
 }
 
-export default App
+export default App;

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

@@ -1,70 +1,70 @@
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { CameraControls } from "playcanvas/scripts/esm/camera-controls.mjs";
-// @ts-expect-error - PlayCanvas ESM scripts don't have type declarations
-import { Grid } from "playcanvas/scripts/esm/grid.mjs";
-import { useEffect, useState } from "react";
-import { Entity } from "@playcanvas/react";
-import { useEnvAtlas, useMaterial } from "@playcanvas/react/hooks";
-import { Camera, Environment, Render, Script } from "@playcanvas/react/components";
+import { Entity } from '@playcanvas/react';
+import { Camera, Environment, Render, Script } from '@playcanvas/react/components';
+import { useEnvAtlas, useMaterial } from '@playcanvas/react/hooks';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Grid } from 'playcanvas/scripts/esm/grid.mjs';
+import { useEffect, useState } from 'react';
 
 /**
  * The Scene renders a sphere with a grid and camera controls
  */
 function Scene({ onClick }: SceneProps) {
+    // Track the hover state and set the color based on the hover state
+    const [hovering, setHovering] = useState(false);
 
-  // Track the hover state and set the color based on the hover state
-  const [hovering, setHovering] = useState(false);
+    // Set a material color based on the hover state
+    const diffuse = hovering ? 'orange' : 'lightgrey';
 
-  // Set a material color based on the hover state
-  const diffuse = hovering ? 'orange' : 'lightgrey';
+    // Create a material for the sphere
+    const material = useMaterial({ diffuse });
 
-  // Create a material for the sphere
-  const material = useMaterial({ diffuse });
+    // Load the environment map
+    const { asset: envMap } = useEnvAtlas('/environment-map.png');
 
-  // Load the environment map
-  const { asset: envMap } = useEnvAtlas('/environment-map.png');
+    // change the mouse cursor based on the hover state
+    useEffect(() => {
+        document.body.style.cursor = hovering ? 'pointer' : 'default';
 
-  // change the mouse cursor based on the hover state
-  useEffect(() => {
-    document.body.style.cursor = hovering ? 'pointer' : 'default';
-  }, [hovering]);
+        return () => {
+            document.body.style.cursor = '';
+        };
+    }, [hovering]);
 
-  // Don't render until the environment map is loaded
-  if (!envMap) return null;
+    // Don't render until the environment map is loaded
+    if (!envMap) return null;
 
-  return (
-    <>
-      {/* Render some environment lighting using the environment map */}
-      <Environment envAtlas={envMap} showSkybox={false} />
+    return (
+        <>
+            {/* Render some environment lighting using the environment map */}
+            <Environment envAtlas={envMap} showSkybox={false} />
 
-      {/* Render a background grid */}
-      <Entity scale={[1000, 1000, 1000]}>
-        <Script script={Grid} />
-      </Entity>
+            {/* Render a background grid */}
+            <Entity scale={[1000, 1000, 1000]}>
+                <Script script={Grid} />
+            </Entity>
 
-      {/* Create a camera entity with camera controls */}
-      <Entity name='camera' position={[4, 1, 4]}>
-          <Camera clearColor='#171717' />
-          <Script script={CameraControls} />
-      </Entity>
+            {/* Create a camera entity with camera controls */}
+            <Entity name="camera" position={[4, 1, 4]}>
+                <Camera clearColor="#171717" />
+                <Script script={CameraControls} />
+            </Entity>
 
-      {/* Create and position entity with pointer events */}
-      <Entity 
-        position={[0, 0.5, 0]}
-        onClick={onClick}
-        onPointerOver={() => setHovering(true)}
-        onPointerOut={() => setHovering(false)}
-        >
-        
-        {/* Render a sphere with the material */}
-        <Render type="sphere" material={material} />
-      </Entity>
-    </>
-  )
+            {/* Create and position entity with pointer events */}
+            <Entity
+                position={[0, 0.5, 0]}
+                onClick={onClick}
+                onPointerOver={() => setHovering(true)}
+                onPointerOut={() => setHovering(false)}
+            >
+                {/* Render a sphere with the material */}
+                <Render type="sphere" material={material} />
+            </Entity>
+        </>
+    );
 }
 
 type SceneProps = {
-  onClick: () => void;
-}
+    onClick: () => void;
+};
 
 export default Scene;

package/templates/react-ts/src/index.css

@@ -1,73 +1,51 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 a > img {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
 }
 
 h1 {
-  font-size: 2.4em;
-  line-height: 1.1;
-  opacity: 0.85;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    font-size: 2.4em;
+    line-height: 1.1;
+    opacity: 0.85;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
 }