Adjust eject script

Author: jvanbruegge

packages/cycle-scripts/configs/webpack.config.js

@@ -1,4 +1,4 @@
-'use strict'
+module.exports = language => `'use strict'
 
 // Silence webpack2 deprecation warnings
 // https://github.com/vuejs/vue-loader/issues/666
@@ -15,18 +15,15 @@ const addPlugins = webpack2Block.addPlugins
 
 const babel = require('@webpack-blocks/babel6');
 const devServer = require('@webpack-blocks/dev-server2');
-const typescript = require('@webpack-blocks/typescript');
-const webpack = require('webpack');
+${language === 'javascript' ? '' : `const typescript = require('@webpack-blocks/typescript');
+`}const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 const path = require('path');
 
 const babelConfig = {
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables caching results in ./node_modules/.cache/babel-loader/
-  // directory for faster rebuilds.
-  cacheDirectory: true,
   // Instead of relying on a babelrc file to configure babel (or in package.json configs)
   // We speficy here which presets to use. In the future this could be moved to it's own
   // package as create-react-app does with their 'babel-preset-react-app module.
@@ -49,48 +46,44 @@ const babelConfig = {
   ]
 }
 
-module.exports = function(language) {
-  const ending = language === 'javascript' ? '.js' : '.ts'
-  const baseConfig = [
-    entryPoint(path.join(process.cwd(), 'src', 'index' + ending)),
-    setOutput(path.join(process.cwd(), 'build', 'bundle.[hash].js')),
-    babel(babelConfig),
-    defineConstants({
-      'process.env.NODE_ENV': process.env.NODE_ENV
+const config = [
+  entryPoint(path.join(process.cwd(), 'src', 'index.${language === 'javascript' ? 'js' : 'ts' }')),
+  setOutput(path.join(process.cwd(), 'build', 'bundle.[hash].js')),
+  babel(Object.assign({}, babelConfig, { cacheDirectory: true })),
+  defineConstants({
+    'process.env.NODE_ENV': process.env.NODE_ENV
+  }),
+  addPlugins([
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+      inject: true,
+      favicon: 'public/favicon.png',
+      hash: true
     }),
+    new webpack.ProvidePlugin({
+      Snabbdom: 'snabbdom-pragma'
+    })
+  ]),
+  env('development', [
+    devServer({}, require.resolve('react-dev-utils/webpackHotDevClient')),
+    sourceMaps() //The default is cheap-module-source-map
+  ]),
+  env('production', [
     addPlugins([
-        new HtmlWebpackPlugin({
-          template: 'public/index.html',
-          inject: true,
-          favicon: 'public/favicon.png',
-          hash: true
-        }),
-        new webpack.ProvidePlugin({
-          Snabbdom: 'snabbdom-pragma'
-        })
-    ]),
-    env('development', [
-        devServer({}, require.resolve('react-dev-utils/webpackHotDevClient')),
-        sourceMaps() //The default is cheap-module-source-map
-    ]),
-    env('production', [
-        addPlugins([
-          new webpack.optimize.UglifyJsPlugin(),
-          new CopyWebpackPlugin([{ from: 'public', to: '' }])
-        ])
-    ])
-  ]
-
-  const config = language === 'javascript' ? baseConfig : baseConfig
-    .concat([
-      typescript({
-        tsconfig: path.join(__dirname, 'tsconfig.json'),
-        useBabel: true,
-        babelOptions: babelConfig,
-        useCache: true,
-        cacheDirectory: 'node_modules/.cache/at-loader'
+      new webpack.optimize.UglifyJsPlugin(),
+      new CopyWebpackPlugin([{ from: 'public', to: '' }]),
+      new CleanWebpackPlugin([ path.join(process.cwd(), 'build') ], {
+        root: process.cwd()
       })
     ])
+  ])${language === 'javascript' ? '' : `,
+  typescript({
+    configFileName: path.join(__dirname, '..', 'configs', 'tsconfig.json'),
+    useBabel: true,
+    babelOptions: babelConfig,
+    useCache: true,
+    cacheDirectory: 'node_modules/.cache/at-loader'
+  })` }
+]
 
-  return createConfig(config)
-}
+module.exports = createConfig(config)`

packages/cycle-scripts/index.js

