Using the-graph as a React component in a webpack environment

(Dev without much front-end experience here, sorry for any imprecision)

I read through the existing issues and saw there is the intention of stripping this project of noflo-specific dependencies and Polymer. But I have one question: as it is now, can the-graph be used as a React component in a Webpack/CommonJS modules environment at all?

I tried creating a simple project just to see if I could use one of the React components, but just rendering this:

import React from "react";
import TheGraph from "the-graph/dist/the-graph";

console.log(TheGraph);

const TestComponent = () => (
  <h1>Hello world!</h1>
);

export default TestComponent;

Causes an Uncaught ReferenceError: React is not defined here. Does this happen because you are still in the process of migrating the code base to use CommonJS modules? Or am I doing something wrong? If it’s the former reason, is there any hack I can do to make this work?

Thanks for your work until now on this project, these graphs surely look great!

[jonnor]

Here is an example App.js that works out-of-the-box with create-react-app:

import React, { Component } from 'react';

import './App.css';
import 'the-graph/themes/the-graph-dark.css';

import TheGraph from 'the-graph';
import fbpGraph from 'fbp-graph';

// Generate some graph contents programatically
function addNode(graph) {
  var id = Math.round(Math.random()*100000).toString(36);
  var component = Math.random() > 0.5 ? 'basic' : 'basic';
  var metadata = {
    label: component,
    x: Math.round(Math.random()*800),
    y: Math.round(Math.random()*600)
  };
  var newNode = graph.addNode(id, component, metadata);
  return newNode;
};
function addEdge(graph, outNodeID) {
  var nodes = graph.nodes;
  var len = nodes.length;
  if ( len<1 ) { return; }
  var node1 = outNodeID || nodes[Math.floor(Math.random()*len)].id;
  var node2 = nodes[Math.floor(Math.random()*len)].id;
  var port1 = 'out' + Math.floor(Math.random()*3);
  var port2 = 'in' + Math.floor(Math.random()*12);
  var meta = { route: Math.floor(Math.random()*10) };
  var newEdge = graph.addEdge(node1, port1, node2, port2, meta);
  return newEdge;
};
function populateGraph() {
    var graph = new fbpGraph.Graph();
    addNode(graph);
    addNode(graph);
    addNode(graph);
    addEdge(graph);
    return graph;
};

class App extends Component {
  render() {

    var componentLibrary = {
        basic: {
          name: 'basic',
          description: 'basic demo component',
          icon: 'eye',
          inports: [
            {'name': 'in0', 'type': 'all'},
            {'name': 'in1', 'type': 'all'},
            {'name': 'in2', 'type': 'all'}
          ],
          outports: [
            {'name': 'out', 'type': 'all'}
          ]
        },
    };

    var myGraph = populateGraph();

    return (
      <div className='the-graph-dark'>
        <TheGraph.App width={window.innerWidth} height={window.innerHeight} library={componentLibrary} graph={myGraph}/>
      </div>
    );
  }
}

export default App;

Closing this as fixed

[jonnor]

Screenshot of how above example should look:

The test app was actually using 16.2.0 (default in create-react-app). The very basics seems to work OK there, but React 15.6 will probably be the recommended/supported version for now. Compatibility fixes for React 16 that also works on 15.6 very welcomed!