Overview

Chart builder is developed using the react-scripts package as a stand alone "app".

This allows a rapid development and test cycle directly on chart builder itself.

It is designed to be usable as a library in third party projects that need a chart building element. It is published to NPM as the gss-cogs-chart-builder package for this purpose.

We have a volto extension called "volto-chart-builder" that uses the chart builder as a library.

Packaging

We use the webpack included with react-scripts to create the package.

There is a separate entry point for the packaged version in src/library.js, that only exposes the React components and extras needed to embed chart builder.

The webpack.library.config.js contains the webpack config used to produce the package.

Rapid Iteration with packaged chart-builder

volto-chart-builder extension uses mrs-developer to directly include chart-builder.

When doing this, chart-builder gets included as a yarn workspace, which means dependencies for chart-builder are included in volto-chart-builder (and in dd-cms, because we developed the extension inside that project). There is a webpack major version number conflict between react-scripts in chart-builder (v5) and dd-cms (v4).

To resolve this, we maintain a separate library branch that has the react-scripts dep removed, but which keeps having main merged into it.

We still use mrs-developer in dd-cms but have some custom webpack config so it "looks" like we are using an npm packaged version.

Testing in Volto

To test / review a branch of chart builder within dd-cms

• Replace the tag key in mrs.developer.json with a branch key and set the value with the branch name to test. e.g:

   "chart-builder": {
        "url": "https://github.com/GSS-Cogs/chart-builder/",
        "branch": "issue-55/series-formatting"
   }
  

• Run the command yarn develop in /dd-cms/volto. This will invoke mrs developer to sync the specified branch of chart builder into the volto/add-ons/chart-builder directory

• Delete the following dependencies from volto/src/addons/chart-builder/package.json

		"react-scripts": "^5.0.0",
		"webpack": "5",
		"webpack-cli": "^4.9.2",
		"copy-webpack-plugin": "^10.2.4"

​ The step above is required to prevent webpack installing incompatible dependencies into Volto.

• Run the solution using yarn start:dev

Releasing a new version to npm

Build and release a formal version of chart-builder:

cd chart-builder
VERSION=x.y.z yarn library
cd dist ; npm publish