├── html-test ├── README.md ├── index.js ├── my-element.js ├── demo │ └── index.html ├── src │ └── MyElement.js ├── package.json └── test │ └── my-element.test.html ├── import-maps ├── README.md ├── index.js ├── my-element.js ├── package.json ├── src │ └── MyElement.js ├── test │ └── my-element.test.js └── web-test-runner.config.mjs ├── json-modules ├── README.md ├── src │ ├── data.json │ └── MyElement.js ├── index.js ├── my-element.js ├── web-test-runner.config.mjs ├── demo │ └── index.html ├── web-dev-server.config.mjs ├── test │ └── my-element.test.js └── package.json ├── lit-element ├── README.md ├── index.js ├── my-element.js ├── demo │ └── index.html ├── src │ └── MyElement.js ├── package.json └── test │ └── my-element.test.js ├── snowpack-react ├── .npmignore ├── .prettierrc ├── public │ ├── robots.txt │ ├── favicon.ico │ └── index.html ├── web-test-runner.config.js ├── src │ ├── App.test.jsx │ ├── index.css │ ├── index.jsx │ ├── App.css │ ├── App.jsx │ └── logo.svg ├── snowpack.config.js ├── README.md └── package.json ├── storybook ├── README.md ├── index.js ├── .storybook │ ├── main.js │ └── server.config.mjs ├── my-element.js ├── package.json ├── src │ └── MyElement.js └── stories │ └── MyElement.stories.js ├── visual-regression ├── README.md ├── index.js ├── my-element.js ├── demo │ └── index.html ├── web-test-runner.config.mjs ├── test │ └── my-element.test.js ├── src │ └── MyElement.js └── package.json ├── snowpack-lit ├── src │ ├── index.ts │ ├── app-root.test.ts │ └── app-root.ts ├── .gitignore ├── .prettierrc ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── index.css │ └── index.html ├── babel.config.json ├── web-test-runner.config.js ├── snowpack.config.js ├── README.md ├── tsconfig.json ├── package.json ├── LICENSE └── types │ └── static.d.ts ├── mock-es-module ├── README.md ├── test │ ├── mocks │ │ └── postData.js │ └── postMessage.test.html ├── src │ ├── postData.js │ └── postMessage.js ├── web-test-runner.config.mjs └── package.json ├── snowpack-svelte ├── .gitignore ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── index.html │ └── logo.svg ├── web-test-runner.config.js ├── src │ ├── App.test.js │ ├── index.js │ └── App.svelte ├── package.json ├── snowpack.config.js ├── README.md └── LICENSE ├── playwright ├── index.js ├── my-element.js ├── demo │ └── index.html ├── src │ └── MyElement.js ├── package.json └── test │ └── my-element.test.js ├── puppeteer ├── index.js ├── my-element.js ├── demo │ └── index.html ├── src │ └── MyElement.js ├── package.json └── test │ └── my-element.test.js ├── saucelabs ├── index.js ├── my-element.js ├── demo │ └── index.html ├── src │ └── MyElement.js ├── package.json ├── test │ └── my-element.test.js └── web-test-runner.config.mjs ├── lit-element-ts-esbuild ├── index.ts ├── my-element.ts ├── web-dev-server.config.mjs ├── web-test-runner.config.mjs ├── demo │ └── index.html ├── tsconfig.json ├── src │ └── MyElement.ts ├── package.json └── test │ └── my-element.test.ts ├── lit-element-ts-tsc ├── index.ts ├── my-element.ts ├── demo │ └── index.html ├── tsconfig.json ├── src │ └── MyElement.ts ├── package.json └── test │ └── my-element.test.ts ├── preact-htm ├── web-test-runner.config.mjs ├── src │ └── App.js ├── test │ ├── test-helpers.js │ └── app.test.js ├── demo │ └── index.html └── package.json ├── react-htm ├── web-test-runner.config.mjs ├── src │ └── App.js ├── test │ ├── test-helpers.js │ └── app.test.js ├── demo │ └── index.html └── package.json ├── guides ├── dev-server │ ├── loading-modules │ │ ├── src │ │ │ └── message.js │ │ ├── package.json │ │ └── demo │ │ │ └── index.html │ ├── getting-started │ │ ├── demo │ │ │ └── index.html │ │ └── package.json │ ├── writing-plugins │ │ ├── demo │ │ │ ├── index.html │ │ │ └── env.html │ │ ├── src │ │ │ └── logger.js │ │ ├── web-dev-server.env.mjs │ │ ├── web-dev-server.inject.mjs │ │ └── package.json │ ├── typescript-and-jsx │ │ ├── src │ │ │ ├── logger.ts │ │ │ └── app.jsx │ │ ├── web-dev-server.ts.mjs │ │ ├── demo │ │ │ ├── jsx.html │ │ │ └── ts.html │ │ ├── web-dev-server.jsx.mjs │ │ └── package.json │ ├── using-plugins │ │ ├── src │ │ │ ├── logger.js │ │ │ └── app.jsx │ │ ├── demo │ │ │ ├── babel.html │ │ │ ├── index.html │ │ │ └── commonjs.html │ │ ├── web-dev-server.commonjs.mjs │ │ ├── web-dev-server.config.mjs │ │ ├── web-dev-server.babel.mjs │ │ └── package.json │ └── proxy-to-other-servers │ │ ├── web-dev-server.config.mjs │ │ ├── api-server.mjs │ │ ├── package.json │ │ └── demo │ │ └── index.html └── test-runner │ ├── getting-started │ ├── src │ │ └── sum.js │ ├── test │ │ └── sum.test.js │ └── package.json │ ├── responsive │ ├── src │ │ ├── isMobile.js │ │ └── styles.css │ ├── package.json │ └── test │ │ ├── isMobile.test.js │ │ └── my-card.test.html │ ├── playwright │ ├── src │ │ ├── sum.js │ │ └── calc.js │ ├── test │ │ ├── calc.test.js │ │ └── sum.test.js │ └── package.json │ ├── watch-and-debug │ ├── src │ │ ├── sum.js │ │ └── calc.js │ ├── test │ │ ├── calc.test.js │ │ └── sum.test.js │ └── package.json │ ├── typescript │ ├── src │ │ ├── sum.ts │ │ ├── sum.js │ │ └── sum.js.map │ ├── test │ │ ├── sum.test.ts │ │ ├── sum.test.js │ │ └── sum.test.js.map │ ├── package.json │ └── tsconfig.json │ └── test-runner-coverage │ ├── src │ └── calc.js │ ├── package.json │ └── test │ └── calc.test.js ├── renovate.json ├── react-jsx ├── src │ └── App.jsx ├── demo │ ├── index.html │ └── index.jsx ├── web-dev-server.config.mjs ├── web-test-runner.config.mjs ├── test │ ├── test-helpers.jsx │ └── app.test.jsx └── package.json ├── preact-tsx ├── demo │ ├── index.tsx │ └── index.html ├── src │ └── App.tsx ├── web-dev-server.config.mjs ├── web-test-runner.config.mjs ├── test │ ├── test-helpers.tsx │ └── app.test.tsx ├── package.json └── tsconfig.json ├── preact-jsx ├── demo │ ├── index.jsx │ └── index.html ├── src │ └── App.jsx ├── web-dev-server.config.mjs ├── web-test-runner.config.mjs ├── test │ ├── test-helpers.jsx │ └── app.test.jsx └── package.json ├── react-tsx ├── demo │ ├── index.html │ └── index.tsx ├── src │ └── App.tsx ├── web-dev-server.config.mjs ├── web-test-runner.config.mjs ├── test │ ├── test-helpers.tsx │ └── app.test.tsx ├── package.json └── tsconfig.json ├── .gitignore └── .github └── workflows └── verify.yml /html-test/README.md: -------------------------------------------------------------------------------- 1 | # Lit-element example -------------------------------------------------------------------------------- /import-maps/README.md: -------------------------------------------------------------------------------- 1 | # Import maps example -------------------------------------------------------------------------------- /json-modules/README.md: -------------------------------------------------------------------------------- 1 | # Lit-element example -------------------------------------------------------------------------------- /lit-element/README.md: -------------------------------------------------------------------------------- 1 | # Lit-element example -------------------------------------------------------------------------------- /snowpack-react/.npmignore: -------------------------------------------------------------------------------- 1 | .build 2 | build -------------------------------------------------------------------------------- /storybook/README.md: -------------------------------------------------------------------------------- 1 | # Lit-element example -------------------------------------------------------------------------------- /visual-regression/README.md: -------------------------------------------------------------------------------- 1 | # Lit-element example -------------------------------------------------------------------------------- /snowpack-lit/src/index.ts: -------------------------------------------------------------------------------- 1 | import './app-root'; 2 | -------------------------------------------------------------------------------- /json-modules/src/data.json: -------------------------------------------------------------------------------- 1 | { "message": "Hello world" } 2 | -------------------------------------------------------------------------------- /mock-es-module/README.md: -------------------------------------------------------------------------------- 1 | # import maps with html test example -------------------------------------------------------------------------------- /snowpack-lit/.gitignore: -------------------------------------------------------------------------------- 1 | .snowpack 2 | build 3 | node_modules -------------------------------------------------------------------------------- /snowpack-svelte/.gitignore: -------------------------------------------------------------------------------- 1 | .snowpack 2 | build 3 | node_modules -------------------------------------------------------------------------------- /html-test/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /import-maps/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /json-modules/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /lit-element/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /playwright/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /puppeteer/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /saucelabs/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /storybook/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /visual-regression/index.js: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/index.ts: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/index.ts: -------------------------------------------------------------------------------- 1 | export { MyElement } from './src/MyElement.js'; 2 | -------------------------------------------------------------------------------- /preact-htm/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | nodeResolve: true, 3 | }; 4 | -------------------------------------------------------------------------------- /react-htm/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | nodeResolve: true, 3 | }; 4 | -------------------------------------------------------------------------------- /snowpack-lit/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /guides/dev-server/loading-modules/src/message.js: -------------------------------------------------------------------------------- 1 | export const message = "This is a message"; 2 | -------------------------------------------------------------------------------- /snowpack-react/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /guides/test-runner/getting-started/src/sum.js: -------------------------------------------------------------------------------- 1 | export function sum(a, b) { 2 | return a + b; 3 | } 4 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ], 5 | "automerge": true 6 | } 7 | -------------------------------------------------------------------------------- /mock-es-module/test/mocks/postData.js: -------------------------------------------------------------------------------- 1 | import { stub } from 'sinon'; 2 | 3 | export const postData = stub(); 4 | -------------------------------------------------------------------------------- /snowpack-lit/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /snowpack-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /snowpack-svelte/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /storybook/.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], 3 | }; -------------------------------------------------------------------------------- /snowpack-lit/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/modernweb-dev/example-projects/HEAD/snowpack-lit/public/favicon.ico -------------------------------------------------------------------------------- /snowpack-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/modernweb-dev/example-projects/HEAD/snowpack-react/public/favicon.ico -------------------------------------------------------------------------------- /guides/dev-server/getting-started/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello world! 5 | 6 | -------------------------------------------------------------------------------- /snowpack-svelte/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/modernweb-dev/example-projects/HEAD/snowpack-svelte/public/favicon.ico -------------------------------------------------------------------------------- /guides/dev-server/writing-plugins/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Hello world!

