DEV Community: Lumin

Mock Prisma with Jest in NestJS

Lumin — Fri, 05 Sep 2025 01:09:15 +0000

Concept:

Define a type for the mock object
Assign mock value in the provider

Let's say you have a NestJS service:

class TheServiceYouWantToTest {
  constructure(
    private readonly prisma: PrismaService // <- the Prisma service contains its client (models)
  ){}
}

To test TheServiceYouWantToTest, you might need to mock PrismaService.

This is the pattern in test code that I use for mock PrismaService:

type MockPrismaService = {
  model: {
    // define only the method I'll use in the implementation code
    findMany: jest.Mock
    ...
  }
}

describe('some sort of service', () => {
  let prisma: MockPrismaService

  beforeEach(() => {
    // create the test module with our service undertest and the mock service
    const mockPrismaService: MockPrismaService = {
      model: {
        findMany: jest.fn(),
        ...
      }
    }
    const module = await Test.createTestingModule({
      providers: [
        TheServiceYouWantToTest,
        {
          provide: PrismaService,
          useValue: mockPrismaService,
        }
      ],
    })

    // get the mock object that is already binding with the test module
    // the object type will be MockPrismaService
    prisma = module.get(PrismaService)
  })

  // and then we can ...

  // mock it
  prisma.model.findMany.mockResolvedValue(...)

  // spy it
  expect(prisma.model.findMany).toHaveBeenCalled()

  // without type error
})

HTTP Compression VS Manual ZIP

Lumin — Thu, 12 Jun 2025 02:27:34 +0000

Why

I'm a lazy person. I've never done zip compression for responses to clients (although I've used encryption to reduce content size before sending). When someone recommended that I should zip and send it back to clients, it raised the question: "Hey, is what we've been using all along (HTTP compression) better? Or is manual zip better?". This project was born to compare data transmission between HTTP compression and manual ZIP response.

What

This project will be divided into 3 main parts:

Compression Server: Uses Express with compression middleware to send data compressed with gzip
Manual ZIP Server: Uses Express with middleware to create ZIP files with the returned data
Client: Calls both APIs and compares data transmission sizes. It will test both HTTP compression and manual ZIP. For HTTP compression, it will test all four types (gzip, deflate, br, and all) to see how their performance compares.

How

From the code in https://github.com/ilumin/http-compression-vs-manual-zip

Start the compression server and manual ZIP server waiting for the client to make a request.

The client will make 5 requests

HTTP Compression (All)
HTTP Compression (Gzip)
HTTP Compression (Deflate)
HTTP Compression (Brotli)
and manual ZIP

And compare responses with transfer size.

Result

Method                           Transfer Size     Compression Ratio    Duration
--------------------------------------------------------------------------------
HTTP Compression (All)           113,521 bytes     96.65%               29ms
HTTP Compression (Gzip)          133,235 bytes     96.07%               39ms
HTTP Compression (Deflate)       133,184 bytes     96.07%               37ms
HTTP Compression (Brotli)        114,375 bytes     96.63%               23ms
Manual ZIP                       141,117 bytes       N/A%               70ms

Best compression: HTTP Compression (All) with 113,521 bytes

HTTP Compression (All) (the server will automatically choose which compression method to use) can perform better than manual zip
With the same compression method (Deflate), HTTP Compression can still perform better with shorter processing time
Looking at the figures, they're not very different, but the effort, limitations, and risks of doing Manual ZIP are greater than HTTP Compression

Conclusion

Ask yourself why you want to reinvent the wheel when you already have Tesla.

Note:

In the code, I used a native HTTP client because I don't know how to intercept and get the transfer size from Axios since it automatically decompresses everything

Modern frameworks nowadays have built-in HTTP compression, so much so that we forget this kind of thing exists in the world

Code

https://github.com/ilumin/http-compression-vs-manual-zip

VSCode workspace set up for React+Node.js project

Lumin — Sun, 11 May 2025 03:42:11 +0000

Location: .vscode/settings.json

Content:

{
  // ---
  // Editor setting
  "editor.formatOnPaste": false,
  "editor.formatOnSave": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.rulers": [
    80,
    100
  ],
  "editor.renderWhitespace": "trailing",
  "editor.suggestSelection": "first",
  "editor.inlineSuggest.enabled": true,
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  // ---
  // Code Actions
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll.eslint": "explicit",
    "source.addMissingImports": "explicit"
  },
  // ---
  // TypeScript & JavaScript Settings
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.suggest.autoImports": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.enablePromptUseWorkspaceTsdk": true,
  // ---
  // React/JSX Settings
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  // ---
  // ESLint Configuration
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.run": "onSave",
  // ---
  // Prettier Configuration
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  // ---
  // File Associations
  "files.associations": {
    "*.js": "javascript",
    "*.jsx": "javascriptreact",
    "*.ts": "typescript",
    "*.tsx": "typescriptreact",
    ".env*": "dotenv",
    "*.yaml": "yaml",
    "*.yml": "yaml"
  },
  // ---
  // File Exclusions
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true,
    "**/*.tsbuildinfo": true
  },
  // ---
  // Search Exclusions
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.next": true,
    "**/coverage": true,
    "**/.git": true,
    "**/*.lock": true
  },
  // ---
  // Formatting Settings
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  // ---
  // Telemetry
  "telemetry.telemetryLevel": "off",
  // ---
  // Auto Close Tag
  "auto-close-tag.enableAutoCloseTag": true,
  "auto-close-tag.enableAutoCloseSelfClosingTag": true,
  "auto-close-tag.activationOnLanguage": [
    "html",
    "xml",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // ---
  // Auto Rename Tag
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // ---
  // npm Scripts
  "npm.packageManager": "bun",
  "npm.autoDetect": "on",
  "npm.enableRunFromFolder": true,
  // ---
  // Security
  "security.workspace.trust.enabled": true,
  "security.workspace.trust.untrustedFiles": "prompt",
}

Use Knip for finding unused code in the project

Lumin — Wed, 05 Feb 2025 10:18:12 +0000

When I start working with legacy project. The first thing I need to do is to identify part of code that are using and unused.

For the using one, I've to learn more about it later on. And for the later one, the unused code, I'll mark it as deprecate AKA I'm going to get rid of you SOON!

The tool that is suitable for this task is Knip, it can list all unused code in the project (you can find out what the unused code is in here).

To use it, just:

npx knip

And then it will generate a list of issues, including file location and line.

All I have to do is just put these files into the technical story, wait for the team to analyze, and delete it!

ทำ Database Change Management ด้วย Liquibase

Lumin — Fri, 26 Jul 2024 11:09:53 +0000

