experiments

.eslintrc

@@ -3,9 +3,6 @@
   "extends": [
     "standard",
     "standard-react",
-    "plugin:prettier/recommended",
-    "prettier/standard",
-    "prettier/react"
   ],
   "env": {
     "node": true

example/src/App.js

@@ -1,10 +1,85 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 
-import { ExampleComponent } from 'metaplate'
+import { MetaPlate } from 'metaplate'
 import 'metaplate/dist/index.css'
 
-const App = () => {
-  return <ExampleComponent text="Create React Library Example 😄" />
+
+const shopUrl = 'http://shop-roles.asmer.fs.a-level.com.ua/'
+
+const getGQL = (url=shopUrl + 'graphql', headers={}) => 
+    (query="", variables={}) => 
+        fetch(url, 
+                      {method: 'POST',
+                            headers: {
+                              'Accept': 'application/json',
+                              'Content-Type': 'application/json',
+                              ...headers  
+                            },
+                           body: JSON.stringify({query,variables})
+                          })
+        .then(res => res.json())
+
+const Image = ({image:{url}}) => <img src={`${shopUrl}${url}`} />
+
+const Good = ({good, children}) =>
+good ? 
+<div className='Good'>
+    <h2>{good.name}</h2>
+    <p>{good.description}</p>
+    <money>{good.price}</money>
+    {children}
+</div>
+: <h3>null</h3>
+
+const Category = ({category:{name, _id}, children}) =>
+<div className='Category'>
+    <h1>{name}</h1>
+    {children}
+</div>
+
+const MetaTest = () => {
+    const [data, setData] = useState()
+
+    const query =
+        `query MainCategories{
+              CategoryFind(query: "[{}]"){
+                _id name
+                  image{
+                    url
+                  }
+                goods{
+                name description price images{
+                  url
+                }
+              }
+                subCategories{ name }
+            }
+        }
+    `
+    useEffect(() => {
+        getGQL()(query).then(data => setData(data.data.CategoryFind))
+    },[])
+
+    return (
+        <MetaPlate data={data}>
+            <Category prop="category" keyDataKey="_id">
+                <Good sourceDataKey="goods" prop="good" keyDataKey="_id">
+                    <div sourceDataKey="images">
+                    <Image  prop="image" keyDataKey="_id"/>
+                    </div>
+                </Good>
+                <Category sourceDataKey="subCategories" prop="category" keyDataKey="_id">
+                </Category>
+            </Category>
+        </MetaPlate>)
 }
 
+
+
+const App = () => 
+<>
+  <MetaTest />
+</>
+
+
 export default App

package.json

@@ -2,7 +2,7 @@
   "name": "metaplate",
   "version": "1.0.0",
   "description": "Meta(Tem)Plate is anti boilerPlate and map removal tool for metatemplating react JSX",
-  "author": "asmer",
+  "author": "Ivan Grynkin",
   "license": "MIT",
   "repository": {
     "type": "git",

src/index.js

@@ -1,6 +1,34 @@
-import React from 'react'
-import styles from './styles.module.css'
+import React, {Fragment} from 'react'
 
-export const ExampleComponent = ({ text }) => {
-  return <div className={styles.test}>Example Component: {text}</div>
+export const MetaPlate = ({ data, children }) => {
+  console.log(children, data)
+  const buildProps = (data, {props:{prop, keyDataKey, sourceDataKey}}) => 
+                        ({[prop]: data,
+                            key:  data[keyDataKey]})
+  const build = (data, meta) => {
+      if (!meta) return;
+      if (data instanceof Array){
+          if (meta instanceof Array) meta = meta[0];
+          const Render = meta.type
+          if (!meta.props.children) return <Render {...buildProps(data, meta)} />
+          return data.map(d => 
+              <Render {...buildProps(d, meta)}>
+                  {build(d, meta.props.children)}
+              </Render>
+          )
+      }
+      else if (data instanceof Object){
+          if (!(meta instanceof Array)) meta = [meta]
+
+          return meta.map(m => {
+              const Render = m.type
+              const {sourceDataKey}  = m.props
+              const d = sourceDataKey ? data[sourceDataKey] : data
+              if (!d) return <></>
+              if (d instanceof Array) return build(d, m)
+              return <Render {...buildProps(data, m)} children={build(d, m.props.children)} />
+          })
+      }
+  }
+  return <React.Fragment>{build(data, children)}</React.Fragment>
 }