Use dependency as global in specific package?

[peteruithoven]

I basically have the following question, but I'm getting the feeling the current answer is wrong.
http://stackoverflow.com/questions/28068038/how-do-i-import-additional-plugins-for-an-already-imported-library-using-jspm

I'm trying to import an example file, which depends on another package being available as global variable.

If I understand the configuration documentation and this add support for cjs globals commit correctly I could do the following?

System.config({
  'map': {
    'three.js': 'github:mrdoob/three.js@master',
    'three.js/loaders/STLLoader': 'github:mrdoob/three.js@master/examples/js/loaders/STLLoader.js',
  }
  'packages': {
    'three.js/loaders/STLLoader': {
      globals: {
        'THREE': 'three.js'
      },
      meta: {
        deps: [
          'three.js'
        ]
      }
    },

I understand that meta globals support where added in SystemJS release 0.18.6, which, looking in the system.js file in jspm_packages I'm using.
Sub questions are whether deps and globals are normalized (like packages and meta paths in configuration).

[guybedford]

Yes that should work, but only if the module is CommonJS or global format. Globals and meta are normalized certainly.

[peteruithoven]

Because the deps configuration doesn't work for es6 / esm module formats right?

[guybedford]

Yes these options are restricted. Although there is consideration to extend deps (not globals) to ES modules in #640.

[peteruithoven]

I'm afraid I can't get this to work.
To get a better handle on it I tried to make a very minimalistic example, where I'm only using local modules:
https://github.com/peteruithoven/jspm-config-globals

To clarify, this is relevant when trying to use code from Three.js's examples, like the STLLoder
These example classes add themselves to a global THREE object.

If there is a way to verify (debug) the package configuration per package that would help a great deal.
This could also be used to improve the following Config playground.

[peteruithoven]

By simply exposing the global globally I can get this to work, see:
https://github.com/peteruithoven/jspm-config-globals/tree/expose-global

Relevant config:

System.config({
  meta: {
    './global-creator.js': {
      format: 'global'
    },
    './global-user.js': {
      deps: [
        './global-creator.js'
      ]
    }
  }
});

But I would prefer to contain this "global" within the dependency that requires that global.

[peteruithoven]

The above approach didn't work when importing Three.js examples. When setting Three.js to global format there would be an error because the require() function couldn't be found.
Installing Three.js as global using an override solves this issue.
jspm install three.js=github:mrdoob/three.js@master -o "{format: 'global'}"
This also means the meta configuration doesn't need to be set to global anymore.

Setting the deps meta data worked in my minimal example, but doesn't seem to work with Three.js examples. I have to make sure I import three.js first. This is the config I used.

System.config({
  "map": {
    "three.js": "github:mrdoob/three.js@master",
    "three.js/loaders/STLLoader": "github:mrdoob/three.js@master/examples/js/loaders/STLLoader.js",
  }
  "meta": {
    "three.js/loaders/STLLoader": {
      "deps": [
        "three.js"
      ],
    }
  }
});

Summary:

• Exposing package as global works, this can be used by other packages.
  • For local modules I could set the format to global with meta info.
  • For external packages I had to override the format to global with the install.
• Setting deps didn't work with Three.js examples.
• Don't understand how I could expose this global only to the package that require it.

[guybedford]

globals is a meta option not a package option - it needs to be under the meta object in https://github.com/peteruithoven/jspm-config-globals/blob/master/config.js#L41.

[guybedford]

deps should definitely work in the above. It would be worth checking Object.keys(System.meta) to see if the meta config is normalizing correctly.

[peteruithoven]

What is the difference between the effects of following two configs?
Only the second one loads the dependency.

System.config({
  packages: {
    './global-user.js': {
      meta: {
        deps: [
          './global-creator.js'
        ]
      }
    }
  }
});

System.config({
  meta: {
    './global-user.js': {
      deps: [
        './global-creator.js'
      ]
    }
  }
});

[peteruithoven]

I'm trying to give a global formatted module it's global dependency using a packages > meta > globals config.

Used config:

System.config({
  packages: {
    './global-user.js': {
      meta: {
        globals: {
          'SOME_GLOBAL': './global-creator.js'
        }
      }
    }
  }
});

It seems to be available:

System.packages["http://localhost:3000/global-user.js"].meta.globals.SOME_GLOBAL == "./global-creator.js" // -> true

But SOME_GLOBAL is not available in ./global-user.js.

Trying to set this without the packages also fails. Using the following config. Even though and this is where I get really confused, is how a test works.

System.config({
  meta: {
    'app.js': {
      globals: {
        'SOME_GLOBAL': './global-creator.js'
      }
    }
  }
});

[peteruithoven]

In the last config above I forgot the deps config.

Without the packages it seems to work. But I notice that the global, made for global-user is available globally, which is what I was hoping to prevent.

System.config({
  meta: {
    './global-user.js': {
      deps: [
        './global-creator.js' // works, file is loaded
      ],
      globals: {
        'SOME_GLOBAL': './global-creator.js' // works, but if available globally? 
      }
    }
  }
});

So the question stays, how can I make the dependency's dependency (SOME_GLOBAL) available only in that dependency (./global-user.js)

[guybedford]

Packages must be folders not files, with meta within them.

[guybedford]

Also package meta must reference a file path within the package.

[peteruithoven]

Alright, I put the global-user in a folder, which I reference with packages. I'm referencing the specific file in a meta. Which creates:

  packages: {
    './global-user': {
      meta: {
        './global-user/index.js': {
          deps: [
            './global-creator.js'
          ],
          globals: {
            'SOME_GLOBAL': './global-creator.js'
          }
        }
      }
    }
  }

I've also combined all the config in one System.config call.
New version: https://github.com/peteruithoven/jspm-config-globals

[guybedford]

You need to replace the meta path in the above with 'index.js': { ... }. Meta in packages are subpaths of the package.

[peteruithoven]

Ah...
Wouldn't ./index.js make more sense? That usually signifies local modules, in contrary to packages.

deps seem unnecessary in this case.
I am quite confused that the global target needs to be global-creator.js, instead of ./global-creator.js, which is unlike I normally import that module and also not a subpath...

  packages: {
    './global-user': {
      meta: {
        'index.js': {
          globals: {
            // 'SOME_GLOBAL': './global-creator.js'
            'SOME_GLOBAL': 'global-creator.js'
          }
        }
      }
    }
  }

[peteruithoven]

I've created a separate issue on meta paths: #692

[guybedford]

Yes deps is unnecessary when it is a global as it is assumed to be a dependency already.

The ./global-creator.js would reference the module at System.import('./global-creator.js', './global-user/index.js'). If you need to use global-creator.js that would be because you really wanted to load ./global-creator.js in the environment, not ./global-user/global-creator.js surely?