Definitions

Changelog ไฟล์ที่รวบรวมการเปลี่ยนแปลงไว้ สำหรับบทความนี้เราใช้วิธีการเก็บไว้ในไฟล์ liquibase.changelog.xml และใส่ config ให้ใช้ทุกไฟล์ใน migrations ดังนั้นในบทความนี้ changelog หมายถึงไฟล์ sql ทุกไฟล์ในโฟรเดอร์ migrations
Changeset รายละเอียดของการเปลี่ยนแปลงที่เราสามารถเอา database migration script หลายๆตัวมารวมกันได้ภายใน changeset เดียว
Migrate การรัน migration script เพื่ออัพเดทโครงสร้าง database
Rollback การรัน rollback เพื่อ undo การ migrate

Project Structure

project-root/
- migrations/
    - YYYYMMDD-sprint-01.sql
    - YYYYMMDD-sprint-02.sql
    - ...
- liquibase.properties
- liquibase.changelog.xml

อธิบาย

liquibase.changelog.xml -- ไฟล์ changelog หลัก ที่จะ config ให้ไปใช้ไฟล์ใน migrations ในการรัน database migration
liquibase.properties -- ไฟล์ที่เก็บ variable ของ Liquibase
migrations/ -- โฟลเดอร์ที่จะเก็บ migration script ทั้งหมด
migrations/YYYYMMDD-sprint-01.sql -- ไฟล์ Liquibase changelog ในรูปแบบ SQL ซึ่งภายในไฟล์จะมี database migration script ที่สามารถ grouping เป็น change set ได้

คำแนะนำ
โดยแต่ละไฟล์ควรจะนำหน้าด้วย YYYYMMDD เพื่อเรียงลำดับของการ migration และควรใส่เลข sprint เพื่อที่จะสามารถ track กลับมาได้ว่าเป็น changelog ของ sprint ไหน

Migration Script

-- liquibase formatted sql

-- changeset lumin:1721661329831-1 labels:pbi-1234,sprint-10
-- comment: create products table
CREATE TABLE "products" ("id" INTEGER NOT NULL, "name" VARCHAR(50) NOT NULL, "description" TEXT NOT NULL, "price" numeric(5, 2) NOT NULL, "stock" INTEGER NOT NULL, "updated_at" TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT "products_pkey" PRIMARY KEY ("id"));
-- rollback DROP TABLE "products";

-- changeset lumin:1721661329831-2 labels:pbi-1235,sprint-10
-- comment: create customers table
CREATE TABLE "customers" ("id" INTEGER NOT NULL, "name" VARCHAR(100) NOT NULL, "registered_at" TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT "customers_pkey" PRIMARY KEY ("id"));
-- rollback DROP TABLE "customers";

อธิบาย

บรรทัดแรก -- liquibase formatted sql เพื่อบอกว่านี่คือไฟล์ Liquibase changelog
-- changeset author:unique-number labels:label-1,label-2 เป็นการกำหนดว่าหลังจากบรรทัดนี้เป็นต้นไปจะเป็น migration script ภายใต้ changeset นี้ ซึ่งจะใช้เลข unique-number และใช้ label label-1 และ label-2 (สามารถเอาไปใช้ filter ได้)
-- comment: ... เป็น comment เพื่อใส่รายละเอียดอธิบาย ไม่มีผลในการรัน
-- rollback ... กำหนด roll back script

Step

0) Prepare Example Project

ด้วยการจำลอง database ด้วย Docker

# Use postgres/example user/password credentials
services:

  db:
    image: postgres:alpine
    restart: always
    shm_size: 128mb
    ports:
      - 5432:5432
    environment:
      POSTGRES_PASSWORD: example

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080

และสร้าง container ด้วย

docker compose up -d

และเข้าไปสร้าง database จำลอง เพื่อจำลองว่าในโปรเจคของเรามี database ที่ยังไม่ได้ migrate อยู่ โดยใช้ script นี้

CREATE DATABASE "app-local";
CREATE TABLE products
(
    id INTEGER PRIMARY KEY NOT NULL,
    name VARCHAR(50) NOT NULL,
    description TEXT NOT NULL,
    price DECIMAL(5,2) NOT NULL,
    stock INTEGER NOT NULL,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
);
CREATE TABLE customers
(
    id INTEGER PRIMARY KEY NOT NULL,
    name VARCHAR(100) NOT NULL,
    registered_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
);

1) Init Liquibase Project

สร้าง liquibase.changelog.yml

databaseChangeLog:
  - includeAll:
      path: migrations/

เรากำหนดให้ liquibase ใช้ไฟล์ทั้งหมดภายในโฟลเดอร์ migrations/
change log format สามารถดูได้ที่
- Example changelogs YAML format
- Changelogs attribute includeAll

สร้าง liquibase.properties

# Liquibase setting
liquibase.hub.mode: off
liquibase.showBanner: false

changelogFile: liquibase.changelog.yml

# LOCAL ENVIRONMENT
url: jdbc:postgresql://localhost:5432/app-local
username: postgres
password: example
liquibase.command.defaultSchemaName: public

variable ที่จำเป็นในการรัน Liquibase จะมี 4 ตัวดังนี้
- changelogFile บอกว่าให้ไปหยิบ changelog จากไหน
- url คือ database connection string แบบ jdbc
- username คือ database username
- password คือ database password
variable อื่นๆ ที่ไม่มีก็รันได้ แต่ถ้าใส่ก็จะดีกว่า
- liquibase.hub.mode: off เพื่อไม่ส่งข้อมูลการใช้งานของเราให้ Liquibase
- liquibase.showBanner: false เพื่อไม่แสดง Liquibase banner ตอนรัน CLI
- liquibase.command.defaultSchemaName: public เพื่อบอกว่า default database schema คือ public ซึ่งเราอาจจะได้ใช้ในกรณีที่เรามีหลาย schema
ถ้าไม่มีไฟล์ liquibase.properties เราสามารถใส่ข้อมูลเหล่านี้ได้ 2 แบบ
- ใส่เป็น option เช่น liquibase status --changelog-file ? --url ? --username ? --password ? (ไม่แนะนำให้ทำใน local environment จะลำบากทำไม)
- ใส่เป็น environment variables โดยใช้ format LIQUIBASE_<option-name> เช่น
  - LIQUIBASE_URL
  - LIQUIBASE_USERNAME
  - LIQUIBASE_PASSWORD
- ซึ่งท่านี้ เราจะใช้ในกรณีที่เอาไปรันใน CI เพราะเราจะไม่ใส่ liquibase.properties ตอน build package

