Adjust eject script

Author: jvanbruegge

packages/cycle-scripts/configs/webpack.config.js renamed to packages/cycle-scripts/configs/webpack.config.template.js

@@ -1,9 +1,7 @@
-'use strict'
-
+module.exports = (language, ejected = false) => `'use strict'
 // Silence webpack2 deprecation warnings
 // https://github.com/vuejs/vue-loader/issues/666
 process.noDeprecation = true
-
 const webpack2Block = require('@webpack-blocks/webpack2');
 const createConfig = webpack2Block.createConfig
 const defineConstants = webpack2Block.defineConstants
@@ -12,21 +10,15 @@ const entryPoint = webpack2Block.entryPoint
 const setOutput = webpack2Block.setOutput
 const sourceMaps = webpack2Block.sourceMaps
 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.
@@ -48,49 +40,44 @@ const babelConfig = {
     ['transform-object-rest-spread']
   ]
 }
-
-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()
       })
     ])
-
-  return createConfig(config)
-}
+  ])${language === 'javascript' ? '' : `,
+  typescript({${ !ejected ? `
+    configFileName:path.join(__dirname, '..', 'configs', 'tsconfig.json'),` : '' }
+    useBabel: true,
+    babelOptions: babelConfig,
+    useCache: true,
+    cacheDirectory: 'node_modules/.cache/at-loader'
+  })` }
+]
+module.exports = createConfig(config)
+`

packages/cycle-scripts/package.json

@@ -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/scripts/build.js

@@ -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 = notEjected ? eval(require('../configs/webpack.config.template')(notEjected.language)) : require(path.join(process.cwd(), 'webpack.config.js'))
 
 measureFileSizesBeforeBuild(buildPath).then(previousFileSizes => {
   // Start the webpack build

packages/cycle-scripts/scripts/eject.js

@@ -33,6 +33,7 @@ inquirer.prompt([ejectConfirmation]).then(answers => {
     test: 'node scripts/test.js',
     build: 'node scripts/build.js'
   }
+  const language = appPackageJson.cca.language
   // Remove flavor from devpendencies
   delete appPackageJson.devDependencies[flavorPackageJson.name]
   // Remove cca settings
@@ -74,8 +75,11 @@ inquirer.prompt([ejectConfirmation]).then(answers => {
   fs.copySync(path.join(__dirname, 'utils'), path.join(appScriptsPath, 'utils'))
 
   // 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'))
+  const configString = require(path.join(__dirname, '..', 'configs', 'webpack.config.template.js'))(language)
+  fs.writeFileSync(path.join(appPath, 'webpack.config.js'), configString)
+  if(language === 'typescript') {
+    fs.copySync(path.join(__dirname, '../', 'configs', 'tsconfig.json'), path.join(appPath, 'tsconfig.json'))
+  }
 
   // TODO sucess message
 })

packages/cycle-scripts/scripts/start.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 = notEjected ? eval(require('../configs/webpack.config.template')(notEjected.language)) : require(path.join(process.cwd(), 'webpack.config.js'))
 
 const cli = 'npm'
 const protocol = 'http'

packages/cycle-scripts/template/src/typescript/interfaces.ts

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