noflo / noflo-component-loader

NoFlo Component Loader generator for WebPack and other module bundlers
3 stars 2 forks source link

How to use #240

Open linonetwo opened 12 months ago

linonetwo commented 12 months ago

Add these to webpack rules, install noflo-component-loader coffee-loader fbp-loader

{
    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'],
  },

This shows how this loader use fbp-manifest package, don't forget the recursive: true, otherwise you will get nothing.

// try.mjs
import fbpManifest from 'fbp-manifest';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);

const baseDir = path.resolve(__dirname, '../');

const components = await fbpManifest.load.load(baseDir, {
  runtimes: ['noflo'],
  discover: true,
  recursive: true,
});
// DEBUG: console components
console.log(`components`, components.modules[3]);
linonetwo commented 12 months ago

See commit above ↑ all installed noflo packages will be detected by fbp-manifest, and packaged to noflo/lib/loader/register as test: /noflo(\\+|\/)lib(\\+|\/)loader(\\+|\/)register.js$/, matched.

You can use packaged std lib by

import { ComponentLoader } from 'noflo';

const loader = new ComponentLoader('');
const componentList = await loader.listComponents();

or

import components from 'noflo/lib/loader/register';
console.log(`components`, components.getSource(loader, 'flow/All', console.log));

图片