ทดสอบว่าสามารถใช้งานได้ไหม

$ liquibase status
> ERROR: Exception Details
> ERROR: Exception Primary Class:  SetupException
> ERROR: Exception Primary Reason:  Could not find directory, directory was empty, or no changelogs matched the provided search criteria for includeAll 'migrations/'
> ERROR: Exception Primary Source:  4.28.0

ซึ่งเป็น error ที่บอกว่าไม่มีไฟล์ใน migrations/ เลย แต่สามารถ connect database ได้เรียบร้อย

2) Capture Database Structure

เราสามารถดึงโครงสร้างของ database ณ ปัจจุบัน โดยใช้คำสั่ง generate-changelog

$ liquibase generate-changelog \
    --changelog-file ./migrations/00000000-init.sql
Generated changelog written to ./migrations/00000000-init.sql

เกิดไฟล์ migrations/00000000-init.sql ซึ่งมีข้อมูล

-- liquibase formatted sql

-- changeset lumin:1721661329831-1
CREATE TABLE "products" ("id" INTEGER NOT NULL, "name" VARCHAR(50) NOT NULL, "description" TEXT NOT NULL, "price" numeric(5, 2) NOT NULL, "stock" INTEGER NOT NULL, "updated_at" TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT "products_pkey" PRIMARY KEY ("id"));

-- changeset lumin:1721661329831-2
CREATE TABLE "customers" ("id" INTEGER NOT NULL, "name" VARCHAR(100) NOT NULL, "registered_at" TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT "customers_pkey" PRIMARY KEY ("id"));

เราควรเพิ่ม label ลงไปเพื่อให้เราสามารถทำ filter label ได้ โดยเพิ่ม labels:init

-- liquibase formatted sql

-- changeset lumin:1721661329831-1 labels:init
CREATE TABLE "products" ("id" INTEGER NOT NULL, "name" VARCHAR(50) NOT NULL, "description" TEXT NOT NULL, "price" numeric(5, 2) NOT NULL, "stock" INTEGER NOT NULL, "updated_at" TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT "products_pkey" PRIMARY KEY ("id"));

-- changeset lumin:1721661329831-2 labels:init
CREATE TABLE "customers" ("id" INTEGER NOT NULL, "name" VARCHAR(100) NOT NULL, "registered_at" TIMESTAMP WITHOUT TIME ZONE DEFAULT NOW() NOT NULL, CONSTRAINT "customers_pkey" PRIMARY KEY ("id"));

ทดสอบ ด้วยคำสั่ง status

$ liquibase status
changesets have not been applied to postgres@jdbc:postgresql://localhost:5432/app-local
     migrations/000000-init-structure.sql::1721906361520-1::teerasak.vichadee
     migrations/000000-init-structure.sql::1721906361520-2::teerasak.vichadee

ตอนนี้เรามี changeset 2 ตัวที่ยังไม่ได้รัน migrate (แน่ล่ะ ก็เราเพิ่ง generate มันใหม่จาก database structure เดิมที่มีอยู่แล้ว)

แต่อันที่จริง เราไม่จำเป็นต้อง migrate ก็เพราะว่ามันมี table ครบอยู่แล้ว ดังนั้นสิ่งที่เราควรทำคือ sync ข้อมูล changeset เหล่านี้ขึ้นไปเก็บและให้สถานะมันเป็น EXECUTED หรือ รัน migrate ไปแล้ว

# check sync SQL
$ liquibase changelog-sync-sql --label-filter init --output-file dump.sql
Output saved to dump.sql

# updated undeployed changelog with label=init to EXECUTED
$ liquibase changelog-sync --label-filter init

เมื่อเข้าไปดูใน database จะพบว่าในตาราง databasechangelog (เป็นตารางที่ liquibase สร้างมาเก็บ changelog record) มี 2 record ที่มี

filename = migrations/000000-init-structure.sql
exectype = EXECUTED
labels = init

ทดสอบอีกครั้ง

# ตรวจสอบว่ามี changelog ที่ยังไม่ได้ execute ไหม (ไม่ควรมี เพราะเพิ่งเปลี่ยนสถานะเป็น EXECUTED ไป)
$ liquibase status
postgres@jdbc:postgresql://localhost:5432/app-local is up to date

# ตรวจสอบว่า changelog ตัวไหนที่ execute ไปแล้ว
$ liquibase history
Liquibase History for jdbc:postgresql://localhost:5432/app-local

- Database updated at 7/25/24, 6:40 PM. Applied 2 changeset(s) in 0.009s, DeploymentId: 1907624549
  migrations/000000-init-structure.sql::1721906361520-1::teerasak.vichadee
  migrations/000000-init-structure.sql::1721906361520-2::teerasak.vichadee

ณ ตอนนี้ เรามี migration script ที่สามารถเอาไป execute ใน environment ใหม่ได้แล้ว

3) Test Migrate in New Environment

เราจะจำลองการเอาไปรันใน environment ใหม่โดยการ terminate docker container แล้วรัน migrate script

# terminate docker container ของโปรเจคปัจจุบัน
$ docker compose down

# start docker container อีกครั้ง (ซึ่ง database structure ทั้งหมดจะหายไปแล้ว)
$ docker compose up -d

ก่อนอื่น เราต้องสร้าง database app-local ขึ้นมาก่อน

CREATE DATABASE "app-local";

หลังจากนั้นรัน migration script ด้วยคำสั่ง

$ liquibase update
Running Changeset: migrations/000000-init-structure.sql::1721906361520-1::teerasak.vichadee
Running Changeset: migrations/000000-init-structure.sql::1721906361520-2::teerasak.vichadee

UPDATE SUMMARY
Run:                          2
Previously run:               0
Filtered out:                 0
-------------------------------
Total change sets:            2

Liquibase: Update has been successful. Rows affected: 2

เมื่อไปเช็คใน database จะพบว่ามีตาราง products และ customers เกิดขึ้น ตามรายละเอียดของไฟล์ migrations/000000-init-structure.sql

4) Create New Migration Script

สมมุติเราต้องเพิ่ม feature ใหม่ให้ระบบ ซึ่งจะต้องมีการเปลี่ยนแปลงโครงสร้างตารางด้วย

เราควรสร้างไฟล์ changelog ใหม่ในโฟลเดอร์ migrations/ โดยกำหนดชื่อไฟล์ตาม pattern คือ migrations/20240725-sprint-11.sql

-- liquibase formatted sql

