build(craco): WIP on bundle for web

Author: nampdn

craco.config.js

@@ -0,0 +1,37 @@
+const fs = require('fs')
+const path = require('path')
+
+const appDirectory = fs.realpathSync(process.cwd())
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath)
+const appIncludes = [resolveApp('src')]
+module.exports = {
+  babel: {
+    plugins: ['@babel/plugin-proposal-class-properties'],
+  },
+  webpack: {
+    configure: (config, { env, paths }) => {
+      config.module.rules[0].include = appIncludes
+      config.module.rules[1] = null
+      config.module.rules[2].oneOf[1].include = appIncludes
+      config.module.rules[2].oneOf[1].options.plugins = [
+        require.resolve('babel-plugin-react-native-web'),
+      ].concat(config.module.rules[2].oneOf[1].options.plugins)
+
+      const vectorIcons = {
+        test: /\.ttf$/,
+        loader: 'url-loader', // or directly file-loader
+        include: path.resolve(
+          __dirname,
+          'node_modules/react-native-vector-icons',
+        ),
+      }
+
+      config.module.rules.push(vectorIcons)
+      config.module.rules = config.module.rules.filter(Boolean) // Clear null rules
+
+      config.plugins[9].tsconfig = resolveApp('tsconfig.web.json')
+
+      return config
+    },
+  },
+}

package.json

@@ -6,7 +6,7 @@
   "homepage": "https://example.barajs.dev",
   "scripts": {
     "dev": "run-p start:web start:mobile start:desktop",
-    "start:web": "react-scripts start",
+    "start:web": "craco start --verbose",
     "start:mobile": "node node_modules/react-native/local-cli/cli.js start",
     "start:desktop": "cross-env BROWSER=none concurrently \"yarn compile:desktop -w\" \"wait-on http://localhost:3000 && yarn watch:desktop\"",
     "watch:desktop": "nodemon --watch dist --exec \"electron ./dist\"",
@@ -38,7 +38,10 @@
   },
   "devDependencies": {
     "@babel/core": "7.4.3",
+    "@babel/plugin-proposal-class-properties": "7.4.0",
+    "@babel/polyfill": "7.4.3",
     "@babel/runtime": "7.4.3",
+    "@craco/craco": "4.1.0",
     "@types/electron-devtools-installer": "2.2.0",
     "@types/electron-store": "1.3.1",
     "@types/jest": "24.0.11",
@@ -48,6 +51,7 @@
     "@types/react": "16.8.13",
     "@types/react-native": "0.57.45",
     "@types/react-test-renderer": "16.8.1",
+    "babel-plugin-react-native-web": "0.11.2",
     "concurrently": "4.1.0",
     "cross-env": "5.2.0",
     "electron": "4.1.4",
@@ -59,6 +63,7 @@
     "nodemon": "1.18.11",
     "npm-run-all": "4.1.5",
     "prettier": "1.17.0",
+    "react-app-polyfill": "0.2.2",
     "react-scripts": "2.1.8",
     "react-test-renderer": "16.8.6",
     "shx": "0.3.2",

src/index.css

@@ -0,0 +1,49 @@
+::-webkit-scrollbar {
+  width: 1px;
+  height: 1px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb
+{
+  background-color: transparent;
+}
+
+*:focus {
+  outline-color: #49d3b4;
+}
+
+*[tabIndex^="-1"]:focus {
+  outline: none;
+}
+
+html, body, #root, #root > div {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: #292C33;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a:hover, a:hover > *:not([class*='touchAction']) {
+  text-decoration: underline;
+}
+
+input:focus {
+  outline: none !important;
+}
+
+/* https://github.com/necolas/react-native-web/issues/1299 */
+.pagingEnabledFix > div > div > div {
+  height: 100%;
+}
+

src/index.js renamed to src/index.ts

@@ -2,6 +2,17 @@
  * @format
  */
 
+// Security precaution
+;(window as any).eval = global.eval = (payload: string) => {
+  const error = new Error(`This app does not allow window.eval().`)
+  Object.assign(error, { payload })
+
+  throw error
+}
+
+import '@babel/polyfill'
+import 'react-app-polyfill/ie9'
+
 import { register } from 'bara'
 import { useReactApp } from 'bara-react'
 import App from './App'

tsconfig.web.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": false,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "noEmit": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": [
+    "src/index.ts"
+  ],
+  "exclude": [
+    "src/setupProxy.js"
+  ]
+}

