DEV Community: thinny

Angular 11+ FormGroup Array ด้วย RxWeb

thinny — Thu, 11 Nov 2021 10:06:25 +0000

ติดตั้ง @rxweb/reactive-form-validators
$ npm install @rxweb/reactive-form-validators

/** app.module.ts */

import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    RxReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

สร้าง job.model.ts

สร้าง models เพื่อใช้การทำ validate forms

/** models/job.model.ts*/

import { required } from "@rxweb/reactive-form-validators";

export class JobModel {
  @required()
  jobName: string;

  ...
}

สร้าง user.model.ts

สร้าง models เพื่อใช้การทำ validate forms

/** models/user.model.ts*/

import { required, requiredTrue } from "@rxweb/reactive-form-validators";

export class JobModel {
  @required()
  jobName: string;

  @requiredTrue()
  jobValue: boolean;
}

Config validationMessage & ผูก models

/** app.component.ts */
import { ReactiveFormConfig } from '@rxweb/reactive-form-validators';
...

export class AppComponent implements OnInit {
  myForm!: FormGroup;
  constructor(private formBuilder: RxFormBuilder) { }
  ...

  ngOnInit(): void {

      ReactiveFormConfig.set({
      validationMessage: {
        required: "This field is required",
        minLength: "minimum length is {{1}}",
        requiredTrue: "allowed requiredTrue only"
      }
    });

    let user = new UserModel();

    let job1 = new JobModel();
    job1.jobName = 'Angular'
    job1.jobValue = true;

    let job2 = new JobModel();
    job2.jobName = 'Vue'
    job2.jobValue = false

    user.jobs = new Array<JobModel>();
    user.jobs.push(job1);
    user.jobs.push(job2);

    this.userForm = this.formBuilder.formGroup(user);
  }
}

แสดง errorMessage ที่ html template

<!-- app.component.html -->

<form [formGroup]="myForm">
    <div>
    <h3>Jobs</h3>
    <div formArrayName="jobs" *ngFor="let item of userForm?.get('jobs')?.controls; let i = index;">
      <div [formGroupName]="i">
        <input type="checkbox" formControlName="jobValue">
        <label>
          {{ item.get('jobName').value }}
        </label>
      </div>
      <div style="color:red;">
        {{ item.get('jobValue')?.errorMessage }}
      </div>
    </div>
    jobs valid: {{ userForm.get('jobs').valid }}
  </div>
</form>

แค่นี้เราก็จะได้ formGroupArray แบบง่ายๆมาใช้แล้วครับ

Angular 11+ new way form validation with RxWeb

thinny — Wed, 10 Nov 2021 20:40:32 +0000

RxWeb คืออะไร

An Open-Source Architecture
for Web Applications in Angular & Vue & .Net Core
DOMAIN-DRIVEN DESIGN | SERVERLESS | MICROSERVICES | RESTFUL

Goal

Provides all type of clientside validations.
Easy way to create Angular Reactive Form Group & Template Driven Form Validation with less lines of code & clean code.
Easy to create Dynamic Reactive Form / Template Driven Form.

การ Validate forms ปกติใน Angular

/** app.module.ts */

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

/** app.component.ts */

import { FormBuilder, FormGroup } from '@angular/forms';

export class AppComponent implements OnInit {
  myForm!: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ...

  ngOnInit(): void {
    this.myForm = this.formBuilder.group({
      name: [null, [Validators.required]],
      lastName: [null, [Validators.required]],
      age: [null, [Validators.required]]
    })
  }
}

โค้ดมารวมกันที่อยู่ component อาจจะทำให้ไม่ clean code และ less code ได้

<!-- app.component.html -->

  <form [formGroup]="myForm">
    Name: <input type="text" formControlName="name">
    <label>{{myForm.get('name').errors}}</label>

    LastName: <input type="text" formControlName="lastName">
    <label>{{myForm.get('lastName').errors}}</label>

    Ager: <input type="text" formControlName="age">
    <label>{{myForm.get('age').errors}}</label>
  </form>

มาดูการ Validate form แบบใหม่ ด้วย RxWeb

$ npm install @rxweb/reactive-form-validators

/** app.module.ts */

import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    RxReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

สร้าง models เพื่อใช้การทำ validate forms

/** models/user.model.ts*/

import { minLength, required } from "@rxweb/reactive-form-validators";