5 | 6 | -------------------------------------------------------------------------------- /html-test/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /import-maps/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /json-modules/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /lit-element/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /playwright/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /puppeteer/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /react-jsx/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export default function App() { 3 | return

Hello, World!

4 | } 5 | -------------------------------------------------------------------------------- /saucelabs/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /storybook/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/my-element.ts: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /visual-regression/my-element.js: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement.js'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /guides/test-runner/responsive/src/isMobile.js: -------------------------------------------------------------------------------- 1 | export function isMobile() { 2 | return !!window.matchMedia('(max-width: 1024px)').matches; 3 | } 4 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/my-element.ts: -------------------------------------------------------------------------------- 1 | import { MyElement } from './src/MyElement'; 2 | 3 | window.customElements.define('my-element', MyElement); 4 | -------------------------------------------------------------------------------- /preact-tsx/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import { render, h } from "preact"; 2 | import App from "../src/App"; 3 | 4 | render(, document.getElementById('app')!); -------------------------------------------------------------------------------- /preact-jsx/demo/index.jsx: -------------------------------------------------------------------------------- 1 | import { render, h } from "preact"; 2 | import App from "../src/App.jsx"; 3 | 4 | render(, document.getElementById('app')); -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/src/logger.ts: -------------------------------------------------------------------------------- 1 | const logger: Console = console; 2 | 3 | export function logMessage(msg: string) { 4 | logger.log(msg); 5 | } -------------------------------------------------------------------------------- /json-modules/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import devServerConfig from "./web-dev-server.config.mjs"; 2 | 3 | export default { 4 | ...devServerConfig, 5 | }; 6 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/src/logger.js: -------------------------------------------------------------------------------- 1 | export function logDebug(msg) { 2 | if (process.env.NODE_ENV === "development") { 3 | console.log(msg); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /mock-es-module/src/postData.js: -------------------------------------------------------------------------------- 1 | export function postData(endpoint, data) { 2 | return fetch(`/api/${endpoint}`, { method: 'POST', body: JSON.stringify(data) }); 3 | } 4 | -------------------------------------------------------------------------------- /mock-es-module/src/postMessage.js: -------------------------------------------------------------------------------- 1 | import { postData } from './postData.js'; 2 | 3 | export function sendMessage(message) { 4 | return postData('message', { message }); 5 | } 6 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | plugins: [esbuildPlugin({ ts: true })], 5 | }; 6 | -------------------------------------------------------------------------------- /preact-jsx/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /preact-tsx/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /react-jsx/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /react-tsx/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /guides/test-runner/playwright/src/sum.js: -------------------------------------------------------------------------------- 1 | export function sum(...numbers) { 2 | let sum = 0; 3 | for (const number of numbers) { 4 | sum += number; 5 | } 6 | return sum; 7 | } 8 | -------------------------------------------------------------------------------- /html-test/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | plugins: [esbuildPlugin({ ts: true })], 5 | }; 6 | -------------------------------------------------------------------------------- /playwright/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /puppeteer/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /react-tsx/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export default function App() { 3 | return ( 4 |
5 |

Hello, World!

