@deckbuilderkit/build 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckbuilderkit/build",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -21,8 +21,8 @@
     "deckbuilder": "src/cli.ts"
   },
   "dependencies": {
-    "@deckbuilderkit/platform": "0.1.1",
-    "@deckbuilderkit/server-core": "0.1.1",
+    "@deckbuilderkit/platform": "0.1.2",
+    "@deckbuilderkit/server-core": "0.1.2",
     "sharp": "^0.35.5"
   }
 }

package/src/cli.ts

@@ -15,18 +15,19 @@ const [command, ...args] = process.argv.slice(2);
 async function main(): Promise<void> {
   // Only `new` runs outside an app folder.
   if (command === 'new') {
-    const { values, positionals } = parseArgs({ args, allowPositionals: true, options: { name: { type: 'string' }, id: { type: 'string' } } });
+    const { values, positionals } = parseArgs({ args, allowPositionals: true, options: { name: { type: 'string' }, id: { type: 'string' }, views: { type: 'string' }, local: { type: 'boolean', default: false }, git: { type: 'boolean', default: false } } });
     const [dir] = positionals;
     if (!dir) {
-      console.error('Usage: deckbuilder new <dir> [--name <Name>] [--id <id>]');
+      console.error('Usage: deckbuilder new <dir> [--views a,b] [--local] [--git] [--name <Name>] [--id <id>]');
       process.exit(1);
     }
-    const target = await createApp({ dir, name: values.name, id: values.id }, process.cwd());
+    const views = values.views?.split(',').filter(Boolean);
+    const target = await createApp({ dir, name: values.name, id: values.id, views, local: values.local, git: values.git }, process.cwd());
     console.log(`Created ${target}
 
 Next:
+  cd ${dir}
   bun install
-  cd apps/${dir}
   bun run dev`);
     return;
   }
@@ -102,9 +103,11 @@ wrote ${publicKey} (public: commit it; the exe embeds it)`);
     default:
       console.log(`Usage: deckbuilder <command>
 
-  new <dir> [--name <Name>] [--id <id>]
-                              create apps/<dir> from the template (run from the repo root:
-                              bun run new <dir>); id = URL scheme, data folder ~/.<id>
+  new <dir> [--views a,b] [--local] [--git] [--name <Name>] [--id <id>]
+                              create a standalone app in ./<dir> on the published packages,
+                              composing the chosen views (e.g. terminal); --local links the
+                              packages of this checkout instead; --git runs git init;
+                              id = URL scheme, data folder ~/.<id>
   add view <id>               scaffold packages/view-<id> from the view template and register it
                               in the gallery (run from the repo root)
   dev [server flags]          server (--dev, watch mode) + Vite dev server; e.g. dev --window, dev --app

package/src/new.ts

@@ -1,7 +1,6 @@
 import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { extname, join } from 'node:path';
 import { isUrlScheme } from '@deckbuilderkit/server-core/protocol';
-import { workspaceRoot } from './app.ts';
 
 const TEMPLATE = join(import.meta.dir, '..', 'template');
 const BINARY = new Set(['.png', '.ico', '.woff', '.woff2']);
@@ -10,6 +9,12 @@ export interface NewAppOptions {
   dir: string;
   name?: string;
   id?: string;
+  /** View ids to compose, e.g. `['terminal']`. */
+  views?: string[];
+  /** Link the packages of this checkout instead of the published version. */
+  local?: boolean;
+  /** Run `git init` in the new folder. */
+  git?: boolean;
 }
 
 export interface NewApp {
@@ -46,13 +51,137 @@ function copyFilled(from: string, to: string, app: NewApp): void {
   }
 }
 
-/** Creates `apps/<dir>` in the workspace root from the template; returns its path. */
+/** A view package a standalone app can compose; the options are the code the generated lists call it with. */
+interface ViewSpec {
+  /** Package folder, `packages/<pkg>`. */
+  pkg: string;
+  web: string;
+  webOptions: string;
+  webSettings: string;
+  server: string;
+  serverOptions: string;
+  serverSettings: string;
+}
+
+/** Views that need nothing from the app (no client, no stores). */
+export const VIEW_SPECS: Record<string, ViewSpec> = {
+  terminal: {
+    pkg: 'view-terminal',
+    web: 'terminalView',
+    webOptions: '',
+    webSettings: 'TerminalViewSettings',
+    server: 'terminalServerView',
+    serverOptions: "{ integrationDir: join(appHome(APP.id), 'shell-integration'), resolveCwd: async (root, path) => join(root, path) }",
+    serverSettings: 'TerminalServerSettings',
+  },
+};
+
+/** The other views take an app client (web) and stores (server) that `new` does not generate yet. */
+const NEEDS_GLUE = ['explorer', 'git', 'rest', 'workbench'];
+
+export function viewSpecs(ids: string[]): ViewSpec[] {
+  return ids.map((id) => {
+    const spec = VIEW_SPECS[id];
+    if (spec) return spec;
+    if (NEEDS_GLUE.includes(id)) throw new Error(`View "${id}" needs an app client and server stores that "new" does not generate yet.`);
+    throw new Error(`Unknown view "${id}"; known: ${Object.keys(VIEW_SPECS).join(', ')}.`);
+  });
+}
+
+const pkgName = (spec: ViewSpec, scope: string) => `${scope}/${spec.pkg}`;
+
+/** `web/src/view-settings.ts`: the settings the chosen views add to the web `Settings`. */
+export function viewSettingsSource(ids: string[], scope: string): string {
+  const specs = viewSpecs(ids);
+  const imports = specs.map((v) => `import type { ${v.webSettings} } from '${pkgName(v, scope)}/web';`);
+  const extend = specs.length ? ` extends ${specs.map((v) => v.webSettings).join(', ')}` : '';
+  return `${imports.join('\n')}${imports.length ? '\n\n' : ''}/** The settings the chosen views add; \`Settings\` extends it. */\nexport interface ViewSettings${extend} {}\n`;
+}
+
+/** `web/src/views.ts`: `createViews` over Home and the chosen views. */
+export function webViewsSource(ids: string[], scope: string): string {
+  const specs = viewSpecs(ids);
+  const imports = specs.map((v) => `import { ${v.web} } from '${pkgName(v, scope)}/web';`);
+  const calls = specs.map((v, i) => `${v.web}({ group: 'nav.section.main', order: ${20 + i * 10}${v.webOptions ? ', ' + v.webOptions : ''} })`);
+  return `import { createElement } from 'react';
+import { addMessages, createViews, PanelLoading, type ViewIds } from '@deckbuilderkit/ui';
+${imports.join('\n')}${imports.length ? '\n' : ''}import { homeView } from './screens/home.view';
+import { settingsRegistry } from './settings';
+
+/** The one list the nav, routes, screens, commands, settings and messages come from. */
+export const views = createViews([homeView${calls.map((c) => ', ' + c).join('')}], { fallback: createElement(PanelLoading) });
+
+export type ScreenId = ViewIds<typeof views>;
+
+views.registerSettings(settingsRegistry);
+addMessages(views.messages);
+`;
+}
+
+/** `server/views.ts`: the server half of the list and the settings the views add. */
+export function serverViewsSource(ids: string[], scope: string): string {
+  const specs = viewSpecs(ids);
+  const imports = specs.map((v) => `import { ${v.server}, type ${v.serverSettings} } from '${pkgName(v, scope)}/server';`);
+  const extend = specs.length ? ` extends ${specs.map((v) => v.serverSettings).join(', ')}` : '';
+  const list = specs.map((v) => `\n  ${v.server}(${v.serverOptions}),`).join('');
+  return `import { join } from 'node:path';
+import { appHome } from '@deckbuilderkit/platform';
+import type { ServerViewDef } from '@deckbuilderkit/server-core';
+${imports.join('\n')}${imports.length ? '\n' : ''}import { APP } from '../app.ts';
+
+/** The settings the chosen views add; \`Settings\` extends it. */
+export interface ViewSettings${extend} {}
+
+export const serverViews: ServerViewDef[] = [${list}${list ? '\n' : ''}];
+`;
+}
+
+interface BuildPackage {
+  /** Package name scope, e.g. `@deckbuilderkit`. */
+  scope: string;
+  version: string;
+  /** The checkout's packages folder; null for an installed copy. */
+  packagesDir: string | null;
+}
+
+/** Scope and version come from this package's own manifest: every package is published at one version. */
+export function buildPackage(): BuildPackage {
+  const own = JSON.parse(readFileSync(join(import.meta.dir, '..', 'package.json'), 'utf8')) as { name: string; version: string };
+  const siblings = join(import.meta.dir, '..', '..');
+  return { scope: own.name.split('/')[0]!, version: own.version, packagesDir: existsSync(join(siblings, 'server-core', 'package.json')) ? siblings : null };
+}
+
+/** The app's `package.json`: the template's, with every `workspace:*` dep and the chosen view packages at the current version, or `link:`ed to the checkout with `local`. */
+export function appPackageJson(app: NewApp, opts: { views: string[]; local: boolean }, pkg: BuildPackage = buildPackage()): Record<string, any> {
+  const json = JSON.parse(fillPlaceholders(readFileSync(join(TEMPLATE, 'package.json'), 'utf8'), app));
+  const range = (name: string): string => {
+    if (!opts.local) return pkg.version;
+    if (!pkg.packagesDir) throw new Error('--local needs a checkout of the deckbuilder monorepo.');
+    return `link:${join(pkg.packagesDir, name.split('/')[1]!).replaceAll('\\', '/')}`;
+  };
+  for (const field of ['dependencies', 'devDependencies']) {
+    for (const [name, r] of Object.entries<string>(json[field])) if (r.startsWith('workspace:')) json[field][name] = range(name);
+  }
+  for (const v of viewSpecs(opts.views)) json.dependencies[pkgName(v, pkg.scope)] = range(pkgName(v, pkg.scope));
+  json.dependencies = Object.fromEntries(Object.entries(json.dependencies).sort(([a], [b]) => a.localeCompare(b)));
+  return json;
+}
+
+/** Creates `<cwd>/<dir>` from the template, on the published packages (or linked to this checkout with `local`); returns its path. */
 export async function createApp(opts: NewAppOptions, cwd: string): Promise<string> {
   const checked = validateNewApp(opts);
   if ('error' in checked) throw new Error(checked.error);
-  const root = await workspaceRoot(cwd);
-  const target = join(root, 'apps', checked.app.dir);
+  const views = opts.views ?? [];
+  const pkg = buildPackage();
+  const packageJson = appPackageJson(checked.app, { views, local: opts.local ?? false }, pkg);
+  const target = join(cwd, checked.app.dir);
   if (existsSync(target)) throw new Error(`${target} already exists.`);
   copyFilled(TEMPLATE, target, checked.app);
+  writeFileSync(join(target, 'package.json'), JSON.stringify(packageJson, null, 2) + '\n');
+  writeFileSync(join(target, 'web', 'src', 'view-settings.ts'), viewSettingsSource(views, pkg.scope));
+  writeFileSync(join(target, 'web', 'src', 'views.ts'), webViewsSource(views, pkg.scope));
+  writeFileSync(join(target, 'server', 'views.ts'), serverViewsSource(views, pkg.scope));
+  writeFileSync(join(target, '.gitignore'), 'node_modules\ndist\nrelease\n');
+  if (opts.git) Bun.spawnSync(['git', 'init'], { cwd: target });
   return target;
 }

package/template/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@deckbuilderkit/__APP_DIR__",
+  "name": "__APP_DIR__",
   "version": "0.1.0",
   "description": "__APP_NAME__",
   "private": true,

package/template/server/main.ts

@@ -1,6 +1,6 @@
 import { join } from 'node:path';
 import { appHome, createAutostart, pickFolder } from '@deckbuilderkit/platform';
-import { updatePublicKey } from '@deckbuilderkit/server-core';
+import { applyViewSettings, mountViews, updatePublicKey } from '@deckbuilderkit/server-core';
 import {
   createUpdater,
   folderSource,
@@ -19,8 +19,9 @@ import { type Keymap, validKeymap } from '@deckbuilderkit/ui/keybindings';
 import { APP } from '../app.ts';
 import pkg from '../package.json';
 import { routes } from './routes.ts';
+import { serverViews, type ViewSettings } from './views.ts';
 
-export interface Settings extends BaseSettings {
+export interface Settings extends BaseSettings, ViewSettings {
   /** Keybinding overrides by command id, checked by `validKeymap`. */
   keybindings?: Keymap;
   /** Start at Windows login (exe only). */
@@ -50,6 +51,7 @@ const settings = settingsStore<Settings>({
     }
     const keybindings = validKeymap(patch.keybindings);
     if (keybindings) next.keybindings = keybindings;
+    applyViewSettings(serverViews, patch, next as unknown as Record<string, unknown>);
   },
   onChange(next, prev) {
     if (next.autostart !== prev.autostart) void autostart.set(next.autostart);
@@ -67,6 +69,7 @@ const updater = createUpdater({
 });
 
 const { closeToTray } = await settings.load();
+const mounted = mountViews(serverViews, { dataDir, settings, stores: {} });
 
 await runApp({
   app: APP,
@@ -81,8 +84,12 @@ await runApp({
       return settings.save({ updateFolder: path });
     },
     ...updateRoutes(updater, ctx.quit),
+    ...mounted.routes,
     ...routes(ctx),
   }),
+  sockets: mounted.sockets,
+  unauthenticated: mounted.unauthenticated,
+  onQuit: () => mounted.onQuit(),
   webDir: join(import.meta.dir, '../dist/web'),
   transformIndex: themeHead(settings),
   urlProtocol: true,

package/template/tsconfig.json

@@ -1,5 +1,30 @@
 {
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": { "lib": ["ESNext"], "types": ["bun"] },
-  "include": ["app.ts", "server", "vite.config.ts"]
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "lib": [
+      "ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"
+    ],
+    "types": [
+      "bun"
+    ]
+  },
+  "include": [
+    "app.ts",
+    "server",
+    "vite.config.ts"
+  ]
 }

package/template/web/src/App.tsx

@@ -1,23 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PALETTES } from '@deckbuilderkit/server-core/palettes';
-import { AppFrame, type CommandDef, CommandPalette, detectLanguage, effectiveKeys, ErrorBanner, GLOBAL, Icon, type IconName, isDesktop, KeybindingProvider, LayoutProvider, paletteCommand, type PaletteItem, setLanguage, Sidebar, Spinner, useAsync, useCommand, useCommandPalette, useHashRoute, useHeartbeat, useKeybindings, useTheme, useZoom } from '@deckbuilderkit/ui';
+import { AppFrame, type CommandDef, CommandPalette, detectLanguage, effectiveKeys, ErrorBanner, GLOBAL, Icon, isDesktop, KeybindingProvider, LayoutProvider, paletteCommand, type PaletteItem, setLanguage, Sidebar, Spinner, useAsync, useCommand, useCommandPalette, useHashRoute, useHeartbeat, useKeybindings, useTheme, useZoom } from '@deckbuilderkit/ui';
 import { APP } from '../../app';
 import { api, type Settings } from './api';
 import { type MessageKey, t } from './i18n';
-import { Home } from './screens/Home';
 import { SettingsModal } from './screens/SettingsModal';
-
-const SCREENS = ['home'] as const;
-type ScreenId = (typeof SCREENS)[number];
-
-const NAV: Array<{ title: MessageKey; items: Array<{ id: ScreenId; label: MessageKey; icon: IconName }> }> = [
-  {
-    title: 'nav.section.main',
-    items: [
-      { id: 'home', label: 'nav.home', icon: 'home' },
-    ],
-  },
-];
+import { views, type ScreenId } from './views';
 
 const navCommandId = (screen: ScreenId) => `nav.${screen}`;
 const SETTINGS_COMMAND = 'app.settings';
@@ -25,15 +13,15 @@ const KEYS_COMMAND = 'app.keybindings';
 
 /** Every shortcut of the app; built at render so the labels follow the language. */
 function commands(): CommandDef[] {
-  const nav = NAV.flatMap((s) => s.items).map((item, i): CommandDef => ({
-    id: navCommandId(item.id), scope: GLOBAL, label: t(item.label), keys: [`Ctrl+${i + 1}`], inInput: true,
+  const nav = views.nav.flatMap((s) => s.items).map((item, i): CommandDef => ({
+    id: navCommandId(item.id), scope: GLOBAL, label: views.label(item.id), keys: [`Ctrl+${i + 1}`], inInput: true,
   }));
   // Settings and keybindings are modals over the screen, not screens; both are VS Code's keys.
   const overlays: CommandDef[] = [
     { id: SETTINGS_COMMAND, scope: GLOBAL, label: t('nav.settings'), keys: ['Ctrl+,'], inInput: true },
     { id: KEYS_COMMAND, scope: GLOBAL, label: t('nav.keys'), keys: ['Ctrl+K Ctrl+S'], inInput: true },
   ];
-  return [paletteCommand(), ...nav, ...overlays];
+  return [paletteCommand(), ...nav, ...overlays, ...views.keybindings(), ...views.commands()];
 }
 
 // Retrying can't revive a used launch code or a stale token; the user has to open the app again.
@@ -65,7 +53,7 @@ export function App() {
 function Shell({ initialSettings }: { initialSettings: Settings }) {
   const [settings, setSettings] = useState(initialSettings);
   const [overlay, setOverlay] = useState(overlayOfHash);
-  const shown = useRef<ScreenId>('home');
+  const shown = useRef<ScreenId>(views.ids[0]!);
   // Before useHashRoute, so this listener runs first: it puts the shown screen back in the hash for the router.
   useEffect(() => {
     const take = () => {
@@ -78,7 +66,7 @@ function Shell({ initialSettings }: { initialSettings: Settings }) {
     window.addEventListener('hashchange', take);
     return () => window.removeEventListener('hashchange', take);
   }, []);
-  const [screen, go] = useHashRoute(SCREENS, 'home');
+  const [screen, go] = useHashRoute(views.ids, views.ids[0]!);
   shown.current = screen;
   setLanguage(settings.language ?? detectLanguage());
   return (
@@ -106,8 +94,7 @@ function Main({ settings, setSettings, screen, go, overlay, setOverlay }: MainPr
   useZoom(settings.zoom);
 
   useEffect(() => {
-    const item = NAV.flatMap((s) => s.items).find((i) => i.id === screen);
-    document.title = item ? `${t(item.label)} · ${APP.name}` : APP.name;
+    document.title = views.has(screen) ? `${views.label(screen)} · ${APP.name}` : APP.name;
   }, [screen, settings.language]);
 
   const save = useCallback((patch: Partial<Settings>) => {
@@ -115,7 +102,7 @@ function Main({ settings, setSettings, screen, go, overlay, setOverlay }: MainPr
     api.saveSettings(patch).catch(() => { /* preferences are best-effort */ });
   }, []);
 
-  const navItems = NAV.flatMap((s) => s.items);
+  const navItems = views.nav.flatMap((s) => s.items);
   const defs = commands();
   // The nav list is a constant, so the hooks run in the same order every render.
   for (const item of navItems) useCommand(defs.find((d) => d.id === navCommandId(item.id))!, () => go(item.id));
@@ -128,7 +115,7 @@ function Main({ settings, setSettings, screen, go, overlay, setOverlay }: MainPr
   const nextTheme = kind === 'dark' ? 'light' : 'dark';
   const items = useMemo<PaletteItem[]>(() => {
     const goTo = navItems.map((i): PaletteItem => ({
-      id: `go:${i.id}`, group: t('palette.group.go'), label: t(i.label), hint: chordOf(navCommandId(i.id)), keywords: [i.id], run: () => go(i.id),
+      id: `go:${i.id}`, group: t('palette.group.go'), label: views.label(i.id), hint: chordOf(navCommandId(i.id)), keywords: [i.id], run: () => go(i.id),
     }));
     const overlays: PaletteItem[] = [
       { id: 'app:settings', group: t('palette.group.go'), label: t('nav.settings'), hint: chordOf(SETTINGS_COMMAND), keywords: ['settings', 'preferences'], run: () => setOverlay('settings') },
@@ -150,7 +137,7 @@ function Main({ settings, setSettings, screen, go, overlay, setOverlay }: MainPr
 
   if (stopped) return <div className="boot"><span>{t('app.stopped', { name: APP.name })}</span></div>;
 
-  const sections = NAV.map((s) => ({ title: t(s.title), items: s.items.map((i) => ({ ...i, label: t(i.label), hint: chordOf(navCommandId(i.id)) })) }));
+  const sections = views.nav.map((s) => ({ title: t(s.group as MessageKey), items: s.items.map((i) => ({ ...i, label: views.label(i.id), hint: chordOf(navCommandId(i.id)) })) }));
 
   const footer = (
         <>
@@ -168,20 +155,15 @@ function Main({ settings, setSettings, screen, go, overlay, setOverlay }: MainPr
 
   return (
     <LayoutProvider layout={settings.layout} icons={settings.icons} mainMenu={settings.mainMenu} dock={settings.dock} layoutIcon={settings.layoutIcon}>
+    <views.Providers settings={settings} go={go as (id: string) => void}>
     <AppFrame tools={footer} sidebar={<Sidebar name={APP.name} sections={sections} current={screen} onSelect={go} footer={footer} />}>
-      <main className="main">{renderScreen(screen)}</main>
+      <main className="main">{views.render(screen, { settings, onSave: save, go: go as (id: string) => void })}</main>
       {overlay && (
         <SettingsModal key={overlay} settings={settings} onChange={save} onQuit={() => setStopped(true)} onClose={() => setOverlay(null)} initialSection={overlay === 'keys' ? 'keyboard.shortcuts' : overlay.startsWith('settings/') ? overlay.slice('settings/'.length) : undefined} />
       )}
       {palette.open && <CommandPalette items={items} onClose={() => palette.setOpen(false)} />}
     </AppFrame>
+    </views.Providers>
     </LayoutProvider>
   );
 }
-
-function renderScreen(screen: ScreenId) {
-  switch (screen) {
-    default:
-      return <Home />;
-  }
-}

package/template/web/src/api.ts

@@ -1,8 +1,9 @@
 import type { ThemeSettings } from '@deckbuilderkit/server-core/palettes';
 import type { UpdateState } from '@deckbuilderkit/server-core/protocol';
+import type { ViewSettings } from './view-settings';
 import { type Keymap, type Language, request } from '@deckbuilderkit/ui';
 
-export interface Settings extends ThemeSettings {
+export interface Settings extends ThemeSettings, ViewSettings {
   language?: Language;
   /** The main menu shows only its icons. */
   /** Keybinding overrides by command id; the server validates it. */

package/template/web/src/screens/home.view.tsx

@@ -0,0 +1,10 @@
+import { defineView } from '@deckbuilderkit/ui';
+import type { Settings } from '../api';
+import { Home } from './Home';
+
+export const homeView = defineView<'home', Settings>({
+  id: 'home',
+  nav: { group: 'nav.section.main', icon: 'home', label: 'nav.home', order: 10 },
+  render: () => <Home />,
+  messages: { en: {}, 'pt-BR': {} },
+});

package/template/web/tsconfig.json

@@ -1,9 +1,30 @@
 {
-  "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "target": "ES2022",
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "jsx": "react-jsx",
     "types": []
   },
-  "include": ["src", "../app.ts"]
+  "include": [
+    "src",
+    "../app.ts"
+  ]
 }