Skip to content

Commit 0d21eb5

Browse files
FelixKuehlFelixKuehl
committed
✨ feat: Switch dev server to babel and start to use styleguidist
1 parent 5893cd5 commit 0d21eb5

File tree

14 files changed

+1367
-26410
lines changed

14 files changed

+1367
-26410
lines changed

‎lerna.json

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"lerna": "2.5.1",
3-
"packages": ["packages/*"],
43
"version": "independent",
54
"useWorkspaces": true
65
}

‎package.json

+16-20
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
{
2-
"workspaces": [
3-
"packages/*"
4-
],
2+
"workspaces": {
3+
"packages": [
4+
"packages/*"
5+
],
6+
"nohoist": [
7+
"**/webpack",
8+
"**/webpack/**",
9+
"**/webpack-cli",
10+
"**/webpack-cli/**",
11+
"**/babel-core",
12+
"**/babel-core/**"
13+
]
14+
},
515
"private": true,
616
"scripts": {
717
"precommit": "lint-staged",
818
"build:libs": "lerna run build:lib",
9-
"develop": "lerna exec --scope @jmm/* -- yarn run build:watch"
19+
"develop": "lerna run build:watch --parallel"
1020
},
1121
"prettier": {
1222
"semi": false,
@@ -24,28 +34,14 @@
2434
]
2535
},
2636
"devDependencies": {
27-
"@babel/cli": "^7.0.0",
28-
"@babel/core": "^7.0.0",
29-
"babel-plugin-eslint-disable": "^0.1.2",
30-
"file-loader": "^2.0.0",
3137
"flow-bin": "^0.79.1",
3238
"husky": "^0.14.3",
3339
"lerna": "^2.5.1",
3440
"lint-staged": "^7.2.2",
3541
"node-sass": "^4.9.3",
36-
"nwb": "0.23.x",
37-
"nwb-sass": "^0.9.0",
3842
"prettier": "^1.14.2",
3943
"react": "^16.5.2",
40-
"react-dom": "^16.5.2"
41-
},
42-
"workspaces": {
43-
"packages": [
44-
"packages/*"
45-
],
46-
"nohoist": [
47-
"**/webpack",
48-
"**/webpack/**"
49-
]
44+
"react-dom": "^16.5.2",
45+
"library-utils": "*"
5046
}
5147
}

‎packages/cra-app/yarn.lock

-9,801
This file was deleted.

‎packages/library-utils/.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-app"]
3+
}

‎packages/library-utils/bin/build.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
var app = spawnNodemon()
2+
// Generate a random port
3+
const port = '600' + Math.floor(Math.random() * 9 + 1)
4+
if (type === 'withStorybook') {
5+
startStorybook(port)
6+
}
7+
app.on('message', function(event) {
8+
if (event.type === 'boot') {
9+
clearConsole()
10+
type === 'withStorybook'
11+
? console.log(
12+
chalk.cyan('Starting storybook and nodemon watcher...\u001b[39m')
13+
)
14+
: console.log(chalk.cyan('Starting nodemon watcher...\u001b[39m'))
15+
} else if (event.type === 'config:update') {
16+
console.log('Watching: ' + event.data.dirs[0])
17+
} else if (event.type === 'start') {
18+
console.log('⏳ Compiling...')
19+
} else if (event.type === 'crash') {
20+
console.log(chalk.red('Failed to compile. Waiting for changes...'))
21+
} else if (event.type === 'restart') {
22+
clearConsole()
23+
console.log(chalk.yellow('Changes detected:'))
24+
event.data.forEach(d => console.log('--> ' + d))
25+
} else if (event.type === 'exit') {
26+
clearConsole()
27+
type === 'withStorybook'
28+
? console.log(
29+
chalk.green('Compiled successfully! Waiting for changes...') +
30+
'\n\n' +
31+
'📕 Storybook running on ' +
32+
'http://localhost:' +
33+
chalk.bold(port) +
34+
'/' +
35+
'\n\n' +
36+
'Please note that the output of the storyboard dev server is not logged. \nTo start a standalone storyboard server, use ' +
37+
chalk.cyan('yarn run storybook') +
38+
'.'
39+
)
40+
: console.log(
41+
chalk.green('Compiled successfully! Waiting for changes...')
42+
)
43+
} else {
44+
// console.log(event)
45+
}
46+
})

‎packages/library-utils/bin/start.js

+43-73
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,62 @@
11
'use strict'
2-
const {spawn} = require('child_process')
3-
const {clearConsole} = require('./utils.js')
2+
const {execFile} = require('child_process')
3+
const {clearConsole, printDevServerInfo} = require('./utils.js')
44
const chalk = require('chalk')
5+
const dirCommand = require('@babel/cli/lib/babel/dir.js').default
6+
const parseArgv = require('@babel/cli/lib/babel/options.js').default
7+
const path = require('path')
58

