first tests

.circleci/config.yml

@@ -54,6 +54,33 @@ jobs:
       - run: cd dist/libs/remix-tests && npm install
       - run: npm run test:libs
 
+  remix-ide-plugin-api:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:14.17.6-browsers
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+    resource_class: xlarge
+      # - image: circleci/mongo:3.4.4
+    environment:
+      - COMMIT_AUTHOR_EMAIL: "yann@ethereum.org"
+      - COMMIT_AUTHOR: "Circle CI"
+      - FILES_TO_PACKAGE: "dist/apps/remix-ide/assets dist/apps/remix-ide/index.html dist/apps/remix-ide/main.js dist/apps/remix-ide/polyfills.js dist/apps/remix-ide/runtime.js dist/apps/remix-ide/vendor.js dist/apps/remix-ide/favicon.ico"
+    working_directory: ~/remix-project
+
+    steps:
+      - checkout
+      - run: npm install
+      - run: npx nx build remix-ide --with-deps
+      - run: npx nx build remix-ide-e2e-src-local-plugin
+      - run: ./apps/remix-ide/ci/browser_tests_plugin_api.sh
+      - store_test_results:
+          path: /tmp/test-results
+      - store_artifacts:
+          path: /tmp/artifacts
+
   remix-ide-chrome-1:
     docker:
       # specify the version you desire here

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "eslint.validate": ["javascript"]
+   }

apps/remix-ide-e2e/src/local-plugin/.testcaferc.js

@@ -0,0 +1,11 @@
+let os = require("os");
+
+module.exports = {
+    skipJsErrors: true,
+    browsers: ['chrome'],
+    screenshots: {
+        "path": "/tmp/artifacts",
+        "takeOnFails": true,
+        "pathPattern": "${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png"
+    }
+}

apps/remix-ide-e2e/src/local-plugin/src/app/Client.ts

