Skip to content

Commit

Permalink
build(scripts): add build script to ship the design system (#9)
Browse files Browse the repository at this point in the history
  • Loading branch information
kamleshchandnani authored Feb 4, 2020
1 parent d6d445d commit 122f21a
Show file tree
Hide file tree
Showing 4 changed files with 681 additions and 286 deletions.
4 changes: 2 additions & 2 deletions .babelrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = {
],
},
'web-development': {
presets: ['@babel/preset-env', '@babel/preset-react'],
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
plugins: [
[
'babel-plugin-styled-components',
Expand All @@ -40,7 +40,7 @@ module.exports = {
],
},
'web-production': {
presets: ['@babel/preset-env', '@babel/preset-react'],
presets: [['@babel/preset-env', { modules: false }], '@babel/preset-react'],
plugins: [
[
'babel-plugin-styled-components',
Expand Down
28 changes: 21 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,47 @@
"author": "kamleshchandnani",
"version": "0.0.1",
"license": "MIT",
"engines": {
"node": ">=10.18.0"
},
"dependencies": {
"@storybook/addon-knobs": "5.3.9",
"@testing-library/jest-dom": "4.2.4",
"@testing-library/react": "9.4.0",
"@testing-library/user-event": "7.1.2",
"prop-types": "15.7.2",
"react": "16.9.0",
"react-dom": "16.9.0",
"react-native": "0.61.5",
"styled-components": "5.0.0"
},
"devDependencies": {
"@babel/cli": "7.8.4",
"@babel/core": "7.8.3",
"@babel/preset-env": "7.8.3",
"@babel/preset-react": "7.8.3",
"@babel/runtime": "7.6.2",
"@react-native-community/eslint-config": "0.0.5",
"@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-json": "4.0.2",
"@rollup/plugin-node-resolve": "7.1.1",
"@storybook/addon-actions": "5.3.9",
"@storybook/addon-docs": "5.3.9",
"@storybook/addon-knobs": "5.3.9",
"@storybook/addon-links": "5.3.8",
"@storybook/addon-ondevice-knobs": "5.3.8",
"@storybook/addon-ondevice-notes": "5.3.8",
"@storybook/addon-storyshots": "5.3.8",
"@storybook/addons": "5.3.8",
"@storybook/react": "5.3.8",
"@storybook/react-native": "5.3.9",
"@storybook/react": "5.3.8",
"@storybook/theming": "5.3.9",
"@testing-library/jest-dom": "4.2.4",
"@testing-library/react-native": "5.0.3",
"@testing-library/react": "9.4.0",
"@testing-library/user-event": "7.1.2",
"babel-eslint": "10.0.3",
"babel-jest": "24.9.0",
"babel-loader": "8.0.6",
"babel-plugin-module-resolver": "4.0.0",
"babel-plugin-styled-components": "1.10.7",
"chalk": "3.0.0",
"cz-conventional-changelog": "3.1.0",
"eslint": "6.8.0",
"eslint-config-kentcdodds": "14.7.0",
Expand All @@ -48,22 +56,28 @@
"metro-react-native-babel-preset": "0.56.0",
"prettier": "1.19.1",
"react-test-renderer": "16.12.0",
"semantic-release": "17.0.1",
"rollup": "1.31.0",
"rollup-plugin-babel": "4.3.3",
"rollup-plugin-peer-deps-external": "2.2.2",
"semantic-release": "17.0.2",
"shelljs": "0.8.3",
"stylelint": "13.0.0",
"stylelint-config-recommended": "3.0.0",
"stylelint-config-styled-components": "0.1.1",
"stylelint-processor-styled-components": "1.9.0"
},
"peerDependencies": {
"react": "^16.9.0",
"prop-types": "^15.7.2",
"react-dom": "^16.9.0",
"react-native": "0.61.5",
"react": "^16.9.0",
"styled-components": "^4.3.2"
},
"scripts": {
"web": "npm run web:storybook",
"web:storybook": "BABEL_ENV=web-development start-storybook -c ./storybook/web -p 9009 -s public",
"web:storybook:build": "BABEL_ENV=web-production build-storybook -c ./storybook/web -o public",
"build": "node ./src/scripts/build.js",
"native:ios": "react-native run-ios",
"native:android": "react-native run-android",
"chromatic": "CHROMATIC_APP_CODE=gx0k8mh119 chromatic",
Expand Down
76 changes: 76 additions & 0 deletions src/scripts/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/* eslint-disable no-console */
const fs = require('fs');
const path = require('path');
const babel = require('rollup-plugin-babel');
const commonjs = require('@rollup/plugin-commonjs');
const external = require('rollup-plugin-peer-deps-external');
const nodeResolve = require('@rollup/plugin-node-resolve');
const json = require('@rollup/plugin-json');
const rollup = require('rollup');
const chalk = require('chalk');
const sh = require('shelljs');

const components = fs
.readdirSync('src')
.filter((srcSubDir) => ['atoms', 'molecules', 'tokens'].includes(srcSubDir))
.reduce(
(acc, dir) => [
...acc,
...fs.readdirSync(`src/${dir}`).map((filePath) => path.join(`src/${dir}`, filePath)),
],
[],
);

components.forEach(async (component) => {
const componentName = component.includes('tokens') ? 'theme' : component.split('/').pop();
const inputFileName = component.includes('tokens')
? 'src/tokens/index.js'
: `${component}/index.js`;

try {
//generate web bundle
const webBundle = await rollup.rollup({
input: inputFileName,
plugins: [
external(),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
externalHelpers: true,
envName: 'web-production',
}),
json(),
commonjs(),
nodeResolve({ extensions: ['.mjs', '.web.js', '.js', '.json', '.node'] }),
],
});
await webBundle.write({ file: `${componentName}/${componentName}.web.js`, format: 'esm' });
} catch (error) {
console.log(chalk.red(error));
}

// transpile react-native
sh.exec(
`BABEL_ENV=production npx babel ${component} --out-dir ${componentName} --ignore "**/*.test.js","**/*.stories.js","**/*.web.js","**/*.desktop.js","**/*.mobile.js","**/index.js"`,
);

//generate top level exports
const componentIndexFile = path.resolve(componentName, `index.js`);
const componentIndexFileContent = `export { default } from './${componentName}';\nexport * from './${componentName}';\n`;
fs.writeFile(componentIndexFile, componentIndexFileContent, (writeFileErr) => {
if (writeFileErr) throw writeFileErr;
console.log(chalk.green(`✅ generated exports for ${componentName}`));
});
});

//generate package.json
const packageJsonPath = path.resolve(process.env.PWD, 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
const newPackageJson = {
...packageJson,
files: components.map((component) =>
component.includes('tokens') ? 'theme/**/*' : `${component.split('/').pop()}/**/*`,
),
};
fs.writeFileSync(packageJsonPath, JSON.stringify(newPackageJson, null, 2));
console.log(chalk.green('✅ publish files created in package.json'));
Loading

0 comments on commit 122f21a

Please sign in to comment.