How do DECSYS Components work?

This is fairly in-depth detail on how both Components are structured and how the boilerplate works. You could use this information to build Components without the boilerplate. It is not essential reading.

DECSYS Components are just React Components + metadata. There are two important things about preparing a component for loading into the DECSYS Survey Platform:

1. The Component Module must provide the correct exports
2. The module must be bundled correctly into a single self contained file for the Survey Platform to dynamically load

1. Metadata and Exports

The Component entrypoint must export:

• a React Component as a default export, e.g. export default Component
• name: The name of the Component, e.g. Component

The React Component must also feature the following metadata properties:

• propTypes and defaultProps as usual React Prop Types
• icon: An SVG icon for the component (e.g. a component from styled-icons) which will be rendered at 1em to represent the component type
• params if there are any props that should be "configurable parameters" in the Survey Platform UI.

In this boilerplate we use the bundling process to provide the correct exports in the final bundle, so the source entrypoint (src/index.js) doesn't export exactly as above.

2. Bundling

This boilerplate contains the appropriate dependencies and configuration for bundling a DECSYS Component correctly.

Make sure:

• The React component has the required metadata properties noted above.
• package.json contains necessary information:
  • componentName will be used both as the Component's name (used by React and exported from the module) and the bundle filename.

For more detail on the bundling requirements and how this repo meets them, read on.

Requirements

The bundle process needs to obey the following rules:

• Transpile JSX and modern features to run in DECSYS supported browsers
  • leave ES Modules intact
• Treat the following npm packages as globals (as the Survey Platform provides a single instance of them for component use):
  • React
  • ReactDOM
  • Styled Components
  • PropTypes
• Bundle into a single file including npm dependencies (except the globals)
• The final file must export as per the rules in 1. Exports above

How this boilerplate does it

• Rollup runs the source through Babel, leaving ES Modules intact
• Rollup walks the ESM dependencies, including npm packages
  • Rollup tree shakes wherever it can :)
• Rollup replaces the appropriate globals
• Rollup produces an IIFE bundle in a single file.
• Rollup adds a footer after the IIFE declaration which performs the exports expected by the Survey Platform.