Ts support.

.gitignore

@@ -23,6 +23,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn
 
 # local env files
 .env.local

components/DeployEditor.tsx

@@ -94,7 +94,7 @@ const DeployEditor = () => {
       }}
     >
       {`You haven't compiled any files yet, compile files on `}
-      <NextLink shallow href={`/develop/${router.query.slug}`} passHref>
+      <NextLink legacyBehavior shallow href={`/develop/${router.query.slug}`} passHref>
         <Link as="a">develop view</Link>
       </NextLink>
     </Text>

components/EditorNavigation.tsx

@@ -155,9 +155,11 @@ const EditorNavigation = ({ renderNav }: { renderNav?: () => ReactNode }) => {
                 >
                   <Image
                     src={session?.user?.image || ''}
-                    width="30px"
-                    height="30px"
-                    objectFit="cover"
+                    width="30"
+                    height="30"
+                    style={{
+                      objectFit: 'cover'
+                    }}
                     alt="User avatar"
                   />
                 </Box>

components/EnrichLog.tsx

@@ -40,7 +40,6 @@ const EnrichLog: FC<EnrichLogProps> = ({ str }) => {
       if (match.startsWith('HookSet')) {
         const code = match.match(/^HookSet\((\d+)\)/)?.[1]
         const val = hookSetCodes.find(v => code && v.code === +code)
-        console.log({ code, val })
         if (!val) return match
 
         const content = capitalize(val.description) || 'No hint available!'

components/HooksEditor.tsx

@@ -94,6 +94,14 @@ const setMarkers = (monacoE: typeof monaco) => {
   })
 }
 
+const langWarnings: Record<string, { shown: boolean; message: string }> = {
+  ts: {
+    shown: false,
+    message:
+      'Typescript suppport for hooks is still in early planning stage, write actual hooks in C only for now!'
+  }
+}
+
 const HooksEditor = () => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>()
   const monacoRef = useRef<typeof monaco>()
@@ -125,6 +133,14 @@ const HooksEditor = () => {
 
   const file = snap.files[snap.active]
 
+  useEffect(() => {
+    let warning = langWarnings[file?.language || '']
+    if (warning && !warning.shown) {
+      alert(warning.message) // TODO Custom dialog.
+      warning.shown = true
+    }
+  }, [file])
+
   const renderNav = () => (
     <Tabs
       label="File"
@@ -221,7 +237,7 @@ const HooksEditor = () => {
                 monaco.languages.register({
                   id: 'text',
                   extensions: ['.txt'],
-                  mimetypes: ['text/plain'],
+                  mimetypes: ['text/plain']
                 })
                 MonacoServices.install(monaco)
                 const webSocket = createWebSocket(
@@ -240,7 +256,7 @@ const HooksEditor = () => {
                       try {
                         disposable.dispose()
                       } catch (err) {
-                        console.log('err', err)
+                        console.error('err', err)
                       }
                     })
                   }

components/LogBox.tsx

@@ -160,7 +160,7 @@ export const Log: FC<ILog> = ({
         )}
         <Pre>{message}</Pre>
         {link && (
-          <NextLink href={link} shallow passHref>
+          <NextLink legacyBehavior href={link} shallow passHref>
             <Link as="a">{linkText}</Link>
           </NextLink>
         )}

components/Navigation.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Link from 'next/link'
+import NextLink from 'next/link'
 
 import { useSnapshot } from 'valtio'
 import { useRouter } from 'next/router'
@@ -78,7 +78,7 @@ const Navigation = () => {
             pr: '$4'
           }}
         >
-          <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
+          <NextLink legacyBehavior href={gistId ? `/develop/${gistId}` : '/develop'} passHref>
             <Box
               as="a"
               css={{
@@ -89,7 +89,7 @@ const Navigation = () => {
             >
               <Logo width="32px" height="32px" />
             </Box>
-          </Link>
+          </NextLink>
           <Flex
             css={{
               ml: '$5',
@@ -105,7 +105,8 @@ const Navigation = () => {
                 <Text css={{ fontSize: '$xs', color: '$mauve10', lineHeight: 1 }}>
                   {snap.files.length > 0 ? 'Gist: ' : 'Builder'}
                   {snap.files.length > 0 && (
-                    <Link
+                    <NextLink
+                      legacyBehavior
                       href={`https://gist.github.com/${snap.gistOwner || ''}/${snap.gistId || ''}`}
                       passHref
                     >
@@ -117,7 +118,7 @@ const Navigation = () => {
                       >
                         {`${snap.gistOwner || '-'}/${truncate(snap.gistId || '')}`}
                       </Text>
-                    </Link>
+                    </NextLink>
                   )}
                 </Text>
               </>
@@ -336,29 +337,39 @@ const Navigation = () => {
             }}
           >
             <ButtonGroup>
-              <Link href={gistId ? `/develop/${gistId}` : '/develop'} passHref shallow>
+              <NextLink
+                legacyBehavior
+                href={gistId ? `/develop/${gistId}` : '/develop'}
+                passHref
+                shallow
+              >
                 <Button as="a" outline={!router.pathname.includes('/develop')} uppercase>
                   Develop
                 </Button>
-              </Link>
-              <Link href={gistId ? `/deploy/${gistId}` : '/deploy'} passHref shallow>
+              </NextLink>
+              <NextLink
+                legacyBehavior
+                href={gistId ? `/deploy/${gistId}` : '/deploy'}
+                passHref
+                shallow
+              >
                 <Button as="a" outline={!router.pathname.includes('/deploy')} uppercase>
                   Deploy
                 </Button>
-              </Link>
-              <Link href={gistId ? `/test/${gistId}` : '/test'} passHref shallow>
+              </NextLink>
+              <NextLink legacyBehavior href={gistId ? `/test/${gistId}` : '/test'} passHref shallow>
                 <Button as="a" outline={!router.pathname.includes('/test')} uppercase>
                   Test
                 </Button>
-              </Link>
+              </NextLink>
             </ButtonGroup>
-            <Link href="https://xrpl-hooks.readme.io/v2.0" passHref>
+            <NextLink legacyBehavior href="https://xrpl-hooks.readme.io/v2.0" passHref>
               <a target="_blank" rel="noreferrer noopener">
                 <Button outline>
                   <BookOpen size="15px" />
                 </Button>
               </a>
-            </Link>
+            </NextLink>
           </Stack>
         </Flex>
       </Container>

pages/_middleware.ts → middleware.ts

@@ -1,7 +1,7 @@
-import type { NextRequest, NextFetchEvent } from 'next/server'
+import type { NextRequest } from 'next/server'
 import { NextResponse as Response } from 'next/server'
 
-export default function middleware(req: NextRequest, ev: NextFetchEvent) {
+export default function middleware(req: NextRequest) {
   if (req.nextUrl.pathname === '/') {
     const url = req.nextUrl.clone()
     url.pathname = '/develop'

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$/, /hook-bundle\.js$/],

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@codingame/monaco-jsonrpc": "^0.3.1",
     "@codingame/monaco-languageclient": "^0.17.0",
+    "@eqlabs/assemblyscript": "^0.0.0-alpha.1680097351",
     "@monaco-editor/react": "^4.4.5",
     "@octokit/core": "^3.5.1",
     "@radix-ui/colors": "^0.1.7",
@@ -37,7 +38,7 @@
     "lodash.uniqby": "^4.7.0",
     "lodash.xor": "^4.5.0",
     "monaco-editor": "^0.33.0",
-    "next": "^12.0.4",
+    "next": "^13.1.1",
     "next-auth": "^4.10.3",
     "next-plausible": "^3.2.0",
     "next-themes": "^0.1.1",
@@ -49,8 +50,8 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.7.1",
     "re-resizable": "^6.9.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.28.0",
     "react-hot-keys": "^2.7.1",
     "react-hot-toast": "^2.1.1",
@@ -65,7 +66,7 @@
     "valtio": "^1.2.5",
     "vscode-languageserver": "^7.0.0",
     "vscode-uri": "^3.0.2",
-    "wabt": "^1.0.30",
+    "wabt": "^1.0.32",
     "xrpl-accountlib": "^1.6.1",
     "xrpl-client": "^2.0.2"
   },
@@ -78,7 +79,7 @@
     "@types/react": "17.0.31",
     "browserify": "^17.0.0",
     "eslint": "7.32.0",
-    "eslint-config-next": "11.1.2",
+    "eslint-config-next": "^13.1.1",
     "raw-loader": "^4.0.2",
     "typescript": "4.4.4"
   },

pages/_app.tsx

@@ -24,7 +24,7 @@ import { ChatCircleText } from 'phosphor-react'
 TimeAgo.setDefaultLocale(en.locale)
 TimeAgo.addLocale(en)
 
-function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
+function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps<{ session?: any }>) {
   const router = useRouter()
   const slug = router.query?.slug
   const gistId = (Array.isArray(slug) && slug[0]) ?? null

pages/api/faucet.ts

@@ -40,7 +40,7 @@ export default async function handler(
     }
     return res.status(200).json(json)
   } catch (err) {
-    console.log(err)
+    console.error(err)
     return res.status(500).json({ error: 'Server error' })
   }
   return res.status(500).json({ error: 'Not able to create faucet, try again' })

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

@@ -150,7 +150,9 @@ const Home: NextPage = () => {
 
   const activeFile = snap.files[snap.active] as IFile | undefined
   const activeFileExt = getFileExtention(activeFile?.name)
-  const canCompile = activeFileExt === 'c' || activeFileExt === 'wat'
+  const canCompile = activeFileExt === 'c' || activeFileExt === 'wat' || activeFileExt === 'ts'
+
+  const isCompiling = snap.compiling.includes(snap.active);
   return (
     <Split
       direction="vertical"
@@ -166,7 +168,9 @@ const Home: NextPage = () => {
         {canCompile && (
           <Hotkeys
             keyName="command+b,ctrl+b"
-            onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
+            onKeyDown={() =>
+              snap.compiling === undefined && snap.files.length && compileCode(snap.active)
+            }
           >
             <Flex
               css={{
@@ -183,7 +187,7 @@ const Home: NextPage = () => {
                 variant="primary"
                 uppercase
                 disabled={!snap.files.length}
-                isLoading={snap.compiling}
+                isLoading={isCompiling}
                 onClick={() => compileCode(snap.active)}
               >
                 <Play weight="bold" size="16px" />
@@ -200,7 +204,9 @@ const Home: NextPage = () => {
         {activeFileExt === 'js' && (
           <Hotkeys
             keyName="command+b,ctrl+b"
-            onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
+            onKeyDown={() =>
+              !isCompiling && snap.files.length && compileCode(snap.active)
+            }
           >
             <Flex
               css={{