feat: package noflo stdlib and show componentList

noflo/noflo-component-loader#240

package.json

@@ -143,6 +143,7 @@
  "beautiful-react-hooks": "4.3.0",
  "chai": "4.3.7",
  "circular-dependency-plugin": "5.2.2",
+ "coffee-loader": "^4.0.0",
  "copy-webpack-plugin": "11.0.0",
  "cross-env": "7.0.3",
  "csp-html-webpack-plugin": "5.1.0",
@@ -156,13 +157,17 @@
  "eslint-config-tidgi": "1.1.2",
  "event-hooks-webpack-plugin": "2.3.0",
  "fbp-graph": "^0.7.0",
+ "fbp-loader": "^0.1.2",
+ "fbp-manifest": "^0.3.1",
  "font-awesome": "^4.7.0",
  "fork-ts-checker-webpack-plugin": "8.0.0",
  "glob": "^10.3.2",
  "graphql-hooks": "6.2.3",
  "json5": "^2.2.3",
  "node-loader": "2.0.0",
  "node-polyfill-webpack-plugin": "^2.0.1",
+ "noflo": "^1.4.3",
+ "noflo-component-loader": "^0.4.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-helmet": "6.1.0",

src/pages/Workflow/GraphEditor.tsx

@@ -1,5 +1,7 @@
 import { sidebarWidth } from '@/constants/style';
 import type { Graph } from 'fbp-graph';
+import { ComponentLoader } from 'noflo';
+import components from 'noflo/lib/loader/register';
 import styled from 'styled-components';
 import TheGraph from 'the-graph';
 import type { IFBPLibrary, ITheGraphProps } from 'the-graph';
@@ -123,6 +125,17 @@ export function GraphEditor(props: Partial<ITheGraphProps> & IGraphEditorProps)
  buildInitialLibrary(graph);
  }, [buildInitialLibrary]);
 
+ useEffect(() => {
+ void (async function IIFE() {
+ const loader = new ComponentLoader('');
+ const componentList = await loader.listComponents();
+ // DEBUG: console componentList
+ // DEBUG: console components
+ console.log(`components`, components.getSource(loader, 'BaseName', console.log));
+ console.log(`componentList`, componentList);
+ })();
+ }, []);
+
  // Attach nav
  function fitGraphInView() {
  // editor.triggerFit();

webpack.plugins.js

@@ -59,6 +59,8 @@ exports.main = _.compact([
 exports.renderer = _.compact([
  new webpack.DefinePlugin({
  'process.env.NODE_ENV': `"${process.env.NODE_ENV ?? 'production'}"`,
+ // some noflo modules use process.env.NODE_DEBUG
+ 'process.env.NODE_DEBUG': 'false',
  // global: {},
  }),
  // new CspHtmlWebpackPlugin(

webpack.renderer.config.js

@@ -15,7 +15,7 @@ module.exports = {
  resolve: {
  alias: webpackAlias,
  extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
- fallback: { crypto: false, fs: false },
+ fallback: { crypto: false, fs: false, process: false },
  },
  output: {
  chunkFilename: 'main_window/[name].chunk.js',

webpack.rules.js

@@ -120,4 +120,40 @@ module.exports = [
  filename: 'images/[name].[ext]',
  },
  },
+ {
+ test: /noflo(\\+|\/)lib(\\+|\/)loader(\\+|\/)register.js$/,
+ use: [
+ {
+ loader: 'noflo-component-loader',
+ options: {
+ // Only include components used by this graph
+ // Set to NULL if you want all installed components
+ graph: null,
+ // Whether to include the original component sources
+ // in the build
+ debug: true,
+ baseDir: __dirname,
+ manifest: {
+ runtimes: ['noflo'],
+ discover: true,
+ recursive: true,
+ },
+ runtimes: [
+ 'noflo',
+ 'noflo-browser',
+ ],
+ },
+ },
+ ],
+ },
+ {
+ test: /\.coffee$/,
+ // load noflo-interaction standard lib, which provide some component in this format
+ use: ['coffee-loader'],
+ },
+ {
+ test: /\.fbp$/,
+ // load noflo-strings standard lib, which provide some component in this format
+ use: ['fbp-loader'],
+ },
 ];