สร้าง Web Component ด้วย SvelteKit: คู่มือฉบับสมบูรณ์ทีละขั้นตอน

สร้างโปรเจ็กต์ SvelteKit สำหรับ Web Component

ในการสร้าง Web Component ด้วย SvelteKit ให้เริ่มต้นโดยการตั้งค่าโปรเจ็กต์ใหม่ :

npx sv create example-webcomponent
cd example-webcomponent
npm run dev

การกำหนดค่าโปรเจ็กต์

เมื่อทำการติดตั้ง ให้เลือกตัวเลือกต่อไปนี้ :

• SvelteKit ขั้นต่ำ
• TypeScript
• Prettier และ ESLint (แนะนำ)
• npm

เริ่มโปรเจ็กต์ในเครื่อง

เมื่อการติดตั้งเสร็จสิ้น ให้เปิดเว็บเบราว์เซอร์ของคุณที่ที่อยู่ต่อไปนี้ :

http://localhost:5173/

หากหน้าเว็บแสดงผลอย่างถูกต้อง โปรเจ็กต์ SvelteKit ของคุณพร้อมที่จะถูกใช้ในการสร้าง Web Component.

ติดตั้ง SCSS ใน SvelteKit

เพื่อใช้ SCSS ในโครงการ SvelteKit ของคุณ คุณต้องติดตั้งคอมไพเลอร์ Sass เป็นการพึ่งพาด้านการพัฒนา:

npm install -D sass-embedded

เมื่อทำการติดตั้งแล้ว SvelteKit จะตรวจพบ SCSS โดยอัตโนมัติในไฟล์ .svelte ของคุณผ่านแท็ก <style lang="scss">.

สร้าง Web Component ด้วย SvelteKit

เราจะสร้าง Web Component แรกของเราด้วย SvelteKit ตอนนี้ ให้สร้างไฟล์ในโฟลเดอร์ src/lib :

touch src/lib/my-web-component.svelte

จากนั้นให้เพิ่มโค้ดต่อไปนี้ :

<svelte:options customElement="my-web-component" />

<script lang="ts">
</script>

<p>สวัสดีชาวโลก</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

👉 แอตทริบิวต์ customElement="my-web-component" กำหนดชื่อของ Web Component ของคุณ ชื่อนี้ต้องมีขีดกลาง (เช่น : my-component) เพื่อจะได้เป็นชื่อที่ถูกต้องใน HTML.

กำหนดค่า SvelteKit สำหรับ Web Components

ในการเปิดใช้งานการสร้าง Web Components ด้วย SvelteKit คุณต้องแก้ไขไฟล์ svelte.config.js และเปิดใช้งานตัวเลือก customElement.

เพิ่มการกำหนดค่าต่อไปนี้:

compilerOptions: {
  customElement: true
}

นี่คือตัวอย่างการกำหนดค่าทั้งหมด:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  vitePlugin: {
    dynamicCompileOptions: ({ filename }) =>
      filename.includes('node_modules') ? undefined : { runes: true }
  },
  compilerOptions: {
    customElement: true
  }
};

export default config;

👉 ตัวเลือก customElement: true ช่วยให้ SvelteKit สามารถคอมไพล์คอมโพเนนต์ของคุณเป็น Web Components ที่สามารถใช้งานได้ในทุกสภาพแวดล้อม.

ตั้งค่า build ของ Web Component ด้วย Vite

ในการสร้าง Web Component ที่สามารถนำกลับมาใช้ใหม่ได้ คุณต้องตั้งค่า build เฉพาะด้วย Vite ซึ่งจะช่วยให้คุณส่งออกคอมโพเนนต์ของคุณในรูปแบบไฟล์ JavaScript ที่สามารถใช้งานในโครงการใดก็ได้

สร้างไฟล์การตั้งค่าที่จำเพาะ:

touch vite.config.webcomponent.js

เพิ่มการตั้งค่าดังต่อไปนี้:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { name, version } from './package.json';

export default defineConfig({
  plugins: [svelte()],
  publicDir: 'playground',
  build: {
    lib: {
      entry: './src/lib/my-web-component.svelte',
      fileName: `${name}-${version}`,
      name,
      formats: ['es']
    },
    outDir: 'static/webcomponent',
    minify: 'esbuild'
  }
});

เพิ่มสคริปต์ของ build

เพิ่มสคริปต์ต่อไปนี้ในไฟล์ package.json ของคุณ:

"build:wc": "vite build -c vite.config.webcomponent.js"

จากนั้นคุณจะสามารถสร้าง Web Component ของคุณได้ด้วยคำสั่ง:

npm run build:wc

ทดสอบ Web Component ใน SvelteKit

