refactor: assign props values to the props instance

Author: thetutlage

src/component/props.ts

@@ -20,6 +20,14 @@ export class ComponentProps {
 
   constructor(values: Record<string, any>) {
     this.#values = values
+    Object.assign(this, values)
+  }
+
+  /**
+   * Create a typed instance of Component props with properties
+   */
+  static create<T extends Record<string, any>>(values: T): ComponentProps & T {
+    return new ComponentProps(values) as ComponentProps & T
   }
 
   /**

tests/props.spec.ts

@@ -12,17 +12,18 @@ import { ComponentProps } from '../src/component/props.js'
 
 test.group('ComponentProps', () => {
   test('get all props', ({ assert }) => {
-    const props = new ComponentProps({ title: 'Hello' })
+    const props = ComponentProps.create({ title: 'Hello' })
     assert.deepEqual(props.all(), { title: 'Hello' })
   })
 
   test('get value for a given key', ({ assert }) => {
-    const props = new ComponentProps({ title: 'Hello' })
+    const props = ComponentProps.create({ title: 'Hello' })
     assert.equal(props.get('title'), 'Hello')
+    assert.equal(props.title, 'Hello')
   })
 
   test('cherry pick values from the props', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       title: 'Hello',
       label: 'Hello world',
       actionText: 'Confirm',
@@ -35,7 +36,7 @@ test.group('ComponentProps', () => {
   })
 
   test('get values except for the defined keys from the props', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       title: 'Hello',
       label: 'Hello world',
       actionText: 'Confirm',
@@ -47,15 +48,15 @@ test.group('ComponentProps', () => {
   })
 
   test('serialize props to html attributes', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
     assert.equal(props.toAttrs().value, 'class="foo bar" onclick="foo = bar"')
   })
 
   test('serialize by merging custom properties', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
@@ -66,23 +67,23 @@ test.group('ComponentProps', () => {
   })
 
   test('serialize specific keys to html attributes', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
     assert.equal(props.only(['class']).toAttrs().value, 'class="foo bar"')
   })
 
   test('serialize specific keys and merge custom properties', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
     assert.equal(props.only(['class']).merge({ id: '1' }).toAttrs().value, 'id="1" class="foo bar"')
   })
 
   test('serialize all except defined keys to html attributes', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
@@ -91,7 +92,7 @@ test.group('ComponentProps', () => {
   })
 
   test('serialize specific keys and merge custom properties', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
@@ -103,7 +104,7 @@ test.group('ComponentProps', () => {
   })
 
   test('merge default and user supplied classes', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: ['foo', 'bar'],
       onclick: 'foo = bar',
     })
@@ -118,7 +119,7 @@ test.group('ComponentProps', () => {
   })
 
   test('merge default and user supplied classes as object', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: [
         'foo',
         {
@@ -142,7 +143,7 @@ test.group('ComponentProps', () => {
   })
 
   test('mergeUnless a conditional is true', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: [
         'foo',
         {
@@ -167,7 +168,7 @@ test.group('ComponentProps', () => {
   })
 
   test('mergeIf a conditional is true', ({ assert }) => {
-    const props = new ComponentProps({
+    const props = ComponentProps.create({
       class: [
         'foo',
         {