refactor

apps/remixdocgen/src/app/App.tsx

@@ -5,6 +5,9 @@ import {
 
 import './App.css'
 import { DocGenClient } from './docgen-client'
+import { Build } from './docgen/site'
+
+export const client =  new DocGenClient()
 
 export const getNewContractNames = (compilationResult: CompilationResult) => {
   const compiledContracts = compilationResult.contracts
@@ -18,28 +21,35 @@ export const getNewContractNames = (compilationResult: CompilationResult) => {
 }
 
 const App = () => {
-  const client = useMemo(() => new DocGenClient(), [])
+ 
   const [themeType, setThemeType] = useState<string>('dark');
+  const [hasBuild, setHasBuild] = useState<boolean>(false);
+  const [fileName, setFileName] = useState<string>('');
 
   useEffect(() => {
     const watchThemeSwitch = async () => {
-      //await client.call("manager" as any, "activatePlugin", "ethdoc-viewer");
-
-      const currentTheme = await client.call('theme', 'currentTheme');
-
-      setThemeType(currentTheme.brightness || currentTheme.quality);
+      client.eventEmitter.on('themeChanged', (theme: string) => {
+        console.log('themeChanged', theme)
+        setThemeType(theme)
+      })
+      client.eventEmitter.on('compilationFinished', (build: Build, fileName: string) => {
+        setHasBuild(true)
+        setFileName(fileName)
+      })
+      client.eventEmitter.on('docsGenerated', (docs: string[]) => {
+        console.log('docsGenerated', docs)
+      })
 
-      client.on("theme", "themeChanged", (theme: any) => {
-        setThemeType(theme.quality);
-      });
     };
 
     watchThemeSwitch();
-  }, [client]);
+  }, []);
 
   return (
     <div>
       <h1>Remix Docgen</h1>
+      {fileName && <h2>File: {fileName}</h2>}
+      {hasBuild && <button onClick={() => client.generateDocs()}>Generate doc</button>}
     </div>
   )
 };

apps/remixdocgen/src/app/docgen-client.ts

@@ -1,22 +1,72 @@
 import { PluginClient } from '@remixproject/plugin'
+import { CompilationResult, SourceWithTarget } from '@remixproject/plugin-api'
 import { createClient } from '@remixproject/plugin-webview'
-import { DocGen } from './plugins/docgen'
+import EventEmitter from 'events'
+import { Config, defaults } from './docgen/config'
+import { Build, buildSite } from './docgen/site'
+import { loadTemplates } from './docgen/templates'
+import {SolcInput, SolcOutput} from 'solidity-ast/solc'
+import { render } from './docgen/render'
 
 export class DocGenClient extends PluginClient {
-  private client
-  private docgen
+  private currentTheme
+  public eventEmitter: EventEmitter
+  private build: Build
   
   constructor() {
     super()
-    this.client = createClient(this)
+    this.eventEmitter = new EventEmitter()
+    createClient(this)
     // this.docgen = new DocGen()
     this.methods = ['generateDocs', 'publishDocs']
+    this.onload().then(async () => {
+      console.log('docgen client loaded')
+      await this.setListeners()
+    })
   }
-  loadClient() {
-    this.client.onload()
+
+  async setListeners() {
+    this.currentTheme = await this.call('theme', 'currentTheme');
+    this.on("theme", "themeChanged", (theme: any) => {
+      this.currentTheme = theme
+      this.eventEmitter.emit('themeChanged', this.currentTheme)
+    });
+    this.eventEmitter.emit('themeChanged', this.currentTheme)
+
+    this.on('solidity', 'compilationFinished', (fileName: string, source: SourceWithTarget, languageVersion: string, data: CompilationResult) => {
+      console.log('docgen client compilationFinished', data, source)
+      const input: SolcInput = {
+        sources: source.sources
+      }
+      const output: SolcOutput = {
+        sources: data.sources as any
+      }
+      this.build = {
+        input: input,
+        output: output
+      }
+
+      this.eventEmitter.emit('compilationFinished', this.build, fileName)
+
+    })
   }
+
+  async docgen(builds: Build[], userConfig?: Config): Promise<void> {
+    const config = { ...defaults, ...userConfig }
+    const templates = await loadTemplates(config.theme, config.root, config.templates)
+    const site = buildSite(builds, config, templates.properties ?? {})
+    const renderedSite = render(site, templates, config.collapseNewlines)
+    const docs: string[] = []
+    for (const { id, contents } of renderedSite) {
+      await this.call('fileManager', 'setFile', id, contents)
+      docs.push(id)
+    }
+    this.eventEmitter.emit('docsGenerated', docs)
+  }
+
   async generateDocs() {
     console.log('docgen client generateDocs')
+    this.docgen([this.build])
   }
 
   async publishDocs() {

apps/remixdocgen/src/app/plugins/docgen.ts

@@ -1,44 +0,0 @@
-'use strict'
-import { Plugin } from '@remixproject/engine'
-import { Build, buildSite } from './docgen/site';
-import { render } from './docgen/render';
-import { Config, defaults } from './docgen/config';
-import { loadTemplates } from './docgen/templates';
-import { SolcInput, SolcOutput } from 'solidity-ast/solc';
-
-const profile = {
-  name: 'docgen',
-  desciption: 'solidity doc gen plugin for Remix',
-  methods: ['docgen'],
-  events: [''],
-  version: '0.0.1'
-}
-
-
-
-export class DocGen extends Plugin {
-
-  constructor() {
-    super(profile)
-  }
-
-  onActivation(): void {
-    //this.docgen([{ output: example, input: inp }])
-    this.on('solidity', 'compilationFinished', (file, source, languageVersion, data, input, version) => {
-      this.docgen([{ output: data, input: JSON.parse(input) }])
-    })
-  }
-
-  async docgen(builds: Build[], userConfig?: Config): Promise<void> {
-    const config = { ...defaults, ...userConfig }
-    const templates = await loadTemplates(config.theme, config.root, config.templates)
-    const site = buildSite(builds, config, templates.properties ?? {})
-    const renderedSite = render(site, templates, config.collapseNewlines)
-    console.log({ renderedSite })
-    for (const { id, contents } of renderedSite) {
-      await this.call('fileManager', 'setFile', id, contents)
-    }
-  }
-
-
-}