Support for ES6-loadable bundles?

[arogozhnikov]

I'm using ES6 bundles, but I do not develop with npm, just import them in a browser.
That's not extremely common scenario, but a very useful one:

1. just editor and browser - no npm, building, source mapping, bundling, etc. Correspondingly, no need to care about yearly updates of anything in the node world
2. at the same time imports are isolated, so e.g. $ and $3dmol do not load into global space
3. and a sweet part - autosuggestions work (seems they do not work for 3dmol)

I suggest serving ES6 module for 3Dmol, can help with bundling code.

Update: analysis works only partially, e.g. suggest deprecated elements, and can jump to implementation:

Support for other exported packages is usually better, but even in this state it is way more helpful compared to <script> inclusion.

[dkoes]

I am confused about what you are asking for. We target UMD with webpack for maximum compatibility. $ does not get exported to the global namespace, but $3Dmol will for backwards compatibility.

If you have a suggestion for how to change the webpack configuration to better match your workflow without breaking backwards compatibility I am happy to consider it.

[arogozhnikov]

That's how it works for me now:

import { $3Dmol } from "https://arogozhnikov.github.io/es6_importable_packages/bundles/3dmol.js";

(you can try that too).

I can use it straight from JS, and then open page right away in the browser.
No npm, no node, no bundler. Code analysis half-works.

On the official page I see only <script> tag option for loading without additional tools.

[dkoes]

Glad you got it to work. As far as I can tell, ES6 export is still in development in webpack (and has been for 7 years - webpack/webpack#2933) so it isn't clear to me how to implement this in our build system and in a backward compatible manner.

[arogozhnikov]

I use rollup.

AFAIK (not an expert) es6 modules are not compatible with other formats (and that's the reason for such slow adoption), so this is basically +1 exporting pipeline (which produces separate 3dmol.esm.js and 3dmol.esm-min.js).

I'm ready to work on PR that ships bundles if you think that's valuable. Promise not to break your existing webpack pipeline :)

[dkoes]

If I create another webpack config that modifies webpack.prod.js with

  output: {
    filename: `[name]-esm.js`,
    libraryTarget: 'module',
		library: {
			type: 'module',
		},
		chunkFormat: 'module',
		module: true    
  },
  experiments: {
    outputModule: true
  }, 

it kinda works. I can do:

import {} from 'https://3dmol.org/build/3Dmol-esm.js';
let v = $3Dmol.createViewer('viewer');
v.setBackgroundColor('black');

but the module doesn't seem to export anything...

I don't have any more time to work on this right now, appreciate any suggestions.

[arogozhnikov]

but the module doesn't seem to export anything...

looks like. Likely it assigns to window object or smth like that. It is not much different for user compared to just <script> tag, as IDE is unlikely to track back the import.

[arogozhnikov]

My rollup config is like

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

function exportPackage(name) {
    return {
        input: `./exports/3dmol_export.js`,
        plugins: [
            nodeResolve({ 'browser': true }),
            commonjs(),
        ],
        output: [{
            file: `./bundles/3dmol.es6.js`,
            format: 'es',
        }, {
            file: `./bundles/3dmol.es6.min.js`,
            format: 'es',
            plugins: [terser()],
        },
        ]
    }
};
export default [exportPackage(),];

with 3dmol_export.js explicitly reexporting stuff from the lib:

export * as $3Dmol from '<main file of the lib>';

Hope this helps