@@ -0,0 +1,540 @@
+import { PluginClient } from '@remixproject/plugin'
+import { customAction } from '@remixproject/plugin-api/lib/file-system/file-panel'
+import { createClient } from '@remixproject/plugin-webview'
+import { BehaviorSubject } from 'rxjs'
+import axios from 'axios'
+
+const simpleContract = `pragma solidity >=0.4.22 <0.7.0;
+/**
+* @title Storage
+* @dev Store & retreive value in a variable
+*/
+contract StorageTestUpdateConfiguration {
+  uint256 number;
+  /**
+   * @dev Store value in variable
+   * @param num value to store
+   */
+  function store(uint256 num) public {
+      number = num;
+  }
+  /**
+   * @dev Return value 
+   * @return value of 'number'
+   */
+  function retreive() public view returns (uint256){
+      return number;
+  }
+}
+          
+          `
+
+export class WorkSpacePlugin extends PluginClient {
+  callBackEnabled: boolean = true;
+  feedback = new BehaviorSubject<any>('');
+
+  constructor () {
+    super()
+    console.log('CONSTRUCTOR')
+    createClient(this)
+
+    this.methods = ['qr', 'dismiss', 'customAction']
+
+    this.onload()
+      .then(async (x) => {
+        // console.log("client loaded", JSON.stringify(this));
+        try {
+          // await this.call("solidityUnitTesting", "testFromSource", "");
+        } catch (e) {
+          // console.log("not available");
+        }
+        /*
+      let acc = await this.call("udapp","getSettings")
+      console.log(acc)
+      let ac2 = await this.call("udapp","getAccounts")
+      console.log(ac2)
+      const privateKey = "71975fbf7fe448e004ac7ae54cad0a383c3906055a75468714156a07385e96ce"
+      const balance = "0x56BC75E2D63100000"
+      let na = await this.call("udapp","createVMAccount",{ privateKey, balance })
+      console.log(na)
+
+      this.on('udapp', 'newTransaction', (tx: any) => {
+        // Do something
+        console.log("new transaction", tx)
+      })
+
+      this.on("solidity","compilationFinished",function(x){
+        console.log("comp fin",x)
+      })
+      */
+        await this.setCallBacks()
+
+        this.on(
+          'solidity',
+          'compilationFinished',
+          function (target, source, version, data) {
+            console.log('compile finished', target, source, version, data)
+          }
+        )
+      })
+      .catch(async (e) => {
+        console.log('ERROR CONNECTING', e)
+      })
+  }
+
+  async setCallBacks () {
+    const cmd: customAction = {
+      id: this.name,
+      name: 'customAction',
+      type: ['file', 'folder'],
+      extension: [],
+      path: [],
+      pattern: []
+      // sticky: true
+    }
+
+    const cmd2: customAction = {
+      id: this.name,
+      name: 'myAction2',
+      type: ['file', 'folder'],
+      extension: [],
+      path: [],
+      pattern: []
+    }
+
+    this.call('filePanel', 'registerContextMenuItem', cmd)
+    this.call('filePanel', 'registerContextMenuItem', cmd2)
+
+    console.log('set listeners')
+    const me = this
+    this.on('fileManager', 'currentFileChanged', function (x) {
+      me.setFeedback({
+        event: 'currentFileChanged',
+        result: x
+      })
+    })
+
+    this.on('filePanel', 'customAction', function (x) {
+      console.log('custom ACTION', x)
+    })
+
+    this.on('fileManager', 'fileRemoved', function (x) {
+      me.setFeedback(`fileRemoved:${x}`)
+    })
+
+    this.on(
+      'solidity',
+      'compilationFinished',
+      function (target, source, version, data) {
+        console.log('compile finished', target, source, version, data)
+      }
+    )
+
+    this.on('fileManager', 'fileAdded', function (x) {
+      console.log('added file', x)
+      me.log(x)
+    })
+
+    /*     this.on("fileExplorers", "createWorkspace", function (x) {
+      console.log("ws create", x);
+      me.log(x);
+    });
+
+    this.on("fileExplorers", "setWorkspace", function (x) {
+      console.log("ws set", x);
+      me.log(x);
+    });
+
+    this.on("fileExplorers", "deleteWorkspace", function (x) {
+      console.log("wS DELETE", x);
+      me.log(x);
+    });
+
+    this.on("fileExplorers", "renameWorkspace", function (x) {
+      console.log("wS rn", x);
+      me.log(x);
+    }); */
+  }
+
+  setFeedback (ob: any) {
+    this.feedback.next(ob)
+    console.log(ob)
+  }
+
+  async customAction (o:customAction) {
+    console.log('custom action called', o)
+  }
+
+  async log (message: string) {
+    // console.log(message)
+    this.call('terminal', 'log', { type: 'info', value: 'Name\r\nAniket' })
+    this.call('terminal', 'log', { type: 'html', value: '<div>test</div><ul><li>test</li></ul>' })
+  }
+
+  async changetoinjected () {
+    this.call('udapp', 'setEnvironmentMode', 'injected')
+  }
+
+  async test (p: string) {}
+
+  async activate () {
+    this.call('manager', 'activatePlugin', 'remixd')
+  }
+
+  async deactivate () {
+    this.call('manager', 'deactivatePlugin', '111')
+  }
+
+  async getresult () {
+    const r = await this.call('solidity', 'getCompilationResult')
+    console.log('RESULT', r)
+  }
+
+  async gitbranches () {
+    // let r = await this.call("dGitProvider","branches")
+    // console.log("branches", r)
+  }
+
+  async gitbranch (dir: string) {
+    // let r = await this.call("dGitProvider","branch",dir)
+  }
+
+  async gitcurrentbranch () {
+    try {
+      const r = await this.call('dGitProvider', 'currentbranch')
+      this.setFeedback(r)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async gitcheckout (dir: string) {
+    // let r = await this.call("dGitProvider","checkout",dir)
+  }
+
+  async gitinit (dir: string) {
+    // let s = await this.call("fileExplorers","getCurrentWorkspace")
+    // let r = await this.call("dGitProvider","init")
+  }
+
+  async gitstatus (dir: string) {
+    //  let r = await this.call("dGitProvider","status",'HEAD')
+    // console.log("git status ", r)
+  }
+
+  async gitadd (dir: string) {
+    // let r = await this.call("dGitProvider","add",dir)
+    // console.log("git add ", r)
+  }
+
+  async gitremove (dir: string) {
+    //  let r = await this.call("dGitProvider","rm",dir)
+    //  console.log("git rm ", r)
+  }
+
+  async gitlog () {
+    //  let r = await this.call("dGitProvider","log",'HEAD')
+    // console.log("git log ", r)
+  }
+
+  async gitcommit () {
+    //  let r = await this.call("dGitProvider","commit",{})
+    //  console.log("git log ", r)
+  }
+
+  async gitlsfiles () {
+    //  let r = await this.call("dGitProvider","lsfiles",'HEAD')
+    // console.log("git log ", r)
+  }
+
+  async gitresolveref () {
+    //  let r = await this.call("dGitProvider","resolveref",'HEAD')
+    //  console.log("git resolve ", r)
+  }
+
+  async gitreadblob (file: string) {
+    //  let c = await this.call("dGitProvider","log",'HEAD')
+    //  console.log(c[c.length-1].oid)
+    //  let r = await this.call("dGitProvider","readblob",{oid:c[c.length-1].oid, filepath:"README.txt"})
+    //  console.log("git blob ", r)
+  }
+
+  async ipfspush () {
+    console.log(await this.call('dGitProvider', 'push'))
+  }
+
+  async pinatapush () {
+    try {
+      const r = await this.call('dGitProvider' as any, 'pin', '124def6d9115e0c2c521', '130c1a8b18fd0c77f9ee8c1614146d277c3def661506dbf1c78618325cc53c8b')
+      console.log(r)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  async pinlist () {
+    try {
+      const r = await this.call('dGitProvider' as any, 'pinList', '124def6d9115e0c2c521', '130c1a8b18fd0c77f9ee8c1614146d277c3def661506dbf1c78618325cc53c8b')
+      console.log(r)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  async ipfspull (cid: string) {
+    try {
+      await this.call('dGitProvider', 'pull', cid)
+    } catch (e) {}
+  }
+
+  async ipfsConfig () {
+    /* try{
+      let r = await this.call("dGitProvider", "setIpfsConfig", {
+        host: 'localhost',
+        port: 5002,
+        protocol: 'http',
+        ipfsurl: 'https://ipfsgw.komputing.org/ipfs/'
+      });
+      console.log(r)
+      }catch(e){
+        console.log(e)
+      }  */
+  }
+
+  async readddir (dir: string) {
+    try {
+      const files = await this.call('fileManager', 'readdir', dir)
+      this.setFeedback(files)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async write (dir: string) {
+    this.call('fileManager', 'setFile', dir, simpleContract)
+  }
+
+  async getcurrentfile () {
+    try {
+      const files = await this.call('fileManager', 'getCurrentFile')
+      this.setFeedback(files)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async switchfile (dir: string) {
+    var files = await this.call('fileManager', 'switchFile', dir)
+  }
+
+  async zip () {
+    const r = await this.call('dGitProvider', 'zip')
+  }
+
+  async fetch (dir: string) {
+    try {
+      var files = await fetch(dir)
+      console.log(files)
+      console.log(files.toString())
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async axios (dir: string) {
+    try {
+      var files = await axios.get(dir)
+      console.log(files)
+      console.log(files.toString())
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async getcompilerconfig () {
+    // let config = await this.call("solidity","getCompilerConfig")
+    // console.log(config)
+  }
+
+  async getWorkSpace () {
+    try {
+      const s = await this.call('filePanel' as any, 'getCurrentWorkspace')
+      this.setFeedback(s)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async getWorkSpaces () {
+    //  let s = await this.call("fileExplorers","getWorkspaces")
+    //  console.log(s)
+  }
+
+  async createWorkSpace (name: string) {
+    try {
+      const s = await this.call('filePanel', 'createWorkspace', name)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async importcontent (dir: string) {
+    console.log('import content')
+    var content = await this.call(
+      'contentImport',
+      'resolve',
+      'ipfs://Qmd1gr9VeQaYNA8wVDq86RwdeMZkfF93JZhhWgfCVewYtc'
+    )
+    console.log('content', content)
+  }
+
+  async open (dir: string) {
+    await this.call('fileManager', 'open', dir)
+  }
+
+  async highlight (f: string) {
+    this.call(
+      'editor',
+      'highlight',
+      {
+        start: {
+          line: 0,
+          column: 1
+        },
+        end: {
+          line: 1,
+          column: 10
+        }
+      },
+      f,
+      '#ffffff'
+    )
+  }
+
+  async addAnnotation (f: string) {
+    this.call('editor', 'addAnnotation', {
+      row: 1,
+      column: 1,
+      text: 'annotation',
+      type: 'error'
+    })
+    this.call('editor', 'addAnnotation', {
+      row: 10,
+      column: 2,
+      text: 'annotation',
+      type: 'info'
+    })
+    this.call('editor', 'addAnnotation', {
+      row: 12,
+      column: 1,
+      text: 'annotation',
+      type: 'warning'
+    })
+  }
+
+  async clearAnnotations (f: string) {
+    this.call('editor', 'clearAnnotations')
+  }
+
+  async activatePlugin (f:string) {
+    try {
+      await this.call('manager', 'activatePlugin', f)
+      this.setFeedback(await this.call('manager', 'isActive', f))
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async deActivatePlugin (f:string) {
+    try {
+      await this.call('manager', 'deactivatePlugin', f)
+      this.setFeedback(await this.call('manager', 'isActive', f))
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async getSettings () {
+    try {
+      const settings = await this.call('udapp', 'getSettings')
+      this.setFeedback(settings)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async setSettings () {
+    const settings = await this.call('udapp', 'setEnvironmentMode', 'injected')
+    await this.getSettings()
+  }
+
+  async debug (hash:string) {
+    const settings = await this.call('remixdprovider' as any, 'debug', hash)
+  }
+
+  async getAccounts () {
+    try {
+      const settings = await this.call('udapp', 'getAccounts')
+      this.setFeedback(settings)
+    } catch (e) {
+      this.setFeedback(e.message)
+    }
+  }
+
+  async soltest () {
+    const f = `pragma solidity >=0.4.0 <0.7.0;
+
+    contract SimpleStorage {
+        uint storedData;
+        
+        // a public function named set that returns a uint goes here
+        function set(uint _p1) public returns (uint) {
+            storedData = _p1;
+        }
+        
+       function get() public view returns (uint) {
+            return storedData;
+        }
+    }
+    `
+
+    const t = `pragma solidity >=0.4.0 <0.7.0;
+    import "remix_tests.sol"; // this import is automatically injected by Remix.
+    import "./modifyVariable.sol";
+    
+    contract test3 {
+    
+        SimpleStorage storageToTest;
+        function beforeAll () public {
+           storageToTest = new SimpleStorage();
+        }
+    
+        function checkSetFunction () public {
+            storageToTest.set(12345);
+            Assert.equal(storageToTest.get(), uint(12345), "the contract should contain the function set");
+        }
+    }
+    `
+
+    console.log(f)
+    console.log(t)
+
+    await this.call('fileManager', 'setFile', '/modifyVariable.sol', f)
+    await this.call('fileManager', 'switchFile', '/modifyVariable.sol')
+    await this.call('fileManager', 'setFile', '/modifyVariable_test.sol', t)
+    const result = await this.call(
+      'solidityUnitTesting',
+      'testFromPath',
+      'modifyVariable_test.sol'
+    )
+    return result.errors
+  }
+
+  async disableCallBacks () {
+    this.callBackEnabled = false
+  }
+
+  async enableCallBacks () {
+    this.callBackEnabled = true
+  }
+}

apps/remix-ide-e2e/src/local-plugin/src/app/app.tsx

@@ -1,37 +1,83 @@
-import React, { useEffect, useState } from 'react'
-import { PluginClient } from '@remixproject/plugin'
-import { createClient } from '@remixproject/plugin-webview'
 
-import './app.css'
+import React, { useState } from 'react'
+import './App.css'
+import { WorkSpacePlugin } from './Client'
+import { Logger } from './logger'
 
-import { ReactComponent as Logo } from './logo.svg'
+export const client = new WorkSpacePlugin()
 
-export const App = () => {
+function App () {
-  const [remixClient, setRemixClient] = useState(null)
+  const [payload, setPayload] = useState<string>('')
+  const [result, setResult] = useState<string>()
 
-  useEffect(() => {
+  const handleChange = ({ target }: any) => {
-    (async () => {
+    setPayload(target.value)
-      const client = createClient(new PluginClient())
+  }
-
-      await client.onload()
-      console.log('Local plugin loaded')
-      setRemixClient(client)
-    })()
-  }, [])
 
-  const handleClick = () => {
+  const test = async () => {
-    remixClient.call('manager', 'activatePlugin', 'LearnEth')
+    setResult('')
+    const r = await client.soltest()
+    setResult('test done')
   }
 
   return (
-    <div className="app">
+    <div className="App">
-      <header className="flex">
+      <div>v5</div>
-        <Logo width="75" height="75" />
+      <Logger></Logger>
-        <h1>Welcome to local-plugin!</h1>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.zip()}>zip</button>
-      </header>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.ipfspush()}>ipfs push</button>
-      <main>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.ipfspull(payload)}>ipfs pull</button>
-        <button data-id="btnActivateRemixd" onClick={handleClick}>Activate Learneth</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.ipfsConfig()}>ipfs config</button>
-      </main>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getAccounts()}>get accounts</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.setSettings()}>set settings to injected</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getSettings()}>get settings</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await test()}>run sol test</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.highlight(payload)}>highlight</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.addAnnotation(payload)}>annotation</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.clearAnnotations(payload)}>clear annotation</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.open(payload)}>openfile</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.readddir(payload)}>readdir</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.write(payload)}>write</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.switchfile(payload)}>switch to file</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getcurrentfile()}>getcurrentfile</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.importcontent(payload)}>import content resolve</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.fetch(payload)}>api test fetch</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.axios(payload)}>api test axios</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.activate()}>activate</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.deactivate()}>deactivate</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getresult()}>get compilation result</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getcompilerconfig()}>get compiler config</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getWorkSpace()}>get workspace</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.getWorkSpaces()}>get workspaces</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.createWorkSpace(payload)}>create workspace</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitinit(payload)}>git init</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitstatus(payload)}>git status</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitlog()}>git log</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitcommit()}>git commit</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitadd(payload)}>git add</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitremove(payload)}>git rm</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitlsfiles()}>git ls files</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitreadblob(payload)}>git read blob</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitresolveref()}>git resolve head</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitbranches()}>git branches</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitbranch(payload)}>git create branch</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitcheckout(payload)}>git checkout</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.gitcurrentbranch()}>git current branch</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.changetoinjected()}>change to injected</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.pinatapush()}>pinata write</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.pinlist()}>pinata list</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.setCallBacks()}>callbacks</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.log('')}>log</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.activatePlugin(payload)}>activate</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.deActivatePlugin(payload)}>deactivate</button>
+      <button className='btn btn-primary btn-sm' onClick={async () => await client.debug(payload)}>debug</button>
+      <input
+        type="text"
+        id="payload"
+        placeholder="Enter payload here..."
+        value={payload}
+        onChange={handleChange}
+      />
     </div>
   )
 }

