Tạo dự án app-template-lit-element-typescript với snowpack

Bài viết được sự cho phép của tác giả Lê Chí Dũng

Snowpack là một công cụ xây dựng để xây dựng môi trường phát triển front-end.

Snowpack cung cấp một bộ khởi động độc lập cho mỗi môi trường phát triển được gọi là Tạo ứng dụng Snowpack (CSA). Lần này, tôi sẽ giới thiệu quy trình tạo một Thành phần Web đơn giản bằng cách sử dụng app-template-lit-element là một trong Tạo ứng dụng Snowpack .

3 bước tối ưu hiệu năng React App bằng các API mới của React

3 tools giúp bạn tăng hiệu năng của React App một cách bất ngờ

Cài đặt app-template-lit-element-typescript

Để cài đặt app-template-lit-element, trước tiên hãy thực hiện lệnh sau trong bất kỳ thư mục nào.

npx create-snowpack-app [dirname] --template @snowpack/app-template-lit-element-typescript

Sau khi cài đặt xong, di chuyển đến bất kỳ thư mục nào npm startvà thực hiện lệnh sau .

cd [dirname]
npm start

Nếu bạn truy cập http://localhost:8080 và trình duyệt hiển thị bản chụp sau thì việc xây dựng môi trường đã thành công

Tạo component button

Ảnh động GIF của nút bật tắt chuyển đổi giữa BẬT và TẮT khi nút được nhấp

Custom element

Đầu tiên, tạo một tệp cho thành phần.

Template được tạo bởi app-template-lit-element-typescript đều trong folder “src/”

Hãy tạo src/Components/ToggleButton.ts và code sau.

import { customElement, LitElement, html } from 'lit-element';

@customElement('toggle-button')
export class ToggleButton extends LitElement {
  render() {
    return html`
      <button class="c-button">Button</button>
    `;
  }
}

LitElement là class thư viện để tạo WebComponents và sử dụng lit-html.

Tiếp theo, define custom element @customElement của LitElement <toggle-button>

Decorators chưa có sẵn trong JavaScript gốc, nhưng chúng có thể được sử dụng với các plugin của Babel

Bên cạnh việc xác định custom element, hãy xác định mẫu Shadow DOM cho component. Hãy render()triển khai một hàm của lớp LitElement . Call the lit-element htmlfunction in a tagged template literal so that the render()function returns the result.

  // ...
  render() {
    return html`
      <button class="c-button">ボタン</button>
    `;
  }
  // ...

Khi mô tả được hoàn thành cho đến nay, các phần tử của màn hình được hiển thị ./src/app-root.jsvà thành phần đã tạo được importđọc bởi một câu lệnh. Sau đó, ./src/app-root.jscác render()chỉ định nghĩa các chức năng <toggle-button>để mô tả.

import { customElement, property, LitElement, html, css } from 'lit-element';
import './Components/ToggleButton';

// ...
  render() {
    return html`
      <div class="wrapper">
        <h1>LitElement + Snowpack</h1>
        <p>Edit <code>src/app-root.js</code> and save to reload.</p>

        <toggle-button></toggle-button>

        <a
          class="link"
          href="https://lit-element.polymer-project.org/"
          target="_blank"
          rel="noopener noreferrer"
        > ${this.message}</a>
      </div>
    `;
  }
// ...

Nếu bạn thực thi mã cho đến nay trong trình duyệt, nó sẽ giống như hình chụp sau.

Chụp màn hình trình duyệt với thành phần nút bật tắt được thêm vào

Property

Tôi muốn chuyển đổi kiểu nút và văn bản được kích hoạt bởi sự kiện nhấp chuột, vì vậy tôi muốn xác định thuộc tính được đặt tên cho liên kết dữ liệu trong trình trang trí @propertypressed .

Trước hết, tải trình trang trí @property từ thư viện phần tử ánh sáng và viết mã sau.

import { customElement, property, LitElement, html } from 'lit-element';
@customElement('toggle-button')
export class ToggleButton extends LitElement {
  @property({
    type: Boolean,
    reflect: true
  })
  pressed = false;
  // ...
}

