More improvements

Author: CompuIves

packages/app/src/app/components/CodeEditor/VSCode/MonacoReactComponent.js

@@ -314,6 +314,19 @@ class MonacoEditor extends React.PureComponent {
 
           // After initializing monaco editor
           this.editorDidMount(editorApi, context.monaco);
+
+          // r(
+          //   [
+          //     'vs/workbench/parts/snippets/electron-browser/snippets.contribution',
+          //     'vs/workbench/parts/snippets/electron-browser/snippetsService',
+          //     'vs/workbench/parts/snippets/electron-browser/insertSnippet',
+          //     'vs/workbench/parts/snippets/electron-browser/configureSnippets',
+          //     'vs/workbench/parts/snippets/electron-browser/tabCompletion',
+          //   ],
+          //   () => {
+          //     console.log('Loaded snippets');
+          //   }
+          // );
         }
       );
 

packages/app/src/app/components/CodeEditor/VSCode/index.js

@@ -1119,6 +1119,10 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
   }
 
   lint = async (code: string, title: string, version: number) => {
+    if (!title) {
+      return;
+    }
+
     const mode = await getMode(title, this.monaco);
     if (this.settings.lintEnabled) {
       if (mode === 'javascript' || mode === 'vue') {
@@ -1232,9 +1236,6 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     }
   };
 
-  initializeModules = (modules: Array<Module>) =>
-    Promise.all(modules.map(module => this.createModel(module, modules)));
-
   resizeEditor = () => {
     this.resizeEditorInstantly();
   };

packages/app/src/app/index.js

@@ -142,7 +142,6 @@ function boot() {
 }
 
 if (process.env.NODE_ENV === 'development' && process.env.VSCODE) {
-  console.log('hmm');
   // Configures BrowserFS to use the LocalStorage file system.
   BrowserFS.configure(
     {
@@ -183,11 +182,9 @@ if (process.env.NODE_ENV === 'development' && process.env.VSCODE) {
       }
 
       const fs = BrowserFS.BFSRequire('fs');
-      console.log(fs);
       // Otherwise, BrowserFS is ready-to-use!
       /* eslint-disable global-require */
       require('./vscode/dev-bootstrap').default()(() => {
-        console.log('hmm4');
         self.require(['vs/editor/editor.main'], () => {
           boot();
         });

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/ModuleEntry.js

@@ -20,6 +20,7 @@ class ModuleEntry extends React.Component {
       renameModule,
       deleteEntry,
       discardModuleChanges,
+      getModulePath,
     } = this.props;
     const currentModuleShortid = store.editor.currentModuleShortid;
     const mainModuleId = store.editor.mainModule.id;
@@ -54,6 +55,7 @@ class ModuleEntry extends React.Component {
         moduleHasError={hasError}
         markTabsNotDirty={markTabsNotDirty}
         discardModuleChanges={discardModuleChanges}
+        getModulePath={getModulePath}
       />
     );
   }

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryChildren/index.js

@@ -22,6 +22,7 @@ class DirectoryChildren extends React.Component {
       markTabsNotDirty,
       store,
       discardModuleChanges,
+      getModulePath,
     } = this.props;
 
     const {
@@ -60,6 +61,7 @@ class DirectoryChildren extends React.Component {
               markTabsNotDirty={markTabsNotDirty}
               errors={errors}
               corrections={corrections}
+              getModulePath={getModulePath}
             />
           ))}
         {sortBy(
@@ -75,6 +77,7 @@ class DirectoryChildren extends React.Component {
             renameModule={renameModule}
             deleteEntry={deleteEntry}
             discardModuleChanges={discardModuleChanges}
+            getModulePath={getModulePath}
           />
         ))}
       </div>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.js

@@ -212,10 +212,14 @@ const entrySource = {
   canDrag: props => !!props.id && !props.isMainModule,
   beginDrag: props => {
     if (props.closeTree) props.closeTree();
+
+    const directory =
+      props.type === 'directory' || props.type === 'directory-open';
     return {
       id: props.id,
       shortid: props.shortid,
-      directory: props.type === 'directory' || props.type === 'directory-open',
+      directory,
+      path: !directory && props.getModulePath(props.id),
     };
   },
 };

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js

@@ -210,6 +210,7 @@ class DirectoryEntry extends React.Component {
       depth = 0,
       root,
       store,
+      getModulePath,
     } = this.props;
     const { creating, open } = this.state;
     const currentSandbox = store.editor.currentSandbox;
@@ -245,6 +246,7 @@ class DirectoryEntry extends React.Component {
               deleteEntry={!root && this.deleteDirectory}
               hasChildren={this.getChildren().length > 0}
               closeTree={this.closeTree}
+              getModulePath={getModulePath}
             />
             {this.state.showDeleteDirectoryModal && (
               <Modal
@@ -296,6 +298,7 @@ class DirectoryEntry extends React.Component {
             setCurrentModule={this.setCurrentModule}
             markTabsNotDirty={this.markTabsNotDirty}
             discardModuleChanges={this.discardChanges}
+            getModulePath={getModulePath}
           />
           {this.state.showDeleteModuleModal && (
             <Modal

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/index.js

@@ -5,6 +5,7 @@ import DirectoryEntry from './DirectoryEntry/index';
 import WorkspaceItem from '../WorkspaceItem';
 
 import EditIcons from './DirectoryEntry/Entry/EditIcons';
+import { getModulePath } from 'common/sandbox/modules';
 
 class Files extends React.Component {
   createModule = () => {
@@ -22,6 +23,15 @@ class Files extends React.Component {
     this.directory.onUploadFileClick();
   };
 
+  getModulePath = (moduleId: string) => {
+    try {
+      const sandbox = this.props.store.editor.currentSandbox;
+      return getModulePath(sandbox.modules, sandbox.directories, moduleId);
+    } catch (e) {
+      return '';
+    }
+  };
+
   render() {
     const store = this.props.store;
     const sandbox = store.editor.currentSandbox;
@@ -50,6 +60,7 @@ class Files extends React.Component {
           innerRef={el => {
             this.directory = el;
           }}
+          getModulePath={this.getModulePath}
           title={sandbox.title || 'Project'}
           depth={-1}
           id={null}

packages/app/src/app/pages/common/HTML5BackendWithFolderSupport/index.js

@@ -7,6 +7,20 @@ export default (manager: Object) => {
 
   backend.handleTopDropCapture = e => {
     orgTopDropCapture.call(backend, e);
+
+    const item = backend.monitor.getItem();
+    if (item && item.path) {
+      // Big hack we do to make VSCode operate happily with the dropped file.
+      // We monkey patch the getData function to return the right URI, normally
+      // we have to do this on the drag event with setData instead of the drop event, but we
+      // don't have access to it so we monkey-patch.
+      e.dataTransfer.getData = type => {
+        if (type !== 'ResourceURLs') {
+          return '';
+        }
+        return JSON.stringify([`file://${item.path}`]);
+      };
+    }
     if (backend.currentNativeSource) {
       backend.currentNativeSource.item.dirContent = getFilesFromDragEvent(e, {
         recursive: true,

packages/app/src/app/vscode/metadata.js

@@ -63,8 +63,8 @@ const METADATA = {
       thirdPartyNotices: 'node_modules/monaco-languages/ThirdPartyNotices.txt',
       paths: {
         src: '/monaco-languages/release/dev',
-        'npm/dev': 'node_modules/monaco-languages/release/dev',
-        'npm/min': 'node_modules/monaco-languages/release/min',
+        'npm/dev': '../monaco-languages/release/dev',
+        'npm/min': '../monaco-languages/release/min',
         esm: 'node_modules/monaco-languages/release/esm',
       },
     },