Support play-editor tests

.gitignore

@@ -4,3 +4,4 @@ tsconfig.tsbuildinfo
 
 /dist/
 /src/bundler/tsd.json
+/src/typescript/typescript.js

.prettierignore

@@ -1,2 +1,3 @@
 /dist/
 /src/bundler/tsd.json
+/src/typescript/typescript.js

src/bundler/compiler.ts

@@ -1,5 +1,5 @@
 import * as tsvfs from '@typescript/vfs'
-import * as ts from 'typescript'
+import ts from '../typescript/typescript.js'
 import tsd from './tsd.json' assert {type: 'json'}
 
 export const appEntrypointFilename = '/src/main.tsx'

src/elements/play-console.ts

@@ -8,8 +8,8 @@ import {
   type TemplateResult
 } from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import * as ts from 'typescript'
 import type {Diagnostics} from '../types/diagnostics.js'
+import ts from '../typescript/typescript.js'
 import {Bubble} from '../utils/bubble.js'
 
 declare global {

src/elements/play-editor-tip.ts

@@ -7,8 +7,8 @@ import {
   type TemplateResult
 } from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import * as ts from 'typescript'
 import type {Diagnostics} from '../types/diagnostics.js'
+import ts from '../typescript/typescript.js'
 
 declare global {
   interface HTMLElementTagNameMap {

src/elements/play-editor/editor-state.ts

@@ -35,8 +35,8 @@ import {
 } from '@codemirror/view'
 import type {VirtualTypeScriptEnvironment} from '@typescript/vfs'
 import {EditorView} from 'codemirror'
-import * as ts from 'typescript'
 import {appEntrypointFilename} from '../../bundler/compiler.js'
+import ts from '../../typescript/typescript.js'
 import {PlayEditorTip} from '../play-editor-tip.js'
 import {editorThemeExtension} from './editor-theme.js'
 

src/elements/play-editor/play-editor.test.ts

@@ -1,5 +1,6 @@
 import {assert, expect} from '@esm-bundle/chai'
 import {html, render} from 'lit'
+import {newTSEnv} from '../../bundler/compiler.js'
 import {PlayEditor} from './play-editor.js'
 
 test('tag is defined', () => {
@@ -25,3 +26,24 @@ test('a slotted template emits an edit-template event', async () => {
   })
   expect(edit.detail).equal("console.log('Hello World!')")
 })
+
+test('setSrc() replaces a template', async () => {
+  render(
+    html`
+      <play-editor .env=${newTSEnv()}>
+        <script lang="tsx" type="application/devvit">
+          'abc'
+        </script>
+      </play-editor>
+    `,
+    document.body
+  )
+  const el = document.querySelector<PlayEditor>('play-editor')!
+  await new Promise(resolve => requestAnimationFrame(resolve))
+  const edit = await new Promise<CustomEvent<string>>(resolve => {
+    el.addEventListener('edit', resolve)
+    el.setSrc("'def'")
+  })
+
+  expect(edit.detail).equal("'def'")
+})

src/elements/play-editor/play-editor.ts

@@ -13,8 +13,8 @@ import {
   customElement,
   eventOptions,
   property,
-  query,
-  queryAssignedElements
+  queryAssignedElements,
+  queryAsync
 } from 'lit/decorators.js'
 import {Bubble} from '../../utils/bubble.js'
 import {unindent} from '../../utils/unindent.js'
@@ -45,9 +45,9 @@ export class PlayEditor extends LitElement {
   `
 
   @property({attribute: false}) env?: VirtualTypeScriptEnvironment
-  @property() src: string | undefined
+  @property() src: string = ''
 
-  @query('div') private _root!: HTMLDivElement
+  @queryAsync('.editor') private _editorEl!: Promise<HTMLDivElement>
 
   @queryAssignedElements({
     flatten: true,
@@ -76,19 +76,21 @@ export class PlayEditor extends LitElement {
     })
   }
 
-  protected override firstUpdated(_props: PropertyValues<this>): void {
-    if (this.env) {
-      const init = newEditorState(this.env, this.src ?? '')
+  protected override async willUpdate(
+    props: PropertyValues<this>
+  ): Promise<void> {
+    if (props.has('env') && this.env && !this.#editor) {
+      const el = await this._editorEl
+      const init = newEditorState(this.env, this.src)
       this.#editor = new EditorView({
         dispatch: transaction => {
           this.#editor!.update([transaction])
-
           if (transaction.docChanged) {
             const src = transaction.state.doc.sliceString(0)
             this.dispatchEvent(Bubble<string>('edit', src))
           }
         },
-        parent: this._root,
+        parent: el,
         state: init
       })
     }

src/types/diagnostics.ts

@@ -1,9 +1,9 @@
 import type {DevvitUIError} from '@devvit/ui-renderer/client/devvit-custom-post.js'
-import type {Diagnostic} from 'typescript'
+import ts from '../typescript/typescript.js'
 
 export type Diagnostics = {
   // to-do: unhandled promise rejections.
   /** Uncaught errors thrown when executing the pen program. */
   previewErrs: DevvitUIError[]
-  tsErrs: Diagnostic[]
+  tsErrs: ts.Diagnostic[]
 }

src/typescript/typescript.d.ts

@@ -0,0 +1,2 @@
+import ts from 'typescript'
+export default ts

tools/build

@@ -80,10 +80,19 @@ async function pluginOnEnd(result) {
   )
 }
 
-await fs.writeFile(
-  path.join('src', 'bundler', 'tsd.json'),
-  JSON.stringify(await readTSDs(), null, 2)
-)
+await Promise.all([
+  fs.writeFile(
+    'src/bundler/tsd.json', // move?
+    JSON.stringify(await readTSDs(), null, 2)
+  ),
+  esbuild.build({
+    bundle: true,
+    entryPoints: ['node_modules/typescript/lib/typescript.js'],
+    external: ['fs', 'inspector', 'os'],
+    format: 'esm',
+    outfile: 'src/typescript/typescript.js'
+  })
+])
 
 /** @type {esbuild.BuildOptions} */
 const opts = {
@@ -112,12 +121,12 @@ if (watch) {
     esbuild.build(appOpts),
     esbuild.build({
       ...opts,
-      entryPoints: [path.join('src', 'index.ts')],
-      outfile: path.join('dist', 'play.js')
+      entryPoints: ['src/index.ts'],
+      outfile: 'dist/play.js'
     }),
     esbuild.build({
       ...opts,
-      entryPoints: [path.join('src', 'elements', 'play-pen', 'play-pen.ts')],
+      entryPoints: ['src/elements/play-pen/play-pen.ts'],
       outdir: 'dist'
     })
   ])