RFC: Investigation around AssemblyScript

components/HooksEditor.tsx

@@ -7,6 +7,7 @@ import { useRouter } from 'next/router'
 
 import Box from './Box'
 import Container from './Container'
+import asc from 'assemblyscript/dist/asc'
 import { createNewFile, saveFile } from '../state/actions'
 import { apiHeaderFiles } from '../state/constants'
 import state from '../state'
@@ -209,6 +210,16 @@ const HooksEditor = () => {
                   )
                 )
               }
+              monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+                experimentalDecorators: true
+              })
+              monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+                diagnosticCodesToIgnore: [1206]
+              })
+              monaco.languages.typescript.typescriptDefaults.addExtraLib(
+                asc.definitionFiles.assembly,
+                'assemblyscript/std/assembly/index.d.ts'
+              )
 
               // create the web socket
               if (!subscriptionRef.current) {
@@ -218,6 +229,7 @@ const HooksEditor = () => {
                   aliases: ['C', 'c', 'H', 'h'],
                   mimetypes: ['text/plain']
                 })
+
                 MonacoServices.install(monaco)
                 const webSocket = createWebSocket(
                   process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ''

next.config.js

@@ -8,8 +8,16 @@ module.exports = {
     config.resolve.alias['vscode'] = require.resolve(
       '@codingame/monaco-languageclient/lib/vscode-compatibility'
     )
+    config.experiments = {
+      topLevelAwait: true,
+      layers: true
+    }
     if (!isServer) {
-      config.resolve.fallback.fs = false
+      config.resolve.fallback = {
+        ...config.resolve.fallback,
+        fs: false,
+        module: false
+      }
     }
     config.module.rules.push({
       test: /\.md$/,

package.json

@@ -26,6 +26,7 @@
     "@radix-ui/react-switch": "^0.1.5",
     "@radix-ui/react-tooltip": "^0.1.7",
     "@stitches/react": "^1.2.8",
+    "assemblyscript": "^0.20.19",
     "base64-js": "^1.5.1",
     "comment-parser": "^1.3.1",
     "dinero.js": "^1.9.1",

pages/develop/[[...slug]].tsx

@@ -159,7 +159,8 @@ const Home: NextPage = () => {
     >
       <main style={{ display: 'flex', flex: 1, position: 'relative' }}>
         <HooksEditor />
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'c' && (
+        {(snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'c' ||
+          snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'ts') && (
           <Hotkeys
             keyName="command+b,ctrl+b"
             onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
@@ -185,11 +186,13 @@ const Home: NextPage = () => {
                 <Play weight="bold" size="16px" />
                 Compile to Wasm
               </Button>
-              <Popover content={<CompilerSettings />}>
-                <Button variant="primary" css={{ px: '10px' }}>
-                  <Gear size="16px" />
-                </Button>
-              </Popover>
+              {snap.files[snap.active].language === 'c' && (
+                <Popover content={<CompilerSettings />}>
+                  <Button variant="primary" css={{ px: '10px' }}>
+                    <Gear size="16px" />
+                  </Button>
+                </Popover>
+              )}
             </Flex>
           </Hotkeys>
         )}

state/actions/compileCode.ts

@@ -6,25 +6,147 @@ import { saveFile } from './saveFile'
 import { decodeBinary } from '../../utils/decodeBinary'
 import { ref } from 'valtio'
 
+import Cleaner from '../../utils/cleaner/cleaner'
+
 /* compileCode sends the code of the active file to compile endpoint
  * If all goes well you will get base64 encoded wasm file back with
  * some extra logging information if we can provide it. This function
  * also decodes the returned wasm and creates human readable WAT file
  * out of it and store both in global state.
  */
 export const compileCode = async (activeId: number) => {
+  let asc: typeof import('assemblyscript/dist/asc') | undefined
   // Save the file to global state
   saveFile(false, activeId)
   if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
     throw Error('Missing env!')
   }
-  // Bail out if we're already compiling
+  // Bail out if we're   already compiling
   if (state.compiling) {
     // if compiling is ongoing return // TODO Inform user about it.
     return
   }
   // Set loading state to true
   state.compiling = true
+  if (typeof window !== 'undefined') {
+    // IF AssemblyScript
+    if (
+      state.files[activeId].language.toLowerCase() === 'ts' ||
+      state.files[activeId].language.toLowerCase() === 'typescript'
+    ) {
+      if (!asc) {
+        asc = await import('assemblyscript/dist/asc')
+      }
+      const files: { [key: string]: string } = {}
+      state.files.forEach(file => {
+        files[file.name] = file.content
+      })
+      const res = await asc.main(
+        [
+          state.files[activeId].name,
+          '--textFile',
+          '-o',
+          `${state.files[activeId].name}.wasm`,
+          '--runtime',
+          'stub',
+          '-O3',
+          '--disable',
+          'bulk-memory'
+        ],
+        {
+          readFile: (name, baseDir) => {
+            const currentFile = state.files.find(file => file.name === name)
+            if (currentFile) {
+              return currentFile.content
+            }
+            return null
+          },
+          writeFile: async (name, data, baseDir) => {
+            const curr = state.files.find(file => file.name === name.replace('.wasm', ''))
+            if (curr) {
+              const cleaner = await Cleaner({
+                locateFile: (file: string) => {
+                  return `/${file}`
+                }
+              })
+
+              cleaner.FS.mkdir('compiled')
+              cleaner.FS.createDataFile('/compiled', `${curr?.name}.wasm`, data, true, true)
+              await cleaner.callMain([`/compiled/${curr?.name}.wasm`])
+              const newFileUArr = cleaner.FS.readFile(`/compiled/${curr?.name}.wasm`) as Uint8Array
+              // lets remove the file from the file system
+              cleaner.FS.unlink(`/compiled/${curr.name}.wasm`)
+              // lets remove the directory
+              cleaner.FS.rmdir('compiled')
+
+              curr.compiledContent = ref(newFileUArr)
+            }
+
+            const ww = (await import('wabt')).default()
+            if (curr?.compiledContent) {
+              if (curr.compiledContent instanceof Uint8Array) {
+                const myModule = ww.readWasm(curr.compiledContent, {
+                  readDebugNames: true
+                })
+                myModule.applyNames()
+                const compiledWat = myModule.toText({ foldExprs: false, inlineExport: false })
+                curr.compiledWatContent = compiledWat
+              }
+            }
+            toast.success('Compiled successfully!', { position: 'bottom-center' })
+          },
+          listFiles: (dirname, baseDir) => {
+            console.log('listFiles: ' + dirname + ', baseDir=' + baseDir)
+            return []
+          }
+        }
+      )
+      // In case you want to compile just single file
+      // const res = await asc.compileString(state.files[activeId].content, {
+      //   optimizeLevel: 3,
+      //   runtime: 'stub',
+      // })
+
+      if (res.error?.message) {
+        state.compiling = false
+        state.logs.push({
+          type: 'error',
+          message: res.error.message
+        })
+        state.logs.push({
+          type: 'error',
+          message: res.stderr.toString()
+        })
+        return
+      }
+      if (res.stdout) {
+        state.files[activeId].lastCompiled = new Date()
+        console.log(res.stdout.toString())
+        state.files[activeId].compiledValueSnapshot = state.files[activeId].content
+        state.logs.push({
+          type: 'success',
+          message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
+          link: Router.asPath.replace('develop', 'deploy'),
+          linkText: 'Go to deploy'
+        })
+      }
+      // if (res.stdout) {
+      //   const wat = res.stdout.toString()
+      //   state.files[activeId].lastCompiled = new Date()
+      //   state.files[activeId].compiledWatContent = wat
+      //   state.files[activeId].compiledValueSnapshot = state.files[activeId].content
+      //   state.logs.push({
+      //     type: 'success',
+      //     message: `File ${state.files?.[activeId]?.name} compiled successfully. Ready to deploy.`,
+      //     link: Router.asPath.replace('develop', 'deploy'),
+      //     linkText: 'Go to deploy'
+      //   })
+      // }
+      console.log('nääää')
+      state.compiling = false
+      return
+    }
+  }
   state.logs = []
   const file = state.files[activeId]
   try {

state/actions/deployHook.tsx

@@ -24,7 +24,7 @@ function toHex(str: string) {
   return result.toUpperCase()
 }
 
-function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
+function arrayBufferToHex(arrayBuffer?: ArrayBuffer | Uint8Array | null) {
   if (!arrayBuffer) {
     return ''
   }
@@ -36,7 +36,7 @@ function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
     throw new TypeError('Expected input to be an ArrayBuffer')
   }
 
-  var view = new Uint8Array(arrayBuffer)
+  var view = arrayBuffer instanceof Uint8Array ? arrayBuffer : new Uint8Array(arrayBuffer)
   var result = ''
   var value
 

state/index.ts

@@ -14,7 +14,7 @@ export interface IFile {
   language: string
   content: string
   compiledValueSnapshot?: string
-  compiledContent?: ArrayBuffer | null
+  compiledContent?: ArrayBuffer | Uint8Array | null
   compiledWatContent?: string | null
   lastCompiled?: Date
   containsErrors?: boolean