カスタム要素ใน Svelet 3ง่ายๆ แค่ปลายนิ้ว

Webコンポーネントคืออะไร

Webコンポーネントคือชุดของ APIแพลตฟอร์มเว็บที่ช่วยให้คุณสร้างแท็ก HTMLที่กำหนดเองใช้ซ้ำได้และห่อหุ้มเพื่อใช้ในเว็บเพจและเว็บแอป คอมโพเนนต์และวิดเจ็ตแบบกำหนดเองขึ้นอยู่กับมาตรฐานส่วนประกอบของเว็บทำงานบนเบราว์เซอร์ที่ทันสมัยและสามารถใช้กับ ライブラリที่เข้ากันได้กับ HTML

ส่วนประกอบของ Webコンポーネントจะประกอบไปด้วย 4ประการ หลักๆ

カスタム要素仕様

シャドウDOM仕様

HTMLテンプレート仕様

モジュール仕様

Webコンポーネントメタ仕様ศึกษาข้อมูลเพิ่มเติมได้ที่

カスタムHTMLタグ

class AutonomousButton extends HTMLElement {
  ...
}
customElements.define("autonomous-button", AutonomousButton);

การเรียกใช้งาน

<autonomous-button>Click Me :)</autonomous-button>

เราสามารถ 拡張モジュールอื่นๆได้ เช่น HTMLButtonElement

class CustomizedButton extends HTMLButtonElement {
  ...
}
customElements.define("customized-button", CustomizedButton, { extends: "button" });

การเรียกใช้งาน

<button is="customized-button">Click Me :)</button>

影ドム

影ドムเป็นการกำหนดวิธีใช้สไตล์ที่ห่อหุ้มและมาร์กอัปในส่วนประกอบของเว็บ ความสามารถในการซ่อนโครงสร้างมาร์กอัปสไตล์และพฤติกรรมและแยกออกจากโค้ดอื่น ๆ บนเพจเพื่อไม่ให้ส่วนต่างๆขัดแย้งกัน เช่นว่า ถ้าชื่อ スタイルภายในและภายนอก เป็นชื่อเดียวกัน ถ้าอยู่ภายใต้ 影ドムจะมองเป็นคนละชื่อ และภายใน 影ドムจะไม่มี 副作用ไปหาภายนอกเช่นกัน

<!--- HTML element --->
<div class="element"></div>

/** attachted shadow DOM */
const header = document.createElement('element');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';

ใช้ const shadowRoot = header.attachShadow({mode: 'open'}); เพื่อ アタッチメントเข้าไปใน 元素

<div class="element">
   #shadow-root (open)
   <h1>Hello Shadow DOM</h1>
</div>

ESモジュール

ESMย่อมาจาก モジュールเป็นข้อเสนอของ ジャバスクリプトในการใช้ระบบโมดูลมาตรฐาน ซึ่งในอนาคต 図書館ของ ジャバスクリプトต้องปรับให้เข้ากับมาตรฐาน ESMทั้งหมด วิธีสังเกตุการใช้งานจะมี type="module" ใน タグスクリプト
หรือสามารถ 輸入ด้วย นามสกุล .MJSหรือเราสามารถกหนด ใน パッケージ.JSONโดยระบุ type="module" ก็ได้

/** import syntax */
import "https://example.com/module.mjs";

/** package.json */
{
  ...
  "type": "module"
}

<!-- import module script -->
<script type="module" src="modules/module.js"></script>

<script type="module">
  import {awesomeExplosion} from '@awesome-things/awesome-explosion';
</script>

ทีมา integration-with-the-javascript-module-system
เราพอรู้จัก コンポーネントกันแล้วใช่ไหมครับ คราวนี้เรามาดูกันว่า ด้วยความเรียบง่ายของ スベルトที่เขียน コードได้สั้นและกระชับ จะเอามาสร้าง コンポーネントได้อย่างไร รับรองว่าแค่กระดิกนิ้ว ก็เสร็จได้โดยง่าย

การทำ カスタム要素ใน スベルト

สมมุติเราสร้าง 構造ตามภาพนะครับ
📦src
┣ 📂ウェーブコンポーネント
┃ ┣ 📂ボタン
┃ ┃ ┣ 📜ボタン.スベルト
┃ ┃ ┗ 📜インデックス.js
┣ 📜アプリ.スベルト
┣ 📜メイン.js
┗ 📜スタイル.スベルト
โค้ดใน コンポーネントเราจะประมาณนี้

/** Button.svelte */
<svelte:options tag="sv-button" />

<script>
  import { onMount } from "svelte";
  onMount(() => {
    console.log("button web component mounted");
  });
  const alertClick = () => {
    alert("alert Button");
  };
</script>

<button on:click={alertClick}>Button</button>