apps/remix-ide-e2e/src/local-plugin/src/app/logger.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { useBehaviorSubject } from './usesubscribe/index'
+import { client } from './app'
+
+interface loggerProps {
+
+}
+
+export const Logger: React.FC<loggerProps> = ({}) => {
+  const log = useBehaviorSubject(client.feedback)
+  return (<div id='log'>{typeof log === 'string' ? log : JSON.stringify(log)}</div>)
+}

apps/remix-ide-e2e/src/local-plugin/src/app/usesubscribe/index.ts

@@ -0,0 +1 @@
+export * from './use-observable'

apps/remix-ide-e2e/src/local-plugin/src/app/usesubscribe/use-observable.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+import { Subscribable, BehaviorSubject, Observable, Subject } from 'rxjs'
+
+export const useSubscribable = <T>(
+  s: Subscribable<T>,
+  defaultValue?: T
+) => {
+  const [value, setValue] = useState(defaultValue)
+  useEffect(
+    () => {
+      const subscription = s.subscribe(setValue)
+      return () => subscription.unsubscribe()
+    },
+    [s]
+  )
+  return value
+}
+export const useRx = useSubscribable
+
+export const useObservable = <T>(
+  o: Observable<T>,
+  defaultValue?: T
+) => useSubscribable(o, defaultValue)
+
+export const useSubject = <T>(
+  s: Subject<T>,
+  defaultValue?: T
+) => useSubscribable(s, defaultValue)
+
+export const useBehaviorSubject = <T>(
+  s: BehaviorSubject<T>
+) => useSubscribable(s, s.value)