6-
function spawnStorybook(port) {
7-
const cp = spawn('start-storybook', ['-p', port, '-c', '.storybook'])
9+
function spawnStyleguide(port) {
10+
const cp = execFile(
11+
require.resolve('react-styleguidist/bin/styleguidist.js'),
12+
['server']
13+
)
14+
cp.stdout.on('data', function(data) {
15+
console.log(data.toString())
16+
})
817
return cp
918
}
1019

1120
/**
12-
* Starts the storybook dev server
21+
* Starts the styleguide dev server
1322
*/
14-
function startStorybook(port) {
15-
var app = spawnStorybook(port)
16-
}
17-
18-
function spawnNodemon() {
19-
const cp = spawn(
20-
'nodemon',
21-
// $ nodemon -e '*' -w src -x 'rm .babelrc &> /dev/null; nwb build-react-component --no-demo --copy-files'
22-
[
23-
'--watch',
24-
'src',
25-
'-x',
26-
'rm .babelrc &> /dev/null; nwb build-react-component --no-demo --copy-files'
27-
],
28-
{
29-
// the important part is the 4th option 'ipc'
30-
// this way `process.send` will be available in the child process (nodemon)
31-
// so it can communicate back with parent process (through `.on()`, `.send()`)
32-
// https://nodejs.org/api/child_process.html#child_process_options_stdio
33-
stdio: ['pipe', 'pipe', 'pipe', 'ipc']
34-
}
35-
)
36-
37-
return cp
23+
async function startStyleguide(port) {
24+
var app = spawnStyleguide()
3825
}
3926

4027
/**
4128
* Starts a dev server
4229
* @param {string} type The servers type
4330
*/
4431
function startDev(type = 'default') {
45-
var app = spawnNodemon()
46-
// Generate a random port
47-
const port = '600' + Math.floor(Math.random() * 9 + 1)
32+
type === 'withStorybook'
33+
? console.log(
34+
chalk.cyan('Starting styleguide and babel watcher...\u001b[39m')
35+
)
36+
: console.log(chalk.cyan('Starting babel watcher...\u001b[39m'))
37+
38+
// Spawn Babel server
39+
process.env.NODE_ENV = 'development'
40+
const opts = parseArgv([
41+
process.argv[0],
42+
process.argv[1],
43+
'-w',
44+
'--presets=react-app',
45+
'src',
46+
'--out-dir',
47+
'es',
48+
'--copy-files',
49+
'--delete-dir-on-start',
50+
'--ignore',
51+
'__tests__,spec.js,test.js,__snapshots__'
52+
])
53+
dirCommand(opts).catch(err => {
54+
console.error(err)
55+
process.exit(1)
56+
})
4857
if (type === 'withStorybook') {
49-
startStorybook(port)
58+
startStyleguide()
5059
}
51-
app.on('message', function(event) {
52-
if (event.type === 'boot') {
53-
clearConsole()
54-
type === 'withStorybook'
55-
? console.log(
56-
chalk.cyan('Starting storybook and nodemon watcher...\u001b[39m')
57-
)
58-
: console.log(chalk.cyan('Starting nodemon watcher...\u001b[39m'))
59-
} else if (event.type === 'config:update') {
60-
console.log('Watching: ' + event.data.dirs[0])
61-
} else if (event.type === 'start') {
62-
console.log('⏳ Compiling...')
63-
} else if (event.type === 'crash') {
64-
console.log(chalk.red('Failed to compile. Waiting for changes...'))
65-
} else if (event.type === 'restart') {
66-
clearConsole()
67-
console.log(chalk.yellow('Changes detected:'))
68-
event.data.forEach(d => console.log('--> ' + d))
69-
} else if (event.type === 'exit') {
70-
clearConsole()
71-
type === 'withStorybook'
72-
? console.log(
73-
chalk.green('Compiled successfully! Waiting for changes...') +
74-
'\n\n' +
75-
'📕 Storybook running on ' +
76-
'http://localhost:' +
77-
chalk.bold(port) +
78-
'/' +
79-
'\n\n' +
80-
'Please note that the output of the storyboard dev server is not logged. \nTo start a standalone storyboard server, use ' +
81-
chalk.cyan('yarn run storybook') +
82-
'.'
83-
)
84-
: console.log(
85-
chalk.green('Compiled successfully! Waiting for changes...')
86-
)
87-
} else {
88-
// console.log(event)
89-
}
90-
})
60+
printDevServerInfo()
9161
}
9262
module.exports = {startDev}

‎packages/library-utils/bin/utils.js

+20-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
1+
const chalk = require('chalk')
2+
3+
function clearConsole() {
4+
process.stdout.write(
5+
process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
6+
)
7+
}
8+
function printDevServerInfo() {
9+
clearConsole()
10+
console.log(chalk.green('Started watcher! Waiting for changes...'))
11+
12+
console.log(
13+
'\nThe ' +
14+
chalk.bold('babel') +
15+
' watcher does not provide proper console output after first compilation.\nPlease refer to the consuming applications dev server for error logging.'
16+
)
17+
console.log('\n')
18+
}
119
module.exports = {
2-
clearConsole: function() {
3-
process.stdout.write(
4-
process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
5-
)
6-
}
20+
clearConsole: clearConsole,
21+
printDevServerInfo: printDevServerInfo
722
}

‎packages/library-utils/nwb.config.js

-2
This file was deleted.

‎packages/library-utils/package.json

+11-8
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,21 @@
1616
},
1717
"scripts": {},
1818
"dependencies": {
19+
"@babel/cli": "^7.1.2",
20+
"@babel/core": "^7.1.2",
21+
"babel-plugin-eslint-disable": "^0.1.2",
22+
"babel-preset-react-app": "^5.0.2",
1923
"chalk": "^2.4.1",
20-
"nodemon": "^1.18.4"
24+
"react-scripts": "^2.0.3",
25+
"react-styleguidist": "^7.3.8",
26+
"webpack": "^4.20.2",
27+
"webpack-cli": "^3.1.2"
2128
},
2229
"peerDependencies": {
23-
"css-loader": "1.x",
24-
"nwb": "0.x",
25-
"react": "16.x",
26-
"sass-loader": "7.x",
27-
"style-loader": "0.x"
30+
"react": "16.x"
2831
},
29-
"author": "",
30-
"homepage": "",
32+
"author": "Felix Kühl",
33+
"homepage": "www.jobmatch.me",
3134
"license": "MIT",
3235
"repository": ""
3336
}

‎packages/library/nwb.config.js

-2
This file was deleted.

0 commit comments

Comments
 (0)