-- changeset teerasak.vichadee:pbi-111 labels:pbi-111,sprint-11
-- comment: pbi-111 implement orders aggregate
-- สร้างตาราง orders
CREATE TABLE "orders" (
  "id" serial NOT NULL, 
  PRIMARY KEY ("id"),
  "customer_id" integer NOT NULL,
  "updated_at" timestamp NOT NULL,
  "created_at" timestamp NOT NULL
);
-- สร้าง index สำหรับ orders.customer_id
CREATE INDEX "orders_customer_id" ON "orders" ("customer_id");
-- สร้างตาราง order_items
CREATE TABLE "order_items" (
  "id" serial NOT NULL,
  PRIMARY KEY ("id"),
  "order_id" integer NOT NULL,
  "product_id" integer NOT NULL,
  "quantity" integer NOT NULL DEFAULT '0',
  "updated_at" timestamp NOT NULL,
  "created_at" timestamp NOT NULL
);
-- สร้าง index สำหรับ order_items.order_id และ order_items.product_id
CREATE INDEX "order_items_order_id" ON "order_items" ("order_id");
CREATE INDEX "order_items_product_id" ON "order_items" ("product_id");
-- rollback DROP TABLE orders;
-- rollback DROP TABLE order_items;

รายละเอียดภายในไฟล์ changelog ที่ควรสนใจและถกเถียงในทีมเวลาสร้าง

เราควรสร้าง changeset ให้มีหลายๆ SQL command โดยขึ้นอยู่กับว่า มันเป็น change ที่เกี่ยวข้องกันไหม
- ซึ่งมันจะแลกมากับความยืดหยุ่นในการ migrate และ rollback เพราะถ้ามี change เยอะเกินไป หรือไม่เกี่ยวข้องการ การที่จะทำ rollback อาจจะส่งผลกระทบให้ต้อง rollback ทั้งหมด
- ด้วยมาตรฐานที่เราวางไว้ว่า เราจะสร้าง PBI ที่มี value และสามารถ deploy ได้ด้วยตัวมันเอง และไม่ dependency กับ PBI อื่นๆ ดังนั้นโดยปกติ 1 PBI ควรมีแค่ 1 changeset
SQL command ในแต่ละ changset ควรใช้ command ที่ได้ performance เพื่อเสียเวลาในการรัน migrate น้อยที่สุด เช่น ถ้าจะ insert เพื่อทำ seeding ควรใช้ batch insert ไม่ควร insert 1 record per row
ทุก changeset ควรมี rollback
- rollback script สามารถใส่หลายๆตัวภายใน changeset ดังนั้นเราสามารถใส่ควบคู่ไปกับ SQL command แต่ละตัวได้เลย

จากนั้นทดสอบ migration script ด้วย

# เช็คสถานะของ changeset ที่เราสร้าง
$ liquibase status
1 changeset has not been applied to postgres@jdbc:postgresql://localhost:5432/app-local
     migrations/20240725-sprint-11.sql::pbi-111::teerasak.vichadee

# สร้าง migration script เพื่อเอามารีวิว
$ liquibase update-sql --output-file migration-sprint-11.review.sql
Output saved to migration-sprint-11.review.sql

# สร้าง rollback script เพื่อเอามารีวิว
$ liquibase future-rollback-sql --output-file migration-sprint-11-rollback.review.sql
Output saved to migration-sprint-11-rollback.review.sql

ในการทำงานเราควรเอาไฟล์ migration-sprint-11.review.sql มีรีวิวว่ามีรายละเอียดตรงกับที่เราต้องการหรือไม่ (ข้อเสียของ Liquibase คือ ไม่แสดง SQL comment ที่เราใส่ไปใน changelog)

...

-- *********************************************************************
-- Update Database Script
-- *********************************************************************
-- Change Log: liquibase.changelog.yml
-- Ran at: 7/26/24, 9:32 AM
-- Against: postgres@jdbc:postgresql://localhost:5432/app-local
-- Liquibase version: 4.28.0
-- *********************************************************************

...

CREATE TABLE "orders" (
  "id" serial NOT NULL, 
  PRIMARY KEY ("id"),
  "customer_id" integer NOT NULL,
  "updated_at" timestamp NOT NULL,
  "created_at" timestamp NOT NULL
);

CREATE INDEX "orders_customer_id" ON "orders" ("customer_id");

CREATE TABLE "order_items" (
  "id" serial NOT NULL,
  PRIMARY KEY ("id"),
  "order_id" integer NOT NULL,
  "product_id" integer NOT NULL,
  "quantity" integer NOT NULL DEFAULT '0',
  "updated_at" timestamp NOT NULL,
  "created_at" timestamp NOT NULL
);

CREATE INDEX "order_items_order_id" ON "order_items" ("order_id");

CREATE INDEX "order_items_product_id" ON "order_items" ("product_id");

...

และก็ควรรีวิว rollback script จากไฟล์ migration-sprint-11-rollback.review.sql

...

-- *********************************************************************
-- SQL to roll back currently unexecuted changes
-- *********************************************************************
-- Change Log: liquibase.changelog.yml
-- Ran at: 7/26/24, 9:43 AM
-- Against: postgres@jdbc:postgresql://localhost:5432/app-local
-- Liquibase version: 4.28.0
-- *********************************************************************

...

-- Rolling Back ChangeSet: migrations/20240725-sprint-11.sql::pbi-111::teerasak.vichadee
DROP TABLE orders;

DROP TABLE order_items;

...

เมื่อรีวิวตรวจสอบความถูกต้องดีแล้ว จึงรัน migrate

# สั่งรัน migration script 
$ liquibase update
Running Changeset: migrations/20240725-sprint-11.sql::pbi-111::teerasak.vichadee

UPDATE SUMMARY
Run:                          1
Previously run:               2
Filtered out:                 0
-------------------------------
Total change sets:            3

Liquibase: Update has been successful. Rows affected: 1

# ตรวจสอบ history การรัน migration
$ liquibase history --format text
Liquibase History for jdbc:postgresql://localhost:5432/app-local

- Database updated at 7/25/24, 6:53 PM. Applied 2 changeset(s) in 0.013s, DeploymentId: 1908401506
  migrations/000000-init-structure.sql::1721906361520-1::teerasak.vichadee
  migrations/000000-init-structure.sql::1721906361520-2::teerasak.vichadee

- Database updated at 7/26/24, 9:20 AM. Applied 1 changeset(s), DeploymentId: 1960449791
  migrations/20240725-sprint-11.sql::pbi-111::teerasak.vichadee

ซึ่งใน history จะเห็นว่า changelog ของเราเป็น update ล่าสุดที่เกิดขึ้น

5) Rollback!

เมื่อเกิดปัญหา เราสามารถสั่ง rollback ดังนี้

