Metadata Loader files

metadata.loader.js

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
module.exports = function(source) {
  // Parse to get the AST
  const ast = parser.parse(source, {
    sourceType: 'module',
    plugins: [
      'jsx',
      [
        'decorators',
        {
          decoratorsBeforeExport: false,
        },
      ],
    ],
  });
  // The current context is the loader and contains methods to emitError, emitFile etc.
  const loader = this;
  // Visit the AST, specifically the ClassDeclaration, which has the decorator
  traverse(ast, {
    ClassDeclaration: ({ node }) => {
      const name = node.id.name;
      const result = getMetadata(node.decorators || []);
      if (!result) return;
      const { decorator, args } = result;
      // Strip out the decorator from the AST
      node.decorators = node.decorators.filter(x => x !== decorator);
      if (node.decorators.length === 0) {
        delete node.decorators;
      }
      const options = {
        name,
        ...args,
        env: {
          context: loader.context,
        },
      };
      // Validate that the options are correctly specified, such the name, description, thumbnail.
      // Also checks that the thumbnail file actually exists
      if (!validateOptions(options, name, loader)) return;
      loader.emitFile(
        `${options.name}.component.json`,
        JSON.stringify(options, null, 4),
      );
    },
  });
  const { code } = generator(ast);
  return code;
};

sample.js

import React from 'react';
@Metadata({
  name: 'Sample',
  thumbnail: './sample.png',
  description: 'A Sample Component',
  properties: [
    { name: 'title', label: 'Title', type: 'string' },
    { name: 'message', label: 'Message', type: 'string' },
  ],
})
class SampleComponent extends React.Component {}

webpack.config.js

const path = require('path');
module.exports = {
  entry: './sample/index.js',
  output: {
    path: path.resolve('./build'),
    filename: 'sample.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          /* used last */ 'babel-loader',
          /* used first in chain*/ path.resolve('./lib/index.js'),
        ],
      },
    ],
  },
};