Skip to content

Commit

Permalink
Upgrade babel and do a module build (#336)
Browse files Browse the repository at this point in the history
* Upgrade babel and do a module build

* Make sure esm icon files have .svg so they can be resolved

* Upgrade jest

* Fix package.json module property

* Make svgr use camelCase

* Make sure svgr components go through babel

* Dont use style alias anymore

* use maxWorkers for jest in CI

* Do not check in dist
  • Loading branch information
nathanmarks authored Jun 19, 2019
1 parent b29f8d3 commit 60939a8
Show file tree
Hide file tree
Showing 29 changed files with 1,637 additions and 2,536 deletions.
4 changes: 0 additions & 4 deletions .babelrc

This file was deleted.

10 changes: 5 additions & 5 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ jobs:
# run tests!
- run:
name: Run tests
command: yarn test
- run:
command: yarn test:ci

- run:
name: Upload code coverage report
command: ./node_modules/.bin/codecov
- run:

- run:
name: Upload code coverage report - CoverAlls
command: ./node_modules/.bin/coveralls < ./coverage/lcov.info
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ pids
*.seed
*.pid.lock

# dist
dist

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

Expand Down
33 changes: 33 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Logs
*.log

src
scripts
lib
docs
test
.babelrc
.codeclimate.yml
.codecov.yml
.eslintrc.js
tsconfig.json
prettier.config.js
styleguide.config.js
webpack.config.js
webpack.release.config.js
yarn.lock

# Coverage directory used by tools like istanbul
coverage

# Dependency directories
node_modules

.DS_Store

# IDE
.idea
.vscode

# dev build folder
tmp
29 changes: 29 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
module.exports = api => {
const env = api.env()
const isTest = env === 'test'

return {
presets: [
[
'@babel/preset-env',
{
modules: isTest ? 'commonjs' : false,
loose: true,
},
],
'@babel/preset-react',
],
plugins: [
[
'@babel/plugin-proposal-decorators',
{
legacy: true,
},
],
['@babel/plugin-proposal-class-properties', { loose: true }],
['@babel/plugin-proposal-object-rest-spread', { loose: true }],
['@babel/transform-runtime', { useESModules: isTest ? false : true }],
'@babel/plugin-transform-react-constant-elements',
],
}
}
1 change: 0 additions & 1 deletion dist/snacks.js

This file was deleted.

70 changes: 0 additions & 70 deletions dist/sprite.svg

This file was deleted.

38 changes: 26 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@
"version": "0.0.125",
"description": "The Instacart Component Library for Web",
"main": "dist/snacks.js",
"module": "dist/esm/index.js",
"scripts": {
"analyze-webpack-bundles": "analyze=true npm run start",
"build": "webpack --progress --config webpack.release.config.js",
"build": "yarn build:umd && yarn build:esm",
"build:umd": "webpack --progress --config webpack.release.config.js",
"build:esm": "babel-node scripts/release/build_esm.js",
"release:build": "babel-node scripts/release/build_release.js",
"release:verifyBuild": "babel-node scripts/release/verify_build.js",
"release:publish": "babel-node scripts/release/publish_release.js",
Expand All @@ -17,6 +20,7 @@
"styleguide:build": "styleguidist build && node scripts/moveBuildAssets.js",
"test:watch": "npm test -- --watch --bail",
"test": "jest --silent && npm run test:lint",
"test:ci": "jest --silent --maxWorkers=2 && npm run test:lint",
"test:generate-coverage-report": "codecov"
},
"repository": {
Expand All @@ -38,16 +42,21 @@
},
"homepage": "https://github.com/instacart/Snacks#readme",
"devDependencies": {
"@babel/cli": "7.4.4",
"@babel/core": "^7.0.0",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-transform-react-constant-elements": "7.2.0",
"@babel/plugin-transform-runtime": "7.4.4",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@instacart/eslint-config": "0.1.9",
"@instacart/prettier-config": "0.1.1",
"babel-core": "^6.26.0",
"babel-jest": "^22.4.1",
"babel-loader": "^7.1.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-polyfill": "^6.22.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"@svgr/cli": "4.3.0",
"@svgr/webpack": "4.3.0",
"babel-jest": "^24.8.0",
"babel-loader": "^8.0.0",
"codecov": "^3.1.0",
"coveralls": "^3.0.2",
"enzyme": "^3.3.0",
Expand All @@ -56,7 +65,7 @@
"eslint": "5.16.0",
"eslint-import-resolver-webpack": "0.11.0",
"fs-extra": "^5.0.0",
"jest": "^22.4.2",
"jest": "^24.8.0",
"prettier": "1.16.4",
"prompt": "^1.0.0",
"radium": "^0.22.0",
Expand All @@ -73,11 +82,11 @@
"webpack-cli": "^3.0.4"
},
"dependencies": {
"@babel/runtime": "^7.1.2",
"js-yaml": "3.13.1",
"lodash.isequal": "^4.5.0",
"react-text-mask": "^5.3.0",
"semver": "^5.5.0",
"svgr": "^1.9.2",
"text-mask-addons": "^3.8.0",
"tinycolor2": "^1.4.1",
"underscore": "^1.8.3",
Expand All @@ -91,6 +100,9 @@
"react-transition-group": "^2.2.1"
},
"jest": {
"transform": {
"^.+\\.js$": "babel-jest"
},
"coverageDirectory": "./coverage/",
"testURL": "http://localhost",
"collectCoverage": true,
Expand All @@ -103,6 +115,8 @@
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/test/fileMock.js",
"\\.(css|less)$": "<rootDir>/scripts/test/styleMock.js"
},
"setupTestFrameworkScriptFile": "<rootDir>/scripts/test/testSetup.js"
"setupFilesAfterEnv": [
"<rootDir>/scripts/test/testSetup.js"
]
}
}
30 changes: 30 additions & 0 deletions scripts/release/build_esm.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const path = require('path')
const fs = require('fs')
const execSync = require('child_process').execSync

