feat(editor): add beacon and taquito types and autocompletion

Author: AndreasGassmann

.gitignore

@@ -23,4 +23,5 @@ yarn-error.log*
 build-examples
 src/examples/*.js
 
-/docs/
+/docs/
+/src/components/monaco-types.ts

package.json

@@ -15,9 +15,10 @@
     "write-heading-ids": "docusaurus write-heading-ids",
     "pretty-source": "npx prettier --ignore-unknown --write 'src/**/*'",
     "pretty-docs": "npx prettier --ignore-unknown --write 'docs/**/*'",
+    "generate-monaco-types": "node scripts/generate-monaco-types.js",
     "remove-folders": "rm -rf build-docs && rm -rf docs",
     "clear-folders": "npm run remove-folders && mkdir build-docs && mkdir docs",
-    "embed-code": "npm run pretty-source && tsc src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src_docs/* build-docs/ && embedme 'build-docs/**/*.mdx' --source-root ./build-examples && rm -r docs && mv build-docs docs && npm run pretty-docs"
+    "embed-code": "npm run generate-monaco-types && npm run pretty-source && tsc src/examples/*.ts && node scripts/copy-examples.js && npm run clear-folders && cp -r src_docs/* build-docs/ && embedme 'build-docs/**/*.mdx' --source-root ./build-examples && rm -r docs && mv build-docs docs && npm run pretty-docs"
   },
   "dependencies": {
     "@airgap/beacon-sdk": "^2.2.3",

scripts/generate-monaco-types.js

@@ -0,0 +1,32 @@
+const fs = require("fs");
+const getFilesRecursively = require("./get-files-in-folder");
+
+const files = getFilesRecursively(
+  "./node_modules/@airgap/beacon-sdk/dist/cjs/"
+).filter((file) => file.endsWith(".d.ts"));
+files.push(
+  ...getFilesRecursively("./node_modules/@taquito/").filter((file) =>
+    file.endsWith(".d.ts")
+  )
+);
+
+const getFile = (filename) => {
+  const text = fs.readFileSync(filename, { encoding: "utf8" });
+
+  return text;
+};
+
+const outArray = files.map((dir) => ({
+  name: dir
+    .substring(13)
+    .split("/dist/cjs/")
+    .join("/")
+    .split("/taquito/dist/types/")
+    .join("/"),
+  dts: getFile(dir),
+}));
+
+fs.writeFileSync(
+  "./src/components/monaco-types.ts",
+  `export const libs = ${JSON.stringify(outArray)}`
+);

src/components/Monaco.tsx

@@ -1,12 +1,15 @@
 import React, { Suspense, lazy } from "react";
 import useThemeContext from "@theme/hooks/useThemeContext";
+import { libs } from "./monaco-types";
 
 const MonacoEditor = lazy(() => import("react-monaco-editor"));
 
 function Monaco(props) {
+  let monacoRef;
   const { isDarkTheme } = useThemeContext();
 
   function onEditorWillMount(monaco) {
+    monacoRef = monaco;
     const vsDarkTheme = {
       base: "vs-dark",
       inherit: true,
@@ -18,16 +21,41 @@ function Monaco(props) {
 
     monaco.editor.defineTheme("vs-dark", vsDarkTheme);
 
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES2017,
+      allowNonTsExtensions: true,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      typeRoots: ["node_modules/@types"],
+    });
+
+    libs.forEach((lib) => {
+      const MONACO_LIB_PREFIX = "file:///node_modules/";
+      const path = `${MONACO_LIB_PREFIX}${lib.name}`;
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(lib.dts, path);
+    });
+
     if (props.editorWillMount) {
       props.editorWillMount(monaco);
     }
   }
 
+  function onEditorDidMount(editor) {
+    editor.setModel(
+      monacoRef.editor.createModel(
+        props.value,
+        "typescript",
+        monacoRef.Uri.parse(`file:///main-${Math.random()}.ts`)
+      )
+    );
+  }
+
   return (
     <Suspense fallback={<div>Loading</div>}>
       <MonacoEditor
         {...props}
         editorWillMount={onEditorWillMount}
+        editorDidMount={onEditorDidMount}
         theme={isDarkTheme ? "vs-dark" : "vs-light"}
       />
     </Suspense>

src/examples/subscribe-to-event.beacon.ts

@@ -7,16 +7,18 @@ async () => {
   const dAppClient = new DAppClient({
     name: "Beacon Docs",
   });
-  await dAppClient.setActiveAccount(undefined);
 
-  setTimeout(async () => {
-    console.log(await dAppClient.getActiveAccount());
+  // TODO: Remove temporary workaround in sandbox
+  await new Promise((resolve) => setTimeout(resolve, 1000));
 
-    dAppClient.subscribeToEvent(BeaconEvent.PAIR_SUCCESS, (data) => {
-      console.log(`${BeaconEvent.PAIR_SUCCESS} triggered: `, data);
-    });
+  await dAppClient.clearActiveAccount();
 
-    await dAppClient.requestPermissions();
-  }, 1000);
+  console.log(await dAppClient.getActiveAccount());
+
+  dAppClient.subscribeToEvent(BeaconEvent.PAIR_SUCCESS, (data) => {
+    console.log(`${BeaconEvent.PAIR_SUCCESS} triggered: `, data);
+  });
+
+  await dAppClient.requestPermissions();
   /// END
 };

src/pages/playground.tsx

@@ -91,42 +91,35 @@ function Playground() {
     setExecutionState(ExecutionState.INIT);
   };
 
-  function handleSubmit(e) {
-    e.preventDefault();
-    execute();
-  }
-
   function handleClickShare() {
     copyShareUrl(input);
   }
 
   return (
     <Layout title="Beacon" description="Beacon Playground" noFooter={true}>
-      <div className={classnames(styles.headerContainer)}>
-        <form
-          onSubmit={handleSubmit}
-          className={classnames(styles.argsInputContainer)}
+      <div className={classnames(styles.runbox)}>
+        <button
+          onClick={execute}
+          className="button button--primary margin-bottom--lg margin-right--xs"
+        >
+          Run Code
+        </button>
+        <button
+          onClick={reset}
+          className="button button--secondary margin-bottom--lg margin-right--xs"
+        >
+          Reset
+        </button>
+        <button
+          onClick={clear}
+          className="button button--secondary margin-bottom--lg margin-right--xs"
+        >
+          Clear Output
+        </button>
+        <button
+          onClick={handleClickShare}
+          className="button button--secondary margin-bottom--lg margin-right--xs"
         >
-          <button
-            onClick={execute}
-            className={classnames(styles.argsIconContainer)}
-          >
-            Run Code
-          </button>
-          <button
-            onClick={reset}
-            className={classnames(styles.argsIconContainer)}
-          >
-            Reset
-          </button>
-          <button
-            onClick={clear}
-            className={classnames(styles.argsIconContainer)}
-          >
-            Clear Output
-          </button>
-        </form>
-        <button onClick={handleClickShare}>
           Share Code (Copy to Clipboard)
         </button>
       </div>

src/pages/styles.module.css

@@ -7,6 +7,10 @@ body > div {
   overflow: hidden;
 }
 
+.runbox {
+  margin: 10px;
+}
+
 .headerContainer {
   display: flex;
   flex-wrap: wrap;