Skip to content

Commit

Permalink
Format HTML tagged template literals
Browse files Browse the repository at this point in the history
  • Loading branch information
@niedzielski
niedzielski committed Dec 21, 2023
1 parent 298e2db commit e2cbb8b
Show file tree
Hide file tree
Showing 15 changed files with 269 additions and 224 deletions.
12 changes: 7 additions & 5 deletions src/ui/components/play-app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,12 @@ export class PlayApp extends LitElement {
}

protected override render(): TemplateResult {
return html`<play-pen allow-storage allow-url>
<script lang="tsx" type="application/devvit">
console.log('Hello World!')
</script>
</play-pen>`
return html`
<play-pen allow-storage allow-url>
<script lang="tsx" type="application/devvit">
console.log('Hello World!')
</script>
</play-pen>
`
}
}
39 changes: 21 additions & 18 deletions src/ui/components/play-button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,23 +189,26 @@ export class PlayButton extends LitElement {

protected override render(): TemplateResult {
const iconOnly = this.icon && !this.label && !this.endIcon
return html`<button
?disabled=${this.disabled}
class=${iconOnly ? 'icon-button' : ''}
>
${this.icon &&
html`<play-icon
size=${this.size === 'small' ? '16px' : '20px'}
icon=${this.icon}
></play-icon>`}
<slot></slot>
${this.label && html`<span>${this.label}</span>`}
${this.badge > 0 ? html`<span class="badge">${this.badge}</span>` : ''}
${this.endIcon &&
html`<play-icon
size=${this.size === 'small' ? '16px' : '20px'}
icon=${this.endIcon}
></play-icon>`}
</button>`
return html`
<button ?disabled=${this.disabled} class=${iconOnly ? 'icon-button' : ''}>
${this.icon &&
html`
<play-icon
size=${this.size === 'small' ? '16px' : '20px'}
icon=${this.icon}
></play-icon>
`}
<slot></slot>
${this.label && html`<span>${this.label}</span>`}
${this.badge > 0 ? html`<span class="badge">${this.badge}</span>` : ''}
${this.endIcon &&
html`
<play-icon
size=${this.size === 'small' ? '16px' : '20px'}
icon=${this.endIcon}
></play-icon>
`}
</button>
`
}
}
96 changes: 53 additions & 43 deletions src/ui/components/play-console.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`<table>
<thead>
<tr>
<th class="type"><div class="resize">Type</div></th>
<th class="name"><div class="resize">Name</div></th>
<th class="message"><div class="resize">Message</div></th>
<th class="details">Details</th>
</tr>
</thead>
<tbody>
${tsErrs}${previewErrs}
</tbody>
</table>`
return html`
<table>
<thead>
<tr>
<th class="type"><div class="resize">Type</div></th>
<th class="name"><div class="resize">Name</div></th>
<th class="message"><div class="resize">Message</div></th>
<th class="details">Details</th>
</tr>
</thead>
<tbody>
${tsErrs}${previewErrs}
</tbody>
</table>
`
}

tsErrRow(err: Diagnostic): TemplateResult<1> {
Expand All @@ -141,22 +143,26 @@ export class PlayConsole extends LitElement {
err.start == null
? undefined
: err.file?.getLineAndCharacterOfPosition(err.start)
return html`<tr>
<td>Compile</td>
<td>${type}</td>
<td>
${line == null
? ''
: html`<a
@click=${() =>
this.dispatchEvent(
OpenLineEvent(line.line + 1, line.character)
)}
>Line ${line.line + 1}</a
>`}
</td>
<td>${ts.flattenDiagnosticMessageText(err.messageText, '\n')}</td>
</tr>`
return html`
<tr>
<td>Compile</td>
<td>${type}</td>
<td>
${line == null
? ''
: html`
<a
@click=${() =>
this.dispatchEvent(
OpenLineEvent(line.line + 1, line.character)
)}
>Line ${line.line + 1}</a
>
`}
</td>
<td>${ts.flattenDiagnosticMessageText(err.messageText, '\n')}</td>
</tr>
`
}
}

Expand All @@ -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`<tr>
return html`
<tr>
<td>Execution</td>
<td></td>
<td>${String(err.err)}</td>
<td>${detail}</td>
</tr>
`
return html`
<tr>
<td>Execution</td>
<td></td>
<td>${String(err.err)}</td>
<td>${detail}</td>
</tr>`
return html`<tr>
<td>Execution</td>
<td>${err.err.name}</td>
<td>${err.err.message}</td>
<td>
${detail}
<pre>${err.err.stack}</pre>
</td>
</tr>`
<td>${err.err.name}</td>
<td>${err.err.message}</td>
<td>
${detail}
<pre>${err.err.stack}</pre>
</td>
</tr>
`
}

