feat: add default prop values to dataset

Comes in handy when using css selectors like `.my-component[data-open=true]`. These required to have the dataset property explicitly set, even if there was a prop default value.

Author: arnoson

src/mountComponent.ts

@@ -1,4 +1,9 @@
-import { createPropsProxy } from './props'
+import {
+  createPropsProxy,
+  getDefaultProp,
+  isBuiltInTypeConstructor,
+  stringifyProp
+} from './props'
 import { getRefs } from './refs'
 import { getComponent } from './registerComponent'
 import { SimpleComponentEvent, SimpleElement } from './types'
@@ -24,6 +29,19 @@ export const mountComponent = (el: HTMLElement, isChild = false) => {
       ? createPropsProxy(el, propsDefinitions)
       : el.dataset
 
+    // Add missing default prop values to dataset for CSS/query selectors.
+    if (propsDefinitions) {
+      for (const [key, definition] of Object.entries(propsDefinitions)) {
+        if (el.dataset[key] !== undefined) continue
+
+        const providesDefault = !isBuiltInTypeConstructor(definition)
+        if (!providesDefault) continue
+
+        const value = getDefaultProp(definition)
+        el.dataset[key] = stringifyProp(value)
+      }
+    }
+
     const { refs, refsAll } = getRefs(el)
     const ComponentEvent = CustomEvent as SimpleComponentEvent
     const ctx = { el, props, refs, refsAll, ComponentEvent }

src/props.ts

@@ -1,13 +1,13 @@
-const isBuiltInTypeConstructor = (value: any) =>
+export const isBuiltInTypeConstructor = (value: any) =>
   [Number, String, Boolean, Array, Object].includes(value)
 
-const parseProp = (value: any, type: string) =>
+export const parseProp = (value: any, type: string) =>
   type === 'string' ? String(value) : JSON.parse(value)
 
-const stringifyProp = (value: any) =>
+export const stringifyProp = (value: any) =>
   typeof value === 'string' ? value : JSON.stringify(value)
 
-const getDefaultProp = (definition: any) =>
+export const getDefaultProp = (definition: any) =>
   definition instanceof Function ? definition() : definition
 
 export const createPropsProxy = (

tests/index.test.ts

@@ -175,6 +175,26 @@ it(`provides default values for props`, () => {
   expect(props.obj).toEqual({})
 })
 
+it(`adds default values to the dataset`, () => {
+  document.body.innerHTML = `<div data-simple-component="test" data-provided="provided"></div>`
+  const el = document.querySelector('div')
+
+  const options = {
+    props: {
+      missing: 10,
+      provided: 'default',
+      ignore: Number
+    }
+  }
+
+  registerComponent('test', options, () => {})
+  mountComponents()
+
+  expect(el?.dataset.missing).toBe('10')
+  expect(el?.dataset.provided).toBe('provided')
+  expect(el?.dataset.ignore).toBe(undefined)
+})
+
 it('interferes prop types from default values', () => {
   document.body.innerHTML = `
     <div