create-playcanvas 0.2.5 → 0.3.0

package/templates/vanilla-ts/src/style.css

@@ -1,140 +1,107 @@
 :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;
 }
 
 header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 2rem;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  pointer-events: auto;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    pointer-events: auto;
+    text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
 }
 
 h1 {
-  font-size: 2.4em;
-  line-height: 1.1;
-  opacity: 0.85;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+    font-size: 2.4em;
+    line-height: 1.1;
+    opacity: 0.85;
 }
 
 .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.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
+    filter: drop-shadow(0 0 2em #3178c6aa);
 }
 
 .read-the-docs {
-  color: #888;
-}
-
-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;
+    color: #888;
 }
 
 @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;
+    }
 }
 
 .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 > .grow {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .absolute {
-  position: absolute;
-  top: 0;
-  left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .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/vanilla-ts/src/utils.ts

@@ -4,13 +4,14 @@
  * @param interval - The interval in milliseconds
  * @returns A throttled function
  */
-export function throttle(fn: (...args: any[]) => void, interval = 100) {          // interval in ms
+export const throttle = <T extends unknown[]>(fn: (...args: T) => void, interval = 100) => {
+    // interval in ms
     let last = 0;
-    return (...args: any[]) => {
-      const now = Date.now();
-      if (now - last >= interval) {
-        last = now;
-        fn(...args);
-      }
+    return (...args: T) => {
+        const now = Date.now();
+        if (now - last >= interval) {
+            last = now;
+            fn(...args);
+        }
     };
-  }
+};

package/templates/vanilla-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/vanilla-ts/tsconfig.json

@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": ["ES2022", "DOM", "DOM.Iterable"],
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "verbatimModuleSyntax": true,
+        "moduleDetection": "force",
+        "noEmit": true,
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "erasableSyntaxOnly": true,
+        "noFallthroughCasesInSwitch": true,
+        "noUncheckedSideEffectImports": true
+    },
+    "include": ["src"]
+}

package/index.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-import './dist/index.mjs'

package/templates/react-ts/scripts/ensure-node-version.cjs

@@ -1,12 +0,0 @@
-const semver = require('semver');
-const pkg = require('../package.json');
-
-const requiredVersion = pkg.engines.node;
-const currentVersion = process.version;
-
-if (!semver.satisfies(currentVersion, requiredVersion)) {
-  console.error(`\n❌ Unsupported Node.js version: ${currentVersion}`);
-  console.error(`Required: ${requiredVersion}`);
-  console.error('Please upgrade your Node.js to continue.\n');
-  process.exit(1);
-}

package/templates/react-ts/tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "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"]
-}

package/templates/react-ts/tsconfig.node.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/templates/vanilla-ts/scripts/ensure-node-version.cjs

@@ -1,12 +0,0 @@
-const semver = require('semver');
-const pkg = require('../package.json');
-
-const requiredVersion = pkg.engines.node;
-const currentVersion = process.version;
-
-if (!semver.satisfies(currentVersion, requiredVersion)) {
-  console.error(`\n❌ Unsupported Node.js version: ${currentVersion}`);
-  console.error(`Required: ${requiredVersion}`);
-  console.error('Please upgrade your Node.js to continue.\n');
-  process.exit(1);
-}