Test13t3gsd

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) => {  
  console.log('render Article', props);
  return (
    <div className="article-root">
      {props.children}
    </div>
  );
};

const TitleComponent = (props) => {  
	console.log('render TitleComponent', props);
  return (
    <span className="title">
      {props.children}
    </span>
  );
};


const EmphasisComponent = (props) => {
  console.log('render EmphasisComponent', props);
  return (
    <span className="bold">
      {props.children}
    </span>
  );
};

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

let counter = 0;
class App extends React.Component {

  componentWillMount() {

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

  parseDoc(doc) {

    try {
    
    	// NOTE: Article was <Article /> before. In this case I think this is what we want.
      const finalComponent = this.composeMaster(doc, Article, this.nodeAttributes(doc));
      return finalComponent;

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

  }

  nodeAttributes(obj) {
    console.log('getting node attr for ', 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) {
    console.log('\nrunning composeMaster, time: ' + (++counter) +  '\n')
    for (var property in obj) {
   ...