Giter VIP home page Giter VIP logo

vscode-loader's Introduction

VSCode Loader

An universal Asynchronous Module Definition (AMD) Loader developed primarily to load VSCode's sources.

Supported environments

  • Edge, Firefox, Chrome, Safari
  • nodejs
  • electron (renderer & browser processes) In nodejs and electron, when loading a module, if it cannot be found with the AMD rules, it delegates loading them to the native require.

Features

  • Runs factory methods as soon as dependencies are resolved.

Using

  • In a browser environment:
<script type="text/javascript" src="loader.js"></script>
<script>
	require.config({
		// ...
	});
	require(['an/amd/module'], function(value) {
		// code is loaded here
	});
</script>
  • In a node environment:
var loader = require('loader');
loader.config({
	// ...
});
loader(['an/amd/module'], function(value) {
	// code is loaded here
});
  • Supported config options:
  • baseUrl - The prefix that will be aplied to all modules when they are resolved to a location
  • paths - Redirect rules for modules. The redirect rules will affect the module ids themselves
  • config - Per-module configuration
  • catchError - Catch errors when invoking the module factories
  • recordStats - Record statistics
  • urlArgs - The suffix that will be aplied to all modules when they are resolved to a location
  • onError - Callback that will be called when errors are encountered
  • ignoreDuplicateModules - The loader will issue warnings when duplicate modules are encountered. This list will inhibit those warnings if duplicate modules are expected.
  • isBuild - Flag to indicate if current execution is as part of a build.
  • cspNonce - Allows setting a Content Security Policy nonce value on script tags created by the loader.
  • nodeRequire - The main entry point node's require
  • nodeInstrumenter - An optional transformation applied to the source before it is loaded in node's vm

Custom features

  • Recording loading statistics for detailed script loading times:
require.config({
	recordStats: true
});
// ...
console.log(require.getRecorder().getEvents());
  • Extracting loading metadata for a bundler:
var loader = require('loader');
loader.config({
	isBuild: true
});
// ...
console.log(loader.getBuildInfo());

Testing

To run the tests:

  • code loading in node: npm run test
  • amd spec tests, unit tests & code loading in browser:
    • npm run simpleserver
    • open http://localhost:9999/tests/run-tests.htm

The project uses as a submodule the AMD compliance tests. The goal is to support as many tests without adding eval() or an equivalent. It is also not a goal to support loading CommonJS code:

  • Basic AMD Functionality (basic)
  • The Basic require() Method (require)
  • Anonymous Module Support (anon)
  • CommonJS Compatibility (funcString)
  • CommonJS Compatibility with Named Modules (namedWrap)
  • AMD Loader Plugins (plugins)
  • Dynamic Plugins (pluginsDynamic)
  • Common Config: Packages
  • Common Config: Map
  • Common Config: Module
  • Common Config: Path
  • Common Config: Shim

Developing

  • Clone the repository
  • Run git submodule init
  • Run git submodule update
  • Run npm install
  • Compile in the background with npm run watch1 and npm run watch2

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

License

MIT

vscode-loader's People

Contributors

alexdima avatar andarist avatar bpasero avatar chrisdias avatar dbaeumer avatar friedemannsommer avatar ggilmore avatar hediet avatar jrieken avatar lramos15 avatar lweichselbaum avatar robertoaraujom avatar samb avatar tylerleonhardt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vscode-loader's Issues

Use vscode-loader with remote content in Electron

We are currently working on an application running in Electron using the monaco-editor, but some use case requires the displayed Electron content to come from a remote server (over http/s).

Problem is, the loader seems to get lost, as it assumes the environment is Node, yet the resources should be fetched from a remote server.

Did you ever encountered such an issue ? What would be our options here ?

I am thinking about trying to trick the loader into detecting a browser environment, though I am not sure I will be able to do this.


Extra infos: The loader works when the application is running in a browser, but once used within electron the loader gets lost.

compile to es6?

When target is set to es6, it produces an error:

tsc -p src/core/tsconfig.json && tsc

node_modules/typescript/lib/lib.es2015.collection.d.ts:28:14 - error TS2687: All declarations of 'size' must have identical modifiers.