apps/remix-ide-e2e/src/local-plugin/tests/plugin-api.test.ts

@@ -0,0 +1,125 @@
+import { Selector, RequestLogger, Role } from 'testcafe'
+import { Profile, LocationProfile, ExternalProfile } from '@remixproject/plugin-utils'
+
+const logger = RequestLogger()
+
+const role = Role(process.env.TEST_URL || 'http://localhost:8080', async t => {
+
+})
+
+fixture`DGIT production tests`
+  .page(process.env.TEST_URL || 'http://localhost:8080')
+  .beforeEach(async t => {
+
+  })
+const openPlugin = async (t: TestController, plugin: string) => {
+  await t.click(`#icon-panel div[plugin="${plugin}"]`)
+}
+
+interface dataIdSelectorInterface extends Selector {
+  select(id: string): Promise<any>
+}
+
+const dataIdSelector = async (id:string) => { return Selector(`[data-id="${id}"]`) }
+
+const installPlugin = async (t: TestController, profile: Profile & LocationProfile & ExternalProfile) => {
+  await t.click('*[plugin="pluginManager"]')
+    .click('*[data-id="pluginManagerComponentPluginSearchButton')
+    // cy.get(`*[data-id="pluginManagerLocalPluginModalDialogModalDialogModalTitle-react`).should('be.visible')
+    .typeText('*[data-id="localPluginName', profile.name)
+    .typeText('*[data-id="localPluginDisplayName', profile.displayName)
+    .typeText('*[data-id="localPluginUrl', profile.url)
+    .typeText('*[data-id="localPluginCanActivate', profile.canActivate && profile.canActivate.join(','))
+    .click('*[data-id="pluginManagerLocalPluginModalDialog-modal-footer-ok-react"').click('*[plugin="pluginManager"]')
+}
+
+const expectLogMessage = async (t: TestController, msg: any) => {
+  if (typeof msg !== 'string') msg = JSON.stringify(msg)
+  const message = await Selector('#log').textContent
+  console.log(message)
+  await t.expect(message.includes(msg)).ok()
+}
+
+const localPluginData = {
+  name: 'localplugin',
+  displayName: 'localplugin',
+  location: 'sidePanel',
+  url: 'http://localhost:2020',
+  canActivate: [
+    'dGitProvider,flattener'
+  ]
+}
+
+test('install plugin', async t => {
+  // exists doesn't wait with timeouts, this is a hack but it works, it will wait for buttons to appear
+  // https://testcafe.io/documentation/402829/guides/basic-guides/select-page-elements#selector-timeout
+  await Selector('Button', { timeout: 120000 }).innerText
+  if (await Selector('Button').withText('Sure').exists) {
+    await t.click(Selector('Button').withText('Sure'))
+  }
+  await t.click('.introjs-skipbutton')
+  await installPlugin(t, localPluginData)
+})
+
+test.disablePageReloads('switch to plugin', async t => {
+  await t
+    .click('#verticalIconsKindpluginManager')
+  // .click('[data-id="pluginManagerComponentActivateButtondgittest"]')
+    .click('[data-id="verticalIconsKindlocalplugin"]')
+    .switchToIframe('#plugin-localplugin')
+})
+
+test.disablePageReloads('not be able to get current file', async t => {
+  await t
+    .click(Selector('Button').withText('getcurrentfile'))
+  await expectLogMessage(t, 'Error from IDE : Error: No such file or directory No file selected')
+})
+
+test.disablePageReloads('be able to get current file', async t => {
+  await t
+    .switchToMainWindow()
+
+  await openPlugin(t, 'filePanel')
+  await t.click(await dataIdSelector('treeViewLitreeViewItemREADME.txt'))
+  await openPlugin(t, localPluginData.name)
+  await t.switchToIframe('#plugin-localplugin')
+    .click(Selector('Button')
+      .withText('getcurrentfile'))
+
+  await expectLogMessage(t, 'README.txt')
+})
+
+test.disablePageReloads('gets the current workspace', async t => {
+  await t.click(Selector('Button')
+    .withText('get workspace'))
+  await expectLogMessage(t, { name: 'default_workspace', isLocalhost: false, absolutePath: '.workspaces/default_workspace' })
+})
+
+test.disablePageReloads('creates a workspace', async t => {
+  await t.typeText('#payload', 'testing')
+    .click(Selector('Button')
+      .withText('create workspace')).wait(2000).click(Selector('Button')
+      .withText('get workspace'))
+  await expectLogMessage(t, { name: 'testing', isLocalhost: false, absolutePath: '.workspaces/testing' })
+})
+
+test.disablePageReloads('get file list', async t => {
+  await t.typeText('#payload', '/', { replace: true })
+    .click(Selector('Button')
+      .withText('readdir'))
+  await expectLogMessage(t, { contracts: { isDirectory: true }, scripts: { isDirectory: true }, tests: { isDirectory: true }, 'README.txt': { isDirectory: false } })
+})
+
+test.disablePageReloads('open a file', async t => {
+  const file = 'contracts/2_Owner.sol'
+  await t.typeText('#payload', file, { replace: true })
+    .click(Selector('Button')
+      .withText('openfile'))
+
+  await expectLogMessage(t, { event: 'currentFileChanged', result: file })
+
+  await t.click(Selector('Button')
+    .withText('getcurrentfile'))
+
+  await expectLogMessage(t, file)
+})

