The editor will now prefer imports from xstate core (#382)

* Fix autocomplete test for importing assign from xstate * Update Auto import name and smarter test import * Filter xstate imports not from the core library * Cleanup
statelyai · Aug 22, 2022 · a9019ed · a9019ed
1 parent bf5199b
commit a9019ed
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 37 deletions.
diff --git a/.changeset/nervous-donkeys-perform.md b/.changeset/nervous-donkeys-perform.md
@@ -0,0 +1,5 @@
+---
+'xstate-viz-app': patch
+---
+
+The editor will now prefer imports from xstate core.
diff --git a/cypress/integration/autocomplete.spec.ts b/cypress/integration/autocomplete.spec.ts
@@ -6,7 +6,7 @@ describe('Autocomplete in the editor', () => {
     // Wait for the autocomplete to show up
     cy.contains('assign');
 
-    cy.getMonacoEditor().type('{downarrow}{downarrow}{enter}');
+    cy.getMonacoEditor().type('{downarrow}{enter}');
 
     cy.contains(`import { assign, createMachine } from 'xstate';`);
   });

diff --git a/src/monacoPatch.ts b/src/monacoPatch.ts
@@ -194,43 +194,54 @@ monacoLoader.init = function (...args) {
             return;
           }
 
-          const suggestions = info.entries.map((entry: any) => {
-            let range = wordRange;
-            if (entry.replacementSpan) {
-              const p1 = model.getPositionAt(entry.replacementSpan.start);
-              const p2 = model.getPositionAt(
-                entry.replacementSpan.start + entry.replacementSpan.length,
-              );
+          const suggestions = info.entries
+            .filter((entry: any) => {
+              // Here we filter any entry that exists in XState but is not imported from the core library
+              if (
+                entry.name in XState &&
+                entry.source !== 'file:///node_modules/xstate/lib/index'
+              ) {
+                return false;
+              }
+              return true;
+            })
+            .map((entry: any) => {
+              let range = wordRange;
+              if (entry.replacementSpan) {
+                const p1 = model.getPositionAt(entry.replacementSpan.start);
+                const p2 = model.getPositionAt(
+                  entry.replacementSpan.start + entry.replacementSpan.length,
+                );
+
+                range = new monaco.Range(
+                  p1.lineNumber,
+                  p1.column,
+                  p2.lineNumber,
+                  p2.column,
+                );
+              }
 
-              range = new monaco.Range(
-                p1.lineNumber,
-                p1.column,
-                p2.lineNumber,
-                p2.column,
-              );
-            }
-
-            const tags = [];
-            if (entry.kindModifiers?.indexOf('deprecated') !== -1) {
-              tags.push(monaco.languages.CompletionItemTag.Deprecated);
-            }
-
-            return {
-              uri: resource,
-              position: position,
-              offset: offset,
-              range: range,
-              label: entry.name,
-              insertText: entry.name,
-              sortText: entry.sortText,
-              kind: (provider.constructor as any).convertKind(entry.kind),
-              tags,
-              // properties below were added here
-              data: entry.data,
-              source: entry.source,
-              hasAction: entry.hasAction,
-            };
-          });
+              const tags = [];
+              if (entry.kindModifiers?.indexOf('deprecated') !== -1) {
+                tags.push(monaco.languages.CompletionItemTag.Deprecated);
+              }
+
+              return {
+                uri: resource,
+                position: position,
+                offset: offset,
+                range: range,
+                label: entry.name,
+                insertText: entry.name,
+                sortText: entry.sortText,
+                kind: (provider.constructor as any).convertKind(entry.kind),
+                tags,
+                // properties below were added here
+                data: entry.data,
+                source: entry.source,
+                hasAction: entry.hasAction,
+              };
+            });
 
           return {
             suggestions,