TrapiLib/App.js

import React , { useState } from 'react';
import { StyleSheet, Text, View as Div, TextInput, Button } from 'react-native';
import RoutingSystem from './lib/systems/RoutingSystem.js';
import ViewSystem, { View, Node, ViewNode, RowNode, ColNode } from './lib/systems/ViewSystem.js';
import CoreSystem from './lib/systems/CoreSystem.js';

/*********** Custom View Tree ****/
import { Tree } from './lib/helpers/tree';

import FormComp from './modules/Form';

import  TextComp  from './modules/Text';
import RootComp from './modules/RootComp';
import ImageComp from './modules/Image';
import ButtonComp from './modules/Button';
import Environment from './environment';
import * as Font from 'expo-font';
import Module from './modules';
console.log("@@@@@@@@@@@@@@")
console.log(Module)

const CustomStyle = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'red'
  },
  text:{
    color:'blue'
  }
})

const RootStyle = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'blue'
  },
  text:{
    color:'black'
  }
})
let RootNode = new ViewNode("A","RootComp",{text:"This is the   asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdaasdasd asd  asdasd asd asd  dasasdasd asd  adsasd asd asd  asdasd asd asd asd asd asd asd asd asd sda asdStarting point!!!Try add on me ",style:RootStyle});

let TestNode = new ViewNode("H","Text",{style:CustomStyle,text:"Edited  Text Node Will be here"})

let ImageNode = new ViewNode("asdasd","Image");

// let Row1 = new RowNode("RootRow");
// let Col11 = new ColNode("Col11");
// let Col12 = new ColNode("Col12");
// let Row2 = new RowNode("RootRow2");
// let Col21 = new ColNode("Col21");
// let Col22 = new ColNode("Col22");
// Col21.content = RootNode;
// Col12.content = TestNode;

let nodeA = new Node("A", {justifyContent: 'flex-end', stretchContainer: true, selected: true});
let nodeB = new Node("B", {justifyContent: 'flex-end' , selected: true}, ImageNode);
let nodeC = new Node("C", {alignSelf: 'flex-end' , selected: true}, ImageNode);
let nodeD = new Node("D");
let nodeE = new Node("E", {alignSelf: 'flex-end' , selected: true}, ImageNode);

let VS = new View();
let root = VS.defaultContainer;

VS
.addViewNode(nodeA, root)
.addViewNode(nodeB, nodeA)
.addViewNode(nodeC, nodeA)
.addViewNode(nodeD, nodeA);
let datata = VS.export();

let VS2 = new View();
VS2
.addViewNode(nodeE, VS2.defaultContainer)
.import(datata, nodeE.id);

// let rowss = VS.setRows(root, 1)[0];
// VS.setColumns(rowss, 2);
// root.props.selected = true;


// let cols = VS.getChildren(rowss);
// VS.setRows(cols[0], 3);
// VS.setRows(cols[1], 2);
// VS.setRows(cols[2], 2);
// cols.forEach((col) => col.props.selected = true);

// cols.forEach((col) => VS.getRows(col).forEach((r) => {VS.setColumns(r,1);r.props.selected = true}));
// cols.forEach((col) => VS.getRows(col).forEach((r) => VS.getColumns(r).forEach((c) => c.props.selected = true)));

// let ee = VS.getRows(cols[1]);
// VS.setColumns(ee[0], 1);
// let cc = VS.getColumns(ee[0]);
// cc[0].content = ImageNode;

// cols[0].content = RootNode;
// cols[1].content = RootNode;
// cols[2].content = ImageNode;
// console.log("ASDASDASDA -> ", cols);
// VS.addViewNode(Row1);
// VS.addViewNode(Col11,Row1);
// VS.addViewNode(Col12,Row1);
// VS.addViewNode(Row2,Col11);
// VS.addViewNode(Col21,Row2);
// VS.addViewNode(Col22,Row2);
// VS.addViewNode(RootNode);
/*VS.addViewNode(NodeB,RootNode)
VS.addViewNode(NodeE,RootNode)
VS.addViewNode(NodeD,NodeB)
VS.addViewNode(NodeK,NodeB)


console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@")
console.log(VS)

//VS.replace(NodeB,TestNode)
VS.replace(NodeK,EditNode)
*/

//***************//


/*********************** Custom View tree Ends ************/

//**************************************  Routing Ends

let CS = new CoreSystem()
// .addPage('test', VS2, 'VS1')
// .setHome('test');
CS.import(Environment);

// let data = CS.export();
// console.log("Original");
// console.log(data);
// let js = JSON.stringify(data);
// console.log("String");
// console.log(js);
// let NCS = new CoreSystem()
// let againdata = JSON.parse(js);
// console.log("Again");
// console.log(againdata)
// NCS.import(againdata);

// window.onclick = (event) => {
//   console.log("Mouse event --- ", event);

//   let res = NCS.ray({event}); // returns ViewNode
//   console.log(res);
// }


const useForceUpdate = (text) => useState(text)[1];
export default class App extends React.Component {
  constructor(){
      super()

  }

  /*let [text, setText] = useState('');
  let forceUpdate = useForceUpdate(text);
  */
  componentDidMount() {
    Font.loadAsync({
      'black': require('./assets/fonts/SFCompactDisplay-Black_0.otf'),
      'bold': require('./assets/fonts/SFCompactDisplay-Bold_0.otf'),
      'heavy': require('./assets/fonts/SFCompactDisplay-Heavy_0.otf'),
      'light': require('./assets/fonts/SFCompactDisplay-Light_0.otf'),
      'medium': require('./assets/fonts/SFCompactDisplay-Medium_0.otf'),
      'regular': require('./assets/fonts/SFCompactDisplay-Regular_0.otf'),
      'semibold': require('./assets/fonts/SFCompactDisplay-Semibold_0.otf'),
      'thin': require('./assets/fonts/SFCompactDisplay-Thin_0.otf'),
      'ultralight': require('./assets/fonts/SFCompactDisplay-Ultralight_0.otf')

    });
  }
  render(){
  let currentView2 = CS.render();  
  return (
    <Div>
      <Div>{CS.ModuleSystem.createElementCtor(ButtonComp)}</Div>
      <Div>{currentView2}</Div>
    </Div>)
    }
  }


const ImageStyle = StyleSheet.create({
  ImageCont:{
    width:250,
    height:250
  }
})



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});