@@ -38,6 +38,7 @@
     "babel-plugin-transform-react-jsx": "^6.24.1",
     "babel-preset-env": "^1.3.3",
     "chalk": "^1.1.3",
+    "clean-webpack-plugin": "^0.1.16",
     "copy-webpack-plugin": "^4.0.1",
     "cross-spawn": "^5.1.0",
     "fs-extra": "^2.1.2",

packages/cycle-scripts/package.json

@@ -47,7 +47,7 @@ const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
 const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild
 
-const config = require('../configs/webpack.config')(notEjected.language)
+const config = eval(require('../configs/webpack.config')(notEjected.language))
 
 measureFileSizesBeforeBuild(buildPath).then(previousFileSizes => {
   // Start the webpack build

packages/cycle-scripts/scripts/build.js

@@ -29,21 +29,28 @@ inquirer.prompt([ejectConfirmation]).then(answers => {
   // STEP 1 - Prepare package.json
   // Declaring new scripts
   const scripts = {
-    start: 'node scripts/start.js',
-    test: 'node scripts/test.js',
-    build: 'node scripts/build.js'
+    start: 'NODE_ENV=development webpack-dev-server --config webpack.config.js',
+    build: 'NODE_ENV=production webpack --config webpack.config.js'
   }
+
+  const language = appPackageJson.cca.language
+
   // Remove flavor from devpendencies
   delete appPackageJson.devDependencies[flavorPackageJson.name]
   // Remove cca settings
   delete appPackageJson.cca
   // Flavor's dependencies -> application devDependency.
   // We merge flavor's dependencies with application's devDepependencies
-  const devDependencies = Object.assign(
+  let devDependencies = Object.assign(
     {},
     appPackageJson.devDependencies,
     flavorPackageJson.dependencies
   )
+  const preEjectDependencies = ['inquirer', 'cross-spawn', 'fs-extra', 'chalk']
+  preEjectDependencies.forEach(dep => {
+    delete devDependencies[dep]
+  })
+
   // New package.json content
   const packageJsonContent = Object.assign(
     {},
@@ -59,23 +66,14 @@ inquirer.prompt([ejectConfirmation]).then(answers => {
     JSON.stringify(packageJsonContent, null, 2)
   )
 
-  // STEP 2 - Copy scripts
-  function copyScript (script) {
-    fs.copySync(path.join(__dirname, script), path.join(appScriptsPath, script))
-  }
-  // Make sure appScriptsPath exists
-  fs.ensureDirSync(appScriptsPath)
-  // Copy over start, test and build scripts
-  copyScript('start.js')
-  copyScript('test.js')
-  copyScript('build.js')
-
-  // STEP 3 - Copy utils
-  fs.copySync(path.join(__dirname, 'utils'), path.join(appScriptsPath, 'utils'))
+  // STEP 2 - Copy configs
+  const configPath = path.join(__dirname, '..', 'configs')
+  const wpconfig = require('../configs/webpack.config')(language)
+  fs.writeFileSync(path.join(appPath, 'webpack.config.js'), wpconfig)
 
-  // STEP 4 - Copy configs
-  fs.copySync(path.join(__dirname, '../', 'configs', language), path.join(appPath, 'configs'))
-  fs.copySync(path.join(__dirname, '../', 'configs', 'webpackDevServer.config.js'), path.join(appPath, 'configs', 'webpackDevServer.config.js'))
+  if(language === 'typescript') {
+    fs.copySync(path.join(configPath, 'tsconfig.json'), appPath)
+  }
 
   // TODO sucess message
 })

packages/cycle-scripts/scripts/eject.js

@@ -42,7 +42,7 @@ const createWebpackCompiler = require('./utils/createWebpackCompiler')
 const openBrowser = require('react-dev-utils/openBrowser')
 const notEjected = require(path.join(process.cwd(), 'package.json')).cca
 
-const config = require('../configs/webpack.config')(notEjected.language)
+const config = eval(require('../configs/webpack.config')(notEjected.language))
 
 const cli = 'npm'
 const protocol = 'http'

packages/cycle-scripts/scripts/start.js

@@ -1,4 +1,5 @@
 module.exports = replacements => `${replacements.import}
+${replacements.typeImport}
 import {DOMSource, VNode} from '@cycle/dom'
 
 export type Sources = {