$ liquibase rollback-sql --label-filter sprint-11 --output-file migration-sprint-11-rollback.preview.sql
Output saved to migration-sprint-11-rollback.preview.sql

$ liquibase rollback --label-filter sprint-11
Rolling Back Changeset: migrations/20240725-sprint-11.sql::pbi-111::teerasak.vichadee

$ liquibase history --format text
Liquibase History for jdbc:postgresql://localhost:5432/app-local

- Database updated at 7/25/24, 6:53 PM. Applied 2 changeset(s) in 0.013s, DeploymentId: 1908401506
  migrations/000000-init-structure.sql::1721906361520-1::teerasak.vichadee
  migrations/000000-init-structure.sql::1721906361520-2::teerasak.vichadee

การ rollback เราสามารถทำได้ 2 แบบ

ใช้ rollback-count 1 เพื่อบอกว่าให้ rollback migration ล่าสุด แต่เราจะแน่ใจได้อย่างว่า นั่นคือ rollback ที่ถูกต้อง และถ้าไม่ถูกต้องจะต้องทำอย่างไร
ใช้ rollback --label-filter sprint-11 เพื่อทำ rollback สำหรับ migrate ที่มี label = sprint-11 จะมีความ specific มากขึ้น โดยกำหนดว่าจะต้อง rollback migration ที่มี label ตามที่กำหนด

ดังนั้น ถ้าหากว่าเราใส่ label กำกับทุกครั้ง เราควรใช้ท่า rollback --label-filter

Summary

สร้าง pattern ของไฟล์ changelog ให้สามารถ filter ได้ เช่น 20240725-sprint-11.sql
สร้าง pattern ของ changeset
- ใช้ unqiue-numer เป็นเลข pbi
- ใส่ label เพื่อให้สามารถ filter เพื่อ migrate หรือ rollback ได้

migration workflow

สร้าง changelog ไปเก็บใน migrations/ และต้องใส่ rollback ในทุกๆ changeset ที่มีการเปลี่ยนแปลง และอย่าลืมกำหนด label ตาม pattern
run migrate

# ตรวจสอบก่อนว่ามี pending changelog อยู่ไหม และใช่ของเราหรือปล่าว
liquibase status

# ตรวจสอบ migration script (ไม่ควรจะมีของเรา)
liquibase update-sql --output-file migration-sprint-11.review.sql

# ตรวจสอบ rollback script (ควรจะมี comment บอกว่ามาจากไฟล์ changelog ของเรา)
liquibase future-rollback-sql --label-filter "sprint-11" --output-file migration-sprint-11.review.sql

# สั่งรัน migration script 
liquibase update

# ตรวจสอบ pending อีกครั้งว่ารันไปแล้วหรือยัง (มันควรจะหายไป)
liquibase status

# ตรวจสอบ migration script ที่รันไปแล้ว (ควรมีของเราเป็นอันสุดท้าย)
liquibase history

run rollback

# ตรวจสอบ rollback script (ควรจะมี comment บอกว่ามาจากไฟล์ changelog ของเรา)
liquibase rollback-sql --label-filter "sprint-11" --output-file rollback-sprint-11.review.sql

# สั่ง rollback ด้วย label ของ changeset
liquibase rollback --label-filter "sprint-11"

# ตรวจสอบ pending (ควรจะแสดง changeset ที่ถูก rollback)
liquibase status

# ตรวจสอบ migration script ที่รันไปแล้ว (ไม่ควรมี changeset ที่ถูก rollback)
liquibase history

Improvement

Makefile

เพื่อซ่อนความซับซ้อนและเพิ่มความเข้าใจในการรัน เราควรสร้าง Makefile ดังนี้

help: ## Shows the available commands.
    @printf "Available Commands:\n"
    @grep -E '^[a-zA-Z0-9_/\-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
    @printf "\nExample:\n"
    @printf "  - make migration/status\n"
    @printf "  - make migration/status OPTIONS=\"--label-filter init\"\n"
    @printf "\n"

migration/pending: ## ตรวจสอบ migration script ที่ยังไม่ได้รัน
    liquibase status $(OPTIONS)

migration/check-migrate: ## เตรียม SQL สำหรับรัน migration
    liquibase update-sql --output-file migration.review.sql $(OPTIONS)

migration/check-future-rollback: ## เตรียม SQL สำหรับรัน rollback
    liquibase future-rollback-sql --output-file rollback.review.sql $(OPTIONS)

migration/check-rollback: ## เตรียม SQL สำหรับรัน rollback
    ifndef labels
        $(error ระบุ labels โดยใช้คำสั่ง 'make migration/prepare-rollback labels=<label ที่เราต้องการ>')
    endif
    liquibase rollback-sql --output-file prepare-rollback.review.sql --label-filter=$(labels) $(OPTIONS)

migration/migrate: ## รัน migration script
    liquibase update $(OPTIONS)

migration/rollback: ## รัน rollback script
    ifndef labels
        $(error ระบุ labels โดยใช้คำสั่ง 'make migration/rollback labels=<label ที่เราต้องการ>')
    endif
    liquibase rollback --label-filter=$(labels) $(OPTIONS)

migration/history: ## ตรวจสอบ migration script ที่รันไปแล้ว
    liquibase history --format text $(OPTIONS)

make migration/pending -- ตรวจสอบ migration script ที่ยังไม่ได้รัน
make migration/check-migrate -- เตรียม SQL สำหรับรัน migration เพื่อเอามารีวิว
make migration/check-future-rollback -- เตรียม SQL สำหรับรัน rollback ทุกอย่างที่อยู่ใน pending เพื่อเอามารีวิว
make migration/migrate -- รัน migration script
make migration/check-rollback labels=<label> -- เตรียม SQL สำหรับรัน rollback เฉพาะ changeset ที่มี labels=<label> เพื่อเอามารีวิว
make migration/rollback labels=<label> -- รัน rollback script เฉพาะ changeset ที่มี labels=<label>
make migration/history -- ตรวจสอบ migration script ที่รันไปแล้ว

ทำ IoC ใน NestJS อย่างเหมาะสม

Lumin — Tue, 13 Feb 2024 03:40:29 +0000

ใน NestJS document เค้าบอกเราว่า จะทำ IoC ใน NestJS ทำแบบนี้

// user/user.module.ts
@Module({ 
  providers: [UserService],
  controllers: [UserController],
})
export class UserModule {}

เพียงเท่านี้ UserController ก็จะสามารถใช้งาน UserService ได้เพียงแค่เรา inject UserService เข้าไปใน constructor

