Babylon.js: npm repo: included extensions do not work when BABYLON is imported

[projectSHAI]

The npm repo for babylonjs includes all the extensions from babylonjs/dist however, none of these work out of the box.

recreate

npm install --save babylonjs

in the file where the babylonjs scene will be created in:

import * as BABYLON from 'babylonjs

Now all of core BABYLON is available.

The folder structure of babylonjs after npm installing

Problem

Attempting to use an extesnion such as GUI or the textures the typings file throws a Property 'GUI' does not exist on typeof BABYLON because these types are not defined in the babylon.module.d.ts file. This type error is fatal and causes the node app to crash.

solution: add all these default extensions to the type definitions file, since they are included by default in the npm repo.

Problem 2

The type definition file babylon.gui.d.ts for the GUI extension seems incorrect to me. it declares the top level module as so declare module BABYLON.GUI {} which is the same as nesting modules declare module BABYLON { module GUI {} }, it does not seem to inherit anything from the main BABYLON module. The image below is taken from the typescript docs and states that modules aren't merge-able which supports this thought.

This leads to some issues because every property reference to the BABYLON module inside babylon.gui.d.ts is undefined since there is no inheritance. I believe consolidating the two type definition files would fix this.

The workaround I'm using now involves disabling types for babylon, and editing the source code which will get overwritten after every npm install. This is far from ideal.

If this is a valid bug/feature I will be happy to make a pull request and help implement it, if it is an oversight on my part I would love some guidance on how to properly incorporate these extensions.

I posted a question on Stackoverflow, however, after research I believe this is more of a bug or feature request.

I also posted on html5gamedevs and spoke with Deltakosh who seemed happy to help as well.

[deltakosh]

Happy to help but I don't know how to fix it.
We cannot change the module definition of GUI as it is already out and public.

If someone has any idea, please speak :)

[deltakosh]

Do you think that we can fix everything if we update the babylon.module.ts file?

[projectSHAI]

I don't think so, copy and pasting the babylon.gui.d.ts file into the babylon.module.d.ts file will in fact solve the typing errors, since BABYLON is now in the proper scope.

However, the actual .js file will not be included if we do this. to use. I do not think it will be possible to import it either, the nodejs import function only works on modules, and none of the .js extensions are modules. meaning the other extensions without .d.ts files cannot be imported either.

Maybe turning all those extensions into modules should be a feature request of its own?

[deltakosh]

But we have a module for Gui right? So why it does not work?

---

From: Christopher Haugen [e-mail]
Sent: Saturday, July 22, 2017 1:09:37 PM
To: BabylonJS/Babylon.js
Cc: David Catuhe; Comment
Subject: Re: [BabylonJS/Babylon.js] npm repo: included extensions do not work when BABYLON is imported (#2569)

I don't think so, copy and pasting the babylon.gui.d.ts file into the babylon.module.d.ts file will in fact solve the typing errors, since BABYLON is now in the proper scope.

However, the actual .js file will not be included if we do this. to use. I do not think it will be possible to import it either, the nodejs import function only works on modules, and none of the .js extensions are modules. meaning the other extensions without .d.ts files cannot be imported either.

Maybe turning all those extensions into modules should be a feature request of its own?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/BabylonJS/Babylon.js/issues/2569#issuecomment-317207485, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABPtyLEw7doXbZVpya8VpoMxtRIxEDiwks5sQlcBgaJpZM4OgHAB.

[projectSHAI]

The type definition is a module.

However, the actual js file which babylon.gui.d.ts defines is not a module, though. So I don't believe any of the javascript is being included with the import statement.

All of the extensions' js files should be turned into modules, otherwise I think it'll be impossible to use them through node and npm.

I took a look at the babylon.max.js and babylon.js files and they declared themselves as modules as pictured below at the very bottom of the file.

[deltakosh]

Yep what append if you add this three line in the babylon.gui.js file?
That's something we can automate during the build process

[projectSHAI]

Ehh same thing happens, I understand the issue now.

Usually with npm modules you will define the entry point of the module in package.json with the main field.

The main babylon library works because the package.json in the root defines babylon.max.js as the main file. As shown below, and babylon.max.js properly exports BABYLON

Solutions

1) The only way to define babylon.gui.js is to reference it in babylon.max.js, since you can only have one entry point in the package.json

This can be achieved creating a module for babylon.gui.js (preferably a module that doesn't include the name BABYLON so it doesn't make double declaration errors) and then importing this into babylon.max.js at the bottom to append it.

2) An even better solution in my opinion, and one that can be easily used for every other extension as well is to create an npm scope and house all the extensions in their own npm repo inside this scope.

The scope would be like so:

for the main library either @babylon/babylon or @babylon/core

@babylon/extension_name for all the extensions.

DefinitelyTyped uses this structure with great success, and users are able to effortlessly extend the repo with their own type definition files.

