diff --git a/src/ui/components/play-app.ts b/src/ui/components/play-app.ts index 91c1764..d8d7084 100644 --- a/src/ui/components/play-app.ts +++ b/src/ui/components/play-app.ts @@ -39,10 +39,12 @@ export class PlayApp extends LitElement { } protected override render(): TemplateResult { - return html` - - ` + return html` + + + + ` } } diff --git a/src/ui/components/play-button.ts b/src/ui/components/play-button.ts index 24e9343..35553b2 100644 --- a/src/ui/components/play-button.ts +++ b/src/ui/components/play-button.ts @@ -189,23 +189,26 @@ export class PlayButton extends LitElement { protected override render(): TemplateResult { const iconOnly = this.icon && !this.label && !this.endIcon - return html`` + return html` + + ` } } diff --git a/src/ui/components/play-console.ts b/src/ui/components/play-console.ts index e181fde..8844e06 100644 --- a/src/ui/components/play-console.ts +++ b/src/ui/components/play-console.ts @@ -118,19 +118,21 @@ export class PlayConsole extends LitElement { const tsErrs = [] for (const err of this.diagnostics?.tsErrs ?? []) tsErrs.push(this.tsErrRow(err)) - return html` - - - - - - - - - - ${tsErrs}${previewErrs} - -
Type
Name
Message
Details
` + return html` + + + + + + + + + + + ${tsErrs}${previewErrs} + +
Type
Name
Message
Details
+ ` } tsErrRow(err: Diagnostic): TemplateResult<1> { @@ -141,22 +143,26 @@ export class PlayConsole extends LitElement { err.start == null ? undefined : err.file?.getLineAndCharacterOfPosition(err.start) - return html` - Compile - ${type} - - ${line == null - ? '' - : html` - this.dispatchEvent( - OpenLineEvent(line.line + 1, line.character) - )} - >Line ${line.line + 1}`} - - ${ts.flattenDiagnosticMessageText(err.messageText, '\n')} - ` + return html` + + Compile + ${type} + + ${line == null + ? '' + : html` + + this.dispatchEvent( + OpenLineEvent(line.line + 1, line.character) + )} + >Line ${line.line + 1} + `} + + ${ts.flattenDiagnosticMessageText(err.messageText, '\n')} + + ` } } @@ -182,21 +188,25 @@ function previewErrRow(err: PreviewError): TemplateResult<1> { 'Context and other Devvit APIs are not yet supported in the playground.' : '' if (!isErrorLike(err.err)) - return html` + return html` + + Execution + + ${String(err.err)} + ${detail} + + ` + return html` + Execution - - ${String(err.err)} - ${detail} - ` - return html` - Execution - ${err.err.name} - ${err.err.message} - - ${detail} - 
${err.err.stack}
- - ` + ${err.err.name} + ${err.err.message} + + ${detail} + 
${err.err.stack}
+ + + ` } // BrowserLiteWorker may report objects that are Error-like but that aren't diff --git a/src/ui/components/play-dropdown-menu.ts b/src/ui/components/play-dropdown-menu.ts index f34c462..5744a94 100644 --- a/src/ui/components/play-dropdown-menu.ts +++ b/src/ui/components/play-dropdown-menu.ts @@ -101,7 +101,8 @@ export class PlayDropdownMenu extends LitElement { } protected override render(): TemplateResult { - return html`
+ return html` +
@@ -109,6 +110,7 @@ export class PlayDropdownMenu extends LitElement {
-
` +
+ ` } } diff --git a/src/ui/components/play-editor/play-editor.ts b/src/ui/components/play-editor/play-editor.ts index 9b179b2..a250166 100644 --- a/src/ui/components/play-editor/play-editor.ts +++ b/src/ui/components/play-editor/play-editor.ts @@ -91,8 +91,10 @@ export class PlayEditor extends LitElement { } protected override render(): TemplateResult { - return html`
- ` + return html` +
+ + ` } @eventOptions({once: true}) private _onSlotChange(): void { diff --git a/src/ui/components/play-export-dialog.ts b/src/ui/components/play-export-dialog.ts index 1bacde6..0012122 100644 --- a/src/ui/components/play-export-dialog.ts +++ b/src/ui/components/play-export-dialog.ts @@ -149,44 +149,46 @@ export class PlayExportDialog extends LitElement { protected override render(): TemplateResult { const cmd = `npx devvit new --template='${this.url}'` - return html` -
-

Export project

- -
- -

Start a new project from this pen:

-
    -
  1. - Install Node.js and the Devvit command-line tool. -
    2. -
  2. - Copy the new project command: - 
    ${cmd}
    + return html` + +
    +

    Export project

    { - await navigator.clipboard.writeText(cmd) - this._toast.open() - }} + title="Close" > -
    3. -
  3. Paste the command into a terminal and press enter.
    4. -
- Copied the command! - ` + + +

Start a new project from this pen:

+
    +
  1. + Install Node.js and the Devvit command-line tool. +
    2. +
  2. + Copy the new project command: + 
    ${cmd}
    + { + await navigator.clipboard.writeText(cmd) + this._toast.open() + }} + > +
    3. +
  3. Paste the command into a terminal and press enter.
    4. +
