Add Lit v3.0 prerelease generated API

[AndrewJakubowicz]

Context

Tracking task to add Lit v3.0 generated documentation to Lit.dev. Does not need to be publicly linked. Can be by URL only.

Complexity

Naively this is not working because when building with TypeScript, it automatically walks up all parent directories and collects all @types encountered. This breaks because @types/codemirror on lit.dev is picked up and has incompatible typings with TypeScript 5 and the Lit v3 repo.

References: microsoft/TypeScript#30124 and https://stackoverflow.com/questions/42150920/how-to-block-typescript-2-0-from-walking-up-all-parent-directories-while-resolvi

[augustjk]

What's the @types/codemirror error? Is it something that should be fixed upstream?
I also see that @types/codemirror is only part of the lit/lit.dev repo because it's a dependency of playground-elements. I wonder if that's intentional because some types exported by it actually depends on it, or if it's possible to move that to be a dev dependency, then lit/lit.dev won't need it.

[AndrewJakubowicz]

The error is after running npm run build --workspace lit-dev-api on the latest Lit 3 branch commit (without explicit types added to tsconfig): 12109c25997ef03180d7eefe05c64e0fb20dd2b0

Results in:

❌ [packages/labs/ssr-dom-shim:build:ts] Failed with exit status 1
❌ [packages/labs/testing:build:ts:utils] Failed with exit status 2
❌ [packages/internal-scripts:build:ts] Failed with exit status 1
❌ [packages/ts-transformers:build:ts] Failed with exit status 1

    at ChildProcess.exithandler (node:child_process:419:12)
    at ChildProcess.emit (node:events:511:28)
    at maybeClose (node:internal/child_process:1098:16)
    at ChildProcess._handle.onexit (node:internal/child_process:304:5) {
  code: 1,
  killed: false,
  signal: null,
  cmd: 'npm run build:ts',
  stdout: '\n' +
    '> build:ts\n' +
    '> wireit\n' +
    '\n' +
    '🏃 [packages/reactive-element:build:babel] Running command "babel --extensions .ts src/test/decorators --out-dir development/test/decorators-babel"\n' +
    '🏃 [packages/internal-scripts:build:ts] Running command "tsc --build --pretty"\n' +
    '🏃 [packages/ts-transformers:build:ts] Running command "tsc --build --pretty"\n' +
    '🏃 [packages/labs/ssr-dom-shim:build:ts] Running command "tsc --build --pretty"\n' +
    '🏃 [packages/tests:build] Running command "tsc --build --pretty"\n' +
    '🏃 [packages/labs/testing:build:ts:utils] Running command "tsc --project tsconfig-utils.json --pretty"\n' +
    'Successfully compiled 10 files with Babel (504ms).\n' +
    '✅ [packages/reactive-element:build:babel] Executed successfully\n' +
    '✅ [packages/tests:build] Executed successfully\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m553\x1B[0m:\x1B[93m39\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m553\x1B[0m         on<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m555\x1B[0m:\x1B[93m48\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m555\x1B[0m             handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m563\x1B[0m:\x1B[93m40\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m563\x1B[0m         off<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m565\x1B[0m:\x1B[93m48\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m565\x1B[0m             handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    '\n' +
    'Found 4 errors.\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m553\x1B[0m:\x1B[93m39\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m553\x1B[0m         on<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m555\x1B[0m:\x1B[93m48\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m555\x1B[0m             handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m563\x1B[0m:\x1B[93m40\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m563\x1B[0m         off<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m565\x1B[0m:\x1B[93m48\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1
B[0mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                     '\n' +
    '\x1B[7m565\x1B[0m             handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    '\n' +
    'Found 4 errors in the same file, starting at: ../../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[90m:553\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m553\x1B[0m:\x1B[93m39\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1B[0
mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                        '\n' +
    '\x1B[7m553\x1B[0m         on<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m555\x1B[0m:\x1B[93m48\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1B[0
mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                        '\n' +
    '\x1B[7m555\x1B[0m             handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m563\x1B[0m:\x1B[93m40\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1B[0
mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                        '\n' +
    '\x1B[7m563\x1B[0m         off<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    "\x1B[96m../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m565\x1B[0m:\x1B[93m48\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1B[0
mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                        '\n' +
    '\x1B[7m565\x1B[0m             handler: (instance: Editor, event: DocumentAndElementEventHandlersEventMap[K]) => void,\n' +
    '\x1B[7m   \x1B[0m \x1B[91m                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\x1B[0m\n' +
    '\n' +
    '\n' +
    'Found 4 errors.\n' +
    '\n' +
    "\x1B[96m../../../../../../../node_modules/@types/codemirror/index.d.ts\x1B[0m:\x1B[93m553\x1B[0m:\x1B[93m39\x1B[0m - \x1B[91merror\x1B[0m\x1B[90m TS2304: \x1B[0
mCannot find name 'DocumentAndElementEventHandlersEventMap'.\n" +                                                                                                        '\n' +
    '\x1B[7m553\x1B[0m         on<K extends DOMEvent & keyof DocumentAndElementEventHandlersEventMap>(\n' +
    '\x1B[7m ❌ [build] Failed with exit status 1
npm ERR! Lifecycle script `build` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: lit-dev-api@0.0.0 
npm ERR!   at location: /Users/spyr/repo/lit.dev/packages/lit-dev-api 

[augustjk]

I found this: DefinitelyTyped/DefinitelyTyped#64011

Updating to @types/codemirror@5.60.7 includes above fix so no longer errors on TS 5.