เมื่อสร้างการ build เสร็จแล้ว คุณสามารถทดสอบ Web Component ของคุณโดยตรงในโปรเจ็กต์ SvelteKit ของคุณได้

นำเข้าสคริปต์

ในไฟล์ +page.svelte ให้นำเข้าสคริปต์ที่สร้างขึ้นในแท็ก <svelte:head> :

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

ใช้งาน Web Component

จากนั้นให้เพิ่มคอมโพเนนต์ของคุณในเทมเพลต :

<my-web-component></my-web-component>

ตัวอย่างเต็ม

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<h1>ยินดีต้อนรับสู่ SvelteKit</h1>
<p>
  เยี่ยมชม <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> เพื่ออ่านเอกสาร
</p>

<my-web-component></my-web-component>

เริ่มโปรเจ็กต์

ให้ดำเนินการคำสั่งดังต่อไปนี้ :

npm run build:wc
npm run dev

หากทุกอย่างถูกกำหนดค่าอย่างถูกต้อง Web Component ของคุณควรจะแสดงในหน้าเว็บ

เพิ่มคุณสมบัติ (props) ให้กับ Web Component SvelteKit

คุณสามารถทำให้ Web Component ของคุณมีพลศาสตร์โดยการส่งคุณสมบัติ (props) ให้มัน

กำหนด prop ในคอมโพเนนต์

ในไฟล์ของคุณ my-web-component.svelte :

let { name = 'World' } = $props();

ใช้ prop ในเท็มเพลต

<p>สวัสดี {name}</p>

คอมโพเนนต์เต็ม

<svelte:options customElement="my-web-component" />

<script lang="ts">
  let { name = 'World' } = $props();
</script>