export class UserModel {
  @required()
  @minLength({ value: 5 })
  userName: string;

  @required()
  lastName: string;

  @required()
  age: number;

  ...
}

แยกโค้ดให้ไป validate โดยการใช้ models ทำให้ code clean & less code มากขึ้น filling look like Java, Nestjs โดยการใช้ class validator decorator มาใช้แทนที่จะเขียน รวมอยู่ใน component เดียวกัน

เริ่มผูก models เข้ากับ formGroup

/** app.component.ts */

import { FormGroup } from '@angular/forms';
import { RxFormBuilder } from '@rxweb/reactive-form-validators';
import { UserModel } from './models/user.model';

export class AppComponent implements OnInit {
  myForm!: FormGroup;
  constructor(private formBuilder: RxFormBuilder) { }
  ...

  ngOnInit(): void {
    let user = new UserModel();
    this.userForm = this.formBuilder.formGroup(user);
  }
}

ดูจาก function ngOnInit() ทำให้ดู clean code & less code มาก

Config validationMessage

/** app.component.ts */
import { ReactiveFormConfig } from '@rxweb/reactive-form-validators';
...

export class AppComponent implements OnInit {
  myForm!: FormGroup;
  constructor(private formBuilder: RxFormBuilder) { }
  ...

  ngOnInit(): void {

      ReactiveFormConfig.set({
      validationMessage: {
        required: "This field is required",
        minLength: "minimum length is {{1}}",
      }
    });

    let user = new UserModel();
    this.userForm = this.formBuilder.formGroup(user);
  }
}

เราสามารถ custom error message มาเพื่อแสดง error message หรือจะเขียนแยกไว้แล้วค่อยมาใช้งานก็ได้

แสดง errorMessage ที่ html template

<!-- app.component.html -->

<form [formGroup]="myForm">
    Name: <input type="text" formControlName="name">
    <label> {{ userForm?.controls?.name["errorMessage"]}}</label>

    LastName: <input type="text" formControlName="lastName">
    <label>{{ userForm?.controls?.lastName["errorMessage"]}}</label>

    Ager: <input type="text" formControlName="age">
    <label>{{ userForm?.controls?.age["errorMessage"]}}</label>
</form>

Benefit

เราสามารถทำ Group หรือทำ Array Group เพื่อให้ Validate forms แบบ complex รวมไปถึงการ reused ในต่าง component ได้แบบสบายๆ

ศึกษาข้อมูลเพิ่มได้ที่

https://docs.rxweb.io/getting-start

การ validate แบบเดียวกัน Backend

NestJs class validators

https://www.npmjs.com/package/class-validator

Java Bean validations

https://docs.oracle.com/javaee/7/tutorial/bean-validation001.htm

จัดการ DOM ด้วย bind:this และใช้งาน DOM

thinny — Wed, 24 Feb 2021 08:50:26 +0000

ในสมัยก่อนยุคของ AJAX ปัญหาอย่างหนึ่งในการสร้างเว้บด้วยภาษา javascript ก้คือการ จัดการกับ Document Object Model(DOM) การใช้ Javascript ไป maintain DOM ทำได้ยากมาก พอมายุคที่มี jquery การเขียนคสบคุม DOM เริ่มง่ายขึ้น

เริ้มจากสร้าง HTML ง่ายๆก่อน และใช้งาน bind:this={ตัวแปร type HTMLElemnt}

<!-- HTML -->
<div bind:this={Div}></div>

ต่อมาผูกตัวแปร Div โดย type เป็น HTMLElement

let Div;

// Typescript
let Div: HTMLElement;

modify DOM ด้วย vanilaJS

<script>
import {onMount} from 'svelte';
let Div;

onMount(() => {
    Div.textContent = 'Text Content'
    Div.style.color= 'red'
    Div.style.fontSize='24px'
    Div.style.backgroundColor ='#f4fcfc'
    Div.style.padding = '20px'
})

</script>

ผลลัพธ์

ดูตัวอย่างได้ที่ REPL

หากสนใจ svelte สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก

ขอบคุณทุกท่านที่อ่านมาถึงตรงนี้ ถ้าอ่านแล้วรู้มีประโยชน์ ฝากกด Subscribe หรือ share link ให้คนอื่นรับรู้ด้วยนะครับ ขอบคุณครับ

