remove propsTypes and use typescript

Author: dev-javascript

.babelrc.js

@@ -15,16 +15,7 @@ const options = {
       },
     ],
   ],
-  plugins: [
-    '@babel/plugin-transform-react-jsx',
-    [
-      'transform-react-remove-prop-types',
-      {
-        mode: 'remove',
-        ignoreFilenames: ['node_modules'],
-      },
-    ],
-  ],
+  plugins: ['@babel/plugin-transform-react-jsx'],
   env: {
     test: {
       // extra configuration for process.env.NODE_ENV === 'test'

index.d.ts

@@ -6,6 +6,7 @@
     "name": "dev-javascript",
     "email": "javascript.code.dev@gmail.com"
   },
+  "types": "./index.d.ts",
   "description": "Create React component from string",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -53,7 +54,6 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "babel-loader": "^8.1.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "cross-env": "^7.0.3",
     "esbuild": "^0.20.0",
     "eslint": "^8.56.0",
@@ -104,8 +104,5 @@
     "setupFilesAfterEnv": [
       "jest-extended"
     ]
-  },
-  "dependencies": {
-    "prop-types": "^15.8.1"
   }
 }

package-lock.json

@@ -1,10 +1,14 @@
-import { type TBabel } from './index.d';
-class Ctx {
+import type {TransformOptions} from '@babel/core';
+import type {TBabel, TReact, IStringToReactApi} from './index.d';
+import React, {FC, PropsWithChildren} from 'react';
+class Ctx implements IStringToReactApi {
   _temp: string = '';
   _parentTemp: string = `"use strict";\nreturn @temp;`;
-  _com: Function | null = null;
+  _com: FC<PropsWithChildren<{}>> = function () {
+    return null;
+  };
   _getBabel: () => TBabel;
-  constructor(React: object, Babel: TBabel) {
+  constructor(React: TReact, Babel: TBabel) {
     window.React = window.React || React;
     if (!Babel) {
       throw new Error(
@@ -13,23 +17,23 @@ class Ctx {
     }
     this._getBabel = () => Babel;
   }
-  _checkBabelOptions(babelOptions: any) {
+  _checkBabelOptions(babelOptions: TransformOptions) {
     if (Object.prototype.toString.call(babelOptions) !== '[object Object]') {
       throw new Error(`babelOptions prop of string-to-react-component element should be an object.`);
     }
     if (Object.prototype.hasOwnProperty.call(babelOptions, 'presets') === false) {
       babelOptions.presets = ['react'];
     } else {
       //check if babelOptions.presets is not type of Array
-      if (!(typeof babelOptions.presets === 'object' && babelOptions.presets.constructor == Array)) {
+      if (!(typeof babelOptions.presets === 'object' && babelOptions.presets?.constructor == Array)) {
         throw new Error(`string-to-react-component Error : presets property of babelOptions prop should be an array`);
       }
       if (babelOptions.presets.indexOf('react') === -1) {
         babelOptions.presets.push('react');
       }
     }
   }
-  _transpile(babelOptions: any): string {
+  _transpile(babelOptions: TransformOptions): string {
     // make sure react presets is registered in babelOptions
     this._checkBabelOptions(babelOptions);
     const resultObj = this._getBabel().transform(this._temp, babelOptions);
@@ -57,15 +61,15 @@ class Ctx {
       throw new Error(`passed string into string-to-react-component element can not be empty`);
     }
   }
-  updateTemplate(template: any, babelOptions: any) {
+  updateTemplate(template: string, babelOptions: TransformOptions): IStringToReactApi {
     this._validateTemplate(template);
     if (template !== this._temp) {
       this._temp = template;
       this._generateCom(babelOptions);
     }
     return this;
   }
-  getComponent() {
+  getComponent(): FC<PropsWithChildren<{}>> {
     return this._com;
   }
 }

package.json

@@ -1,5 +1,17 @@
-export type TBabel = {
-    transform: (temp: string, options: object) => ({
-        code?: string
-    })
-};
+import * as Babel from '@types/babel__standalone';
+import * as React from '@types/react';
+import { TransformOptions } from "@babel/core";
+import React, { FunctionComponent, FC, PropsWithChildren } from 'react';
+import { TransformOptions } from "@babel/core";
+export interface IStringToReactApi {
+    updateTemplate: (template: string, babelOptions: TransformOptions) => IStringToReactApi;
+    getComponent: () => FC<PropsWithChildren<{}>>;
+    [x: string]: any;
+}
+export type TReact = typeof React;
+export type TBabel = typeof Babel;
+export interface StringToReactComponentProps {
+    data?: object,
+    babelOptions?: TransformOptions,
+    children?: string,
+}

src/ctx.ts src/ctx.tsxsrc/ctx.ts renamed to src/ctx.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Ctx from './ctx';
 import * as Babel from '@babel/standalone';
-import type { TBabel } from './index.d';
+import type { TBabel, TReact, IStringToReactApi } from './index.d';
 import StringToReact from './strintToReact';
-const getCtx = (React: object, Babel: TBabel) => new Ctx(React, Babel);
-export default StringToReact.bind(null, { getCtx: getCtx, Babel: Babel, react: React });
+const getCtx: (React: TReact, Babel: TBabel) => IStringToReactApi = (React: TReact, Babel: TBabel) => new Ctx(React, Babel);
+export default StringToReact.bind(null, { getCtx: getCtx, Babel: Babel, react: React });

src/index.d.ts

@@ -1,17 +1,17 @@
 import React, {useRef} from 'react';
-import PropTypes from 'prop-types';
-function StringToReactComponent(deps: any, props: any) {
+import type {StringToReactComponentProps, IStringToReactApi, TBabel, TReact} from './index.d';
+function StringToReactComponent(
+  deps: {getCtx: (react: TReact, Babel: TBabel) => IStringToReactApi; react: TReact; Babel: TBabel},
+  props: StringToReactComponentProps,
+) {
   const {getCtx, Babel, react} = deps;
-  const ref = useRef<any>(null);
+  let ref = useRef<any>(null);
   ref.current = ref.current || getCtx(react, Babel);
+  const api = ref.current as IStringToReactApi;
   const babelOptions = props.babelOptions || {};
-  const GeneratedComponent = ref.current.updateTemplate(props.children, babelOptions).getComponent();
+  const GeneratedComponent = api.updateTemplate(props.children || '', babelOptions).getComponent();
   const data = props.data || {};
   return <GeneratedComponent {...data} />;
 }
-StringToReactComponent.propTypes /* remove-proptypes */ = {
-  data: PropTypes.object,
-  babelOptions: PropTypes.object,
-  children: PropTypes.string,
-};
+
 export default StringToReactComponent;

src/index.ts

@@ -2149,11 +2149,6 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-plugin-transform-react-remove-prop-types@^0.4.24:
-  version "0.4.24"
-  resolved "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz"
-  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz"