Rework for TS6#39
Conversation
| @@ -0,0 +1,30 @@ | |||
| # https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs | |||
There was a problem hiding this comment.
Add CI workflow to template. I think this will really help a lot of
people catch mistakes when they happen. As a bonus, they'll catch
errors in the template too.
| { | ||
| "editor.defaultFormatter": "biomejs.biome", | ||
| "editor.codeActionsOnSave": {"source.organizeImports.biome": "explicit"}, | ||
| "js/ts.tsdk.path": "node_modules/typescript/lib" |
There was a problem hiding this comment.
use installed TypeScript version.
There was a problem hiding this comment.
Go modestly on styles and just assume folks will vibe these out.
| /> | ||
| <title>devvit</title> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
There was a problem hiding this comment.
Improve splash screen a11y. here i'm demoing a non-game.
There was a problem hiding this comment.
Split fetch responsibiltiies
| export async function fetchIncCounter( | ||
| amount: number, | ||
| ): Promise<IncCounterRsp | undefined> { | ||
| const req: IncCounterReq = {amount} |
There was a problem hiding this comment.
Consolidate the increment and decrement requests. Demoing multiple request types is good but this was two of the same thing. GetCounter is a second request type.
There was a problem hiding this comment.
Add Biome to flag floating promises and format. Unfortunately, most
settings default to off so a config file is necessary. Added two new
NPM scripts too: lint and format.
| "recommended": true | ||
| }, | ||
| "style": {"noInferrableTypes": "off"}, | ||
| "suspicious": {"noImplicitAnyLet": "off"} |
There was a problem hiding this comment.
seems crazy to me but the recommend rule is to require explicit let local typing which is often overtyping in my opinion
| } | ||
| } | ||
| }, | ||
| "server": { |
There was a problem hiding this comment.
Remove redundant post and server defaults in devvit.json.
| "$schema": "https://developers.reddit.com/schema/config-file.v1.json", | ||
| "name": "<% name %>", | ||
| "post": { | ||
| "dir": "public", |
| "dir": "public", | ||
| "entrypoints": { | ||
| "default": { | ||
| "inline": true, |
| }, | ||
| "triggers": { | ||
| "onAppInstall": "/internal/on-app-install" | ||
| "onAppInstall": "/internal/on/app/install" |
There was a problem hiding this comment.
Tweak router paths to be more hierarchical.
| @@ -0,0 +1,24 @@ | |||
| { | |||
There was a problem hiding this comment.
Rework all TypeScript configs to best support TS6/7. I've tried to
lean on the new defaults as much as possible. Where possible, I've
colocated the configs so if you walk up from any file you find the
config.
There was a problem hiding this comment.
Drop tools/ scaffolding. Too much boilerplate. This removes localhost
development and inlines scripts into package.json.
| "build": "node --experimental-strip-types ./tools/build.ts --minify", | ||
| "deploy": "npm run build && devvit upload", | ||
| "dev": "devvit playtest", | ||
| "login": "devvit login", |
There was a problem hiding this comment.
Drop login NPM script since tooling will log you in.
| "test": "npm run test:types && npm run lint && npm run test:unit && npm run build", | ||
| "test:types": "tsc --build", | ||
| "test:unit": "node --experimental-strip-types --no-warnings=ExperimentalWarning --test src/**/*.test.ts", | ||
| "publish": "npm run clean && npm run build && devvit publish", |
There was a problem hiding this comment.
Rename deploy NPM script to publish which matches NPM (and Devvit)
naming. Clean before building and drop double build step in
devvit.json.
| "clean": "rm -rf dist/ public/*.js*", | ||
| "format": "npm run lint -- --fix", | ||
| "lint": "biome check --error-on-warnings", | ||
| "playtest": "devvit playtest", |
There was a problem hiding this comment.
Rename dev to playtest, invoke watch, and reserve dev for dev
usage.
| "engines": { | ||
| "node": ">=22.6.0" | ||
| }, | ||
| "dependencies": { |
There was a problem hiding this comment.
Move both devvit and @devvit/web to devDependencies. The former
was causing Node.js typing to leak into client types and the latter is
technically bundled.
| return JSON.parse(`${Buffer.concat(chunks)}`) | ||
| } | ||
|
|
||
| function writeJSON<T extends PartialJsonValue>( |
There was a problem hiding this comment.
Fix a couple initialisms to match Api council guidance.
| "publish": "npm run clean && npm run build && devvit publish", | ||
| "watch": "sh -c 'trap \"kill 0\" exit; npm run build:client -- --watch=forever& npm run build:server -- --watch=forever& wait' --" | ||
| }, | ||
| "devDependencies": { |
There was a problem hiding this comment.
Upgrade all dependencies.
Align the template to recent work in external endpoints in anticipation
of upgrading to TS6/7.
- Add CI workflow to template. I think this will really help a lot of
people catch mistakes when they happen. As a bonus, they'll catch
errors in the template too.
- Add Biome to flag floating promises and format. Unfortunately, most
settings default to off so a config file is necessary. Added two new
NPM scripts too: `lint` and `format`.
- Rework all TypeScript configs to best support TS6/7. I've tried to
lean on the new defaults as much as possible. Where possible, I've
colocated the configs so if you walk up from any file you find the
config.
- Demo unit tests.
- Drop tools/ scaffolding. Too much boilerplate. This removes localhost
development and inlines scripts into `package.json`.
- Drop `login` NPM script since tooling will log you in.
- Rename `deploy` NPM script to `publish` which matches NPM (and Devvit)
naming. Clean before building and drop double build step in
`devvit.json`.
- Rename `dev` to `playtest`, invoke `watch`, and reserve `dev` for dev
usage.
- Remove redundant `post` and `server` defaults in `devvit.json`.
- Split fetch and database responsibilities to separate files.
- Drop `.npmrc`. NPM prints a warning on engine mismatch. Strict engines
is an error which doesn't seem necessary?
- Set VSCode to use installed TypeScript version and Biome formatter.
- Tweak router paths to be more hierarchical.
- Consolidate the increment and decrement requests. Demoing multiple
request types is good but this was two of the same thing.
- Move both `devvit` and `@devvit/web` to `devDependencies`. The former
was causing Node.js typing to leak into client types and the latter is
technically bundled.
- Improve splash screen a11y.
- Go modestly on styles and just assume folks will vibe these out.
- Add `AnyResponse` union in server. This should be in `api.ts` but some
of the types are unfortunately server only.
- Tweak the naming in server:
- The top-level API is "_on_Req" but then it _routes_ to everything
else. I'm hoping this is more intuitive.
- Distinguish IncomingMessage / ServerResponse as "Msg" and the bodies
as "req" or "rsp".
- Fix a couple initialisms to match Api council guidance.
- Upgrade all dependencies.
For testing, I ran:
```
$ git clone ~/work/reddit/src/templates/devvit-template-bare snntest20260629c
$ cd snntest20260629c
$ npm install
$ npx devvit init
```
I then tried each NPM script.
I tested the CI config in the
[old repo](https://github.com/niedzielski/devvit-template-simple).
| } from '../shared/api.ts' | ||
| import {dbGetCounter, dbIncCounter} from './db.ts' | ||
|
|
||
| type AnyRsp = |
There was a problem hiding this comment.
Add AnyRsp union in server. This should be in api.ts but some
of the types are unfortunately server only.
| } | ||
|
|
||
| async function onMenuNewPost(): Promise<UiResponse> { | ||
| const post = await reddit.submitCustomPost({ title: context.appName }); |
There was a problem hiding this comment.
Drop .npmrc. NPM prints a warning on engine mismatch. Strict engines
is an error which doesn't seem necessary?
| "build": "npm run build:client -- --metafile=dist/client.meta.json --minify && npm run build:server -- --metafile=dist/server.meta.json --minify", | ||
| "build:client": "esbuild --bundle --log-level=warning --sourcemap=linked --target=es2023 --format=esm --outdir=public --platform=browser src/client/splash.ts src/client/game.ts", | ||
| "build:server": "esbuild --bundle --log-level=warning --sourcemap=linked --target=es2023 --format=cjs --outdir=dist/server --platform=node src/server/index.ts", |
There was a problem hiding this comment.
inlined from tools/build.ts
|
|
||
| > Make sure you have Node 22 downloaded on your machine before running! | ||
|
|
||
| 1. Run `npm create devvit@latest --template=hello-world` |
2 participants
Align the template to recent work in external endpoints in anticipation
of upgrading to TS6/7.
people catch mistakes when they happen. As a bonus, they'll catch
errors in the template too.
settings default to off so a config file is necessary. Added two new
NPM scripts too:
lintandformat.lean on the new defaults as much as possible. Where possible, I've
colocated the configs so if you walk up from any file you find the
config.
development and inlines scripts into
package.json.loginNPM script since tooling will log you in.deployNPM script topublishwhich matches NPM (and Devvit)naming. Clean before building and drop double build step in
devvit.json.devtoplaytest, invokewatch, and reservedevfor devusage.
postandserverdefaults indevvit.json..npmrc. NPM prints a warning on engine mismatch. Strict enginesis an error which doesn't seem necessary?
request types is good but this was two of the same thing.
devvitand@devvit/webtodevDependencies. The formerwas causing Node.js typing to leak into client types and the latter is
technically bundled.
AnyRspunion in server. This should be inapi.tsbut someof the types are unfortunately server only.
else. I'm hoping this is more intuitive.
as "req" or "rsp".
Sorry for the crappy delta!
For testing, I ran:
I then tried each NPM script.
See https://www.reddit.com/r/snntest20260629c_dev.
I tested the CI config in the
old repo.