ตรวจสอบค่า slot ด้วย $$slots ใน Svelte3

thinny — Tue, 16 Feb 2021 03:19:40 +0000

เมื่ออ่านมาถึงบทนี้ ก็คงจะพอรู้และการใช้งาน slot มาพอสมควรแล้วคราวนี้เรามาลองตรวจค่าจาก slot กันหน่อย

สืบเนื่องจาก slot มีการกหนด fallback ได้ ปัญหาในเรื่องนี้คือ เมื่อเราไม่กไหนดค่าให้ slot default แต่ slot ก็ยังค่า fallback content อยู่ดี ถ้่าหากเราต้องการตรวจสอบค่าจาก slot นั้นก่อนจะทำอย่างไร มาดูกันครับ

/* Comment.svelte */
<div class="discussion">
  <h3>Comments</h3>
  <slot name="comment">
    default slot
  </slot>
</div>

/* App.svelte */
<script>
  import Comment from "Comment.svelte";
</script>

<Comment>
  <span slot="comment">Title Comment</span>
</Comment>

<Comment />

ผลลัพธ์

แต่ถ้าเราอยาก check ค่า slot ก่อนว่ามีการส่งค่า named slot มาไหมแล้วค่อยแสดง content ได้ เราสามารถใช้ $$slots ตรวจสอบค่าได้

/* Comment.svelte */

