Add Sol2Uml To Remix

apps/remix-ide-e2e/src/tests/ballot.test.ts

@@ -236,7 +236,7 @@ module.exports = {
       .waitForElementVisible('select[id="compilierLanguageSelector"]', 10000)
       .click('select[id="compilierLanguageSelector"]')
       .click('select[id="compilierLanguageSelector"] option[value=Yul]')
-      .waitForElementContainsText('[data-id="compiledContracts"]', 'Contract', 60000)
+      .waitForElementContainsText('[data-id="compiledContracts"]', 'Contract', 65000)
       .clickLaunchIcon('udapp')
       .click('*[data-id="Deploy - transact (not payable)"]')
       .waitForElementPresent('*[data-id="universalDappUiContractActionWrapper"]', 60000)

apps/remix-ide/src/app.js

@@ -35,6 +35,8 @@ import { Injected0ptimismProvider } from './app/tabs/injected-optimism-provider'
 import { InjectedArbitrumOneProvider } from './app/tabs/injected-arbitrum-one-provider'
 import { FileDecorator } from './app/plugins/file-decorator'
 import { CodeFormat } from './app/plugins/code-format'
+import { SolidityUmlGen } from './app/plugins/solidity-umlgen'
+import { ContractFlattener } from './app/plugins/contractFlattener'
 
 const isElectron = require('is-electron')
 
@@ -173,6 +175,12 @@ class AppComponent {
     //----- search
     const search = new SearchPlugin()
 
+    //---------------- Solidity UML Generator -------------------------
+    const solidityumlgen = new SolidityUmlGen(appManager)
+
+    // ----------------- ContractFlattener ----------------------------
+    const contractFlattener = new ContractFlattener()
+
     // ----------------- import content service ------------------------
     const contentImport = new CompilerImports()
 
@@ -265,7 +273,9 @@ class AppComponent {
       injected0ptimismProvider,
       injectedArbitrumOneProvider,
       this.walkthroughService,
-      search
+      search,
+      solidityumlgen,
+      contractFlattener
     ])
 
     // LAYOUT & SYSTEM VIEWS

apps/remix-ide/src/app/files/fileManager.ts

@@ -5,6 +5,7 @@ import Registry from '../state/registry'
 import { EventEmitter } from 'events'
 import { fileChangedToastMsg, recursivePasteToastMsg, storageFullMessage } from '@remix-ui/helper'
 import helper from '../../lib/helper.js'
+import { RemixAppManager } from '../../remixAppManager'
 
 /*
   attach to files event (removed renamed)
@@ -40,7 +41,7 @@ class FileManager extends Plugin {
   events: EventEmitter
   editor: any
   _components: any
-  appManager: any
+  appManager: RemixAppManager
   _deps: any
   getCurrentFile: () => any
   getFile: (path: any) => Promise<unknown>
@@ -622,13 +623,15 @@ class FileManager extends Plugin {
       file = resolved.file
       await this.saveCurrentFile()
       if (this.currentFile() === file) return
+
       const provider = resolved.provider
       this._deps.config.set('currentFile', file)
       this.openedFiles[file] = file
 
       let content = ''
       try {
-        content = await provider.get(file)   
+        content = await provider.get(file)
+
       } catch (error) {
         console.log(error)
         throw error

apps/remix-ide/src/app/panels/tab-proxy.js

@@ -33,7 +33,7 @@ export class TabProxy extends Plugin {
 
     this.on('fileManager', 'filesAllClosed', () => {
       this.call('manager', 'activatePlugin', 'home')
-      this.tabsApi.activateTab('home')
+      this.focus('home')
     })
 
     this.on('fileManager', 'fileRemoved', (name) => {

apps/remix-ide/src/app/plugins/contractFlattener.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Plugin } from '@remixproject/engine'
+import { customAction } from '@remixproject/plugin-api'
+import { concatSourceFiles, getDependencyGraph } from '@remix-ui/solidity-compiler'
+
+const profile = {
+  name: 'contractflattener',
+  displayName: 'Contract Flattener',
+  description: 'Flatten solidity contracts',
+  methods: ['flattenAContract'],
+  events: [],
+}
+
+export class ContractFlattener extends Plugin {
+  fileName: string
+  constructor() {
+    super(profile)
+    this.fileName = ''
+  }
+
+  onActivation(): void {
+    this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
+      await this.flattenContract(source, this.fileName, data)
+    })  
+  }
+
+  async flattenAContract(action: customAction) {
+    this.fileName = action.path[0]
+    this.call('solidity', 'compile', this.fileName)
+  }
+
+  /**
+   * Takes currently compiled contract that has a bunch of imports at the top
+   * and flattens them ready for UML creation. Takes the flattened result
+   * and assigns to a local property
+   * @returns {Promise<string>}
+   */
+  async flattenContract (source: any, filePath: string, data: any) {
+    const ast = data.sources
+    const dependencyGraph = getDependencyGraph(ast, filePath)
+    const sorted = dependencyGraph.isEmpty()
+        ? [filePath]
+        : dependencyGraph.sort().reverse()
+    const sources = source.sources
+    const result = concatSourceFiles(sorted, sources)
+    await this.call('fileManager', 'writeFile', `${filePath}_flattened.sol`, result)
+    return result
+  }
+}