28 readonly size: number;
~~~~

It seems that problem is with versions of types/node@ and typescript...

Support dynamic import under NodeJS

In a non-ESM context normally import() can be used to bring in ESM code. Under this loader this will be true for browsers, but not NodeJS which does not include an implementation by default for scripts constructed with vm.Script.

Downstream this complicates extension development in VSCode as it means ESM packages can only be used if first transformed into a compatible syntax (usually by a bundler). Note that the extension development host appears to load extensions without using this loader, so such dynamic import restrictions will not be seen there.

At present, I can see 2 paths towards supporting dynamic import.

  1. Supply a callback via the importModuleDynamically option (this API and those which may be needed for the implementation are marked experimental, it may be worth waiting on nodejs/node#37648)
  2. Forfeit the nodeInstrumenter option so the implementation can be simplified to just require (by far easiest and not blocked by experimental API, but will be a breaking change)
    EDIT 2023-03-13: On closer inspection, it appears I read the codepath wrong. This is not an option.

Downstream issue: microsoft/vscode#130367

Computed insertion point clashing with `next/head`

We are using Next.js with Monaco editor and I've noticed Monaco's styles disappearing.

TLDR is that next/head is using a little bit quirky~ diffing logic to update <head/> during the client's runtime. Injecting any element in the middle of the elements managed by Next is a risk of weird side-effects

I think there is a potential of improving this in Next and I will probably file an issue there as well but I was wondering if maybe this is something that could be fixed here. Or at least, by raising an issue here, I would satisfy my personal curiosity about those liens of code. I don't exactly see why links would be injected before the last existing link. Is there any particular reason behind this? Could this be changed to just appending to the end of the head? I would be happy to provide a PR for this.

I've been searching for an answer in the git's history but this code is already in the initial commit of this repository.

Unload or ability to redefine a module?

It would be useful to redefine a module using define or provide a function to unload a module. Right now calling define with the same module name (with ignore duplicates) ignores the contents if it has changed.

Loader conflicts with jQuery Validation Plugin

Loader version: 0.12.0(160c7612faa359c4f196a0f3292a0f2752a1daf5)
jq validator version: 1.14.0
There are 2 issues:

loader.js throws exception with message "Can only have one anonymous define call per script file" after trying to load jquery.validate.js file second time (that is, jquery.validate.js already exists in sources, but load it once again).

image

When jquery.validate.js is downloaded via require() function exception is gone, but validator calls for dependencies (JQuery) which already included in source. Furthermore, dependency name is incomplete (but this is validate.js fault).

Is there any way to get rid of this exception (loading validator manually) or could you provide api to exclude dependencies?

nls, css

var _nlsPluginGlobal = this;
var NLSLoaderPlugin;
(function (NLSLoaderPlugin) {
    var global = _nlsPluginGlobal || {};

var _cssPluginGlobal = this;
var CSSLoaderPlugin;
(function (CSSLoaderPlugin) {
    var global = _cssPluginGlobal || {};

Why?

If you want to implement that use systemjs and the register namespace plugin and call it a day throw away this project.

It adds none needed bloat all over the vscode code base.

google systemjs for more infos

`ModuleManager._onLoadError` swallows erros

When you look at this line:

this._modules2[moduleId] = new Module(moduleId, this._moduleIdProvider.getStrModuleId(moduleId), [], () => {}, () => {}, null);

The error callback is essentially disabled via function () { }.

From my usage of AMD loader in node.js enabled web worker, I was never able to see errors from the require call unless I would debug, even if I pass a error handle to the require call as argument. I traced it down to that line which seems to swallow any errors that are raised instead of sending them back to the error handler.

define is not defined

I got an error when I am trying to require nls.js in my test like "var nls = require("../../../src/nls");"
ReferenceError: define is not defined
at NLSLoaderPlugin (D:\vscode-loader\src\nls.js:152:5)
at Object. (D:\vscode-loader\src\nls.js:153:3)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (D:\vscode-loader\tests\node-specific\z-cached-data-create_test.js:5:11)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.