noflo functions not available in react browser app

[Santosh Kumar]

I have a browser based react application where I intend to use noflo. To start with I want to create the FBP graph programatically. But I believe that noflo is not getting loaded properly. 

console.log(noflo.graph) is undefined.

My steps:

1. npm install --save noflo
   
   
2. npm install --save noflo-core
   
   
3. npm install --save-dev noflo-component-loader
   
   
4. configure webpack (I am developing on windows) 
   
   
5. In my react component which is test.js I have following code:

import React, {Component} from 'react';

import noflo from 'noflo';

console.log(noflo.graph);

My webpack config is as follows:

{

test: /noflo[\\]+|\/lib[\\]+|\/loader[\\]+|\/register.js$/,

use: [

{

loader: 'noflo-component-loader',

options: {

graph: null,

debug: false,

}

}

]

}

I will appreciate any help on this. 

Kind Regards,

Santosh.

[Henri Bergius]

Hi,

On Wed 8. Nov 2017 at 14:29, Santosh Kumar <lsantos...@gmail.com> wrote:

I have a browser based react application where I intend to use noflo. To start with I want to create the FBP graph programatically. But I believe that noflo is not getting loaded properly. 

console.log(noflo.graph) is undefined.

I have to admit I haven't tried NoFlo with ES6 module imports, since we're still shipping it as a CommonJS module (ES6 modules are not yet loadable on Node.js). So that might be an issue.

The other potential reason would be that NoFlo 1.0 is shipping as ES6 code, so depending where you're running your code, you may have to babelize it down to ES5 to make it loadable on older browsers (and PhantomJS).

See for example:

https://github.com/noflo/noflo-ui/blob/master/webpack.config.js#L41

See more background in:

http://bergie.iki.fi/blog/noflo-10-prep/

Santosh.

/Henri

[Santosh Kumar]

Hi,

I changed the code to following:

var noflo = require('noflo');

console.log(noflo.graph);

It is still undefined.

Following is the babelized webapck.config.js:

const path = require('path');

const config = {

entry: './src/app.js',

output: {

path: path.resolve(__dirname,'dist'),

filename: 'bundle.js',

publicPath: '/dist'

},

module: {

rules: [

{

test: /\.coffee$/,

use: ['coffee-loader'],

},

{

test: /\.fbp$/,

use: ['fbp-loader'],

},

{

test: /\.js$/,

use: ['babel-loader']

},

{

test: /\.css$/,

use: [

{ loader: 'style-loader'},

{ loader: 'css-loader',

options: {

modules: true

}

}

]

},

{

test: /noflo[\\]+|\/lib[\\]+|\/loader[\\]+|\/register.js$/,

use: [

{

loader: 'noflo-component-loader',

options: {

graph: null,

debug: false,

}

}

]

},

{

test: /noflo([\\]+|\/)lib([\\]+|\/)(.*)\.js$|noflo([\\]+|\/)components([\\]+|\/)(.*)\.js$|fbp-graph([\\]+|\/)lib([\\]+|\/)(.*)\.js$|noflo-runtime-([a-z]+)([\\]+|\/)(.*).js$/,

use: [

{

loader: 'babel-loader',

options: {

presets: ['es2015'],

}

}

]

},

]

},

node: {

fs: 'empty'

},

};

module.exports = config;

Thanks,

Santosh

--
You received this message because you are subscribed to a topic in the Google Groups "Flow Based Programming" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/flow-based-programming/H-nqDL1V548/unsubscribe.
To unsubscribe from this group and all its topics, send an email to flow-based-programming+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Santosh Kumar]

Thanks Henry, 

Now it is working. It needed following addition to the webpack.config.js:

options: {
	graph: null,
	debug: false,

	manifest: {
	runtimes: ['noflo'],
	discover: true,
	recursive: true,
	},
	runtimes: [
	'noflo',
	'noflo-browser'
	],
	}

To unsubscribe from this group and all its topics, send an email to flow-based-programming+unsubscri...@googlegroups.com.

[Santosh Kumar]

It works with ES6 module imports. I will take risk and go ahead with ES6 and if there is any issue will post the bugs. Thanks again.

Santosh.

[ern0]

(We've created a dataflow system blah blah) which have a type called Trigger - it has no data content, only triggers operation. Also, any other data type can be Trigger.

--
You received this message because you are subscribed to the Google Groups "Flow Based Programming" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flow-based-programming+unsub...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

ern0
dataflow evangelist

[Henri Bergius]

Hi,

On Wed, 8 Nov 2017, 19:04 ern0, <er...@linkbroker.hu> wrote:

(We've created a dataflow system blah blah) which have a type called Trigger - it has no data content, only triggers operation. Also, any other data type can be Trigger.

That's exactly what bang is for in NoFlo. The IP sent to a bang port can contain any data, but the receiving component will react only to receiving the packet, ignoring its payload.

I think the concept came from PureData.

/Henri

[ern0]

We've figured it out ourselves. We enjoyed lot to discover such basic concepts, it was like we were discovered the concept if "loop" or "variable" when learning tradidional programming.

Anyway, there's an "any" type for ports, when the component also does not take care of the type or the content of the package, but passes it or not. Traffic components use this.

/Henri

--

You received this message because you are subscribed to the Google Groups "Flow Based Programming" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flow-based-programming+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

ern0
dataflow evangelist