Test1031t9319510

by jonahe

HTML

<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="root">

</div>

CSS

.comp {
      border: 5px solid green;
      padding: 5px;
      margin: 5px;
      display: inline-block;
    }
    .compOne { border-color: red;}
    .compTwo { border-color: green;}
    .compThree { border-color: blue;}
    .compFour { border-color: black;}
    .compFive { border-color: teal;}

Babel + JSX

const jsonSimple = {
 "article":[
   {
    "section@role":"Introduction",
    "section":[
      {
        "title@id":"dv_introduction",
        "title@wordstyle":"Section_Header",
        "title":          {
          "annotate@id":"720731008",
          "annotate":"Introduction"
        }
      }
    ]
  }
  ]
};

const Article = (props) => {  
  //debugger;
  return (
    <div className="article-root">
      {props.children}
    </div>
  );
};

const TitleComponent = (props) => {  

  //debugger;

  return (
    <span className="title">
      {props.children}
    </span>
  );
};


const EmphasisComponent = (props) => {
  //debugger;
  return (
    <span className="bold">
      {props.children}
    </span>
  );
};

const ComponentTypes = {
  "title": TitleComponent,
  "emphasis" : EmphasisComponent
};


class App extends React.Component {

  componentWillMount() {

    this.finishedParse = this.parseDoc(jsonSimple);       
  
  }

  parseDoc(doc) {

    try {
      //debugger;
      const finalComponent = this.composeMaster(doc, <Article />, this.nodeAttributes(doc));
      return finalComponent;

    } catch(e) {
      console.log(e);
      return;
    }

  }

  nodeAttributes(obj) {

    let attributeList = {};

    for (var attrib in obj) {
      const item = obj[attrib];

      if (item && item.constructor === String && attrib.indexOf("@") !== -1) {
        const attribVals = attrib.split("@");
        const attribGroup = attribVals[0];
        const attribName = attribVals[1];

        attributeList[attribName] = item;

      }
    
    }

    return attributeList;

  }

  composeMaster(obj, ParentComponent, traverseProps) {

    for (var property in obj) {
      if (obj.hasOwnProperty(property)) {
        if (typeof obj[property] == "object") {
          
          console.log(obj);
          //debugger;    

          let Component = ParentComponent;

          if (ComponentTypes[property] !== undefined) {

            const InnerComponent =...