initial commit

Author: dev-javascript

.babelrc.js

@@ -0,0 +1,19 @@
+'use strict';
+
+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'],
+  env: {
+    test: {
+      // extra configuration for process.env.NODE_ENV === 'test'
+      presets: ['@babel/env'], // overwrite env-config from above with transpiled module syntax
+    },
+  },
+};
+if (requirePolyfills) {
+  options.plugins.push(['@babel/plugin-transform-runtime', {corejs: 3}]);
+}
+module.exports = options;

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "es6": true,
+    "node": true,
+    "jest": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module",
+    "allowImportExportEverywhere": false
+  },
+  "plugins": ["eslint-plugin-react", "eslint-plugin-prettier"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,30 @@
+#ide
+/.vscode
+
+# dependencies
+/node_modules
+example/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/lib
+/dist
+
+# demo
+/demo
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.npmignore

@@ -0,0 +1,31 @@
+#ide
+/.vscode
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# production
+webpack*
+rollup*
+.babelrc.js
+
+#demo
+/example
+index.html
+/demo
+
+# testing
+/coverage
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierignore

@@ -0,0 +1,30 @@
+#ide
+/.vscode
+
+# dependencies
+/node_modules
+example/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/lib
+/dist
+
+# demo
+/demo
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "proseWrap": "never"
+}

CHANGELOG.md

@@ -1,2 +1,83 @@
 # string-to-react-component
+
 Create React component from string
+
+> _Support react >= `v16.8.0`_
+
+## Table of Contents
+
+<!-- toc -->
+
+- [Installation](#installation)
+- [Basic Example](#basic-example)
+- [Using Unknown Elements](#using-unknown-elements)
+- [Test](#test)
+- [License](#license)
+
+<!-- tocstop -->
+
+## Installation
+
+```js
+$ npm install string-to-react-component --save
+```
+
+Also You need to load `@babel/standalone` in the browser :
+
+```js
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+```
+
+## Basic Example
+
+```js
+import React from 'react';
+import StringToReactComponent from 'string-to-react-component';
+function App() {
+  return (
+    <StringToReactComponent>
+      {`(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 Unknown Elements
+
+```js
+import React from 'react';
+import StringToReactComponent from 'string-to-react-component';
+function MyComponent() {
+  return <p>My Component</p>;
+}
+function App() {
+  return (
+    <StringToReactComponent MyComponent={MyComponent}>
+      {`(props)=>{
+         const {MyComponent}=props;
+         return (<MyComponent/>);
+       }`}
+    </StringToReactComponent>
+  );
+}
+```
+
+## Test
+
+```js
+$ npm run test
+```
+
+## License
+
+MIT