Develop Reference

Import gojs extension using webpack

I'm using Laravel 8 with Laravel-mix so that my JS assets are compiled with webpack.
I have imported gojs successfully by doing this:
npm i gojs
Then adding this to my bootstrap.js:
import * as go from 'gojs';
Then compiling using:
npm run dev
So far so good my app.js now includes the gojs code and I can run basic gojs samples on my pages.
However I cannot figure out how to include any gojs extensions.
I've tried adding an extension to my boostrap.js in all these different ways (separately not all at once):
import DataInspector from 'gojs/extensions/DataInspector.js';
import * as Inspector from 'gojs/extensions/DataInspector.js';
import { DataInspector } from 'gojs/extensionsTS/DataInspector';
require('gojs/extensions/DataInspector.js');
require('../../node_modules/gojs/extensions/DataInspector.js');
Most compile without error and when I check my app.js compiled javascript the DataInspector code appears to be included.
However when I add a sample script to my page that uses the Inspect I get error:
Uncaught ReferenceError: Inspector is not defined
So it appears the DataInspector extension has not been included. The only way I can get it to work is to directly add a script tag to the DataInspector.js file in my HTML. However I'd like to figure out how to properly import it with all my other assets.

It's best to copy extension files into your own directory to use them. They are provided as examples of how to extend the library, and should not be imported directly.
If you look at extension code, you'll see it carries this warning:
/*
* This is an extension and not part of the main GoJS library.
* Note that the API for this class may change with any version, even point releases.
* If you intend to use an extension in production, you should copy the code to your own source directory.
* Extensions can be found in the GoJS kit under the extensions or extensionsTS folders.
* See the Extensions intro page (https://gojs.net/latest/intro/extensions.html) for more information.
*/

Embed a custom Monaco Editor in a Docusaurus website MDX

I have a website built using Docusaurus 2.
Now, I want to embed a Monaco Editor to one page, and I will register a language to that Monaco Editor. I can achieve this with react-monaco-editor, monaco-languageclient and vscode-languageserver in a new React website, but I don't know how to add this to Docusaurus.
First, I added those packages to package.json of my Docusaurus website, then I tried to make a component App, so that I can add <App /> to a Docusaurus page.
In one file for the component, I have:
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
In another file for the component, I have:
import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";
Then I got
./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
And
./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'
Does anyone know what to do make it work?

Seems like the issue here is regarding the CSS being unable to loaded by webpack. You will need to add in CSS loaders for webpack via plugins.
You can try referring to this Pull Request on the Hermes website which adds the Monaco editor to the website and you can try the editor by clicking on "Playground".
Using monaco-editor-webpack-plugin might be better here because it helps you add the necessary loaders, such as the CSS loader you are missing in your current setup.

How to automatically add `.js` to module address auto fixing?

In VSCode is function "Show Fixes" with Import 'someting' from module "addres".
It adds the import automatically.
Unfortunately, it does not add the ".js" ending to the address.
What to do in VSCode configs, to automatically add .js to the module address?

Check if VSCode 1.44 (MArch 2020) can help with:
Finer grained control over auto import style in JavaScript
The new javascript.preferences.importModuleSpecifierEnding setting lets you control the style of imports that VS Code's auto imports use.
This can be useful if you are writing code for platforms such as browsers that support native ES6 modules.
Possible values are:
auto — The default. Uses the project's jsconfig to determine the import style to use
minimal — Use's node.js style imports. This shortens imports for src/component/index.js to src/component.
index — Include the index part of the path as well. This shortens src/component/index.js to src/component/index.
js — Use the full path, including the file extension (.js).

How to find all .js files which import a particular .js file in a React-App

In a react application .i have the following file : (I am using VSCode)
#example .js
export default helloWorld =()=>{
return "Hello World" ;
Is there a way , i can look for all the .js files which imports this file ?.
I understand different files can have this function by the same name .
So is there a way we can look which files have used something like :
import helloWorld from "somevariablePath/example.js"

try show all references or find all ref

I had the same problem recently, and realized theres not a perfect solution for this. The CommonJS modules aren't well-suited for static analysis.
Anyway, I found useful following tools:
JetBrains Webstorm IDE (Premium)
The feature Find Usages from this IDE is the most accurate tool I found. But its a paid IDE. (You have a 30 days trial period)
VSCode
The feature Find all references is not as accurate as previous one, but still useful.

Well i figured out an easy way to do that in the VSCode.
If i just use the absolute path (the absolute path can of course be shortened by using NODE_PATH environment variable in the .env file) of the file which i want to track(see whereever it is imported) .
I can just copy the path , do a Ctrl+Shift+F ,paste the path in the search bar and press Enter(Pressing Enter is important).
This will give all the files where that particular line of code ,in this case , import helloWorld from "absolutePath/example.js,is used

checkout dynamic import feature of webpack if fits yours requirement .
Dynamic import
or iterate using the file system(fs module) and load the file based on your condition

Update import/require paths when a file is moved or renamed - not working

I have a javascript project and find that new vs code feature "Update import paths when a file is moved or renamed" does not work for me. I have tried both: import and require statements. And for both options vs code does nothing about changing path after move or rename.
OS: Ubuntu 16.04
Visual Studio Code version 1.25.0
VS Code user settings:
{
"javascript.updateImportsOnFileMove.enabled": "always"
}
Have an empty jsconfig.json file in the project folder.

So, you need to have a jsconfig.json file in the root path, to make sure all paths work.

I tried to recreate your problem with the current version of Visual Studio Code (1.44) but I did not stumble on any problems: In File/Preferences/Settings I set the prompt-option for updating imports see image:
Then I created an "app"-folder with the following files see image:
app/appLogic.js
import GLOBAL_VARS from './GLOBAL_VARS/GLOBAL_VARS.js'
console.debug(GLOBAL_VARS.laugh())
app/package.json
{
"type":"module"
}
app/GLOBAL_VARS/GLOBAL_VARS.js
var LAUGH = "haha"
export default {
laugh(){
return LAUGH
}
}
I then moved the JS file "GLOBAL_VARS.js" to a different folder and VS Code suggested automatic imports update with a prompt, just as set in the preferences before see image:

Make sure you opened the right folder in VScode - eg if your project structure is like below -
project
/node_modules
/src
--A.js
--B.js
/build
/config
package.json
jsconfig.json
You open folder project in VScode and not 'src' folder.For some reasons VSCode is unable to detect import changes if you do not open the complete project folder in explorer.