apps/remix-ide/src/app/plugins/solidity-umlgen.tsx

@@ -0,0 +1,159 @@
+/* eslint-disable @nrwl/nx/enforce-module-boundaries */
+import { ViewPlugin } from '@remixproject/engine-web'
+import React from 'react'
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import { RemixUiSolidityUmlGen } from '@remix-ui/solidity-uml-gen' 
+import { ISolidityUmlGen } from 'libs/remix-ui/solidity-uml-gen/src/types'
+import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
+import { concatSourceFiles, getDependencyGraph } from 'libs/remix-ui/solidity-compiler/src/lib/logic/flattenerUtilities'
+import { convertUmlClasses2Dot } from 'sol2uml/lib/converterClasses2Dot'
+import { convertAST2UmlClasses } from 'sol2uml/lib/converterAST2Classes'
+import vizRenderStringSync from '@aduh95/viz.js/sync'
+import { PluginViewWrapper } from '@remix-ui/helper'
+import { customAction } from '@remixproject/plugin-api'
+const parser = (window as any).SolidityParser
+
+const profile = {
+    name: 'solidityumlgen',
+    displayName: 'Solidity UML Generator',
+    description: 'Generate UML diagram in svg format from last compiled contract',
+    location: 'mainPanel',
+    methods: ['showUmlDiagram', 'generateUml', 'generateCustomAction'],
+    events: [],
+}
+
+export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
+  element: HTMLDivElement
+  currentFile: string
+  svgPayload: string
+  updatedSvg: string
+  currentlySelectedTheme: string
+  loading: boolean
+
+  appManager: RemixAppManager
+  dispatch: React.Dispatch<any> = () => {}
+  constructor(appManager: RemixAppManager) {
+    super(profile)
+    this.currentFile = ''
+    this.svgPayload = ''
+    this.updatedSvg = ''
+    this.loading = false
+    this.currentlySelectedTheme = ''
+    this.appManager = appManager
+    this.element = document.createElement('div')
+    this.element.setAttribute('id', 'sol-uml-gen')
+  }
+
+  onActivation(): void {
+    if (this.currentFile.length < 1) 
+    this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
+      let result = ''
+      try {
+        if (data.sources && Object.keys(data.sources).length > 1) { // we should flatten first as there are multiple asts
+          result = await this.flattenContract(source, this.currentFile, data)
+        }
+        const ast = result.length > 1 ? parser.parse(result) : parser.parse(source.sources[this.currentFile].content)
+        const umlClasses = convertAST2UmlClasses(ast, this.currentFile)
+        const umlDot = convertUmlClasses2Dot(umlClasses)
+        const payload = vizRenderStringSync(umlDot)
+        const currentTheme = await this.call('theme', 'currentTheme')
+        this.currentlySelectedTheme = currentTheme.quality
+        this.updatedSvg = payload
+        this.renderComponent()
+      } catch (error) {
+        console.log({ error })
+      }
+    })
+    this.on('theme', 'themeChanged', (theme) => {
+      this.currentlySelectedTheme = theme.quality
+      this.renderComponent()
+    })
+  }
+
+  async mangleSvgPayload(svgPayload: string) : Promise<string> {
+    const parser = new DOMParser()
+    const themeQuality = await this.call('theme', 'currentTheme')
+    const parsedDocument = parser.parseFromString(svgPayload, 'image/svg+xml')
+    const res = parsedDocument.documentElement
+    parsedDocument.bgColor = '#cccabc'
+    res.style.filter = themeQuality.quality === 'dark' ? 'invert(1)' : 'invert(0)'
+    const stringifiedSvg = new XMLSerializer().serializeToString(parsedDocument)
+    console.log({ parsedDocument, themeQuality, stringifiedSvg })
+    return stringifiedSvg
+  }
+
+  onDeactivation(): void {
+    this.off('solidity', 'compilationFinished')
+  }
+
+  generateCustomAction = async (action: customAction) => {
+    this.currentFile = action.path[0]
+    await this.generateUml(action.path[0])
+  }
+
+  async generateUml(currentFile: string) {
+    await this.call('solidity', 'compile', currentFile)
+    await this.call('tabs', 'focus', 'solidityumlgen')
+    this.loading = true
+    this.renderComponent()
+  }
+
+  /**
+   * Takes currently compiled contract that has a bunch of imports at the top
+   * and flattens them ready for UML creation. Takes the flattened result
+   * and assigns to a local property
+   * @returns {Promise<string>}
+   */
+  async flattenContract (source: any, filePath: string, data: any) {
+    const hold = { data, source, filePath }
+    const ast = data.sources
+    const dependencyGraph = getDependencyGraph(ast, filePath)
+    const sorted = dependencyGraph.isEmpty()
+        ? [filePath]
+        : dependencyGraph.sort().reverse()
+    const sources = source.sources
+    const result = concatSourceFiles(sorted, sources)
+    await this.call('fileManager', 'writeFile', `${filePath}_flattened.sol`, result)
+    return result
+  }
+
+  async showUmlDiagram(svgPayload: string) {
+    this.updatedSvg = svgPayload
+    this.renderComponent()
+  }
+
+  hideSpinner() {
+    this.loading = false
+    this.renderComponent()
+  }
+
+  setDispatch (dispatch: React.Dispatch<any>) {
+    this.dispatch = dispatch
+    this.renderComponent()
+  }
+
+  render() {
+    return <div id='sol-uml-gen'>
+      <PluginViewWrapper plugin={this} />
+    </div>
+  }
+
+  renderComponent () {
+    this.dispatch({
+      ...this,
+      updatedSvg: this.updatedSvg,
+      loading: this.loading,
+      themeSelected: this.currentlySelectedTheme
+    })
+  }
+
+  updateComponent(state: any) {
+    return <RemixUiSolidityUmlGen
+      plugin={state}
+      updatedSvg={state.updatedSvg}
+      loading={state.loading}
+      themeSelected={state.currentlySelectedTheme}
+    />
+  }
+}
+