apps/remix-ide/ci/browser_tests_plugin_api.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+set -e
+
+BUILD_ID=${CIRCLE_BUILD_NUM:-${TRAVIS_JOB_NUMBER}}
+echo "$BUILD_ID"
+TEST_EXITCODE=0
+
+npm run serve &
+npx nx serve remix-ide-e2e-src-local-plugin &
+
+sleep 5
+
+npm run testcafe_local_pluginApi || TEST_EXITCODE=1
+
+echo "$TEST_EXITCODE"
+if [ "$TEST_EXITCODE" -eq 1 ]
+then
+  exit 1
+fi

package.json

@@ -90,6 +90,7 @@
     "nightwatch_local_runAndDeploy": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/runAndDeploy.js --env=chrome-runAndDeploy",
     "nightwatch_local_url": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/url.spec.js --env=chrome",
     "nightwatch_local_verticalIconscontextmenu": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/verticalIconsPanel.spec.js --env=chrome",
+    "testcafe_local_pluginApi": "testcafe --config-file apps/remix-ide-e2e/src/local-plugin/.testcaferc.js apps/remix-ide-e2e/src/local-plugin/tests/plugin-api.test.ts",
     "onchange": "onchange apps/remix-ide/build/app.js -- npm-run-all lint",
     "remixd": "nx build remixd && nx serve remixd --folder=./apps/remix-ide/contracts --remixide=http://127.0.0.1:8080",
     "selenium": "selenium-standalone start",
@@ -294,6 +295,7 @@
     "tap-spec": "^5.0.0",
     "tape": "^4.13.3",
     "terser-webpack-plugin": "^4.2.3",
+    "testcafe": "^1.16.1",
     "ts-jest": "^27.0.5",
     "ts-node": "^7.0.1",
     "tslint": "~6.0.0",