{#if $$slots.comment}
<div class="discussion">
  <h3>Comments</h3>
  <slot name="comment">
    default slot
  </slot>
</div>
{/if}

ผลลัพธ์

ถ้าเราไม่ได้ส่ง named slot เข้าไปมันก็ไม่แสดง fallback content ออกมาแล้ว
ลองไปปรับใช้กันนะครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag

เจาะช่อง Paste Content ให้ตรงตำแหน่งด้วย Named slot ใน svelte3

thinny — Mon, 15 Feb 2021 02:49:33 +0000

ปกติแล้วเวลาเราจะ pass custom content ไปให้ slot ใช้งาน เราจะก็วางโครง content ของเราเอง แล้ว pass custom content ไปทั้งหมด 😂 คราวนี้ถ้า slot เรามีการวางโครงสร้างแบบชัดเจน เช่น มี title มี sub title มี content ซึ่ง component มีการวางโครง slot ไว้แล้ว เวลาเราส่ง content เข้าไปมันก็จะไม่เข้าไปที่ slot เพราะว่ามีการกหนดชื่อ slot ไว้ เวลาเราส่ง เราต้องบอกชื่อ slot ด้วย ว่าจะให้ไปลงตำแหน่งไหน

สมมุติว่าเรามีการวางโครง slot ไว้แบบนี้ เป็น ContactCard ง่าย

/* ContactCard.svelte */

<article class="contact-card">
  <h2>
    <slot name="name">
    <span class="missing">ไม่รู้จัก name</span>
    </slot>
  </h2>

  <div class="address">
     <slot name="address">
    <span class="missing">ไม่รู้จัก address</span>
     </slot>
  </div>

  <div class="email">
     <slot name="email">
    <span class="missing">ไม่รู้จัก email</span>
     </slot>
  </div>
</article>

จากตัวอย่างเรามีการ เจาะช่องเพื่อวาง content ตามที่เราต้องการ พร้อมกำหนดชื่อไว้อย่างชัดเจน มี name address และ email ดังภาพ

แต่ละ slot มีการทำ content fallback ไว้ด้วย ถ้าเกิดเราไม่ได้ pass content ให้ตรงตามชื่อ slot มันจะเอา content fallback ไปแสดงแทน เราลองมารันดูกันก่อน ดีกว่า

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard />

/* ContactCard.svelte */

<article class="contact-card">
  <h2>
    <slot name="name">
    <span class="missing">ไม่รู้จัก name</span>
    </slot>
  </h2>

  <div class="address">
     <slot name="address">
    <span class="missing">ไม่รู้จัก address</span>
     </slot>
  </div>

  <div class="email">
     <slot name="email">
    <span class="missing">ไม่รู้จัก email</span>
     </slot>
  </div>
</article>

ผลลัพธ์

เรามาลอง pass custom content กันหน่อย

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span>
    P. Thinny
  </span>
</ContactCard>

ผลลัพธ์

แน่นอนครับ มันไม่มีอะไรเปลี่ยนแปลง เพราะว่า เรายังไม่ได้ระบุชื่อ slot ตรง ตามที่เราได้กำหนดชื่อเอาไว้ งั้นลอง pass ชื่อ slot ไปสัก 1 อันก่อนแล้วกัน

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span slot="name">
    P. Thinny
  </span>
</ContactCard>

ถ้าเราระบุชื่อ slot="name" ให้ตรงจะได้ content กลับมา ดังภาพ

เรามาระบุชื่อให้ครบทุกอันดีกว่า แล้วมาดูผลลัพธ์กัน

/* App.svelte */

<script>
    import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
  <span slot="name">
    P. Thinny
  </span>

  <span slot="address">
    Bangkok 10400
  </span>

  <span slot="email">
    poly.dev2018@gmail.com
  </span>

</ContactCard>

จะเห็นว่าได้ข้อมูลมาครบแล้ว นี่ก็เป็นวิธีการที่เราสามารถเอาข้อมูลไปวางตรงตำแหน่งที่เรากำหนดไว้ได้แล้ว ง่ายไหมครับ แล้วติดต่อ section ต่อไป นะครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag

รู้จักกับ slot fallback ใน svelte3

thinny — Sat, 13 Feb 2021 09:25:53 +0000

บทที่แล้วเราได้ทำความรู้จักกับ slot ไปแล้ว บทนี้เรามาเรียนรู้ในการใช้ slot เพิ่มมากขึ้นไปอีกนิดนึงกัน

บทนี้จะอธิบายถึงว่า ถ้ามีการเรียกใช่้งาน slot element แล้วเราไมไ่ด้มี custom content ให้ slot แล้วให้ slot default content ให้ เราวามารถทำได้อย่างไรได้บ้าง

ตัวอย่างประกอบ

ถ้าเรามีใช้งาน slot แล้วมีการทำ custom content ให้ slot ก็จะแสดงผลปกติแต่ถ้า ไม่มีการ custom content ไปให้ slot ตัว slot เองจะมีการทำ default content หรือที่เราเรียกว่า. slot fallbacks ให้เราแบบนี้เลย

เตรียม component กันก่อนนะครับ

/** App.svelte */

<script>
    import Box from './Box.svelte';
</script>

/** Box.svelte */
<style>
    .box {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
        margin: 0 0 1em 0;
    }
</style>

<div class="box">
   <slot />
</div>

ถ้าเรามีการทำ custom content ให้ slot ก็ได้แบบนี้

/* App.svelte */
<script>
    import Box from './Box.svelte';
</script>

<Box>
   <h2>Hello!</h2>
   <p>This is a box. It can contain anything.</p>
</Box>

ถ้าเราไม่ได้ pass custom content เข้าไปจะได้แบบนี้

/* App.svelte */
<script>
    import Box from './Box.svelte';
</script>

<Box />

จะเห็นว่ามันได้กล่องปล่าวมาแบบนี้ ถ้าเราต้องการให้มีค่า defualt content ละแทนที่จะเป็นกล่องปล่าว ทำงี้ครับ

/* Box.svelte */

<div class="box">
  <slot>
    <em>no content was provided</em>
  </slot>
</div>

ใน slot element เราสามารถใส่ content ลงไปได้เพื่อให้เป็น default content เพียงเท่านี้เราจะก็มี content fallback มาแล้วครับ ดีกว่าเป็นกล่องปล่าวๆ

/* App.svelte */

<script>
  import Box from './Box.svelte';
</script>

<Box>
   <h2>Hello!</h2>
   <p>This is a box. It can contain anything.</p>
</Box>

<Box/>

เพียงเท่านี้เราก็มี fallback content ใน slot เรียบร้อยแล้วครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag

pass custom content จาก parent -> child ด้วย slot

thinny — Fri, 12 Feb 2021 08:56:48 +0000

ปกติแล้วเวลาเราจะส่งค่า จาก parent component ไปหา child component จะต้องส่งด้วย props แต่ปัญหาอย่างหนึ่งในการ ส่งค่าข้าม component คือ ถ้าข้อมูลมาขนาดใหญ่ และข้อมูลอยู่ในรูปแบบ html จะเริ่มทำยากแล้วครับ ถ้าเราเจอ case study แบบนี้เราจะมี solution มาแก้ปัญหายังไง มาดูกันครับ

slot คืออะไร

slot หรือ slot tag หรือ slot element มันคือ html element อันนึงใน webcomponent ที่ช่วยให้เราสามารถรับค่าจาก parent component ได้ หรือหากเราต้องการเจาะช่องไว้ เพื่อให้ content บางอย่างมาแสดงเฉพาะส่วนที่เราเจาะช่องไว้ก็ได้

มาเตรียม component กันก่อน

<!-- App.svelte -->
<script>
    import Box from './Box.svelte';
</script>

<!-- ใช้งาน Box -->
<Box>

</Box>

<!-- Box.svelte -->
<style>
    .box {
        width: 300px;
        border: 1px solid #aaa;
        border-radius: 2px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
        margin: 0 0 1em 0;
    }
</style>

<div class="box">

</div>

ถ้าเราต้องการส่งค่าจาก parent -> child ผ่าน prop

<!-- App.svelte -->
<script>
   import Box from './Box.svelte';
   const title = 'Title Prop'

</script>

<!-- ใช้งาน Box -->
<Box {title} />

<!-- Box.svelte -->
<script>
export let title;
</script>

<div class="box">
  {title}
</div>

ส่งค่า ผ่าน prop โดยข้อมูลเป็น html

<!-- App.svelte -->
<script>
   import Box from './Box.svelte';
   const title = '<h1>Title Prop</h1>'
</script>

<!-- ใช้งาน Box -->
<Box {title} />

<!-- Box.svelte -->
<script>
export let title;
</script>

<div class="box">
  {@html title}
</div>

ในกรณีอาจจะยังไม่เห็นว่ามันมีปัญหายังไง คราวนี้เราลองใส่ข้อมูลไปใน ตัวแปร title เยอะขึ้น ผสมกับ html tag ไปด้วย จะเห็นว่ามันจัดระเบียบข้อมูลยากขึ้น ถ้ายังไม่เห็นภาพ เพิ่ม style เข้าไปอีก ข้อมูลเริ่มรกละ

ถ้าเกิดว่าเราจัดโครงสร้างข้อมูลเอง ทำ block content อาจจะมี style ร่วมด้วย แต่ว่าดูสะอาดตามากขึ้น เราสามารถแก้ปัญหานี้ slot tag ครับ มาดูกัน

<!-- App.svelte -->
<script>
   import Box from './Box.svelte';
</script>

<!-- ใช้งาน Box -->
<Box>
  <h1>Slot Title</h1>
</Box>

<!-- Box.svelte -->
<div class="box">
  <slot />
</div>

ลองมาวางโครงและใส่ข้อมูลเยอะมากขึ้น

<!-- App.svelte -->
<script>
   import Box from './Box.svelte';
</script>

<!-- ใช้งาน Box -->
<Box>
  <div class="title">
    <h1>Slot Title</h1>
  </div>

  <div class="sub_title">
    <h4>Slot SubTitle</h4>
  </div>

  <div class="content">
    <p>content...</p>
  </div>

</Box>

<!-- Box.svelte -->
<div class="box">
  <slot />
</div>

จากตัวอย่างจะเห็นว่าไม่ว่าเราจะใส่ content มากแค่ไหน มันก็ยังดูสะอาดตา เพราะมันเป็นโครงสร้าง html ทั่วไปที่เราคุ้นเคยอยู่แล้ว แถมยังสามารถจัดโครงสร้าง content ได้เองอีกด้วย <slot /> ถ้าเรากำหนดแบบนี้ ที่ฝั่ง component ลูก เราจะเรียกว่า default slot ไม่ว่าเราจะใส่ content มาในรูปแบบไหน มันจะมาลงที่ defualt slot นี้เลย นี่ก็เป็นแค่ตัวอย่างการใช้ slot tag ง่ายๆนะครับ

ศึกษาเพิ่มเติมเรื่อง slot tag ได้ที่ slot tag

เข้าถึง props ทั้งหมดด้วย $$propsใน svelte3

thinny — Thu, 11 Feb 2021 18:55:21 +0000

Props ใน Svelte คืออะไร

props คือการ pass ค่าต่างๆไปให้ child component ใช้งาน สามารถ pass props แบบ static และ pass แบบ object หรือใช้การ pass แบบ spread props

/** Button.svelte */

<script>
export let title;
</script>

<button>
  {title}
</button>

/** App.svelte */

<script>
import Button from "./Button.svelte";
</script>

<main>
  <Button title='Toggle' />
</main>

pass props แบบ static

title='Toggle' เรียกว่าการ pass แบบ static

pass props ผ่านตัวแปร

/** App.svelte */

<script>
import Button from "./Button.svelte";
const title = 'Toggle'
</script>

<main>
  <Button title={title} />
</main>

หรือ

<main>
  <Button {title} />
</main>

title={title} เรียกว่าการ pass props ผ่านตัวแปร

pass props ผ่าน Object

/** App.svelte */

<script>
import Button from "./Button.svelte";
const props = {
  title: 'Toggle'
}
</script>

<main>
  <Button title={props.title} />
</main>

text={title} เรียกว่าการ pass props ผ่าน Object

pass props ผ่าน Spread props

/** App.svelte */

<script>
import Button from "./Button.svelte";
const props = {
  title: 'Toggle',
  name: 'myName'
}
</script>

<main>
  <Button {...props} />
</main>

{...props} เรียกว่าการ pass props โดยการใช้ spread operator มาช่วย ในการ pass ค่า ผ่าน Object ฝั่ง child component จะได้ props ทั้งหมดในตัวแปร props

/** Button.svelte */

<script>
export let title;
export let name;
</script>

<button {name}>
  {title}
</button>

เราสามารถรับค่า name เพิ่มได้จาก object props ที่ pass เข้ามา

access props ผ่าน $$props

/** App.svelte */

<script>
import Button from "./Button.svelte";
const props = {
  title: 'Toggle',
  name: 'myName'
}
</script>

<main>
  <Button {...props} />
</main>

/** Button.svelte */

<script>
let {title, name } = $$props
</script>

<button {name}>
  {title}
</button>

จากตัวอย่างก้านบนเราสามารถรับค่า title, name มาได้จาก $$props ซึ่งตัว $$props จะเก็บค่า props ที่มีการ pass มาไว้ทั้งหมด

/** Button.svelte */

<button {$$props.name}>
  {$$props.title}
</button>

หรือจะใช้แบบนี้ก้ได้ ทำให้โค้ดสั้นลงอีกมาก เพียงเท่านี้เราก็สามารถรับค่า props มาใช้งานได้แล้ว ง่ายไหมครับ svelte

Build customElement แบบ entry point ด้วย svelte3

thinny — Sun, 07 Feb 2021 15:49:52 +0000

การสร้าง webomponent ด้วย svelte ทำได้ง่ายมากอยู่แล้ว แล้วยัง config เพียงไม่กี่ขั้นตอน แต่มีสิ่งที่เราต้องการจัดการคือการ build component ออกมาหลายๆ webcomponent พร้อมๆกัน

เราเตรียม webcomponent structure ตามภาพนะครับ มี textBox, Button
เราอยากจะ build webcomponent ให้ได้ตามโครงสร้างที่เราได้กำหนดไว้ใน src/web_components เราจะ config ยังไงกัน มาดูครับ

/** rollup.config.js */
import svelte from "rollup-plugin-svelte";
import path from "path";
import multiInput from "rollup-plugin-multi-input";
import fs from "fs";

จากนั้นกำหนด basePath webcomponent ของเราให้เรียบร้อยครั

let basePath = path.join(__dirname, "./src/web_components");

เริ่มอ่าน folder ทั้งหมดจาก basePath ที่เราได้กำหนด

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
  ...
  }, []);