@Controller() 
export class UserController {
  constructor(
    private readonly userService: UserService
  ) {}
}

นั่นทำให้หลายคนคิดเอาเองว่า ถ้าในกรณีที่ต้องการใช้ service ที่อยู่ใน module อื่น เราก็แค่เอามาใส่ใน Module.providers น่ะสิ

หน้าตาของ code ใน module ก็เลยกลายเป็นแบบนี้

// user/user.module.ts
@Module({ 
  providers: [UserService, TodoService],
  controllers: [UserController],
})
export class UserModule {}

ถ้าเจอ code แบบนี้ ใน code review เราควรจะถามว่า

แล้ว module จะมีความสำคัญอะไร ทำไมถึงยังต้องมี module อยู่ ในเมื่อสามารถเอา service จากไหนก็ได้มาใส่

การเอา service จาก module อื่นมาใช้งานด้วยการใส่ลงไปใน Module.providers เป็นเรื่องที่ทำได้ เพราะ NestJS ไม่ได้ enforce rules ไว้ แต่มันไม่ได้เหมาะสมเท่าไหร่ เนื่องจากมันทำให้ความสัมพันธ์ระหว่าง module หายไป จนแทบไม่แตกต่างอะไรจากการที่เราเขียนโดยไม่มี module เพราะ module ไปทำ relation ตรงๆกับ service เลย

ท่าที่ถูกต้องคือ

ถ้าจะใช้ service จาก module อื่น ต้องใช้ Module.imports import module เข้ามา (ซึ่ง module นั้นจะต้อง export service ออกมาด้วย)
สำหรับ Module.providers ใช้สำหรับ internal service เท่านั้น

หน้าตาของ code ที่เหมาะสมก็จะเป็นแบบนี้

// todo/todo.module.ts
@Module({ 
  providers: [TodoService],
  exports: [TodoService],
})
export class TodoModule {}


// user/user.module.ts
@Module({ 
  imports: [TodoModule],
  providers: [UserService],
  controllers: [UserController],
})
export class UserModule {}

How to make client-side logger with Amplify and CloudWatch

Lumin — Wed, 29 Mar 2023 00:00:00 +0000

The client-side log is different from the server-side log because it didn't write into the file system and it's not easy to control it. I'm using AWS and I don't want to use SaaS service to feed the log into CloudWatch (why do I have to send the log to other services and send it back into CloudWatch!)

Goal

Run Next.js SSG (Static Site Generator) on Amplify Hosting (or S3 CloudFront)
Enable client-side log without sending API to lambda

TLDR

Amplify has a Logger class and CloudWatch provider, so we can feed log from the browser to CloudWatch
Need extra effort to use AWS Cognito to allow an unauthorized users to send log events to CloudWatch

Note

This tutorial runs on

Node.js version v18.15.0
Next.js version 13.2.4
Amplify version 11.0.2

Prerequisite

Steps

1. Setup Next.js project

Just create a new Next.js project

npx create-next-app@latest

Enter Next.js wizard

What is your project named? -> "PROJECT-NAME"
Would you like to use TypeScript with this project? -> "Yes"
Would you like to use ESLint with this project? -> "Yes"
Would you like to use src/ directory with this project? -> "Yes"
Would you like to use experimental app/ directory with this project? -> "Yes"
What import alias would you like configured? -> "@/*"

Then verify (it suppose to run Next.js app)

cd PROJECT-NAME/
npm run dev

2. Setup Amplify

Initiate Amplify project

amplify init

Enter wizard input

Enter a name for the project -> "PROJECT-NAME"
Initialize the project with the above configuration? -> "Yes"
Select the authentication method you want to use: -> "AWS profile"
Please choose the profile you want to use -> "default"

When we submit the input, Amplify will generate a project directory on amplify/ and a resources file on src/aws-exports.js, the last one will re-generate when the project resource has changed.

Inside amplify/, there are some files we can modify, one of which is /amplify/.config/project-config.json which is the configuration about the environment and build script that we can update later.

Project information
| Name: PROJECT-NAME
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

Then install aws-amplify package

npm i aws-amplify

