chore: typegpu-cli minor improvements (#2557)

Co-authored-by: Aleksander Katan <56294622+aleksanderkatan@users.noreply.github.com>

Author: cieplypolar

packages/typegpu-cli/src/create.ts

@@ -73,6 +73,11 @@ export async function createProject(cwd: string) {
   if (steps.length > 0) {
     msg += `   To get started run:\n\n`;
     msg += steps.join('\n');
+    msg += `\n\n`;
+    msg += `\
+   Note: If you are using VS Code or Cursor, you may need to run
+   “TypeScript: Select TypeScript Version” and choose
+   “Use Workspace Version” to enable tsover.`;
   }
 
   p.outro(msg);

packages/typegpu-cli/src/utils/files.ts

@@ -70,5 +70,5 @@ export function copyTemplate(templateDir: string, projectDir: string, packageNam
     failAndExit(`[INTERNAL] Invalid package.json in template ${templateDir}`, pkg.summary);
   }
   pkg.name = packageName;
-  fs.writeFileSync(destPackage, JSON.stringify(pkg, null, 2));
+  fs.writeFileSync(destPackage, JSON.stringify(pkg, null, 2) + '\n' /* to make oxfmt happy */);
 }

packages/typegpu-cli/src/utils/pm.ts

@@ -18,7 +18,7 @@ export function pmFromUserAgent(userAgent: string | undefined) {
   if (pm === undefined) {
     failAndExit(`Cannot determine package manager from user agent env.`);
   }
-  return pm as unknown as Agent;
+  return pm as Agent;
 }
 
 function runCommand(command: string, args: string[], interactive?: boolean) {

packages/typegpu-cli/templates/template-vite-simple/_package.json

@@ -8,11 +8,10 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "check": "oxlint && oxfmt --check",
-    "fix": "oxlint --fix && oxfmt"
+    "fix": "oxlint --fix && oxfmt",
+    "types": "tsc --p ./tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@typegpu/color": "^0.11.0",
-    "@typegpu/noise": "^0.11.0",
     "typegpu": "^0.11.6"
   },
   "devDependencies": {

packages/typegpu-cli/templates/template-vite-simple/src/main.ts

@@ -2,8 +2,7 @@ import tgpu, { common, d } from 'typegpu';
 
 const root = await tgpu.init();
 
-// oxlint-disable-next-line typescript/no-non-null-assertion
-const canvas = document.querySelector<HTMLCanvasElement>('#canvas')!;
+const canvas = document.querySelector<HTMLCanvasElement>('#canvas') as HTMLCanvasElement;
 const context = root.configureContext({ canvas });
 
 const pipeline = root.createRenderPipeline({

packages/typegpu-cli/templates/template-vite-simple/src/style.css

@@ -69,58 +69,6 @@ p {
   margin: 0;
 }
 
-.slider {
-  appearance: none;
-  width: 200px;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--accent-bg);
-  border: none;
-  outline: none;
-  cursor: pointer;
-  touch-action: pan-y;
-  margin-bottom: 24px;
-
-  &::-webkit-slider-runnable-track {
-    height: 4px;
-    background: var(--accent-bg);
-    border-radius: 2px;
-  }
-
-  &::-webkit-slider-thumb {
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    margin-top: -7px;
-    border-radius: 50%;
-    background: var(--accent);
-    cursor: pointer;
-    transition: opacity 0.2s;
-  }
-
-  &::-moz-range-track {
-    height: 4px;
-    background: var(--accent-bg);
-    border-radius: 2px;
-    border: none;
-  }
-
-  &::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--accent);
-    cursor: pointer;
-    border: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-}
-
 #typegpu picture {
   display: flex;
   align-items: center;