จากนั้นเอา folder และ file มา join กัน

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
  const name = path.join(dir, file);
  ...
  }, []);

ตรวจสอบว่าชื่อที่ได้มาเป็น file หรือ folder

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
   const name = path.join(dir, file);
   const isDirectory = fs.statSync(name).isDirectory();
   ...
  }, []);

ถ้าชื่อยังเป็น folder อยู่ก็ไปหาไฟล์มาใหม่ โดยใช้หลักการของ recusive function ถ้าเป็น file แล้วก็ไป merge เข้ากับ files แล้วก็ return ชื่อไฟล์ทั้งหมดออกไป เป็น array

const getAllFiles = (dir) =>
  fs.readdirSync(dir).reduce((files, file) => {
   const name = path.join(dir, file);
   const isDirectory = fs.statSync(name).isDirectory();
   return isDirectory ? [...files, ...getAllFiles(name)] : [...files, name];
  }, []);

เรียกใช้งานเพื่อเอาชื่อไฟล์ทั้งหมดออกมาเป็น array

const srcFiles = getAllFiles(basePath);

เรียกใช้งาน sourceFile เข้าไปใน config ในช่อง input ซึ่ง input ของ rollup สามารถรับค่าเป็น array ได้ นั่นเลยทำเราสามารถส่ง entry point เข้าไปแบบ multiple entry point ได้

