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({