change props values from type constructors to strings (#102)

* initial commit

* prettier fomatting

* replace object and array with json

* update core test

Author: zerico007

docs/api.md

@@ -109,9 +109,11 @@ console.log(document.body.firstElementChild.innerHTML) // "<h1>Hello, Jane</h1>"
 
 If `options.props` is an object, the keys are the camelCased React props and the values are any one of the following built in javascript types, or the string "ref":
 
-`String | Number | Boolean | Function | Object | Array | "ref"`
+`"string" | "number" | "boolean" | "function" | "json" | "ref"`
 
-### String | Number | Boolean | Object | Array props
+"json" can be an array or object. The string passed into the attribute must pass `JSON.parse()` requirements.
+
+### "string" | "number" | "boolean" | "function" | "json" props
 
 ```js
 function AttrPropTypeCasting(props) {
@@ -123,13 +125,13 @@ customElements.define(
   "attr-prop-type-casting",
   reactToWebComponent(AttrPropTypeCasting, React, ReactDOM, {
     props: {
-      stringProp: String,
-      numProp: Number,
-      floatProp: Number,
-      trueProp: Boolean,
-      falseProp: Boolean,
-      arrayProp: Array,
-      objProp: Object,
+      stringProp: "string",
+      numProp: "number",
+      floatProp: "number",
+      trueProp: "boolean",
+      falseProp: "boolean",
+      arrayProp: "json",
+      objProp: "json",
     },
   }),
 )
@@ -177,7 +179,7 @@ function ThemeSelect({ handleClick }) {
 
 const WebThemeSelect = reactToWebComponent(ThemeSelect, React, ReactDOM, {
   props: {
-    handleClick: Function,
+    handleClick: "function",
   },
 })
 

packages/core/src/core.test.tsx

@@ -110,12 +110,12 @@ describe("core", () => {
       ButtonWithDifferentPropTypes,
       {
         props: {
-          text: String,
-          numProp: Number,
-          boolProp: Boolean,
-          arrProp: Array,
-          objProp: Object,
-          funcProp: Function,
+          text: "string",
+          numProp: "number",
+          boolProp: "boolean",
+          arrProp: "json",
+          objProp: "json",
+          funcProp: "function",
         },
       },
       { mount, unmount, onUpdated },

packages/core/src/core.ts

@@ -1,4 +1,10 @@
-import type { ComponentClass, FC, R2WCOptions, Renderer } from "./types"
+import type {
+  ComponentClass,
+  FC,
+  PropOptionTypes,
+  R2WCOptions,
+  Renderer,
+} from "./types"
 
 import React from "react"
 
@@ -261,12 +267,12 @@ function handleTypeCasting(
   this: HTMLElement,
   key: string,
   value: any,
-  obj: Record<string, unknown>,
+  obj: Record<string, PropOptionTypes>,
 ) {
   let attributeToAdd = value
   switch (obj[key]) {
     case "ref":
-    case Function:
+    case "function":
       if (obj[key] === "ref") {
         attributeToAdd = React.createRef()
         Reflect.set(this, key, attributeToAdd)
@@ -282,19 +288,16 @@ function handleTypeCasting(
         attributeToAdd = attributeToAdd.bind(this)
       }
       break
-    case Number:
+    case "number":
       attributeToAdd = parseFloat(attributeToAdd)
       break
-    case Boolean:
+    case "boolean":
       attributeToAdd = /^[ty1-9]/i.test(attributeToAdd)
       break
-    case Object:
+    case "json":
       attributeToAdd = JSON.parse(attributeToAdd)
       break
-    case Array:
-      attributeToAdd = JSON.parse(attributeToAdd)
-      break
-    case String:
+    case "string":
     default:
       break
   }

packages/core/src/types.ts

@@ -51,9 +51,17 @@ export interface CustomElementConstructor {
   new (...params: any[]): HTMLElement
 }
 
+export type PropOptionTypes =
+  | "string"
+  | "number"
+  | "boolean"
+  | "json"
+  | "function"
+  | "ref"
+
 export interface R2WCOptions {
   shadow?: "open" | "closed" | boolean
-  props?: string[] | Record<string, unknown>
+  props?: string[] | Record<string, PropOptionTypes>
 }
 
 export interface Renderer<T> {

tests/react-to-webcomponent.test.jsx

@@ -324,13 +324,13 @@ describe("react-to-webcomponent", () => {
       OptionsPropsTypeCasting,
       {
         props: {
-          stringProp: String,
-          numProp: Number,
-          floatProp: Number,
-          trueProp: Boolean,
-          falseProp: Boolean,
-          arrayProp: Array,
-          objProp: Object,
+          stringProp: "string",
+          numProp: "number",
+          floatProp: "number",
+          trueProp: "boolean",
+          falseProp: "boolean",
+          arrayProp: "array",
+          objProp: "object",
         },
       },
     )
@@ -403,7 +403,7 @@ describe("react-to-webcomponent", () => {
 
     const WebThemeSelect = reactToWebComponent(ThemeSelect, {
       props: {
-        handleClick: Function,
+        handleClick: "function",
       },
     })