feat: build unbundled libraries, validate package when building (LIBS…

…-125) (#492)


Improves treeshaking of platform library builds

Offers to automatically update package.json for library builds, see [the documentation for more information](https://platform.dhis2.nu/#/troubleshooting?id=upgrading-to-v56-for-libraries-only-correcting-packagejson-export-declarations)

adapter/package.json

@@ -11,8 +11,12 @@
  "publishConfig": {
  "access": "public"
  },
- "main": "build/cjs/lib.js",
- "module": "build/es/lib.js",
+ "main": "./build/cjs/index.js",
+ "module": "./build/es/index.js",
+ "exports": {
+ "import": "./build/es/index.js",
+ "require": "./build/cjs/index.js"
+ },
  "files": [
  "build"
  ],
@@ -22,7 +26,9 @@
  "devDependencies": {
  "@dhis2/cli-app-scripts": "5.5.3",
  "enzyme": "^3.11.0",
- "enzyme-adapter-react-16": "^1.15.5"
+ "enzyme-adapter-react-16": "^1.15.5",
+ "react": "^16.8",
+ "react-dom": "^16.8"
  },
  "scripts": {
  "build": "d2-app-scripts build",

cli/config/jest.transform.js

@@ -1,2 +1,4 @@
-const babelConfig = require('./babel.config')
-module.exports = require('babel-jest').createTransformer(babelConfig)
+const makeBabelConfig = require('./makeBabelConfig.js')
+module.exports = require('babel-jest').createTransformer(
+ makeBabelConfig({ mode: 'test' })
+)

cli/config/makeBabelConfig.js

@@ -0,0 +1,74 @@
+const browserTargets = require('./.browserlistrc')
+const jestTargets = { node: 'current' }
+
+const getBabelModuleType = moduleType => {
+ switch (moduleType) {
+ case 'cjs':
+ case 'commonjs':
+ return 'commonjs'
+ case 'systemjs':
+ case 'umd':
+ case 'amd':
+ return moduleType
+ case 'es':
+ default:
+ return false
+ }
+}
+const makeBabelConfig = ({ moduleType, mode }) => {
+ const isTest = mode === 'test'
+
+ return {
+ presets: [
+ require('@babel/preset-react'),
+ require('@babel/preset-typescript'),
+ [
+ require('@babel/preset-env'),
+ {
+ modules: isTest
+ ? 'commonjs'
+ : getBabelModuleType(moduleType),
+ targets: isTest ? jestTargets : browserTargets,
+ },
+ ],
+ ],
+ plugins: [
+ // Adds syntax support for import()
+ require('@babel/plugin-syntax-dynamic-import').default,
+
+ /*
+ * These plugins actually transform code
+ */
+
+ // Automatically include a React import when JSX is present
+ require('babel-plugin-react-require'),
+
+ // Adds support for arrow-function class properties
+ // class { handleClick = () => { } }
+ require('@babel/plugin-proposal-class-properties'),
+
+ // Adds syntax support for optional chaining (?.)
+ require('@babel/plugin-proposal-optional-chaining'),
+
+ // Adds support for default value using ?? operator
+ require('@babel/plugin-proposal-nullish-coalescing-operator'),
+ ],
+ env: {
+ production: {
+ plugins: [
+ [require('styled-jsx/babel'), { optimizeForSpeed: true }],
+ ],
+ },
+ development: {
+ plugins: [
+ [require('styled-jsx/babel'), { optimizeForSpeed: true }],
+ ],
+ },
+ test: {
+ plugins: [require('styled-jsx/babel-test')],
+ },
+ },
+ }
+}
+
+module.exports = makeBabelConfig

cli/package.json

@@ -25,15 +25,11 @@
  "@babel/plugin-proposal-class-properties": "^7.8.3",
  "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
  "@babel/plugin-proposal-optional-chaining": "^7.8.3",
- "@babel/plugin-syntax-class-properties": "^7.8.3",
- "@babel/plugin-syntax-dynamic-import": "^7.8.3",
- "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
- "@babel/plugin-syntax-optional-chaining": "^7.8.3",
  "@babel/preset-env": "^7.9.0",
  "@babel/preset-react": "^7.0.0",
  "@babel/preset-typescript": "^7.6.0",
  "@dhis2/app-shell": "5.5.3",
- "@dhis2/cli-helpers-engine": "^1.5.0",
+ "@dhis2/cli-helpers-engine": "^2.1.1",
  "archiver": "^3.1.1",
  "axios": "^0.20.0",
  "babel-jest": "^24.9.0",
@@ -53,14 +49,6 @@
  "lodash": "^4.17.11",
  "parse-author": "^2.0.0",
  "parse-gitignore": "^1.0.1",
- "rollup": "^1.21.4",
- "rollup-plugin-babel": "^4.3.2",
- "rollup-plugin-commonjs": "^10.1.0",
- "rollup-plugin-json": "^4.0.0",
- "rollup-plugin-node-resolve": "^5.0.1",
- "rollup-plugin-postcss": "^2.0.3",
- "rollup-plugin-replace": "^2.2.0",
- "rollup-plugin-visualizer": "^3.2.2",
  "styled-jsx": "<3.3.3"
  },
  "bin": {

cli/src/commands/build.js

@@ -10,6 +10,7 @@ const loadEnvFiles = require('../lib/loadEnvFiles')
 const parseConfig = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makeShell = require('../lib/shell')
+const { validatePackage } = require('../lib/validatePackage')
 
 const buildModes = ['development', 'production']
 
@@ -51,6 +52,7 @@ const handler = async ({
  watch,
  standalone,
  shell: shellSource,
+ verify,
  force,
 }) => {
  const paths = makePaths(cwd)
@@ -72,6 +74,20 @@ const handler = async ({
 
  await exitOnCatch(
  async () => {
+ if (
+ !(await validatePackage({
+ config,
+ paths,
+ offerFix: !process.env.CI,
+ noVerify: !verify,
+ }))
+ ) {
+ reporter.error(
+ 'Failed to validate package, use --no-verify to skip these checks'
+ )
+ process.exit(1)
+ }
+
  reporter.info('Generating internationalization strings...')
  await i18n.extract({ input: paths.src, output: paths.i18nStrings })
  await i18n.generate({
@@ -88,16 +104,33 @@ const handler = async ({
  reporter.info(
  `Building ${config.type} ${chalk.bold(config.name)}...`
  )
- await compile({
- config,
- paths,
- mode,
- watch,
- })
 
  if (config.type === 'app') {
+ await compile({
+ config,
+ paths,
+ mode,
+ watch,
+ })
  reporter.info('Building appShell...')
  await shell.build()
+ } else {
+ await Promise.all([
+ compile({
+ config,
+ paths,
+ moduleType: 'es',
+ mode,
+ watch,
+ }),
+ compile({
+ config,
+ paths,
+ moduleType: 'cjs',
+ mode,
+ watch,
+ }),
+ ])
  }
  },
  {
@@ -146,6 +179,11 @@ const command = {
  description: 'Build in development mode',
  conflicts: 'mode',
  },
+ verify: {
+ type: 'boolean',
+ description: 'Validate package before building',
+ default: true,
+ },
  watch: {
  type: 'boolean',
  description: 'Watch source files for changes',

cli/src/commands/start.js

@@ -7,6 +7,7 @@ const loadEnvFiles = require('../lib/loadEnvFiles')
 const parseConfig = require('../lib/parseConfig')
 const makePaths = require('../lib/paths')
 const makeShell = require('../lib/shell')
+const { validatePackage } = require('../lib/validatePackage')
 
 const defaultPort = 3000
 
@@ -35,6 +36,17 @@ const handler = async ({
 
  await exitOnCatch(
  async () => {
+ if (!(await validatePackage({ config, paths, offerFix: false }))) {
+ reporter.print(
+ 'Package validation issues are ignored when running "d2-app-scripts start"'
+ )
+ reporter.print(
+ `${chalk.bold(
+ 'HINT'
+ )}: Run "d2-app-scripts build" to automatically fix some of these issues`
+ )
+ }
+
  reporter.info('Generating internationalization strings...')
  await i18n.extract({ input: paths.src, output: paths.i18nStrings })
  await i18n.generate({