Angular does this as well to make their framework extremely modular, and easily extendable.

If we do this for BABYLON and create a standard for it, I believe the added structure would increase the overall quality, maintainability, and predictability of extensions.

This is kind of a completely different feature request than what was originally proposed, though it will fix everything, making all extensions easily accessible with a very clearly defined structure.

I'd love your opinion on the matter, and if it's good I'll create another feature request to outline it.

[deltakosh]

Sounds like a good plan. Can you suggest what should be done practically?

[projectSHAI]

Yeah, it won't be too difficult.

The first step is to update the package.json of the repo.

update the name field to @babylon/core or whatever name the babylon team would like to use for the main library.

Then exclude the extensions from the files field so they are excluded from the repo.

The second step is to place a package.json in each of the extension folders, and to make sure each extension has a top level module to declare in the main field of their package.json for the name field it will be @babylon/gui for example or @babylon/firemesh or @babylon/oimo or @babylon/hand etc.

I could make a pull request and put together a rough draft for the team to look over.

[deltakosh]

I read that scope are by default private and we need to pay to make it public :(

[deltakosh]

I think we can still rely on multiple packages so I've published babylonjs-gui on npm
let me know if this is better or if we need to add more stuff in .js file (I'm pretty sure we need to at least add the module declaration)

[projectSHAI]

I see the opposite, you need an npm Private Modules account to publish anything private, all public npm packages, even scoped ones are free.

You can make publish a scope as public through the CLI like so

Also, good stuff! I'll see if I can play with it a bit this week. I'll keep you updated.

Also, we can register that the babylonjs-gui package to the scope without a need to publish a second one like so

[deltakosh]

Oh yeah I misread
For scope I would like to avoid them for now as implications for current users are unclear to me

[projectSHAI]

Hey! I was a mage as well, back in the burning crusades.

I was able to give the new npm repo a spin, and unfortunately hit a wall fairly quickly.

Looks like the repo didn't find the proper files, because npm install --save babylonjs-gui only installs the package.json and the readme.md

Either the filepaths in files is incorrect, or there is a rule which is preventing them to be included.

The below picture is from the files documentation and the highlighted is where I got this assumtion from.

[deltakosh]

should be good now

[projectSHAI]

The behavior is still the same when you npm install, only the unignorable files package.json and the readme are included.

a node_modules folder is also created since babylon is now a dependency of it. This seems kind of redundant, though. because we'll have babylon included twice in node_modules. Once when we npm install babylonjs, and a second time in the dependencied of babylonjs-gui.

However, I just noticed there's a whole separate repository for extensions.

If the GUI is a core feature why not include it by default.

[deltakosh]

You may want to only reference gui so it still makes sense to have a dependency on bjs. I'll fix the missing files later.

Gui is a supported extension like material library which means it is supported by core team

[projectSHAI]

Makes sense. Thanks for all the help by the way! This repo is enabling me to make something really special :)

Also, I found something I can improve while poking around the source code this weekend. I'm gonna make a pull request later this week when I have a couple hours to spare.

[deltakosh]

Excellent

---

From: Christopher Haugen [e-mail]
Sent: Sunday, July 30, 2017 2:01:19 PM
To: BabylonJS/Babylon.js
Cc: David Catuhe; Comment
Subject: Re: [BabylonJS/Babylon.js] npm repo: included extensions do not work when BABYLON is imported (#2569)

Makes sense.

Also, I found something I can improve poking around the source code this weekend. I'm gonna make a pull request later this week when I have a couple hours to spare.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/BabylonJS/Babylon.js/issues/2569#issuecomment-318929283, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABPtyMClz1_PfovGYnzYqdTzjs7-VMQBks5sTO8fgaJpZM4OgHAB.

[zakhenry]

I think there may be further work involved in getting the packages to be truly installable using the typescript import pattern as registration of extensions is done implicitly, with the expectation that BABYLON exists in scope (i.e. on the window). I think a more explicit interface of addon resolution would be greatly beneficial. something like:

import * as BABYLON from '@babylon/core';
import { ObjFileLoader } from '@babylon/obj-file-loader'
BABYLON.use(ObjFileLoader);

// rest of the code as usual

Without this I'm having to do some hacky shimming with direct webpack requires to get BabylonJS to work within an Angular 2 application

[zakhenry]

I had a look into the repo to see how easily this could be achieved, however I fear that this is a significant undertaking that will probably mean restructuring the whole babylon project into multiple modules.

I do however think that it would be a worthy addition to BabylonJS as it is an excellent library that is difficult to contribute to due to it's large size and complex build system. Fragmenting into simple node modules would lower the barrier to contribution significantly.

[deltakosh]

I came to the same conclusion. @raananw will work on this restructuring

[Vhulcan]

I'm starting out my first project with BabylonJS and I just bumped into this problem too, but I'm still very confused about the progress of this issue.
So is there no way to use the GUI extension right now using the 'babylonjs' npm package? Is it being worked on? How do I use the GUI in the mean time?

@projectSHAI also mentioned a 'babylonjs-gui' package but I can't seem to get that to work either. How am I suppose to import/use this in my .ts files?

[deltakosh]

We are still working on it. in the meantime you can just reference it from our cdn: https://preview.babylonjs.com/gui/babylon.gui.min.js

[Vhulcan]

We are still working on it. in the meantime you can just reference it from our cdn: https://preview.babylonjs.com/gui/babylon.gui.min.js

That's not really helping me. I cannot compile my typescript code because it cannot find the property GUI on BABLYON.
I'm simple using import * as BABYLON from 'babylonjs'; in my files. Adding import * as GUI from 'babylonjs-gui'; or anything like that isn't working either.

[deltakosh]

what about using ///

[projectSHAI]

Don't import it, use the CDN for both and then in the .ts file you want to use it in do this at the top

declare let BABYLON: any;

That's how I shut typescript up in the interim.

[Vhulcan]

@projectSHAI If I do it that way my TypeScript can't compile either :(
It keeps telling me that it Cannot find namespace 'BABYLON'.

[projectSHAI]

That sounds like a scoping issue at first glance.

maybe this will help.

I include the CDN links in the <head> tag of my index.html file like so:

<head>
    <title>App Name</title>
    <meta name="description" content="I am Meta Data">

    <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
    <script src="https://preview.babylonjs.com/cannon.js"></script>
    <script src="https://preview.babylonjs.com/oimo.js"></script>
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
</head>

Then in my typescript file I declare like so, in the same scope as all the import statements:

Note that you need to declare in every file you wish to use babylon in.

[sancelot]

At time of writing I have not managed to use the ObjLoader in angular2+ . A workaround would be welcome

[deltakosh]

@RaananW is working on it and we expect a fix by end of week :)

[zakhenry]

@deltakosh that is awesome to hear :) @sancelot in the meantime if you need it now, you can achieve getting the obj loader working by directly requireing the file from node_modules, then using the window.BABYLON object to access the loader. Note you must also load babylon.max.js first, also using require, in order to have the obj loader register correctly.