yarn.lock

@@ -292,7 +292,7 @@
     "@babel/helper-create-class-features-plugin" "^7.3.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-class-properties@^7.0.0":
+"@babel/plugin-proposal-class-properties@7.4.0", "@babel/plugin-proposal-class-properties@^7.0.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.0.tgz#d70db61a2f1fd79de927eea91f6411c964e084b8"
   integrity sha512-t2ECPNOXsIeK1JxJNKmgbzQtoG27KIlVE61vTqX0DKR9E9sZlVVxWUtEW9D5FlZ8b8j7SBNCHY47GgPKCKlpPg==
@@ -820,6 +820,14 @@
     "@babel/helper-regex" "^7.4.3"
     regexpu-core "^4.5.4"
 
+"@babel/[email protected]":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.4.3.tgz#332dc6f57b718017c3a8b37b4eea8aa6eeac1187"
+  integrity sha512-rkv8WIvJshA5Ev8iNMGgz5WZkRtgtiPexiT7w5qevGTuT7ZBfM3de9ox1y9JR5/OXb/sWGBbWlHNa7vQKqku3Q==
+  dependencies:
+    core-js "^2.6.5"
+    regenerator-runtime "^0.13.2"
+
 "@babel/[email protected]":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.1.tgz#389e8ca6b17ae67aaf9a2111665030be923515db"
@@ -1031,6 +1039,15 @@
   dependencies:
     xstream "11.10.0"
 
+"@craco/[email protected]":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@craco/craco/-/craco-4.1.0.tgz#f8ffbce0324c2d68fd025291a8c1866359bbecfd"
+  integrity sha512-yaCjyC2GKFsAMZRtBkB61ZSAPcuEn5U3PKRTc+Cwy0IW5KgLDposutT9np44AfaZXOw1kd9Z0bgy+f0HiB9vNg==
+  dependencies:
+    cross-spawn "6.0.5"
+    lodash.mergewith "4.6.1"
+    webpack-merge "4.1.4"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -2113,6 +2130,11 @@ babel-plugin-named-asset-import@^0.3.1:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.1.tgz#5ec13ec446d0a1e5bb6c57a1f94c9cdedb0c50d6"
   integrity sha512-vzZlo+yEB5YHqI6CRRTDojeT43J3Wf3C/MVkZW5UlbSeIIVUYRKtxaFT2L/VTv9mbIyatCW39+9g/SZolvwRUQ==
 
+[email protected]:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-native-web/-/babel-plugin-react-native-web-0.11.2.tgz#a1b9ab25fcd48936823d4ec537c749c007ceaf15"
+  integrity sha512-nZwvX8/HA3w6zkpDs1If9aIkHTyvuClAmLtSPJTmy7lXixX9z7/Siap/yjIaCp0Hz5gC5ALFXLBQv8oSdEqtQA==
+
 babel-plugin-syntax-object-rest-spread@^6.13.0, babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
@@ -3328,7 +3350,7 @@ core-js@^1.0.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7:
+core-js@^2.2.2, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7, core-js@^2.6.5:
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
   integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
@@ -7498,6 +7520,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+[email protected]:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
+  integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==
+
 lodash.pad@^4.1.0:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/lodash.pad/-/lodash.pad-4.5.1.tgz#4330949a833a7c8da22cc20f6a26c4d59debba70"
@@ -10224,7 +10251,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-app-polyfill@^0.2.2:
+react-app-polyfill@0.2.2, react-app-polyfill@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz#a903b61a8bfd9c5e5f16fc63bebe44d6922a44fb"
   integrity sha512-mAYn96B/nB6kWG87Ry70F4D4rsycU43VYTj3ZCbKP+SLJXwC0x6YCbwcICh3uW8/C9s1VgP197yx+w7SCWeDdQ==
@@ -12804,6 +12831,13 @@ [email protected]:
     lodash ">=3.5 <5"
     tapable "^1.0.0"
 
+[email protected]:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.4.tgz#0fde38eabf2d5fd85251c24a5a8c48f8a3f4eb7b"
+  integrity sha512-TmSe1HZKeOPey3oy1Ov2iS3guIZjWvMT2BBJDzzT5jScHTjVC3mpjJofgueEzaEd6ibhxRDD6MIblDr8tzh8iQ==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"