Noir Compiler

apps/circuit-compiler/src/app/components/container.tsx

@@ -1,17 +1,17 @@
 import { useContext } from 'react'
-import { CustomTooltip, RenderIf } from '@remix-ui/helper'
+import { CompileBtn, CustomTooltip, RenderIf } from '@remix-ui/helper'
 import { FormattedMessage } from 'react-intl'
 import { CircuitAppContext } from '../contexts'
-import { CompileOptions } from './options'
+import { CompileOptions, CompilerReport } from '@remix-ui/helper'
 import { VersionList } from './versions'
 import { Toggler } from './toggler'
 import { Configurations } from './configurations'
-import { CircuitActions } from './actions'
 import { WitnessSection } from './witness'
-import { CompilerFeedback } from './feedback'
-import { CompilerReport, PrimeValue } from '../types'
+import { CompilerFeedback } from '@remix-ui/helper'
+import { PrimeValue } from '../types'
 import { SetupExports } from './setupExports'
 import { GenerateProof } from './generateProof'
+import { compileCircuit } from '../actions'
 
 export function Container () {
   const circuitApp = useContext(CircuitAppContext)
@@ -34,15 +34,19 @@ export function Container () {
     circuitApp.dispatch({ type: 'SET_COMPILER_VERSION', payload: version })
   }
 
-  const handleOpenErrorLocation = async (location: string, startRange: string) => {
-    if (location) {
-      const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)
+  const handleOpenErrorLocation = async (report: CompilerReport) => {
+    if (report.labels.length > 0) {
+      const location = circuitApp.appState.filePathToId[report.labels[0].file_id]
+      const startRange = report.labels[0].range.start
+      if (location) {
+        const fullPathLocation = await circuitApp.plugin.resolveReportPath(location)
 
-      await circuitApp.plugin.call('fileManager', 'open', fullPathLocation)
-      // @ts-ignore
-      const startPosition: { lineNumber: number; column: number } = await circuitApp.plugin.call('editor', 'getPositionAt', startRange)
-      // @ts-ignore
-      await circuitApp.plugin.call('editor', 'gotoLine', startPosition.lineNumber - 1, startPosition.column)
+        await circuitApp.plugin.call('fileManager', 'open', fullPathLocation)
+        // @ts-ignore
+        const startPosition: { lineNumber: number; column: number } = await circuitApp.plugin.call('editor', 'getPositionAt', startRange)
+        // @ts-ignore
+        await circuitApp.plugin.call('editor', 'gotoLine', startPosition.lineNumber - 1, startPosition.column)
+      }
     }
   }
 
@@ -102,6 +106,10 @@ export function Container () {
     }
   }
 
+  const handleCompileClick = () => {
+    compileCircuit(circuitApp.plugin, circuitApp.appState)
+  }
+
   return (
     <section>
       <article>
@@ -123,7 +131,9 @@ export function Container () {
             <Toggler title='circuit.advancedConfigurations' dataId=''>
               <Configurations setPrimeValue={handlePrimeChange} primeValue={circuitApp.appState.primeValue} versionValue={circuitApp.appState.version} />
             </Toggler>
-            <CircuitActions />
+            <div className="pb-2">
+              <CompileBtn id='circuit' plugin={circuitApp.plugin} appState={circuitApp.appState} compileAction={handleCompileClick} />
+            </div>
             <RenderIf condition={circuitApp.appState.status !== 'compiling'}>
               <CompilerFeedback feedback={circuitApp.appState.compilerFeedback} filePathToId={circuitApp.appState.filePathToId} openErrorLocation={handleOpenErrorLocation} hideWarnings={circuitApp.appState.hideWarnings} askGPT={askGPT} />
             </RenderIf>

apps/circuit-compiler/src/app/services/circomPluginClient.ts

@@ -7,8 +7,8 @@ import * as compilerV218 from 'circom_wasm/v2.1.8'
 import * as compilerV217 from 'circom_wasm/v2.1.7'
 import * as compilerV216 from 'circom_wasm/v2.1.6'
 import * as compilerV215 from 'circom_wasm/v2.1.5'
-import { extractNameFromKey, extractParentFromKey } from '@remix-ui/helper'
-import { CompilationConfig, CompilerReport, PrimeValue } from '../types'
+import { extractNameFromKey, extractParentFromKey, CompilerReport } from '@remix-ui/helper'
+import { CompilationConfig, PrimeValue } from '../types'
 import isElectron from 'is-electron'
 
 export class CircomPluginClient extends PluginClient {

apps/circuit-compiler/src/app/types/index.ts

@@ -1,6 +1,7 @@
 import { compiler_list } from 'circom_wasm'
 import { Dispatch } from 'react'
 import type { CircomPluginClient } from '../services/circomPluginClient'
+import { CompilerReport } from '@remix-ui/helper'
 
 export type CompilerStatus = "compiling" | "computing" | "idle" | "errored" | "warning" | "exporting" | "proving"
 
@@ -87,34 +88,6 @@ export type CompilationConfig = {
 
 export type PrimeValue = "bn128" | "bls12381" | "goldilocks" | "grumpkin" | "pallas" | "vesta"
 
-export type CompilerFeedbackProps = {
-  feedback: string | CompilerReport[],
-  filePathToId: Record<string, string>,
-  openErrorLocation: (location: string, startRange: string) => void,
-  hideWarnings: boolean,
-  askGPT: (report: CompilerReport) => void
-}
-
-export type CompilerReport = {
-  type: "Error" | "Bug" | "Help" | "Note" | "Warning" | "Unknown",
-  message: string,
-  labels: {
-    style: "Primary" | "Secondary" | "Unknown",
-    file_id: string,
-    range: {
-      start: string,
-      end: string
-    },
-    message: string
-  }[],
-  notes: string[]
-}
-
-export type FeedbackAlertProps = {
-  message: string,
-  askGPT: () => void
-}
-
 export type ConfigurationsProps = {
   setPrimeValue: (prime: PrimeValue) => void,
   primeValue: PrimeValue,

apps/noir-compiler/src/app/actions/constants.ts

@@ -0,0 +1,8 @@
+export const DEFAULT_TOML_CONFIG = `[package]
+name = "test"
+authors = [""]
+compiler_version = ">=0.18.0"
+type = "bin"
+
+[dependencies]
+`

apps/noir-compiler/src/app/actions/index.ts

@@ -0,0 +1,10 @@
+import { NoirPluginClient } from "../services/noirPluginClient"
+import { AppState } from "../types"
+
+export const compileNoirCircuit = async (plugin: NoirPluginClient, appState: AppState) => {
+  if (appState.status !== "compiling") {
+    await plugin.compile(appState.filePath)
+  } else {
+    console.log('Existing noir compilation in progress')
+  }
+}

apps/noir-compiler/src/app/app.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useReducer, useState } from "react"
+import { NoirPluginClient } from "./services/noirPluginClient"
+import { RenderIf } from '@remix-ui/helper'
+import { IntlProvider } from 'react-intl'
+import { Container } from "./components/container"
+import { NoirAppContext } from "./contexts"
+import { appInitialState, appReducer } from "./reducers/state"
+import { compileNoirCircuit } from "./actions"
+
+const plugin = new NoirPluginClient()
+
+function App() {
+  const [appState, dispatch] = useReducer(appReducer, appInitialState)
+  const [locale, setLocale] = useState<{code: string; messages: any}>({
+    code: 'en',
+    messages: null
+  })
+  const [isContentChanged, setIsContentChanged] = useState<boolean>(false)
+  const [isPluginActivated, setIsPluginActivated] = useState<boolean>(false)
+
+  useEffect(() => {
+    plugin.internalEvents.on('noir_activated', () => {
+      // @ts-ignore
+      plugin.on('locale', 'localeChanged', (locale: any) => {
+        setLocale(locale)
+      })
+      plugin.on('fileManager', 'currentFileChanged', (filePath) => {
+        if (filePath.endsWith('.nr')) {
+          dispatch({ type: 'SET_FILE_PATH', payload: filePath })
+          plugin.parse(filePath)
+        }
+      })
+      // @ts-ignore
+      plugin.on('editor', 'contentChanged', async (path: string, content: string) => {
+        if (path.endsWith('.nr')) {
+          setIsContentChanged(true)
+          plugin.parse(path, content)
+        }
+      })
+      // noir compiling events
+      plugin.internalEvents.on('noir_compiling_start', () => dispatch({ type: 'SET_COMPILER_STATUS', payload: 'compiling' }))
+      plugin.internalEvents.on('noir_compiling_done', () => {
+        dispatch({ type: 'SET_COMPILER_STATUS', payload: 'idle' })
+        dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: null })
+      })
+      plugin.internalEvents.on('noir_compiling_errored', noirCompilerErrored)
+      setIsPluginActivated(true)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (isPluginActivated) {
+      setCurrentLocale()
+    }
+  }, [isPluginActivated])
+
+  useEffect(() => {
+    if (isContentChanged) {
+      (async () => {
+        if (appState.autoCompile) await compileNoirCircuit(plugin, appState)
+      })()
+      setIsContentChanged(false)
+    }
+  }, [appState.autoCompile, isContentChanged])
+
+  const noirCompilerErrored = (err: ErrorEvent) => {
+    dispatch({ type: 'SET_COMPILER_STATUS', payload: 'errored' })
+    try {
+      const report = JSON.parse(err.message)
+
+      dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: report })
+    } catch (e) {
+      dispatch({ type: 'SET_COMPILER_FEEDBACK', payload: err.message })
+    }
+  }
+
+  const setCurrentLocale = async () => {
+    // @ts-ignore
+    const currentLocale = await plugin.call('locale', 'currentLocale')
+
+    setLocale(currentLocale)
+  }
+
+  const value = {
+    plugin,
+    dispatch,
+    appState
+  }
+
+  return (
+    <div className="noir_compiler_app">
+      <RenderIf condition={locale.messages}>
+        <IntlProvider locale={locale.code} messages={locale.messages}>
+          <NoirAppContext.Provider value={value}>
+            <Container />
+          </NoirAppContext.Provider>
+        </IntlProvider>
+      </RenderIf>
+    </div>
+  )
+}
+
+export default App