apps/remix-ide/src/app/tabs/locales/en/solidity.json

@@ -22,6 +22,10 @@
   "solidity.noFileSelected": "no file selected",
   "solidity.compileAndRunScript": "Compile and Run script",
   "solidity.publishOn": "Publish on",
+  "solidity.flatten": "Flatten contracts before UML generation.",
+  "solidity.generateUML": "Generate a UML diagram of your contract.",
+  "solidity.flattenLabel": "Flatten",
+  "solidity.generateUMLLabel": "Generate UML Diagram",
   "solidity.Assembly": "Assembly opcodes describing the contract including corresponding solidity source code",
   "solidity.Opcodes": "Assembly opcodes describing the contract",
   "solidity.name": "Name of the compiled contract",

apps/remix-ide/src/app/tabs/locales/zh/solidity.json

@@ -22,6 +22,10 @@
   "solidity.noFileSelected": "未选中文件",
   "solidity.compileAndRunScript": "编译且执行脚本",
   "solidity.publishOn": "发布到",
+  "solidity.flatten": "",
+  "solidity.generateUML": "",
+  "solidity.flattenLabel": "",
+  "solidity.generateUMLLabel": "",
   "solidity.Assembly": "合约的汇编操作码，包含对应的solidity源程序",
   "solidity.Opcodes": "合约的汇编操作码",
   "solidity.name": "已编译合约的名称",

