better typings

Author: pveyes

README.md

@@ -139,28 +139,6 @@ function ComponentWithSibling() {
 }
 ```
 
-## Typescript, htmr transform and Web Components
-
-If you're using `htmr` to transform custom elements in a typescript code, you'll get type error because custom element is not defined as valid property. To work around this, you can define the mapping in a separate object, and typecast as `any` while spreading in transform object:
-
-```ts
-import { ElementType } from 'react';
-import { HtmrOptions } from 'htmr';
-
-const customElementTransform: Record<string, ElementType> = {
-  'virtual-scroller': VirtualScroller,
-};
-
-const options: HtmrOptions = {
-  transform: {
-    a: Anchor,
-    ...(customElementTransform as any),
-  },
-};
-
-htmr(html, options);
-```
-
 ## Use Cases
 
 This library was initially built to provides easy component mapping between HTML

index.d.ts

@@ -1,6 +1,8 @@
 import { HtmrOptions as Options } from './src/types';
-import { ReactNode } from 'react';
 
-export default function htmr(html: string, options?: Partial<Options>): ReactNode
+export default function htmr(
+  html: string,
+  options?: Partial<Options>
+): JSX.Element;
 
-export type HtmrOptions = Partial<Options>
+export type HtmrOptions = Partial<Options>;

package.json

@@ -57,10 +57,10 @@
     "react": ">=15.6.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.17",
-    "@babel/preset-env": "^7.12.17",
-    "@babel/preset-react": "^7.12.13",
-    "@babel/preset-typescript": "^7.12.17",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@testing-library/react": "^11.2.5",
     "@types/react": "^17.0.2",
     "benchmark": "^2.1.4",
@@ -81,7 +81,7 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-terser": "^5.0.0",
     "rollup-plugin-typescript2": "^0.21.0",
-    "typescript": "^4.1.5"
+    "typescript": "^4.7.4"
   },
   "bundlesize": [
     {

src/index.ts

@@ -58,7 +58,7 @@ function toReactNode(
         attribs[key] = decode(attribs[key]);
       });
 
-      const props = Object.assign(
+      const props: any = Object.assign(
         {},
         mapAttribute(name, attribs, preserveAttributes, getPropInfo),
         { key }

src/types.ts

@@ -1,20 +1,35 @@
-import React, { ReactHTML, ReactSVG, ReactNode, ComponentType } from "react";
+import {
+  ReactHTML,
+  ReactSVG,
+  ReactNode,
+  ComponentType,
+  ComponentProps,
+  AllHTMLAttributes,
+} from 'react';
 
 export type HTMLTags = keyof ReactHTML;
 export type SVGTags = keyof ReactSVG;
-type AllTags = HTMLTags | SVGTags
+type AllTags = HTMLTags | SVGTags;
 
 type HTMLTransform = {
-  [tag in AllTags]: AllTags | ComponentType<Omit<React.ComponentProps<tag>, 'ref'>>;
+  [tag in AllTags]: AllTags | ComponentType<Omit<ComponentProps<tag>, 'ref'>>;
 };
 
 type DefaultTransform = {
-  _: <Props>(element: string | AllTags, props?: Props, children?: ReactNode) => ReactNode
-}
+  _: <Props extends AllHTMLAttributes<any>>(
+    element: string | AllTags,
+    props?: Props,
+    children?: ReactNode
+  ) => ReactNode;
+};
+
+type CustomElementTransform = {
+  [key in `${string}-${string}`]: AllTags | ComponentType<unknown>;
+};
 
 export type HtmrOptions = {
-  transform: Partial<HTMLTransform & DefaultTransform>,
-  preserveAttributes: Array<String | RegExp>,
+  transform: Partial<HTMLTransform & DefaultTransform & CustomElementTransform>;
+  preserveAttributes: Array<String | RegExp>;
   /** An array of tags in which their children should be set as raw html */
-  dangerouslySetChildren: HTMLTags[]
+  dangerouslySetChildren: HTMLTags[];
 };