all: migrate clock-with-react-tv example to webpack3

Author: raphamorim

cli/bootstrap/custom-app/package.json

@@ -15,14 +15,15 @@
   },
   "dependencies": {
     "react": "^16.0.0",
-    "react-tv": "^0.3.0-alpha.2"
+    "react-tv": "0.3.0-alpha.3"
   },
   "devDependencies": {
-    "babel-core": "^6.4.5",
-    "babel-loader": "^6.2.1",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.4",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.3.13",
-    "webpack": "^1.12.12",
-    "webpack-dev-server": "^1.12.1"
+    "babel-preset-react": "^6.24.1",
+    "uglifyjs-webpack-plugin": "^1.0.1"
   }
 }

cli/bootstrap/custom-app/webpack.config.babel.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+const sourcePath = path.join(__dirname, 'src');
+
+module.exports = {
+  entry: path.resolve(sourcePath, 'App.js'),
+  output: {
+     path: __dirname,
+     filename: 'bundle.js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    modules: [
+      sourcePath,
+      path.resolve(__dirname, 'node_modules')
+    ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: [
+          'babel-loader'
+        ],
+        include: sourcePath
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new UglifyJsPlugin(),
+    new webpack.HashedModuleIdsPlugin(),
+  ]
+}

cli/bootstrap/custom-app/webpack.config.js

@@ -44,15 +44,31 @@ function runWebOS(root) {
   }
 
   const webosPath = path.resolve(root, 'react-tv/webos');
+
+  process.on('exit', cleanup);
+  process.on('SIGINT', cleanup);
+  process.on('SIGUSR1', cleanup);
+  process.on('SIGUSR2', cleanup);
+  process.on('uncaughtException', cleanup);
+
+  function cleanup() {
+    execSync(`rm -f ${webosPath}/icon.png`);
+    execSync(`rm -f ${webosPath}/icon-large.png`);
+    ReactTVConfig.files.forEach(file => {
+      execSync(`rm -f ${webosPath}/${file}`);
+    })
+  }
+
   try {
-    execSync(`ln -sf ${root}/react-tv/icon.png ${webosPath}/icon.png`);
+    cleanup();
+    execSync(`cp ${root}/react-tv/icon.png ${webosPath}/icon.png`);
     execSync(
-      `ln -sf ${root}/react-tv/icon-large.png ${webosPath}/icon-large.png`
+      `cp ${root}/react-tv/icon-large.png ${webosPath}/icon-large.png`
     );
 
     ReactTVConfig.files.forEach(file => {
       const filePath = path.resolve(root, file);
-      execSync(`ln -sf ${filePath} ${webosPath}`);
+      execSync(`cp ${filePath} ${webosPath}`);
     });
   } catch (e) {
     return console.log('FAIL TO MOUNT', e.toString());
@@ -70,7 +86,7 @@ function runWebOS(root) {
   let attemps = 0;
   const task = setInterval(function() {
     const runningVMS = execSync(`vboxmanage list runningvms`).toString();
-    if (attemps > 15) {
+    if (attemps > 30) {
       console.log('FAILED TO UP virtualbox emulator');
       clearInterval(task);
     }
@@ -88,6 +104,8 @@ function runWebOS(root) {
     execSync(`cd ${webosPath} && ares-package .`);
     console.log(chalk.yellow(` succefull pack from ${root}`));
 
+    cleanup();
+
     console.log(chalk.dim('Installing...'));
     const config = JSON.parse(
       execSync(`cat ${webosPath}/appinfo.json`).toString()

cli/scripts/webos/run.js

@@ -36,7 +36,6 @@ function testReactTV() {
   reactTVResults.appendChild(finalizeInitialChildren);
 }
 
-
 function testReactDOM() {
   const reactDOMResults = document.querySelector('#react-dom');
   const times = 10000;

examples/benchmark/src/Benchmark.js

@@ -1,6 +1,5 @@
 .DS_Store
 *.log
-
 react-tv
 node_modules
 bundle.js

examples/clock-app-with-react-tv/.gitignore

@@ -17,14 +17,16 @@
   },
   "dependencies": {
     "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-tv": "0.3.0-alpha.2"
   },
   "devDependencies": {
-    "babel-core": "^6.4.5",
-    "babel-loader": "^6.2.1",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.4",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.3.13",
-    "webpack": "^1.12.12",
-    "webpack-dev-server": "^1.12.1"
+    "babel-preset-react": "^6.24.1",
+    "uglifyjs-webpack-plugin": "^1.0.1"
   }
 }

examples/clock-app-with-react-tv/package.json

@@ -0,0 +1,40 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+const sourcePath = path.join(__dirname, 'src');
+
+module.exports = {
+  entry: path.resolve(sourcePath, 'App.js'),
+  output: {
+     path: __dirname,
+     filename: 'bundle.js'
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+    modules: [
+      sourcePath,
+      path.resolve(__dirname, 'node_modules')
+    ]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: [
+          'babel-loader'
+        ],
+        include: sourcePath
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    new UglifyJsPlugin(),
+    new webpack.HashedModuleIdsPlugin(),
+  ]
+}