editor: add basic intellisense

This adds basic intellisense for code completion and function signatures
using the Python `jedi` package running in a Pyodide environment.

Author: dlech

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 # Changelog
 
+## [Unreleased]
+
+### Added
+- Added basic intellisense to the code editor.
+
 ## [2.0.0-beta.1] - 2022-06-03
 
 ### Added

config/jest/babelTransform.js

@@ -20,7 +20,9 @@ module.exports = babelJest.createTransformer({
     ['@babel/plugin-transform-typescript', {
       allowDeclareFields: true
     }], 
-    '@shopify/react-i18n/babel'],
+    '@shopify/react-i18n/babel',
+    "babel-plugin-transform-import-meta",
+  ],
   presets: [
     [
       require.resolve('babel-preset-react-app'),

config/webpackDevServer.config.js

@@ -40,6 +40,8 @@ module.exports = function (proxy, allowedHost) {
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': '*',
       'Access-Control-Allow-Headers': '*',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
     },
     // Enable gzip compression of generated files.
     compress: true,

package.json

@@ -38,6 +38,7 @@
         "babel-loader": "^8.2.3",
         "babel-plugin-macros": "^3.0.1",
         "babel-plugin-named-asset-import": "^0.3.8",
+        "babel-plugin-transform-import-meta": "^2.2.0",
         "babel-preset-react-app": "^10.0.1",
         "bfj": "^7.0.2",
         "browser-fs-access": "^0.30.1",
@@ -78,6 +79,7 @@
         "postcss-preset-env": "^7.7.2",
         "prompts": "^2.4.2",
         "prop-types": "^15.8.1",
+        "pyodide": "0.20.1-alpha.2",
         "react": "^16.13.1",
         "react-app-polyfill": "^3.0.0",
         "react-aria": "^3.17.0",

src/editor/actions.ts

@@ -3,6 +3,11 @@
 
 import { createAction } from '../actions';
 import { UUID } from '../fileStorage';
+export {
+    didFailToInit as editorCompletionDidFailToInit,
+    didInit as editorCompletionDidInit,
+    init as editorCompletionInit,
+} from './redux/codeCompletion';
 
 /** Action that indicates that a code editor was created. */
 export const editorDidCreate = createAction(() => ({

src/editor/reducers.ts

@@ -9,6 +9,7 @@ import {
     editorDidCreate,
     editorDidOpenFile,
 } from './actions';
+import codeCompletion from './redux/codeCompletion';
 
 /** Indicates that the code editor is ready for use. */
 const isReady: Reducer<boolean> = (state = false, action) => {
@@ -46,6 +47,7 @@ const openFileUuids: Reducer<readonly UUID[]> = (state = [], action) => {
 };
 
 export default combineReducers({
+    codeCompletion,
     isReady,
     activeFileUuid,
     openFileUuids,

src/editor/redux/codeCompletion.ts

@@ -0,0 +1,38 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { createSlice } from '@reduxjs/toolkit';
+
+export enum CompletionEngineStatus {
+    Unknown,
+    Loading,
+    Ready,
+    Failed,
+}
+
+type State = {
+    status: CompletionEngineStatus;
+};
+
+const initialState: State = {
+    status: CompletionEngineStatus.Unknown,
+};
+
+const slice = createSlice({
+    name: 'codeCompletion',
+    initialState,
+    reducers: {
+        init(state) {
+            state.status = CompletionEngineStatus.Loading;
+        },
+        didInit(state) {
+            state.status = CompletionEngineStatus.Ready;
+        },
+        didFailToInit(state) {
+            state.status = CompletionEngineStatus.Failed;
+        },
+    },
+});
+
+export const { init, didInit, didFailToInit } = slice.actions;
+export default slice.reducer;