Some updates

Author: mcjazzyfunky

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-elements",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "",
   "main": "./index.js",
   "module": "./dist/js-elements.esm.production.js",

rollup.config.js

@@ -47,6 +47,7 @@ function createConfig(pkg, moduleFormat, productive) {
       replace({
         exclude: 'node_modules/**',
         delimiters: ['', ''],
+        preventAssignment: false,
 
         values: {
           'process.env.NODE_ENV': productive ? "'production'" : "'development'"

src/main/core/base.ts

@@ -1,12 +1,12 @@
-import { Component, Ctrl, Ref, VNode } from './types'
+import { Component, Ctrl, Ref, UIEvent, VNode } from './types'
 import { h, renderer } from './vdom'
 
 // @ts-ignore
 import { patch } from './superfine'
 
 // === exports =======================================================
 
-export { attr, define, ref }
+export { attr, define, event, ref }
 
 // === local data =====================================================
 
@@ -54,6 +54,21 @@ function ref<T>(value: T | null = null): Ref<T> {
   return { current: value }
 }
 
+function event<T extends string, D = null>(
+  type: T,
+  detail?: D,
+  options?: { bubbles: boolean; cancelable?: boolean }
+): UIEvent<T, D> {
+  const params = {
+    detail: detail || null,
+    bubbles: !options || !!options.bubbles,
+    cancabble: !options || !!options.cancelable,
+    composed: true
+  }
+
+  return new CustomEvent(type, params) as UIEvent<T, D>
+}
+
 function define(tagName: string, main: () => () => VNode): Component<{}>
 
 function define<P>(
@@ -130,17 +145,22 @@ function buildCustomElementClass(
     ])
   )
 
-  const propNameToAttrNameMap: Map<string, string> = new Map(
-    Array.from(attrNameToPropNameMap).map(([k, v]) => [v, k])
-  )
-
   const propNameToConverterMap: Map<string, PropConverter<any>> = new Map(
     !attrsOptions
       ? null
-      : Array.from(attrsOptions.entries()).map(([propName, attrOptions]) => [
-          propName,
-          commonPropConverters.get(attrOptions.kind)!
-        ])
+      : Array.from(attrsOptions.entries()).map(([propName, attrOptions]) => {
+          const kind = attrOptions.kind
+
+          // TODO!!!
+          const propConv =
+            kind === Boolean
+              ? booleanPropConv
+              : kind === Number
+              ? numberPropConv
+              : stringPropConv
+
+          return [propName, propConv]
+        })
   )
 
   const customElementClass = class extends HTMLElement {
@@ -378,21 +398,19 @@ function createNotifier(): Notifier {
   }
 }
 
-// === attribute converters ==========================================
-
-const commonPropConverters = new Map<AttrKind, PropConverter<any>>()
+// === prop converters ===============================================
 
-commonPropConverters.set(String, {
+const stringPropConv = {
   fromPropToString: (it: string) => it,
   fromStringToProp: (it: string) => it
-})
+}
 
-commonPropConverters.set(Number, {
+const numberPropConv = {
   fromPropToString: (it: number) => String(it),
   fromStringToProp: (it: string) => Number.parseFloat(it)
-})
+}
 
-commonPropConverters.set(Boolean, {
+const booleanPropConv = {
   fromPropToString: (it: boolean) => (it ? 'true' : 'false'),
   fromStringToProp: (it: string) => (it === 'true' ? true : false)
-})
+}

src/main/core/utils.ts

@@ -1,17 +1,6 @@
 import { State, Store, UIEvent } from './types'
 
-export { createEvent, initStore }
-
-function createEvent<T extends string, D = null>(
-  type: T,
-  detail?: D
-): UIEvent<T, D> {
-  return new CustomEvent(type, {
-    detail: detail || null,
-    bubbles: true,
-    composed: true
-  }) as any
-}
+export { initStore }
 
 // === store =========================================================
 

src/main/core/vdom.ts

@@ -15,7 +15,7 @@ const EMPTY_OBJ = {}
 
 function h(
   type: string,
-  props?: Props | null, // TODO!!!!!
+  props?: Props | null, // TODO!!!
   ...children: VNode[]
 ): VElement
 
@@ -25,55 +25,51 @@ function h<P extends Props>(
   ...children: VNode[]
 ): VElement
 
-function h(t: any, p: any) {
+function h(type: string | Component<any>, props?: Props | null): VElement {
   const argc = arguments.length
-  const type = typeof t === 'function' ? t.tagName : t
+  const tagName = typeof type === 'function' ? (type as any).tagName : type
 
-  if (typeof t === 'function' && type === undefined) {
-    throw new Error('Component cannot be rendered as it is not registered yet')
+  if (process.env.NODE_ENV === ('development' as string)) {
+    if (typeof tagName !== 'string') {
+      throw new Error('[h] First argument must be a string or a component')
+    }
   }
 
-  const props =
-    p === undefined ||
-    p === null ||
-    typeof p !== 'object' ||
-    p.isVElement === true ||
-    typeof p[Symbol.iterator] === 'function'
-      ? EMPTY_OBJ
-      : p
-
-  const firstChildIdx =
-    p === undefined || p === null || props !== EMPTY_OBJ ? 2 : 1
-
-  let children = EMPTY_ARR
+  const children = argc > 2 ? [] : EMPTY_ARR
 
-  if (firstChildIdx === argc - 1) {
-    children = asVNode(arguments[firstChildIdx])
-  } else if (firstChildIdx < argc - 1) {
-    children = []
+  if (argc > 2) {
+    for (let i = 2; i < argc; ++i) {
+      const child = arguments[i]
 
-    for (let i = firstChildIdx; i < argc; ++i) {
-      children.push(asVNode(arguments[i]))
+      if (!Array.isArray(child)) {
+        children.push(asVNode(child))
+      } else {
+        for (let j = 0; j < child.length; ++j) {
+          children.push(asVNode(child[j]))
+        }
+      }
     }
   }
 
-  const ret: any = createElement(type, props, children)
+  const ret: any = createElement(tagName, props || EMPTY_OBJ, children)
   ret.isVElement = true
   return ret
 }
 
 // === render ========================================================
 
 export function render(content: VElement, container: Element | string) {
-  if (content !== null && (!content || content.isVElement !== true)) {
-    throw new TypeError()
-    ;('First argument "content" of function "render" must be a virtual element or null')
-  }
+  if (process.env.NODE_ENV === ('development' as string)) {
+    if (content !== null && (!content || content.isVElement !== true)) {
+      throw new TypeError()
+      ;('First argument "content" of function "render" must be a virtual element or null')
+    }
 
-  if (!container || (typeof container !== 'string' && !container.tagName)) {
-    throw new TypeError(
-      'Second argument "container" of function "render" must either be a DOM element or selector string for the DOM element'
-    )
+    if (!container || (typeof container !== 'string' && !container.tagName)) {
+      throw new TypeError(
+        'Second argument "container" of function "render" must either be a DOM element or selector string for the DOM element'
+      )
+    }
   }
 
   const target =

src/main/js-elements-utils.ts

@@ -1 +1 @@
-export { createEvent, initStore } from './core/utils'
+export { initStore } from './core/utils'

src/main/js-elements.ts

@@ -1,4 +1,4 @@
-export { attr, define, ref } from './core/base'
+export { attr, define, event, ref } from './core/base'
 export { h, html, render } from './core/vdom'
 
 export {

src/stories/demos/button-demo.tsx

@@ -1,7 +1,5 @@
-import { attr, define, h, EventHandler, UIEvent } from 'js-elements'
-
+import { attr, define, event, h, EventHandler, UIEvent } from 'js-elements'
 import { useEmitter, useStyles } from 'js-elements/hooks'
-import { createEvent } from 'js-elements/utils'
 
 const buttonDemoStyles = ` 
   .demo-button {
@@ -33,7 +31,7 @@ const DemoButton = define('demo-button', ButtonProps, (props) => {
   useStyles(buttonDemoStyles)
 
   const onClick = () => {
-    emit(createEvent('button-click'), props.onButtonClick)
+    emit(event('button-click'), props.onButtonClick)
   }
 
   return () => (

src/stories/demos/complex-counter-demo.tsx

@@ -1,15 +1,14 @@
 import {
   define,
   h,
+  event,
   ref,
   MethodsOf,
   EventHandler,
   Ref,
   UIEvent
 } from 'js-elements'
 
-import { createEvent } from 'js-elements/utils'
-
 import {
   useEffect,
   useEmitter,
@@ -56,7 +55,7 @@ const Counter = define('complex-counter', CounterProps, (p) => {
   useEffect(
     () => {
       if (status.hasUpdated()) {
-        emit(createEvent('count-change', { count: s.count }), p.onCountChange)
+        emit(event('count-change', { count: s.count }), p.onCountChange)
       }
     },
     () => [s.count]