export default {
    input: srcFiles,
    output: {
     format: "es",
     dir: "public/build",
    },
    plugins: [
      svelte({
        compilerOptions: {
          customElement: true },
      }),
      multiInput({
        relative: "src/",
        transformOutputPath: (output) => {
            return output;
        },
      })
    ]
};

พอ config เสร็จลองมา build กันครับ yarn build / npm run build

ก่อน build

หลัง build

เรียบร้อยแล้วครับ ได้โครงสร้าง webcomponent ตามที่เรา design ไว้ที่ src แล้ว แล้วยังสามารถ build webcomponent พร้อมกันหลายไฟล์ได้ด้วย สบายเลยงานนี้

เราสามารถเข้า webcomponent ทั้งหมดภายใต้ web_component/index....js ได้ทันที หรือจะเลือกใช้ component ที่ละตัวได้ ตามที่ต้องการ

การสร้างและ build webcomponent ใน svelte ไม่ใช่เรื่องยากอีกต่อไป ท่านใดที่อ่านยังไม่เข้าใจสามมรถย้อนไปดูเรื่องการ สร้าง webcomponent ด้วย svelte ได้ ตาม link ด้านล่างได้เลยครับ

CustomElement ใน Svelte3 ง่ายๆ แค่ปลายนิ้ว

