feat: expose refs and refsAll on element

use `myHtmlElement.$refs` and `myHtmlElement.$refsAll` to access the
element's refs

closes #2

Author: arnoson

src/mountComponent.ts

@@ -1,5 +1,5 @@
 import { getComponent } from './registerComponent'
-import { SimpleRefs, SimpleRefsAll } from './types'
+import { SimpleElement, SimpleRefs, SimpleRefsAll } from './types'
 import { walkComponent } from './walkComponent'
 
 const getRefsAll = (el: HTMLElement): SimpleRefsAll => {
@@ -33,7 +33,10 @@ export const mountComponent = (el: HTMLElement, isChild = false) => {
 
     const component = getComponent(el)
     if (component) {
-      ;(el as any).$component = component({ el, refs, refsAll }) || {}
+      const simpleEl = el as SimpleElement<ReturnType<typeof component>>
+      simpleEl.$component = component({ el, refs, refsAll }) || {}
+      simpleEl.$refs = refs
+      simpleEl.$refsAll = refsAll
     }
   }
 

src/types.ts

@@ -10,6 +10,8 @@ export type SimpleInstance<C extends SimpleComponent> = ReturnType<C>
 
 export type SimpleElement<C extends SimpleComponent, T = HTMLElement> = T & {
   $component: SimpleInstance<C>
+  $refs: SimpleRefs,
+  $refsAll: SimpleRefsAll
 }
 
 export interface SimpleComponentPayload<T> {

tests/index.test.ts

@@ -161,6 +161,40 @@ it('interferes prop types from default values', () => {
   expect(readProps(el!)).toMatchSnapshot()
 })
 
+it(`exposes the component's refs`, () => {
+  const component = registerComponent('test', () => {})
+
+  document.body.innerHTML = `
+    <div data-simple-component="test" id="my-id">
+      <div id="ref" data-ref="ref"></div>
+    </div>
+  `
+  const refs = { ref: document.getElementById('ref') }
+  mountComponents(document.body)
+  const el = document.getElementById('my-id') as SimpleElement<typeof component>
+  expect(el.$refs).toEqual(refs)
+})
+
+it(`exposes the component's refsAll`, () => {
+  const component = registerComponent('test', () => {})
+
+  document.body.innerHTML = `
+    <div data-simple-component="test" id="my-id">
+      <div id="ref1" data-ref="myRef"></div>
+      <div id="ref2" data-ref="myRef"></div>
+    </div>
+  `
+
+  const myRef = [
+    document.getElementById('ref1'),
+    document.getElementById('ref2'),
+  ]
+
+  mountComponents(document.body)
+  const el = document.getElementById('my-id') as SimpleElement<typeof component>
+  expect(el.$refsAll).toEqual({ myRef })
+})
+
 it(`exposes the component function's return value`, () => {
   const exposed = { test: () => {} }
   const component = registerComponent('test', () => exposed)