<p>สวัสดี {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

ใช้ prop ใน HTML

คุณสามารถส่งค่าตรงจาก HTML ได้แล้ว :

<my-web-component name="Bryan"></my-web-component>

👉 ข้อความที่แสดงจะเป็น : สวัสดี Bryan

เปิดเผยวิธีการ JavaScript (API) ใน Web Component

คุณสามารถเปิดเผยวิธีการ JavaScript เพื่อโต้ตอบกับ Web Component ของคุณจากภายนอก (JavaScript, framework, หรือ HTML).

ในตัวอย่างนี้ เราจะสร้าง getter และ setter เพื่อจัดการกับคุณสมบัติ name.

สร้างวิธีการ

const getName = (): string => {
  return name;
};

const setName = (newName: string) => {
  name = newName;
};

เปิดเผยวิธีการผ่าน Web Component

ใช้ $host() เพื่อแนบวิธีการเข้ากับองค์ประกอบ DOM :

$effect(() => {
  const host = $host();

  Object.assign(host, {
    getName,
    setName
  });
});

ส่วนประกอบทั้งหมด

<svelte:options customElement="my-web-component" />

<script lang="ts">
  let { name = 'World' } = $props();

  const getName = (): string => {
    return name;
  };

  const setName = (newName: string) => {
    name = newName;
  };

  $effect(() => {
    const host = $host();

    Object.assign(host, {
      getName,
      setName
    });
  });
</script>

<p>สวัสดี {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

ใช้วิธีการจาก JavaScript

คุณสามารถโต้ตอบกับ Web Component ของคุณจากสคริปต์ภายนอกได้แล้ว :

const el = document.querySelector('my-web-component');

// เปลี่ยนค่า
el.setName('Bryan');

// รับค่ากลับ
console.log(el.getName());

👉 วิธีการนี้ช่วยให้สร้าง API JavaScript ที่แท้จริงสำหรับ Web Component ของคุณ.

การมีปฏิสัมพันธ์กับ Web Component จาก SvelteKit

คุณสามารถมีปฏิสัมพันธ์โดยตรงกับ Web Component ของคุณจาก SvelteKit โดยการเข้าถึงวิธีการของมันผ่านการอ้างอิง JavaScript。

ประกาศการอ้างอิงไปยังคอมโพเนนต์

let wc: HTMLElement;

เชื่อมต่อ Web Component

ใช้ bind:this เพื่อรับการอ้างอิงไปยังคอมโพเนนต์：

<my-web-component bind:this={wc} name="User"></my-web-component>

เพิ่มการพิมพ์ TypeScript (แนะนำ)

เพื่อหลีกเลี่ยงความผิดพลาดใน IDE ของคุณ คุณสามารถกำหนดประเภทของวิธีการที่เปิดเผย：

let wc: HTMLElement & {
  getName: () => string;
  setName: (newName: string) => void;
};

มีปฏิสัมพันธ์กับคอมโพเนนต์

หลังจากนั้นคุณสามารถเรียกใช้วิธีการในรอบชีวิต onMount：

import { onMount } from 'svelte';

onMount(() => {
  console.log('ชื่อปัจจุบัน:', wc.getName());

  setTimeout(() => {
    console.log('== เปลี่ยนชื่อ ==');
    wc.setName('Admin');
    console.log('ชื่อปัจจุบัน:', wc.getName());
  }, 1000);
});

ตัวอย่างที่สมบูรณ์

<script lang="ts">
  import { onMount } from 'svelte';

  let wc: HTMLElement & {
    getName: () => string;
    setName: (newName: string) => void;
  };

  onMount(() => {
    console.log('ชื่อปัจจุบัน:', wc.getName());

    setTimeout(() => {
      console.log('== เปลี่ยนชื่อ ==');
      wc.setName('Admin');
      console.log('ชื่อปัจจุบัน:', wc.getName());
    }, 1000);
  });
</script>

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<h1>ยินดีต้อนรับสู่ SvelteKit</h1>
<p>
  ไปที่ <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> เพื่ออ่านเอกสาร
</p>

<my-web-component bind:this={wc} name="User"></my-web-component>

ผลลัพธ์ในคอนโซล

ชื่อปัจจุบัน: User
== เปลี่ยนชื่อ ==
ชื่อปัจจุบัน: Admin

👉 Web Component จะได้รับการอัปเดตแบบไดนามิก และการเปลี่ยนแปลงสามารถมองเห็นได้ทั้งใน DOM และในคอนโซล。

การใช้งาน slot ใน Web Component SvelteKit

slot ช่วยให้คุณสามารถแทรกเนื้อหา HTML จากภายนอกเข้าสู่ Web Component ของคุณได้ มันสำคัญมากที่จะทำให้ส่วนประกอบของคุณยืดหยุ่นและนำกลับมาใช้งานได้อีกครั้ง

เพิ่ม slot ในส่วนประกอบ

ในไฟล์ my-web-component.svelte ของคุณ ให้เพิ่มเพียง:

<slot />

แก้ไขเทมเพลต

ตัวอย่างเช่น แทนที่:

<p>Hello {name}</p>

ด้วย:

<p>Before Hello {name}</p>
<slot />
<p>After Hello {name}</p>

ส่วนประกอบทั้งหมด

<svelte:options customElement="my-web-component" />

<script lang="ts">
  let { name = 'World' } = $props();

  const getName = (): string => {
    return name;
  };

  const setName = (newName: string) => {
    name = newName;
  };

  $effect(() => {
    const host = $host();

    Object.assign(host, {
      getName,
      setName
    });
  });
</script>

<p>Before Hello {name}</p>
<slot />
<p>After Hello {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

ส่งเนื้อหาจากหน้า SvelteKit

คุณสามารถแทรกเนื้อหาโดยตรงเข้าสู่ Web Component ของคุณได้แล้ว:

<my-web-component bind:this={wc} name="User">
  <p>New content</p>
</my-web-component>

ตัวอย่างทั้งหมดใน SvelteKit

<script lang="ts">
  import { onMount } from 'svelte';

  let wc: HTMLElement & {
    getName: () => string;
    setName: (newName: string) => void;
  };

  onMount(() => {
    console.log('Current Name:', wc.getName());

    setTimeout(() => {
      console.log('== Change Name ==');
      wc.setName('Admin');
      console.log('Current Name:', wc.getName());
    }, 1000);
  });
</script>

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<h1>ยินดีต้อนรับสู่ SvelteKit</h1>
<p>
  เยี่ยมชม <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> เพื่ออ่านเอกสาร
</p>

<my-web-component bind:this={wc} name="User">
  <p>New content</p>
</my-web-component>

👉 เนื้อหาที่ส่งผ่านระหว่างแท็กของ Web Component จะถูกแทรกไปยังตำแหน่งของ <slot />.

เพิ่มภาพใน Web Component SvelteKit

ในการรวมภาพใน Web Component ด้วย SvelteKit คุณไม่สามารถใช้งานโฟลเดอร์ static ได้โดยตรง คุณต้องนำเข้าภาพเป็นโมดูลเพื่อให้ถูกต้องในการรวมเข้าสู่การสร้าง (build).

นำเข้าภาพ

ในคอมโพเนนต์ของคุณ my-web-component.svelte:

import logo from './assets/favicon.svg';

ใช้ภาพในเท็มเพลต

<img src={logo} alt="โลโก้ SvelteKit" />

คอมโพเนนต์ทั้งหมด

<svelte:options customElement="my-web-component" />

<script lang="ts">
  import logo from './assets/favicon.svg';

  let { name = 'World' } = $props();

  const getName = (): string => {
    return name;
  };

  const setName = (newName: string) => {
    name = newName;
  };

  $effect(() => {
    const host = $host();

    Object.assign(host, {
      getName,
      setName
    });
  });
</script>

<img src={logo} alt="โลโก้ SvelteKit" />

<p>ก่อน Hello {name}</p>
<slot />
<p>หลัง Hello {name}</p>

<style lang="scss">
  p {
    color: red;
  }
</style>

👉 ภาพจะถูกปรับแต่งโดยอัตโนมัติและรวมอยู่ในบันเดิลสุดท้ายของ Web Component.

ฟังเหตุการณ์จาก Web Component ใน SvelteKit

ในการสื่อสารจาก Web Component ไปยังแอปพลิเคชันของคุณ คุณสามารถสร้างเหตุการณ์ที่กำหนดเอง (CustomEvent) และฟังมันในฝั่งลูกค้า

สร้างเหตุการณ์ในคอมโพเนนต์

เพิ่มปุ่มและฟังก์ชันในคอมโพเนนต์ของคุณ:

<button on:click={handleClick}>ทดสอบ</button>

const handleClick = () => {
  const event = new CustomEvent('test', {
    detail: {
      name
    }
  });

  $host().dispatchEvent(event);
};

สร้าง API เพื่อฟังเหตุการณ์

เพื่อทำให้การฟังเหตุการณ์ง่ายขึ้น คุณสามารถเปิดเผยวิธีการ on:

const on = (event: string, callback: Function) => {
  $host().addEventListener(event, (e: any) => callback(e.detail));
};

เปิดเผยวิธีการ

$effect(() => {
  const host = $host();

  Object.assign(host, {
    getName,
    setName,
    on
  });
});

ปรับปรุงประเภทในฝั่ง SvelteKit

let wc: HTMLElement & {
  getName: () => string;
  setName: (newName: string) => void;
  on: (event: string, callback: Function) => void;
};

ฟังเหตุการณ์ในหน้า

wc.on('test', (detail: { name: string }) => {
  console.log(detail);
});

ตัวอย่างครบถ้วนในฝั่ง SvelteKit

<script lang="ts">
  import { onMount } from 'svelte';

  let wc: HTMLElement & {
    getName: () => string;
    setName: (newName: string) => void;
    on: (event: string, callback: Function) => void;
  };

  onMount(() => {
    wc.on('test', (detail: { name: string }) => {
      console.log(detail);
    });
  });
</script>

<svelte:head>
  <script type="module" src="/webcomponent/example-webcomponent-0.0.1.js"></script>
</svelte:head>

<my-web-component bind:this={wc} name="Admin"></my-web-component>

ผลลัพธ์

{ name: 'Admin' }

👉 วิธีการนี้ช่วยให้ Web Component ของคุณสื่อสารกับแอปพลิเคชันใดๆ ผ่าน API ที่เรียบง่ายและมีประสิทธิภาพ

ข้อสรุป

คุณตอนนี้รู้วิธีการสร้าง Web Component ด้วย SvelteKit, สร้างด้วย Vite และรวมเข้ากับโครงการใด ๆ ได้แล้ว

• สร้าง Web Component ด้วย SvelteKit
• กำหนดค่าและสร้างด้วย Vite
• รวมเข้ากับสภาพแวดล้อมใด ๆ (HTML, React, WordPress…)
• จัดการ props, methods, slots และ events

👉 Web Components เป็นโซลูชันที่ทรงพลังสำหรับการสร้างวิดเจ็ตที่สามารถนำกลับมาใช้ใหม่ได้ ไม่ว่าจะเป็นสำหรับ SaaS, สคริปต์ฝังตัว (embed) หรือปลั๊กอินข้ามแพลตฟอร์ม

ขอบคุณ SvelteKit คุณสามารถสร้างคอมโพเนนต์ที่มีประสิทธิภาพเบาและเป็นอิสระอย่างสมบูรณ์จากเฟรมเวิร์กที่ใช้ด้านหน้าของลูกค้า

🚀 ตอนนี้คุณสามารถสร้างวิดเจ็ตของคุณเองและรวมเข้าด้วยกันได้ทุกที่: landing pages, CMS, แอปพลิเคชันเว็บ หรือโครงการลูกค้า

ไปให้ไกลกว่าเดิม

คุณต้องการสร้าง Web Component ที่ปรับให้เข้ากับโครงการหรือธุรกิจของคุณหรือไม่?

ฉันมีทางเลือกที่ปรับแต่งได้เพื่อพัฒนา widget ที่มีประสิทธิภาพซึ่งสามารถรวมเข้ากับแพลตฟอร์มใดก็ได้ (WordPress, Shopify, SaaS…).