generating Abstract Panel

.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

apps/remix-ide/src/app/components/main-panel.js

@@ -1,3 +1,7 @@
+/* global Node, requestAnimationFrame */   // eslint-disable-line
+import React from 'react' // eslint-disable-line
+import ReactDOM from 'react-dom' // eslint-disable-line
+import { RemixUiMainPanel } from '@remix-ui/main-panel' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import * as packageJson from '../../../../../package.json'
 const yo = require('yo-yo')
@@ -22,6 +26,7 @@ const profile = {
 export class MainPanel extends AbstractPanel {
   constructor () {
     super(profile)
+    this.element = document.createElement('div')
   }
 
   focus (name) {
@@ -29,10 +34,24 @@ export class MainPanel extends AbstractPanel {
     super.focus(name)
   }
 
+  // onActivation () {
+  //   this.renderComponent()
+  // }
+
   render () {
+    // return this.element
     return yo`
       <div class=${css.pluginsContainer} data-id="mainPanelPluginsContainer" id='mainPanelPluginsContainer-id'>
         ${this.view}
       </div>`
   }
+
+  // renderComponent () {
+  //   ReactDOM.render(
+  //     <RemixUiMainPanel
+  //       plugin={this}
+  //     />,
+  //     this.element
+  //   )
+  // }
 }

libs/remix-ui/abstract-panel/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/abstract-panel/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/abstract-panel/README.md

@@ -0,0 +1,7 @@
+# remix-ui-abstract-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-abstract-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/abstract-panel/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@remix-ui/abstract-panel",
+  "version": "0.0.1"
+}

libs/remix-ui/abstract-panel/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-abstract-panel';

libs/remix-ui/abstract-panel/src/lib/remix-ui-abstract-panel.tsx

@@ -0,0 +1,14 @@
+import './remix-ui-abstract-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiAbstractPanelProps {}
+
+export function RemixUiAbstractPanel(props: RemixUiAbstractPanelProps) {
+  return (
+    <div>
+      <h1>Welcome to remix-ui-abstract-panel!</h1>
+    </div>
+  );
+}
+
+export default RemixUiAbstractPanel;

libs/remix-ui/abstract-panel/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/abstract-panel/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/main-panel/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/remix-ui/main-panel/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/remix-ui/main-panel/README.md

@@ -0,0 +1,7 @@
+# remix-ui-main-panel
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-main-panel` to execute the unit tests via [Jest](https://jestjs.io).

libs/remix-ui/main-panel/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@remix-ui/main-panel",
+  "version": "0.0.1"
+}

libs/remix-ui/main-panel/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/remix-ui-main-panel';

libs/remix-ui/main-panel/src/lib/remix-ui-main-panel.tsx

@@ -0,0 +1,19 @@
+import React from 'react' // eslint-disable-line
+import './remix-ui-main-panel.module.css';
+
+/* eslint-disable-next-line */
+export interface RemixUiMainPanelProps {
+  plugin: any
+}
+
+export const RemixUiMainPanel = (props: RemixUiMainPanelProps) =>  {
+  return (
+    <div>
+      {console.log( props.plugin.view)}
+      <h1>Remix UI Main Panel</h1>
+      {/* { props.plugin.view }  */}
+    </div>
+  );
+}
+
+export default RemixUiMainPanel;

libs/remix-ui/main-panel/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

libs/remix-ui/main-panel/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -87,9 +87,15 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
     props.onReady({
       logHtml: (html) => {
         scriptRunnerDispatch({ type: 'html', payload: { message: [html.innerText] } })
+
+        setTimeout(() => {
+        }, 100)
       },
+
       log: (message) => {
+        setTimeout(() => {
           scriptRunnerDispatch({ type: 'log', payload: { message: [message] } })
+        }, 100)
       }
     })
   }, [])

nx.json

@@ -138,14 +138,12 @@
     },
     "remix-ui-tabs": {
       "tags": []
-    }
     },
-  "targetDependencies": {
+    "remix-ui-main-panel": {
-    "build": [
+      "tags": []
-      {
+    },
-        "target": "build",
+    "remix-ui-abstract-panel": {
-        "projects": "dependencies"
+      "tags": []
     }
-    ]
   }
 }

package.json

@@ -161,6 +161,7 @@
     "chokidar": "^2.1.8",
     "color-support": "^1.1.3",
     "commander": "^2.20.3",
+    "core-js": "^3.6.5",
     "deep-equal": "^1.0.1",
     "document-register-element": "1.13.1",
     "ethereumjs-util": "^7.0.10",
@@ -186,6 +187,7 @@
     "react-bootstrap": "^1.6.4",
     "react-dom": "^17.0.2",
     "react-tabs": "^3.2.2",
+    "regenerator-runtime": "0.13.7",
     "selenium": "^2.20.0",
     "signale": "^1.4.0",
     "string-similarity": "^4.0.4",

tsconfig.base.json

@@ -67,9 +67,9 @@
       "@remix-ui/editor": ["libs/remix-ui/editor/src/index.ts"],
       "@remix-ui/tabs": ["libs/remix-ui/tabs/src/index.ts"],
       "@remix-ui/helper": ["libs/remix-ui/helper/src/index.ts"],
-      "@remix-ui/vertical-icons-panel": [
+      "@remix-ui/vertical-icons-panel": ["libs/remix-ui/vertical-icons-panel/src/index.ts"],
-        "libs/remix-ui/vertical-icons-panel/src/index.ts"
+      "@remix-ui/main-panel": ["libs/remix-ui/main-panel/src/index.ts"],
-      ]
+      "@remix-ui/side-panel": ["libs/remix-ui/side-panel/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -1,5 +1,71 @@
 {
   "version": 1,
+  "cli": {
+    "defaultCollection": "@nrwl/react"
+  },
+  "defaultProject": "remix-ide",
+  "schematics": {
+    "@nrwl/workspace": {
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/cypress": {
+      "cypress-project": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/next": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/web": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/node": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nx-plugin": {
+      "plugin": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/nest": {
+      "application": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/express": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      }
+    }
+  },
   "projects": {
     "remix-ide": {
       "root": "apps/remix-ide",
@@ -1068,87 +1134,79 @@
           }
         }
       }
-    }
     },
-  "remix-ui-editor": {
+    "remix-ui-main-panel": {
-    "root": "libs/remix-ui/editor",
+      "root": "libs/remix-ui/main-panel",
-    "sourceRoot": "libs/remix-ui/editor/src",
+      "sourceRoot": "libs/remix-ui/main-panel/src",
       "projectType": "library",
-    "schematics": {},
       "architect": {
-      "lint": {
+        "build": {
-        "builder": "@nrwl/linter:lint",
+          "builder": "@nrwl/web:package",
-        "options": {
+          "outputs": ["{options.outputPath}"],
-          "linter": "eslint",
+          "options": {
-          "babel": true
+            "outputPath": "dist/libs/remix-ui/main-panel",
-        },
+            "tsConfig": "libs/remix-ui/main-panel/tsconfig.lib.json",
-        "component": {
+            "project": "libs/remix-ui/main-panel/package.json",
-          "style": "css"
+            "entryFile": "libs/remix-ui/main-panel/src/index.ts",
-        },
+            "external": ["react/jsx-runtime"],
-        "library": {
+            "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
-          "style": "css",
+            "assets": [
-          "linter": "eslint"
+              {
+                "glob": "libs/remix-ui/main-panel/README.md",
+                "input": ".",
+                "output": "."
               }
-      },
+            ]
-      "library": {
-        "linter": "eslint"
           }
         },
-    "@nrwl/nx-plugin": {
+        "lint": {
-      "plugin": {
+          "builder": "@nrwl/linter:eslint",
-        "linter": "eslint"
+          "options": {
+            "lintFilePatterns": [
+              "libs/remix-ui/main-panel/**/*.{ts,tsx,js,jsx}"
+            ]
+          }
         }
-    },
-      "@nrwl/web": {
-        "application": {
-          "linter": "eslint"
       }
     },
-      "@nrwl/node": {
+    "remix-ui-abstract-panel": {
-        "application": {
+      "root": "libs/remix-ui/abstract-panel",
-          "linter": "eslint"
+      "sourceRoot": "libs/remix-ui/abstract-panel/src",
-        },
+      "projectType": "library",
-        "library": {
+      "architect": {
-          "linter": "eslint"
+        "build": {
+          "builder": "@nrwl/web:package",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "outputPath": "dist/libs/remix-ui/abstract-panel",
+            "tsConfig": "libs/remix-ui/abstract-panel/tsconfig.lib.json",
+            "project": "libs/remix-ui/abstract-panel/package.json",
+            "entryFile": "libs/remix-ui/abstract-panel/src/index.ts",
+            "external": ["react/jsx-runtime"],
+            "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
+            "assets": [
+              {
+                "glob": "libs/remix-ui/abstract-panel/README.md",
+                "input": ".",
+                "output": "."
               }
+            ]
           }
         },
-    "cli": {
+        "lint": {
-      "defaultCollection": "@nrwl/react"
+          "builder": "@nrwl/linter:eslint",
-    },
+          "options": {
-    "schematics": {
+            "lintFilePatterns": [
-      "@nrwl/workspace": {
+              "libs/remix-ui/abstract-panel/**/*.{ts,tsx,js,jsx}"
-        "library": {
+            ]
-          "linter": "eslint"
           }
-      },
-      "@nrwl/cypress": {
-        "cypress-project": {
-          "linter": "eslint"
         }
-      },
-      "@nrwl/react": {
-        "application": {
-          "style": "css",
-          "linter": "eslint",
-          "babel": true
-        },
-        "component": {
-          "style": "css"
-        },
-        "library": {
-          "style": "css",
-          "linter": "eslint"
       }
-      },
-      "library": {
-        "linter": "eslint"
     }
   },
   "@nrwl/nx-plugin": {
     "plugin": {
       "linter": "eslint"
     }
-    },
+  }
-    "defaultProject": "remix-ide"
 }