From 348d588de6056cafd0918eef05010270c8780064 Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Tue, 17 Dec 2019 17:39:25 +0100 Subject: [PATCH] @atomic-layout/emotion: Adds "cjs" build --- .circleci/config.yml | 19 ++++++++ .../atomic-layout-emotion/babel.config.js | 9 +++- packages/atomic-layout-emotion/package.json | 17 +++++--- .../atomic-layout-emotion/rollup.config.js | 43 +++++++++++++++++-- .../src/components/Visible.tsx | 2 +- packages/atomic-layout/package.json | 1 + packages/atomic-layout/rollup.config.js | 31 ++++++------- 7 files changed, 94 insertions(+), 28 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index c740d5f5..084655f0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -202,6 +202,21 @@ jobs: ## # Emotion ## + emotion-build-cjs: + <<: *node-env + steps: + - attach_workspace: *workspace + - restore_cache: *yarn-cache + - run: + name: Building CJS module (emotion) + command: yarn build:cjs + working_directory: packages/atomic-layout-emotion + - run: + name: Chechking CJS bundle size + command: yarn bundlesize:cjs + working_directory: packages/atomic-layout-emotion + - persist_to_workspace: *persist-build + emotion-build-umd: <<: *node-env steps: @@ -258,6 +273,10 @@ workflows: - styled-build-esm # emotion + - emotion-build-cjs: + requires: + - bootstrap + - emotion-build-umd: requires: - bootstrap diff --git a/packages/atomic-layout-emotion/babel.config.js b/packages/atomic-layout-emotion/babel.config.js index 259b7687..6e772a01 100644 --- a/packages/atomic-layout-emotion/babel.config.js +++ b/packages/atomic-layout-emotion/babel.config.js @@ -1,7 +1,14 @@ const path = require('path') +const rootConfigPath = path.resolve(__dirname, '../..', 'babel.config.js') + +console.log( + '@atomic-layout/emotion: loading babel config at "%s"', + rootConfigPath, +) + module.exports = { // Resolve the path otherwise it gets resolved relatively // to Storybook main entry module during the Storybook build. - extends: path.resolve(__dirname, '../..', 'babel.config.js'), + extends: rootConfigPath, } diff --git a/packages/atomic-layout-emotion/package.json b/packages/atomic-layout-emotion/package.json index 29e320fe..2a41fea1 100644 --- a/packages/atomic-layout-emotion/package.json +++ b/packages/atomic-layout-emotion/package.json @@ -10,14 +10,20 @@ "start": "rollup -c -w", "storybook": "cross-env PACKAGE=packages/atomic-layout-emotion MODULE_TYPE=umd start-storybook -p 6020 -c ../../.storybook", "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'", + "build:cjs": "rollup -c --environment NODE_ENV:production,TARGET:cjs", "build:umd": "rollup -c --environment NODE_ENV:production,TARGET:umd", "build:storybook:umd": "cross-env PACKAGE=packages/atomic-layout-emotion MODULE_TYPE=umd build-storybook -c ../../.storybook", "bundlesize": "bundlesize", + "bundlesize:cjs": "bundlesize -f lib/cjs/index.js", "bundlesize:umd": "bundlesize -f lib/umd/index.js", "cypress": "(cd ../../ && cypress open --env envName=dev)", "test:e2e": "(cd ../../ && cypress run --spec ./examples/all.test.js --browser chrome --env envName=ci,package=packages/atomic-layout-emotion)" }, "bundlesize": [ + { + "path": "lib/cjs/index.js", + "maxSize": "10 kB" + }, { "path": "lib/umd/index.js", "maxSize": "10 kB" @@ -31,8 +37,13 @@ "dependencies": { "@atomic-layout/core": "^0.11.0" }, + "devDependencies": { + "@emotion/core": "10.0.22", + "@emotion/styled": "10.0.23" + }, "files": [ "lib", + "LICENSE", "README.md" ], "author": { @@ -58,9 +69,5 @@ "css grid", "react", "emotion" - ], - "devDependencies": { - "@emotion/core": "10.0.22", - "@emotion/styled": "10.0.23" - } + ] } diff --git a/packages/atomic-layout-emotion/rollup.config.js b/packages/atomic-layout-emotion/rollup.config.js index fd276703..81f960c4 100644 --- a/packages/atomic-layout-emotion/rollup.config.js +++ b/packages/atomic-layout-emotion/rollup.config.js @@ -7,12 +7,13 @@ import { getEnv, babel, resolve, + external, typescript, warnOnMissingDependency, } from '../atomic-layout/rollup.config' import packageJson from './package.json' -const { nodeEnv, PRODUCTION, TARGET } = getEnv(process.env) +const { nodeEnv, TARGET, PRODUCTION } = getEnv(process.env) const BUILD_DIR = '.' const getPath = (filepath) => { @@ -21,6 +22,35 @@ const getPath = (filepath) => { const input = packageJson.esnext +const buildCjs = { + input, + external, + output: { + file: getPath(packageJson.main), + format: 'cjs', + exports: 'named', + sourcemap: PRODUCTION, + }, + plugins: [ + resolve(), + typescript(), + replace({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv), + }), + PRODUCTION && sourceMaps(), + PRODUCTION && + terser({ + ecma: 5, + sourcemap: true, + output: { + comments: false, + }, + warnings: true, + toplevel: true, + }), + ], +} + const buildUmd = { input, external: Object.keys(packageJson.peerDependencies), @@ -32,7 +62,9 @@ const buildUmd = { sourcemap: PRODUCTION, globals: { react: 'React', - /** @TODO add emotion */ + /** + * @TODO add "@emotion/core" and "@emotion/styled" as globals. + */ }, }, plugins: [ @@ -62,8 +94,11 @@ const buildUmd = { onwarn: warnOnMissingDependency, } -const targets = { +const buildTargets = { + cjs: buildCjs, umd: buildUmd, } -module.exports = TARGET ? targets[TARGET] : Object.values(targets) +console.log('@atomic-layout/emotion: building "%s" module type', TARGET) + +export default TARGET ? buildTargets[TARGET] : Object.values(buildTargets) diff --git a/packages/atomic-layout-emotion/src/components/Visible.tsx b/packages/atomic-layout-emotion/src/components/Visible.tsx index 88f50628..af39707a 100644 --- a/packages/atomic-layout-emotion/src/components/Visible.tsx +++ b/packages/atomic-layout-emotion/src/components/Visible.tsx @@ -6,7 +6,7 @@ import { mergeAreaRecords, } from '@atomic-layout/core' import Box from './Box' -import { useMediaQuery } from '../index' +import { useMediaQuery } from '../' import { OnlyProps, resolveBreakpoint, diff --git a/packages/atomic-layout/package.json b/packages/atomic-layout/package.json index 11d51330..33ea5478 100644 --- a/packages/atomic-layout/package.json +++ b/packages/atomic-layout/package.json @@ -84,6 +84,7 @@ }, "files": [ "lib", + "LICENSE", "README.md" ], "author": { diff --git a/packages/atomic-layout/rollup.config.js b/packages/atomic-layout/rollup.config.js index 44665e01..2d847c44 100644 --- a/packages/atomic-layout/rollup.config.js +++ b/packages/atomic-layout/rollup.config.js @@ -18,18 +18,18 @@ const getPath = (filepath) => { return path.resolve(BUILD_DIR, filepath) } -const { TARGET: target } = process.env const input = packageJson.esnext export const getEnv = (env) => { - const { NODE_ENV: nodeEnv } = env + const { NODE_ENV: nodeEnv = 'development', TARGET } = env return { nodeEnv, + TARGET, PRODUCTION: nodeEnv === 'production', } } -const { nodeEnv, PRODUCTION } = getEnv(process.env) +const { nodeEnv, TARGET, PRODUCTION } = getEnv(process.env) export const external = (moduleName) => { return !moduleName.startsWith('.') && !path.isAbsolute(moduleName) @@ -83,8 +83,7 @@ export const warnOnMissingDependency = (message) => { } } -// CommonJS module -const buildCjs = () => ({ +const buildCjs = { input, external, output: { @@ -111,12 +110,11 @@ const buildCjs = () => ({ toplevel: true, }), ], -}) +} -// UMD module -const buildUmd = () => ({ +const buildUmd = { input, - external: ['react', 'styled-components'], + external: Object.keys(packageJson.peerDependencies), output: { name: 'AtomicLayout', format: 'umd', @@ -148,10 +146,9 @@ const buildUmd = () => ({ }), ], onwarn: warnOnMissingDependency, -}) +} -// ECMAScript module -const buildEsm = () => ({ +const buildEsm = { input, external, output: { @@ -167,12 +164,12 @@ const buildEsm = () => ({ babel(), PRODUCTION && sourceMaps(), ], -}) +} const buildTargets = { - cjs: buildCjs(), - umd: buildUmd(), - esm: buildEsm(), + cjs: buildCjs, + umd: buildUmd, + esm: buildEsm, } -export default target ? buildTargets[target] : Object.values(buildTargets) +export default TARGET ? buildTargets[TARGET] : Object.values(buildTargets)