สามารถเรียนรู้การใช้งาน svelte แบบ step by step ได้ที่
Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก

CustomElement ใน Svelte3 ง่ายๆ แค่ปลายนิ้ว

thinny — Sun, 07 Feb 2021 11:40:07 +0000

Web components คืออะไร

web component คือชุดของ API แพลตฟอร์มเว็บที่ช่วยให้คุณสร้างแท็ก HTML ที่กำหนดเองใช้ซ้ำได้และห่อหุ้มเพื่อใช้ในเว็บเพจและเว็บแอป คอมโพเนนต์และวิดเจ็ตแบบกำหนดเองขึ้นอยู่กับมาตรฐานส่วนประกอบของเว็บทำงานบนเบราว์เซอร์ที่ทันสมัยและสามารถใช้กับ Library JavaScript ที่เข้ากันได้กับ HTML

ส่วนประกอบของ web component จะประกอบไปด้วย 4 ประการ หลักๆ

custom Elements specification
shadow DOM specification
HTML Template specification
ES Module specification

web component meta-specification ศึกษาข้อมูลเพิ่มเติมได้ที่

custom HTML tags

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

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

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

เราสามารถ extends HTMLElements อื่นๆได้ เช่น HTMLButtonElement

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

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

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

Shadow DOM

Shadow DOM เป็นการกำหนดวิธีใช้สไตล์ที่ห่อหุ้มและมาร์กอัปในส่วนประกอบของเว็บ ความสามารถในการซ่อนโครงสร้างมาร์กอัปสไตล์และพฤติกรรมและแยกออกจากโค้ดอื่น ๆ บนเพจเพื่อไม่ให้ส่วนต่างๆขัดแย้งกัน เช่นว่า ถ้าชื่อ styles ภายในและภายนอก เป็นชื่อเดียวกัน ถ้าอยู่ภายใต้ Shadow DOM จะมองเป็นคนละชื่อ และภายใน Shadow DOM จะไม่มี side effect ไปหาภายนอกเช่นกัน

<!--- 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'}); เพื่อ attachShadow เข้าไปใน element

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

ES Module

ESM ย่อมาจาก ES Modules เป็นข้อเสนอของ Javascript ในการใช้ระบบโมดูลมาตรฐาน ซึ่งในอนาคต Library ของ Javascript ต้องปรับให้เข้ากับมาตรฐาน ESM ทั้งหมด วิธีสังเกตุการใช้งานจะมี type="module" ใน tag script
หรือสามารถ import ด้วย นามสกุล .mjs หรือเราสามารถกหนด ใน package.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