Sorry I can't give proper code snippets, I'm on a bus :/

[zakhenry]

@sancelot ok, back at a computer now, here is a snippet that I used to use the OBJ loader:

import * as BABYLON from 'babylonjs';
import { AssetsManager, Mesh, MeshAssetTask, Scene } from 'babylonjs';

// require files directly, this will allow them to bind BABYLON to the window
declare let require: any;
require('script-loader!babylonjs/dist/preview release/babylon.max.js');
require('script-loader!babylonjs/dist/preview release/loaders/babylon.objFileLoader.min.js');
require('script-loader!babylonjs/dist/preview release/loaders/babylon.stlFileLoader.min.js');

// extract the bound BABYLON from the window
const BABYLON_WINDOW: typeof BABYLON = (window as any).BABYLON;

class MeshLoader {

public loadMeshes(meshUrl: string, name: string, scene: Scene): Promise<Mesh[]> {

   //...

    const loader: AssetsManager = new BABYLON_WINDOW.AssetsManager(scene);

    const [file, ...path] = meshUrl.split('/').reverse();

    const meshTask = loader.addMeshTask(name, '', path.reverse().join('/') + '/', file);

    const promise: Promise<Mesh[]> = new Promise<Mesh[]>((resolve, reject) => {

      meshTask.onSuccess = (task: MeshAssetTask) => {
        const meshes = task.loadedMeshes;
        resolve(meshes as Mesh[]);
      };

      meshTask.onError = (error) => {
        reject(error);
      };
    });

    loader.load();

    return promise;
  }

}

[sancelot]

Thanks, I tried the code, it seems to load . But there are some other problems, being related to the file I am trying to import (https://free3d.com/3d-model/batman-50670.html) . I will try with some more light files first and then investigate.

[deltakosh]

Linked to #2632

[deltakosh]

Should be good in a couple of hours. We will update the npm packages

[RaananW]

So, good people, it is time for a (very happy) update.

Starting with babylonjs 3.1.0-alpha3.4 (and all of its modules) you can do the following:

import * as BABYLON from "babylonjs";
import * as GUI from "babylonjs-gui";
import "babylonjs-materials";

console.log(BABYLON, GUI, BABYLON.SkyMaterial);

Don't forget to add babylonjs (and the modules you are loading) to the types part of tsconfig.json:

"types": [
            "babylonjs",
            "babylonjs-gui",
            "babylonjs-materials"
        ]

submodules available are listed here: https://www.npmjs.com/~babylonjs

Issue tested and closed. 🎆

[projectSHAI]

It makes me really happy that you all were able to use my suggestion to push Babylon forward!

I'll be testing things out this weekend on a fresh stack to see how things perform in an independent environment.

Again, thank you, I was really looking forward to this!