Với LitElement, bạn có thể tùy chỉnh hành vi của các thuộc tính, v.v. và nội dung có thể được đặt dưới dạng một tùy chọn. Điểm lần này là cài đặt được gọi là phản chiếu . Điều này reflectcho phép các thay đổi thuộc tính được phản ánh dưới dạng thuộc tính trong các phần tử tùy chỉnh. Kể từ khi tài sản được thiết lập với Boolean thời gian này true, falsecác thuộc tính được thêm vào khi nào, và thuộc tính sẽ bị xóa khi. Bằng cách này, LitElement cho phép bạn tùy chỉnh hành vi của chính thuộc tính .

Tiếp theo pressed, viết một biểu thức để chuyển đổi từ ngữ của nút trong phần tử tùy chỉnh bằng cách sử dụng thuộc tính đã xác định . Ngoài ra, hãy mô tả thuộc tính @click trong mẫu và liên kết hàm pressedchuyển đổi giá trị boolean của thuộc tính toggle().

@customElement('toggle-button')
export class ToggleButton extends LitElement {
  @property({
    type: Boolean,
    reflect: true,
  })
  pressed = false;

  toggle() {
    this.pressed = !this.pressed;
  }

  render() {
    return html`
      <button class="c-button" @click="${this.toggle}">
        ${this.pressed ? 'ON' : 'OFF'}
      </button>
    `;
  }
}

Bằng cách này, toggle()hàm sẽ cập nhật thuộc tính mỗi khi bạn nhấp vào nó và truenếu thuộc tính được nhấn có giá trị, pressedthuộc tính sẽ được thêm vào HTML .

Nếu bạn thực thi mã cho đến nay trong trình duyệt, nó sẽ giống như hình chụp sau.

Chụp màn hình với các thuộc tính chuyển đổi trong Chrome DevTools khi được nhấp vào

Tham khảo việc làm Typescript lương cao hấp dẫn tại Topdev.

Styles

Cuối cùng, hãy thêm một kiểu nút. Tải thư viện LitElement cần thiết cho kiểu và đặt kiểu của nút bạn đã nhấn khi đặt nó làm thuộc tính trước đó.

import { customElement, property, LitElement, html, css } from 'lit-element';

@customElement('toggle-button')
export class ToggleButton extends LitElement {
  @property({
    type: Boolean,
    reflect: true,
  })
  pressed = false;

  static get styles() {
    return css`
      :host {
        --base-color: #c7f8f9;
        --hover-color: #6ab1c9;
      }
      .c-button {
        background-color: transparent;
        color: var(--base-color);
        font-size: 1.5em;
        letter-spacing: 0.1em;
        border: 3px solid var(--base-color);
        margin-bottom: 30px;
        padding: 1rem 3rem;
        width: 200px;
        display: inline-block;
        cursor: pointer;
        border-radius: 5px;
      }
      :host([pressed]) .c-button {
        background-color: var(--base-color);
        color: var(--hover-color);
      }`;
  }
  // ...
}

Nếu bạn thực thi mã cho đến nay trong trình duyệt, nó sẽ giống như hình chụp sau. Điều này hoàn thành một thành phần đơn giản.

Chụp màn hình nút bật tắt đã được tạo kiểu và hoàn thành

Build

Lệnh xây dựng như sau.

npm run build

Tại thời điểm xây dựng, Snowpack dịch các thư viện phụ thuộc vào ứng dụng của bạn để chúng có thể được tải bằng cách nhập ESM. Các thành phần được xuất ra build/_dist_/các thư mục và các gói phụ thuộc build/web_modules/được xuất ra.

Snowpack không có trình gói mô-đun theo mặc định và bằng cách giới thiệu @ snowpack / plugin-webpack và @ snowpack / plugin-parcel , được cung cấp dưới dạng plugin chính thức, nó hỗ trợ các trình duyệt cũ không hỗ trợ nhập ESM. Bạn hoàn toàn có thể làm được. Tuy nhiên, developxin lưu ý rằng ngay cả khi cài đặt Bundle, lệnh sẽ được xuất ra bởi Mô-đun ES.

Bài viết gốc được đăng tải tại lcdung.top

Có thể bạn quan tâm:

Xem thêm Việc làm IT hấp dẫn trên TopDev