const exec = command => execSync(command, { stdio: 'inherit' })

const svgrTempDir = path.resolve(process.cwd(), 'tmp/svgr')
const svgrAssetsDir = path.resolve(svgrTempDir, 'assets')
const svgrComponentsDir = path.resolve(svgrTempDir, 'components')

function ensureDir(dir) {
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir)
}
}

// svg will complain if the --out-dir does not exist
ensureDir(svgrAssetsDir)
ensureDir(svgrComponentsDir)

console.log('Building ESM build...')

exec('yarn babel --out-dir dist/esm --ignore=**/__tests__/**,**/docs/** src')

// do these separately so we don't catch the svg font, it has no ignore option
exec('yarn svgr --filename-case=camel --ext="svg.js" -d tmp/svgr/assets src/assets')
exec('yarn svgr --filename-case=camel --ext="svg.js" -d tmp/svgr/components src/components')

// now babel the icons
exec('yarn babel --out-dir dist/esm tmp/svgr')
34 changes: 20 additions & 14 deletions scripts/release/publish_release.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import { execSync } from 'child_process'
import prompt from 'prompt'
import {
checkError,
confirmResponsePattern,
isPositiveResponse,
} from './utils'
import { checkError, confirmResponsePattern, isPositiveResponse } from './utils'
import { version as packageVersion } from '../../package.json'

prompt.message = 'Confirm'
Expand All @@ -13,11 +9,11 @@ const confirmRelease = {
name: `This will publish version ${packageVersion} of the Snacks package to the public npm registry. Are you sure you want to publish a new release of Snacks?`,
type: 'string',
pattern: confirmResponsePattern,
required : true,
default: 'yes'
required: true,
default: 'yes',
}

const confirmReleaseCheck = (userResponse) => {
const confirmReleaseCheck = userResponse => {
if (!isPositiveResponse(userResponse)) {
console.log('Release confirmation failed. Exiting build...')
return false
Expand All @@ -30,10 +26,10 @@ const confirmBuildPassing = {
name: 'Is the circleCi build passing? (https://circleci.com/gh/instacart/Snacks/tree/master)',
type: 'string',
pattern: confirmResponsePattern,
default: 'yes'
default: 'yes',
}

const confirmBuildCheck = (userResponse) => {
const confirmBuildCheck = userResponse => {
if (!isPositiveResponse(userResponse)) {
console.log('CircleCi test passing confirmation failed. Exiting build...')
return false
Expand All @@ -45,20 +41,30 @@ const confirmBuildCheck = (userResponse) => {
const confirmTwoAuthCode = {
name: 'Two factor authenticator code',
type: 'string',
required: true
required: true,
}

const checkoutAndPullMaster = () => execSync('git checkout master && git pull origin master')
const buildProject = () => execSync('npm run build')
const verifyBuild = () => execSync('npm run release:verifyBuild')
const publishRelease = authCode => execSync(`npm publish --otp ${authCode}`)

console.log('Beginning npm publish for Snacks 🥕 🍿 🍪 🥜 🍎 🥨 ')
console.log('Press ctrl+c at any point to abort release')
checkoutAndPullMaster()
prompt.start()
prompt.get([confirmRelease, confirmBuildPassing, confirmTwoAuthCode], (err, result) => {
if(checkError(err)) { return prompt.stop() }
if(!confirmReleaseCheck(result[confirmRelease.name])) { return prompt.stop() }
if(!confirmBuildCheck(result[confirmBuildPassing.name])) { return prompt.stop() }
if (checkError(err)) {
return prompt.stop()
}
if (!confirmReleaseCheck(result[confirmRelease.name])) {
return prompt.stop()
}
if (!confirmBuildCheck(result[confirmBuildPassing.name])) {
return prompt.stop()
}
buildProject()
verifyBuild()
publishRelease(result[confirmTwoAuthCode.name])
prompt.stop()
})
Loading

0 comments on commit 60939a8

Please sign in to comment.