5 | interface ComponentOptions {
6 | name: string
7 | props: P
8 | }
9 |
10 | // global
11 | export const ID_ATTR = "data-id"
12 | let ID = 0
13 |
14 | /**
15 | * Component
16 | */
17 | export class Component
{
18 | public readonly root: HTMLElement
19 | public readonly id: number
20 | public readonly name: string
21 | public readonly props: P
22 |
23 | #observer: MutationObserver
24 | #isMounted: boolean = false
25 | #unmountedFromMounted: (() => void) | void
26 | public get isMounted() {
27 | return this.#isMounted
28 | }
29 |
30 | constructor(root: HTMLElement, options: Partial> = {}) {
31 | this.beforeMount()
32 | this.root = root
33 | this.name = options.name ?? this.root?.classList?.[0]
34 | this.props = options.props
35 | this.id = ID++
36 | this.root?.setAttribute(ID_ATTR, `${this.id}`)
37 |
38 | // hack: exe init method with timeout to access `this` inside
39 | // the component witch extends Component
40 | setTimeout(() => {
41 | this.#mounted()
42 | this.#watchChildren()
43 | }, 0)
44 | }
45 |
46 | public beforeMount(): void {}
47 |
48 | public mounted(): (() => void) | void {
49 | return () => {}
50 | }
51 |
52 | #mounted(): void {
53 | log(`🟢 ${this.name} mounted`)
54 | this.#unmountedFromMounted = this.mounted()
55 | this.#isMounted = true
56 | }
57 |
58 | public unmounted(): void {}
59 |
60 | protected _unmounted(): void {
61 | log(`🔴 ${this.name} unmounted`)
62 | if (this.#unmountedFromMounted) this.#unmountedFromMounted()
63 | this.unmounted()
64 | this.#isMounted = false
65 | this.#onChildrenComponents((component: Component) => {
66 | if (component) component._unmounted()
67 | })
68 | }
69 |
70 | // --------------------------------------------------------------------------- ADD
71 |
72 | /**
73 | * Add is a register child component function
74 | * It create new children instance
75 | */
76 | public add(
77 | classComponent: new (...args: any[]) => C,
78 | options?: Partial>,
79 | ): C {
80 | const name = options?.name || classComponent?.["name"]
81 | const element = this.root.querySelector(`.${name}`)
82 | return element ? new classComponent(element, options) : null
83 | }
84 |
85 | /**
86 | * Add multiple children components
87 | */
88 | public addAll(
89 | classComponent: new (...args: any[]) => C extends (infer U)[] ? U : never,
90 | options?: Partial>,
91 | ): C {
92 | const arr = []
93 | const name = options?.name || classComponent?.["name"]
94 | const elements = this.root.querySelectorAll(`.${name}`)
95 | if (!elements?.length) return arr as any
96 |
97 | // map on each elements (because elements return an array)
98 | for (let i = 0; i < elements.length; i++) {
99 | const classInstance = new classComponent(elements[i], options)
100 | arr.push(classInstance)
101 | }
102 | return arr as C
103 | }
104 |
105 | // --------------------------------------------------------------------------- FIND
106 |
107 | /**
108 | * Find single HTML element from parent root
109 | */
110 | public find(className: string): T {
111 | return this.root?.querySelector(
112 | className.startsWith("_") ? `.${this.name}${className}` : `.${className}`,
113 | )
114 | }
115 |
116 | /**
117 | * Find HTML element list from parent root
118 | */
119 | public findAll(className: string): T {
120 | const els = this.root?.querySelectorAll(
121 | className.startsWith("_") ? `.${this.name}${className}` : `.${className}`,
122 | )
123 | return Array.from(els || []) as T
124 | }
125 |
126 | // --------------------------------------------------------------------------- TRANSITIONS
127 |
128 | public playIn(): Promise {
129 | return Promise.resolve()
130 | }
131 |
132 | public playOut(): Promise {
133 | return Promise.resolve()
134 | }
135 |
136 | // --------------------------------------------------------------------------- CORE
137 |
138 | /**
139 | * Process callback function on each children components
140 | * A children component is an instance of Component
141 | * @param callback
142 | */
143 | #onChildrenComponents(callback: (component) => void): void {
144 | Object.keys(this)?.forEach((child) => {
145 | const curr = this?.[child]
146 | if (Array.isArray(curr)) {
147 | curr.forEach((c) => {
148 | if (c instanceof Component) callback(c)
149 | })
150 | } else if (curr instanceof Component) callback(curr)
151 | })
152 | }
153 |
154 | /**
155 | * Watch children components changed
156 | * If this current component is removed (with his children), unmount children
157 | */
158 | #watchChildren(): void {
159 | this.#observer = new MutationObserver((mutationsList) => {
160 | for (const mutation of mutationsList) {
161 | for (const node of mutation.removedNodes as any) {
162 | const nodeRemovedId = this.#getComponentId(node as any)
163 | const parentNode = node.parentNode?.querySelector(`*[${ID_ATTR}='${nodeRemovedId}']`)
164 | if (nodeRemovedId && parentNode) continue
165 |
166 | this.#onChildrenComponents((component) => {
167 | if (!component) return
168 | if (nodeRemovedId === component?.id && component?.isMounted) {
169 | component._unmounted()
170 | component?.observer?.disconnect()
171 | }
172 | })
173 | }
174 | }
175 | })
176 |
177 | if (this.root) {
178 | this.#observer.observe(this.root, {
179 | subtree: true,
180 | childList: true,
181 | })
182 | }
183 | }
184 |
185 | /**
186 | * Get component ID
187 | * @param $node
188 | */
189 | #getComponentId($node: HTMLElement): number {
190 | return $node?.getAttribute?.(ID_ATTR) && parseInt($node.getAttribute(ID_ATTR))
191 | }
192 | }
193 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { Component } from "./Component"
2 |
--------------------------------------------------------------------------------
/tests/Component.add.test.ts:
--------------------------------------------------------------------------------
1 | // @vitest-environment happy-dom
2 | import { beforeEach, expect, it } from "vitest"
3 | import { Window } from "happy-dom"
4 | import { HomePageMock } from "./templates/HomePageMock"
5 | import { Component } from "../src"
6 |
7 | let window = new Window()
8 | let document = window.document
9 |
10 | beforeEach(() => {
11 | window = new Window()
12 | document = window.document
13 | })
14 |
15 | class Button extends Component {
16 | static attrName = "Button"
17 | }
18 |
19 | class NotExistInDOM extends Component {
20 | static attrName = "NotExistInDOM"
21 | }
22 |
23 | it("Should add properly", async () => {
24 | class HomePage extends Component {
25 | public button = this.add(Button)
26 | }
27 | document.write(HomePageMock())
28 | const root = document.querySelector(".HomePage") as any
29 | const homePage = new HomePage(root)
30 | expect(homePage.button).toBeInstanceOf(Button)
31 | expect(homePage.button.root).toBe(root.querySelector(".Button"))
32 | })
33 |
34 | it("Should addAll properly", async () => {
35 | class HomePage extends Component {
36 | public buttons = this.addAll(Button)
37 | public notExistInDOM = this.addAll(NotExistInDOM)
38 | }
39 |
40 | document.write(HomePageMock())
41 | const root = document.querySelector(".HomePage") as any
42 | const homePage = new HomePage(root)
43 | expect(homePage.buttons.length).toBe(2)
44 | homePage.buttons.forEach((e) => expect(e).toBeInstanceOf(Button))
45 | expect(homePage.notExistInDOM).toEqual([])
46 | })
47 |
48 | it("Should addAll multiple instances properly", async () => {
49 | class HomePage extends Component {
50 | public buttons = this.addAll(Button)
51 | }
52 | document.write(HomePageMock())
53 | const root = document.querySelector(".HomePage") as any
54 | root.innerHTML = new Array(1000).fill(`hello
`).join("\n")
55 |
56 | const homePage = new HomePage(root)
57 | expect(homePage.buttons.length).toBe(1000)
58 | homePage.buttons.forEach((e) => expect(e).toBeInstanceOf(Button))
59 | })
60 |
--------------------------------------------------------------------------------
/tests/Component.find.test.ts:
--------------------------------------------------------------------------------
1 | // @vitest-environment happy-dom
2 | import { beforeEach, expect, it } from "vitest"
3 | import { Window } from "happy-dom"
4 | import { HomePageMock } from "./templates/HomePageMock"
5 | import { Component } from "../src"
6 |
7 | let window = new Window()
8 | let document = window.document
9 |
10 | beforeEach(() => {
11 | window = new Window()
12 | document = window.document
13 | })
14 |
15 | class HomePage extends Component {
16 | public section = this.find("_section")
17 | public notExist = this.find("_notExist")
18 | public notExists = this.findAll("_notExists")
19 | }
20 |
21 | it("Should find and findAll properly", async () => {
22 | document.write(HomePageMock())
23 | const root = document.querySelector(".HomePage") as any
24 | const section = root.querySelector(".HomePage_section")
25 | const homePage = new HomePage(root)
26 |
27 | expect(homePage.section).toEqual(section)
28 | expect(homePage.notExist).toBeNull()
29 | expect(homePage.notExists).toEqual([])
30 | })
31 |
--------------------------------------------------------------------------------
/tests/Component.init.test.ts:
--------------------------------------------------------------------------------
1 | // @vitest-environment happy-dom
2 | import { expect, it } from "vitest"
3 | import { Window } from "happy-dom"
4 | import { HomePageMock } from "./templates/HomePageMock"
5 | import { Component } from "../src"
6 |
7 | let window = new Window()
8 | let document = window.document
9 |
10 | class HomePage extends Component {}
11 |
12 | it("Extended class should be init properly.", async () => {
13 | document.write(HomePageMock())
14 | const root = document.querySelector(".HomePage") as any
15 | const props = { foo: "bar" }
16 | const homePage = new HomePage(root, { props })
17 |
18 | expect(HomePage.name).toBe("HomePage")
19 | expect(homePage.root).toBe(root)
20 | expect(homePage.props).toBe(props)
21 | expect(parseInt(root.getAttribute("data-id"))).toBeTypeOf("number")
22 | })
23 |
--------------------------------------------------------------------------------
/tests/Component.lifecycle.test.ts:
--------------------------------------------------------------------------------
1 | // @vitest-environment happy-dom
2 | import { beforeEach, expect, it, Mock, vi } from "vitest"
3 | import { Window } from "happy-dom"
4 | import { HomePageMock } from "./templates/HomePageMock"
5 | import { wait } from "./helpers/wait"
6 | import { Component } from "../src"
7 |
8 | let window
9 | let document
10 |
11 | beforeEach(() => {
12 | window = new Window()
13 | document = window.document
14 | })
15 |
16 | it("Life-cycle order should be respected.", async () => {
17 | let beforeMountMock = vi.fn()
18 | let mountedMock = vi.fn()
19 | let unmountedMock = vi.fn()
20 |
21 | class HomePage extends Component {
22 | static attrName = "HomePage"
23 | public beforeMount() {
24 | expect(this.root).toBeUndefined()
25 | beforeMountMock()
26 | }
27 | public mounted() {
28 | mountedMock()
29 | }
30 | public unmounted() {
31 | unmountedMock()
32 | }
33 | }
34 |
35 | document.write(HomePageMock())
36 | const homePage = new HomePage(document.querySelector(".HomePage"))
37 | expect(beforeMountMock).toBeCalledTimes(1)
38 | // waiting for a frame (see trick in Component constructor)
39 | await wait(0)
40 | expect(mountedMock).toBeCalledTimes(1)
41 | expect(unmountedMock).toBeCalledTimes(0)
42 | homePage.unmounted()
43 | expect(unmountedMock).toBeCalledTimes(1)
44 | })
45 |
46 | it("Should mount & unmount children components", async () => {
47 | let homeMountedMock = vi.fn()
48 | let homeUnmountedMock = vi.fn()
49 | let buttonMountedMock = vi.fn()
50 | let buttonUnmountedMock = vi.fn()
51 | let labelMountedMock = vi.fn()
52 | let labelUnmountedMock = vi.fn()
53 | let mountedOrder = []
54 | let unmountedOrder = []
55 | /**
56 | * Home
57 | * Button
58 | * Label
59 | */
60 | class HomePage extends Component {
61 | static attrName = "HomePage"
62 | public button = this.add(Button)
63 | public mounted() {
64 | homeMountedMock()
65 | mountedOrder.push(this.name)
66 | }
67 | public unmounted() {
68 | homeUnmountedMock()
69 | unmountedOrder.push(this.name)
70 | }
71 | public _unmounted() {
72 | super._unmounted()
73 | }
74 | }
75 | class Button extends Component {
76 | static attrName = "Button"
77 | public label = this.add(Label)
78 | public mounted() {
79 | buttonMountedMock()
80 | mountedOrder.push(this.name)
81 | }
82 | public unmounted() {
83 | buttonUnmountedMock()
84 | unmountedOrder.push(this.name)
85 | }
86 | }
87 | class Label extends Component {
88 | static attrName = "Label"
89 | public mounted() {
90 | labelMountedMock()
91 | mountedOrder.push(this.name)
92 | }
93 | public unmounted() {
94 | labelUnmountedMock()
95 | unmountedOrder.push(this.name)
96 | }
97 | }
98 |
99 | document.write(HomePageMock())
100 | const root = document.querySelector(".HomePage") as any
101 |
102 | // add appropriate DOM
103 | root.innerHTML = `
104 | `
107 |
108 | // root instance will chain children instances
109 | const homePage = new HomePage(root)
110 |
111 | expect(homePage.root.getAttribute("data-id")).toBeDefined()
112 | expect(homePage.button.root.getAttribute("data-id")).toBeDefined()
113 | expect(homePage.button.label.root.getAttribute("data-id")).toBeDefined()
114 |
115 | // waiting for a frame (see trick in Component constructor)
116 | await wait(0)
117 | ;[homeMountedMock, buttonMountedMock, labelMountedMock].forEach((e) =>
118 | expect(e).toHaveBeenCalledTimes(1),
119 | )
120 | expect(mountedOrder).toEqual(["HomePage", "Button", "Label"])
121 |
122 | // unmounted() will not unmount children component, only current instance
123 | homePage.unmounted()
124 | expect(homeUnmountedMock).toHaveBeenCalledTimes(1)
125 | expect(buttonUnmountedMock).toHaveBeenCalledTimes(0)
126 | expect(labelUnmountedMock).toHaveBeenCalledTimes(0)
127 |
128 | // clear
129 | homeUnmountedMock.mockClear()
130 | buttonUnmountedMock.mockClear()
131 | labelUnmountedMock.mockClear()
132 | unmountedOrder = []
133 |
134 | // _unmounted() will unmount all children component
135 | // (protected method, making public here)
136 | homePage._unmounted()
137 | ;[homeUnmountedMock, buttonUnmountedMock, labelUnmountedMock].forEach((e) =>
138 | expect(e).toHaveBeenCalledTimes(1),
139 | )
140 | expect(unmountedOrder).toEqual(["HomePage", "Button", "Label"])
141 | })
142 |
--------------------------------------------------------------------------------
/tests/helpers/wait.ts:
--------------------------------------------------------------------------------
1 | export const wait = async (t) => new Promise((r) => setTimeout(r, t))
2 |
--------------------------------------------------------------------------------
/tests/templates/AboutPageMock.ts:
--------------------------------------------------------------------------------
1 | export const AboutPageMock = () => `
2 |
3 |
4 |
5 |
6 | About
7 |
8 |
9 |
10 |
11 |
18 |
19 |
22 |
23 |
24 |
25 |
26 | `
27 |
--------------------------------------------------------------------------------
/tests/templates/HomePageMock.ts:
--------------------------------------------------------------------------------
1 | export const HomePageMock = () => `
2 |
3 |
4 |
5 |
6 | Home
7 |
8 |
9 |
10 |
11 |
18 |
19 |
20 |
21 | Home
22 |
Hello
23 |
Hello
24 |
25 |