lit parcel模板 

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} type="button"> - </button>
        count is: <span style=${styleMap(styles)}>${this.count}</span>
        <button @click=${this._onInc} type="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 .

justfile:

publish:
    #!/usr/bin/env bash
    rm -rf dist
    parcel build ./src/**.html --no-source-maps --public-url .

    for js in dist/**.js
    do
        # closure-compiler "$js" --js_output_file new.js --charset UTF-8 --compilation_level SIMPLE --isolation_mode NONE
        # mv new.js "$js"
        terser "$js" --comments false --compress -o "$js"
    done

    # once more
    for js in dist/**.js
    do
        # closure-compiler "$js" --js_output_file new.js --charset UTF-8 --compilation_level SIMPLE --isolation_mode NONE
        # mv new.js "$js"
        terser "$js" --comments false --compress -o "$js"
    done
posted @   卓能文  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
· lit动态修改样式
· lit tailwindcss vite模板
· React工程化实践之UI组件库
· NOTE_vanilla+typescript
· React-和-TypeScript3-学习手册-全-
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示