6 |
7 | ); 8 | } 9 | -------------------------------------------------------------------------------- /saucelabs/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /guides/test-runner/watch-and-debug/src/sum.js: -------------------------------------------------------------------------------- 1 | export function sum(...numbers) { 2 | let sum = 0; 3 | for (const number of numbers) { 4 | sum += number; 5 | } 6 | return sum; 7 | } 8 | -------------------------------------------------------------------------------- /json-modules/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lit-element/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /mock-es-module/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { importMapsPlugin } from "@web/dev-server-import-maps"; 2 | 3 | export default { 4 | plugins: [ 5 | importMapsPlugin(), 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /react-jsx/demo/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from "../src/App.jsx"; 4 | 5 | ReactDOM.render(, document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /react-tsx/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from "../src/App"; 4 | 5 | ReactDOM.render(, document.getElementById('app')!); 6 | -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/web-dev-server.ts.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | plugins: [esbuildPlugin({ ts: true })], 5 | }; 6 | 7 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/src/sum.ts: -------------------------------------------------------------------------------- 1 | export function sum(...numbers: number[]) { 2 | let sum = 0; 3 | for (const number of numbers) { 4 | sum += number; 5 | } 6 | return sum; 7 | } 8 | -------------------------------------------------------------------------------- /visual-regression/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/src/app.jsx: -------------------------------------------------------------------------------- 1 | import { h, render } from 'preact'; 2 | 3 | function App() { 4 | return

Hello world

5 | } 6 | 7 | render(, document.getElementById('app')); 8 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /visual-regression/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { visualRegressionPlugin } from "@web/test-runner-visual-regression/plugin"; 2 | 3 | export default { 4 | plugins: [visualRegressionPlugin()], 5 | }; 6 | -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/src/app.jsx: -------------------------------------------------------------------------------- 1 | import { h, render } from 'preact'; 2 | 3 | function App() { 4 | return

Hello world

5 | } 6 | 7 | render(, document.getElementById('app')); 8 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/demo/babel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/demo/jsx.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /guides/dev-server/writing-plugins/src/logger.js: -------------------------------------------------------------------------------- 1 | import { environment } from "/environment.js"; 2 | 3 | export function logDebug(msg) { 4 | if (environment === "development") { 5 | console.log(msg); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /guides/test-runner/responsive/src/styles.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background: rgb(0, 255, 0); 3 | } 4 | 5 | @media screen and (min-width: 1024px) { 6 | .card { 7 | background: rgb(255, 0, 0); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/src/sum.js: -------------------------------------------------------------------------------- 1 | export function sum(...numbers) { 2 | let sum = 0; 3 | for (const number of numbers) { 4 | sum += number; 5 | } 6 | return sum; 7 | } 8 | //# sourceMappingURL=sum.js.map -------------------------------------------------------------------------------- /guides/test-runner/playwright/src/calc.js: -------------------------------------------------------------------------------- 1 | import { sum } from './sum.js'; 2 | 3 | export function calc(inputString) { 4 | const numbers = inputString.split('+').map(number => parseInt(number)); 5 | return sum(...numbers); 6 | } 7 | -------------------------------------------------------------------------------- /guides/test-runner/watch-and-debug/src/calc.js: -------------------------------------------------------------------------------- 1 | import { sum } from './sum.js'; 2 | 3 | export function calc(inputString) { 4 | const numbers = inputString.split('+').map(number => parseInt(number)); 5 | return sum(...numbers); 6 | } 7 | -------------------------------------------------------------------------------- /storybook/.storybook/server.config.mjs: -------------------------------------------------------------------------------- 1 | import { storybookPlugin } from "@web/dev-server-storybook"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | open: true, 6 | plugins: [storybookPlugin({ type: "web-components" })], 7 | }; 8 | -------------------------------------------------------------------------------- /json-modules/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, LitElement } from "lit-element"; 2 | import data from "./data.json"; 3 | 4 | export class MyElement extends LitElement { 5 | render() { 6 | return html`

${data.message}

`; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /preact-jsx/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { h, Component } from 'preact'; 2 | 3 | export default class App extends Component { 4 | render() { 5 | return ( 6 |
7 |

Hello, World!

8 |
9 | ); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /preact-tsx/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { h, Component } from 'preact'; 2 | 3 | export default class App extends Component { 4 | render() { 5 | return ( 6 |
7 |

Hello, World!

8 |
9 | ); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/web-dev-server.jsx.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | plugins: [ 5 | esbuildPlugin({ jsx: true, jsxFactory: "h", jsxFragment: "Fragment" }), 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /preact-jsx/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ jsx: true, jsxFactory: "h", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /preact-jsx/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ jsx: true, jsxFactory: "h", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /preact-tsx/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ tsx: true, jsxFactory: "h", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /preact-tsx/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ tsx: true, jsxFactory: "h", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /guides/test-runner/getting-started/test/sum.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { sum } from "../src/sum.js"; 3 | 4 | it("sums up 2 numbers", () => { 5 | expect(sum(1, 1)).to.equal(2); 6 | expect(sum(3, 12)).to.equal(15); 7 | }); 8 | -------------------------------------------------------------------------------- /snowpack-lit/public/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 3 | color: white; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | -------------------------------------------------------------------------------- /guides/dev-server/writing-plugins/demo/env.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | -------------------------------------------------------------------------------- /snowpack-lit/babel.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-typescript"], 3 | "plugins": [ 4 | ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }], 5 | ["@babel/plugin-proposal-class-properties", { "loose": true }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /guides/test-runner/playwright/test/calc.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { calc } from '../src/calc.js'; 3 | 4 | it('calculates sums', () => { 5 | expect(calc('1 + 1 + 1')).to.equal(3); 6 | expect(calc('2 + 6 + 12')).to.equal(20); 7 | }); 8 | -------------------------------------------------------------------------------- /react-jsx/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ jsx: true, jsxFactory: "React.createElement", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /react-tsx/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ tsx: true, jsxFactory: "React.createElement", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /guides/test-runner/watch-and-debug/test/calc.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { calc } from '../src/calc.js'; 3 | 4 | it('calculates sums', () => { 5 | expect(calc('1 + 1 + 1')).to.equal(3); 6 | expect(calc('2 + 6 + 12')).to.equal(20); 7 | }); 8 | -------------------------------------------------------------------------------- /react-jsx/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ jsx: true, jsxFactory: "React.createElement", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /react-tsx/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { esbuildPlugin } from "@web/dev-server-esbuild"; 2 | 3 | export default { 4 | nodeResolve: true, 5 | plugins: [ 6 | esbuildPlugin({ tsx: true, jsxFactory: "React.createElement", jsxFragment: "Fragment" }), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/demo/ts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /react-htm/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import htm from 'htm'; 3 | 4 | const html = htm.bind(React.createElement); 5 | 6 | export default function App() { 7 | return html` 8 |
9 |

Hello, World!

10 |
11 | `; 12 | } 13 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/src/sum.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"sum.js","sourceRoot":"","sources":["sum.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG,CAAC,GAAG,OAAiB;IACtC,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;QAC5B,GAAG,IAAI,MAAM,CAAC;KACf;IACD,OAAO,GAAG,CAAC;AACb,CAAC"} -------------------------------------------------------------------------------- /preact-htm/src/App.js: -------------------------------------------------------------------------------- 1 | import { Component } from 'preact'; 2 | import { html } from 'htm/preact'; 3 | 4 | export default class App extends Component { 5 | render() { 6 | return html` 7 |
8 |

Hello, World!

9 |
10 | `; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/demo/commonjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /guides/dev-server/proxy-to-other-servers/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import proxy from "koa-proxies"; 2 | import "./api-server.mjs"; 3 | 4 | export default { 5 | port: 8000, 6 | middleware: [ 7 | proxy("/api/", { 8 | target: "http://localhost:9000/", 9 | }), 10 | ], 11 | }; 12 | -------------------------------------------------------------------------------- /json-modules/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { fromRollup } from "@web/dev-server-rollup"; 2 | import rollupJson from "@rollup/plugin-json"; 3 | 4 | const json = fromRollup(rollupJson); 5 | 6 | export default { 7 | mimeTypes: { 8 | "**/*.json": "js", 9 | }, 10 | plugins: [json()], 11 | }; 12 | -------------------------------------------------------------------------------- /preact-htm/test/test-helpers.js: -------------------------------------------------------------------------------- 1 | import { render } from "preact"; 2 | 3 | export function fixture(jsx) { 4 | const wrapper = document.createElement("div"); 5 | render(jsx, wrapper); 6 | return { 7 | element: wrapper.firstElementChild, 8 | restoreFixture: () => wrapper.remove(), 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /preact-jsx/test/test-helpers.jsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact'; 2 | 3 | export function fixture(jsx) { 4 | const wrapper = document.createElement('div'); 5 | render(jsx, wrapper); 6 | return { 7 | element: wrapper.firstElementChild, 8 | restoreFixture: () => wrapper.remove(), 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /guides/dev-server/proxy-to-other-servers/api-server.mjs: -------------------------------------------------------------------------------- 1 | import http from "http"; 2 | 3 | const server = http.createServer((request, response) => { 4 | if (request.url === "/api/message") { 5 | response.writeHead(200); 6 | response.end("Hello from API"); 7 | } 8 | }); 9 | 10 | server.listen(9000); 11 | -------------------------------------------------------------------------------- /snowpack-lit/web-test-runner.config.js: -------------------------------------------------------------------------------- 1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin" 2 | process.env.NODE_ENV = 'test'; 3 | 4 | module.exports = { 5 | coverageConfig: { 6 | exclude: ['**/*/_snowpack/**/*'], 7 | }, 8 | plugins: [require('@snowpack/web-test-runner-plugin')()], 9 | }; 10 | -------------------------------------------------------------------------------- /snowpack-react/web-test-runner.config.js: -------------------------------------------------------------------------------- 1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin" 2 | process.env.NODE_ENV = 'test'; 3 | 4 | module.exports = { 5 | coverageConfig: { 6 | exclude: ['**/*/_snowpack/**/*'], 7 | }, 8 | plugins: [require('@snowpack/web-test-runner-plugin')()], 9 | }; 10 | -------------------------------------------------------------------------------- /snowpack-svelte/web-test-runner.config.js: -------------------------------------------------------------------------------- 1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin" 2 | process.env.NODE_ENV = 'test'; 3 | 4 | module.exports = { 5 | coverageConfig: { 6 | exclude: ['**/*/_snowpack/**/*'], 7 | }, 8 | plugins: [require('@snowpack/web-test-runner-plugin')()], 9 | }; 10 | -------------------------------------------------------------------------------- /preact-tsx/test/test-helpers.tsx: -------------------------------------------------------------------------------- 1 | import { render, JSX } from 'preact'; 2 | 3 | export function fixture(jsx: JSX.Element) { 4 | const wrapper = document.createElement('div'); 5 | render(jsx, wrapper); 6 | return { 7 | element: wrapper.firstElementChild!, 8 | restoreFixture: () => wrapper.remove(), 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /guides/dev-server/getting-started/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-dev-server-getting-started", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "web-dev-server --open /demo/" 8 | }, 9 | "devDependencies": { 10 | "@web/dev-server": "0.4.6" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /guides/dev-server/writing-plugins/web-dev-server.env.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: [ 3 | { 4 | name: "environment", 5 | serve(context) { 6 | if (context.path === "/environment.js") { 7 | return 'export const environment = "development";'; 8 | } 9 | }, 10 | }, 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /react-htm/test/test-helpers.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | export function fixture(jsx) { 5 | const wrapper = document.createElement("div"); 6 | ReactDOM.render(jsx, wrapper); 7 | return { 8 | element: wrapper.firstElementChild, 9 | restoreFixture: () => wrapper.remove(), 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /react-jsx/test/test-helpers.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | export function fixture(jsx) { 5 | const wrapper = document.createElement('div'); 6 | ReactDOM.render(jsx, wrapper); 7 | return { 8 | element: wrapper.firstElementChild, 9 | restoreFixture: () => wrapper.remove(), 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /react-tsx/test/test-helpers.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | export function fixture(jsx: JSX.Element) { 5 | const wrapper = document.createElement('div'); 6 | ReactDOM.render(jsx, wrapper); 7 | return { 8 | element: wrapper.firstElementChild!, 9 | restoreFixture: () => wrapper.remove(), 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/web-dev-server.commonjs.mjs: -------------------------------------------------------------------------------- 1 | import { fromRollup } from "@web/dev-server-rollup"; 2 | import rollupCommonjs from "@rollup/plugin-commonjs"; 3 | 4 | const commonjs = fromRollup(rollupCommonjs); 5 | 6 | export default { 7 | plugins: [ 8 | commonjs({ 9 | include: ["node_modules/axios/**/*"], 10 | }), 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## editors 2 | /.idea 3 | /.vscode 4 | 5 | ## system files 6 | .DS_Store 7 | 8 | ## npm 9 | node_modules 10 | npm-debug.log 11 | yarn-error.log 12 | /*/yarn.lock 13 | 14 | ## temp folders 15 | /.tmp/ 16 | 17 | ## testing 18 | coverage 19 | local.log 20 | 21 | ## build output 22 | dist 23 | tsconfig.tsbuildinfo 24 | /*/dist 25 | /*/tsc-out 26 | 27 | /*/screenshots -------------------------------------------------------------------------------- /preact-htm/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /guides/test-runner/playwright/test/sum.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { sum } from '../src/sum.js'; 3 | 4 | it('sums up 2 numbers', () => { 5 | expect(sum(1, 1)).to.equal(2); 6 | expect(sum(3, 12)).to.equal(15); 7 | }); 8 | 9 | it('sums up 3 numbers', () => { 10 | expect(sum(1, 1, 1)).to.equal(3); 11 | expect(sum(3, 12, 5)).to.equal(20); 12 | }); 13 | -------------------------------------------------------------------------------- /guides/test-runner/test-runner-coverage/src/calc.js: -------------------------------------------------------------------------------- 1 | export function calc(type, a, b) { 2 | if (type === "plus") { 3 | return a + b; 4 | } 5 | if (type === "minus") { 6 | return a - b; 7 | } 8 | if (type === "multiply") { 9 | return; // a * b; 10 | } 11 | throw new Error( 12 | `Invalid type "${type}" only plus, minus or multiply is allowed.` 13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/test/sum.test.ts: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { sum } from '../src/sum.js'; 3 | 4 | it('sums up 2 numbers', () => { 5 | expect(sum(1, 1)).to.equal(2); 6 | expect(sum(3, 12)).to.equal(15); 7 | }); 8 | 9 | it('sums up 3 numbers', () => { 10 | expect(sum(1, 1, 1)).to.equal(3); 11 | expect(sum(3, 12, 5)).to.equal(20); 12 | }); 13 | -------------------------------------------------------------------------------- /guides/test-runner/watch-and-debug/test/sum.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { sum } from '../src/sum.js'; 3 | 4 | it('sums up 2 numbers', () => { 5 | expect(sum(1, 1)).to.equal(2); 6 | expect(sum(3, 12)).to.equal(15); 7 | }); 8 | 9 | it('sums up 3 numbers', () => { 10 | expect(sum(1, 1, 1)).to.equal(3); 11 | expect(sum(3, 12, 5)).to.equal(20); 12 | }); 13 | -------------------------------------------------------------------------------- /guides/dev-server/proxy-to-other-servers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-dev-server-proxy-to-other-servers", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "web-dev-server --open /demo/ --node-resolve" 8 | }, 9 | "devDependencies": { 10 | "@web/dev-server": "0.4.6", 11 | "koa-proxies": "0.12.4" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /guides/test-runner/getting-started/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-test-runner-getting-started", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "web-test-runner \"test/**/*.test.js\" --node-resolve" 8 | }, 9 | "devDependencies": { 10 | "@esm-bundle/chai": "4.3.4", 11 | "@web/test-runner": "0.16.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /snowpack-svelte/src/App.test.js: -------------------------------------------------------------------------------- 1 | import {render} from '@testing-library/svelte'; 2 | import {expect} from 'chai'; 3 | import App from './App.svelte'; 4 | 5 | describe('', () => { 6 | it('renders learn svelte link', () => { 7 | const {getByText} = render(App); 8 | const linkElement = getByText(/learn svelte/i); 9 | expect(document.body.contains(linkElement)); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/web-dev-server.config.mjs: -------------------------------------------------------------------------------- 1 | import { fromRollup } from "@web/dev-server-rollup"; 2 | import rollupReplace from "@rollup/plugin-replace"; 3 | 4 | const replace = fromRollup(rollupReplace); 5 | 6 | export default { 7 | plugins: [ 8 | replace({ 9 | include: ["src/logDebug.js"], 10 | "process.env.NODE_ENV": '"development"', 11 | }), 12 | ], 13 | }; 14 | -------------------------------------------------------------------------------- /guides/test-runner/test-runner-coverage/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-test-runner-coverage", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --coverage" 8 | }, 9 | "devDependencies": { 10 | "@esm-bundle/chai": "4.3.4", 11 | "@web/test-runner": "0.16.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /guides/dev-server/loading-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-dev-server-loading-modules", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "web-dev-server --open /demo/ --node-resolve" 8 | }, 9 | "devDependencies": { 10 | "@web/dev-server": "0.4.6" 11 | }, 12 | "dependencies": { 13 | "lit-html": "1.4.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /guides/dev-server/loading-modules/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /guides/dev-server/writing-plugins/web-dev-server.inject.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: [ 3 | { 4 | name: "inject-html-plugin", 5 | transform(context) { 6 | if (context.path === "/demo/") { 7 | return context.body.replace( 8 | "", 9 | "

Injected by my plugin

" 10 | ); 11 | } 12 | }, 13 | }, 14 | ], 15 | }; 16 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/test/sum.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { sum } from '../src/sum.js'; 3 | it('sums up 2 numbers', () => { 4 | expect(sum(1, 1)).to.equal(2); 5 | expect(sum(3, 12)).to.equal(15); 6 | }); 7 | it('sums up 3 numbers', () => { 8 | expect(sum(1, 1, 1)).to.equal(3); 9 | expect(sum(3, 12, 5)).to.equal(20); 10 | }); 11 | //# sourceMappingURL=sum.test.js.map -------------------------------------------------------------------------------- /visual-regression/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from "@open-wc/testing"; 2 | import { visualDiff } from "@web/test-runner-visual-regression"; 3 | 4 | import "../my-element.js"; 5 | 6 | describe("MyElement Visual diffing", () => { 7 | it('no title', async () => { 8 | const el = await fixture(html``); 9 | await visualDiff(el, 'no title'); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /snowpack-react/src/App.test.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { expect } from 'chai'; 4 | import App from './App'; 5 | 6 | describe('', () => { 7 | it('renders learn react link', () => { 8 | const { getByText } = render(); 9 | const linkElement = getByText(/learn react/i); 10 | expect(document.body.contains(linkElement)); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /snowpack-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /snowpack-svelte/src/index.js: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | let app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | 9 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR. 10 | // Learn more: https://www.snowpack.dev/concepts/hot-module-replacement 11 | if (import.meta.hot) { 12 | import.meta.hot.accept(); 13 | import.meta.hot.dispose(() => { 14 | app.$destroy(); 15 | }); 16 | } 17 | -------------------------------------------------------------------------------- /guides/dev-server/proxy-to-other-servers/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /guides/dev-server/writing-plugins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-dev-server-writing-plugins", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "start:inject": "web-dev-server --config web-dev-server.inject.mjs --open /demo/ --node-resolve", 8 | "start:env": "web-dev-server --config web-dev-server.env.mjs --open /demo/env.html" 9 | }, 10 | "devDependencies": { 11 | "@web/dev-server": "0.4.6" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /guides/test-runner/watch-and-debug/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-test-runner-watch-and-debug", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "web-test-runner \"test/**/*.test.js\" --node-resolve", 8 | "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch" 9 | }, 10 | "devDependencies": { 11 | "@esm-bundle/chai": "4.3.4", 12 | "@web/test-runner": "0.16.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /guides/test-runner/playwright/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-test-runner-playwright", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --playwright --browsers chromium firefox webkit" 8 | }, 9 | "devDependencies": { 10 | "@esm-bundle/chai": "4.3.4", 11 | "@web/test-runner": "0.16.0", 12 | "@web/test-runner-playwright": "0.10.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /react-htm/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/web-dev-server.babel.mjs: -------------------------------------------------------------------------------- 1 | import { fromRollup } from "@web/dev-server-rollup"; 2 | import rollupBabel from "@rollup/plugin-babel"; 3 | 4 | const babel = fromRollup(rollupBabel.default); 5 | 6 | export default { 7 | mimeTypes: { 8 | "**/*.jsx": "js", 9 | }, 10 | plugins: [ 11 | babel({ 12 | include: ["**/*.jsx"], 13 | babelHelpers: "bundled", 14 | plugins: [["@babel/plugin-transform-react-jsx", { pragma: "h" }]], 15 | }), 16 | ], 17 | }; 18 | -------------------------------------------------------------------------------- /preact-jsx/test/app.test.jsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { expect } from '@esm-bundle/chai'; 3 | import App from '../src/App'; 4 | import { fixture } from './test-helpers'; 5 | 6 | let element; 7 | let restoreFixture; 8 | 9 | beforeEach(() => { 10 | ({ element, restoreFixture } = fixture()); 11 | }); 12 | 13 | afterEach(() => { 14 | restoreFixture(); 15 | }); 16 | 17 | it('renders a hello world message', () => { 18 | expect(element.textContent).to.include('Hello, World!'); 19 | }); 20 | -------------------------------------------------------------------------------- /react-jsx/test/app.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { expect } from '@esm-bundle/chai'; 3 | import App from '../src/App'; 4 | import { fixture } from './test-helpers'; 5 | 6 | let element; 7 | let restoreFixture; 8 | 9 | beforeEach(() => { 10 | ({ element, restoreFixture } = fixture()); 11 | }); 12 | 13 | afterEach(() => { 14 | restoreFixture(); 15 | }); 16 | 17 | it('renders a hello world message', () => { 18 | expect(element.textContent).to.include('Hello, World!'); 19 | }); 20 | -------------------------------------------------------------------------------- /snowpack-lit/src/app-root.test.ts: -------------------------------------------------------------------------------- 1 | import { expect } from '@esm-bundle/chai'; 2 | 3 | import '../src/app-root'; 4 | import type { AppRoot } from '../src/app-root'; 5 | 6 | describe('app-root', () => { 7 | it('contains the expected title', async () => { 8 | const appRoot = document.createElement('app-root') as AppRoot; 9 | document.body.appendChild(appRoot); 10 | await appRoot.updateComplete; 11 | expect(appRoot.shadowRoot!.textContent).to.include('LitElement + Snowpack'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /snowpack-react/src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App.jsx'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root'), 11 | ); 12 | 13 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR. 14 | // Learn more: https://www.snowpack.dev/concepts/hot-module-replacement 15 | if (import.meta.hot) { 16 | import.meta.hot.accept(); 17 | } 18 | -------------------------------------------------------------------------------- /preact-htm/test/app.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { html } from "htm/preact"; 3 | import App from "../src/App"; 4 | import { fixture } from "./test-helpers"; 5 | 6 | let element; 7 | let restoreFixture; 8 | 9 | beforeEach(() => { 10 | ({ element, restoreFixture } = fixture(html` <${App} /> `)); 11 | }); 12 | 13 | afterEach(() => { 14 | restoreFixture(); 15 | }); 16 | 17 | it("renders a hello world message", () => { 18 | expect(element.textContent).to.include("Hello, World!"); 19 | }); 20 | -------------------------------------------------------------------------------- /react-tsx/test/app.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { expect } from '@esm-bundle/chai'; 3 | import App from '../src/App'; 4 | import { fixture } from './test-helpers'; 5 | 6 | let element: Element; 7 | let restoreFixture: () => void; 8 | 9 | beforeEach(() => { 10 | ({ element, restoreFixture } = fixture()); 11 | }); 12 | 13 | afterEach(() => { 14 | restoreFixture(); 15 | }); 16 | 17 | it('renders a hello world message', () => { 18 | expect(element!.textContent).to.include('Hello, World!'); 19 | }); 20 | -------------------------------------------------------------------------------- /preact-tsx/test/app.test.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact'; 2 | import { expect } from '@esm-bundle/chai'; 3 | import App from '../src/App'; 4 | import { fixture } from './test-helpers'; 5 | 6 | let element: Element; 7 | let restoreFixture: () => void; 8 | 9 | beforeEach(() => { 10 | ({ element, restoreFixture } = fixture()); 11 | }); 12 | 13 | afterEach(() => { 14 | restoreFixture(); 15 | }); 16 | 17 | it('renders a hello world message', () => { 18 | expect(element!.textContent).to.include('Hello, World!'); 19 | }); 20 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "noEmitOnError": true, 7 | "lib": ["es2017", "dom"], 8 | "strict": true, 9 | "esModuleInterop": false, 10 | "allowSyntheticDefaultImports": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "outDir": "tsc-out", 14 | "sourceMap": true, 15 | "inlineSources": true, 16 | "rootDir": "./" 17 | }, 18 | "include": ["**/*.ts"] 19 | } 20 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2018", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "noEmitOnError": true, 7 | "lib": ["es2017", "dom"], 8 | "strict": true, 9 | "esModuleInterop": false, 10 | "allowSyntheticDefaultImports": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "outDir": "dist", 14 | "sourceMap": true, 15 | "inlineSources": true, 16 | "rootDir": "./" 17 | }, 18 | "include": ["**/*.ts"] 19 | } 20 | -------------------------------------------------------------------------------- /guides/dev-server/typescript-and-jsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-dev-server-typescript-and-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "start:ts": "web-dev-server --config web-dev-server.ts.mjs --open /demo/ts.html --node-resolve", 8 | "start:jsx": "web-dev-server --config web-dev-server.jsx.mjs --open /demo/jsx.html --node-resolve" 9 | }, 10 | "devDependencies": { 11 | "@web/dev-server": "0.4.6", 12 | "@web/dev-server-esbuild": "0.4.4", 13 | "preact": "10.22.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /guides/test-runner/responsive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-test-runner-responsive", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "web-test-runner \"test/**/*.test.{html,js}\" --node-resolve", 8 | "test:watch": "web-test-runner \"test/**/*.test.{html,js}\" --node-resolve --watch" 9 | }, 10 | "devDependencies": { 11 | "@esm-bundle/chai": "4.3.4", 12 | "@web/test-runner-mocha": "0.9.0", 13 | "@web/test-runner": "0.16.0", 14 | "@web/test-runner-commands": "0.9.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /snowpack-svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "snowpack dev", 4 | "build": "snowpack build", 5 | "test": "web-test-runner \"src/**/*.test.js\" --coverage" 6 | }, 7 | "dependencies": { 8 | "svelte": "3.59.2" 9 | }, 10 | "devDependencies": { 11 | "@snowpack/plugin-dotenv": "2.2.0", 12 | "@snowpack/plugin-svelte": "3.7.0", 13 | "@snowpack/web-test-runner-plugin": "0.2.2", 14 | "@testing-library/svelte": "3.2.2", 15 | "@web/test-runner": "0.16.0", 16 | "chai": "4.5.0", 17 | "snowpack": "3.8.8" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /guides/test-runner/responsive/test/isMobile.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { setViewport } from '@web/test-runner-commands'; 3 | import { isMobile } from '../src/isMobile'; 4 | 5 | describe('isMobile', () => { 6 | it('returns true if width < 1024px', async () => { 7 | await setViewport({ width: 360, height: 640 }); 8 | expect(isMobile()).to.be.true; 9 | }); 10 | 11 | it('returns false if width > 1024px', async () => { 12 | await setViewport({ width: 1200, height: 640 }); 13 | expect(isMobile()).to.be.false; 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /react-htm/test/app.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import React from 'react'; 3 | import htm from "htm"; 4 | import App from "../src/App"; 5 | import { fixture } from "./test-helpers"; 6 | 7 | let element; 8 | let restoreFixture; 9 | 10 | const html = htm.bind(React.createElement); 11 | 12 | beforeEach(() => { 13 | ({ element, restoreFixture } = fixture(html` <${App} /> `)); 14 | }); 15 | 16 | afterEach(() => { 17 | restoreFixture(); 18 | }); 19 | 20 | it("renders a hello world message", () => { 21 | expect(element.textContent).to.include("Hello, World!"); 22 | }); 23 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-test-runner-typescript", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "test": "npm run build && web-test-runner \"test/**/*.test.js\" --node-resolve", 8 | "build": "tsc", 9 | "build:watch": "tsc --watch", 10 | "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch" 11 | }, 12 | "devDependencies": { 13 | "@esm-bundle/chai": "4.3.4", 14 | "@types/mocha": "10.0.7", 15 | "@web/test-runner": "0.16.0", 16 | "typescript": "5.4.5" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /json-modules/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import '../my-element.js'; 4 | 5 | describe('MyElement', () => { 6 | it('renders hello world', async () => { 7 | const el = await fixture(html` 8 | 9 | `); 10 | 11 | expect(el.shadowRoot.textContent).to.include('Hello world'); 12 | }); 13 | 14 | 15 | it('passes the a11y audit', async () => { 16 | const el = await fixture(html` 17 | 18 | `); 19 | 20 | await expect(el).shadowDom.to.be.accessible(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /mock-es-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-mock-es-module", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "author": "modern-web", 7 | "scripts": { 8 | "test": "web-test-runner test/**/*.test.html --coverage --node-resolve", 9 | "test:watch": "web-test-runner test/**/*.test.html --node-resolve --watch" 10 | }, 11 | "devDependencies": { 12 | "@esm-bundle/chai": "4.3.4", 13 | "@open-wc/testing": "2.5.33", 14 | "@web/dev-server": "0.4.6", 15 | "@web/dev-server-import-maps": "0.2.1", 16 | "@web/test-runner": "0.16.0", 17 | "sinon": "18.0.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /storybook/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --config .storybook/server.config.mjs" 12 | }, 13 | "dependencies": { 14 | "lit-element": "2.5.1", 15 | "lit-html": "1.4.1" 16 | }, 17 | "devDependencies": { 18 | "@open-wc/testing": "2.5.33", 19 | "@web/dev-server": "0.4.6", 20 | "@web/dev-server-storybook": "2.0.3" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/src/MyElement.ts: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement, property } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static styles = css` 5 | :host { 6 | display: block; 7 | padding: 25px; 8 | color: var(--my-element-text-color, #000); 9 | } 10 | `; 11 | 12 | @property({ type: String }) title = 'Hey there'; 13 | 14 | @property({ type: Number }) counter = 5; 15 | 16 | __increment() { 17 | this.counter += 1; 18 | } 19 | 20 | render() { 21 | return html` 22 |

${this.title} Nr. ${this.counter}!

23 | 24 | `; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/src/MyElement.ts: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement, property } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static styles = css` 5 | :host { 6 | display: block; 7 | padding: 25px; 8 | color: var(--my-element-text-color, #000); 9 | } 10 | `; 11 | 12 | @property({ type: String }) title = 'Hey there'; 13 | 14 | @property({ type: Number }) counter = 5; 15 | 16 | __increment() { 17 | this.counter += 1; 18 | } 19 | 20 | render() { 21 | return html` 22 |

${this.title} Nr. ${this.counter}!

23 | 24 | `; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /preact-htm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-preact-htm", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "web-dev-server --open demo/ --node-resolve", 9 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 10 | "test": "web-test-runner test/**/*.test.js", 11 | "test:watch": "web-test-runner test/**/*.test.js --watch" 12 | }, 13 | "dependencies": { 14 | "htm": "3.1.1", 15 | "preact": "10.22.0" 16 | }, 17 | "devDependencies": { 18 | "@esm-bundle/chai": "4.3.4", 19 | "@web/test-runner": "0.16.0", 20 | "@web/dev-server": "0.4.6" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /guides/test-runner/test-runner-coverage/test/calc.test.js: -------------------------------------------------------------------------------- 1 | import { expect } from "@esm-bundle/chai"; 2 | import { calc } from "../src/calc.js"; 3 | 4 | it("does plus for 2 numbers", () => { 5 | expect(calc("plus", 1, 1)).to.equal(2); 6 | expect(calc("plus", 3, 12)).to.equal(15); 7 | }); 8 | 9 | it("does minus for 2 numbers", () => { 10 | expect(calc("minus", 3, 1)).to.equal(2); 11 | }); 12 | 13 | it("throws if type is not plus or minus", () => { 14 | expect(() => calc("foo", 3, 1)).to.throw( 15 | `Invalid type "foo" only plus, minus or multiply is allowed.` 16 | ); 17 | }); 18 | 19 | it("does multiply for 2 numbers", () => { 20 | expect(calc("multiply", 3, 3)).to.equal(9); 21 | }); 22 | -------------------------------------------------------------------------------- /snowpack-react/snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | module.exports = { 3 | mount: { 4 | public: { url: '/', static: true }, 5 | src: { url: '/dist' }, 6 | }, 7 | plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'], 8 | routes: [ 9 | /* Enable an SPA Fallback in development: */ 10 | // {"match": "routes", "src": ".*", "dest": "/index.html"}, 11 | ], 12 | optimize: { 13 | /* Example: Bundle your final build: */ 14 | // "bundle": true, 15 | }, 16 | packageOptions: { 17 | /* ... */ 18 | }, 19 | devOptions: { 20 | /* ... */ 21 | }, 22 | buildOptions: { 23 | sourcemap: true 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/test/sum.test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"sum.test.js","sourceRoot":"","sources":["sum.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC3B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC9B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAClC,CAAC,CAAC,CAAC;AAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;IAC3B,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /preact-jsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-preact-jsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "web-dev-server --open demo/ --node-resolve", 9 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 10 | "test": "web-test-runner test/**/*.test.jsx", 11 | "test:watch": "web-test-runner test/**/*.test.jsx --watch" 12 | }, 13 | "dependencies": { 14 | "preact": "10.22.0" 15 | }, 16 | "devDependencies": { 17 | "@esm-bundle/chai": "4.3.4", 18 | "@web/dev-server": "0.4.6", 19 | "@web/dev-server-esbuild": "0.4.4", 20 | "@web/test-runner": "0.16.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /import-maps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "test": "web-test-runner test/**/*.test.js --coverage", 12 | "test:watch": "web-test-runner test/**/*.test.js --watch" 13 | }, 14 | "dependencies": { 15 | "lit-element": "2.5.1", 16 | "lit-html": "1.4.1" 17 | }, 18 | "devDependencies": { 19 | "@open-wc/testing": "2.5.33", 20 | "@web/dev-server-import-maps": "0.2.1", 21 | "@web/test-runner": "0.16.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /snowpack-svelte/snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | module.exports = { 3 | mount: { 4 | public: {url: '/', static: true}, 5 | src: {url: '/dist'}, 6 | }, 7 | plugins: [ 8 | '@snowpack/plugin-svelte', 9 | '@snowpack/plugin-dotenv', 10 | ], 11 | routes: [ 12 | /* Example: Enable an SPA Fallback in development: */ 13 | // {"match": "routes", "src": ".*", "dest": "/index.html"}, 14 | ], 15 | optimize: { 16 | /* Example: Bundle your final build: */ 17 | // "bundle": true, 18 | }, 19 | packageOptions: { 20 | /* ... */ 21 | }, 22 | devOptions: { 23 | /* ... */ 24 | }, 25 | buildOptions: { 26 | sourcemap: true 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /preact-tsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-preact-tsx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "web-dev-server --open demo/ --node-resolve", 9 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 10 | "test": "web-test-runner test/**/*.test.tsx", 11 | "test:watch": "web-test-runner test/**/*.test.tsx --watch" 12 | }, 13 | "dependencies": { 14 | "preact": "10.22.0" 15 | }, 16 | "devDependencies": { 17 | "@esm-bundle/chai": "4.3.4", 18 | "@web/dev-server": "0.4.6", 19 | "@web/dev-server-esbuild": "0.4.4", 20 | "@web/test-runner": "0.16.0", 21 | "typescript": "5.4.5" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /react-htm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-react-htm", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "web-dev-server --open demo/ --node-resolve", 9 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 10 | "test": "web-test-runner test/**/*.test.js", 11 | "test:watch": "web-test-runner test/**/*.test.js --watch" 12 | }, 13 | "dependencies": { 14 | "htm": "3.1.1", 15 | "react": "npm:@pika/react@16.13.1", 16 | "react-dom": "npm:@pika/react-dom@16.13.1" 17 | }, 18 | "devDependencies": { 19 | "@esm-bundle/chai": "4.3.4", 20 | "@web/test-runner": "0.16.0", 21 | "@web/dev-server": "0.4.6" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /snowpack-lit/snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | module.exports = { 3 | mount: { 4 | public: {url: '/', static: true}, 5 | src: {url: '/dist'}, 6 | }, 7 | plugins: [ 8 | '@snowpack/plugin-babel', 9 | '@snowpack/plugin-dotenv', 10 | '@snowpack/plugin-typescript', 11 | ], 12 | routes: [ 13 | /* Enable an SPA Fallback in development: */ 14 | // {"match": "routes", "src": ".*", "dest": "/index.html"}, 15 | ], 16 | optimize: { 17 | /* Example: Bundle your final build: */ 18 | // "bundle": true, 19 | }, 20 | packageOptions: { 21 | /* ... */ 22 | }, 23 | devOptions: { 24 | /* ... */ 25 | }, 26 | buildOptions: { 27 | sourcemap: true 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /snowpack-lit/README.md: -------------------------------------------------------------------------------- 1 | # New Project 2 | 3 | > ✨ Bootstrapped with Create Snowpack App (CSA). 4 | 5 | ## Available Scripts 6 | 7 | ### npm start 8 | 9 | Runs the app in the development mode. 10 | Open http://localhost:8080 to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | You will also see any lint errors in the console. 14 | 15 | ### npm run build 16 | 17 | Builds the app for production to the `dist/` folder. 18 | It correctly bundles React in production mode and optimizes the build for the best performance. 19 | 20 | ## Directives 21 | 22 | In case you need to add a directive like `classMap` you should add the extension to the import: 23 | 24 | ``` 25 | import { classMap } from "lit-html/directives/class-map.js"; 26 | ``` 27 | -------------------------------------------------------------------------------- /react-jsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-react-jsx", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "web-dev-server --open demo/ --node-resolve", 9 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 10 | "test": "web-test-runner test/**/*.test.jsx", 11 | "test:watch": "web-test-runner test/**/*.test.jsx --watch" 12 | }, 13 | "dependencies": { 14 | "react": "npm:@pika/react@16.13.1", 15 | "react-dom": "npm:@pika/react-dom@16.13.1" 16 | }, 17 | "devDependencies": { 18 | "@esm-bundle/chai": "4.3.4", 19 | "@web/dev-server": "0.4.6", 20 | "@web/dev-server-esbuild": "0.4.4", 21 | "@web/test-runner": "0.16.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /react-tsx/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-react-tsx", 3 | "version": "0.0.0", 4 | "private": true, 5 | "license": "MIT", 6 | "main": "index.js", 7 | "scripts": { 8 | "start": "web-dev-server --open demo/ --node-resolve", 9 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 10 | "test": "web-test-runner test/**/*.test.tsx", 11 | "test:watch": "web-test-runner test/**/*.test.tsx --watch" 12 | }, 13 | "dependencies": { 14 | "react": "npm:@pika/react@16.13.1", 15 | "react-dom": "npm:@pika/react-dom@16.13.1" 16 | }, 17 | "devDependencies": { 18 | "@esm-bundle/chai": "4.3.4", 19 | "@web/dev-server": "0.4.6", 20 | "@web/dev-server-esbuild": "0.4.4", 21 | "@web/test-runner": "0.16.0", 22 | "typescript": "5.4.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /snowpack-react/README.md: -------------------------------------------------------------------------------- 1 | # New Project 2 | 3 | > ✨ Bootstrapped with Create Snowpack App (CSA). 4 | 5 | ## Available Scripts 6 | 7 | ### npm start 8 | 9 | Runs the app in the development mode. 10 | Open http://localhost:8080 to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | You will also see any lint errors in the console. 14 | 15 | ### npm run build 16 | 17 | Builds a static copy of your site to the `build/` folder. 18 | Your app is ready to be deployed! 19 | 20 | **For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.js` config file. 21 | 22 | ### npm test 23 | 24 | Launches the application test runner. 25 | Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode. 26 | -------------------------------------------------------------------------------- /html-test/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /import-maps/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /lit-element/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /playwright/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /puppeteer/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /saucelabs/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /visual-regression/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from 'lit-element'; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = 'Hey there'; 24 | this.counter = 5; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 | 35 | `; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /lit-element/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.js --coverage --node-resolve", 14 | "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@web/test-runner": "0.16.0", 23 | "@web/dev-server": "0.4.6" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /html-test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.html --coverage --node-resolve", 14 | "test:watch": "web-test-runner test/**/*.test.html --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@web/test-runner": "0.16.0", 23 | "@web/dev-server": "0.4.6" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /storybook/src/MyElement.js: -------------------------------------------------------------------------------- 1 | import { html, css, LitElement } from "lit-element"; 2 | 3 | export class MyElement extends LitElement { 4 | static get styles() { 5 | return css` 6 | :host { 7 | display: block; 8 | padding: 25px; 9 | color: var(--my-element-text-color, #000); 10 | } 11 | `; 12 | } 13 | 14 | static get properties() { 15 | return { 16 | title: { type: String }, 17 | counter: { type: Number }, 18 | }; 19 | } 20 | 21 | constructor() { 22 | super(); 23 | this.title = "Hey there"; 24 | this.counter = 0; 25 | } 26 | 27 | __increment() { 28 | this.counter += 1; 29 | } 30 | 31 | render() { 32 | return html` 33 |

${this.title} Nr. ${this.counter}!

34 |

35 | 36 | `; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /guides/dev-server/using-plugins/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/guides-dev-server-using-plugins", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "web-dev-server --open /demo/ --node-resolve", 8 | "start:commonjs": "web-dev-server --config web-dev-server.commonjs.mjs --open /demo/commonjs.html --node-resolve", 9 | "start:babel": "web-dev-server --config web-dev-server.babel.mjs --open /demo/babel.html --node-resolve" 10 | }, 11 | "devDependencies": { 12 | "@babel/core": "7.24.9", 13 | "@babel/plugin-transform-react-jsx": "7.24.7", 14 | "@rollup/plugin-babel": "6.0.4", 15 | "@rollup/plugin-commonjs": "26.0.1", 16 | "@rollup/plugin-replace": "5.0.7", 17 | "@web/dev-server": "0.4.6", 18 | "@web/dev-server-rollup": "0.6.4", 19 | "axios": "1.7.2", 20 | "preact": "10.22.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /snowpack-react/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | .App code { 5 | background: #FFF3; 6 | padding: 4px 8px; 7 | border-radius: 4px; 8 | } 9 | .App p { 10 | margin: 0.4rem; 11 | } 12 | .App-logo { 13 | height: 40vmin; 14 | pointer-events: none; 15 | } 16 | 17 | @media (prefers-reduced-motion: no-preference) { 18 | .App-logo { 19 | animation: App-logo-spin infinite 20s linear; 20 | } 21 | } 22 | 23 | .App-header { 24 | background-color: #282c34; 25 | min-height: 100vh; 26 | display: flex; 27 | flex-direction: column; 28 | align-items: center; 29 | justify-content: center; 30 | font-size: calc(10px + 2vmin); 31 | color: white; 32 | } 33 | 34 | .App-link { 35 | color: #61dafb; 36 | } 37 | 38 | @keyframes App-logo-spin { 39 | from { 40 | transform: rotate(0deg); 41 | } 42 | to { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /storybook/stories/MyElement.stories.js: -------------------------------------------------------------------------------- 1 | import { html } from "lit-element"; 2 | import "../my-element.js"; 3 | 4 | export default { 5 | title: "Example/My Element", 6 | argTypes: { 7 | title: { control: "string" }, 8 | counter: { control: "number" }, 9 | text: { control: "string" }, 10 | }, 11 | }; 12 | 13 | const Template = ({ title, text, counter = 0 }) => { 14 | return html` 15 | ${text} 16 | `; 17 | }; 18 | 19 | export const MyElement = (args) => Template(args); 20 | MyElement.args = { 21 | title: "My title", 22 | }; 23 | 24 | export const NegativeCounter = (args) => Template(args); 25 | NegativeCounter.args = { 26 | title: "Foo", 27 | counter: -5, 28 | }; 29 | 30 | export const SlottedText = (args) => Template(args); 31 | SlottedText.args = { 32 | title: "My title", 33 | text: "Some slotted text", 34 | }; 35 | -------------------------------------------------------------------------------- /puppeteer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.js --coverage --node-resolve --puppeteer", 14 | "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@web/test-runner": "0.16.0", 23 | "@web/dev-server": "0.4.6", 24 | "@web/test-runner-puppeteer": "0.13.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /visual-regression/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.js --coverage --node-resolve", 14 | "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@web/dev-server": "0.4.6", 23 | "@web/test-runner": "0.16.0", 24 | "@web/test-runner-visual-regression": "0.4.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /saucelabs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.js --node-resolve", 14 | "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@web/dev-server": "0.4.6", 23 | "@web/dev-server-legacy": "2.1.1", 24 | "@web/test-runner": "0.16.0", 25 | "@web/test-runner-saucelabs": "0.9.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /snowpack-lit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "target": "esnext", 6 | "moduleResolution": "node", 7 | "jsx": "preserve", 8 | "baseUrl": "./", 9 | /* paths - If you configure Snowpack import aliases, add them here. */ 10 | "paths": { 11 | /* "source: skypack" type declarations are installed to ".snowpack/types" */ 12 | "*": [".snowpack/types/*"] 13 | }, 14 | /* noEmit - Snowpack builds (emits) files, not tsc. */ 15 | "noEmit": true, 16 | /* LitElement - Add decorator support! */ 17 | "experimentalDecorators": true, 18 | "emitDecoratorMetadata": true, 19 | /* Additional Options */ 20 | "strict": true, 21 | "skipLibCheck": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "resolveJsonModule": true, 24 | "allowSyntheticDefaultImports": true, 25 | "importsNotUsedAsValues": "error" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /json-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-json-modules", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.js --coverage --node-resolve", 14 | "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@rollup/plugin-json": "6.1.0", 23 | "@web/dev-server": "0.4.6", 24 | "@web/dev-server-rollup": "0.6.4", 25 | "@web/test-runner": "0.16.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /playwright/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "my-element", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit", 14 | "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch" 15 | }, 16 | "dependencies": { 17 | "lit-element": "2.5.1", 18 | "lit-html": "1.4.1" 19 | }, 20 | "devDependencies": { 21 | "@open-wc/testing": "2.5.33", 22 | "@web/test-runner": "0.16.0", 23 | "@web/dev-server": "0.4.6", 24 | "@web/test-runner-playwright": "0.10.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /snowpack-svelte/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Snowpack App 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /snowpack-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Snowpack App 9 | 10 | 11 |
12 | 13 | 14 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /snowpack-lit/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "start": "snowpack dev", 4 | "build": "snowpack build", 5 | "test": "web-test-runner \"src/**/*.test.ts\" --coverage", 6 | "format": "prettier --write \"src/**/*.ts\"", 7 | "lint": "prettier --check \"src/**/*.ts\"" 8 | }, 9 | "dependencies": { 10 | "lit-element": "2.5.1", 11 | "lit-html": "1.4.1" 12 | }, 13 | "devDependencies": { 14 | "@babel/plugin-proposal-class-properties": "7.18.6", 15 | "@babel/plugin-proposal-decorators": "7.24.7", 16 | "@babel/preset-typescript": "7.24.7", 17 | "@esm-bundle/chai": "4.3.4", 18 | "@open-wc/testing": "2.5.33", 19 | "@snowpack/plugin-babel": "2.1.7", 20 | "@snowpack/plugin-dotenv": "2.2.0", 21 | "@snowpack/plugin-typescript": "1.2.1", 22 | "@snowpack/web-test-runner-plugin": "0.2.2", 23 | "@types/mocha": "10.0.7", 24 | "@types/snowpack-env": "2.3.7", 25 | "@web/test-runner": "0.16.0", 26 | "prettier": "3.3.3", 27 | "snowpack": "3.8.8", 28 | "typescript": "5.4.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element-tsc", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "modern web", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "build": "tsc", 12 | "build:watch": "tsc --watch", 13 | "start": "web-dev-server --open demo/ --node-resolve", 14 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 15 | "test": "yarn build && web-test-runner tsc-out/test/**/*.test.js --node-resolve", 16 | "test:watch": "web-test-runner dist/test/**/*.test.js --node-resolve --watch" 17 | }, 18 | "dependencies": { 19 | "lit-element": "2.5.1", 20 | "lit-html": "1.4.1" 21 | }, 22 | "devDependencies": { 23 | "@open-wc/testing": "2.5.33", 24 | "@types/node": "14.18.63", 25 | "@web/test-runner": "0.16.0", 26 | "@web/dev-server": "0.4.6", 27 | "tslib": "2.6.3", 28 | "typescript": "5.4.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web/demo-lit-element-ts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "description": "Webcomponent lit-element following open-wc recommendations", 6 | "license": "MIT", 7 | "author": "modern web", 8 | "main": "index.js", 9 | "module": "index.js", 10 | "scripts": { 11 | "start": "web-dev-server --open demo/ --node-resolve", 12 | "start:watch": "web-dev-server --open demo/ --node-resolve --watch", 13 | "test": "web-test-runner test/**/*.test.ts --node-resolve", 14 | "test:watch": "web-test-runner test/**/*.test.ts --node-resolve --watch", 15 | "build": "tsc", 16 | "build:watch": "tsc --watch" 17 | }, 18 | "dependencies": { 19 | "lit-element": "2.5.1", 20 | "lit-html": "1.4.1" 21 | }, 22 | "devDependencies": { 23 | "@open-wc/testing": "2.5.33", 24 | "@types/node": "14.18.63", 25 | "@web/dev-server": "0.4.6", 26 | "@web/dev-server-esbuild": "0.4.4", 27 | "@web/test-runner": "0.16.0", 28 | "tslib": "2.6.3", 29 | "typescript": "5.4.5" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /snowpack-svelte/README.md: -------------------------------------------------------------------------------- 1 | # New Project 2 | 3 | > ✨ Bootstrapped with Create Snowpack App (CSA). 4 | 5 | ## Available Scripts 6 | 7 | ### npm start 8 | 9 | Runs the app in the development mode. 10 | Open http://localhost:8080 to view it in the browser. 11 | 12 | The page will reload if you make edits. 13 | You will also see any lint errors in the console. 14 | 15 | ### npm test 16 | 17 | Launches the test runner in the interactive watch mode. 18 | See the section about running tests for more information. 19 | 20 | ### npm run build 21 | 22 | Builds a static copy of your site to the `build/` folder. 23 | Your app is ready to be deployed! 24 | 25 | **For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file. 26 | 27 | ### Q: What about Eject? 28 | 29 | No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same. 30 | -------------------------------------------------------------------------------- /mock-es-module/test/postMessage.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 13 | 14 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /snowpack-lit/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Snowpack App 10 | 11 | 12 | 13 | 14 | 15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /snowpack-lit/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Fred K. Schott 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /snowpack-svelte/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /snowpack-svelte/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Fred K. Schott 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /import-maps/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import '../my-element.js'; 4 | 5 | describe('MyElement', () => { 6 | it('has a default title "Hey there" and counter 5', async () => { 7 | const el = await fixture(html` 8 | 9 | `); 10 | 11 | expect(el.title).to.equal('Hey there'); 12 | expect(el.counter).to.equal(5); 13 | }); 14 | 15 | it('increases the counter on button click', async () => { 16 | const el = await fixture(html` 17 | 18 | `); 19 | el.shadowRoot.querySelector('button').click(); 20 | 21 | expect(el.counter).to.equal(6); 22 | }); 23 | 24 | it('can override the title via attribute', async () => { 25 | const el = await fixture(html` 26 | 27 | `); 28 | 29 | expect(el.title).to.equal('attribute title'); 30 | }); 31 | 32 | it('passes the a11y audit', async () => { 33 | const el = await fixture(html` 34 | 35 | `); 36 | 37 | await expect(el).shadowDom.to.be.accessible(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /lit-element/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import '../my-element.js'; 4 | 5 | describe('MyElement', () => { 6 | it('has a default title "Hey there" and counter 5', async () => { 7 | const el = await fixture(html` 8 | 9 | `); 10 | 11 | expect(el.title).to.equal('Hey there'); 12 | expect(el.counter).to.equal(5); 13 | }); 14 | 15 | it('increases the counter on button click', async () => { 16 | const el = await fixture(html` 17 | 18 | `); 19 | el.shadowRoot.querySelector('button').click(); 20 | 21 | expect(el.counter).to.equal(6); 22 | }); 23 | 24 | it('can override the title via attribute', async () => { 25 | const el = await fixture(html` 26 | 27 | `); 28 | 29 | expect(el.title).to.equal('attribute title'); 30 | }); 31 | 32 | it('passes the a11y audit', async () => { 33 | const el = await fixture(html` 34 | 35 | `); 36 | 37 | await expect(el).shadowDom.to.be.accessible(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /playwright/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import '../my-element.js'; 4 | 5 | describe('MyElement', () => { 6 | it('has a default title "Hey there" and counter 5', async () => { 7 | const el = await fixture(html` 8 | 9 | `); 10 | 11 | expect(el.title).to.equal('Hey there'); 12 | expect(el.counter).to.equal(5); 13 | }); 14 | 15 | it('increases the counter on button click', async () => { 16 | const el = await fixture(html` 17 | 18 | `); 19 | el.shadowRoot.querySelector('button').click(); 20 | 21 | expect(el.counter).to.equal(6); 22 | }); 23 | 24 | it('can override the title via attribute', async () => { 25 | const el = await fixture(html` 26 | 27 | `); 28 | 29 | expect(el.title).to.equal('attribute title'); 30 | }); 31 | 32 | it('passes the a11y audit', async () => { 33 | const el = await fixture(html` 34 | 35 | `); 36 | 37 | await expect(el).shadowDom.to.be.accessible(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /puppeteer/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import '../my-element.js'; 4 | 5 | describe('MyElement', () => { 6 | it('has a default title "Hey there" and counter 5', async () => { 7 | const el = await fixture(html` 8 | 9 | `); 10 | 11 | expect(el.title).to.equal('Hey there'); 12 | expect(el.counter).to.equal(5); 13 | }); 14 | 15 | it('increases the counter on button click', async () => { 16 | const el = await fixture(html` 17 | 18 | `); 19 | el.shadowRoot.querySelector('button').click(); 20 | 21 | expect(el.counter).to.equal(6); 22 | }); 23 | 24 | it('can override the title via attribute', async () => { 25 | const el = await fixture(html` 26 | 27 | `); 28 | 29 | expect(el.title).to.equal('attribute title'); 30 | }); 31 | 32 | it('passes the a11y audit', async () => { 33 | const el = await fixture(html` 34 | 35 | `); 36 | 37 | await expect(el).shadowDom.to.be.accessible(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /saucelabs/test/my-element.test.js: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import '../my-element.js'; 4 | 5 | describe('MyElement', () => { 6 | it('has a default title "Hey there" and counter 5', async () => { 7 | const el = await fixture(html` 8 | 9 | `); 10 | 11 | expect(el.title).to.equal('Hey there'); 12 | expect(el.counter).to.equal(5); 13 | }); 14 | 15 | it('increases the counter on button click', async () => { 16 | const el = await fixture(html` 17 | 18 | `); 19 | el.shadowRoot.querySelector('button').click(); 20 | 21 | expect(el.counter).to.equal(6); 22 | }); 23 | 24 | it('can override the title via attribute', async () => { 25 | const el = await fixture(html` 26 | 27 | `); 28 | 29 | expect(el.title).to.equal('attribute title'); 30 | }); 31 | 32 | it('passes the a11y audit', async () => { 33 | const el = await fixture(html` 34 | 35 | `); 36 | 37 | await expect(el).shadowDom.to.be.accessible(); 38 | }); 39 | }); 40 | -------------------------------------------------------------------------------- /snowpack-react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | // Create the count state. 7 | const [count, setCount] = useState(0); 8 | // Create the counter (+1 every second). 9 | useEffect(() => { 10 | const timer = setTimeout(() => setCount(count + 1), 1000); 11 | return () => clearTimeout(timer); 12 | }, [count, setCount]); 13 | // Return the App component. 14 | return ( 15 |
16 |
17 | logo 18 |

19 | Edit src/App.jsx and save to reload. 20 |

21 |

22 | Page has been open for {count} seconds. 23 |

24 |

25 | 31 | Learn React 32 | 33 |

34 |
35 |
36 | ); 37 | } 38 | 39 | export default App; 40 | -------------------------------------------------------------------------------- /lit-element-ts-tsc/test/my-element.test.ts: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import { MyElement } from '../src/MyElement'; 4 | import '../my-element'; 5 | 6 | describe('MyElement', () => { 7 | it('has a default title "Hey there" and counter 5', async () => { 8 | const el: MyElement = await fixture(html` `); 9 | 10 | expect(el.title).to.equal('Hey there'); 11 | expect(el.counter).to.equal(5); 12 | }); 13 | 14 | it('increases the counter on button click', async () => { 15 | const el: MyElement = await fixture(html` `); 16 | el.shadowRoot!.querySelector('button')!.click(); 17 | 18 | expect(el.counter).to.equal(6); 19 | }); 20 | 21 | it('can override the title via attribute', async () => { 22 | const el: MyElement = await fixture(html` `); 23 | 24 | expect(el.title).to.equal('attribute title'); 25 | }); 26 | 27 | it('passes the a11y audit', async () => { 28 | const el: MyElement = await fixture(html` `); 29 | 30 | await expect(el).shadowDom.to.be.accessible(); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /lit-element-ts-esbuild/test/my-element.test.ts: -------------------------------------------------------------------------------- 1 | import { html, fixture, expect } from '@open-wc/testing'; 2 | 3 | import { MyElement } from '../src/MyElement'; 4 | import '../my-element'; 5 | 6 | describe('MyElement', () => { 7 | it('has a default title "Hey there" and counter 5', async () => { 8 | const el: MyElement = await fixture(html` `); 9 | 10 | expect(el.title).to.equal('Hey there'); 11 | expect(el.counter).to.equal(5); 12 | }); 13 | 14 | it('increases the counter on button click', async () => { 15 | const el: MyElement = await fixture(html` `); 16 | el.shadowRoot!.querySelector('button')!.click(); 17 | 18 | expect(el.counter).to.equal(6); 19 | }); 20 | 21 | it('can override the title via attribute', async () => { 22 | const el: MyElement = await fixture(html` `); 23 | 24 | expect(el.title).to.equal('attribute title'); 25 | }); 26 | 27 | it('passes the a11y audit', async () => { 28 | const el: MyElement = await fixture(html` `); 29 | 30 | await expect(el).shadowDom.to.be.accessible(); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /snowpack-lit/src/app-root.ts: -------------------------------------------------------------------------------- 1 | import { customElement, property, LitElement, html, css } from 'lit-element'; 2 | 3 | @customElement('app-root') 4 | export class AppRoot extends LitElement { 5 | @property() message = 'Learn LitElement'; 6 | 7 | static get styles() { 8 | return css` 9 | h1 { 10 | font-size: 4rem; 11 | } 12 | .wrapper { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | flex-direction: column; 17 | height: 100vh; 18 | background-color: #2196f3; 19 | background: linear-gradient(315deg, #b4d2ea 0%, #2196f3 100%); 20 | font-size: 24px; 21 | } 22 | .link { 23 | color: white; 24 | } 25 | `; 26 | } 27 | 28 | render() { 29 | return html` 30 |
31 |

LitElement + Snowpack

32 |

Edit src/app-root.ts and save to reload.

33 | 39 | ${this.message} 40 | 41 |
42 | `; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /guides/test-runner/responsive/test/my-card.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 |
18 | 19 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /snowpack-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@snowpack/app-template-react", 3 | "description": "A preconfigured template for Snowpack with React", 4 | "version": "2.0.0", 5 | "license": "MIT", 6 | "homepage": "https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-react#readme", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/snowpackjs/snowpack.git", 10 | "directory": "create-snowpack-app/app-template-react" 11 | }, 12 | "keywords": [ 13 | "csa-template" 14 | ], 15 | "publishConfig": { 16 | "access": "public" 17 | }, 18 | "scripts": { 19 | "start": "snowpack dev", 20 | "build": "snowpack build", 21 | "format": "prettier --write \"src/**/*.{js,jsx}\"", 22 | "lint": "prettier --check \"src/**/*.{js,jsx}\"", 23 | "test": "web-test-runner \"src/**/*.test.jsx\" --coverage" 24 | }, 25 | "dependencies": { 26 | "react": "18.3.1", 27 | "react-dom": "18.3.1" 28 | }, 29 | "devDependencies": { 30 | "@snowpack/plugin-dotenv": "2.2.0", 31 | "@snowpack/plugin-react-refresh": "2.5.0", 32 | "@snowpack/web-test-runner-plugin": "0.2.2", 33 | "@testing-library/react": "13.4.0", 34 | "@web/test-runner": "0.16.0", 35 | "chai": "4.5.0", 36 | "prettier": "3.3.3", 37 | "snowpack": "3.8.8" 38 | }, 39 | "gitHead": "a01616bb0787d56cd782f94cecf2daa12c7594e4" 40 | } 41 | -------------------------------------------------------------------------------- /import-maps/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { importMapsPlugin } from "@web/dev-server-import-maps"; 2 | 3 | export default { 4 | plugins: [ 5 | importMapsPlugin({ 6 | inject: { 7 | importMap: { 8 | imports: { 9 | "lit-html": "/node_modules/lit-html/lit-html.js", 10 | "lit-html/": "/node_modules/lit-html/", 11 | "lit-element": "/node_modules/lit-element/lit-element.js", 12 | "chai/": "/node_modules/chai/", 13 | "@open-wc/testing": "/node_modules/@open-wc/testing/index.js", 14 | "@open-wc/testing/": "/node_modules/@open-wc/testing/", 15 | "@open-wc/testing-helpers": "/node_modules/@open-wc/testing-helpers/index.js", 16 | "@open-wc/testing-helpers/": "/node_modules/@open-wc/testing-helpers/", 17 | "@open-wc/semantic-dom-diff": "/node_modules/@open-wc/semantic-dom-diff/index.js", 18 | "@open-wc/scoped-elements": "/node_modules/@open-wc/scoped-elements/index.js", 19 | "@open-wc/dedupe-mixin": "/node_modules/@open-wc/dedupe-mixin/index.js", 20 | "chai-a11y-axe": "/node_modules/chai-a11y-axe/index.js", 21 | "chai-dom": "/node_modules/chai-dom/chai-dom.js", 22 | "sinon-chai": "/node_modules/sinon-chai/lib/sinon-chai.js", 23 | "axe-core/": "/node_modules/axe-core/", 24 | }, 25 | }, 26 | }, 27 | }), 28 | ], 29 | }; 30 | -------------------------------------------------------------------------------- /html-test/test/my-element.test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /snowpack-lit/types/static.d.ts: -------------------------------------------------------------------------------- 1 | /* Use this file to declare any custom file extensions for importing */ 2 | /* Use this folder to also add/extend a package d.ts file, if needed. */ 3 | 4 | /* CSS MODULES */ 5 | declare module '*.module.css' { 6 | const classes: { [key: string]: string }; 7 | export default classes; 8 | } 9 | declare module '*.module.scss' { 10 | const classes: { [key: string]: string }; 11 | export default classes; 12 | } 13 | declare module '*.module.sass' { 14 | const classes: { [key: string]: string }; 15 | export default classes; 16 | } 17 | declare module '*.module.less' { 18 | const classes: { [key: string]: string }; 19 | export default classes; 20 | } 21 | declare module '*.module.styl' { 22 | const classes: { [key: string]: string }; 23 | export default classes; 24 | } 25 | 26 | /* CSS */ 27 | declare module '*.css'; 28 | declare module '*.scss'; 29 | declare module '*.sass'; 30 | declare module '*.less'; 31 | declare module '*.styl'; 32 | 33 | /* IMAGES */ 34 | declare module '*.svg' { 35 | const ref: string; 36 | export default ref; 37 | } 38 | declare module '*.bmp' { 39 | const ref: string; 40 | export default ref; 41 | } 42 | declare module '*.gif' { 43 | const ref: string; 44 | export default ref; 45 | } 46 | declare module '*.jpg' { 47 | const ref: string; 48 | export default ref; 49 | } 50 | declare module '*.jpeg' { 51 | const ref: string; 52 | export default ref; 53 | } 54 | declare module '*.png' { 55 | const ref: string; 56 | export default ref; 57 | } 58 | 59 | /* CUSTOM: ADD YOUR OWN HERE */ 60 | -------------------------------------------------------------------------------- /.github/workflows/verify.yml: -------------------------------------------------------------------------------- 1 | name: Verify changes 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | verify: 7 | name: Verify changes 8 | runs-on: ubuntu-latest 9 | strategy: 10 | matrix: 11 | project: 12 | [ 13 | lit-element, 14 | lit-element-ts-esbuild, 15 | lit-element-ts-tsc, 16 | html-test, 17 | preact-htm, 18 | preact-jsx, 19 | preact-tsx, 20 | puppeteer, 21 | playwright, 22 | import-maps, 23 | mock-es-module, 24 | visual-regression, 25 | saucelabs, 26 | guides/test-runner/getting-started, 27 | guides/test-runner/watch-and-debug, 28 | guides/test-runner/playwright, 29 | guides/test-runner/responsive, 30 | guides/test-runner/typescript, 31 | react-htm, 32 | react-jsx, 33 | react-tsx, 34 | snowpack-lit, 35 | snowpack-react, 36 | snowpack-svelte, 37 | ] 38 | steps: 39 | - uses: actions/checkout@v4 40 | 41 | - name: Setup Node 42 | uses: actions/setup-node@v4 43 | with: 44 | node-version: 14 45 | 46 | - uses: microsoft/playwright-github-action@v1 47 | 48 | - name: Install dependencies 49 | working-directory: ${{ matrix.project }} 50 | run: npm ci 51 | 52 | - name: Test 53 | working-directory: ${{ matrix.project }} 54 | run: npm run test 55 | env: 56 | SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }} 57 | SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }} 58 | -------------------------------------------------------------------------------- /snowpack-svelte/src/App.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 57 | 58 |
59 |
60 | 61 |

Edit src/App.svelte and save to reload.

62 |

Page has been open for {count} seconds.

63 |

64 | 65 | Learn Svelte 66 | 67 |

68 |
69 |
70 | -------------------------------------------------------------------------------- /snowpack-react/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /saucelabs/web-test-runner.config.mjs: -------------------------------------------------------------------------------- 1 | import { createSauceLabsLauncher } from "@web/test-runner-saucelabs"; 2 | import { legacyPlugin } from "@web/dev-server-legacy"; 3 | 4 | // configure the local Sauce Labs proxy, use the returned function to define the 5 | // browsers to test 6 | const sauceLabsLauncher = createSauceLabsLauncher({ 7 | // your username and key for Sauce Labs, you can get this from your Sauce Labs account 8 | // it's recommended to store these as environment variables 9 | user: process.env.SAUCE_USERNAME, 10 | key: process.env.SAUCE_ACCESS_KEY, 11 | // the Sauce Labs datacenter to run your tests on, defaults to 'us-west-1' 12 | region: "eu-central-1", 13 | }); 14 | 15 | const sharedCapabilities = { 16 | "sauce:options": { 17 | name: "my test name", 18 | // if you are running tests in a CI, the build id might be available as an 19 | // environment variable. this is useful for identifying test runs 20 | // this is for example the name for github actions 21 | build: `my project ${process.env.GITHUB_REF || "local"} build ${ 22 | process.env.GITHUB_RUN_NUMBER || "" 23 | }`, 24 | }, 25 | }; 26 | 27 | export default { 28 | concurrentBrowsers: 2, 29 | concurrency: 6, 30 | browserStartTimeout: 1000 * 30 * 5, 31 | sessionStartTimeout: 1000 * 30 * 5, 32 | sessionFinishTimeout: 1000 * 30 * 5, 33 | browsers: [ 34 | sauceLabsLauncher({ 35 | ...sharedCapabilities, 36 | browserName: "chrome", 37 | browserVersion: "latest", 38 | platformName: "Windows 10", 39 | }), 40 | // sauceLabsLauncher({ 41 | // ...sharedCapabilities, 42 | // browserName: "chrome", 43 | // browserVersion: "latest-1", 44 | // platformName: "Windows 10", 45 | // }), 46 | sauceLabsLauncher({ 47 | ...sharedCapabilities, 48 | browserName: "firefox", 49 | browserVersion: "latest", 50 | platformName: "Windows 10", 51 | }), 52 | // sauceLabsLauncher({ 53 | // ...sharedCapabilities, 54 | // browserName: "safari", 55 | // browserVersion: "latest", 56 | // platformName: "macOS 10.15", 57 | // }), 58 | // sauceLabsLauncher({ 59 | // ...sharedCapabilities, 60 | // browserName: "MicrosoftEdge", 61 | // browserVersion: "latest", 62 | // platformName: "Windows 10", 63 | // }), 64 | // sauceLabsLauncher({ 65 | // ...sharedCapabilities, 66 | // browserName: "MicrosoftEdge", 67 | // browserVersion: "18", 68 | // platformName: "Windows 10", 69 | // }), 70 | sauceLabsLauncher({ 71 | ...sharedCapabilities, 72 | browserName: "internet explorer", 73 | browserVersion: "11.0", 74 | platformName: "Windows 7", 75 | }), 76 | ], 77 | plugins: [legacyPlugin()], 78 | testFramework: { 79 | config: { 80 | timeout: "10000", 81 | }, 82 | }, 83 | }; 84 | -------------------------------------------------------------------------------- /preact-tsx/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Basic Options */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | "target": "ES2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 8 | "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 9 | // "lib": [], /* Specify library files to be included in the compilation. */ 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 15 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | // "outDir": "./", /* Redirect output structure to the directory. */ 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | // "composite": true, /* Enable project compilation */ 20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 21 | // "removeComments": true, /* Do not emit comments to output. */ 22 | // "noEmit": true, /* Do not emit outputs. */ 23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 26 | 27 | /* Strict Type-Checking Options */ 28 | "strict": true, /* Enable all strict type-checking options. */ 29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 30 | // "strictNullChecks": true, /* Enable strict null checks. */ 31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 36 | 37 | /* Additional Checks */ 38 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | 43 | /* Module Resolution Options */ 44 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 45 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 46 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 47 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 48 | // "typeRoots": [], /* List of folders to include type definitions from. */ 49 | // "types": [], /* Type declaration files to be included in compilation. */ 50 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 51 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 52 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 53 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 54 | 55 | /* Source Map Options */ 56 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 59 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 60 | 61 | /* Experimental Options */ 62 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 63 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 64 | 65 | /* Advanced Options */ 66 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 67 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /react-tsx/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 4 | 5 | /* Basic Options */ 6 | // "incremental": true, /* Enable incremental compilation */ 7 | "target": "ES2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 8 | "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 9 | // "lib": [], /* Specify library files to be included in the compilation. */ 10 | // "allowJs": true, /* Allow javascript files to be compiled. */ 11 | // "checkJs": true, /* Report errors in .js files. */ 12 | "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 15 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 16 | // "outFile": "./", /* Concatenate and emit output to single file. */ 17 | // "outDir": "./", /* Redirect output structure to the directory. */ 18 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 19 | // "composite": true, /* Enable project compilation */ 20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 21 | // "removeComments": true, /* Do not emit comments to output. */ 22 | // "noEmit": true, /* Do not emit outputs. */ 23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 26 | 27 | /* Strict Type-Checking Options */ 28 | "strict": true, /* Enable all strict type-checking options. */ 29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 30 | // "strictNullChecks": true, /* Enable strict null checks. */ 31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 36 | 37 | /* Additional Checks */ 38 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | 43 | /* Module Resolution Options */ 44 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 45 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 46 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 47 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 48 | // "typeRoots": [], /* List of folders to include type definitions from. */ 49 | // "types": [], /* Type declaration files to be included in compilation. */ 50 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 51 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 52 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 53 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 54 | 55 | /* Source Map Options */ 56 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 58 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 59 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 60 | 61 | /* Experimental Options */ 62 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 63 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 64 | 65 | /* Advanced Options */ 66 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 67 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /guides/test-runner/typescript/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "src","test" 4 | ], 5 | "compilerOptions": { 6 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 7 | 8 | /* Basic Options */ 9 | // "incremental": true, /* Enable incremental compilation */ 10 | "target": "es2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ 11 | "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ 12 | // "lib": [], /* Specify library files to be included in the compilation. */ 13 | // "allowJs": true, /* Allow javascript files to be compiled. */ 14 | // "checkJs": true, /* Report errors in .js files. */ 15 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 16 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 17 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 18 | "sourceMap": true, /* Generates corresponding '.map' file. */ 19 | // "outFile": "./", /* Concatenate and emit output to single file. */ 20 | // "outDir": "./", /* Redirect output structure to the directory. */ 21 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 22 | // "composite": true, /* Enable project compilation */ 23 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 24 | // "removeComments": true, /* Do not emit comments to output. */ 25 | // "noEmit": true, /* Do not emit outputs. */ 26 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 27 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 28 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 29 | 30 | /* Strict Type-Checking Options */ 31 | "strict": true, /* Enable all strict type-checking options. */ 32 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 33 | // "strictNullChecks": true, /* Enable strict null checks. */ 34 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 35 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 36 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 37 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 38 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 39 | 40 | /* Additional Checks */ 41 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 42 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 43 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 44 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 45 | 46 | /* Module Resolution Options */ 47 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 48 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 49 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 50 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 51 | // "typeRoots": [], /* List of folders to include type definitions from. */ 52 | // "types": [], /* Type declaration files to be included in compilation. */ 53 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 54 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 55 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 56 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 57 | 58 | /* Source Map Options */ 59 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 60 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 61 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 62 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 63 | 64 | /* Experimental Options */ 65 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 66 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 67 | 68 | /* Advanced Options */ 69 | "skipLibCheck": true, /* Skip type checking of declaration files. */ 70 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 71 | } 72 | } 73 | --------------------------------------------------------------------------------