เราพอรู้จัก webcomponent กันแล้วใช่ไหมครับ คราวนี้เรามาดูกันว่า ด้วยความเรียบง่ายของ svelte ที่เขียน code ได้สั้นและกระชับ จะเอามาสร้าง webcomponent ได้อย่างไร รับรองว่าแค่กระดิกนิ้ว ก็เสร็จได้โดยง่าย

การทำ CustomElement ใน Svelte

สมมุติเราสร้าง structure ตามภาพนะครับ

📦src
┣ 📂web_components
┃ ┣ 📂Button
┃ ┃ ┣ 📜Button.svelte
┃ ┃ ┗ 📜index.js
┣ 📜App.svelte
┣ 📜main.js
┗ 📜styles.svelte

โค้ดใน component เราจะประมาณนี้

/** 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>

ตัวที่บอกว่า component เราคือ web_component
<svelte:options tag="sv-button" /> ชื่อที่เป็น customElement เราคือ sv-button คำสั่ง svelte:options เป็นคำสั่งคอยบอก compiler ของ svelte ว่า tag="sv-button" ทำให้เป็น customElement ให้หน่อย

ที่มา svelte-options

ยังไม่จบแค่นี้ เรายังต้องมา config rollup.config.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 input: ${basePath}/Button/Button.svelte แล้วมีการกำหนด output เป็น ESM format ซึ่งทำให้ไฟล์ webcomponent ของเราเป็นไปมาตรฐานของ. web component spec กำหนดปลายทางไปที่ dir: "public/build"

จากนั้นเราลอง build ดูจะได้โครงสร้างประมาณนี้ ตัวที่บอกให้ build component ธรรมดาเป็น web component คือ customElement: true แต่ว่าต้องไปกำหนด svelte:options ด้วยนะ ใน component ที่เราต้องการ

จะเห็นว่าโครงสร้างมันอยู่ในระดับเดียวกันหมด ถ้ามา component หลายตัวคงวุ่นวายน่าดู งั้นเรามาจะระเบียบโครงสร้างหลัง Build กันใหม่

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

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

เมื่อเพิ่ม plugin นี้เข้าไปมันจะ build โครงสร้างให้เป็นไปตาม src ที่เราได้ทำเอาไว้ มาลอง build กันดูอีกรอบ

พอเรามาแกะโครงสร้าง web component ที่ผ่านการ build มาแล้ว

จะเห็นมีการ ทำ customElement ตาม spec ของ web component
แถมยังมีการ export component ออกมาตาม ESM syntax ด้วย ถ้ายังนั้นก็หมายความเราสามารถเอาไป import ให้ใช้งานได้ เพราะ modern browser รู้จัก syntax แบบนี้อยู่แล้ว

เวลาใช้ก็ import web component ที่เราได้ build ไว้นะครับ
<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 ครั้งครับมีการ alert เป็นไปตามที่เราได้เขียนไว้เลยครับ

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

เพียงเท่านี้เราก้ได้ webcomponent ที่เขียนจาก svelte มาใช้แล้วครับ

จะเห็นว่า การสร้าง component ธรรมดา จนกลายมาเป็น web component ที่พร้อมใช้งาน ผ่านการ config น้อยมาก ง่ายมากด้วย นี่ยังไม่ได้พูดถึงการ build webcomponent แบบหลายไฟล์รวมกัน ซึ่ง javascript framework ตัวอื่นทำได้ยากมากกว่าจะได้ web component มาใช้งานอันนึง บางทีอาจจะต้องเอา component มา wrap อีก นั่นเป็นเพราะว่าด้วยข้อจำกัดของ javascript ด้วย
svelte จึงเป็นทางเลือกอีกทางหนึ่ง ที่เหมาะสำหรับนักพัฒนาที่จะเอามาทำเป็น webcomponent แจกจ่าย หรือใช้งานภายในองค์กร เพราะเขียนโค้ดน้อยมาก config ก็ไม่ยากเลย

ขอบคุณที่ท่านที่อ่านมาจนจบ ฝากกด Subscribe กด Share link ด้วยนะครับ

สำหรับใครที่อ่านแล้วยังไม่เข้าใจ แล้วอยากเรียนรู้ svelte. ตั้งแต่เริ่ม แบบ step by step สามารถศึกษาเพิ่มเติมได้ที่

Svelte: Framework Not Framework — (ตอนที่ 1) แรกรู้จัก