// BrowserLiteWorker may report objects that are Error-like but that aren't
Expand Down
6 changes: 4 additions & 2 deletions src/ui/components/play-dropdown-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,16 @@ export class PlayDropdownMenu extends LitElement {
}

protected override render(): TemplateResult {
return html` <div @click=${this.#toggleMenu}>
return html`
<div @click=${this.#toggleMenu}>
<slot name="trigger"></slot>
</div>
<div class="menu ${this.isOpen ? 'open' : ''}">
<div class="scrim" @click=${this.#closeMenu}></div>
<ol @click=${this.#closeMenu}>
<slot name="menu"></slot>
</ol>
</div>`
</div>
`
}
}
6 changes: 4 additions & 2 deletions src/ui/components/play-editor/play-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,10 @@ export class PlayEditor extends LitElement {
}

protected override render(): TemplateResult {
return html`<div class="editor"></div>
<slot @slotchange=${this._onSlotChange}></slot>`
return html`
<div class="editor"></div>
<slot @slotchange=${this._onSlotChange}></slot>
`
}

@eventOptions({once: true}) private _onSlotChange(): void {
Expand Down
74 changes: 38 additions & 36 deletions src/ui/components/play-export-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,44 +149,46 @@ export class PlayExportDialog extends LitElement {

protected override render(): TemplateResult {
const cmd = `npx devvit new --template='${this.url}'`
return html`<dialog>
<header>
<h1>Export project</h1>
<play-button
appearance="plain"
icon="close-outline"
@click=${this.close}
size="small"
title="Close"
></play-button>
</header>
<p>Start a new project from this pen:</p>
<ol>
<li>
<a
href="https://developers.reddit.com/docs/quickstart"
target="_blank"
>Install Node.js and the Devvit command-line tool.</a
>
</li>
<li>
Copy the new project command:
<pre>${cmd}</pre>
return html`
<dialog>
<header>
<h1>Export project</h1>
<play-button
appearance="bordered"
appearance="plain"
icon="close-outline"
@click=${this.close}
size="small"
icon="copy-clipboard-outline"
label="Copy to clipboard"
@click=${async () => {
await navigator.clipboard.writeText(cmd)
this._toast.open()
}}
title="Close"
></play-button>
</li>
<li>Paste the command into a terminal and press enter.</li>
</ol>
<play-toast>Copied the command!</play-toast>
</dialog>`
</header>
<p>Start a new project from this pen:</p>
<ol>
<li>
<a
href="https://developers.reddit.com/docs/quickstart"
target="_blank"
>Install Node.js and the Devvit command-line tool.</a
>
</li>
<li>
Copy the new project command:
<pre>${cmd}</pre>
<play-button
appearance="bordered"
size="small"
icon="copy-clipboard-outline"
label="Copy to clipboard"
@click=${async () => {
await navigator.clipboard.writeText(cmd)
this._toast.open()
}}
></play-button>
</li>
<li>Paste the command into a terminal and press enter.</li>
</ol>
<play-toast>Copied the command!</play-toast>
</dialog>
`
}
}
6 changes: 3 additions & 3 deletions src/ui/components/play-icon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,9 @@ export class PlayIcon extends LitElement {
fill: this.color
}
return this.icon
? html`<div style=${styleMap(style)}>
${unsafeHTML(icons[this.icon])}
</div>`
? html`
<div style=${styleMap(style)}>${unsafeHTML(icons[this.icon])}</div>
`
: nothing
}
}
16 changes: 9 additions & 7 deletions src/ui/components/play-list-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,14 @@ export class PlayListItem extends LitElement {
`

protected override render(): TemplateResult {
return html`<li>
${this.icon &&
html`<play-icon size="20px" icon=${this.icon}></play-icon>`}
${this.label}
${this.endIcon &&
html`<play-icon size="20px" icon=${this.endIcon}></play-icon>`}
</li>`
return html`
<li>
${this.icon &&
html`<play-icon size="20px" icon=${this.icon}></play-icon>`}
${this.label}
${this.endIcon &&
html`<play-icon size="20px" icon=${this.endIcon}></play-icon>`}
</li>
`
}
}
Loading

0 comments on commit e2cbb8b

Please sign in to comment.