Implement webpack working webpack setup for remix-ide

apps/remix-ide-js/src/polyfills copy.js

-/**
- * Polyfill stable language features. These imports will be optimized by `@babel/preset-env`.
- *
- * See: https://github.com/zloirock/core-js#babel
- */
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';

apps/remix-ide/src/assets/css/pygment_trac.css

+.highlight  { background: #ffffff; }
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+.type-csharp .highlight .k { color: #0000FF }
+.type-csharp .highlight .kt { color: #0000FF }
+.type-csharp .highlight .nf { color: #000000; font-weight: normal }
+.type-csharp .highlight .nc { color: #2B91AF }
+.type-csharp .highlight .nn { color: #000000 }
+.type-csharp .highlight .s { color: #A31515 }
+.type-csharp .highlight .sc { color: #A31515 }

apps/remix-ide/src/index.html

+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="utf-8">
+		<!--
+		The MIT License (MIT)
+
+		Copyright (c) 2014, 2015, the individual contributors
+
+		Permission is hereby granted, free of charge, to any person obtaining a copy
+		of this software and associated documentation files (the "Software"), to deal
+		in the Software without restriction, including without limitation the rights
+		to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+		copies of the Software, and to permit persons to whom the Software is
+		furnished to do so, subject to the following conditions:
+
+		The above copyright notice and this permission notice shall be included in
+		all copies or substantial portions of the Software.
+
+		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+		IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+		FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+		AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+		LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+		OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+		THE SOFTWARE.
+		-->
+		<meta http-equiv="X-UA-Compatible" content="chrome=1">
+		<title>Remix - Ethereum IDE</title>
+		<link rel="stylesheet" href="assets/css/pygment_trac.css">
+		<link rel="icon" type="x-icon" href="icon.png">
+		<script src="assets/js/browserfs.min.js"></script>
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+	</head>
+	<body>
+		<script>
+				function  urlParams () {
+					var qs = window.location.hash.substr(1)
+
+					if (window.location.search.length > 0) {
+						// use legacy query params instead of hash
+						window.location.hash = window.location.search.substr(1)
+						window.location.search = ''
+					}
+
+					var params = {}
+					var parts = qs.split('&')
+					for (var x in parts) {
+						var keyValue = parts[x].split('=')
+						if (keyValue[0] !== '') {
+							params[keyValue[0]] = keyValue[1]
+						}
+					}	
+					return params
+				}
+        const defaultVersion = '0.8.0'
+        let versionToLoad = urlParams().appVersion ? urlParams().appVersion : defaultVersion
+                
+				let assets = {
+						'0.8.0': ['https://use.fontawesome.com/releases/v5.8.1/css/all.css', 'assets/css/pygment_trac.css'],
+						'0.7.7': ['assets/css/font-awesome.min.css', 'assets/css/pygment_trac.css']
+				}
+				let versions = {
+						'0.7.7': 'assets/js/0.7.7/app.js', // commit 7b5c7ae3de935e0ccc32eadfd83bf7349478491e
+						'0.8.0': 'main.js'
+				}
+				for (let k in assets[versionToLoad]) {
+          let app = document.createElement('link')
+          app.setAttribute('rel', 'stylesheet')
+          app.setAttribute('href', assets[versionToLoad][k])
+          if (assets[versionToLoad][k] === 'https://use.fontawesome.com/releases/v5.8.1/css/all.css') {
+            app.setAttribute('integrity', 'sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf')
+            app.setAttribute('crossorigin', 'anonymous')
+          }
+          document.head.appendChild(app)
+        }
+				window.onload = () => {
+					BrowserFS.install(window)
+					BrowserFS.configure({
+						fs: "LocalStorage"
+					}, function(e) {
+						if (e) console.log(e)
+						let app = document.createElement('script')
+						app.setAttribute('src', versions[versionToLoad])
+						document.body.appendChild(app)
+						window.remixFileSystem = require('fs')
+					})
+				}				
+		</script>
+		<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script>
+	</body>
+</html>

apps/remix-ide/src/index.js

 'use strict'
 
-require('@babel/polyfill')
+// require('@babel/polyfill')
 var App = require('./app.js')
 
 var app = new App({})

apps/remix-ide/src/main.js

+import './index'
\ No newline at end of file

apps/remix-ide/src/webpack.index.html

+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="utf-8">
+		<!--
+		The MIT License (MIT)
+
+		Copyright (c) 2014, 2015, the individual contributors
+
+		Permission is hereby granted, free of charge, to any person obtaining a copy
+		of this software and associated documentation files (the "Software"), to deal
+		in the Software without restriction, including without limitation the rights
+		to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+		copies of the Software, and to permit persons to whom the Software is
+		furnished to do so, subject to the following conditions:
+
+		The above copyright notice and this permission notice shall be included in
+		all copies or substantial portions of the Software.
+
+		THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+		IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+		FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+		AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+		LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+		OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+		THE SOFTWARE.
+		-->
+		<meta http-equiv="X-UA-Compatible" content="chrome=1">
+		<title>Remix - Ethereum IDE</title>
+		<link rel="stylesheet" href="assets/css/pygment_trac.css">
+		<link rel="icon" type="x-icon" href="icon.png">
+		<script src="assets/js/browserfs.min.js"></script>
+		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+	</head>
+	<body>
+		<script>
+				function  urlParams () {
+					var qs = window.location.hash.substr(1)
+
+					if (window.location.search.length > 0) {
+						// use legacy query params instead of hash
+						window.location.hash = window.location.search.substr(1)
+						window.location.search = ''
+					}
+
+					var params = {}
+					var parts = qs.split('&')
+					for (var x in parts) {
+						var keyValue = parts[x].split('=')
+						if (keyValue[0] !== '') {
+							params[keyValue[0]] = keyValue[1]
+						}
+					}	
+					return params
+				}
+        const defaultVersion = '0.8.0'
+        let versionToLoad = urlParams().appVersion ? urlParams().appVersion : defaultVersion
+                
+				let assets = {
+						'0.8.0': ['https://use.fontawesome.com/releases/v5.8.1/css/all.css', 'assets/css/pygment_trac.css'],
+						'0.7.7': ['assets/css/font-awesome.min.css', 'assets/css/pygment_trac.css']
+				}
+				let versions = {
+						'0.7.7': 'assets/js/0.7.7/app.js', // commit 7b5c7ae3de935e0ccc32eadfd83bf7349478491e
+						'0.8.0': 'main.js'
+				}
+				for (let k in assets[versionToLoad]) {
+          let app = document.createElement('link')
+          app.setAttribute('rel', 'stylesheet')
+          app.setAttribute('href', assets[versionToLoad][k])
+          if (assets[versionToLoad][k] === 'https://use.fontawesome.com/releases/v5.8.1/css/all.css') {
+            app.setAttribute('integrity', 'sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf')
+            app.setAttribute('crossorigin', 'anonymous')
+          }
+          document.head.appendChild(app)
+        }
+				window.onload = () => {
+					BrowserFS.install(window)
+					BrowserFS.configure({
+						fs: "LocalStorage"
+					}, function(e) {
+						if (e) console.log(e)
+						let app = document.createElement('script')
+						app.setAttribute('src', versions[versionToLoad])
+						document.body.appendChild(app)
+						window.remixFileSystem = require('fs')
+					})
+				}				
+		</script>
+	</body>
+</html>

apps/remix-ide/tsconfig.app.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

apps/remix-ide/tsconfig.json

+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["node", "jest"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

apps/remix-ide/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
+    "**/*.spec.js",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

apps/remix-ide/webpack.config.js

+const nxWebpack = require('@nrwl/react/plugins/webpack')
+
+module.exports = config => {
+    const nxWebpackConfig = nxWebpack(config)
+
+    return {
+        ...nxWebpackConfig,
+        node: {
+            fs: 'empty',
+            tls: 'empty',
+            readline: 'empty',
+            net: 'empty',
+            module: 'empty',
+            child_process: 'empty'
+        }
+    }
+}
\ No newline at end of file

workspace.json

@@ -8,33 +8,55 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@nrwl/workspace:run-commands",
-          "options": {
-            "commands": [
-              {
-                "command": "browserify apps/remix-ide/src/index.js -o apps/remix-ide/build/app.js --exclude solc"
-              }
-            ]
-          }
-        },
-        "start": {
-          "builder": "@nrwl/workspace:run-commands",
+          "builder": "@nrwl/web:build",
           "options": {
-            "commands": [
-              {
-                "command": "npm-run-all -lpr serve watch onchange remixd"
-              }
-            ]
+            "outputPath": "dist/apps/remix-ide",
+            "index": "apps/remix-ide/src/webpack.index.html",
+            "main": "apps/remix-ide/src/main.js",
+            "polyfills": "apps/remix-ide/src/polyfills.js",
+            "tsConfig": "apps/remix-ide/tsconfig.app.json",
+            "assets": [
+              "apps/remix-ide/src/assets",
+              "apps/remix-ide/src/index.html"
+            ],
+            "styles": [],
+            "scripts": [],
+            "webpackConfig": "apps/remix-ide/webpack.config.js"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "apps/remix-ide/src/environments/environment.js",
+                  "with": "apps/remix-ide/src/environments/environment.prod.js"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
           }
         },
         "serve": {
-          "builder": "@nrwl/workspace:run-commands",
+          "builder": "@nrwl/web:dev-server",
           "options": {
-            "commands": [
-              {
-                "command": "npx http-server ./apps/remix-ide"
-              }
-            ]
+            "buildTarget": "remix-ide:build"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "remix-ide:build:production"
+            }
           }
         },
         "lint": {
@@ -42,24 +64,19 @@
           "options": {
             "linter": "eslint",
             "config": "apps/remix-ide/.eslintrc",
-            "files": ["apps/remix-ide/**/*.js"],
-            "exclude": [
-              "**/node_modules/**",
-              "apps/remix-ide/build/**/*.js",
-              "apps/remix-ide/src/app/editor/mode-solidity.js",
-              "apps/remix-ide/soljson.js",
-              "apps/remix-ide/assets/js/**/*.js"
-            ]
+            "tsConfig": [
+              "apps/remix-ide/tsconfig.app.json",
+              "apps/remix-ide/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!apps/remix-ide/**"]
           }
         },
         "test": {
-          "builder": "@nrwl/workspace:run-commands",
+          "builder": "@nrwl/jest:jest",
           "options": {
-            "commands": [
-              {
-                "command": "csslint && node apps/remix-ide/test/index.js"
-              }
-            ]
+            "jestConfig": "apps/remix-ide/jest.config.js",
+            "tsConfig": "apps/remix-ide/tsconfig.spec.json",
+            "passWithNoTests": true
           }
         }
       }