@macaron-app/register-external-components

Register external components for Macaron

This package is used to register external components for Macaron in external component render scripts.

Install

$ npm install -g @macaron-app/register-external-components

Use

import { registerExternalComponents } from "@macaron-app/register-external-components";

registerExternalComponents([
  {
    // Exported .macaron.js files will include `import {CustomButton} from "./path/to/CustomButton";`

    // The import path of the component (relative to the **bundled** render scirpt file)
    importPath: "./path/to/CustomButton",
    // The import name of the component (if not specified, default import is used)
    importName: "CustomButton",

    // The props of the component
    props: {
      children: {
        type: "string",
      },
      type: {
        values: ["primary", "secondary"],
      },
      disabled: {
        type: "boolean",
      },
    },

    // Renders the component
    render: ({ container, props, width, height }) =>
      new Promise((res) => {
        ReactDOM.render(
          <CustomButton
            {...props}
            style={{
              width: width && `${width}px`,
              height: height && `${height}px`,
            }}
          />,
          container,
          // Asynchronously returns the cleanup function
          () => res(() => ReactDOM.unmountComponentAtNode(container))
        );
      }),
  },
]);