Merge branch 'typescript'

Author: dev-javascript

.babelrc.js

@@ -4,17 +4,18 @@ const output = process.env.BABEL_OUTPUT;
 const requirePolyfills = process.env.INCLUDE_POLYFILLS;
 const modules = output == null ? false : output;
 const options = {
-  presets: [['@babel/env', {loose: true, modules}], '@babel/react'],
-  plugins: [
-    '@babel/plugin-transform-react-jsx',
+  presets: [
+    ['@babel/env', {loose: true, modules}],
+    '@babel/react',
     [
-      'transform-react-remove-prop-types',
+      '@babel/preset-typescript',
       {
-        mode: 'remove',
-        ignoreFilenames: ['node_modules'],
+        isTSX: true,
+        allExtensions: true,
       },
     ],
   ],
+  plugins: ['@babel/plugin-transform-react-jsx'],
   env: {
     test: {
       // extra configuration for process.env.NODE_ENV === 'test'

.gitignore

@@ -8,6 +8,7 @@ example/node_modules
 
 # testing
 /coverage
+/sandbox
 
 # production
 /build

.npmignore

@@ -13,6 +13,7 @@ rollup*
 
 #development
 /build
+/sandbox
 
 #demo
 /example

README.md

@@ -1,4 +1,4 @@
-  # string-to-react-component
+# string-to-react-component
 
 Create React component from string
 
@@ -22,16 +22,19 @@ Create React component from string
 
 ## Installation
 
-First You need to load `@babel/standalone` in the browser :
-
 ```js
-<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+# with npm
+$ npm install string-to-react-component @babel/standalone --save
+
+# with yarn
+yarn add string-to-react-component @babel/standalone
 ```
 
-Then install `string-to-react-component` package
+### CDN Links
 
 ```js
-$ npm install string-to-react-component --save
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script src="https://unpkg.com/string-to-react-component@3.1.0/dist/stringToReactComponent.umd.min.js"></script>
 ```
 
 ## Basic Example
@@ -61,18 +64,18 @@ function App() {
 
 - The given code inside the string should be a function.
 
-- The code inside the string is executed in the global scope, so imported objects from `react` package including `useState`, `useEffect`, ... are not accessible inside it and you should get them from `React` global variable :
+- The code inside the string is executed in the global scope, so imported objects from `react` package including `useState`, `useEffect`, ... are not accessible inside it and you can get them from `React` global variable or pass them as props to the component :
 
 ```js
 import {useState} from 'react';
 import StringToReactComponent from 'string-to-react-component';
 function App() {
   return (
-    <StringToReactComponent>
-      {`()=>{
+    <StringToReactComponent data={{useState}}>
+      {`(props)=>{
          console.log(typeof useState); // undefined
          console.log(typeof React.useState); // function
-
+         console.log(typeof props.useState); // function
          ...
 
        }`}
@@ -116,38 +119,38 @@ function App() {
 - not required
 - See the full option list [here](https://babeljs.io/docs/en/options)
 - examples :
-    * using source map :
-       ```js
-        <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}>
-         {`(props)=>{
-            const {useState}=React;
-            const [counter,setCounter]=useState(0);
-            const increase=()=>{
-              setCounter(counter+1);
-            };
-            return (<>
-              <button onClick={increase}>+</button>
-              <span>{'counter : '+ counter}</span>
-              </>);
-          }`}
-        </StringToReactComponent>
-       ```
-    * using typescript :
-        ```js
-         <StringToReactComponent babelOptions={{ filename: 'counter.ts',presets: [["typescript", { allExtensions: true, isTSX: true }]] }}>
-           {`()=>{
-             const [counter,setCounter]=React.useState<number>(0);
-             const increase=()=>{
-               setCounter(counter+1);
-             };
-             return (<>
-               <button onClick={increase}>+</button>
-               <span>{'counter : '+ counter}</span>
-               </>);
-            }`}
-         </StringToReactComponent>
-        ```
-
+  - using source map :
+    ```js
+    <StringToReactComponent babelOptions={{filename: 'counter.js', sourceMaps: 'inline'}}>
+      {`(props)=>{
+         const {useState}=React;
+         const [counter,setCounter]=useState(0);
+         const increase=()=>{
+           setCounter(counter+1);
+         };
+         return (<>
+           <button onClick={increase}>+</button>
+           <span>{'counter : '+ counter}</span>
+           </>);
+       }`}
+    </StringToReactComponent>
+    ```
+  - using typescript :
+    ```js
+    <StringToReactComponent
+      babelOptions={{filename: 'counter.ts', presets: [['typescript', {allExtensions: true, isTSX: true}]]}}>
+      {`()=>{
+         const [counter,setCounter]=React.useState<number>(0);
+         const increase=()=>{
+           setCounter(counter+1);
+         };
+         return (<>
+           <button onClick={increase}>+</button>
+           <span>{'counter : '+ counter}</span>
+           </>);
+        }`}
+    </StringToReactComponent>
+    ```
 
 ## Caveats
 

index.d.ts

@@ -0,0 +1,5 @@
+import type { FC, PropsWithChildren } from 'react';
+import type { StringToReactComponentProps } from './src/index.d';
+export { StringToReactComponentProps } from './src/index.d';
+declare const StringToReactComponent: FC<PropsWithChildren<StringToReactComponentProps>>;
+export default StringToReactComponent;