We can verify by cli (suppose to show empty resource, since we didn't do anything yet)

amplify status 

    Current Environment: dev

┌──────────┬───────────────┬───────────┬─────────────────┐
│ Category │ Resource name │ Operation │ Provider plugin │
└──────────┴───────────────┴───────────┴─────────────────┘

We can go check on AWS CloudTrail (suppose to show that we have created resources on Amplify, CloudFormation, and S3)

3. Deploy SSG

We are going to deploy Next.js in SSG (Static Site Generator) on Amplify Hosting (alternatively, we can deploy with S3 + CloudFront)

Add hosting resource

# this is how we add resource with Amplify cli
amplify add hosting

Enter wizard input

Select the plugin module to execute -> "Hosting with Amplify Console" (Managed hosting with custom domains, Continuous deployment)
Choose a type -> "Manual deployment"

Verify (suppose to show that we have created a new resource, which is Amplify Hosting)

amplify status

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ Create    │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘


No amplify console domain detected

Run deploy

Before deploying, we have to update the build script to support SSG, tell Next.js to build for the static host, by editing package.json

{
  "script": {
    "build": "next build && next export"
  }
}

Verify by build and run on the static host tool (we might need to install serve cli by npm i -g serve)

npm run build 

serve out # we should have the same local as the previous step

We have to update Amplify config to use dist folder as out since the default exported SSG folder will be out by editing amplify/.config/project-config.json

{
  "javascript": {
    "config": {
      "DistributeDir": "out"
    }
  }
}

Note: I left some content in file to reduce confusion.

Then deploy

amplify publish

Verify again with amplify status (suppose to update Amplify Hosting status and show hosting url)

amplify status

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘


Amplify hosting urls:
┌──────────────┬───────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                    │
├──────────────┼───────────────────────────────────────────┤
│ dev          │ https://dev.--------------.amplifyapp.com │
└──────────────┴───────────────────────────────────────────┘

Note:

When changing a build script to support SSG, we might encounter the error “Error: Image Optimization using Next.js' default loader is not compatible with next export.” fix it by editing next.config.js by adding

  const nextConfig = {
    images: {
      unoptimized: true,
    },
  }

Next.js are going to deprecate next export, so this solution might not work in the future
I prefer Amplify Hosting to S3+CloudFront because I don’t want to maintain and it has advanced features like preview or deploy on new branch.

4. Enable client-side log

Adding some log for test

Added console.log on src/pages/index.tsx when page render (or rerender)

export default function Home() {
  useEffort(() => {
    console.log('log created on', Date.now())
  }, [])
}

Explain: log will show when this page render or rerender (in development it will show 2 lines of log)

Add auth resource

amplify add auth

Enter wizard input

Do you want to use the default authentication and security configuration? -> "Default configuration"
How do you want users to be able to sign in? -> "Email"
Do you want to configure advanced settings? -> "No"

Verify

amplify status

    Current Environment: dev

┌──────────┬─────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name       │ Operation │ Provider plugin   │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Auth     │ ___________________ │ Create    │ awscloudformation │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting      │ No Change │ awscloudformation │
└──────────┴─────────────────────┴───────────┴───────────────────┘


Amplify hosting urls:
┌──────────────┬───────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                    │
├──────────────┼───────────────────────────────────────────┤
│ dev          │ https://dev.______________.amplifyapp.com │
└──────────────┴───────────────────────────────────────────┘

We’ll see newly created resource “Auth”

Next, we’ll have to enter the AWS Console to modify and add some resources to enable the client-side log

Update identities setting

Enable unauthenticated identities on AWS Cognito / Federated Identities

goto AWS Console / Cognito / Federated Identities (on the left menu)
choose identities pool
click edit identity pool (on the right side)
checked on “Enable access to unauthenticated identities” under “Unauthenticated identities”
don't forget to "Save"

Update identities role permission

Update role permission to allow user to writing log

go to AWS Console / IAM / Roles (on the left menu)
search role with project name. It should show 3 roles
- amplify-PROJECT-NAME-ENV-ID-authRole — for authenticated identities
- amplify-PROJECT-NAME-ENV-ID-authRole-idp — for lambda of authentication service
- amplify-PROJECT-NAME-ENV-ID-unauthRole — for unauthenticated identities
attach these policies into authRole and unauthRole to allowed write log on every resources of current account

  {
    "Action": [
      "logs:DescribeLogGroup",
      "logs:DescribeLogStream",
      "logs:CreateLogGroup",
      "logs:CreateLogStream",
      "logs:PutLogEvents"
    ],
    "Resource": "arn:aws:logs:*:ACCOUNT-ID:*",
    "Effect": "Allow"
  }

Create log group and log stream

Create log group and log stream in CloudWatch, we will use log group name and log stream name as config in our code.

Next, it's a time to write code 😝

5. Update code to use Amplify Logger

Create utilities file

create src/aws.ts

import { Amplify, AWSCloudWatchProvider, Logger } from 'aws-amplify'
import awsExports from './aws-exports'

// initiate Amplify
Amplify.configure(awsExports)

// initiate logger
const logger = new Logger('PROJECT-NAME', 'DEBUG')
Amplify.register(logger)
logger.addPluggable(new AWSCloudWatchProvider({
  logGroupName: 'LOG-GROUP-NAME',
  logStreamName: 'LOG-STREAM-NAME',
  region: awsExports.aws_project_region,
}))

export {
  logger,
}

Use logger

Switch from console.log to logger.info on src/pages/index.tsx

import { logger } from '@/aws'

export default function Home() {
  useEffect(() => {
    logger.info('log created on', Date.now())
  }, [])
}

Test it

npm run dev

Then check log on CloudWatch and wait for the magic

6. Deploy

amplify publish

Summary

We have deployed static React into Amplify Hosting
We have used Amplify Logger and CloudWatch provider to feed log to CloudWatch
We have allowed the unauthorized users to write log

Improvement

Instead of manually modifying resources on AWS Console, use AWS CDK
Use logger library instead of Amplify Logger i.g., loglevel (supported browser and Node.js)
Add some images into blog post 😝

Solved Node version on Mac M1

Lumin — Wed, 11 Jan 2023 04:30:23 +0000

Node.js belowed v15 has a problem on Mac M1. We can't run legacy Node.js project with simply npm i.

What we have to do is:

1) Install Rosetta in our terminal

softwareupdate --install-rosetta

2) Make our terminal app run on Rosetta mode

by goto Application / iTerm (let's say we're using iTerm)
left click to show popup menu and click "Get info"
then tick on "Open with Rosetta"

3) Restart the terminal app

4) Check that we're using the right CPU

arch # it should return something like "i386" not "arm64"

After that I can run nvm install 12 and npm i without any error

Note:
It's wotk on my end but I''m not sure about you guys or event my new Mac :D

How to read file and return as array of string or number as generic type

Lumin — Tue, 06 Dec 2022 14:49:05 +0000

Actually we can write 2 functions: readFileAsArrayOfNumber and readFileAsArrayOfString, but I'm too lazy to do that.

Here the solution to read a file and convert it into array of generic type (string or number).

function readFile<T>(filePath: string): T[] {
  const contents = fs.readFileSync(filePath, 'utf-8')
  return contents.split(/\r?\n/).map(line => {
    const parsedNumber = parseInt(line, 10)
    if (!isNaN(parsedNumber)) {
      return parsedNumber as T
    }

    return line as T
  })
}

Usage readFile<string>(filePath) or readFile<number>(filePath)

How to get back your OSX storage from node_modules

Lumin — Tue, 06 Dec 2022 04:17:13 +0000

just run

find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}';

Note:

print all node_modules folder with it's size

find . -name 'node_modules' -type d -prune -print | xargs du -chs

Fix Firebase error "auth/emulator-config-failed"

Lumin — Fri, 18 Nov 2022 09:47:29 +0000

Official Document Said That

create app instance
create auth instance
then connect with emulator

const app = initializeApp(config.firebase)
const auth = getAuth(app)
connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
// note: 9099 is the default port Firebase used for their authen emulator

But I got this when logged-in

Uncaught FirebaseError: Firebase: Error (auth/emulator-config-failed).

Here's the Solution

From developer best friend Stackoverflow

async function setupEmulators(auth) {
  const authUrl = 'http://localhost:9099'
  await fetch(authUrl)
  connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true })
  // why? to make sure that emulator are loaded
}

const app = initializeApp(config.firebase)
const auth = getAuth(app)
setupEmulators(auth)

Happy

Recommended React Hooks Convention

Lumin — Tue, 15 Nov 2022 11:45:26 +0000

Related Plugin

eslint-plugin-react
- react/hook-use-state
eslint-plugin-react-hooks
- react-hooks/rules-of-hooks
- react-hooks/exhaustive-deps

ESLint React Hooks Plugin's Rules

Rules of Hooks (error)

useHookInsideLoop

React Hook "XXX" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render.
desc: disallowed hook inside loop

```jsx
function ComponentWithHookInsideLoop() {
  while (cond) {
    useHookInsideLoop();
  }
}
```

useConditionalHook

React Hook "XXX" is called conditionally. React Hook must be called in the exact same order in every component render. ~Did you accidentally call a React Hook after an early return?
desc: disallowed conditionally hook

```jsx
function ComponentWithConditionalHook() {
  if (cond) {
    useConditionalHook();
  }
}

function useHook() {
  if (a) return;
  useState();
}

function useHook() {
  try {
    f();
    useState();
  } catch {}
}
```

classHook

React Hook "XXX" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function.
desc: disallowed hook in class

```jsx
class C {
  m() {
    This.useHook();
    Super.useHook();
  }
}
```

functionError

React Hook "XXX" is called in function "SSS" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".
desc: only use hook in Component or hook function

```jsx
function normalFunctionWithHook() {
  useHookInsideNormalFunction();
}
```

topLevelError

React Hook "XXX" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.
desc: disallowed use hook at the top level

```jsx
Hook.useState();
Hook._useState();
Hook.use42();
Hook.useHook();
Hook.use_hook();
```

useHookInsideCallbackError

React Hook "XXX" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.
desc: disallowed use hook in callback or hook

```jsx
function ComponentWithHookInsideCallback() {
  useEffect(() => {
    useHookInsideCallback();
  });
}
```

useEventError

function created with React Hook "useEvent", and can only be called from the same component. They cannot be assigned to variables or passed down

```jsx
// bad 
function MyComponent({ theme }) {
  const onClick = useEvent(() => {
    showNotification(theme);
  });
  return <Child onClick={onClick}></Child>;
}

// good 
const MyComponent = ({ theme }) => {
  const onClick = useEvent(() => {
    showNotification(theme);
  });
  return <Child onClick={() => onClick()}></Child>;
};
```

Exhaustive Deps (warning)

Missing dependency

warn: React Hook useCallback has a missing dependency: 'props.foo'. Either include it or remove the dependency array.

function MyComponent(props) {
  useCallback(() => {
    console.log(props.foo?.toString());
  }, []);
}

Does nothing

warn: React Hook useMemo (and useCallback) does nothing when called with only one argument. Did you forget to pass an array of dependencies?

function MyComponent(props) {
  const value = useMemo(() => { return 2*2; }); // failed
  const fn = useCallback(() => { alert('foo'); }); // failed
}

No callback

warn: React Hook useEffect requires an effect callback. Did you forget to pass a callback to the hook?

function MyComponent() {
  useEffect()
  useLayoutEffect()
  useCallback()
  useMemo()
}

Unnecessary dependency

warn: React Hook useMemo has an unnecessary dependency: 'local2'. Either exclude it or remove the dependency array.

function MyComponent() {
  const local1 = {};
  const local2 = {};
  useMemo(() => {
    console.log(local1);
  }, [local1, local2]);
}

// useRef doesn't cause re-render 
function MyComponent({ activeTab }) {
  const ref1 = useRef();
  const ref2 = useRef();
  useEffect(() => {
    ref1.current.scrollTop = 0;
    ref2.current.scrollTop = 0;
  }, [ref1.current, ref2.current, activeTab]);
}

Out of scope dependency

warn: Outer scope values like 'local1' aren't valid dependencies because mutating them doesn't re-render the component.

function MyComponent() {
  const local1 = someFunc();
  function MyNestedComponent() {
    const local2 = {};
    useCallback(() => {
      console.log(local1);
      console.log(local2);
    }, [local1]); // failed
  }
}

function MyComponent() {
  useCallback(() => {}, [window]); // failed
}

Duplicate dependency

warn: React Hook useEffect has a duplicate dependency: 'local'. Either omit it or remove the dependency array.

function MyComponent() {
  const local = {};
  useEffect(() => {
    console.log(local);
    console.log(local);
  }, [local, local]);
}

Immutable dependency

warn: The 'foo' literal is not a valid dependency because it never changes. You can safely remove it.

function MyComponent() {
  useEffect(() => {}, ['foo']);
}

Preferred array literator

warn: React Hook useEffect was passed a dependency list that is not an array literal. This means we can't statically verify whether you've passed the correct dependencies.

// incorrect
function MyComponent() {
  const local = {}
  const dependencies = [local];
  useEffect(() => {}, dependencies);
}

// correct
function MyComponent() {
  const local = {}
  useEffect(() => {}, [local]);
}

Spread element dependency

warn: React Hook useEffect has a spread element in its dependency array. This means we can't statically verify whether you've passed the correct dependencies.

function MyComponent() {
  const local = someFunc();
  useEffect(() => {
    console.log(local);
  }, [local, ...dependencies]);
}

Complex expression dependency

warn: React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked.

function MyComponent(props) {
  useEffect(() => {
    console.log(props.items[0]);
  }, [props.items, props.items[0]]);
}

Assign value inside hook

warn: Assignments to the 'value2' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.

function MyComponent(props) {
  let value;
  let value2;
  let value3;
  let value4;
  let asyncValue;
  useEffect(() => {
    if (value4) {
      value = {};
    }
    value2 = 100;
    value = 43;
    value4 = true;
    console.log(value2);
    console.log(value3);
    setTimeout(() => {
      asyncValue = 100;
    });
  }, []);
}

Ref value on clean up

warn: The ref value 'myRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'myRef.current' to a variable inside the effect, and use that variable in the cleanup function.

function MyComponent() {
  const myRef = useRef();
  useEffect(() => {
    const handleMove = () => {};
    myRef.current.addEventListener('mousemove', handleMove);
    return () => myRef.current.removeEventListener('mousemove', handleMove);
  }, []);
  return <div ref={myRef} />;
}

Always change dependency

warn: The 'handleNext' function makes the dependencies of useEffect Hook (at line 11) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'handleNext' in its own useCallback() Hook.

function MyComponent(props) {
  let [, setState] = useState();

  function handleNext(value) {
    setState(value);
  }

  useEffect(() => {
    return Store.subscribe(handleNext);
  }, [handleNext]);
}

function Component() {
  const foo = class {};
  useMemo(() => foo, [foo]);
}

No dependency

warn: React Hook useEffect contains a call to 'setData'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [] as a second argument to the useEffect Hook.

function Hello() {
  const [data, setData] = useState(0);
  useEffect(() => {
    fetchData.then(setData);
  });
}

Async useEffect

warn: Effect callbacks are synchronous to prevent race conditions. Put the async function inside useEffect

function Thing() {
  useEffect(async () => {}, []);
}

Prefer inline function

warn: React Hook useEffect received a function whose dependencies are unknown. Pass an inline function instead.

function MyComponent() {
  const local = {};
  useEffect(debounce(() => {
    console.log(local);
  }, delay), []);
}