+ Copied the command! + + ` } } diff --git a/src/ui/components/play-icon.ts b/src/ui/components/play-icon.ts index bedf387..5e12952 100644 --- a/src/ui/components/play-icon.ts +++ b/src/ui/components/play-icon.ts @@ -64,9 +64,9 @@ export class PlayIcon extends LitElement { fill: this.color } return this.icon - ? html`
- ${unsafeHTML(icons[this.icon])} -
` + ? html` +
${unsafeHTML(icons[this.icon])}
+ ` : nothing } } diff --git a/src/ui/components/play-list-item.ts b/src/ui/components/play-list-item.ts index 7c748a4..1d10337 100644 --- a/src/ui/components/play-list-item.ts +++ b/src/ui/components/play-list-item.ts @@ -48,12 +48,14 @@ export class PlayListItem extends LitElement { ` protected override render(): TemplateResult { - return html`
  • - ${this.icon && - html``} - ${this.label} - ${this.endIcon && - html``} -
    • ` + return html` +
  • + ${this.icon && + html``} + ${this.label} + ${this.endIcon && + html``} +
    • + ` } } diff --git a/src/ui/components/play-new-pen-button.ts b/src/ui/components/play-new-pen-button.ts index 808ec2f..bc5958e 100644 --- a/src/ui/components/play-new-pen-button.ts +++ b/src/ui/components/play-new-pen-button.ts @@ -143,49 +143,55 @@ export class PlayNewPenButton extends LitElement { @property() size: SizeOptions = 'medium' protected override render(): TemplateResult { - return html`
    - -
    - -
    - -
    -
    - ${repeat( - Object.entries(this.srcByLabel ?? {}), - ([label]) => label, - ([label, src]) => - html` { - this.dispatchEvent(Bubble('edit-src', src)) - }} - >${label}` - )} - - openURL('https://developers.reddit.com/docs/playground')} - > -
    -     -
    ` + return html` +
    + +
    + +
    + +
    +
    + ${repeat( + Object.entries(this.srcByLabel ?? {}), + ([label]) => label, + ([label, src]) => html` + { + this.dispatchEvent(Bubble('edit-src', src)) + }} + >${label} + ` + )} + + openURL('https://developers.reddit.com/docs/playground')} + > +
    +     +
    + ` } } diff --git a/src/ui/components/play-pen-footer.ts b/src/ui/components/play-pen-footer.ts index 207557a..054aa86 100644 --- a/src/ui/components/play-pen-footer.ts +++ b/src/ui/components/play-pen-footer.ts @@ -65,50 +65,54 @@ export class PlayPenFooter extends LitElement { const errsLen = (this.diagnostics?.previewErrs.length ?? 0) + (this.diagnostics?.tsErrs.length ?? 0) - return html`` +
    + ${this._open + ? html` + + ` + : nothing} +
    + + ` } } diff --git a/src/ui/components/play-pen-header.ts b/src/ui/components/play-pen-header.ts index 20c56de..5827f8b 100644 --- a/src/ui/components/play-pen-header.ts +++ b/src/ui/components/play-pen-header.ts @@ -70,7 +70,8 @@ export class PlayPenHeader extends LitElement { @query('play-export-dialog') private _export!: PlayExportDialog protected override render(): TemplateResult { - return html`
    + return html` +
    - ` + + ` } } diff --git a/src/ui/components/play-pen/play-pen.ts b/src/ui/components/play-pen/play-pen.ts index a8f2f7a..77deae6 100644 --- a/src/ui/components/play-pen/play-pen.ts +++ b/src/ui/components/play-pen/play-pen.ts @@ -161,7 +161,8 @@ export class PlayPen extends LitElement { } protected override render(): TemplateResult { - return html`Copied the URL!Copied the URL!) => this._editor.openLine(ev.detail.line, ev.detail.char)} - >` + > + ` } #appendPreviewError(err: PreviewError): void { diff --git a/src/ui/components/play-preview-controls.ts b/src/ui/components/play-preview-controls.ts index 9888e33..0d9bf98 100644 --- a/src/ui/components/play-preview-controls.ts +++ b/src/ui/components/play-preview-controls.ts @@ -72,12 +72,13 @@ export class PlayPreviewControls extends LitElement {
    ${sizes.map( - ([width, label]) => - html` html` + this.dispatchEvent(Bubble('preview-width', width))} - >` + > + ` )}
    diff --git a/src/ui/components/play-preview.ts b/src/ui/components/play-preview.ts index 13a541b..ff46f76 100644 --- a/src/ui/components/play-preview.ts +++ b/src/ui/components/play-preview.ts @@ -111,17 +111,23 @@ export class PlayPreview extends LitElement { protected override render(): TemplateResult { // to-do: don't override toaster's --rem16 to offset the toast. Upstream a // variable. - return html`
    - ${this.bundle && - html`) => - this.dispatchEvent(Bubble('error', {type: 'Error', err: ev.detail}))} - .meta="${this.#meta}" - .client=${this._client} - .scheme=${this.scheme} - style="--rem16: 50px;" - >`} -
    ` + return html` +
    + ${this.bundle && + html` + ) => + this.dispatchEvent( + Bubble('error', {type: 'Error', err: ev.detail}) + )} + .meta="${this.#meta}" + .client=${this._client} + .scheme=${this.scheme} + style="--rem16: 50px;" + > + `} +
    + ` } protected override async willUpdate( diff --git a/src/ui/components/play-toast.ts b/src/ui/components/play-toast.ts index f22130f..c9bc48b 100644 --- a/src/ui/components/play-toast.ts +++ b/src/ui/components/play-toast.ts @@ -75,7 +75,8 @@ export class PlayToast extends LitElement { } protected override render(): TemplateResult { - return html`` + return html` + + ` } }