ตัวที่บอกว่า コンポーネントเราคือ WebHoundコンポーネント<svelte:options tag="sv-button" /> ชื่อที่เป็น カスタム要素เราคือ svボタンคำสั่ง Svelte :オプションเป็นคำสั่งคอยบอก コンパイラของ スベルトว่า tag="sv-button" ทำให้เป็น カスタム要素ให้หน่อย
ที่มา svelte-options
ยังไม่จบแค่นี้ เรายังต้องมา CONFIG ROLLUP設定.jsอีกเล็กน้อย

/** rollup.config.js */

import svelte from "rollup-plugin-svelte";
import path from "path";
let basePath = path.join(__dirname, "./src/web_components");

export default {
       input: `${basePath}/Button/Button.svelte`,
       output: {
     format: "es",
     dir: "public/build",
       },
       ...
       plugins:[
          svelte({
        compilerOptions: {
        customElement: true
            }
      }),
       ]
}

จากภาพด้านบนเราจะเห็นว่า เรามีการ รับ 入力input: ${basePath}/Button/Button.svelte แล้วมีการกำหนด 出力เป็น ESM形式ซึ่งทำให้ไฟล์ コンポーネントของเราเป็นไปมาตรฐานของ. Webコンポーネント仕様กำหนดปลายทางไปที่ dir: "public/build"จากนั้นเราลอง ビルドดูจะได้โครงสร้างประมาณนี้ ตัวที่บอกให้ ビルドコンポーネントธรรมดาเป็น Webコンポーネントคือ customElement: true แต่ว่าต้องไปกำหนด Svelte :オプションด้วยนะ ใน コンポーネントที่เราต้องการ

จะเห็นว่าโครงสร้างมันอยู่ในระดับเดียวกันหมด ถ้ามา コンポーネントหลายตัวคงวุ่นวายน่าดู งั้นเรามาจะระเบียบโครงสร้างหลัง ビルドกันใหม่

import multiInput from "rollup-plugin-multi-input";

export default {
   ...
   plugins: [
      ...,
      multiInput({
    relative: "src/",
    transformOutputPath: (output, input) => {
       return output;
        },
      }),
  ],
}

เมื่อเพิ่ม プラグインนี้เข้าไปมันจะ ビルドโครงสร้างให้เป็นไปตาม src ที่เราได้ทำเอาไว้ มาลอง ビルドกันดูอีกรอบ

พอเรามาแกะโครงสร้าง Webコンポーネントที่ผ่านการ ビルドมาแล้ว

จะเห็นมีการ ทำ カスタム要素ตาม 仕様ของ Webコンポーネント
แถมยังมีการ コンポーネントのエクスポートออกมาตาม ESM構文ด้วย ถ้ายังนั้นก็หมายความเราสามารถเอาไป 輸入ให้ใช้งานได้ เพราะ 最新ブラウザรู้จัก 構文แบบนี้อยู่แล้ว

เวลาใช้ก็ Webコンポーネントのインポートที่เราได้ ビルドไว้นะครับ<script type="module" defer src='/build/web_components/Button/Button.js'></script>ที่สำคัญอย่าลืม type="module" นะครับ เดี่ยวมันจะด่าเรา
ส่วนตอนจะเรียกใช้ก้แค่ ใส่ชื่อ Cutomelementเขาไปได้เลยครับ

<sv-button></sv-button>

พอได้ตามที่ต้องการแล้ว ถึงเวลารัน yarn start/ npm run start
จากนั้น ลองกดไปที่ปุ่ม 1ครั้งครับมีการ 警戒เป็นไปตามที่เราได้เขียนไว้เลยครับ

const alertClick = () => {
    alert("alert Button");
};

เพียงเท่านี้เราก้ได้ コンポーネントที่เขียนจาก スベルトมาใช้แล้วครับ

จะเห็นว่า การสร้าง コンポーネントธรรมดา จนกลายมาเป็น Webコンポーネントที่พร้อมใช้งาน ผ่านการ 設定น้อยมาก ง่ายมากด้วย นี่ยังไม่ได้พูดถึงการ ビルドコンポーネントแบบหลายไฟล์รวมกัน ซึ่ง JavaScriptフレームワークตัวอื่นทำได้ยากมากกว่าจะได้ Webコンポーネントมาใช้งานอันนึง บางทีอาจจะต้องเอา コンポーネントมา ラップอีก นั่นเป็นเพราะว่าด้วยข้อจำกัดของ ジャバスクリプトด้วย
スベルトจึงเป็นทางเลือกอีกทางหนึ่ง ที่เหมาะสำหรับนักพัฒนาที่จะเอามาทำเป็น コンポーネントแจกจ่าย หรือใช้งานภายในองค์กร เพราะเขียนโค้ดน้อยมาก 設定ก็ไม่ยากเลย
ขอบคุณที่ท่านที่อ่านมาจนจบ ฝากกด 購読するกด シェアリンクด้วยนะครับ
สำหรับใครที่อ่านแล้วยังไม่เข้าใจ แล้วอยากเรียนรู้ スベルト.ตั้งแต่เริ่ม แบบ 一歩一歩สามารถศึกษาเพิ่มเติมได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก