lit parcel模板

卓能文發表於2024-08-18
mkdir myproject/src -p
cd  myproject
pnpm i lit typescript

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2020",
        "experimentalDecorators": true,
        "useDefineForClassFields": false,
        "module": "ESNext",
        "lib": [
            "ES2020",
            "DOM",
            "DOM.Iterable"
        ],
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": [
        "src"
    ]
}

src/my.counter.ts:

import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

@customElement("my-counter")
export class MyCounter extends LitElement {
	@property({ type: Number })
	count = 0;

	render() {
		const styles = { color: "" };
		if (this.count >= 0) {
			styles.color = "green";
		} else {
			styles.color = "red";
		}
		return html`
      <div>
        <button @click=${this._onDec} part="button"> - </button>
        count is: <span style=${styleMap(styles)}>${this.count}</span>
        <button @click=${this._onInc} part="button"> + </button>
      </div>
    `;
	}

	private _onDec() {
		this.count--;
	}

	private _onInc() {
		this.count++;
	}

	static styles = css`
    button {
      border-radius: 4px;
      border: 1px solid transparent;
      background-color: limegreen;
    }
  `;
}

declare global {
	interface HTMLElementTagNameMap {
		"my-counter": MyCounter;
	}
}

src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    Index
    <my-counter></my-counter>
    <script type="module" src="./my.counter.ts"></script>
</body>

</html>

src/about.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    About
    <my-counter></my-counter>
    <script type="module" src="./my.counter.ts"></script>
</body>

</html>

dev:

parcel ./src/**.html

publish:

parcel build ./src/**.html --no-source-maps --public-url .

相關文章