From d1eaccd2a2ba1ea26af983182aee98b48dd36e24 Mon Sep 17 00:00:00 2001 From: Louis Bompart Date: Mon, 14 Apr 2025 17:09:03 -0400 Subject: [PATCH 1/4] update prettier need prettier/prettier#15718 --- package-lock.json | 12 +++++++----- package.json | 2 +- packages/lit-dev-tools-esm/package.json | 2 +- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8652c0cd7..4d271beba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ ], "devDependencies": { "playground-elements": "^0.20.0", - "prettier": "^2.1.2", + "prettier": "^3.5.3", "typescript": "~4.7.4", "wireit": "^0.14.0" } @@ -6963,13 +6963,15 @@ } }, "node_modules/prettier": { - "version": "2.7.1", + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", "license": "MIT", "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -8982,7 +8984,7 @@ "fast-glob": "^3.2.9", "lit-dev-server": "^0.0.0", "lit-dev-tools-cjs": "^0.0.0", - "prettier": "^2.3.2" + "prettier": "^3.5.3" } } } diff --git a/package.json b/package.json index d3d67555b..86a55232b 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ }, "devDependencies": { "playground-elements": "^0.20.0", - "prettier": "^2.1.2", + "prettier": "^3.5.3", "typescript": "~4.7.4", "wireit": "^0.14.0" } diff --git a/packages/lit-dev-tools-esm/package.json b/packages/lit-dev-tools-esm/package.json index efc6d05ea..78c53e314 100644 --- a/packages/lit-dev-tools-esm/package.json +++ b/packages/lit-dev-tools-esm/package.json @@ -55,6 +55,6 @@ "fast-glob": "^3.2.9", "lit-dev-server": "^0.0.0", "lit-dev-tools-cjs": "^0.0.0", - "prettier": "^2.3.2" + "prettier": "^3.5.3" } } From 808d1e354c10fa639f49528020f230e28d412938 Mon Sep 17 00:00:00 2001 From: Louis Bompart Date: Mon, 14 Apr 2025 17:09:25 -0400 Subject: [PATCH 2/4] format existing files --- lit-dev.code-workspace | 26 +++---- .../lit-dev-cloudbuild-cleanup/src/cleanup.ts | 6 +- packages/lit-dev-content/.eleventy.js | 64 ++++++++--------- .../src/code-language-preference.ts | 4 +- .../components/algolia-search-controller.ts | 4 +- .../src/components/lazy-svg.ts | 2 +- .../src/components/litdev-aside.ts | 2 +- .../src/components/litdev-banner.ts | 2 +- .../components/litdev-code-language-switch.ts | 4 +- .../src/components/litdev-cookie-banner.ts | 3 +- .../src/components/litdev-design-section.ts | 6 +- .../src/components/litdev-drawer.ts | 19 +++-- .../src/components/litdev-error-notifier.ts | 2 +- .../src/components/litdev-example.ts | 6 +- .../litdev-playground-change-guard.ts | 8 +-- .../src/components/litdev-playground-page.ts | 20 +++--- .../litdev-playground-share-gist.ts | 16 ++--- .../litdev-playground-share-long-url.ts | 4 +- .../src/components/litdev-search-modal.ts | 6 +- .../src/components/litdev-search.ts | 16 ++--- .../src/components/litdev-tutorial.ts | 46 ++++++------ .../src/components/resize-bar.ts | 10 +-- .../src/components/theme-switcher.ts | 4 +- .../lit-dev-content/src/components/ts-js.ts | 2 +- .../src/github/github-gists.ts | 6 +- .../src/github/github-signin.ts | 14 ++-- .../lit-dev-content/src/github/github-user.ts | 2 +- .../lit-dev-content/src/github/github-util.ts | 8 +-- .../lit-dev-content/src/global/apply-mods.ts | 2 +- .../src/global/hydrate-common-components.ts | 12 ++-- packages/lit-dev-content/src/global/theme.ts | 4 +- .../lit-dev-content/src/icons/check-icon.ts | 19 ++--- packages/lit-dev-content/src/pages/home.ts | 4 +- packages/lit-dev-content/src/pages/learn.ts | 6 +- packages/lit-dev-content/src/types/gtag.d.ts | 2 +- .../src/util/compact-playground-file.ts | 2 +- .../src/util/gist-conversion.ts | 6 +- .../src/util/hydration-helpers.ts | 2 +- .../src/util/render-algolia-suggestions.ts | 2 +- .../lit-dev-content/src/util/safe-base64.ts | 2 +- .../lit-dev-content/src/util/url-helpers.ts | 6 +- packages/lit-dev-discord-bot/src/index.ts | 12 ++-- .../content-security-policy-middleware.ts | 8 +-- .../github-token-exchange-middleware.ts | 18 ++--- .../src/middleware/redirect-middleware.ts | 4 +- packages/lit-dev-server/src/server.ts | 12 ++-- .../lit-dev-tests/src/check-broken-links.ts | 6 +- packages/lit-dev-tests/src/check-no-todos.ts | 6 +- packages/lit-dev-tests/src/check-redirects.ts | 12 ++-- .../src/playwright/components-styles.spec.ts | 10 +-- .../lit-dev-tests/src/playwright/home.spec.ts | 32 ++++----- .../src/playwright/learn.spec.ts | 2 +- .../src/playwright/playground.spec.ts | 72 +++++++++---------- .../src/playwright/tutorials.spec.ts | 2 +- .../src/playwright/unversioned.spec.ts | 12 ++-- packages/lit-dev-tests/src/playwright/util.ts | 14 ++-- .../src/api-docs/generate.ts | 8 +-- .../src/api-docs/transformer.spec.ts | 6 +- .../src/api-docs/transformer.ts | 42 +++++------ .../src/lit-dev-environments.ts | 6 +- .../src/playground-inline.ts | 4 +- .../blocking-renderer-worker.ts | 4 +- .../playground-plugin/blocking-renderer.ts | 16 ++--- .../src/playground-plugin/plugin.ts | 48 ++++++------- .../src/playground-plugin/renderer.ts | 14 ++-- .../lit-dev-tools-cjs/src/pre-compress.ts | 12 ++-- .../src/search/indexers/PageSearchChunker.ts | 8 +-- .../src/search/indexers/index-api.ts | 6 +- .../src/search/indexers/index-articles.ts | 6 +- .../src/search/indexers/index-docs.ts | 6 +- .../search/indexers/index-external-data.ts | 4 +- .../src/search/indexers/index-tutorials.ts | 8 +-- .../src/search/indexers/index-videos.ts | 2 +- .../src/search/indexers/keywords.ts | 4 +- .../src/search/indexers/utils.ts | 14 ++-- .../lit-dev-tools-cjs/src/search/plugin.ts | 8 +-- .../src/build-unversioned-docs.ts | 24 +++---- packages/lit-dev-tools-esm/src/dev-server.ts | 2 +- .../src/fake-github-middleware.ts | 10 +-- .../src/fake-github-server.ts | 4 +- .../src/generate-js-samples.ts | 8 +-- .../lit-dev-tools-esm/src/typescript-util.ts | 8 +-- .../src/upload-algolia-index.ts | 2 +- 83 files changed, 453 insertions(+), 434 deletions(-) diff --git a/lit-dev.code-workspace b/lit-dev.code-workspace index 70a44ab67..9b3af68c6 100644 --- a/lit-dev.code-workspace +++ b/lit-dev.code-workspace @@ -2,48 +2,48 @@ "folders": [ { "name": "lit-dev-content", - "path": "packages/lit-dev-content" + "path": "packages/lit-dev-content", }, { "name": "lit-dev-tools-cjs", - "path": "packages/lit-dev-tools-cjs" + "path": "packages/lit-dev-tools-cjs", }, { "name": "lit-dev-tools-esm", - "path": "packages/lit-dev-tools-esm" + "path": "packages/lit-dev-tools-esm", }, { "name": "lit-dev-tests", - "path": "packages/lit-dev-tests" + "path": "packages/lit-dev-tests", }, { "name": "lit-dev-api", - "path": "packages/lit-dev-api" + "path": "packages/lit-dev-api", }, { "name": "lit-dev-server", - "path": "packages/lit-dev-server" + "path": "packages/lit-dev-server", }, { "name": "lit-dev-discord-bot", - "path": "packages/lit-dev-discord-bot" + "path": "packages/lit-dev-discord-bot", }, { "name": "lit.dev", - "path": "." - } + "path": ".", + }, ], "settings": { "files.insertFinalNewline": true, "files.trimTrailingWhitespace": true, "[typescript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "esbenp.prettier-vscode", }, "search.exclude": { - "api-data/*/repo": true + "api-data/*/repo": true, }, }, "extensions": { - "recommendations": ["esbenp.prettier-vscode"] - } + "recommendations": ["esbenp.prettier-vscode"], + }, } diff --git a/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts b/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts index c4bcbe5cc..ca7b5249a 100644 --- a/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts +++ b/packages/lit-dev-cloudbuild-cleanup/src/cleanup.ts @@ -39,7 +39,7 @@ async function main() { if (!PROJECT_ID || !REPO_NAME || !_DEPLOY_REGION) { console.log({PROJECT_ID, REPO_NAME, _DEPLOY_REGION}); throw new Error( - 'Missing one or more required environment variables: PROJECT_ID, REPO_NAME, _DEPLOY_REGION' + 'Missing one or more required environment variables: PROJECT_ID, REPO_NAME, _DEPLOY_REGION', ); } @@ -98,7 +98,7 @@ async function main() { !rev.metadata.name ) { throw new Error( - `Found revision with missing necessary metadata: ${JSON.stringify(rev)}` + `Found revision with missing necessary metadata: ${JSON.stringify(rev)}`, ); } @@ -160,7 +160,7 @@ async function main() { } else if (!t.tag.startsWith('main')) { // Unrecognized tags are kept just in case console.log( - `Found unrecognized tag "${t.tag}". This will not be deleted.` + `Found unrecognized tag "${t.tag}". This will not be deleted.`, ); revisionsToKeep.add(t.revisionName); return true; diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js index 3e575cec1..eef15d50a 100644 --- a/packages/lit-dev-content/.eleventy.js +++ b/packages/lit-dev-content/.eleventy.js @@ -71,7 +71,7 @@ module.exports = function (eleventyConfig) { eleventyConfig.addWatchTarget('../lit-dev-api/api-data/*/*.json'); eleventyConfig.addWatchTarget( - '../lit-dev-content/samples/tutorials/**/tutorial.json' + '../lit-dev-content/samples/tutorials/**/tutorial.json', ); eleventyConfig.addWatchTarget('../lit-dev-content/samples/tutorials/**/*.md'); eleventyConfig.addWatchTarget('../lit-dev-content/rollupout/server/*'); @@ -119,14 +119,14 @@ ${content} Object.assign(new state.Token('div_open', 'div', 1), { attrs: [['class', `heading ${headingTag}`]], block: true, - }) + }), ); state.tokens.splice( idx + 4, 0, Object.assign(new state.Token('div_close', 'div', -1), { block: true, - }) + }), ); linkAfterHeaderBase(slug, opts, state, idx + 1); }; @@ -165,16 +165,16 @@ ${content} function (url, latestVersion) { if (!latestVersion) { throw new Error( - `No latestVersion provided to 'removeLatestVersionFromUrl` + `No latestVersion provided to 'removeLatestVersionFromUrl`, ); } if (!url.includes(`/${latestVersion}/`)) { throw new Error( - `'${url}' does not include the latestVersion versioned path segment` + `'${url}' does not include the latestVersion versioned path segment`, ); } return url.replace(`/${latestVersion}/`, '/'); - } + }, ); /** @@ -191,11 +191,11 @@ ${content} } if (!latestVersion) { throw new Error( - `latestVersion not provided to 'fixUnversionedCrossLinks` + `latestVersion not provided to 'fixUnversionedCrossLinks`, ); } return content.replaceAll(`/docs/${latestVersion}/`, '/docs/'); - } + }, ); eleventyConfig.addFilter('removeExtension', function (url) { @@ -446,7 +446,7 @@ ${content} if (location === undefined) { throw new Error( `Ambiguous symbol ${symbol}. ` + - `Options: ${locations.map((l) => l.anchor).join(', ')}` + `Options: ${locations.map((l) => l.anchor).join(', ')}`, ); } @@ -459,8 +459,8 @@ ${content} 'api-v3', '/docs/v3/api', JSON.parse( - fsSync.readFileSync('../lit-dev-api/api-data/lit-3/symbols.json', 'utf8') - ) + fsSync.readFileSync('../lit-dev-api/api-data/lit-3/symbols.json', 'utf8'), + ), ); addApiShortcode( @@ -468,8 +468,8 @@ ${content} '/docs/v2/api', // Don't use require() because of Node caching in watch mode. JSON.parse( - fsSync.readFileSync('../lit-dev-api/api-data/lit-2/symbols.json', 'utf8') - ) + fsSync.readFileSync('../lit-dev-api/api-data/lit-2/symbols.json', 'utf8'), + ), ); addApiShortcode( @@ -478,9 +478,9 @@ ${content} JSON.parse( fsSync.readFileSync( '../lit-dev-api/api-data/lit-html-1/symbols.json', - 'utf8' - ) - ) + 'utf8', + ), + ), ); addApiShortcode( @@ -489,9 +489,9 @@ ${content} JSON.parse( fsSync.readFileSync( '../lit-dev-api/api-data/lit-element-2/symbols.json', - 'utf8' - ) - ) + 'utf8', + ), + ), ); /** @@ -520,7 +520,7 @@ ${content} `CleanCSS errors/warnings on file ${path}:\n\n${[ ...result.errors, ...result.warnings, - ].join('\n')}` + ].join('\n')}`, ); } return ``; @@ -554,14 +554,14 @@ ${content} // Source: https://github.com/11ty/eleventy-base-blog/blob/master/.eleventy.js eleventyConfig.addFilter('readableDate', (dateObj) => { return luxon.DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat( - 'LLL d, yyyy' + 'LLL d, yyyy', ); }); // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string eleventyConfig.addFilter('yyyymmdd', (dateObj) => { return luxon.DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat( - 'yyyy-LL-dd' + 'yyyy-LL-dd', ); }); @@ -587,7 +587,7 @@ ${content} ENV.eleventyOutDir + '/docs/v3/introduction.html', ENV.eleventyOutDir + '/docs/v3/*/index.html', ], - {ignore: ENV.eleventyOutDir + '/docs/(v1|v2|v3)/index.html'} + {ignore: ENV.eleventyOutDir + '/docs/(v1|v2|v3)/index.html'}, ) ).filter( // TODO(aomarks) This is brittle, we need a way to annotate inside an md @@ -595,7 +595,7 @@ ${content} (file) => !file.includes('why-lit') && !file.includes('getting-started') && - !file.includes('browser-support') + !file.includes('browser-support'), ); await Promise.all(emptyDocsIndexFiles.map((path) => fs.unlink(path))); @@ -611,32 +611,32 @@ ${content} // immediately, instead of triggering an Eleventy build. await symlinkForce( path.join(__dirname, 'site', 'css'), - path.join(__dirname, ENV.eleventyOutDir, 'css') + path.join(__dirname, ENV.eleventyOutDir, 'css'), ); await symlinkForce( path.join(__dirname, 'site', 'images'), - path.join(__dirname, ENV.eleventyOutDir, 'images') + path.join(__dirname, ENV.eleventyOutDir, 'images'), ); await symlinkForce( path.join(__dirname, 'site', 'fonts'), - path.join(__dirname, ENV.eleventyOutDir, 'fonts') + path.join(__dirname, ENV.eleventyOutDir, 'fonts'), ); await symlinkForce( path.join(__dirname, 'samples'), - path.join(__dirname, ENV.eleventyOutDir, 'samples') + path.join(__dirname, ENV.eleventyOutDir, 'samples'), ); // Symlink lib -> _dev/js. This lets us directly reference tsc outputs in // dev mode, instead of the Rollup bundles we use for production. await symlinkForce( path.join(__dirname, 'lib'), - path.join(__dirname, ENV.eleventyOutDir, 'js') + path.join(__dirname, ENV.eleventyOutDir, 'js'), ); } else { // Inline all Playground project files directly into their manifests, to // cut down on requests per project. await inlinePlaygroundFilesIntoManifests( - `${ENV.eleventyOutDir}/samples/**/project.json` + `${ENV.eleventyOutDir}/samples/**/project.json`, ); // Pre-compress all outputs as .br and .gz files so the server can read @@ -649,7 +649,7 @@ ${content} await fs.writeFile( path.join(ENV.eleventyOutDir, 'csp-inline-script-hashes.txt'), [...cspInlineScriptHashes].join('\n'), - 'utf8' + 'utf8', ); } }); @@ -676,7 +676,7 @@ ${content} // In prod SSR should use the lit templates run through the minifier. if (!DEV) { componentModules = componentModules.map((componentPath) => - componentPath.replace('lib/components', 'rollupout/server') + componentPath.replace('lib/components', 'rollupout/server'), ); } diff --git a/packages/lit-dev-content/src/code-language-preference.ts b/packages/lit-dev-content/src/code-language-preference.ts index a5766be21..7a10b3dc6 100644 --- a/packages/lit-dev-content/src/code-language-preference.ts +++ b/packages/lit-dev-content/src/code-language-preference.ts @@ -64,7 +64,7 @@ export const getCodeLanguagePreference = (): CodeLanguagePreference => */ export const setCodeLanguagePreference = ( preference: CodeLanguagePreference, - force = false + force = false, ): void => { if (!force) { let cancelled = false; @@ -75,7 +75,7 @@ export const setCodeLanguagePreference = ( }, }; window.dispatchEvent( - new CustomEvent(BEFORE_CODE_LANGUAGE_CHANGE, {detail}) + new CustomEvent(BEFORE_CODE_LANGUAGE_CHANGE, {detail}), ); if (cancelled) { return; diff --git a/packages/lit-dev-content/src/components/algolia-search-controller.ts b/packages/lit-dev-content/src/components/algolia-search-controller.ts index 05540901a..60bd8bbd0 100644 --- a/packages/lit-dev-content/src/components/algolia-search-controller.ts +++ b/packages/lit-dev-content/src/components/algolia-search-controller.ts @@ -62,7 +62,7 @@ export class AgloliaSearchController { constructor( host: ReactiveControllerHost, argsFn: () => string, - options?: Partial + options?: Partial, ) { const opts = {...agloliaSearchControllerDefaultOptions, ...options}; this._indexName = opts.index; @@ -75,7 +75,7 @@ export class AgloliaSearchController { this._task = new Task( host, ([text]) => this._querySearch(text), - () => [argsFn()] + () => [argsFn()], ); aa('init', { diff --git a/packages/lit-dev-content/src/components/lazy-svg.ts b/packages/lit-dev-content/src/components/lazy-svg.ts index 3d33d7471..bef690f67 100644 --- a/packages/lit-dev-content/src/components/lazy-svg.ts +++ b/packages/lit-dev-content/src/components/lazy-svg.ts @@ -147,7 +147,7 @@ export default class LazySvg extends LitElement { }, { rootMargin: this.rootMargin, - } + }, ); observer.observe(this._svgEl); } diff --git a/packages/lit-dev-content/src/components/litdev-aside.ts b/packages/lit-dev-content/src/components/litdev-aside.ts index d717193ba..43bf6d207 100644 --- a/packages/lit-dev-content/src/components/litdev-aside.ts +++ b/packages/lit-dev-content/src/components/litdev-aside.ts @@ -90,7 +90,7 @@ export class LitDevAside extends LitElement { default: const exhaustiveCheck: never = this.type; console.warn( - `Received unexpected type for : ${exhaustiveCheck}` + `Received unexpected type for : ${exhaustiveCheck}`, ); return nothing; } diff --git a/packages/lit-dev-content/src/components/litdev-banner.ts b/packages/lit-dev-content/src/components/litdev-banner.ts index 918eaed74..a38b3f1d1 100644 --- a/packages/lit-dev-content/src/components/litdev-banner.ts +++ b/packages/lit-dev-content/src/components/litdev-banner.ts @@ -33,7 +33,7 @@ export class LitDevBanner extends HTMLElement { if (size) { document.documentElement.style.setProperty( '--banner-height', - `${size.blockSize}px` + `${size.blockSize}px`, ); } }); diff --git a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts index aa9803474..0574c9422 100644 --- a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts +++ b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts @@ -113,7 +113,7 @@ export class LitDevCodeLanguageSwitch extends LitElement { super.connectedCallback(); window.addEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguagePreferenceChanged + this._onCodeLanguagePreferenceChanged, ); } @@ -121,7 +121,7 @@ export class LitDevCodeLanguageSwitch extends LitElement { super.disconnectedCallback(); window.removeEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguagePreferenceChanged + this._onCodeLanguagePreferenceChanged, ); } diff --git a/packages/lit-dev-content/src/components/litdev-cookie-banner.ts b/packages/lit-dev-content/src/components/litdev-cookie-banner.ts index 8bd0fc115..5763b19c7 100644 --- a/packages/lit-dev-content/src/components/litdev-cookie-banner.ts +++ b/packages/lit-dev-content/src/components/litdev-cookie-banner.ts @@ -31,7 +31,8 @@ export default class LitdevCookieBanner extends LitElement { /* Material 2 elevation 5 https://lit.dev/playground/?mods=gists#gist=3ee0643323ce76d53bb8f5a98149dd45 */ - box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, + box-shadow: + rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 5px 8px 0px, rgba(0, 0, 0, 0.12) 0px 1px 14px 0px; } diff --git a/packages/lit-dev-content/src/components/litdev-design-section.ts b/packages/lit-dev-content/src/components/litdev-design-section.ts index 4065e94c1..933fbb10b 100644 --- a/packages/lit-dev-content/src/components/litdev-design-section.ts +++ b/packages/lit-dev-content/src/components/litdev-design-section.ts @@ -92,7 +92,7 @@ export class LitDevDesignSection extends LitElement { - ` + `, )} @@ -105,7 +105,7 @@ export class LitDevDesignSection extends LitElement { - ` + `, )} @@ -120,7 +120,7 @@ export class LitDevDesignSection extends LitElement { > ${config.text} - ` + `, )} `; diff --git a/packages/lit-dev-content/src/components/litdev-drawer.ts b/packages/lit-dev-content/src/components/litdev-drawer.ts index 34fcc1554..50d5e177b 100644 --- a/packages/lit-dev-content/src/components/litdev-drawer.ts +++ b/packages/lit-dev-content/src/components/litdev-drawer.ts @@ -57,7 +57,8 @@ export class LitDevDrawer extends LitElement { static styles = css` :host { width: var(--litdev-drawer-open-width); - transition: transform var(--litdev-drawer-transition-duration), + transition: + transform var(--litdev-drawer-transition-duration), margin-right var(--litdev-drawer-transition-duration); display: flex; flex-direction: column; @@ -69,15 +70,21 @@ export class LitDevDrawer extends LitElement { way there is no content reflow within the drawer during animation. */ transform: translateX( calc( - -1 * calc(var(--litdev-drawer-open-width) - - var(--litdev-drawer-closed-width)) + -1 * + calc( + var(--litdev-drawer-open-width) - var( + --litdev-drawer-closed-width + ) + ) ) ); /* We also apply a negative margin, so that we don't take up the extra space. */ margin-right: calc( - -1 * calc(var(--litdev-drawer-open-width) - - var(--litdev-drawer-closed-width)) + -1 * + calc( + var(--litdev-drawer-open-width) - var(--litdev-drawer-closed-width) + ) ); overflow-y: hidden !important; } @@ -173,7 +180,7 @@ export class LitDevDrawer extends LitElement { () => { this.removeAttribute('transitioning'); }, - {once: true} + {once: true}, ); } } diff --git a/packages/lit-dev-content/src/components/litdev-error-notifier.ts b/packages/lit-dev-content/src/components/litdev-error-notifier.ts index 6e8ec5d19..142363f9f 100644 --- a/packages/lit-dev-content/src/components/litdev-error-notifier.ts +++ b/packages/lit-dev-content/src/components/litdev-error-notifier.ts @@ -92,7 +92,7 @@ Site version: \`${this.siteVersion}\` Browser: \`${navigator.userAgent}\` -` +`, ); return url.href; } diff --git a/packages/lit-dev-content/src/components/litdev-example.ts b/packages/lit-dev-content/src/components/litdev-example.ts index b578ebfd9..5713e442a 100644 --- a/packages/lit-dev-content/src/components/litdev-example.ts +++ b/packages/lit-dev-content/src/components/litdev-example.ts @@ -150,7 +150,7 @@ export class LitDevExample extends LitElement { super.connectedCallback(); window.addEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguagePreferenceChanged + this._onCodeLanguagePreferenceChanged, ); } @@ -158,7 +158,7 @@ export class LitDevExample extends LitElement { super.disconnectedCallback(); window.removeEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguagePreferenceChanged + this._onCodeLanguagePreferenceChanged, ); } @@ -243,7 +243,7 @@ export class LitDevExample extends LitElement { }, { rootMargin: '40px', - } + }, ); io.observe(this); diff --git a/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts b/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts index 7373b0a43..8cd73ecf5 100644 --- a/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts +++ b/packages/lit-dev-content/src/components/litdev-playground-change-guard.ts @@ -60,7 +60,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement { super.connectedCallback(); window.addEventListener( BEFORE_CODE_LANGUAGE_CHANGE, - this._onBeforeCodeLanguageChange + this._onBeforeCodeLanguageChange, ); } @@ -68,7 +68,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement { super.disconnectedCallback(); window.removeEventListener( BEFORE_CODE_LANGUAGE_CHANGE, - this._onBeforeCodeLanguageChange + this._onBeforeCodeLanguageChange, ); } @@ -76,7 +76,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement { private _pendingLanguage: CodeLanguagePreference | undefined = undefined; private _onBeforeCodeLanguageChange = ( - event: WindowEventMap[typeof BEFORE_CODE_LANGUAGE_CHANGE] + event: WindowEventMap[typeof BEFORE_CODE_LANGUAGE_CHANGE], ) => { if (this._project?.modified) { event.detail.cancel(); @@ -85,7 +85,7 @@ export class LitDevPlaygroundChangeGuard extends PlaygroundConnectedElement { }; private _onDialogClosed( - event: CustomEvent<{action: 'cancel' | 'continue' | 'close'}> + event: CustomEvent<{action: 'cancel' | 'continue' | 'close'}>, ) { if ( event.detail.action === 'continue' && diff --git a/packages/lit-dev-content/src/components/litdev-playground-page.ts b/packages/lit-dev-content/src/components/litdev-playground-page.ts index d58be636b..03bcfab0b 100644 --- a/packages/lit-dev-content/src/components/litdev-playground-page.ts +++ b/packages/lit-dev-content/src/components/litdev-playground-page.ts @@ -136,7 +136,7 @@ export class LitDevPlaygroundPage extends LitElement { this.viewMode = (getHashSearchParam( PLAYGROUND_FULLSCREEN_HASH_PARAM, - hashSearchParams + hashSearchParams, ) as null | ViewMode) ?? 'split'; } else if (changed.has('viewMode')) { // if previewFullscreen has changed, update the hash in the URL but not on @@ -145,12 +145,12 @@ export class LitDevPlaygroundPage extends LitElement { setHashSearchParam( PLAYGROUND_FULLSCREEN_HASH_PARAM, this.viewMode, - hashSearchParams + hashSearchParams, ); } else { deleteHashSearchParam( PLAYGROUND_FULLSCREEN_HASH_PARAM, - hashSearchParams + hashSearchParams, ); } @@ -198,8 +198,8 @@ export class LitDevPlaygroundPage extends LitElement { private async _discoverChildElements() { // TODO(aomarks) This is very unconventional. We should be rendering these // elements ourselves, or slotting them in with names. - const mustFindChild: typeof this['querySelector'] = ( - selector: string + const mustFindChild: (typeof this)['querySelector'] = ( + selector: string, ): HTMLElement => { const el = this.querySelector(selector); if (el === null) { @@ -215,13 +215,13 @@ export class LitDevPlaygroundPage extends LitElement { this._examplesDrawer = mustFindChild('litdev-drawer')!; this._exampleControls = mustFindChild('litdev-example-controls')!; this._examplesDrawerScroller = mustFindChild( - 'litdev-drawer .minimalScroller' + 'litdev-drawer .minimalScroller', )!; // Unforuntately, the file editor does not emit a change event, so we reach // into the shadow root and find the code editor that does. await this._fileEditor.updateComplete; this._codeEditor = this._fileEditor.shadowRoot!.querySelector( - 'playground-code-editor' + 'playground-code-editor', )!; } @@ -287,7 +287,7 @@ export class LitDevPlaygroundPage extends LitElement { this.viewMode = (getHashSearchParam( - PLAYGROUND_FULLSCREEN_HASH_PARAM + PLAYGROUND_FULLSCREEN_HASH_PARAM, ) as ViewMode | null) || 'split'; let urlFiles: Array | undefined; const gist = getHashSearchParam('gist'); @@ -325,7 +325,7 @@ export class LitDevPlaygroundPage extends LitElement { this._playgroundProject.config = { extends: '/samples/base.json', files: Object.fromEntries( - urlFiles.map(({name, content, hidden}) => [name, {content, hidden}]) + urlFiles.map(({name, content, hidden}) => [name, {content, hidden}]), ), }; } else { @@ -340,7 +340,7 @@ export class LitDevPlaygroundPage extends LitElement { this._playgroundProject.projectSrc = `${samplesRoot}/${sample}/project.json`; const link = this._examplesDrawer.querySelector( - `.exampleItem[data-sample="${sample}"]` + `.exampleItem[data-sample="${sample}"]`, ); if (link) { link.classList.add('active'); diff --git a/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts b/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts index 1d5794524..431891803 100644 --- a/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts +++ b/packages/lit-dev-content/src/components/litdev-playground-share-gist.ts @@ -169,7 +169,7 @@ export class LitDevPlaygroundShareGist extends LitElement { const avatarSize = 24; const avatarUrl = new URL( `/u/${id}?s=${/* double for high dpi */ avatarSize * 2}`, - this.githubAvatarUrl + this.githubAvatarUrl, ).href; return html`
@@ -247,7 +247,7 @@ export class LitDevPlaygroundShareGist extends LitElement { }); localStorage.setItem( GITHUB_USER_LOCALSTORAGE_KEY, - JSON.stringify({id, login}) + JSON.stringify({id, login}), ); // Render share button. this.requestUpdate(); @@ -285,7 +285,7 @@ export class LitDevPlaygroundShareGist extends LitElement { new CustomEvent('status', { detail: {text: 'Creating gist ...'}, bubbles: true, - }) + }), ); let token = tokenCache.get(this); @@ -305,7 +305,7 @@ export class LitDevPlaygroundShareGist extends LitElement { }); this.dispatchEvent( - new Event('will-hashchange', {bubbles: true, composed: true}) + new Event('will-hashchange', {bubbles: true, composed: true}), ); writeToHash(gist.id); let statusText = 'Gist created'; @@ -323,7 +323,7 @@ export class LitDevPlaygroundShareGist extends LitElement { new CustomEvent('status', { detail: {text: statusText}, bubbles: true, - }) + }), ); } finally { this._pending = false; @@ -347,7 +347,7 @@ export class LitDevPlaygroundShareGist extends LitElement { new CustomEvent('status', { detail: {text: 'Updating gist ...'}, bubbles: true, - }) + }), ); let token = tokenCache.get(this); @@ -378,7 +378,7 @@ export class LitDevPlaygroundShareGist extends LitElement { }); this.dispatchEvent( - new Event('will-hashchange', {bubbles: true, composed: true}) + new Event('will-hashchange', {bubbles: true, composed: true}), ); writeToHash(gist.id); let statusText = 'Gist updated'; @@ -391,7 +391,7 @@ export class LitDevPlaygroundShareGist extends LitElement { new CustomEvent('status', { detail: {text: statusText}, bubbles: true, - }) + }), ); } finally { this._pending = false; diff --git a/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts b/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts index ee09571a7..688ea23ff 100644 --- a/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts +++ b/packages/lit-dev-content/src/components/litdev-playground-share-long-url.ts @@ -75,7 +75,7 @@ export class LitDevPlaygroundShareLongUrl extends LitElement { return; } const base64 = encodeSafeBase64( - JSON.stringify(files.map(compactPlaygroundFile)) + JSON.stringify(files.map(compactPlaygroundFile)), ); // We have to use these util functions so that we do not accidentally // overwrite any existing query parameters in the hash like `#view-mode=...` @@ -114,7 +114,7 @@ export class LitDevPlaygroundShareLongUrl extends LitElement { new CustomEvent('status', { detail: {text: statusText}, bubbles: true, - }) + }), ); } } diff --git a/packages/lit-dev-content/src/components/litdev-search-modal.ts b/packages/lit-dev-content/src/components/litdev-search-modal.ts index 24e7b506a..952720b79 100644 --- a/packages/lit-dev-content/src/components/litdev-search-modal.ts +++ b/packages/lit-dev-content/src/components/litdev-search-modal.ts @@ -178,8 +178,10 @@ export class LitDevSearchModal extends LitElement { border: none; inset-block: 60px auto; background-color: transparent; - box-shadow: rgb(0 0 0 / 20%) 0px 11px 15px -7px, - rgb(0 0 0 / 14%) 0px 24px 38px 3px, rgb(0 0 0 / 12%) 0px 9px 46px 8px; + box-shadow: + rgb(0 0 0 / 20%) 0px 11px 15px -7px, + rgb(0 0 0 / 14%) 0px 24px 38px 3px, + rgb(0 0 0 / 12%) 0px 9px 46px 8px; } dialog::backdrop { diff --git a/packages/lit-dev-content/src/components/litdev-search.ts b/packages/lit-dev-content/src/components/litdev-search.ts index 27525c22c..db4ddec73 100644 --- a/packages/lit-dev-content/src/components/litdev-search.ts +++ b/packages/lit-dev-content/src/components/litdev-search.ts @@ -264,7 +264,7 @@ export class LitDevSearch extends LitElement { // once we release that feature in @lit-labs/task so that we don't do this // needlessly every render. const groupedSuggestions = new SuggestionGroups( - this._searchController?.value ?? [] + this._searchController?.value ?? [], ); // for aria-activedescendant we need each item in each group to have a @@ -317,10 +317,10 @@ export class LitDevSearch extends LitElement { })}" > `; - } + }, )} `; - } + }, ); } @@ -463,7 +463,7 @@ export class LitDevSearch extends LitElement { // On mobile we manually close the nav drawer, otherwise the drawer remains // open when navigating between fragment identifiers. const navDrawer = document.querySelector( - 'mwc-drawer#mobileDrawer' + 'mwc-drawer#mobileDrawer', ) as Drawer; if (navDrawer) { navDrawer.open = false; @@ -480,11 +480,11 @@ export class LitDevSearch extends LitElement { const githubIssueUrl = new URL('https://github.com/lit/lit.dev/issues/new'); githubIssueUrl.searchParams.append( 'title', - `[docs] No search results for \`${searchText}\`` + `[docs] No search results for \`${searchText}\``, ); githubIssueUrl.searchParams.append( 'body', - `` + ``, ); githubIssueUrl.searchParams.append('labels', `Area: docs`); return githubIssueUrl.href; @@ -673,8 +673,8 @@ export class LitDevSearch extends LitElement { #items { max-height: calc( - 100dvh - var(--_input-height) - 2 * var(--search-modal-padding-block) - - var(--_items-margin-block-start) + 100dvh - var(--_input-height) - 2 * + var(--search-modal-padding-block) - var(--_items-margin-block-start) ); } } diff --git a/packages/lit-dev-content/src/components/litdev-tutorial.ts b/packages/lit-dev-content/src/components/litdev-tutorial.ts index e71c1b8d5..8afb4cef1 100644 --- a/packages/lit-dev-content/src/components/litdev-tutorial.ts +++ b/packages/lit-dev-content/src/components/litdev-tutorial.ts @@ -153,7 +153,7 @@ export class LitDevTutorial extends LitElement { * validation message */ private readonly onPlaygroundMessage = ( - e: MessageEvent<{status: string; message?: string}> + e: MessageEvent<{status: string; message?: string}>, ) => { if (this._checkStatus !== 'CHECKING') { return; @@ -203,7 +203,7 @@ export class LitDevTutorial extends LitElement { return undefined; } return (this.getRootNode() as ShadowRoot | Document).getElementById( - this.project + this.project, ) as PlaygroundProject | undefined; } @@ -215,7 +215,7 @@ export class LitDevTutorial extends LitElement { return undefined; } return (this.getRootNode() as ShadowRoot | Document).getElementById( - this.preview + this.preview, ) as PlaygroundPreview | undefined; } @@ -254,7 +254,7 @@ export class LitDevTutorial extends LitElement { this, async ([projectLocation]) => { const manifestRes = await fetch( - `${this._samplesRoot}/tutorials/${projectLocation}/tutorial.json` + `${this._samplesRoot}/tutorials/${projectLocation}/tutorial.json`, ); if (manifestRes.ok) { @@ -263,7 +263,7 @@ export class LitDevTutorial extends LitElement { throw new Error('Manifest fetch was unsuccessful'); } }, - () => [this._projectLocation] + () => [this._projectLocation], ); /** @@ -288,7 +288,7 @@ export class LitDevTutorial extends LitElement { return html; }, - () => [this._idx] + () => [this._idx], ); createRenderRoot() { @@ -369,13 +369,12 @@ export class LitDevTutorial extends LitElement { ${this._manifestTask.render({ - complete: (manifest) => html` ${manifest?.header} - ${diamondIcon} - Step - ${this._idx + 1} - / ${manifest?.steps.length}`, + complete: (manifest) => + html` ${manifest?.header} + ${diamondIcon} + Step + ${this._idx + 1} + / ${manifest?.steps.length}`, })}
@@ -416,7 +415,7 @@ export class LitDevTutorial extends LitElement {

${when( this._idx < this._manifest.steps.length, - () => this._manifest.steps[this._idx].title + () => this._manifest.steps[this._idx].title, )}

${this._manifestTask.render({ @@ -440,7 +439,7 @@ export class LitDevTutorial extends LitElement { const domResponse = (domParser.parseFromString as any)( response, 'text/html', - {includeShadowRoots: true} + {includeShadowRoots: true}, ); const body = domResponse.body; if (needsDSDPolyfill) { @@ -464,9 +463,10 @@ export class LitDevTutorial extends LitElement { return html`
${when( !this._manifest.steps[this._idx].noSolve, - () => html` - ${solveIcon} Solve - ` + () => + html` + ${solveIcon} Solve + `, )} ${this._manifestTask.render({ complete: (manifest) => this._renderCodeCheckButton(manifest), @@ -536,7 +536,7 @@ export class LitDevTutorial extends LitElement { window.addEventListener('hashchange', this._readUrl); window.addEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguagePreferenceChanged + this._onCodeLanguagePreferenceChanged, ); const previewElement = this._preview!; @@ -557,7 +557,7 @@ export class LitDevTutorial extends LitElement { window.removeEventListener('hashchange', this._readUrl); window.removeEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguagePreferenceChanged + this._onCodeLanguagePreferenceChanged, ); const iframe = this._preview!.iframe!; @@ -596,7 +596,7 @@ export class LitDevTutorial extends LitElement { this._requestSolvedCode ? this._info.projectSrcAfter : this._info.projectSrcBefore, - true + true, ); }; @@ -681,7 +681,7 @@ export class LitDevTutorial extends LitElement { if (hash.startsWith('#')) { hash = hash.slice(1); } - this._idx = hash === '' ? 0 : this._slugToIdx(hash) ?? this._idx; + this._idx = hash === '' ? 0 : (this._slugToIdx(hash) ?? this._idx); if (hash.startsWith('0')) { // In an earlier URL scheme, we indexed steps from 0, and left-padded with // "0"s. Now we index from 1, and conveniently use the fact that we also @@ -705,7 +705,7 @@ export class LitDevTutorial extends LitElement { window.history.pushState( null, '', - addModsParameterToUrlIfNeeded(this._info.url) + addModsParameterToUrlIfNeeded(this._info.url), ); } diff --git a/packages/lit-dev-content/src/components/resize-bar.ts b/packages/lit-dev-content/src/components/resize-bar.ts index 2307054ad..3bec62fd6 100644 --- a/packages/lit-dev-content/src/components/resize-bar.ts +++ b/packages/lit-dev-content/src/components/resize-bar.ts @@ -113,7 +113,7 @@ export class ResizeBar extends LitElement { return; } const target = (this.getRootNode() as ShadowRoot | Document).getElementById( - this.target + this.target, ); if (!target) { return; @@ -146,11 +146,13 @@ export class ResizeBar extends LitElement { // underneath the bar. const newSize = Math.max( 0, - isWidthDimension ? oldSize + clientX - right : oldSize - clientY + top + isWidthDimension + ? oldSize + clientX - right + : oldSize - clientY + top, ); document.documentElement.style.setProperty( this.property, - `${newSize}px` + `${newSize}px`, ); }); }; @@ -167,7 +169,7 @@ export class ResizeBar extends LitElement { this.active = false; this.resizing = false; }, - {once: true} + {once: true}, ); } } diff --git a/packages/lit-dev-content/src/components/theme-switcher.ts b/packages/lit-dev-content/src/components/theme-switcher.ts index ffc88fdf9..bbceb68bb 100644 --- a/packages/lit-dev-content/src/components/theme-switcher.ts +++ b/packages/lit-dev-content/src/components/theme-switcher.ts @@ -93,7 +93,7 @@ export class ThemeSwitcher extends LitElement { ( this.shadowRoot?.querySelector?.( - 'md-menu-item[selected]' + 'md-menu-item[selected]', ) as HTMLElement )?.focus?.(); }} @@ -115,7 +115,7 @@ export class ThemeSwitcher extends LitElement { ? checkIcon('end') : html``} - ` + `, )} `; diff --git a/packages/lit-dev-content/src/components/ts-js.ts b/packages/lit-dev-content/src/components/ts-js.ts index 05d53e175..0d73222f1 100644 --- a/packages/lit-dev-content/src/components/ts-js.ts +++ b/packages/lit-dev-content/src/components/ts-js.ts @@ -34,7 +34,7 @@ export class TsJsLanguageDisplay extends LitElement { super.disconnectedCallback(); window.removeEventListener( CODE_LANGUAGE_CHANGE, - this._onCodeLanguageChange + this._onCodeLanguageChange, ); } diff --git a/packages/lit-dev-content/src/github/github-gists.ts b/packages/lit-dev-content/src/github/github-gists.ts index 3d64fc4b9..c201b3d87 100644 --- a/packages/lit-dev-content/src/github/github-gists.ts +++ b/packages/lit-dev-content/src/github/github-gists.ts @@ -31,7 +31,7 @@ export interface GistFile { */ export const getGist = async ( gistId: string, - opts: GitHubApiOptions + opts: GitHubApiOptions, ): Promise => { // https://docs.github.com/en/rest/reference/gists#get-a-gist const url = new URL(`/gists/${gistId}`, opts.apiBaseUrl); @@ -47,7 +47,7 @@ export const getGist = async ( */ export const createGist = async ( files: GistFiles, - opts: AuthenticatedGitHubApiOptions + opts: AuthenticatedGitHubApiOptions, ): Promise => { // https://docs.github.com/en/rest/reference/gists#create-a-gist const url = new URL('/gists', opts.apiBaseUrl); @@ -67,7 +67,7 @@ export const createGist = async ( export const updateGist = async ( gistId: string, files: GistFiles, - opts: AuthenticatedGitHubApiOptions + opts: AuthenticatedGitHubApiOptions, ): Promise => { // https://docs.github.com/en/rest/reference/gists#update-a-gist const url = new URL(`/gists/${gistId}`, opts.apiBaseUrl); diff --git a/packages/lit-dev-content/src/github/github-signin.ts b/packages/lit-dev-content/src/github/github-signin.ts index 396c58a17..c4140e8fe 100644 --- a/packages/lit-dev-content/src/github/github-signin.ts +++ b/packages/lit-dev-content/src/github/github-signin.ts @@ -30,14 +30,14 @@ export interface GitHubSigninOptions { * https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#web-application-flow. */ export const signInToGithub = async ( - options: GitHubSigninOptions + options: GitHubSigninOptions, ): Promise => { const url = new URL(options.authorizeUrl); url.searchParams.set('client_id', options.clientId); url.searchParams.set('scope', 'gist'); url.searchParams.set( 'redirect_uri', - new URL('/playground/signin/', document.location.href).href + new URL('/playground/signin/', document.location.href).href, ); // Width and height found empirically. @@ -49,7 +49,7 @@ export const signInToGithub = async ( const popup = window.open( url, '_blank', - `width=${width},height=${height},top=${top},left=${left}` + `width=${width},height=${height},top=${top},left=${left}`, ); if (popup === null) { // Disabling popups in Chrome and Firefox doesn't seem to prevent @@ -110,7 +110,7 @@ export const signInToGithub = async ( * can be used to clean up this event listener if we need to end early. */ const receiveCodeFromPopup = ( - popup: Window + popup: Window, ): { promise: Promise; abort: () => void; @@ -131,7 +131,7 @@ const receiveCodeFromPopup = ( abort(); } }, - {signal: abortController.signal} + {signal: abortController.signal}, ); }); return {promise, abort}; @@ -143,7 +143,7 @@ const receiveCodeFromPopup = ( */ const pollForPopupClosed = ( popup: Window, - pollInterval: number + pollInterval: number, ): Promise<'closed'> => { return new Promise((resolve) => { const id = setInterval(() => { @@ -174,7 +174,7 @@ const exchangeCodeForAccessToken = async (code: string): Promise => { throw new Error( `/api/github-token-exchange error [${httpResp.status}]: ${ jsonResp.error ?? '' - }` + }`, ); } return jsonResp.accessToken; diff --git a/packages/lit-dev-content/src/github/github-user.ts b/packages/lit-dev-content/src/github/github-user.ts index 565991ed1..d0c1bdc0b 100644 --- a/packages/lit-dev-content/src/github/github-user.ts +++ b/packages/lit-dev-content/src/github/github-user.ts @@ -17,7 +17,7 @@ export interface UserInfo { * Get details about the authenticated user. */ export const getAuthenticatedUser = async ( - opts: AuthenticatedGitHubApiOptions + opts: AuthenticatedGitHubApiOptions, ): Promise => { // https://docs.github.com/en/rest/reference/users#get-the-authenticated-user const url = new URL('/user', opts.apiBaseUrl); diff --git a/packages/lit-dev-content/src/github/github-util.ts b/packages/lit-dev-content/src/github/github-util.ts index 65505e01d..dbd8b36d7 100644 --- a/packages/lit-dev-content/src/github/github-util.ts +++ b/packages/lit-dev-content/src/github/github-util.ts @@ -21,12 +21,12 @@ export class GitHubError extends Error { method: string, status: number | undefined, message?: string, - stack?: string + stack?: string, ) { super( `Error calling GitHub API ${method} ${url.pathname}` + (status ? ` (HTTP status ${status})` : '') + - (message ? `: ${message}` : '') + (message ? `: ${message}` : ''), ); this.url = url; this.status = status; @@ -42,7 +42,7 @@ export class GitHubError extends Error { */ export const fetchGitHubJson = async ( url: URL, - init: RequestInit + init: RequestInit, ): Promise => { try { const res = await fetch(url.href, init); @@ -58,7 +58,7 @@ export const fetchGitHubJson = async ( init?.method ?? 'GET', undefined, (error as Error).message, - (error as Error).stack + (error as Error).stack, ); } throw error; diff --git a/packages/lit-dev-content/src/global/apply-mods.ts b/packages/lit-dev-content/src/global/apply-mods.ts index 5301660ea..08dc344df 100644 --- a/packages/lit-dev-content/src/global/apply-mods.ts +++ b/packages/lit-dev-content/src/global/apply-mods.ts @@ -10,7 +10,7 @@ if (MODS) { document.body.classList.add( ...MODS.split(' ') .map((v) => v.trim()) - .filter((v) => v !== '') + .filter((v) => v !== ''), ); window.addEventListener('click', (event) => { for (const el of event.composedPath()) { diff --git a/packages/lit-dev-content/src/global/hydrate-common-components.ts b/packages/lit-dev-content/src/global/hydrate-common-components.ts index 7ef8cffa5..dc7a89320 100644 --- a/packages/lit-dev-content/src/global/hydrate-common-components.ts +++ b/packages/lit-dev-content/src/global/hydrate-common-components.ts @@ -32,7 +32,7 @@ const hydrateMobileNav = () => { const activateMobileDetails = async () => { // Expand the current section in the mobile nav. const activeDetails = document.querySelector( - '#mobileDocsNav > li.activeSection details' + '#mobileDocsNav > li.activeSection details', ) as HTMLDetailsElement | null; if (activeDetails === null) { return; @@ -52,7 +52,7 @@ const activateMobileDetails = async () => { activeDetails.scrollIntoView({block: 'end'}); }); }, - {once: true} + {once: true}, ); }; @@ -62,7 +62,7 @@ const activateMobileDetails = async () => { // We need to open the one in the current view or else it'll open a hidden // modal that makes the dom inert. const searchModals = document.querySelectorAll( - 'litdev-search-modal' + 'litdev-search-modal', ) as NodeListOf; let modalHydrated = false; @@ -88,7 +88,7 @@ for (const searchModal of searchModals) { }, { once: true, - } + }, ); } @@ -107,7 +107,7 @@ const hydrateAndOpenOnCMDK = async (e: KeyboardEvent) => { // We need to make sure we open the currently visible modal or else it'll // open a hidden modal that makes the dom inert. const searchModal = document.querySelector( - `#${navBar} litdev-search-modal` + `#${navBar} litdev-search-modal`, ) as LitDevSearchModal; const drawer = document.body.querySelector('mwc-drawer'); @@ -135,7 +135,7 @@ const onMobileView = () => { } const activeDetails = document.querySelector( - '#mobileDocsNav > li.activeSection details' + '#mobileDocsNav > li.activeSection details', ); if (activeDetails) { diff --git a/packages/lit-dev-content/src/global/theme.ts b/packages/lit-dev-content/src/global/theme.ts index 8fb19245e..6c97a912e 100644 --- a/packages/lit-dev-content/src/global/theme.ts +++ b/packages/lit-dev-content/src/global/theme.ts @@ -44,7 +44,7 @@ function saveColorMode(mode: ColorMode) { */ export function updateMetaColor(mode: ColorMode) { const meta = document.head.querySelector( - 'meta[name="theme-color"]:not([media])' + 'meta[name="theme-color"]:not([media])', ); if (!meta) { return; @@ -54,7 +54,7 @@ export function updateMetaColor(mode: ColorMode) { if (mode === 'auto') { const prefersDark = window.matchMedia( - '(prefers-color-scheme: dark)' + '(prefers-color-scheme: dark)', ).matches; isLight = !prefersDark; } diff --git a/packages/lit-dev-content/src/icons/check-icon.ts b/packages/lit-dev-content/src/icons/check-icon.ts index 4b68dd894..6f0b19bbd 100644 --- a/packages/lit-dev-content/src/icons/check-icon.ts +++ b/packages/lit-dev-content/src/icons/check-icon.ts @@ -7,12 +7,13 @@ import {html, nothing} from 'lit'; // Source: https://fonts.google.com/icons?selected=Material+Icons+Outlined:check_circle -export const checkIcon = (slot = '') => html` - -`; +export const checkIcon = (slot = '') => + html` + + `; diff --git a/packages/lit-dev-content/src/pages/home.ts b/packages/lit-dev-content/src/pages/home.ts index 252872297..1501c7a22 100644 --- a/packages/lit-dev-content/src/pages/home.ts +++ b/packages/lit-dev-content/src/pages/home.ts @@ -44,7 +44,7 @@ const fadeHeaderOnScroll = () => { const entry = entries[0]; document.body.classList.toggle('introScrolled', !entry.isIntersecting); }, - {rootMargin: '-60px'} + {rootMargin: '-60px'}, ); const splashLogo = document.body.querySelector('#intro')!; observer.observe(splashLogo); @@ -120,7 +120,7 @@ const activateTourRegions = () => { position: { start: {line: number; char: number}; end: {line: number; char: number}; - } + }, ) => { const line = code.childNodes[position.start.line]; if (line === undefined) { diff --git a/packages/lit-dev-content/src/pages/learn.ts b/packages/lit-dev-content/src/pages/learn.ts index c261306f5..b89bb19e2 100644 --- a/packages/lit-dev-content/src/pages/learn.ts +++ b/packages/lit-dev-content/src/pages/learn.ts @@ -14,7 +14,7 @@ import type {MdChipSet} from '@material/web/chips/chip-set.js'; import {FilterChip} from '@material/web/chips/internal/filter-chip.js'; const intentionallyBlank = document.querySelector( - '#intentionally-blank' + '#intentionally-blank', ); if (!intentionallyBlank) { throw new Error(`Internal Error: no intentionally blank element.`); @@ -68,12 +68,12 @@ const updateContentFromChips = async (updateHash = true) => { const keepKinds = new Set( (chipSet.chips as FilterChip[]) .filter((el) => el.selected) - .map((el) => el.dataset['value']) + .map((el) => el.dataset['value']), ); intentionallyBlank.style.display = keepKinds.size === 0 ? 'block' : 'none'; for (const card of Array.from( - document.querySelectorAll('.card-grid > .card') + document.querySelectorAll('.card-grid > .card'), )) { const cardKind = card.dataset['contentKind'] ?? 'always-show'; card.style.display = diff --git a/packages/lit-dev-content/src/types/gtag.d.ts b/packages/lit-dev-content/src/types/gtag.d.ts index 4e0fe4e38..0588db3f0 100644 --- a/packages/lit-dev-content/src/types/gtag.d.ts +++ b/packages/lit-dev-content/src/types/gtag.d.ts @@ -7,6 +7,6 @@ interface Window { gtag?: ( interface: 'event', eventName: string, - params?: {[param: string]: unknown} + params?: {[param: string]: unknown}, ) => void; } diff --git a/packages/lit-dev-content/src/util/compact-playground-file.ts b/packages/lit-dev-content/src/util/compact-playground-file.ts index a02baa4b2..89ee7e59f 100644 --- a/packages/lit-dev-content/src/util/compact-playground-file.ts +++ b/packages/lit-dev-content/src/util/compact-playground-file.ts @@ -21,7 +21,7 @@ export interface CompactPlaygroundFile { * false. */ export const compactPlaygroundFile = ( - file: SampleFile + file: SampleFile, ): CompactPlaygroundFile => { const compact: CompactPlaygroundFile = { name: file.name, diff --git a/packages/lit-dev-content/src/util/gist-conversion.ts b/packages/lit-dev-content/src/util/gist-conversion.ts index 4464fa972..20e1a656b 100644 --- a/packages/lit-dev-content/src/util/gist-conversion.ts +++ b/packages/lit-dev-content/src/util/gist-conversion.ts @@ -48,7 +48,7 @@ export const playgroundToGist = (playgroundFiles: SampleFile[]): GistFiles => { entry.hidden = true; } return [name, entry]; - }) + }), ), }; const gistFiles: GistFiles = Object.fromEntries( @@ -56,7 +56,7 @@ export const playgroundToGist = (playgroundFiles: SampleFile[]): GistFiles => { // Gist files can't be empty. But because an empty file will still have a // metadata entry, we'll still know it exists when we load it later. .filter(({content}) => content !== '') - .map(({name, content}) => [name, {content}]) + .map(({name, content}) => [name, {content}]), ); gistFiles[METADATA_FILENAME] = { content: JSON.stringify(metadata, null, 2), @@ -74,7 +74,7 @@ export const gistToPlayground = (gistFiles: GistFiles): SampleFile[] => { try { metadata = (JSON.parse( - metadataFile.content + metadataFile.content, ) as GistPlaygroundMetadata) /* in case it is null */ || {}; } catch (error) { console.warn('Failed to JSON parse playground metadata file in gist'); diff --git a/packages/lit-dev-content/src/util/hydration-helpers.ts b/packages/lit-dev-content/src/util/hydration-helpers.ts index d7f5da4f1..dc4218506 100644 --- a/packages/lit-dev-content/src/util/hydration-helpers.ts +++ b/packages/lit-dev-content/src/util/hydration-helpers.ts @@ -26,7 +26,7 @@ export const onIdle = (hydrationCallback: () => void) => { */ export const onMediaQueryOnce = ( queryString: string, - hydrationCallback: () => void + hydrationCallback: () => void, ) => { const query = window.matchMedia(queryString); const onQuery = (e: MediaQueryList | MediaQueryListEvent) => { diff --git a/packages/lit-dev-content/src/util/render-algolia-suggestions.ts b/packages/lit-dev-content/src/util/render-algolia-suggestions.ts index beb3b9d72..9e8f7586e 100644 --- a/packages/lit-dev-content/src/util/render-algolia-suggestions.ts +++ b/packages/lit-dev-content/src/util/render-algolia-suggestions.ts @@ -14,7 +14,7 @@ import {html, TemplateResult} from 'lit'; * @returns A sanitized lit template. */ export const renderAlgoliaSnippet = ( - snippet: string + snippet: string, ): TemplateResult | string => { // Algloia snippets have stringified HTML like so: // 'Baz Foo bar Fooz'. diff --git a/packages/lit-dev-content/src/util/safe-base64.ts b/packages/lit-dev-content/src/util/safe-base64.ts index e767c098c..8c2c55654 100644 --- a/packages/lit-dev-content/src/util/safe-base64.ts +++ b/packages/lit-dev-content/src/util/safe-base64.ts @@ -31,7 +31,7 @@ export const encodeSafeBase64 = (str: string): string => { // to base64 encode: {F0 9F 98 83} const percentEscaped = encodeURIComponent(str); const utf8 = percentEscaped.replace(/%([0-9A-F]{2})/g, (_, hex) => - String.fromCharCode(parseInt(hex, 16)) + String.fromCharCode(parseInt(hex, 16)), ); const base64 = btoa(utf8); const base64url = base64.replace(/\+/g, '-').replace(/\//g, '_'); diff --git a/packages/lit-dev-content/src/util/url-helpers.ts b/packages/lit-dev-content/src/util/url-helpers.ts index f27fc890e..50d2faba3 100644 --- a/packages/lit-dev-content/src/util/url-helpers.ts +++ b/packages/lit-dev-content/src/util/url-helpers.ts @@ -15,7 +15,7 @@ */ export const getHashSearchParam = ( name: string, - hashParams = getHashSearchParams() + hashParams = getHashSearchParams(), ): string | null => { return hashParams.get(name); }; @@ -33,7 +33,7 @@ export const getHashSearchParam = ( export const setHashSearchParam = ( name: string, value: string, - hashParams = getHashSearchParams() + hashParams = getHashSearchParams(), ): URLSearchParams => { hashParams.set(name, value); return hashParams; @@ -50,7 +50,7 @@ export const setHashSearchParam = ( */ export const deleteHashSearchParam = ( name: string, - hashParams = getHashSearchParams() + hashParams = getHashSearchParams(), ): URLSearchParams => { hashParams.delete(name); return hashParams; diff --git a/packages/lit-dev-discord-bot/src/index.ts b/packages/lit-dev-discord-bot/src/index.ts index d786c401e..61bfb75f6 100644 --- a/packages/lit-dev-discord-bot/src/index.ts +++ b/packages/lit-dev-discord-bot/src/index.ts @@ -21,7 +21,7 @@ import {publicVars} from 'lit-dev-tools-esm/lib/configs.js'; // set up algolia search const algClient = algolia( publicVars.algolia.appId, - publicVars.algolia.searchOnlyKey + publicVars.algolia.searchOnlyKey, ); const index = algClient.initIndex(publicVars.algolia.index); @@ -55,7 +55,7 @@ const docsSlashCommand = new SlashCommandBuilder() .setName('query') .setDescription('The text to search for.') .setRequired(true) - .setAutocomplete(true) + .setAutocomplete(true), ); /** @@ -87,7 +87,7 @@ const publishDiscordCommands = async (commands: PublishableCommand[]) => { * @param interaction The Autocomplete interaction to be handled. */ const handleDocsAutocompleteInteraction = async ( - interaction: AutocompleteInteraction + interaction: AutocompleteInteraction, ) => { const focusedValue = interaction.options.getFocused(); // Do not waste a query if the user has fewer than 3 chars. @@ -129,7 +129,7 @@ const handleDocsAutocompleteInteraction = async ( * @param interaction The /docs command interaction to be handled. */ const handleDocsSubmissionInteraction = async ( - interaction: ChatInputCommandInteraction + interaction: ChatInputCommandInteraction, ) => { const value = interaction.options.data[0].value as string; @@ -165,14 +165,14 @@ const startClientWebsocketServer = () => { // SlashCommandBuilder's .setAutocomplete(true) option. if (interaction.type === InteractionType.ApplicationCommandAutocomplete) { handleDocsAutocompleteInteraction(interaction).catch((error) => - console.error(error) + console.error(error), ); } // This is true when the user finally returns a command. (a lit.dev url) if (interaction.isChatInputCommand()) { handleDocsSubmissionInteraction(interaction).catch((error) => - console.error(error) + console.error(error), ); } } diff --git a/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts b/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts index 408a8241d..156f6b77c 100644 --- a/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts +++ b/packages/lit-dev-server/src/middleware/content-security-policy-middleware.ts @@ -68,7 +68,7 @@ const GOOGLE_ANALYTICS_INLINE_SCRIPT_HASH = * https://csp-evaluator.withgoogle.com/ */ export const contentSecurityPolicyMiddleware = ( - opts: ContentSecurityPolicyMiddlewareOptions + opts: ContentSecurityPolicyMiddlewareOptions, ): Koa.Middleware => { const makePolicy = (...directives: string[]) => [ @@ -143,7 +143,7 @@ export const contentSecurityPolicyMiddleware = ( // is no other directive to use. See // https://bugzilla.mozilla.org/show_bug.cgi?id=1303364#c4 and // https://github.com/w3c/webappsec-csp/issues/199. - `default-src 'self'` + `default-src 'self'`, ); // Policy for the playground-elements web worker script. @@ -174,7 +174,7 @@ export const contentSecurityPolicyMiddleware = ( `connect-src https://unpkg.com/ https://cdn.jsdelivr.net/`, // Disallow everything else. - `default-src 'none'` + `default-src 'none'`, ); // For all other responses, set the strictest possible CSP, just in case a @@ -191,7 +191,7 @@ export const contentSecurityPolicyMiddleware = ( const atomXmlFeedCsp = makePolicy( `style-src 'unsafe-inline'`, `img-src data:`, - `default-src 'none'` + `default-src 'none'`, ); return async (ctx, next) => { diff --git a/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts b/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts index a17eebd46..060be5475 100644 --- a/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts +++ b/packages/lit-dev-server/src/middleware/github-token-exchange-middleware.ts @@ -69,7 +69,7 @@ export const createGitHubTokenExchangeMiddleware = const errorResponse = ( status: number, externalMessage: string, - internalMessage?: string + internalMessage?: string, ): void => { ctx.status = status; ctx.type = 'application/json'; @@ -80,7 +80,7 @@ export const createGitHubTokenExchangeMiddleware = console.error( `GitHub token exchange middleware error [${status}]\n${externalMessage}${ internalMessage ? '\n' + internalMessage : '' - }` + }`, ); }; @@ -89,7 +89,7 @@ export const createGitHubTokenExchangeMiddleware = if (!code) { return errorResponse( 400, - 'The "code" query parameter is missing or malformed.' + 'The "code" query parameter is missing or malformed.', ); } @@ -108,7 +108,7 @@ export const createGitHubTokenExchangeMiddleware = return errorResponse( 500, `An HTTP ${tokenHttpResp.status} error was returned by the GitHub API.`, - await safelyGetHttpBody(tokenHttpResp) + await safelyGetHttpBody(tokenHttpResp), ); } @@ -123,7 +123,7 @@ export const createGitHubTokenExchangeMiddleware = return errorResponse( 500, 'Error parsing JSON response from GitHub API.', - (error as Error).message + (error as Error).message, ); } @@ -134,7 +134,7 @@ export const createGitHubTokenExchangeMiddleware = return errorResponse( 401, 'The code passed is incorrect or expired.', - JSON.stringify(tokenResp) + JSON.stringify(tokenResp), ); } else if (tokenResp.error === 'incorrect_client_credentials') { // This error could happen if our GitHub app ID or secret is set @@ -142,13 +142,13 @@ export const createGitHubTokenExchangeMiddleware = return errorResponse( 500, 'The GitHub client credentials are invalid.', - JSON.stringify(tokenResp) + JSON.stringify(tokenResp), ); } return errorResponse( 500, 'An unexpected GitHub API error occured.', - JSON.stringify(tokenResp) + JSON.stringify(tokenResp), ); } @@ -157,7 +157,7 @@ export const createGitHubTokenExchangeMiddleware = return errorResponse( 500, 'Unexpected GitHub API response format.', - JSON.stringify(tokenResp) + JSON.stringify(tokenResp), ); } diff --git a/packages/lit-dev-server/src/middleware/redirect-middleware.ts b/packages/lit-dev-server/src/middleware/redirect-middleware.ts index 46a958132..0dae97ff4 100644 --- a/packages/lit-dev-server/src/middleware/redirect-middleware.ts +++ b/packages/lit-dev-server/src/middleware/redirect-middleware.ts @@ -31,7 +31,7 @@ export const redirectMiddleware = (): Koa.Middleware => async (ctx, next) => { // of as an escaped path component. url = new URL( oldLitHtmlSiteRedirects.get(url.pathname) ?? '/404-not-found/', - url + url, ); break; } @@ -39,7 +39,7 @@ export const redirectMiddleware = (): Koa.Middleware => async (ctx, next) => { url.hostname = 'lit.dev'; url = new URL( oldLitElementSiteRedirects.get(url.pathname) ?? '/404-not-found/', - url + url, ); break; } diff --git a/packages/lit-dev-server/src/server.ts b/packages/lit-dev-server/src/server.ts index 23da80b89..7312bc86f 100644 --- a/packages/lit-dev-server/src/server.ts +++ b/packages/lit-dev-server/src/server.ts @@ -51,9 +51,9 @@ if (mode === 'playground') { path.join( contentPackage, ENV.eleventyOutDir, - 'csp-inline-script-hashes.txt' + 'csp-inline-script-hashes.txt', ), - 'utf8' + 'utf8', ) .trim() .split('\n'); @@ -65,14 +65,14 @@ if (mode === 'playground') { reportViolations: ENV.reportCspViolations, githubApiOrigin: ENV.githubApiUrl, githubAvatarOrigin: ENV.githubAvatarUrl, - }) + }), ); app.use( createGitHubTokenExchangeMiddleware({ githubMainUrl: ENV.githubMainUrl, clientId: ENV.githubClientId, clientSecret: ENV.githubClientSecret, - }) + }), ); app.use(redirectMiddleware()); app.use(notFoundMiddleware(staticRoot)); @@ -99,11 +99,11 @@ app.use( // day while it revalidates the cache in the background. res.setHeader( 'Cache-Control', - 'max-age=120, stale-while-revalidate=86400' + 'max-age=120, stale-while-revalidate=86400', ); } }, - }) + }), ); const server = app.listen(port); diff --git a/packages/lit-dev-tests/src/check-broken-links.ts b/packages/lit-dev-tests/src/check-broken-links.ts index f201140dd..97749cfe5 100644 --- a/packages/lit-dev-tests/src/check-broken-links.ts +++ b/packages/lit-dev-tests/src/check-broken-links.ts @@ -13,7 +13,7 @@ const goodUrlsFilename = pathLib.join( url.fileURLToPath(import.meta.url), '..', '..', - 'known-good-urls.txt' + 'known-good-urls.txt', ); /** @@ -107,7 +107,7 @@ async function main() { return; } console.log( - `BROKEN LINK: ${result.url.resolved} found on page ${result.base.resolved}` + `BROKEN LINK: ${result.url.resolved} found on page ${result.base.resolved}`, ); console.log(result.brokenReason); console.log(); @@ -125,7 +125,7 @@ async function main() { // Ok, this is a non-broken, external, not-excluded link. Let's cache it. knownGoodUrls.add(result.url.resolved); }, - } + }, ); checker.enqueue('http://localhost:6415', {}); return donePromise; diff --git a/packages/lit-dev-tests/src/check-no-todos.ts b/packages/lit-dev-tests/src/check-no-todos.ts index 59e1139f5..90f961808 100644 --- a/packages/lit-dev-tests/src/check-no-todos.ts +++ b/packages/lit-dev-tests/src/check-no-todos.ts @@ -27,7 +27,7 @@ const siteOutputDir = pathLib.resolve( '../', '../', 'lit-dev-content', - '_site' + '_site', ); const api_pages_to_check = [ @@ -63,12 +63,12 @@ const checkNoTodos = async () => { console.log(); if (fail) { console.log( - `${bold + red}Found TODOs in generated API documentation!${reset}` + `${bold + red}Found TODOs in generated API documentation!${reset}`, ); process.exit(1); } else { console.error( - `${bold + green}Generated API does not contain any TODOs!${reset}` + `${bold + green}Generated API does not contain any TODOs!${reset}`, ); } }; diff --git a/packages/lit-dev-tests/src/check-redirects.ts b/packages/lit-dev-tests/src/check-redirects.ts index ed493ac44..bd7b655f3 100644 --- a/packages/lit-dev-tests/src/check-redirects.ts +++ b/packages/lit-dev-tests/src/check-redirects.ts @@ -40,11 +40,11 @@ const siteOutputDir = pathLib.resolve( '../', '../', 'lit-dev-content', - '_site' + '_site', ); const checkRedirect = async ( - redirect: string + redirect: string, ): Promise => { if (isAbsoluteUrl(redirect)) { // Remote URLs. @@ -64,11 +64,11 @@ const checkRedirect = async ( const {pathname, hash} = new URL(redirect, 'http://lit.dev'); const indexHtmlPath = pathLib.relative( process.cwd(), - pathLib.join(siteOutputDir, trimTrailingSlash(pathname), 'index.html') + pathLib.join(siteOutputDir, trimTrailingSlash(pathname), 'index.html'), ); const directPath = pathLib.relative( process.cwd(), - pathLib.join(siteOutputDir, trimTrailingSlash(pathname)) + pathLib.join(siteOutputDir, trimTrailingSlash(pathname)), ); let data; try { @@ -119,13 +119,13 @@ const checkAllRedirects = async () => { } else { console.log(); console.log( - `${bold + red}BROKEN REDIRECT${reset} ${yellow + target + reset}` + `${bold + red}BROKEN REDIRECT${reset} ${yellow + target + reset}`, ); console.log(result); console.log(); fail = true; } - })() + })(), ); } await Promise.all(promises); diff --git a/packages/lit-dev-tests/src/playwright/components-styles.spec.ts b/packages/lit-dev-tests/src/playwright/components-styles.spec.ts index 81f1b86be..74a1b71d6 100644 --- a/packages/lit-dev-tests/src/playwright/components-styles.spec.ts +++ b/packages/lit-dev-tests/src/playwright/components-styles.spec.ts @@ -17,12 +17,12 @@ function runTests(dark: boolean) { dark ? ' - dark' : '' }`, async ({page}) => { await page.goto( - '/docs/components/styles/#inheriting-styles-from-a-superclass' + '/docs/components/styles/#inheriting-styles-from-a-superclass', ); // Wait for the exact playground preview we want to load. await page.waitForSelector( - 'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview [part="preview-loading-indicator"][aria-hidden="true"]' + 'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview [part="preview-loading-indicator"][aria-hidden="true"]', ); // Wait for the loading bar to fade out. await page.waitForTimeout(250); @@ -32,11 +32,11 @@ function runTests(dark: boolean) { await expect( await page .locator( - 'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview' + 'litdev-example[project="v3-docs/components/style/superstyles"] playground-preview', ) - .screenshot() + .screenshot(), ).toMatchSnapshot( - `inheritingStylesPlaygroundPreview${dark ? '-dark' : ''}.png` + `inheritingStylesPlaygroundPreview${dark ? '-dark' : ''}.png`, ); }); }); diff --git a/packages/lit-dev-tests/src/playwright/home.spec.ts b/packages/lit-dev-tests/src/playwright/home.spec.ts index f8cfe6574..03d61fa5c 100644 --- a/packages/lit-dev-tests/src/playwright/home.spec.ts +++ b/packages/lit-dev-tests/src/playwright/home.spec.ts @@ -14,7 +14,7 @@ function runScreenshotTests(dark: boolean) { await page.goto('/'); await waitForTheme(page, dark); await expect(await page.locator('#intro').screenshot()).toMatchSnapshot( - `homePageIntroSection${dark ? '-dark' : ''}.png` + `homePageIntroSection${dark ? '-dark' : ''}.png`, ); }); @@ -22,7 +22,7 @@ function runScreenshotTests(dark: boolean) { await page.goto('/'); await waitForTheme(page, dark); await expect( - await page.locator('litdev-cookie-banner').screenshot() + await page.locator('litdev-cookie-banner').screenshot(), ).toMatchSnapshot(`homePageCookiesBanner${dark ? '-dark' : ''}.png`); }); }); @@ -32,7 +32,7 @@ test.describe('Home page', () => { test('splashLogo accessible.', async ({page}) => { await page.goto('/'); expect(await page.locator('#splashLogo').getAttribute('role')).toBe( - 'heading' + 'heading', ); const homePageImg = page.locator('#splashLogo > svg'); expect(await homePageImg.getAttribute('aria-label')).toBe('Lit'); @@ -41,7 +41,7 @@ test.describe('Home page', () => { test('search site input basic functionality works', async ({page}) => { await page.goto('/'); const searchButton = page.locator( - '#desktopNav litdev-search-modal > button' + '#desktopNav litdev-search-modal > button', ); const searchInput = page.locator('#desktopNav litdev-search input'); @@ -58,44 +58,44 @@ test.describe('Home page', () => { // Playwright pierces shadow dom by default. await page.waitForSelector( - '.group:nth-of-type(1) litdev-search-option:nth-of-type(1)' + '.group:nth-of-type(1) litdev-search-option:nth-of-type(1)', ); // section title and type should be correct await expect( - page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .title') + page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .title'), ).toHaveText('Lifecycle'); await expect( - page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .tag') + page.locator('.group:nth-of-type(1) .descriptor:nth-of-type(1) .tag'), ).toHaveText('Docs'); // First Result should be a document title not a subsection await expect( page.locator( - '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .title' - ) + '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .title', + ), ).toHaveText('Lifecycle'); await expect( page.locator( - '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .text' - ) + '.group:nth-of-type(1) litdev-search-option:nth-of-type(1) .text', + ), ).toHaveCount(0); // Second result should be a subsection await expect( page.locator( - '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .title' - ) + '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .title', + ), ).toHaveText('Reactive update cycle'); await expect( page.locator( - '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .text' - ) + '.group:nth-of-type(1) litdev-search-option:nth-of-type(2) .text', + ), ).not.toBeEmpty(); // click on the subsection await page.click( - '.group:nth-of-type(1) litdev-search-option:nth-of-type(2)' + '.group:nth-of-type(1) litdev-search-option:nth-of-type(2)', ); await expect(page.locator('#reactive-update-cycle')).toBeVisible(); diff --git a/packages/lit-dev-tests/src/playwright/learn.spec.ts b/packages/lit-dev-tests/src/playwright/learn.spec.ts index 369ac0118..47561b176 100644 --- a/packages/lit-dev-tests/src/playwright/learn.spec.ts +++ b/packages/lit-dev-tests/src/playwright/learn.spec.ts @@ -20,7 +20,7 @@ function runScreenshotTests(dark: boolean) { await page.goto('/learn/'); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `learnCatalog${dark ? '-dark' : ''}.png` + `learnCatalog${dark ? '-dark' : ''}.png`, ); }); }); diff --git a/packages/lit-dev-tests/src/playwright/playground.spec.ts b/packages/lit-dev-tests/src/playwright/playground.spec.ts index 71360ce3e..191114d23 100644 --- a/packages/lit-dev-tests/src/playwright/playground.spec.ts +++ b/packages/lit-dev-tests/src/playwright/playground.spec.ts @@ -45,7 +45,7 @@ function runScreenshotTests(dark: boolean) { await preventGDPRBanner(page); await browserPage.goto('http://localhost:6417/reset'); expect(await browserPage.textContent('body')).toEqual( - 'fake github successfully reset' + 'fake github successfully reset', ); await browserPage.close(); }); @@ -61,9 +61,9 @@ function runScreenshotTests(dark: boolean) { await expect( await page .locator('main > litdev-playground-page > #content') - .screenshot() + .screenshot(), ).toMatchSnapshot( - `helloWorldPlaygroundProject${dark ? '-dark' : ''}.png` + `helloWorldPlaygroundProject${dark ? '-dark' : ''}.png`, ); }); @@ -81,7 +81,7 @@ function runScreenshotTests(dark: boolean) { await page.click('litdev-playground-share-button'); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareLongUrl-1-shareMenuOpen${dark ? '-dark' : ''}.png` + `shareLongUrl-1-shareMenuOpen${dark ? '-dark' : ''}.png`, ); // Save the long URL @@ -92,11 +92,11 @@ function runScreenshotTests(dark: boolean) { 'litdev-playground-share-button litdev-flyout', { state: 'hidden', - } + }, ); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareLongUrl-2-snackbarOpen${dark ? '-dark' : ''}.png` + `shareLongUrl-2-snackbarOpen${dark ? '-dark' : ''}.png`, ); // Reload the page to confirm the new content is still there @@ -104,7 +104,7 @@ function runScreenshotTests(dark: boolean) { await waitForPlaygroundPreviewToLoad(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareLongUrl-3-pageReloaded${dark ? '-dark' : ''}.png` + `shareLongUrl-3-pageReloaded${dark ? '-dark' : ''}.png`, ); }); @@ -124,11 +124,11 @@ function runScreenshotTests(dark: boolean) { 'litdev-playground-share-button litdev-flyout', { state: 'visible', - } + }, ); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-1-shareMenuOpen${dark ? '-dark' : ''}.png` + `shareGist-1-shareMenuOpen${dark ? '-dark' : ''}.png`, ); // Sign in to GitHub @@ -136,7 +136,7 @@ function runScreenshotTests(dark: boolean) { await page.waitForSelector('#createNewGistButton', {state: 'visible'}); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-2-signedIn${dark ? '-dark' : ''}.png` + `shareGist-2-signedIn${dark ? '-dark' : ''}.png`, ); // Save the gist @@ -148,12 +148,12 @@ function runScreenshotTests(dark: boolean) { 'litdev-playground-share-button litdev-flyout', { state: 'hidden', - } + }, ); await freezeSnackbars(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-3-snackbarOpen${dark ? '-dark' : ''}.png` + `shareGist-3-snackbarOpen${dark ? '-dark' : ''}.png`, ); // Reload the page to confirm the new content is still there @@ -161,7 +161,7 @@ function runScreenshotTests(dark: boolean) { await waitForPlaygroundPreviewToLoad(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-4-pageReloaded${dark ? '-dark' : ''}.png` + `shareGist-4-pageReloaded${dark ? '-dark' : ''}.png`, ); // Type some more content @@ -178,7 +178,7 @@ function runScreenshotTests(dark: boolean) { await page.keyboard.type('new-name.ts'); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-5-renamingFile${dark ? '-dark' : ''}.png` + `shareGist-5-renamingFile${dark ? '-dark' : ''}.png`, ); await page.keyboard.press('Enter'); @@ -188,7 +188,7 @@ function runScreenshotTests(dark: boolean) { await page.keyboard.type('empty.txt'); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-6-addingFile${dark ? '-dark' : ''}.png` + `shareGist-6-addingFile${dark ? '-dark' : ''}.png`, ); await page.keyboard.press('Enter'); @@ -199,11 +199,11 @@ function runScreenshotTests(dark: boolean) { 'litdev-playground-share-button litdev-flyout', { state: 'visible', - } + }, ); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-7-shareMenuOpenAgain${dark ? '-dark' : ''}.png` + `shareGist-7-shareMenuOpenAgain${dark ? '-dark' : ''}.png`, ); // Update the gist @@ -216,11 +216,11 @@ function runScreenshotTests(dark: boolean) { 'litdev-playground-share-button litdev-flyout', { state: 'hidden', - } + }, ); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-8-gistUpdated${dark ? '-dark' : ''}.png` + `shareGist-8-gistUpdated${dark ? '-dark' : ''}.png`, ); // Reload the page again to confirm the updated content is there @@ -228,7 +228,7 @@ function runScreenshotTests(dark: boolean) { await waitForPlaygroundPreviewToLoad(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `shareGist-9-pageReloadedAgain${dark ? '-dark' : ''}.png` + `shareGist-9-pageReloadedAgain${dark ? '-dark' : ''}.png`, ); }); @@ -241,7 +241,7 @@ function runScreenshotTests(dark: boolean) { // Open the share menu await page.click('litdev-playground-share-button'); await page.waitForSelector( - 'litdev-playground-share-button litdev-flyout' + 'litdev-playground-share-button litdev-flyout', ); // Click share @@ -260,7 +260,7 @@ function runScreenshotTests(dark: boolean) { await freezeDialogs(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `userDeclinesGithubAuth${dark ? '-dark' : ''}.png` + `userDeclinesGithubAuth${dark ? '-dark' : ''}.png`, ); }); @@ -273,7 +273,7 @@ function runScreenshotTests(dark: boolean) { // Open the share menu await page.click('litdev-playground-share-button'); await page.waitForSelector( - 'litdev-playground-share-button litdev-flyout' + 'litdev-playground-share-button litdev-flyout', ); // Click share @@ -291,7 +291,7 @@ function runScreenshotTests(dark: boolean) { await freezeDialogs(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `userClosesGitHubAuthWindowTooEarly${dark ? '-dark' : ''}.png` + `userClosesGitHubAuthWindowTooEarly${dark ? '-dark' : ''}.png`, ); }); @@ -304,7 +304,7 @@ function runScreenshotTests(dark: boolean) { await freezeDialogs(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `gistDoesNotExist${dark ? '-dark' : ''}.png` + `gistDoesNotExist${dark ? '-dark' : ''}.png`, ); }); @@ -323,7 +323,7 @@ function runScreenshotTests(dark: boolean) { // Open the share menu await page.click('litdev-playground-share-button'); await page.waitForSelector( - 'litdev-playground-share-button litdev-flyout' + 'litdev-playground-share-button litdev-flyout', ); // Sign in to GitHub @@ -340,7 +340,7 @@ function runScreenshotTests(dark: boolean) { await closeSnackbars(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `backendErrorWritingGist${dark ? '-dark' : ''}.png` + `backendErrorWritingGist${dark ? '-dark' : ''}.png`, ); }); }); @@ -351,7 +351,7 @@ test.describe('Playground', () => { const browserPage = await browser.newPage(); await browserPage.goto('http://localhost:6417/reset'); expect(await browserPage.textContent('body')).toEqual( - 'fake github successfully reset' + 'fake github successfully reset', ); await browserPage.close(); }); @@ -362,26 +362,26 @@ test.describe('Playground', () => { await waitForPlaygroundPreviewToLoad(page); const greetingExample = page.locator( - '#exampleContent > div:nth-child(1) > ul > li:nth-child(1)' + '#exampleContent > div:nth-child(1) > ul > li:nth-child(1)', ); await expect(greetingExample).toHaveClass('exampleItem active'); const codeEditor = page.locator('playground-code-editor #focusContainer'); expect( ((await codeEditor.textContent()) ?? '').includes( - `@customElement('simple-greeting')` - ) + `@customElement('simple-greeting')`, + ), ).toBe(true); const playgroundPreviewFrame = (await (await page .locator('playground-preview iframe') .elementHandle())!.contentFrame())!; await expect( - playgroundPreviewFrame.locator('simple-greeting p')! + playgroundPreviewFrame.locator('simple-greeting p')!, ).toHaveText('Hello, World!'); await expect(playgroundPreviewFrame.locator('simple-greeting p')).toHaveCSS( 'color', - 'rgb(0, 0, 255)' + 'rgb(0, 0, 255)', ); }); @@ -402,11 +402,11 @@ test.describe('Playground', () => { .locator('playground-preview iframe') .elementHandle())!.contentFrame())!; await expect( - playgroundPreviewFrame.locator('simple-greeting p') + playgroundPreviewFrame.locator('simple-greeting p'), ).toHaveText('Hello, World!'); await expect(playgroundPreviewFrame.locator('simple-greeting p')).toHaveCSS( 'color', - 'rgb(255, 0, 0)' + 'rgb(255, 0, 0)', ); }); @@ -433,7 +433,7 @@ test.describe('Playground', () => { // On the next Ctrl+S, the long URL share should happen automatically await page.keyboard.press(`${modifierKey}+S`); await page.waitForURL( - (url) => url.href.match(/#project=/) !== null && url.href !== firstUrl + (url) => url.href.match(/#project=/) !== null && url.href !== firstUrl, ); expect(await readClipboardText(page)).toMatch(page.url()); }); diff --git a/packages/lit-dev-tests/src/playwright/tutorials.spec.ts b/packages/lit-dev-tests/src/playwright/tutorials.spec.ts index 1253dc10d..c39a6eb43 100644 --- a/packages/lit-dev-tests/src/playwright/tutorials.spec.ts +++ b/packages/lit-dev-tests/src/playwright/tutorials.spec.ts @@ -22,7 +22,7 @@ function runScreenshotTests(dark: boolean) { await waitForPlaygroundPreviewToLoad(page); await waitForTheme(page, dark); await expect(await page.screenshot()).toMatchSnapshot( - `introToLitTutorialFirstStep${dark ? '-dark' : ''}.png` + `introToLitTutorialFirstStep${dark ? '-dark' : ''}.png`, ); }); }); diff --git a/packages/lit-dev-tests/src/playwright/unversioned.spec.ts b/packages/lit-dev-tests/src/playwright/unversioned.spec.ts index cc91d426d..ec57e149d 100644 --- a/packages/lit-dev-tests/src/playwright/unversioned.spec.ts +++ b/packages/lit-dev-tests/src/playwright/unversioned.spec.ts @@ -62,7 +62,7 @@ test.describe('Unversioned docs', () => { // unversioned page should not have a canonical link. await expect(unversionedPage.locator('link[rel="canonical"]')).toHaveCount( - 0 + 0, ); }); @@ -77,7 +77,7 @@ test.describe('Unversioned docs', () => { }); await expect(gettingStartedLocator).toHaveAttribute( 'href', - '/docs/composition/overview/' + '/docs/composition/overview/', ); }); @@ -97,21 +97,21 @@ test.describe('Unversioned docs', () => { 'article#content table a', { hasText: '@property', - } + }, ); const unversionedPropertyDecoratorLink = unversionedPage.locator( 'article#content table a', { hasText: '@property', - } + }, ); await expect(versionedPropertyDecoratorLink).toHaveAttribute( 'href', - `/docs/${SITE_LATEST_VERSION}/api/decorators#property` + `/docs/${SITE_LATEST_VERSION}/api/decorators#property`, ); await expect(unversionedPropertyDecoratorLink).toHaveAttribute( 'href', - `/docs/api/decorators#property` + `/docs/api/decorators#property`, ); }); }); diff --git a/packages/lit-dev-tests/src/playwright/util.ts b/packages/lit-dev-tests/src/playwright/util.ts index 37a9ca973..2140ff659 100644 --- a/packages/lit-dev-tests/src/playwright/util.ts +++ b/packages/lit-dev-tests/src/playwright/util.ts @@ -48,9 +48,15 @@ export async function waitForPlaygroundPreviewToLoad(page: Page) { return true; }, iframe); // Hide the animated loading indicator. - await page.evaluate((el) => { - el.style.visibility = 'hidden'; - }, await page.waitForSelector('playground-preview [part="preview-loading-indicator"]', {state: 'attached'})); + await page.evaluate( + (el) => { + el.style.visibility = 'hidden'; + }, + await page.waitForSelector( + 'playground-preview [part="preview-loading-indicator"]', + {state: 'attached'}, + ), + ); } interface MwcSnackbar extends HTMLElement { @@ -67,7 +73,7 @@ export async function freezeSnackbars(page: Page) { await page.evaluate((snackbar) => { (snackbar as MwcSnackbar).timeoutMs = -1; const surface = snackbar.shadowRoot?.querySelector( - '.mdc-snackbar__surface' + '.mdc-snackbar__surface', ); if (surface) { (surface as HTMLElement).style.transition = 'none'; diff --git a/packages/lit-dev-tools-cjs/src/api-docs/generate.ts b/packages/lit-dev-tools-cjs/src/api-docs/generate.ts index 6405edd21..af3ef19fe 100644 --- a/packages/lit-dev-tools-cjs/src/api-docs/generate.ts +++ b/packages/lit-dev-tools-cjs/src/api-docs/generate.ts @@ -46,7 +46,7 @@ const clone = async ({repo, gitDir, commit}: ApiDocsConfig) => { await execFileAsync( 'git', ['remote', 'add', 'origin', `https://github.com/${repo}`], - {cwd: gitDir} + {cwd: gitDir}, ); await execFileAsync('git', ['fetch', 'origin', '--depth=1', commit], { cwd: gitDir, @@ -104,7 +104,7 @@ const analyze = async (config: ApiDocsConfig) => { const json = await app.serializer.projectToObject( root, - pathlib.resolve(config.tsConfigPath, '..') + pathlib.resolve(config.tsConfigPath, '..'), ); const transformer = new ApiDocsTransformer(json, config); const {pages, symbolMap} = await transformer.transform(); @@ -113,7 +113,7 @@ const analyze = async (config: ApiDocsConfig) => { await fs.writeFile( config.pagesOutPath, JSON.stringify(pages, null, 2), - 'utf8' + 'utf8', ); console.log(`Wrote ${config.pagesOutPath}`); @@ -121,7 +121,7 @@ const analyze = async (config: ApiDocsConfig) => { await fs.writeFile( config.symbolsOutPath, JSON.stringify(symbolMap, null, 2), - 'utf8' + 'utf8', ); console.log(`Wrote ${config.symbolsOutPath}`); }; diff --git a/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts b/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts index 2ebd0f1f6..caf2ed0a5 100644 --- a/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts +++ b/packages/lit-dev-tools-cjs/src/api-docs/transformer.spec.ts @@ -112,7 +112,7 @@ const simpleTests: Array<[TestLabel, Input, Expected]> = [ ]; simpleTests.forEach(([label, input, expected]: [TestLabel, Input, Expected]) => - test(label, () => assert.equal(simpleReplacer(input), expected)) + test(label, () => assert.equal(simpleReplacer(input), expected)), ); test('[[`symbol`]] hyperlink with node context', () => { @@ -128,7 +128,7 @@ test('[[`symbol`]] hyperlink with node context', () => { assert.equal( r('[[`attributeChangedCallback`]]'), - '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)' + '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)', ); }); @@ -145,7 +145,7 @@ test('@linkcode hyperlink with node context', () => { assert.equal( r('{@linkcode attributeChangedCallback}'), - '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)' + '[`attributeChangedCallback`](LitElement#LitElement.attributeChangedCallback)', ); }); diff --git a/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts b/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts index 7b508e48c..fb3b45087 100644 --- a/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts +++ b/packages/lit-dev-tools-cjs/src/api-docs/transformer.ts @@ -21,7 +21,7 @@ import {ReflectionKind} from 'typedoc'; const findIndexOrInfinity = ( array: ReadonlyArray, - match: (el: T) => boolean + match: (el: T) => boolean, ) => { const idx = array.findIndex(match); return idx === -1 ? Infinity : idx; @@ -96,7 +96,7 @@ export class ApiDocsTransformer { constructor( project: typedoc.JSONOutput.ProjectReflection, - config: ApiDocsConfig + config: ApiDocsConfig, ) { this.project = project; this.config = config; @@ -132,7 +132,7 @@ export class ApiDocsTransformer { this.replaceCommentNodesWithLegacyCommentFields(node); this.reflectionById.set(node.id, node); node.children = (node.children ?? []).filter((child) => - this.filter(child) + this.filter(child), ); ancestry.push(node); for (const child of node.children) { @@ -217,7 +217,7 @@ export class ApiDocsTransformer { this.expandAndMergeCategoryReferences(node); this.linkifySymbolsInComments(node); node.children = (node.children ?? []).filter( - (child) => !duplicateExportIdsToRemove.has(child.id) + (child) => !duplicateExportIdsToRemove.has(child.id), ); for (const child of node.children) { secondPassVisit(child); @@ -258,7 +258,7 @@ export class ApiDocsTransformer { */ private choosePageLocation( node: DeclarationReflection, - ancestry: Array + ancestry: Array, ) { if (!node.kind || node.kind === typedoc.ReflectionKind.Module) { return; @@ -522,7 +522,7 @@ export class ApiDocsTransformer { * mixed types, and with fully expanded reflections. */ private expandAndMergeCategoryReferences( - node: ExtendedDeclarationReflection + node: ExtendedDeclarationReflection, ) { for (const group of node.groups ?? []) { for (const category of group.categories ?? []) { @@ -532,7 +532,7 @@ export class ApiDocsTransformer { const anchor = node.name + '/' + name; node.expandedCategories ??= []; let cat = node.expandedCategories.find( - (category) => category.anchor === anchor + (category) => category.anchor === anchor, ); if (cat === undefined) { cat = { @@ -555,7 +555,7 @@ export class ApiDocsTransformer { } if (node.expandedCategories) { node.expandedCategories.sort(({title: a}, {title: b}) => - a.localeCompare(b) + a.localeCompare(b), ); for (const category of node.expandedCategories) { category.children.sort(this.symbolSortFn); @@ -569,7 +569,7 @@ export class ApiDocsTransformer { */ symbolSortFn = ( a: DeclarationReflection, - b: DeclarationReflection + b: DeclarationReflection, ): number => { // By entrypoint (e.g. a type from a directive module should be adjacent to // the directive function). @@ -587,12 +587,12 @@ export class ApiDocsTransformer { const idxA = findIndexOrInfinity( this.config.symbolOrder, (s) => - s === (a as ExtendedDeclarationReflection).location?.anchor ?? a.name + s === (a as ExtendedDeclarationReflection).location?.anchor ?? a.name, ); const idxB = findIndexOrInfinity( this.config.symbolOrder, (s) => - s === (b as ExtendedDeclarationReflection).location?.anchor ?? b.name + s === (b as ExtendedDeclarationReflection).location?.anchor ?? b.name, ); if (idxA !== idxB) { return idxA - idxB; @@ -615,7 +615,7 @@ export class ApiDocsTransformer { * our HTML template understands. */ private replaceCommentNodesWithLegacyCommentFields( - node: DeclarationReflection + node: DeclarationReflection, ) { if (node.comment) { this.replaceCommentNodeForLegacyFormat(node.comment); @@ -670,7 +670,7 @@ export class ApiDocsTransformer { throw new Error( `Unhandled inline-tag format: '${ part.tag - }' for part: ${JSON.stringify(part)}` + }' for part: ${JSON.stringify(part)}`, ); } } @@ -759,7 +759,7 @@ export class ApiDocsTransformer { private async makeSourceRelativeToMonorepoRoot(source: SourceReference) { source.fileName = pathlib.relative( this.config.gitDir, - pathlib.resolve(this.config.typedocRoot, '..', source.fileName) + pathlib.resolve(this.config.typedocRoot, '..', source.fileName), ); } @@ -776,7 +776,7 @@ export class ApiDocsTransformer { } const mapFilename = pathlib.join( this.config.gitDir, - source.fileName + '.map' + source.fileName + '.map', ); let mapStr; try { @@ -799,7 +799,7 @@ export class ApiDocsTransformer { } source.fileName = pathlib.join( pathlib.dirname(source.fileName), - pos.source + pos.source, ); source.line = pos.line ?? 0; source.character = pos.column ?? 0; @@ -841,7 +841,7 @@ export class ApiDocsTransformer { let page = slugToPage.get(location.page); if (page === undefined) { const match = this.config.pages.find( - ({slug}) => slug === location.page + ({slug}) => slug === location.page, ); if (!match) { throw new Error(`No page definition for ${location.page}`); @@ -864,11 +864,11 @@ export class ApiDocsTransformer { pagesArray.sort(({slug: a}, {slug: b}) => { const idxA = findIndexOrInfinity( this.config.pages, - ({slug}) => slug === a + ({slug}) => slug === a, ); const idxB = findIndexOrInfinity( this.config.pages, - ({slug}) => slug === b + ({slug}) => slug === b, ); if (idxA !== idxB) { return idxA - idxB; @@ -939,7 +939,7 @@ export function linkifySymbolsInCommentsBuilder({ if (results && results.length === 1) { return `[${hyperlinkTextFormat(label || symbol)}](${locationToUrl( - results[0] + results[0], )})`; } return hyperlinkTextFormat(label || symbol); @@ -950,6 +950,6 @@ export function linkifySymbolsInCommentsBuilder({ .replace(/\[\[[\s`]*(.+?)(?:[\s`]*\|[\s`]*(.+?))?[\s`]*\]\]/g, replacer) .replace( /\{\@(?:link\b|linkcode\b)[\s`]*(.+?)(?:[\s`]*[\|\s][\s`]*(.+?))?[\s`]*\}/g, - replacer + replacer, ); } diff --git a/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts b/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts index 2c9be59e3..f1fb0f041 100644 --- a/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts +++ b/packages/lit-dev-tools-cjs/src/lit-dev-environments.ts @@ -40,7 +40,7 @@ const integerEnv = (name: string): number => { if (!val || val.match(/^\d+$/) === null) { throw new Error( `Expected environment variable ${name} to be an integer` + - ` but was ${JSON.stringify(val)}.` + ` but was ${JSON.stringify(val)}.`, ); } return Number(val); @@ -55,7 +55,7 @@ const stringEnv = (name: string): string => { if (!val) { throw new Error( `Expected environment variable ${name} to be set and non-empty` + - ` but was ${JSON.stringify(val)}.` + ` but was ${JSON.stringify(val)}.`, ); } return val; @@ -226,7 +226,7 @@ export const getEnvironment = (): LitDevEnvironment => { throw new Error( `Expected environment variable LITDEV_ENV to be` + ` one of ${Object.keys(environments).join(', ')},` + - ` but was ${JSON.stringify(name)}.` + ` but was ${JSON.stringify(name)}.`, ); } return env; diff --git a/packages/lit-dev-tools-cjs/src/playground-inline.ts b/packages/lit-dev-tools-cjs/src/playground-inline.ts index 6ecf49594..8360cf2fd 100644 --- a/packages/lit-dev-tools-cjs/src/playground-inline.ts +++ b/packages/lit-dev-tools-cjs/src/playground-inline.ts @@ -15,7 +15,7 @@ import {ProjectManifest} from 'playground-elements/shared/worker-api.js'; * original project files. */ export const inlinePlaygroundFilesIntoManifests = async ( - globPattern: string + globPattern: string, ) => { const files = (await glob(globPattern)) as string[]; const toDelete = new Set(); @@ -37,7 +37,7 @@ export const inlinePlaygroundFilesIntoManifests = async ( if (updated !== manifestStr) { await fs.writeFile(manifestPath, updated, 'utf8'); } - }) + }), ); // Delete files after inlining, in case two manifests referenced the same file diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts index 94fdf759e..dd7e1beca 100644 --- a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts +++ b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer-worker.ts @@ -39,7 +39,7 @@ workerthreads.parentPort.on('message', (msg: WorkerMessage) => { default: throw unreachable( msg, - `Unknown or missing message type: ${(msg as WorkerMessage).type}` + `Unknown or missing message type: ${(msg as WorkerMessage).type}`, ); } }); @@ -56,7 +56,7 @@ const onRender = async (msg: Render) => { if (length > shared.htmlBuffer.length) { throw new Error( `Shared HTML buffer was too short ` + - `(${shared.htmlBuffer.length} < ${html.length} bytes)` + `(${shared.htmlBuffer.length} < ${html.length} bytes)`, ); } shared.htmlBufferLength[0] = length; diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts index 3225ef97f..4e2860e4b 100644 --- a/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts +++ b/packages/lit-dev-tools-cjs/src/playground-plugin/blocking-renderer.ts @@ -10,7 +10,7 @@ import * as fs from 'fs'; const cachedHighlightsDir = pathlib.resolve( __dirname, - '../../.highlights_cache/' + '../../.highlights_cache/', ); export type WorkerMessage = HandshakeMessage | Render | Shutdown; @@ -100,18 +100,18 @@ export class BlockingRenderer { this.renderTimeout = renderTimeout; this.sharedHtml = new Uint8Array(new SharedArrayBuffer(maxHtmlBytes)); this.worker = new workerthreads.Worker( - pathlib.join(__dirname, 'blocking-renderer-worker.js') + pathlib.join(__dirname, 'blocking-renderer-worker.js'), ); this.worker.on('error', (error) => { throw new Error( - `BlockingRenderer worker encountered error: ${error.message}` + `BlockingRenderer worker encountered error: ${error.message}`, ); }); this.worker.on('exit', (code) => { this.exited = true; if (code !== 0) { throw new Error( - `BlockingRenderer worker unexpectedly exited with code ${code}` + `BlockingRenderer worker unexpectedly exited with code ${code}`, ); } }); @@ -145,7 +145,7 @@ export class BlockingRenderer { private getCachedRender(cachedFileName: string): string | null { const absoluteFilePath = pathlib.resolve( cachedHighlightsDir, - cachedFileName + cachedFileName, ); if (fs.existsSync(absoluteFilePath)) { return fs.readFileSync(absoluteFilePath, {encoding: 'utf8'}); @@ -156,7 +156,7 @@ export class BlockingRenderer { private writeCachedRender(cachedFileName: string, html: string) { const absoluteFilePath = pathlib.resolve( cachedHighlightsDir, - cachedFileName + cachedFileName, ); fs.writeFileSync(absoluteFilePath, html); } @@ -180,7 +180,7 @@ export class BlockingRenderer { private renderWithWorker( lang: 'js' | 'ts' | 'html' | 'css', - code: string + code: string, ): {html: string} { if (this.exited) { throw new Error('BlockingRenderer worker has already exited'); @@ -190,7 +190,7 @@ export class BlockingRenderer { Atomics.wait(this.sharedNotify, 0, 0, this.renderTimeout) === 'timed-out' ) { throw new Error( - `BlockingRenderer timed out waiting for worker to render ${lang}` + `BlockingRenderer timed out waiting for worker to render ${lang}`, ); } const raw = this.decoder.decode(this.sharedHtml); diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts index 0d970cf5c..f48e999d4 100644 --- a/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts +++ b/packages/lit-dev-tools-cjs/src/playground-plugin/plugin.ts @@ -17,11 +17,11 @@ export type AsideVariant = 'positive' | 'negative' | 'warn' | 'info' | 'labs'; interface EleventyConfig { addShortcode( name: string, - shortcode: (...args: any[]) => string | Promise + shortcode: (...args: any[]) => string | Promise, ): void | Promise; addPairedShortcode( name: string, - shortcode: (content: string, ...args: any[]) => string | Promise + shortcode: (content: string, ...args: any[]) => string | Promise, ): void; addMarkdownHighlighter(fn: (content: string, lang: any) => string): void; on(name: string, fn: () => void): void; @@ -33,7 +33,7 @@ interface EleventyConfig { */ const getNumVisibleLinesForProjectFile = async ( project: string, - filename: string + filename: string, ): Promise<{ts: number; js: number}> => { const tsData = await fs.readFile(`samples/${project}/${filename}`, 'utf8'); const tsLines = countVisibleLines(filename, tsData); @@ -42,7 +42,7 @@ const getNumVisibleLinesForProjectFile = async ( const jsFilename = filename.replace(/\.ts$/, '.js'); const jsData = await fs.readFile( `samples/js/${project}/${jsFilename}`, - 'utf8' + 'utf8', ); jsLines = countVisibleLines(jsFilename, jsData); } else { @@ -93,7 +93,7 @@ export const playgroundPlugin = ( sandboxUrl, isDevMode, cdnBaseUrl, - }: {sandboxUrl: string; isDevMode: boolean; cdnBaseUrl: string} + }: {sandboxUrl: string; isDevMode: boolean; cdnBaseUrl: string}, ) => { let renderer: BlockingRenderer | undefined; @@ -113,7 +113,7 @@ export const playgroundPlugin = ( if (!renderer) { throw new Error( 'Internal error: expected Playground renderer to have been ' + - 'initialized in "eleventy.before" event.' + 'initialized in "eleventy.before" event.', ); } const {html} = renderer.render(lang, outdent`${code}`); @@ -121,7 +121,7 @@ export const playgroundPlugin = ( }; const readProjectConfig = async ( - project: string + project: string, ): Promise => { const path = `samples/${project}/project.json`; @@ -131,7 +131,7 @@ export const playgroundPlugin = ( } catch (e) { throw new Error( `Invalid playground project "${project}". ` + - `Could not read file "${path}": ${e}` + `Could not read file "${path}": ${e}`, ); } @@ -140,7 +140,7 @@ export const playgroundPlugin = ( parsed = JSON.parse(json); } catch (e) { throw new Error( - `Invalid JSON in playground project config "${path}": ${e}` + `Invalid JSON in playground project config "${path}": ${e}`, ); } @@ -150,7 +150,7 @@ export const playgroundPlugin = ( await fs.readFile(filepath, 'utf8'); } catch (e) { throw new Error( - `Missing playground file "${filename}" in project "${project}": ${e}` + `Missing playground file "${filename}" in project "${project}": ${e}`, ); } } @@ -160,11 +160,11 @@ export const playgroundPlugin = ( eleventyConfig.addPairedShortcode( 'highlight', - (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang) + (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang), ); eleventyConfig.addMarkdownHighlighter( - (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang) + (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang), ); eleventyConfig.addShortcode( @@ -173,7 +173,7 @@ export const playgroundPlugin = ( if (!project) { throw new Error( `Invalid playground-ide invocation.` + - `Usage {% playground-ide "path/to/project" %}` + `Usage {% playground-ide "path/to/project" %}`, ); } project = trimTrailingSlash(project); @@ -181,7 +181,7 @@ export const playgroundPlugin = ( const firstFilename = Object.keys(config.files ?? {})[0]; const numVisibleLines = await getNumVisibleLinesForProjectFile( project, - firstFilename + firstFilename, ); const previewHeight = config.previewHeight ?? '120px'; // in the case `lazy` is false, we need to keep the ">" character on the @@ -197,7 +197,7 @@ export const playgroundPlugin = ( ${lazy ? 'lazy' : ''}> `.trim(); - } + }, ); type LitProjectConfig = ProjectManifest & { @@ -215,19 +215,19 @@ export const playgroundPlugin = ( if (!project || !filename) { throw new Error( `Invalid playground-example invocation.` + - `Usage {% playground-example "project/dir" "filename.js" %}` + `Usage {% playground-example "project/dir" "filename.js" %}`, ); } project = trimTrailingSlash(project); const config = await readProjectConfig(project); if (!config.files?.[filename]) { throw new Error( - `Could not find file "${filename}" in playground project "${project}"` + `Could not find file "${filename}" in playground project "${project}"`, ); } const numVisibleLines = await getNumVisibleLinesForProjectFile( project, - filename + filename, ); const previewHeight = config.previewHeight ?? '120px'; return ` @@ -241,7 +241,7 @@ export const playgroundPlugin = ( > `.trim(); - } + }, ); /** @@ -264,13 +264,13 @@ export const playgroundPlugin = ( */ eleventyConfig.addPairedShortcode('switchable-sample', (content: string) => { const match = content.match( - /^\s*\n\n\s*```ts\n(.+)\n\s*```\s+```js\n(.+)\n\s*```\s*$/s + /^\s*\n\n\s*```ts\n(.+)\n\s*```\s+```js\n(.+)\n\s*```\s*$/s, ); if (match === null) { throw new Error( 'Invalid {% switchable-sample %}.' + ' Expected one ```ts block followed by one ```js block.' + - ' There also must be a blank line between the {% switchable-sample %} and the ```ts block.' + ' There also must be a blank line between the {% switchable-sample %} and the ```ts block.', ); } return `${content}`; @@ -327,7 +327,7 @@ export const playgroundPlugin = ( variant, `Invalid {% aside ${variant} %}.` + ` variant "${variant}" is not an acceptable variant of:` + - ` ${acceptableVariants.join(', ')}.` + ` ${acceptableVariants.join(', ')}.`, ); } @@ -347,7 +347,7 @@ export const playgroundPlugin = ( `\n\n${contentIndent}` + `\n${contentIndent}` ); - } + }, ); eleventyConfig.addShortcode('labs-disclaimer', () => { @@ -357,7 +357,7 @@ export const playgroundPlugin = ( }); eleventyConfig.addMarkdownHighlighter( - (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang) + (code: string, lang: 'js' | 'ts' | 'html' | 'css') => render(code, lang), ); }; diff --git a/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts b/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts index abd826e34..7bbb18a15 100644 --- a/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts +++ b/packages/lit-dev-tools-cjs/src/playground-plugin/renderer.ts @@ -21,7 +21,7 @@ export class Renderer { private constructor( server: RendererServer, browser: playwright.Browser, - page: playwright.Page + page: playwright.Page, ) { this.server = server; this.browser = browser; @@ -41,7 +41,7 @@ export class Renderer { if (status < 200 || status >= 300) { console.error( `ERROR: playground-plugin renderer encountered HTTP ` + - `${status} error fetching ${response.url()}` + `${status} error fetching ${response.url()}`, ); } }); @@ -49,7 +49,7 @@ export class Renderer { page.on('pageerror', (error) => { console.error( `ERROR: playground-plugin renderer encountered page error: ` + - error.message + error.message, ); }); @@ -79,7 +79,7 @@ export class Renderer { async render( lang: 'html' | 'css' | 'js' | 'ts', - code: string + code: string, ): Promise<{html: string}> { if (this.stopped) { throw new Error('Renderer has already stopped'); @@ -110,7 +110,7 @@ export class Renderer { const cm = editor.shadowRoot.querySelector('.CodeMirror-code'); if (cm === null) { throw new Error( - ' did not render a ".CodeMirror-code" element' + ' did not render a ".CodeMirror-code" element', ); } // The final line is sometimes (always?) an empty line containing just @@ -124,7 +124,7 @@ export class Renderer { // Replace zero width newlines that don't copy paste well with a line // feed unicode character that pastes correctly. const codeLines = cm.querySelectorAll( - '.CodeMirror-line > span > span[cm-text]' + '.CodeMirror-line > span > span[cm-text]', ); for (const line of codeLines) { if (line?.textContent?.match(/^[\u200B]*$/)) { @@ -134,7 +134,7 @@ export class Renderer { return cm.innerHTML; }, - [lang, code] + [lang, code], ); const html = `
${codemirrorHtml}
`; return {html}; diff --git a/packages/lit-dev-tools-cjs/src/pre-compress.ts b/packages/lit-dev-tools-cjs/src/pre-compress.ts index f7e9526a0..ff8774059 100644 --- a/packages/lit-dev-tools-cjs/src/pre-compress.ts +++ b/packages/lit-dev-tools-cjs/src/pre-compress.ts @@ -102,24 +102,24 @@ export const preCompress = async (opts: {glob: string}) => { const mib = (b: number) => (b / 1024 / 1024).toFixed(2) + ' MiB'; console.log( `[Compress] Processed ${stats.numFiles} files (${mib( - stats.inBytes - )}) in ${seconds.toFixed(1)} seconds` + stats.inBytes, + )}) in ${seconds.toFixed(1)} seconds`, ); const brSaved = stats.brInBytes - stats.brOutBytes; const brRatio = stats.brInBytes / stats.brOutBytes; console.log( `[Compress] Created ${stats.brNumFiles} .br files / Ratio ${brRatio.toFixed( - 1 - )} to 1 / Saved ${mib(brSaved)}` + 1, + )} to 1 / Saved ${mib(brSaved)}`, ); const gzSaved = stats.gzInBytes - stats.gzOutBytes; const gzRatio = stats.gzInBytes / stats.gzOutBytes; console.log( `[Compress] Created ${stats.gzNumFiles} .gz files / Ratio ${gzRatio.toFixed( - 1 - )} to 1 / Saved ${mib(gzSaved)}` + 1, + )} to 1 / Saved ${mib(gzSaved)}`, ); }; diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts b/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts index 7e74856ff..cdd8ebf7b 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/PageSearchChunker.ts @@ -45,7 +45,7 @@ interface PageDataChunk { */ function dataChunktoSearchChunk( {heading, fragment, nodeCollection, isParent}: PageDataChunk, - title: string + title: string, ): PageSearchDataChunk { const withoutComments = stripcomments(nodeCollection.outerHTML); // Leave a space when removing tags so we don't accidentally concat text from @@ -105,11 +105,11 @@ export class PageSearchChunker { this.parsedPage.window.document.querySelector('article#content'); if (!article) { throw new Error( - `Expect every lit.dev page to have an article#content element.` + `Expect every lit.dev page to have an article#content element.`, ); } const removedSections = article.querySelectorAll( - 'nav#inlineToc, header.articleHeader' + 'nav#inlineToc, header.articleHeader', ); [...removedSections].forEach((section) => section.remove()); return article; @@ -165,7 +165,7 @@ export class PageSearchChunker { const headerText = possibleHeading.textContent; if (!headerText) { throw new Error( - `No textContent on header with fragment: '${fragment}'` + `No textContent on header with fragment: '${fragment}'`, ); } return this.newPageDataChunk({ diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts index f4ca1c9d1..25d75f030 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-api.ts @@ -11,18 +11,18 @@ export const indexApi = async (outputDir: string, idOffset = 0) => { const API_PATH = path.resolve( __dirname, // Load the unversioned api content. - `../../../../lit-dev-content/${outputDir}/docs/api` + `../../../../lit-dev-content/${outputDir}/docs/api`, ); const relativeLinksToHTMLFile: UrlToFile = await walkDir( API_PATH, new Map(), - outputDir + outputDir, ); return await docIndexer( relativeLinksToHTMLFile, {tag: 'api', type: 'API'}, - idOffset + idOffset, ); }; diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts index 2f73714ff..728683f18 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-articles.ts @@ -11,7 +11,7 @@ export const indexArticles = async (outputDir: string, idOffset = 0) => { const ARTICLES_PATH = path.resolve( __dirname, // Load the article content itself not the tags pages. - `../../../../lit-dev-content/${outputDir}/articles` + `../../../../lit-dev-content/${outputDir}/articles`, ); /** @@ -43,12 +43,12 @@ export const indexArticles = async (outputDir: string, idOffset = 0) => { ARTICLES_PATH, new Map(), outputDir, - skipFiles + skipFiles, ); return await docIndexer( relativeLinksToHTMLFile, {tag: 'article', type: 'Article'}, - idOffset + idOffset, ); }; diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts index 03460ce56..546fc4bba 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-docs.ts @@ -10,7 +10,7 @@ export const indexDocs = async (outputDir: string, idOffset = 0) => { // Root path of the starting point for indexing. const DOCS_PATH = path.resolve( __dirname, - `../../../../lit-dev-content/${outputDir}/docs` + `../../../../lit-dev-content/${outputDir}/docs`, ); /** @@ -45,12 +45,12 @@ export const indexDocs = async (outputDir: string, idOffset = 0) => { DOCS_PATH, new Map(), outputDir, - skipFiles + skipFiles, ); return await docIndexer( relativeLinksToHTMLFile, {tag: 'docs', type: 'Docs'}, - idOffset + idOffset, ); }; diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts index 887fb9840..39f3fa1dc 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-external-data.ts @@ -10,7 +10,7 @@ import type {UserFacingPageData} from '../plugin'; export async function indexExternalData( outputDir: '_dev' | '_site', - idOffset = 0 + idOffset = 0, ) { if (outputDir === '_dev') { return []; @@ -19,7 +19,7 @@ export async function indexExternalData( // Path of the external data index. const EXTERNAL_DATA_INDEX_PATH = path.resolve( __dirname, - `../../../../lit-dev-content/${outputDir}/search-modifiers/external-data.json` + `../../../../lit-dev-content/${outputDir}/search-modifiers/external-data.json`, ); const fileContents = await fs.readFile(EXTERNAL_DATA_INDEX_PATH, 'utf-8'); diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts index 5ca997b64..eb62504d7 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-tutorials.ts @@ -27,7 +27,7 @@ interface Tutorial { export const indexTutorials = async ( outputDir: string, - idOffset = 0 + idOffset = 0, ): Promise => { if (outputDir === '_dev') { return []; @@ -35,12 +35,12 @@ export const indexTutorials = async ( const TUTORIAL_PATH = path.resolve( __dirname, - `../../../../lit-dev-content/${outputDir}/tutorials` + `../../../../lit-dev-content/${outputDir}/tutorials`, ); // Pulls the metadata from all the tutorials rendered by 11ty. const tutorialJson: {tutorials: Tutorial[]} = JSON.parse( - await fs.readFile(path.join(TUTORIAL_PATH, 'tutorials.json'), 'utf-8') + await fs.readFile(path.join(TUTORIAL_PATH, 'tutorials.json'), 'utf-8'), ); let id = idOffset; @@ -82,7 +82,7 @@ export const indexTutorials = async ( // Get the step's description HTML content. const stepContent = await fs.readFile( path.join(tutorialPath, stepDir.name, 'index.html'), - 'utf-8' + 'utf-8', ); const jsdoc = new JSDOM(stepContent, {contentType: 'text/html'}); diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts b/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts index 9e0d89eca..f0af725c7 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/index-videos.ts @@ -16,7 +16,7 @@ export async function indexVideos(outputDir: '_dev' | '_site', idOffset = 0) { // Path of the video index. const VIDEO_INDEX_PATH = path.resolve( __dirname, - `../../../../lit-dev-content/${outputDir}/search-modifiers/videos.json` + `../../../../lit-dev-content/${outputDir}/search-modifiers/videos.json`, ); const fileContents = await fs.readFile(VIDEO_INDEX_PATH, 'utf-8'); diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts b/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts index da9cb6c5c..06c03c164 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/keywords.ts @@ -27,7 +27,7 @@ interface KeywordModifiers { */ export async function addKeywords( outputDir: '_dev' | '_site', - index: UserFacingPageData[] + index: UserFacingPageData[], ) { if (outputDir === '_dev') { return index; @@ -36,7 +36,7 @@ export async function addKeywords( // Path to the keyword modifiers JSON file. const KEYWORD_MODIFIERS_PATH = path.resolve( __dirname, - `../../../../lit-dev-content/${outputDir}/search-modifiers/keywords.json` + `../../../../lit-dev-content/${outputDir}/search-modifiers/keywords.json`, ); const fileContents = await fs.readFile(KEYWORD_MODIFIERS_PATH, 'utf-8'); diff --git a/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts b/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts index 6c6113ee0..d570cc4d9 100644 --- a/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts +++ b/packages/lit-dev-tools-cjs/src/search/indexers/utils.ts @@ -27,7 +27,7 @@ export const walkDir = async ( dir: string, results: UrlToFile, projectDir: string, - shouldSkip = (_path: string) => false + shouldSkip = (_path: string) => false, ): Promise => { const dirContents = await fs.readdir(dir); for (const contents of dirContents) { @@ -37,7 +37,7 @@ export const walkDir = async ( if (path.extname(contents) === '.html') { const basePath = path.resolve( __dirname, - `../../../../lit-dev-content/${projectDir}` + `../../../../lit-dev-content/${projectDir}`, ); const relPathBase = path.relative(basePath, dir); const relPath = path.join(relPathBase, contents); @@ -47,7 +47,7 @@ export const walkDir = async ( path.resolve(dir, contents), results, projectDir, - shouldSkip + shouldSkip, ); } } @@ -67,7 +67,7 @@ export const walkDir = async ( export const docIndexer = async ( relativeLinksToHTMLFile: UrlToFile, docType: DocType<'docs'> | DocType<'api'> | DocType<'article'>, - idOffset: number + idOffset: number, ) => { let id = idOffset; const searchIndex: UserFacingPageData[] = []; @@ -88,7 +88,7 @@ export const docIndexer = async ( // the search interface. if (parents.length !== 1) { throw new Error( - `Error finding parent page chunk for ${relUrl}. Potential parent chunks found: ${parents.length}` + `Error finding parent page chunk for ${relUrl}. Potential parent chunks found: ${parents.length}`, ); } @@ -99,7 +99,7 @@ export const docIndexer = async ( // parentID is indeed the current id. if (parent !== sanitizedPageChunks[0]) { throw new Error( - `Parent page chunk for ${relUrl} was not the first chunk.` + `Parent page chunk for ${relUrl} was not the first chunk.`, ); } @@ -133,7 +133,7 @@ export const docIndexer = async ( } catch (e: unknown) { throw new Error( `Failure while creating search index for page ` + - `'${relUrl}': ${(e as Error).message}` + `'${relUrl}': ${(e as Error).message}`, ); } } diff --git a/packages/lit-dev-tools-cjs/src/search/plugin.ts b/packages/lit-dev-tools-cjs/src/search/plugin.ts index a98e1a226..bd00218a5 100644 --- a/packages/lit-dev-tools-cjs/src/search/plugin.ts +++ b/packages/lit-dev-tools-cjs/src/search/plugin.ts @@ -58,13 +58,13 @@ export interface UserFacingPageData { export async function createSearchIndex(outputDir: '_dev' | '_site') { const OUT_PATH = path.resolve( __dirname, - `../../../lit-dev-content/${outputDir}/searchIndex.json` + `../../../lit-dev-content/${outputDir}/searchIndex.json`, ); const docs: UserFacingPageData[] = await indexDocs(outputDir); let idOffset = Number(docs[docs.length - 1].objectID); const articles: UserFacingPageData[] = await indexArticles( outputDir, - idOffset + idOffset, ); idOffset = Number(articles[articles.length - 1].objectID); @@ -73,7 +73,7 @@ export async function createSearchIndex(outputDir: '_dev' | '_site') { idOffset = Number(api[api.length - 1].objectID); const tutorials: UserFacingPageData[] = await indexTutorials( outputDir, - idOffset + idOffset, ); idOffset = Number(tutorials[tutorials.length - 1].objectID); @@ -82,7 +82,7 @@ export async function createSearchIndex(outputDir: '_dev' | '_site') { idOffset = Number(videos[videos.length - 1].objectID); const externalSearchData: UserFacingPageData[] = await indexExternalData( outputDir, - idOffset + idOffset, ); const searchIndex: UserFacingPageData[] = [ diff --git a/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts b/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts index 0610b8c42..d51824ce6 100644 --- a/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts +++ b/packages/lit-dev-tools-esm/src/build-unversioned-docs.ts @@ -27,13 +27,13 @@ const LATEST_VERSION_CONTENT = pathlib.resolve( CONTENT_PKG, 'site', 'docs', - SITE_LATEST_VERSION + SITE_LATEST_VERSION, ); const UNVERSIONED_VERSION_LOCATION = pathlib.resolve( CONTENT_PKG, 'site', 'docs', - 'unversioned' + 'unversioned', ); /** @@ -61,7 +61,7 @@ const buildAndTransformUnverionedDocs = async () => { } else { return transformFile(childPath); } - }) + }), ); }; @@ -83,26 +83,26 @@ async function transformFile(path: string) { let fileContents = await fs.readFile(path, {encoding: 'utf8'}); let unversionedLocation = pathlib.join( UNVERSIONED_VERSION_LOCATION, - relativeChildPath + relativeChildPath, ); switch (ext) { case '.md': const [frontMatterData, restOfFile] = getFrontMatterData(fileContents); const hasExistingPermalink = frontMatterData.find((val) => - val.includes('permalink:') + val.includes('permalink:'), ); if (hasExistingPermalink) { throw new Error( - `Unhandled case: Handle existing permalink in '${path}'` + `Unhandled case: Handle existing permalink in '${path}'`, ); } if (fileBasename === 'index') { frontMatterData.push( - `permalink: docs/${relativeChildPathWithoutExt}.html` + `permalink: docs/${relativeChildPathWithoutExt}.html`, ); } else { frontMatterData.push( - `permalink: docs/${relativeChildPathWithoutExt}/index.html` + `permalink: docs/${relativeChildPathWithoutExt}/index.html`, ); } @@ -117,7 +117,7 @@ async function transformFile(path: string) { if (fileBasename === SITE_LATEST_VERSION) { unversionedLocation = pathlib.join( pathlib.dirname(unversionedLocation), - 'unversioned.json' + 'unversioned.json', ); fileContents = JSON.stringify({ collection: 'docs-unversioned', @@ -146,8 +146,8 @@ async function transformFile(path: string) { console.log( `Writing: ${pathlib.relative( CONTENT_PKG, - unversionedLocation - )} from ${pathlib.relative(CONTENT_PKG, path)}` + unversionedLocation, + )} from ${pathlib.relative(CONTENT_PKG, path)}`, ); await fs.mkdir(pathlib.dirname(unversionedLocation), {recursive: true}); await fs.writeFile(unversionedLocation, fileContents); @@ -158,7 +158,7 @@ async function transformFile(path: string) { * parser. */ function getFrontMatterData( - fileData: string + fileData: string, ): [EleventyFrontMatterData, string] { const splitFile = fileData.split(/^---$/m); const frontMatterData = splitFile[1].split('\n').slice(1, -1); diff --git a/packages/lit-dev-tools-esm/src/dev-server.ts b/packages/lit-dev-tools-esm/src/dev-server.ts index 107c15ddb..f3595ee37 100644 --- a/packages/lit-dev-tools-esm/src/dev-server.ts +++ b/packages/lit-dev-tools-esm/src/dev-server.ts @@ -65,7 +65,7 @@ const removeWatchScriptFromPlaygroundFiles: DevServerPlugin = { return { body: (ctx.body as string).replace( / + value="this is the default value" + .tagLiteral=${this.tagLiteral} + > `; } #onChange(e: InputEvent) { const target = e.target as HTMLInputElement; - this.tagLiteral = target.value === 'input' ? literal`input` : literal`textarea`; + this.tagLiteral = + target.value === 'input' ? literal`input` : literal`textarea`; } - static styles = css`/* playground-fold */:host { font-family: sans-serif; } :host > * { margin-block: .5em; }/* playground-fold-end */`; + static styles = css` + /* playground-fold */ + :host { + font-family: sans-serif; + } + :host > * { + margin-block: 0.5em; + } /* playground-fold-end */ + `; } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts index e31973473..fea57fa24 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/classes/my-element.ts @@ -1,19 +1,19 @@ -import { html, LitElement, css } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; +import {html, LitElement, css} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; +import {classMap} from 'lit/directives/class-map.js'; @customElement('my-element') export class MyElement extends LitElement { - @state() counter = 0 + @state() counter = 0; firstUpdated() { - setInterval(() => this.counter += 1 , 1000); + setInterval(() => (this.counter += 1), 1000); } render() { const classes = { red: this.counter % 2 === 0, - blue: this.counter % 2 === 1 + blue: this.counter % 2 === 1, }; return html`

Hello!

`; } @@ -26,4 +26,4 @@ export class MyElement extends LitElement { color: blue; } `; -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts index 860091f41..5a2ab9e87 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/conditionals/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -14,13 +14,18 @@ export class MyElement extends LitElement { return html`
This is an inline ternary conditional
- ${this.someBoolean ? html`

Some other text

` : html`

Some text

`} + ${this.someBoolean + ? html`

Some other text

` + : html`

Some text

`}
This is a variable conditional
${someText} `; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts index 8bd747eee..b003176c3 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/my-element.ts @@ -1,6 +1,9 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import { trustedStyles, type CSSStyleSheet } from './trusted-stringified-css-source.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; +import { + trustedStyles, + type CSSStyleSheet, +} from './trusted-stringified-css-source.js'; // Use constructable stylesheets on TRUSTED CSS strings to use them in a LitElement const styles = new CSSStyleSheet(); @@ -11,10 +14,6 @@ const styles = new CSSStyleSheet(); export class MyElement extends LitElement { static styles = styles; render() { - return html` -
- This should be red! -
- `; + return html`
This should be red!
`; } } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts index fce4ea3be..9375f6e47 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/constructable-stylesheets/trusted-stringified-css-source.ts @@ -5,7 +5,7 @@ export const trustedStyles = ` `; // This may be needed for some older versions of TS -export type CSSStyleSheet = typeof globalThis['CSSStyleSheet'] & { +export type CSSStyleSheet = (typeof globalThis)['CSSStyleSheet'] & { replaceSync(cssText: string): void; replace(cssText: string): void; }; diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html index 63ef6c4b2..18cbd2eb8 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/index.html @@ -21,4 +21,4 @@
-
\ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts index 6fac25d2d..177b8c074 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/css-shadow-parts/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement, css } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement, css} from 'lit'; +import {customElement} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -15,4 +15,4 @@ export class MyElement extends LitElement { render() { return html`

This is in a shadow root!

`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html index d0fdb30d1..fb29bb482 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts index 40810f9c3..2cbe7942d 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/custom-attribute-converter/my-element.ts @@ -1,5 +1,6 @@ -import { html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js';import {ComplexAttributeConverter} from 'lit'; +import {html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {ComplexAttributeConverter} from 'lit'; /** * Bidirectionally converts an array from an attribute to a property of the @@ -17,17 +18,15 @@ export const arrayConverter: ComplexAttributeConverter> = { } catch { return []; } - } + }, }; @customElement('my-element') export class MyElement extends LitElement { - @property({ converter: arrayConverter, reflect: true }) - array: Array = []; + @property({converter: arrayConverter, reflect: true}) + array: Array = []; render() { - return this.array.map((item) => - html`
${typeof item}: ${item}
` - ); + return this.array.map((item) => html`
${typeof item}: ${item}
`); } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts index fdfdab6a8..cf8d0f3e4 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/game-player.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; export type ScoreEvent = CustomEvent; @@ -13,6 +13,8 @@ export class GamePlayer extends LitElement { } handleScore(points: number) { - this.dispatchEvent(new CustomEvent('score', { detail: points, bubbles: true })); + this.dispatchEvent( + new CustomEvent('score', {detail: points, bubbles: true}), + ); } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html index 0e004d712..bffc611c4 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts index 6a8d3dd36..07a611d27 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/data-up/score-board.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; import './game-player.js'; import type {ScoreEvent} from './game-player.js'; @@ -12,9 +12,13 @@ export class ScoreBoard extends LitElement { return html`

${this.playerOneScore} - ${this.playerTwoScore}

Player 1

- this.playerOneScore += e.detail}> + (this.playerOneScore += e.detail)} + >

Player 2

- this.playerTwoScore += e.detail}> + (this.playerTwoScore += e.detail)} + > `; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts index b4f5ba4d5..51799b93b 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/hello-world.ts @@ -1,9 +1,9 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; @customElement('hello-world') export class HelloWorld extends LitElement { render() { return html`

Hello, world!

`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html index c53974764..be6dad253 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/define/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts index 02705851a..437af20fc 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/derived-state/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html index e44dfda1c..eac65a81c 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/index.html @@ -1,5 +1,5 @@ - + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts index 26ba98f12..96634823c 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-qae/my-pretty-input.ts @@ -1,5 +1,10 @@ -import { html, LitElement, css } from 'lit'; -import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js'; +import {html, LitElement, css} from 'lit'; +import { + customElement, + property, + queryAssignedElements, + state, +} from 'lit/decorators.js'; @customElement('my-pretty-input') export class MyPrettyInput extends LitElement { @@ -43,24 +48,28 @@ export class MyPrettyInput extends LitElement { // get the array of assigned elements and pick the first one const input = this.inputs[0]; - input?.animate?.([ - { 'transform': 'scale(1)', easing: 'ease-out' }, - { 'transform': 'scale(2)', easing: 'ease-in' }, - { 'transform': 'scale(1)' } - ], - 1000); + input?.animate?.( + [ + {transform: 'scale(1)', easing: 'ease-out'}, + {transform: 'scale(2)', easing: 'ease-in'}, + {transform: 'scale(1)'}, + ], + 1000, + ); }; #onInputBlur = () => { this.inputFocused = false; const input = this.inputs[0]; - input?.animate?.([ - { 'transform': 'scale(1)', easing: 'ease-out' }, - { 'transform': 'scale(.75)', easing: 'ease-in' }, - { 'transform': 'scale(1)' } - ], - 1000); + input?.animate?.( + [ + {transform: 'scale(1)', easing: 'ease-out'}, + {transform: 'scale(.75)', easing: 'ease-in'}, + {transform: 'scale(1)'}, + ], + 1000, + ); }; #clearListeners() { @@ -72,7 +81,8 @@ export class MyPrettyInput extends LitElement { this.#lastInput = null; } - static styles = css`/* playground-fold */ + static styles = css` + /* playground-fold */ canvas { border: 1px solid black; } @@ -81,5 +91,6 @@ export class MyPrettyInput extends LitElement { display: block; margin-block-start: 1em; } - /* playground-fold-end */`; + /* playground-fold-end */ + `; } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts index 13e84b3a0..23f7b3f42 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query-async/my-element.ts @@ -1,12 +1,12 @@ -import { html, LitElement, css, PropertyValues } from 'lit'; -import { customElement, state, property, queryAsync } from 'lit/decorators.js'; +import {html, LitElement, css, PropertyValues} from 'lit'; +import {customElement, state, property, queryAsync} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @property({type: Boolean}) showCanvas = false; @state() private canvasText = 'Hello World!'; // You can use any querySelector selector - @queryAsync('#canvasId') private canvasEl!: Promise; + @queryAsync('#canvasId') private canvasEl!: Promise; protected update(changed: PropertyValues) { if (changed.has('showCanvas')) { @@ -19,14 +19,14 @@ export class MyElement extends LitElement { render() { return html` - ${ - this.showCanvas ? - html`` : - html`` - } + ${this.showCanvas + ? html`` + : html``} `; } @@ -40,22 +40,23 @@ export class MyElement extends LitElement { return; } - const ctx = canvasEl?.getContext("2d"); + const ctx = canvasEl?.getContext('2d'); if (!ctx) { return; } ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); - ctx.font = "50px Arial"; - ctx.fillText(this.canvasText,10,80); + ctx.font = '50px Arial'; + ctx.fillText(this.canvasText, 10, 80); } private handleInput(event: Event) { this.setCanvasText((event.target as HTMLInputElement).value); } - static styles = css`/* playground-fold */ + static styles = css` + /* playground-fold */ canvas { border: 1px solid black; } @@ -64,5 +65,6 @@ export class MyElement extends LitElement { display: block; margin-block-start: 1em; } - /* playground-fold-end */`; + /* playground-fold-end */ + `; } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts index 94f5b06af..141a000da 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-query/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement, css } from 'lit'; -import { customElement, state, query } from 'lit/decorators.js'; +import {html, LitElement, css} from 'lit'; +import {customElement, state, query} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -12,7 +12,7 @@ export class MyElement extends LitElement { `; } @@ -20,15 +20,15 @@ export class MyElement extends LitElement { private setCanvasText(text: string) { this.canvasText = text; // Access the canvas element with this.canvasEl - const ctx = this.canvasEl.getContext("2d"); + const ctx = this.canvasEl.getContext('2d'); if (!ctx) { return; } ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height); - ctx.font = "50px Arial"; - ctx.fillText(this.canvasText,10,80); + ctx.font = '50px Arial'; + ctx.fillText(this.canvasText, 10, 80); } private handleInput(event: Event) { @@ -40,7 +40,8 @@ export class MyElement extends LitElement { this.setCanvasText(this.canvasText); } - static styles = css`/* playground-fold */ + static styles = css` + /* playground-fold */ canvas { border: 1px solid black; } @@ -49,5 +50,6 @@ export class MyElement extends LitElement { display: block; margin-block-start: 1em; } - /* playground-fold-end */`; + /* playground-fold-end */ + `; } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts index 398013904..08ead3187 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/dom-ref/my-element.ts @@ -1,6 +1,6 @@ -import { html, LitElement, css } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; -import { ref, createRef } from 'lit/directives/ref.js'; +import {html, LitElement, css} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; +import {ref, createRef} from 'lit/directives/ref.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -12,7 +12,7 @@ export class MyElement extends LitElement { `; } @@ -23,15 +23,20 @@ export class MyElement extends LitElement { } this.canvasText = text; // Access the canvas element with this.canvasEl - const ctx = this.canvasRef.value.getContext("2d"); + const ctx = this.canvasRef.value.getContext('2d'); if (!ctx) { return; } - ctx.clearRect(0, 0, this.canvasRef.value.width, this.canvasRef.value.height); - ctx.font = "50px Arial"; - ctx.fillText(this.canvasText,10,80); + ctx.clearRect( + 0, + 0, + this.canvasRef.value.width, + this.canvasRef.value.height, + ); + ctx.font = '50px Arial'; + ctx.fillText(this.canvasText, 10, 80); } private handleInput(event: Event) { @@ -43,7 +48,8 @@ export class MyElement extends LitElement { this.setCanvasText(this.canvasText); } - static styles = css`/* playground-fold */ + static styles = css` + /* playground-fold */ canvas { border: 1px solid black; } @@ -52,5 +58,6 @@ export class MyElement extends LitElement { display: block; margin-block-start: 1em; } - /* playground-fold-end */`; + /* playground-fold-end */ + `; } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts index 33d8c1696..a04f3dcb9 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/event-listeners/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, query, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, query, state} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts index 05456dd5d..890008c27 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/another-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement, css } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement, css} from 'lit'; +import {customElement} from 'lit/decorators.js'; @customElement('another-element') export class AnotherElement extends LitElement { @@ -9,4 +9,4 @@ export class AnotherElement extends LitElement {
Part 2
`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html index 09a583b4e..db7e424a3 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/index.html @@ -9,4 +9,4 @@ } - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts index f13ab63c8..ed21a7250 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/export-part/my-element.ts @@ -1,10 +1,12 @@ -import { html, LitElement, css } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement, css} from 'lit'; +import {customElement} from 'lit/decorators.js'; import './another-element.js'; @customElement('my-element') export class MyElement extends LitElement { render() { - return html``; + return html``; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts index 61e34ff7a..17e73eee7 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/expressions/my-element.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement, PropertyValues } from 'lit'; -import { customElement, query, state } from 'lit/decorators.js'; +import {css, html, LitElement, PropertyValues} from 'lit'; +import {customElement, query, state} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -14,7 +14,8 @@ export class MyElement extends LitElement { + .value=${this.value} + />
Renders to: 
${this.htmlText}
@@ -25,20 +26,26 @@ export class MyElement extends LitElement { disabled: (this.disabled = (e.target as HTMLInputElement).checked)} - .checked=${this.disabled}> + @change=${(e: Event) => + (this.disabled = (e.target as HTMLInputElement).checked)} + .checked=${this.disabled} + />
@@ -52,10 +59,10 @@ export class MyElement extends LitElement { } static styles = css` - /* playground-fold */ + /* playground-fold */ label { display: block; } - /* playground-fold-end */ + /* playground-fold-end */ `; -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html index f03ab07ca..3859cca22 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/index.html @@ -1,4 +1,4 @@

Click either inside or outside this component with a box border

- \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts index 5f575d42e..92d236477 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/global-listeners/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement, isServer, css } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import {html, LitElement, isServer, css} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -7,8 +7,12 @@ export class MyElement extends LitElement { render() { return html` - ${!this.clickedOutside ? html`

Something was clicked INSIDE this component

` : ''} - ${this.clickedOutside ? html`

Something was clicked OUTSIDE this component

` : ''} + ${!this.clickedOutside + ? html`

Something was clicked INSIDE this component

` + : ''} + ${this.clickedOutside + ? html`

Something was clicked OUTSIDE this component

` + : ''} `; } @@ -38,11 +42,13 @@ export class MyElement extends LitElement { this.clickedOutside = !path.includes(this); }; - static styles = css`/* playground-fold */ + static styles = css` + /* playground-fold */ :host { display: inline-flex; border: 1px solid black; } - /* playground-fold-end */`; -} \ No newline at end of file + /* playground-fold-end */ + `; +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts index e961fc484..f69bb69aa 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/host-listeners/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement, isServer } from 'lit'; -import { customElement, state } from 'lit/decorators.js'; +import {html, LitElement, isServer} from 'lit'; +import {customElement, state} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -8,7 +8,9 @@ export class MyElement extends LitElement { render() { return html` - ${this.focusedWithin ? html`

Something in this component was focused

` : ''} + ${this.focusedWithin + ? html`

Something in this component was focused

` + : ''} `; } @@ -30,4 +32,4 @@ export class MyElement extends LitElement { #onFocusout() { this.focusedWithin = false; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js index 952c50945..ae778504a 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import-attributes/my-element.js @@ -1,15 +1,11 @@ -import { html, LitElement } from 'lit'; -import styles from './styles.css' with { type: 'css' }; +import {html, LitElement} from 'lit'; +import styles from './styles.css' with {type: 'css'}; export class MyElement extends LitElement { static styles = styles; render() { - return html` -
- This should be red! -
- `; + return html`
This should be red!
`; } } diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts index 8e2671b95..30f7e44dd 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/another-component.ts @@ -1,9 +1,9 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; @customElement('another-component') export class AnotherComponent extends LitElement { render() { return html`(I'm another component.)`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts index de5f2dccf..703e9859a 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/hello-world.ts @@ -1,10 +1,10 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; -import './another-component.js' +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; +import './another-component.js'; @customElement('hello-world') export class HelloWorld extends LitElement { render() { return html`Hello, world! `; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html index c53974764..be6dad253 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/import/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html index 5b273eb5d..af12c60f1 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/index.html @@ -18,4 +18,4 @@
-
\ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts index f6ed8d2d6..d5e60dadf 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/inheriting-custom-props/my-element.ts @@ -1,5 +1,5 @@ -import { html, LitElement, css } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement, css} from 'lit'; +import {customElement} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { @@ -14,4 +14,4 @@ export class MyElement extends LitElement { render() { return html`

This is in a shadow root!

`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts index b7a427e95..d7270029a 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/id-card.ts @@ -1,20 +1,20 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; @customElement('id-card') export class IdCard extends LitElement { @property() name = ''; - @property({ type: Number }) age = 0; - @property({ type: Boolean }) programmer = false; + @property({type: Number}) age = 0; + @property({type: Boolean}) programmer = false; render() { return html`

${this.name}

Age: ${this.age}

`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html index d5f0f24d5..f07c80f59 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts index 0159d6911..e97a5cb10 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/pass-data-down/my-wallet.ts @@ -1,12 +1,12 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; import './id-card.js'; @customElement('my-wallet') export class MyWallet extends LitElement { render() { return html` - + `; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts index 0feccc9d3..29cc9a9a9 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/id-card.ts @@ -1,30 +1,30 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; @customElement('id-card') export class IdCard extends LitElement { // Default attribute converter is string @property() name = ''; // Number attribute converter converts attribtues to numbers - @property({ type: Number }) age = 0; + @property({type: Number}) age = 0; // Boolean attribute converter converts attribtues to boolean using // .hasAttribute(). NOTE: boolean-attribute="false" will result in `true` - @property({ type: Boolean }) programmer = false; + @property({type: Boolean}) programmer = false; // You can also specify the attribute name - @property({ type: Boolean, attribute: 'is-cool' }) isCool = false; + @property({type: Boolean, attribute: 'is-cool'}) isCool = false; render() { return html`

${this.name}

Age: ${this.age}

`; } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html index d5f0f24d5..f07c80f59 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts index b88d3de0e..cacd8014d 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/reactive-properties/my-wallet.ts @@ -1,12 +1,17 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; import './id-card.js'; @customElement('my-wallet') export class MyWallet extends LitElement { render() { return html` - +
Toggle fancy button active state
@@ -35,10 +42,9 @@ export class MyButton extends LitElement { /* playground-fold */ #toggleActive(e: InputEvent) { - this.active = (e.target as HTMLInputElement).checked + this.active = (e.target as HTMLInputElement).checked; } - constructor() { super(); (MyButton.styles as any).replaceSync(getPluginStyles()); diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts index 9a1cddb7d..7340838bd 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/update-complete/my-element.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, query, state } from 'lit/decorators.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, query, state} from 'lit/decorators.js'; import {styleMap} from 'lit/directives/style-map.js'; @customElement('my-element') diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html index 57a0c9aca..9a1b15c74 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/index.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts index 8161cfaaf..dea9e13da 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/virtualizer/my-element.ts @@ -14,8 +14,9 @@ export class MyItems extends LitElement { have the lit-virtualizer element as a wrapper --> html`
  • ${i.text}
    • `}> + .items=${this.data} + .renderItem=${(i: {text: string}) => html`
  • ${i.text}
    • `} + >     `; diff --git a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json index 20ba04f9a..802d336ab 100644 --- a/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json +++ b/packages/lit-dev-content/samples/articles/lit-cheat-sheet/with-logger.json @@ -6,4 +6,4 @@ "content": "import {LitElement, html, css} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport {SignalWatcher, signal, watch} from '@lit-labs/signals';\n\nconst log = signal([]);\n\nconst oldLog = window.console.log\nwindow.console.log = (...values: unknown[]) => {\n log.set([...log.get(), values]);\n oldLog(...values)\n};\n\nconst globalStyles = new CSSStyleSheet();\n\nglobalStyles.replaceSync(`body {\n display: flex;\n}\n \nbody > * {\n flex: 1\n}`)\n\ndocument.adoptedStyleSheets.push(globalStyles);\n\n@customElement('visual-logger')\nexport class MyElement extends SignalWatcher(LitElement) {\n render() {\n return html`\n
    \n Log:\n
    \n ${log.get().toReversed().map(val => html`

    ${val.join(' ')}

    `)}\n
    \n `;\n }\n \n static styles = css`\n #log {\n display: block;\n max-height: 100dvh;\n }\n \n p {\n margin: 0;\n font-family: monospace;\n }\n `;\n}" } } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/examples/async-task/index.html b/packages/lit-dev-content/samples/examples/async-task/index.html index 8099c92be..c1262ffc1 100644 --- a/packages/lit-dev-content/samples/examples/async-task/index.html +++ b/packages/lit-dev-content/samples/examples/async-task/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/async-task/npm-info.ts b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts index 5175f0b5f..8da47aeff 100644 --- a/packages/lit-dev-content/samples/examples/async-task/npm-info.ts +++ b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts @@ -54,13 +54,13 @@ export class NpmInfo extends LitElement {
      ${map( Object.entries(pkg['dist-tags']), - ([tag, version]) => html`
    • ${tag}: ${version}
      • ` + ([tag, version]) => + html`
    • ${tag}: ${version}
      • `, )}
    `, - error: (e) => html` - Error: ${(e as Error).message} - `, + error: (e) => + html` Error: ${(e as Error).message} `, })} `; diff --git a/packages/lit-dev-content/samples/examples/async-task/npm.ts b/packages/lit-dev-content/samples/examples/async-task/npm.ts index dc8311a73..57859d9a3 100644 --- a/packages/lit-dev-content/samples/examples/async-task/npm.ts +++ b/packages/lit-dev-content/samples/examples/async-task/npm.ts @@ -5,7 +5,7 @@ export interface NpmPackage { export const fetchPackageInfo = async ( pkgName: string, - signal: AbortSignal + signal: AbortSignal, ): Promise => { // Artificial delay for demo purposes await new Promise((r) => setTimeout(r, 1000)); diff --git a/packages/lit-dev-content/samples/examples/context-basics/index.html b/packages/lit-dev-content/samples/examples/context-basics/index.html index f67442dfe..6463c58f2 100644 --- a/packages/lit-dev-content/samples/examples/context-basics/index.html +++ b/packages/lit-dev-content/samples/examples/context-basics/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts b/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts index 039c47be5..a7bedb929 100644 --- a/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-async-append/my-element.ts @@ -2,8 +2,8 @@ import {LitElement, html} from 'lit'; import {customElement, state} from 'lit/decorators.js'; import {asyncAppend} from 'lit/directives/async-append.js'; -async function *tossCoins(count: number) { - for (let i=0; i 0.5 ? 'Heads' : 'Tails'; await new Promise((r) => setTimeout(r, 1000)); } @@ -11,12 +11,12 @@ async function *tossCoins(count: number) { @customElement('my-element') class MyElement extends LitElement { - @state() private tosses = tossCoins(10); render() { - return html` -
      ${asyncAppend(this.tosses, (v) => html`
    • ${v}
      • `)}
    `; + return html`
      + ${asyncAppend(this.tosses, (v) => html`
    • ${v}
      • `)} +
    `; } } diff --git a/packages/lit-dev-content/samples/examples/directive-async-replace/index.html b/packages/lit-dev-content/samples/examples/directive-async-replace/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-async-replace/index.html +++ b/packages/lit-dev-content/samples/examples/directive-async-replace/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts b/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts index 9b8f33cf7..54c30dfc5 100644 --- a/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-async-replace/my-element.ts @@ -2,7 +2,7 @@ import {LitElement, html} from 'lit'; import {customElement, state} from 'lit/decorators.js'; import {asyncReplace} from 'lit/directives/async-replace.js'; -async function *countDown(count: number) { +async function* countDown(count: number) { while (count > 0) { yield count--; await new Promise((r) => setTimeout(r, 1000)); @@ -11,7 +11,6 @@ async function *countDown(count: number) { @customElement('my-element') class MyElement extends LitElement { - @state() private timer = countDown(10); diff --git a/packages/lit-dev-content/samples/examples/directive-cache/index.html b/packages/lit-dev-content/samples/examples/directive-cache/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-cache/index.html +++ b/packages/lit-dev-content/samples/examples/directive-cache/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts b/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts index daa6e64ca..3ee0b1748 100644 --- a/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-cache/my-element.ts @@ -2,12 +2,11 @@ import {LitElement, html} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import {cache} from 'lit/directives/cache.js'; -const view1 = () => html`View 1: `; -const view2 = () => html`View 2: `; +const view1 = () => html`View 1: `; +const view2 = () => html`View 2: `; @customElement('my-element') export class MyElement extends LitElement { - @property({type: Number}) selectedView = 1; @@ -15,12 +14,14 @@ export class MyElement extends LitElement { return html`

    cache directive example

    -
    + +
    - Un-cached (DOM re-created when template re-rendered):
    - ${this.selectedView == 1 ? view1() : view2()}
    + Un-cached (DOM re-created when template re-rendered):
    + ${this.selectedView == 1 ? view1() : view2()} +
    - Cached (DOM cached and re-used when template re-rendered):
    + Cached (DOM cached and re-used when template re-rendered):
    ${cache(this.selectedView == 1 ? view1() : view2())} `; } diff --git a/packages/lit-dev-content/samples/examples/directive-class-map/index.html b/packages/lit-dev-content/samples/examples/directive-class-map/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-class-map/index.html +++ b/packages/lit-dev-content/samples/examples/directive-class-map/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts b/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts index 0098c9539..1c4644e66 100644 --- a/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-class-map/my-element.ts @@ -4,7 +4,6 @@ import {classMap} from 'lit/directives/class-map.js'; @customElement('my-element') export class MyElement extends LitElement { - static styles = css` .enabled { background: lightgreen; @@ -27,19 +26,27 @@ export class MyElement extends LitElement { const classes = { enabled: this.enabled, hidden: this.hidden, - padded: true + padded: true, }; return html`

    classMap directive example

    Classy text
    -
    +
    `; diff --git a/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts b/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts index 94a72ff04..b529b2fbd 100644 --- a/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts +++ b/packages/lit-dev-content/samples/examples/directive-guard/calculate-sha.ts @@ -5,7 +5,9 @@ async function sha256(message: string) { const msgBuffer = new TextEncoder().encode(message); const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer); const hashArray = Array.from(new Uint8Array(hashBuffer)); - const hashHex = hashArray.map(b => ('00' + b.toString(16)).slice(-2)).join(''); + const hashHex = hashArray + .map((b) => ('00' + b.toString(16)).slice(-2)) + .join(''); // Add some artificial delay for demo purposes... await new Promise((r) => setTimeout(() => r(), 1000)); return hashHex; @@ -13,4 +15,4 @@ async function sha256(message: string) { export const calculateSHA = (value: string) => { return until(sha256(value), 'Calculating sha...'); -} +}; diff --git a/packages/lit-dev-content/samples/examples/directive-guard/index.html b/packages/lit-dev-content/samples/examples/directive-guard/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-guard/index.html +++ b/packages/lit-dev-content/samples/examples/directive-guard/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts b/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts index ca0461a70..f3736f206 100644 --- a/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-guard/my-element.ts @@ -5,7 +5,6 @@ import {calculateSHA} from './calculate-sha.js'; @customElement('my-element') export class MyElement extends LitElement { - @state() private value: string = 'test string'; @@ -19,15 +18,17 @@ export class MyElement extends LitElement { return html`

    guard directive example

    - -
    + +
    The SHA for '${this.value}' is:
    ${guard([this.value], () => calculateSHA(this.value))}
    -
    +
    - Incrementing the counter does not recalculate SHA:
    - + Incrementing the counter does not recalculate SHA:
    + `; } diff --git a/packages/lit-dev-content/samples/examples/directive-if-defined/index.html b/packages/lit-dev-content/samples/examples/directive-if-defined/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-if-defined/index.html +++ b/packages/lit-dev-content/samples/examples/directive-if-defined/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts b/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts index 87d5e933b..153b711f4 100644 --- a/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-if-defined/my-element.ts @@ -3,16 +3,15 @@ import {customElement, state, query} from 'lit/decorators.js'; import {ifDefined} from 'lit/directives/if-defined.js'; const imageInfo = { - 'beach': { domain: 'picsum.photos', id: 100 }, - 'river': { domain: 'picsum.photos', id: 1015 }, - 'canyon': { domain: 'picsum.photos', id: 1016 }, + beach: {domain: 'picsum.photos', id: 100}, + river: {domain: 'picsum.photos', id: 1015}, + canyon: {domain: 'picsum.photos', id: 1016}, }; type ImageKey = keyof typeof imageInfo; @customElement('my-element') class MyElement extends LitElement { - @state() private imageName: ImageKey = 'beach'; @@ -26,14 +25,20 @@ class MyElement extends LitElement { return html`

    ifDefined directive example

    - Type one of 'beach', 'river', or 'canyon':
    -
    + Type one of 'beach', 'river', or 'canyon':
    + +
    - Using ifDefined (src removed when undefined):
    -
    + Using ifDefined (src removed when undefined):
    + +
    - Without ifDefined (will 404 when undefined):
    - + Without ifDefined (will 404 when undefined):
    + `; } diff --git a/packages/lit-dev-content/samples/examples/directive-live/index.html b/packages/lit-dev-content/samples/examples/directive-live/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-live/index.html +++ b/packages/lit-dev-content/samples/examples/directive-live/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-live/my-element.ts b/packages/lit-dev-content/samples/examples/directive-live/my-element.ts index 165ba2f2b..0b8e7595d 100644 --- a/packages/lit-dev-content/samples/examples/directive-live/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-live/my-element.ts @@ -4,7 +4,6 @@ import {live} from 'lit/directives/live.js'; @customElement('my-element') class MyElement extends LitElement { - @state() private data = {value: 'test'}; @@ -12,19 +11,23 @@ class MyElement extends LitElement { private input!: HTMLInputElement; render() { - return html`

    live directive example

    - Set this value to the inputs below.
    - -
    + Set this value to the inputs below.
    + + +
    - With live: will update if out of sync with last rendered value
    -
    + With live: will update if out of sync with last rendered value
    + +
    - Without live: will not update if out of sync with last rendered value
    - + Without live: will not update if out of sync with last rendered value
    + `; } diff --git a/packages/lit-dev-content/samples/examples/directive-ref/index.html b/packages/lit-dev-content/samples/examples/directive-ref/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-ref/index.html +++ b/packages/lit-dev-content/samples/examples/directive-ref/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts b/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts index f4c9172e3..0ac1b866b 100644 --- a/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-ref/my-element.ts @@ -2,11 +2,13 @@ import {LitElement, html, css} from 'lit'; import {customElement} from 'lit/decorators.js'; import {ref, createRef} from 'lit/directives/ref.js'; -const loremIpsum = Array(100).fill(0).map(() => 'Lorem ipsum dolor sit amet.').join(' '); +const loremIpsum = Array(100) + .fill(0) + .map(() => 'Lorem ipsum dolor sit amet.') + .join(' '); @customElement('my-element') export class MyElement extends LitElement { - static styles = css` .scroll { height: 100px; @@ -20,10 +22,11 @@ export class MyElement extends LitElement { render() { return html` - Passing ref directive a Ref object that will hold the element in .value:
    - + Passing ref directive a Ref object that will hold the element in + .value:
    + -
    +
    Passing ref directive a change callback
    diff --git a/packages/lit-dev-content/samples/examples/directive-repeat/index.html b/packages/lit-dev-content/samples/examples/directive-repeat/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-repeat/index.html +++ b/packages/lit-dev-content/samples/examples/directive-repeat/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts b/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts index fe70722d3..dc7761c5f 100644 --- a/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-repeat/my-element.ts @@ -4,15 +4,14 @@ import {repeat} from 'lit/directives/repeat.js'; @customElement('my-element') class MyElement extends LitElement { - @state() private items = [ - {id: 0, name: "Justin"}, - {id: 1, name: "Steve"}, - {id: 2, name: "Kevin"}, - {id: 3, name: "Russell"}, - {id: 4, name: "Liz"}, - {id: 5, name: "Peter"}, + {id: 0, name: 'Justin'}, + {id: 1, name: 'Steve'}, + {id: 2, name: 'Kevin'}, + {id: 3, name: 'Russell'}, + {id: 4, name: 'Liz'}, + {id: 5, name: 'Peter'}, ]; render() { @@ -20,24 +19,39 @@ class MyElement extends LitElement {

    repeat directive example

    -
    + +
    With keying (DOM including checkbox state moves with items):
      - ${repeat(this.items, (item) => item.id, (item, index) => html` -
    • ${index}:
      • `)} -
    + ${repeat( + this.items, + (item) => item.id, + (item, index) => + html`
  • + ${index}: +
    • `, + )} + +
    - Without keying (items are re-used in place, checkbox state does not change): + Without keying (items are re-used in place, checkbox state does not + change):
      - ${repeat(this.items, (item, index) => html` -
    • ${index}:
      • `)} + ${repeat( + this.items, + (item, index) => + html`
    • + ${index}: +
      • `, + )}
    - `; } private sort(dir: number) { - this.items = [...this.items.sort((a, b) => a.name.localeCompare(b.name) * dir)]; + this.items = [ + ...this.items.sort((a, b) => a.name.localeCompare(b.name) * dir), + ]; } } diff --git a/packages/lit-dev-content/samples/examples/directive-style-map/index.html b/packages/lit-dev-content/samples/examples/directive-style-map/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/examples/directive-style-map/index.html +++ b/packages/lit-dev-content/samples/examples/directive-style-map/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts b/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts index 15d04e340..a0d5690da 100644 --- a/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-style-map/my-element.ts @@ -4,7 +4,6 @@ import {styleMap} from 'lit/directives/style-map.js'; @customElement('my-element') export class MyElement extends LitElement { - @property({type: Boolean}) enabled = true; @@ -15,19 +14,27 @@ export class MyElement extends LitElement { const styles = { backgroundColor: this.enabled ? 'lightgreen' : 'transparent', opacity: this.hidden ? '0.2' : '1', - padding: '10px' + padding: '10px', }; return html`

    styleMap directive example

    Hello style!

    -
    +
    `; diff --git a/packages/lit-dev-content/samples/examples/directive-template-content/index.html b/packages/lit-dev-content/samples/examples/directive-template-content/index.html index 557c74d07..c487c72a7 100644 --- a/packages/lit-dev-content/samples/examples/directive-template-content/index.html +++ b/packages/lit-dev-content/samples/examples/directive-template-content/index.html @@ -1,12 +1,14 @@ diff --git a/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts b/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts index 28a8f97d9..e8aaa7dff 100644 --- a/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts +++ b/packages/lit-dev-content/samples/examples/directive-template-content/my-element.ts @@ -3,13 +3,14 @@ import {customElement} from 'lit/decorators.js'; import {templateContent} from 'lit/directives/template-content.js'; // diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts index 93a4a1cda..9451045d2 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/07/before/rating-element.ts @@ -3,18 +3,25 @@ export class RatingElement extends HTMLElement { connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); - const templateContent = document.querySelector('#rating-element-template')!.content; + const templateContent = document.querySelector( + '#rating-element-template', + )!.content; const clonedContent = templateContent.cloneNode(true); shadowRoot.appendChild(clonedContent); - this.shadowRoot!.querySelector('.rating')!.innerText = `${this.rating}`; + this.shadowRoot!.querySelector('.rating')!.innerText = + `${this.rating}`; } static get observedAttributes() { return ['rating']; } - attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) { + attributeChangedCallback( + attributeName: string, + _oldValue: string, + newValue: string, + ) { if (attributeName === 'rating') { const newRating = Number(newValue); @@ -39,6 +46,6 @@ export class RatingElement extends HTMLElement { get rating() { return this._rating; } - } +} - customElements.define('rating-element', RatingElement); +customElements.define('rating-element', RatingElement); diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html index dda519c33..e01611967 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/index.html @@ -1,4 +1,4 @@ - + @@ -16,20 +16,38 @@ cursor: pointer; } - :host([vote=up]) .thumb_up { + :host([vote='up']) .thumb_up { fill: green; } - :host([vote=down]) .thumb_down { + :host([vote='down']) .thumb_down { fill: red; } - diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts index c7c2c08bf..ede55f72a 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/08/before/rating-element.ts @@ -1,27 +1,34 @@ export class RatingElement extends HTMLElement { private _rating = 0; - private _vote: 'up'|'down'|null = null; + private _vote: 'up' | 'down' | null = null; connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); - const templateContent = document.querySelector('#rating-element-template')!.content; + const templateContent = document.querySelector( + '#rating-element-template', + )!.content; const clonedContent = templateContent.cloneNode(true); shadowRoot.appendChild(clonedContent); - this.shadowRoot!.querySelector('.rating')!.innerText = `${this.rating}`; + this.shadowRoot!.querySelector('.rating')!.innerText = + `${this.rating}`; } static get observedAttributes() { return ['rating', 'vote']; } - attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) { + attributeChangedCallback( + attributeName: string, + _oldValue: string, + newValue: string, + ) { if (attributeName === 'rating') { const newRating = Number(newValue); this.rating = newRating; } else if (attributeName === 'vote') { - this.vote = newValue as 'up'|'down'; + this.vote = newValue as 'up' | 'down'; } } @@ -70,6 +77,6 @@ export class RatingElement extends HTMLElement { get vote() { return this._vote; } - } +} - customElements.define('rating-element', RatingElement); +customElements.define('rating-element', RatingElement); diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html index dda519c33..e01611967 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/index.html @@ -1,4 +1,4 @@ - + @@ -16,20 +16,38 @@ cursor: pointer; } - :host([vote=up]) .thumb_up { + :host([vote='up']) .thumb_up { fill: green; } - :host([vote=down]) .thumb_down { + :host([vote='down']) .thumb_down { fill: red; } - diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts index c4828518f..93f434745 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/09/before/rating-element.ts @@ -1,45 +1,56 @@ export class RatingElement extends HTMLElement { private _rating = 0; - private _vote: 'up'|'down'|null = null; + private _vote: 'up' | 'down' | null = null; private _boundOnUpClick = this._onUpClick.bind(this); private _boundOnDownClick = this._onDownClick.bind(this); connectedCallback() { const shadowRoot = this.attachShadow({mode: 'open'}); - const templateContent = document.querySelector('#rating-element-template')!.content; + const templateContent = document.querySelector( + '#rating-element-template', + )!.content; const clonedContent = templateContent.cloneNode(true); shadowRoot.appendChild(clonedContent); - this.shadowRoot!.querySelector('.rating')!.innerText = `${this.rating}`; - - this.shadowRoot! - .querySelector('.thumb_up')! - .addEventListener('click', this._boundOnUpClick); - this.shadowRoot! - .querySelector('.thumb_down')! - .addEventListener('click', this._boundOnDownClick); + this.shadowRoot!.querySelector('.rating')!.innerText = + `${this.rating}`; + + this.shadowRoot!.querySelector('.thumb_up')!.addEventListener( + 'click', + this._boundOnUpClick, + ); + this.shadowRoot!.querySelector('.thumb_down')!.addEventListener( + 'click', + this._boundOnDownClick, + ); } disconnectedCallback() { - this.shadowRoot! - .querySelector('.thumb_up')! - .removeEventListener('click', this._boundOnUpClick); - this.shadowRoot! - .querySelector('.thumb_down')! - .removeEventListener('click', this._boundOnDownClick); + this.shadowRoot!.querySelector('.thumb_up')!.removeEventListener( + 'click', + this._boundOnUpClick, + ); + this.shadowRoot!.querySelector('.thumb_down')!.removeEventListener( + 'click', + this._boundOnDownClick, + ); } static get observedAttributes() { return ['rating', 'vote']; } - attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) { + attributeChangedCallback( + attributeName: string, + _oldValue: string, + newValue: string, + ) { if (attributeName === 'rating') { const newRating = Number(newValue); this.rating = newRating; } else if (attributeName === 'vote') { - this.vote = newValue as 'up'|'down'; + this.vote = newValue as 'up' | 'down'; } } @@ -96,6 +107,6 @@ export class RatingElement extends HTMLElement { _onDownClick() { this.vote = 'down'; } - } +} - customElements.define('rating-element', RatingElement); +customElements.define('rating-element', RatingElement); diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html index 1756d3695..6b10ad860 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts index b9b159120..66ed89c7b 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/10/before/rating-element.ts @@ -2,7 +2,7 @@ import {render, html} from 'lit'; export class RatingElement extends HTMLElement { private _rating = 0; - private _vote: 'up'|'down'|null = null; + private _vote: 'up' | 'down' | null = null; private _boundOnUpClick = this._onUpClick.bind(this); private _boundOnDownClick = this._onDownClick.bind(this); @@ -10,34 +10,42 @@ export class RatingElement extends HTMLElement { this.attachShadow({mode: 'open'}); this.render(); - this.shadowRoot! - .querySelector('.thumb_up')! - .addEventListener('click', this._boundOnUpClick); - this.shadowRoot! - .querySelector('.thumb_down')! - .addEventListener('click', this._boundOnDownClick); + this.shadowRoot!.querySelector('.thumb_up')!.addEventListener( + 'click', + this._boundOnUpClick, + ); + this.shadowRoot!.querySelector('.thumb_down')!.addEventListener( + 'click', + this._boundOnDownClick, + ); } disconnectedCallback() { - this.shadowRoot! - .querySelector('.thumb_up')! - .removeEventListener('click', this._boundOnUpClick); - this.shadowRoot! - .querySelector('.thumb_down')! - .removeEventListener('click', this._boundOnDownClick); + this.shadowRoot!.querySelector('.thumb_up')!.removeEventListener( + 'click', + this._boundOnUpClick, + ); + this.shadowRoot!.querySelector('.thumb_down')!.removeEventListener( + 'click', + this._boundOnDownClick, + ); } static get observedAttributes() { return ['rating', 'vote']; } - attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) { + attributeChangedCallback( + attributeName: string, + _oldValue: string, + newValue: string, + ) { if (attributeName === 'rating') { const newRating = Number(newValue); this.rating = newRating; } else if (attributeName === 'vote') { - this.vote = newValue as 'up'|'down'; + this.vote = newValue as 'up' | 'down'; } } @@ -100,8 +108,7 @@ export class RatingElement extends HTMLElement { return; } - const template = html` - ${this.rating} `; render(template, this.shadowRoot); } - } +} - customElements.define('rating-element', RatingElement); +customElements.define('rating-element', RatingElement); diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html index 1756d3695..6b10ad860 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts index 546da045e..0fab31619 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/11/before/rating-element.ts @@ -2,7 +2,7 @@ import {render, html} from 'lit'; export class RatingElement extends HTMLElement { private _rating = 0; - private _vote: 'up'|'down'|null = null; + private _vote: 'up' | 'down' | null = null; connectedCallback() { this.attachShadow({mode: 'open'}); @@ -13,7 +13,11 @@ export class RatingElement extends HTMLElement { return ['rating']; } - attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) { + attributeChangedCallback( + attributeName: string, + _oldValue: string, + newValue: string, + ) { if (attributeName === 'rating') { const newRating = Number(newValue); @@ -64,8 +68,7 @@ export class RatingElement extends HTMLElement { return; } - const template = html` - ${this.rating} `; render(template, this.shadowRoot); } - } +} - customElements.define('rating-element', RatingElement); +customElements.define('rating-element', RatingElement); diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html index 1756d3695..6b10ad860 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts index b8de33b32..17cf59162 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/12/before/rating-element.ts @@ -15,23 +15,27 @@ export class RatingElement extends LitElement { cursor: pointer; } - :host([vote=up]) .thumb_up { + :host([vote='up']) .thumb_up { fill: green; } - :host([vote=down]) .thumb_down { + :host([vote='down']) .thumb_down { fill: red; } `; private _rating = 0; - private _vote: 'up'|'down'|null = null; + private _vote: 'up' | 'down' | null = null; // static get observedAttributes() { // return ['rating']; // } - attributeChangedCallback(attributeName: string, _oldValue: string, newValue: string) { + attributeChangedCallback( + attributeName: string, + _oldValue: string, + newValue: string, + ) { if (attributeName === 'rating') { const newRating = Number(newValue); @@ -78,17 +82,40 @@ export class RatingElement extends LitElement { } render() { - return html` - ${this.rating} `; } } diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html index 372d55ac7..fe702d95e 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/index.html @@ -1,4 +1,4 @@ - + @@ -21,20 +21,38 @@ cursor: pointer; } - :host([vote=up]) .thumb_up { + :host([vote='up']) .thumb_up { fill: green; } - :host([vote=down]) .thumb_down { + :host([vote='down']) .thumb_down { fill: red; } - diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts index 1c1d38d35..ed8ca15eb 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/13/before/rating-element.ts @@ -15,11 +15,11 @@ class RatingElement extends LitElement { cursor: pointer; } - :host([vote=up]) .thumb_up { + :host([vote='up']) .thumb_up { fill: green; } - :host([vote=down]) .thumb_down { + :host([vote='down']) .thumb_down { fill: red; } `; @@ -28,7 +28,7 @@ class RatingElement extends LitElement { rating = 0; @property({type: String, reflect: true}) - vote: 'up'|'down'|null = null; + vote: 'up' | 'down' | null = null; willUpdate(changedProps: PropertyValues) { if (changedProps.has('vote')) { @@ -52,17 +52,40 @@ class RatingElement extends LitElement { } render() { - return html` - ${this.rating} `; } } diff --git a/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json b/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json index 8512ba287..6f47450b5 100644 --- a/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json +++ b/packages/lit-dev-content/samples/tutorials/wc-to-lit/tutorial.json @@ -51,4 +51,4 @@ "noSolve": true } ] -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html index adf78eba6..cea1ee17b 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/index.html @@ -1,4 +1,4 @@ - + @@ -14,7 +14,8 @@

    Click the bouncing ball!

    - +_______9" + > diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts index 817218e38..3af209f2d 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/after/word-viewer.ts @@ -1,6 +1,6 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {classMap} from 'lit/directives/class-map.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -18,7 +18,7 @@ class WordViewer extends LitElement { color: white; background-color: violet; } - ` + `; @state() private playDirection: -1 | 1 = 1; @state() private idx = 0; @@ -39,15 +39,20 @@ class WordViewer extends LitElement { render() { const splitWords = this.words.split('.'); - const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; + const idx = + ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; const word = splitWords[idx]; return html`
    ${word}
    `; + > +${word}`; } - tickToNextWord = () => { this.idx += this.playDirection; }; + tickToNextWord = () => { + this.idx += this.playDirection; + }; switchPlayDirection() { this.playDirection *= -1; diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html index 52d99d087..3f10f3a03 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/index.html @@ -1,4 +1,4 @@ - + @@ -18,6 +18,5 @@

    <word-viewer> examples:

    Add your own here... - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json index 6315ce34d..58e4329b8 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/project.json @@ -6,4 +6,4 @@ }, "word-viewer.ts": {} } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts index 417243e18..af8190e02 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/00/before/word-viewer.ts @@ -1,6 +1,6 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {classMap} from 'lit/directives/class-map.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -18,7 +18,7 @@ class WordViewer extends LitElement { color: white; background-color: violet; } - ` + `; @state() private playDirection: -1 | 1 = 1; @state() private idx = 0; @@ -39,15 +39,20 @@ class WordViewer extends LitElement { render() { const splitWords = this.words.split('.'); - const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; + const idx = + ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; const word = splitWords[idx]; return html`
    ${word}
    `; + > +${word}`; } - tickToNextWord = () => { this.idx += this.playDirection; }; + tickToNextWord = () => { + this.idx += this.playDirection; + }; switchPlayDirection() { this.playDirection *= -1; diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts index 02bc4685b..29b2d3f77 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/01/after/word-viewer.ts @@ -1,15 +1,15 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { render() { - return html`
    A super expressive and efficient template!
    ` + return html`
    A super expressive and efficient template!
    `; } } declare global { interface HTMLElementTagNameMap { - "word-viewer": WordViewer + 'word-viewer': WordViewer; } } diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts index db175b0b3..74874f2c6 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/01/before/word-viewer.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement} from 'lit/decorators.js'; class WordViewer extends LitElement { render() { diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts index 291b60f1c..ece7cdea5 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/02/after/word-viewer.ts @@ -1,12 +1,11 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @property() words = 'initial value'; render() { - return html`
    ${this.words}
    ` + return html`
    ${this.words}
    `; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js index 0e3d4199e..b8297c388 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.js @@ -1,5 +1,4 @@ -import { html, LitElement } from 'lit'; - +import {html, LitElement} from 'lit'; class WordViewer extends LitElement { // TODO: Declare a reactive property `words`. diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts index 4654b39c4..9a06b7c91 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/02/before/word-viewer.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -9,4 +9,3 @@ class WordViewer extends LitElement { return html`
    ${this.words}
    `; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts index 4fc3a4245..6e5ba207a 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/03/after/word-viewer.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -12,4 +12,3 @@ class WordViewer extends LitElement { return html`
    ${word}
    `; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts index 5daf600fa..47d9282ee 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/03/before/word-viewer.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -12,4 +12,3 @@ class WordViewer extends LitElement { return html`
    ${this.words}
    `; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts index 3fbe89591..ab3e3e1fc 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/04/after/word-viewer.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -7,12 +7,12 @@ class WordViewer extends LitElement { @property() words = 'initial value'; private intervalTimer?: number; - + connectedCallback() { super.connectedCallback(); this.intervalTimer = setInterval(this.tickToNextWord, 1000); } - + disconnectedCallback() { super.disconnectedCallback(); clearInterval(this.intervalTimer); @@ -25,6 +25,7 @@ class WordViewer extends LitElement { return html`
    ${word}
    `; } - tickToNextWord = () => { this.idx += 1; }; + tickToNextWord = () => { + this.idx += 1; + }; } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts index 247d0b0bc..4d891b288 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/04/before/word-viewer.ts @@ -1,5 +1,5 @@ -import { html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -7,7 +7,7 @@ class WordViewer extends LitElement { @property() words = 'initial value'; // TODO: Define a `connectedCallback` which sets an interval. - // TODO: Define a `disconnectedCallback` which clears the interval. + // TODO: Define a `disconnectedCallback` which clears the interval. render() { const splitWords = this.words.split('.'); @@ -17,4 +17,3 @@ class WordViewer extends LitElement { // TODO: Define `tickToNextWord`. } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts index fdf5581a5..f63e4c20f 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/05/after/word-viewer.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -37,6 +37,7 @@ class WordViewer extends LitElement { return html`
    ${word}
    `; } - tickToNextWord = () => { this.idx += 1; }; + tickToNextWord = () => { + this.idx += 1; + }; } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts index 0305f02fe..272ee4507 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/05/before/word-viewer.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -9,12 +9,12 @@ class WordViewer extends LitElement { @property() words = 'initial value'; private intervalTimer?: number; - + connectedCallback() { super.connectedCallback(); this.intervalTimer = setInterval(this.tickToNextWord, 1000); } - + disconnectedCallback() { super.disconnectedCallback(); clearInterval(this.intervalTimer); @@ -27,6 +27,7 @@ class WordViewer extends LitElement { return html`
    ${word}
    `; } - tickToNextWord = () => { this.idx += 1; }; + tickToNextWord = () => { + this.idx += 1; + }; } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts index d00fab1f0..99db44666 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/06/after/word-viewer.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -34,17 +34,17 @@ class WordViewer extends LitElement { render() { const splitWords = this.words.split('.'); - const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; + const idx = + ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; const word = splitWords[idx]; - return html`
    ${word}
    `; + return html`
    ${word}
    `; } - tickToNextWord = () => { this.idx += this.playDirection; }; + tickToNextWord = () => { + this.idx += this.playDirection; + }; switchPlayDirection() { this.playDirection *= -1; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json index 324d2795c..c04439e43 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/project.json @@ -6,4 +6,4 @@ }, "index.html": {} } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts index 574f90a2a..df8699ba1 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/06/before/word-viewer.ts @@ -1,5 +1,5 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -40,8 +40,9 @@ class WordViewer extends LitElement { return html`
    ${word}
    `; } // TODO: Increment by `this.playDirection` - tickToNextWord = () => { this.idx += 1; }; + tickToNextWord = () => { + this.idx += 1; + }; // TODO: Add switchPlayDirection method. } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts index 3004483c3..af8190e02 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/07/after/word-viewer.ts @@ -1,6 +1,6 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {classMap} from 'lit/directives/class-map.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -18,7 +18,7 @@ class WordViewer extends LitElement { color: white; background-color: violet; } - ` + `; @state() private playDirection: -1 | 1 = 1; @state() private idx = 0; @@ -39,18 +39,22 @@ class WordViewer extends LitElement { render() { const splitWords = this.words.split('.'); - const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; + const idx = + ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; const word = splitWords[idx]; return html`
    ${word}
    `; + > +${word}`; } - tickToNextWord = () => { this.idx += this.playDirection; }; + tickToNextWord = () => { + this.idx += this.playDirection; + }; switchPlayDirection() { this.playDirection *= -1; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json index 324d2795c..c04439e43 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/project.json @@ -6,4 +6,4 @@ }, "index.html": {} } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts index c7958bb35..d0d690b11 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/07/before/word-viewer.ts @@ -1,6 +1,6 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {classMap} from 'lit/directives/class-map.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -36,18 +36,22 @@ class WordViewer extends LitElement { render() { const splitWords = this.words.split('.'); - const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; + const idx = + ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; const word = splitWords[idx]; return html`
    ${word}
    `; + > +${word}`; } - tickToNextWord = () => { this.idx += this.playDirection; }; + tickToNextWord = () => { + this.idx += this.playDirection; + }; switchPlayDirection() { this.playDirection *= -1; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html index adf78eba6..cea1ee17b 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/index.html @@ -1,4 +1,4 @@ - + @@ -14,7 +14,8 @@

    Click the bouncing ball!

    - +_______9" + > diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json index 6315ce34d..58e4329b8 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/project.json @@ -6,4 +6,4 @@ }, "word-viewer.ts": {} } -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts index d875268ad..3af209f2d 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/08/before/word-viewer.ts @@ -1,6 +1,6 @@ -import { css, html, LitElement } from 'lit'; -import { customElement, property, state } from 'lit/decorators.js'; -import { classMap } from 'lit/directives/class-map.js'; +import {css, html, LitElement} from 'lit'; +import {customElement, property, state} from 'lit/decorators.js'; +import {classMap} from 'lit/directives/class-map.js'; @customElement('word-viewer') class WordViewer extends LitElement { @@ -18,7 +18,7 @@ class WordViewer extends LitElement { color: white; background-color: violet; } - ` + `; @state() private playDirection: -1 | 1 = 1; @state() private idx = 0; @@ -39,18 +39,22 @@ class WordViewer extends LitElement { render() { const splitWords = this.words.split('.'); - const idx = ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; + const idx = + ((this.idx % splitWords.length) + splitWords.length) % splitWords.length; const word = splitWords[idx]; return html`
    ${word}
    `; + > +${word}`; } - tickToNextWord = () => { this.idx += this.playDirection; }; + tickToNextWord = () => { + this.idx += this.playDirection; + }; switchPlayDirection() { this.playDirection *= -1; } } - diff --git a/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json b/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json index ab653cee1..0bd8e0403 100644 --- a/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json +++ b/packages/lit-dev-content/samples/tutorials/word-viewer/tutorial.json @@ -43,4 +43,4 @@ "noSolve": true } ] -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts index f926dc3e5..4311b6c71 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/00/before/my-element.ts @@ -8,20 +8,15 @@ class MyElement extends LitElement {

    Rendering lists with Lit

    Lit has built-in support for any iterables!

    Array

    -

    - ${['✨', '🔥', '❤️']} -

    +

    ${['✨', '🔥', '❤️']}

    Set

    -

    - ${new Set(['A', 'B', 'C'])} -

    +

    ${new Set(['A', 'B', 'C'])}

    Generator

    ${(function* () { - for (let i = 1; i < 4; i++) yield i; + for (let i = 1; i < 4; i++) yield i; })()}

    `; } } - diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts index 92556c517..b0f453b80 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/after/my-element.ts @@ -5,7 +5,7 @@ import {map} from 'lit/directives/map.js'; @customElement('my-element') class MyElement extends LitElement { @state() - items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']) + items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']); render() { return html` diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts index 8b08288e1..66a08d243 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/01/before/my-element.ts @@ -5,7 +5,7 @@ import {customElement, state} from 'lit/decorators.js'; @customElement('my-element') class MyElement extends LitElement { @state() - items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']) + items = new Set(['Apple', 'Banana', 'Grape', 'Orange', 'Lime']); render() { return html` diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts index 95c6d3191..2b1faa565 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/after/my-element.ts @@ -10,9 +10,9 @@ class MyElement extends LitElement { return html`

    A list of names that include the letter "e"

      - ${this.names - .filter((name) => name.match(/e/i)) - .map((name) => html`
    • ${name}
      • `)} + ${this.names + .filter((name) => name.match(/e/i)) + .map((name) => html`
    • ${name}
      • `)}
    `; } diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/02/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts index fcedcadef..5bf5d1c77 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/after/my-element.ts @@ -9,9 +9,9 @@ class MyElement extends LitElement { @state() pets = [ - { name: "Hedwig", species: "Owl" }, - { name: "Scabbers", species: "Rat" }, - { name: "Crookshanks", species: "Cat" }, + {name: 'Hedwig', species: 'Owl'}, + {name: 'Scabbers', species: 'Rat'}, + {name: 'Crookshanks', species: 'Cat'}, ]; @state() diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts index ef5a53404..8a4dcfbe8 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/03/before/my-element.ts @@ -9,9 +9,9 @@ class MyElement extends LitElement { @state() pets = [ - { name: "Hedwig", species: "Owl" }, - { name: "Scabbers", species: "Rat" }, - { name: "Crookshanks", species: "Cat" }, + {name: 'Hedwig', species: 'Owl'}, + {name: 'Scabbers', species: 'Rat'}, + {name: 'Crookshanks', species: 'Cat'}, ]; @state() diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js index 1c304b4b7..62347bdad 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.js @@ -30,7 +30,6 @@ class MyElement extends LitElement { background: white; } /* playground-fold-end */ - `; render() { @@ -41,9 +40,9 @@ class MyElement extends LitElement { map( range(8), (col) => html` -
    ${getLabel(row, col)}
    - ` - ) +
    ${getLabel(row, col)}
    + `, + ), )}
    `; diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts index 1c30cff05..518c2cd6d 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/after/my-element.ts @@ -32,22 +32,26 @@ class MyElement extends LitElement { background: white; } /* playground-fold-end */ - `; render() { return html`

    Let's play a game!

    - ${map(range(8), (row) => map(range(8), (col) => html` -
    ${getLabel(row, col)}
    - `))} + ${map(range(8), (row) => + map( + range(8), + (col) => html` +
    ${getLabel(row, col)}
    + `, + ), + )}
    `; } } const getColor = (row: number, col: number) => - (row + col) % 2 ? "black" : "white"; + (row + col) % 2 ? 'black' : 'white'; const getLabel = (row: number, col: number) => `${String.fromCharCode(65 + col)}${8 - row}`; diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts index 46c0e8e3b..a858d6b4c 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/04/before/my-element.ts @@ -31,7 +31,6 @@ class MyElement extends LitElement { background: white; } /* playground-fold-end */ - `; render() { diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts index 449c3537e..db9c55cc6 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/after/my-element.ts @@ -6,10 +6,10 @@ import {repeat} from 'lit/directives/repeat.js'; class MyElement extends LitElement { @state() tasks = [ - { id: 'a', label: 'Learn Lit'}, - { id: 'b', label: 'Feed the cat'}, - { id: 'c', label: 'Go for a walk'}, - { id: 'd', label: 'Take a nap'}, + {id: 'a', label: 'Learn Lit'}, + {id: 'b', label: 'Feed the cat'}, + {id: 'c', label: 'Go for a walk'}, + {id: 'd', label: 'Take a nap'}, ]; render() { @@ -25,7 +25,7 @@ class MyElement extends LitElement {
    • - ` + `, )} `; diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts index 52cbeb6d8..54d903cb3 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/05/before/my-element.ts @@ -1,17 +1,17 @@ import {LitElement, html} from 'lit'; import {customElement, state} from 'lit/decorators.js'; -import {map} from 'lit/directives/map.js' +import {map} from 'lit/directives/map.js'; // TODO: import repeat directive. @customElement('my-element') class MyElement extends LitElement { @state() tasks = [ - { id: 'a', label: 'Learn Lit'}, - { id: 'b', label: 'Feed the cat'}, - { id: 'c', label: 'Go for a walk'}, - { id: 'd', label: 'Take a nap'}, - ] + {id: 'a', label: 'Learn Lit'}, + {id: 'b', label: 'Feed the cat'}, + {id: 'c', label: 'Go for a walk'}, + {id: 'd', label: 'Take a nap'}, + ]; render() { return html` @@ -26,7 +26,7 @@ class MyElement extends LitElement {
    • - ` + `, )} `; diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts index 34d740b9a..23aabd700 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/06/before/my-element.ts @@ -6,10 +6,10 @@ import {map} from 'lit/directives/map.js'; class MyElement extends LitElement { @state() things = [ - "Raindrops on roses", - "Whiskers on kittens", - "Bright copper kettles", - "Warm woolen mittens", + 'Raindrops on roses', + 'Whiskers on kittens', + 'Bright copper kettles', + 'Warm woolen mittens', ]; render() { @@ -24,7 +24,7 @@ class MyElement extends LitElement { ${thing} - ` + `, )} `; diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html index a332734e2..3e7a17991 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts index a92736926..48ec55ed8 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/07/before/my-element.ts @@ -6,10 +6,10 @@ import {map} from 'lit/directives/map.js'; class MyElement extends LitElement { @state() things = [ - "Raindrops on roses", - "Whiskers on kittens", - "Bright copper kettles", - "Warm woolen mittens", + 'Raindrops on roses', + 'Whiskers on kittens', + 'Bright copper kettles', + 'Warm woolen mittens', ]; render() { @@ -23,7 +23,7 @@ class MyElement extends LitElement { ${thing} - ` + `, )} `; diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md b/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md index 3baec8417..31f9a3f59 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/description.md @@ -1 +1 @@ -Learn how to take a list of items and render it on the page in multiple ways. \ No newline at end of file +Learn how to take a list of items and render it on the page in multiple ways. diff --git a/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json b/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json index 88a392e15..ebc9b9700 100644 --- a/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json +++ b/packages/lit-dev-content/samples/tutorials/working-with-lists/tutorial.json @@ -39,4 +39,4 @@ "noSolve": true } ] -} \ No newline at end of file +} diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts index 10e31167a..70355d533 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts @@ -9,13 +9,20 @@ class MyDispatcher extends LitElement { private _resetMessage?: ReturnType; protected render() { return html` - +
    ${this.message}
    `; } private _tryChange(e: Event) { const detail = {message: this.message}; - const event = new CustomEvent('checked', {detail, bubbles: true, composed: true, cancelable: true}); + const event = new CustomEvent('checked', { + detail, + bubbles: true, + composed: true, + cancelable: true, + }); this.dispatchEvent(event); if (event.defaultPrevented) { e.preventDefault(); @@ -24,7 +31,9 @@ class MyDispatcher extends LitElement { } protected updated() { clearTimeout(this._resetMessage); - this._resetMessage = - setTimeout(() => this.message = this.defaultMessage, 1000); + this._resetMessage = setTimeout( + () => (this.message = this.defaultMessage), + 1000, + ); } } diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts index c2acc3166..92d4df166 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts @@ -5,9 +5,8 @@ import {customElement, property} from 'lit/decorators.js'; class MyListener extends LitElement { @property() canCheck = false; protected render() { - return html` -

    -
    + return html`

    +

    ${this.canCheck ? 'Allowing' : 'Preventing'} check

    `; } diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts index c8f8b534d..de0390ff5 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts @@ -15,7 +15,9 @@ class MyElement extends LitElement { `; } private _clickHandler(e: Event) { - this.clicked = e.target === e.currentTarget ? - 'container' : (e.target as HTMLDivElement).textContent!; + this.clicked = + e.target === e.currentTarget + ? 'container' + : (e.target as HTMLDivElement).textContent!; } } diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts index 3e64679ff..98b1c332d 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts @@ -6,7 +6,7 @@ class MyDispatcher extends LitElement { @query('input', true) _input!: HTMLInputElement; protected render() { return html` -

    Name:

    +

    Name:

    `; } @@ -16,7 +16,7 @@ class MyDispatcher extends LitElement { const options = { detail: {name}, bubbles: true, - composed: true + composed: true, }; this.dispatchEvent(new CustomEvent('mylogin', options)); } diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts index 48ac9d745..83fa2d926 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts @@ -4,8 +4,7 @@ import {customElement, property} from 'lit/decorators.js'; class MyListener extends LitElement { @property() name = ''; protected render() { - return html` -

    + return html`

    Login: ${this.name}

    `; } private _loginListener(e: CustomEvent) { diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts index ee0bb9430..b0f923ffb 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts @@ -6,13 +6,17 @@ class MyElement extends LitElement { @property() shadowName = ''; constructor() { super(); - this.addEventListener('click', - (e: Event) => this.hostName = (e.target as Element).localName); + this.addEventListener( + 'click', + (e: Event) => (this.hostName = (e.target as Element).localName), + ); } protected createRenderRoot() { const root = super.createRenderRoot(); - root.addEventListener('click', - (e: Event) => this.shadowName = (e.target as Element).localName); + root.addEventListener( + 'click', + (e: Event) => (this.shadowName = (e.target as Element).localName), + ); return root; } protected render() { diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts index 39ea50868..4ef305cd4 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts @@ -8,9 +8,11 @@ class MyElement extends LitElement { protected render() { return html`
    - ${this.data.map(i => html` - - `)} + ${this.data.map( + (i) => html` + + `, + )}

    Clicked: ${this.clicked}

    Focused: ${this.focused}

    diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts index c4d722319..2f9513237 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts @@ -6,7 +6,9 @@ class MyDispatcher extends LitElement { @property({type: Boolean}) open = true; protected render() { return html` -

    +

    + +

    Content!

    `; } diff --git a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts index ecf396e38..b64b2a4d1 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts @@ -3,10 +3,11 @@ import {customElement, property} from 'lit/decorators.js'; @customElement('my-listener') class MyListener extends LitElement { - @property({type: Number}) height: number|null = null; + @property({type: Number}) height: number | null = null; protected render() { - return html` -

    + return html`

    + +

    Height: ${this.height}px

    `; } private _listener() { @@ -14,7 +15,9 @@ class MyListener extends LitElement { } protected updated() { if (this.height === null) { - requestAnimationFrame(() => this.height = this.getBoundingClientRect().height); + requestAnimationFrame( + () => (this.height = this.getBoundingClientRect().height), + ); } } } diff --git a/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html b/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html index 41814caa5..e0d58f0cb 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html +++ b/packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html @@ -1,14 +1,14 @@ - + - - - - + + + + - - Lit code sample - - - - + + Lit code sample + + + + diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html index 9bf7f3473..575cf9ad3 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html +++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html @@ -4,7 +4,7 @@

    Include me in slot "two".

    -
    +

    Include me in slot "one".

    diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts index 3d3210226..e04aab141 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts @@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js'; @customElement('default-root') export class DefaultRoot extends LitElement { protected render() { - return html` -

    By default template renders into shadow DOM.

    - `; + return html`

    By default template renders into shadow DOM.

    `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html index 68192b58c..ae4ed4c95 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html +++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html index c4385b0f0..bc48d1d54 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html +++ b/packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html @@ -4,7 +4,7 @@

    Render me in a slot

     -
    +

    Render me in a slot

    diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts index 95edb6d42..e5bea60ed 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/style/maps/my-element.ts @@ -6,13 +6,18 @@ import {styleMap} from 'lit/directives/style-map.js'; @customElement('my-element') export class MyElement extends LitElement { static styles = css` - .someclass { border: 1px solid red; padding: 4px; } - .anotherclass { background-color: navy; } + .someclass { + border: 1px solid red; + padding: 4px; + } + .anotherclass { + background-color: navy; + } `; @property() - classes = { someclass: true, anotherclass: true }; + classes = {someclass: true, anotherclass: true}; @property() - styles = { color: 'lightgreen', fontFamily: 'Roboto' }; + styles = {color: 'lightgreen', fontFamily: 'Roboto'}; protected render() { return html`
    diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts index 69c4ccd59..8771fc843 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/style/slottedselector/my-element.ts @@ -4,9 +4,15 @@ import {customElement} from 'lit/decorators.js'; @customElement('my-element') export class MyElement extends LitElement { static styles = css` - ::slotted(*) { font-family: Roboto; } - ::slotted(p) { color: blue; } - div ::slotted(*) { color: red; } + ::slotted(*) { + font-family: Roboto; + } + ::slotted(p) { + color: blue; + } + div ::slotted(*) { + color: red; + } `; protected render() { return html` diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts index 2a2551aa7..cb381ae30 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/my-element.ts @@ -6,8 +6,10 @@ import {SuperElement} from './super-element.js'; export class MyElement extends SuperElement { static styles = [ SuperElement.styles, - css`div { - color: red; - }` + css` + div { + color: red; + } + `, ]; } diff --git a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts index 9e2a75b98..0d99805b7 100644 --- a/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/components/style/superstyles/super-element.ts @@ -10,8 +10,6 @@ export class SuperElement extends LitElement { } ` as CSSResultGroup; protected render() { - return html` -
    Content
    - `; + return html`
    Content
    `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html index c8ac8f56d..305c46f49 100644 --- a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html +++ b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/index.html @@ -1,14 +1,14 @@ - + - - - - + + + + - - Lit code sample - - - - + + Lit code sample + + + + diff --git a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts index 5bb0576cd..d089ace83 100644 --- a/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/composition/mediator-pattern/mediator-element.ts @@ -28,10 +28,12 @@ export class MediatorElement extends LitElement { render() { return html`

    Nickname: ${this.name}

    - - `; + + `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts b/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts index e2a3c42f9..85ddfdc04 100644 --- a/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/controllers/mouse/my-element.ts @@ -12,7 +12,8 @@ class MyElement extends LitElement { 
             x: ${this.mouse.pos.x as number}
         y: ${this.mouse.pos.y as number}
-
    + `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts index 2c9d29ba7..a1204dd4b 100644 --- a/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/controllers/names/my-element.ts @@ -8,23 +8,22 @@ export class MyElement extends LitElement { private names = new NamesController(this); render() { - return html` -

    Names List

    - Kind: - ${this.names.render({ - complete: (result: Names.Result) => html` -

    List of ${this.names.kind}

    -
      ${result.map(i => html`
    • ${i.name}
      • `)} -
    - `, - initial: () => html`

    Select a kind...

    `, - pending: () => html`

    Loading ${this.names.kind}...

    `, - error: (e: any) => html`

    ${e}

    ` - })}`; + return html`

    Names List

    + Kind: + + ${this.names.render({ + complete: (result: Names.Result) => html` +

    List of ${this.names.kind}

    +
      + ${result.map((i) => html`
    • ${i.name}
      • `)} +
    + `, + initial: () => html`

    Select a kind...

    `, + pending: () => html`

    Loading ${this.names.kind}...

    `, + error: (e: any) => html`

    ${e}

    `, + })}`; } private _kindChange(e: Event) { diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts index c9e013425..71a1174cb 100644 --- a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts +++ b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-api.ts @@ -1,5 +1,5 @@ export type Result = Array<{name: string}>; -export type Kind = typeof kinds[number]; +export type Kind = (typeof kinds)[number]; export const baseUrl = 'https://swapi.py4e.com/api/'; @@ -10,5 +10,5 @@ export const kinds = [ 'species', 'planets', // Inserted to demo an error state. - 'error' + 'error', ] as const; diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts index decb19631..48417c4e6 100644 --- a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts +++ b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts @@ -11,7 +11,8 @@ export class NamesController { constructor(host: ReactiveControllerHost) { this.host = host; - this.task = new Task<[Names.Kind], Names.Result>(host, + this.task = new Task<[Names.Kind], Names.Result>( + host, async ([kind]: [Names.Kind]) => { if (!kind?.trim()) { return initialState; @@ -23,7 +24,8 @@ export class NamesController { } catch { throw new Error(`Failed to fetch "${kind}"`); } - }, () => [this.kind] + }, + () => [this.kind], ); } @@ -31,7 +33,9 @@ export class NamesController { this._kind = value; this.host.requestUpdate(); } - get kind() { return this._kind; } + get kind() { + return this._kind; + } render(renderFunctions: StatusRenderer) { return this.task.render(renderFunctions); diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts b/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts index 9286733c4..1cb0ee33c 100644 --- a/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/controllers/overview/my-element.ts @@ -15,5 +15,7 @@ class MyElement extends LitElement { } const timeFormat = new Intl.DateTimeFormat('en-US', { - hour: 'numeric', minute: 'numeric', second: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', }); diff --git a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html index 2e89f4951..92eba33e8 100644 --- a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html +++ b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.html @@ -1,4 +1,4 @@ - + lit-localize runtime example diff --git a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts index 6e9551010..cfb30f80e 100644 --- a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts +++ b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/index.ts @@ -30,7 +30,7 @@ window.addEventListener(LOCALE_STATUS_EVENT, ({detail}) => { spinner.setAttribute('hidden', ''); } else if (detail.status === 'error') { console.error( - `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage + `Error loading locale ${detail.errorLocale}: ` + detail.errorMessage, ); spinner.setAttribute('hidden', ''); } diff --git a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts index 59efb6d5a..de4ebe3b4 100644 --- a/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts +++ b/packages/lit-dev-content/samples/v2-docs/libraries/localization/runtime/locale-picker.ts @@ -11,7 +11,7 @@ import {allLocales} from './locale-codes.js'; import {localized} from '@lit/localize'; const localeNames: { - [L in typeof allLocales[number]]: string; + [L in (typeof allLocales)[number]]: string; } = { en: 'English', 'es-419': 'Español (Latinoamérica)‎', @@ -31,7 +31,7 @@ export class LocalePicker extends LitElement { (locale) => html`` + `, )} `; diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts index 94504aa63..f499d8d09 100644 --- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts +++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-one.ts @@ -1,10 +1,10 @@ import {LitElement, html} from 'lit'; import {customElement} from 'lit/decorators.js'; -import {Highlightable} from './highlightable.js' +import {Highlightable} from './highlightable.js'; @customElement('element-one') export class ElementOne extends Highlightable(LitElement) { - render(){ + render() { return this.renderHighlight(html`

    Simple highlight

    `); } } diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js index 8da1e16b3..3cc8a6e58 100644 --- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js +++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.js @@ -6,14 +6,20 @@ const HighlightableLitElement = Highlightable(LitElement); export class ElementTwo extends HighlightableLitElement { static styles = [ HighlightableLitElement.styles || [], - css`:host { display: block; }`, + css` + :host { + display: block; + } + `, ]; render() { return this.renderHighlight(html` `); diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts index 0e2990047..3d694a6a6 100644 --- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts +++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/element-two.ts @@ -1,6 +1,6 @@ import {LitElement, html, css} from 'lit'; import {customElement} from 'lit/decorators.js'; -import {Highlightable} from './highlightable.js' +import {Highlightable} from './highlightable.js'; const HighlightableLitElement = Highlightable(LitElement); @@ -8,14 +8,20 @@ const HighlightableLitElement = Highlightable(LitElement); export class ElementTwo extends HighlightableLitElement { static styles = [ HighlightableLitElement.styles || [], - css`:host { display: block; }` + css` + :host { + display: block; + } + `, ]; - render(){ + render() { return this.renderHighlight(html` `); diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js index fd0fa1497..26e1873fc 100644 --- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js +++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.js @@ -11,7 +11,11 @@ export const Highlightable = (superClass) => { // Adds some styles... static styles = [ superClass.styles ?? [], - css`.highlight { background: yellow; }`, + css` + .highlight { + background: yellow; + } + `, ]; constructor() { @@ -22,10 +26,9 @@ export const Highlightable = (superClass) => { // ...and a helper render method: renderHighlight(content) { - return html` -
    - ${content} -
    `; + return html`
    + ${content} +
    `; } } return HighlightableElement; diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts index c649e05e1..68f76b9ee 100644 --- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts +++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/highlightable.ts @@ -11,25 +11,29 @@ export declare class HighlightableInterface { } /* playground-fold-end */ -export const Highlightable = - >(superClass: T) => { - class HighlightableElement extends superClass { - // Adds some styles... - static styles = [ - (superClass as unknown as typeof LitElement).styles ?? [], - css`.highlight { background: yellow; }` - ]; +export const Highlightable = >( + superClass: T, +) => { + class HighlightableElement extends superClass { + // Adds some styles... + static styles = [ + (superClass as unknown as typeof LitElement).styles ?? [], + css` + .highlight { + background: yellow; + } + `, + ]; - // ...a public `highlight` property/attribute... - @property({type: Boolean}) highlight = false; + // ...a public `highlight` property/attribute... + @property({type: Boolean}) highlight = false; - // ...and a helper render method: - renderHighlight(content: unknown) { - return html` -
    - ${content} -
    `; - } - } - return HighlightableElement as Constructor & T; - }; + // ...and a helper render method: + renderHighlight(content: unknown) { + return html`
    + ${content} +
    `; + } + } + return HighlightableElement as Constructor & T; +}; diff --git a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html index 6416a4125..9142728cd 100644 --- a/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html +++ b/packages/lit-dev-content/samples/v2-docs/mixins/highlightable/index.html @@ -1,14 +1,14 @@ - + - - - - - - lit-element code sample - - - - - + + + + + + lit-element code sample + + + + + diff --git a/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html b/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html index 32dfee477..a7a3601a3 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/compose/index.html @@ -1,11 +1,11 @@ - + - - - - - lit-element code sample - + + + + + lit-element code sample + diff --git a/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts b/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts index cb1278529..29e9353f6 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/compose/my-page.ts @@ -1,10 +1,8 @@ import {LitElement, html} from 'lit'; import {customElement, property} from 'lit/decorators.js'; - @customElement('my-page') class MyPage extends LitElement { - @property({attribute: false}) article = { title: 'My Nifty Article', @@ -25,8 +23,7 @@ class MyPage extends LitElement { render() { return html` - ${this.headerTemplate()} - ${this.articleTemplate()} + ${this.headerTemplate()} ${this.articleTemplate()} ${this.footerTemplate()} `; } diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html index 32dfee477..a7a3601a3 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/index.html @@ -1,11 +1,11 @@ - + - - - - - lit-element code sample - + + + + + lit-element code sample + diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts index df8cc1e6b..97e8c2482 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-article.ts @@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js'; @customElement('my-article') class MyArticle extends LitElement { render() { - return html` -
    article
    - `; + return html`
    article
    `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts index 5a7bb688e..2bc0a910b 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-footer.ts @@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js'; @customElement('my-footer') class MyFooter extends LitElement { render() { - return html` -
    footer
    - `; + return html`
    footer
    `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts index 29a4af465..8014f775a 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/composeimports/my-header.ts @@ -4,8 +4,6 @@ import {customElement} from 'lit/decorators.js'; @customElement('my-header') class MyHeader extends LitElement { render() { - return html` -
    header
    - `; + return html`
    header
    `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/templates/define/index.html b/packages/lit-dev-content/samples/v2-docs/templates/define/index.html index 241701161..8c658e1b2 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/define/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/define/index.html @@ -1,12 +1,12 @@ - + - - - - - Lit code sample - - - - + + + + + Lit code sample + + + + diff --git a/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts index d4c96c980..7934ac8fe 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/define/my-element.ts @@ -3,8 +3,7 @@ import {customElement} from 'lit/decorators.js'; @customElement('my-element') class MyElement extends LitElement { - - render(){ + render() { return html`

    Hello from my template.

    `; } } diff --git a/packages/lit-dev-content/samples/v2-docs/templates/design/index.html b/packages/lit-dev-content/samples/v2-docs/templates/design/index.html index cb310edd0..674e46248 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/design/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/design/index.html @@ -1,12 +1,12 @@ - + - - - - - lit-element code sample - - - - + + + + + lit-element code sample + + + + diff --git a/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts b/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts index b0b6a2bad..982dd1aba 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/design/update-properties.ts @@ -3,19 +3,16 @@ import {customElement, property} from 'lit/decorators.js'; @customElement('update-properties') class UpdateProperties extends LitElement { - @property() message: string = 'Loading...'; constructor() { super(); - this.loadStuff().then((content) => this.message = content); + this.loadStuff().then((content) => (this.message = content)); } render() { - return html` -

    ${this.message}

    - `; + return html`

    ${this.message}

    `; } loadStuff() { diff --git a/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts index 20651bbdf..73279aac7 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/expressions/my-element.ts @@ -10,13 +10,16 @@ class MyElement extends LitElement { /* playground-fold-end */ render() { - return html` -

    + return html`

    ${this.greeting} - +

    - ${this.show ? html` -
      ${this.todos.map(i => html`
    • ${i}
      • `)}
    - ` : ''}`; - }/* playground-fold */ + ${this.show + ? html` +
      + ${this.todos.map((i) => html`
    • ${i}
      • `)} +
    + ` + : ''}`; + } /* playground-fold */ } diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js index fb56fe7af..5ad5cb829 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.js @@ -2,22 +2,21 @@ import {LitElement, html} from 'lit'; class MyElement extends LitElement { -/* playground-fold-end */ - -static properties = { - colors: {}, -}; + /* playground-fold-end */ -constructor() { - super(); - this.colors = ['red', 'green', 'blue']; -} + static properties = { + colors: {}, + }; -render() { - return html`

    Colors: ${this.colors}

    `; -} -/* playground-fold */ + constructor() { + super(); + this.colors = ['red', 'green', 'blue']; + } + render() { + return html`

    Colors: ${this.colors}

    `; + } + /* playground-fold */ } customElements.define('my-element', MyElement); /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts index e90fffa67..76539b680 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-arrays/my-element.ts @@ -4,14 +4,13 @@ import {customElement, property} from 'lit/decorators.js'; @customElement('my-element') class MyElement extends LitElement { -/* playground-fold-end */ - -@property() colors = ['red', 'green', 'blue']; + /* playground-fold-end */ -render() { - return html`

    Colors: ${this.colors}

    `; -} -/* playground-fold */ + @property() colors = ['red', 'green', 'blue']; + render() { + return html`

    Colors: ${this.colors}

    `; + } + /* playground-fold */ } /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js index 18b0fc2f0..392746450 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.js @@ -2,28 +2,27 @@ import {LitElement, html} from 'lit'; class MyElement extends LitElement { -/* playground-fold-end */ - -static properties = { - colors: {}, -}; + /* playground-fold-end */ -constructor() { - super(); - this.colors = ['red', 'green', 'blue']; -} + static properties = { + colors: {}, + }; -render() { - return html` -
      - ${this.colors.map((color) => - html`
    • ${color}
      • ` - )} -
    - `; -} -/* playground-fold */ + constructor() { + super(); + this.colors = ['red', 'green', 'blue']; + } + render() { + return html` +
      + ${this.colors.map( + (color) => html`
    • ${color}
      • `, + )} +
    + `; + } + /* playground-fold */ } customElements.define('my-element', MyElement); /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts index 97fb8afa3..11ac98748 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-map/my-element.ts @@ -4,20 +4,19 @@ import {customElement, property} from 'lit/decorators.js'; @customElement('my-element') class MyElement extends LitElement { -/* playground-fold-end */ - -@property() colors = ['red', 'green', 'blue']; + /* playground-fold-end */ -render() { - return html` -
      - ${this.colors.map((color) => - html`
    • ${color}
      • ` - )} -
    - `; -} -/* playground-fold */ + @property() colors = ['red', 'green', 'blue']; + render() { + return html` +
      + ${this.colors.map( + (color) => html`
    • ${color}
      • `, + )} +
    + `; + } + /* playground-fold */ } /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts index 9a48488ae..db180c68c 100644 --- a/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts +++ b/packages/lit-dev-content/samples/v2-docs/templates/lists-repeat/my-element.ts @@ -8,35 +8,42 @@ import {repeat} from 'lit/directives/repeat.js'; @customElement('my-element') class MyElement extends LitElement { + private sort = 1; -private sort = 1; + @property() employees = [ + {id: 0, givenName: 'Fred', familyName: 'Flintstone'}, + {id: 1, givenName: 'George', familyName: 'Jetson'}, + {id: 2, givenName: 'Barney', familyName: 'Rubble'}, + {id: 3, givenName: 'Cosmo', familyName: 'Spacely'}, + ]; + /* playground-fold-end */ -@property() employees = [ - {id: 0, givenName: 'Fred', familyName: 'Flintstone'}, - {id: 1, givenName: 'George', familyName: 'Jetson'}, - {id: 2, givenName: 'Barney', familyName: 'Rubble'}, - {id: 3, givenName: 'Cosmo', familyName: 'Spacely'} -]; -/* playground-fold-end */ - -render() { - return html` -
      - ${repeat(this.employees, (employee) => employee.id, (employee, index) => html` -
    • ${index}: ${employee.familyName}, ${employee.givenName}
      • - `)} -
    - - `; -} -/* playground-fold */ - -private toggleSort() { - this.sort *= -1; - this.employees = [...this.employees.sort((a, b) => - this.sort * (a.familyName.localeCompare(b.familyName) || - a.givenName.localeCompare(b.givenName)))]; -} + render() { + return html` +
      + ${repeat( + this.employees, + (employee) => employee.id, + (employee, index) => html` +
    • ${index}: ${employee.familyName}, ${employee.givenName}
      • + `, + )} +
    + + `; + } + /* playground-fold */ + private toggleSort() { + this.sort *= -1; + this.employees = [ + ...this.employees.sort( + (a, b) => + this.sort * + (a.familyName.localeCompare(b.familyName) || + a.givenName.localeCompare(b.givenName)), + ), + ]; + } } /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts b/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts index 2d149f146..91233aaec 100644 --- a/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts +++ b/packages/lit-dev-content/samples/v2-docs/what-is-lit/icons.ts @@ -1,5 +1,45 @@ import {html} from 'lit'; -export const replay = html`Replay`; -export const pause = html`Pause`; -export const play = html`Play`; +export const replay = html` + Replay + + + + + + + + + +`; +export const pause = html` + Pause + + +`; +export const play = html` + Play + + +`; diff --git a/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html b/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html index 00c26fcf6..243f398fb 100644 --- a/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html +++ b/packages/lit-dev-content/samples/v2-docs/what-is-lit/index.html @@ -1,7 +1,11 @@ - - - + + + + diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js index fb56fe7af..5ad5cb829 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.js @@ -2,22 +2,21 @@ import {LitElement, html} from 'lit'; class MyElement extends LitElement { -/* playground-fold-end */ - -static properties = { - colors: {}, -}; + /* playground-fold-end */ -constructor() { - super(); - this.colors = ['red', 'green', 'blue']; -} + static properties = { + colors: {}, + }; -render() { - return html`

    Colors: ${this.colors}

    `; -} -/* playground-fold */ + constructor() { + super(); + this.colors = ['red', 'green', 'blue']; + } + render() { + return html`

    Colors: ${this.colors}

    `; + } + /* playground-fold */ } customElements.define('my-element', MyElement); /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts index e90fffa67..76539b680 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-arrays/my-element.ts @@ -4,14 +4,13 @@ import {customElement, property} from 'lit/decorators.js'; @customElement('my-element') class MyElement extends LitElement { -/* playground-fold-end */ - -@property() colors = ['red', 'green', 'blue']; + /* playground-fold-end */ -render() { - return html`

    Colors: ${this.colors}

    `; -} -/* playground-fold */ + @property() colors = ['red', 'green', 'blue']; + render() { + return html`

    Colors: ${this.colors}

    `; + } + /* playground-fold */ } /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js index 18b0fc2f0..392746450 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.js @@ -2,28 +2,27 @@ import {LitElement, html} from 'lit'; class MyElement extends LitElement { -/* playground-fold-end */ - -static properties = { - colors: {}, -}; + /* playground-fold-end */ -constructor() { - super(); - this.colors = ['red', 'green', 'blue']; -} + static properties = { + colors: {}, + }; -render() { - return html` -
      - ${this.colors.map((color) => - html`
    • ${color}
      • ` - )} -
    - `; -} -/* playground-fold */ + constructor() { + super(); + this.colors = ['red', 'green', 'blue']; + } + render() { + return html` +
      + ${this.colors.map( + (color) => html`
    • ${color}
      • `, + )} +
    + `; + } + /* playground-fold */ } customElements.define('my-element', MyElement); /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts index 97fb8afa3..11ac98748 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-map/my-element.ts @@ -4,20 +4,19 @@ import {customElement, property} from 'lit/decorators.js'; @customElement('my-element') class MyElement extends LitElement { -/* playground-fold-end */ - -@property() colors = ['red', 'green', 'blue']; + /* playground-fold-end */ -render() { - return html` -
      - ${this.colors.map((color) => - html`
    • ${color}
      • ` - )} -
    - `; -} -/* playground-fold */ + @property() colors = ['red', 'green', 'blue']; + render() { + return html` +
      + ${this.colors.map( + (color) => html`
    • ${color}
      • `, + )} +
    + `; + } + /* playground-fold */ } /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html index fe1517255..f149c266f 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/index.html @@ -1,5 +1,7 @@ diff --git a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts index 9a48488ae..db180c68c 100644 --- a/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts +++ b/packages/lit-dev-content/samples/v3-docs/templates/lists-repeat/my-element.ts @@ -8,35 +8,42 @@ import {repeat} from 'lit/directives/repeat.js'; @customElement('my-element') class MyElement extends LitElement { + private sort = 1; -private sort = 1; + @property() employees = [ + {id: 0, givenName: 'Fred', familyName: 'Flintstone'}, + {id: 1, givenName: 'George', familyName: 'Jetson'}, + {id: 2, givenName: 'Barney', familyName: 'Rubble'}, + {id: 3, givenName: 'Cosmo', familyName: 'Spacely'}, + ]; + /* playground-fold-end */ -@property() employees = [ - {id: 0, givenName: 'Fred', familyName: 'Flintstone'}, - {id: 1, givenName: 'George', familyName: 'Jetson'}, - {id: 2, givenName: 'Barney', familyName: 'Rubble'}, - {id: 3, givenName: 'Cosmo', familyName: 'Spacely'} -]; -/* playground-fold-end */ - -render() { - return html` -
      - ${repeat(this.employees, (employee) => employee.id, (employee, index) => html` -
    • ${index}: ${employee.familyName}, ${employee.givenName}
      • - `)} -
    - - `; -} -/* playground-fold */ - -private toggleSort() { - this.sort *= -1; - this.employees = [...this.employees.sort((a, b) => - this.sort * (a.familyName.localeCompare(b.familyName) || - a.givenName.localeCompare(b.givenName)))]; -} + render() { + return html` +
      + ${repeat( + this.employees, + (employee) => employee.id, + (employee, index) => html` +
    • ${index}: ${employee.familyName}, ${employee.givenName}
      • + `, + )} +
    + + `; + } + /* playground-fold */ + private toggleSort() { + this.sort *= -1; + this.employees = [ + ...this.employees.sort( + (a, b) => + this.sort * + (a.familyName.localeCompare(b.familyName) || + a.givenName.localeCompare(b.givenName)), + ), + ]; + } } /* playground-fold-end */ diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts b/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts index 2d149f146..91233aaec 100644 --- a/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts +++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/icons.ts @@ -1,5 +1,45 @@ import {html} from 'lit'; -export const replay = html`Replay`; -export const pause = html`Pause`; -export const play = html`Play`; +export const replay = html` + Replay + + + + + + + + + +`; +export const pause = html` + Pause + + +`; +export const play = html` + Play + + +`; diff --git a/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html b/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html index 00c26fcf6..243f398fb 100644 --- a/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html +++ b/packages/lit-dev-content/samples/v3-docs/what-is-lit/index.html @@ -1,7 +1,11 @@ - - - + + + +