apps/remix-ide/src/app/tabs/theme-module.js

@@ -53,7 +53,9 @@ export class ThemeModule extends Plugin {
     this.forced = !!queryTheme
   }
 
-  /** Return the active theme */
+  /** Return the active theme 
+   * @return {{ name: string, quality: string, url: string }} - The active theme
+  */
   currentTheme () {
     return this.themes[this.active]
   }

apps/remix-ide/src/remixAppManager.js

@@ -11,7 +11,7 @@ const requiredModules = [ // services + layout views + system views
   'filePanel', 'terminal', 'settings', 'pluginManager', 'tabs', 'udapp', 'dGitProvider', 'solidity', 'solidity-logic', 'gistHandler', 'layout',
   'notification', 'permissionhandler', 'walkthrough', 'storage', 'restorebackupzip', 'link-libraries', 'deploy-libraries', 'openzeppelin-proxy', 
   'hardhat-provider', 'ganache-provider', 'foundry-provider', 'basic-http-provider', 'injected-optimism-provider', 'injected-arbitrum-one-provider',
-  'compileAndRun', 'search', 'recorder', 'fileDecorator', 'codeParser', 'codeFormatter']
+  'compileAndRun', 'search', 'recorder', 'fileDecorator', 'codeParser', 'codeFormatter', 'solidityumlgen', 'contractflattener']
 
 // dependentModules shouldn't be manually activated (e.g hardhat is activated by remixd)
 const dependentModules = ['foundry', 'hardhat', 'truffle', 'slither'] 
@@ -157,8 +157,8 @@ export class RemixAppManager extends PluginManager {
 
   async registerContextMenuItems() {
     await this.call('filePanel', 'registerContextMenuItem', {
-      id: 'flattener',
-      name: 'flattenFileCustomAction',
+      id: 'contractflattener',
+      name: 'flattenAContract',
       label: 'Flatten',
       type: [],
       extension: ['.sol'],
@@ -176,6 +176,16 @@ export class RemixAppManager extends PluginManager {
       pattern: [],
       sticky: true
     })
+    await this.call('filePanel', 'registerContextMenuItem', {
+      id: 'solidityumlgen',
+      name: 'generateCustomAction',
+      label: 'Generate UML',
+      type: [],
+      extension: ['.sol'],
+      path: [],
+      pattern: [],
+      sticky: true
+    })
   }
 }
 

libs/remix-lib/src/types/ICompilerApi.ts

@@ -34,7 +34,7 @@ export interface ICompilerApi {
 
     resolveContentAndSave: (url: string) => Promise<string>
     fileExists: (file: string) => Promise<boolean>
-    writeFile: (file: string, content: string) => Promise<void>
+    writeFile: (file: string, content: any) => Promise<void>
     readFile: (file: string) => Promise<string>
     open: (file: string) => void
     saveCurrentFile: () => void

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

@@ -78,6 +78,7 @@ const RemixApp = (props: IRemixAppUi) => {
   }
 
   return (
+    //@ts-ignore
     <IntlProvider locale={locale.code} messages={locale.messages}>
       <AppProvider value={value}>
         <OriginWarning></OriginWarning>

libs/remix-ui/solidity-compiler/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/solidity-compiler'
 export * from './lib/logic'
+export * from './lib/logic/flattenerUtilities'