Allow UMD module exports in source files

[jkillian]

TypeScript Version: 2.0+

UMD module definition export statements, such as:

export namespace as myLib;

are only allowed in .d.ts files. If they're present in a .ts file, the compiler gives an error: "error TS1315: Global module exports may only appear in declaration files."

This is problematic for those who generate their .d.ts files automatically from their .ts source code: as far as I can tell, there's no way to get an export statement like above automatically inserted into a .d.ts file by tsc. This means developers have to add a build step to concatenate the export statement text onto their .d.ts files, which is messy.

Ideally, the following would be a valid source file:

myLib.ts

export const foo = 1;
export namespace as myLib;

The UMD export statement could simply be elided in the .js export and emitted as is in the .d.ts export.

[mhegazy]

There is a related suggestion to actually emit code if export namespace as myLib is encountered in a .ts file to export the module (see #8436).

But i see the utility in being able to traffic this to the .d.ts, the typescript module does something similar as well with the post-build step.

[RyanCavanaugh]

How would this actually work in practice? You can't write a correct UMD module in TS today using export syntax.

[mhegazy]

no, but you would do it by garbing the global

// global
if (typeof module === "undefined") {
    var global = Function('return this')();
    global.myLib = mylib;
}

export default myLib;

[jkillian]

In my case, it's a very clean way to produce typings for a umd library which is built from modules:

index.ts

export * from "./module1";
export * from "./module2";

export namespace as MyLib

After using webpack or a similar bundler to bundle things based off of my index.ts file, my generated index.d.ts file now matches the shape of my bundled library.

I suppose you're right though that since I'm essentially doing post-processing of my built files after TS finishes compiling, it makes some sense that I have to also add the export namespace as statement in a post-TS step.

[RyanCavanaugh]

There doesn't seem to be a lot of demand for this, and UMD modules are a bit of a relic by today's standards.

[HarelM]

I think I have a similar problem I can't find the solution for, any help would be appreciated.
I decided to migrate a library from flow to typescript. It took a while but now I have the library in typescript.
My problem is that though I tried to change the code as less as possible in order to keep backwards compatibility, the definition that this library now generates is different from the original definitions file.
The original definitions file can be found here:
https://github.com/maplibre/maplibre-gl-js/blob/cb3a4200bfbc113969e9dcbedae2aa7655f9aa98/src/index.d.ts
The library can be found here:
https://github.com/maplibre/maplibre-gl-js
The main file is:
https://github.com/maplibre/maplibre-gl-js/blob/50cb89270ee0ff1459d49dc556b921589af3828a/src/index.ts
Which generates the following typescript entry file

import Map from './ui/map';
import NavigationControl from './ui/control/navigation_control';
import GeolocateControl from './ui/control/geolocate_control';
import AttributionControl from './ui/control/attribution_control';
import ScaleControl from './ui/control/scale_control';
import FullscreenControl from './ui/control/fullscreen_control';
import Popup from './ui/popup';
import Marker from './ui/marker';
import Style from './style/style';
import LngLat from './geo/lng_lat';
import LngLatBounds from './geo/lng_lat_bounds';
import Point from './util/point';
import MercatorCoordinate from './geo/mercator_coordinate';
import { Evented } from './util/evented';
import { prewarm, clearPrewarmedResources } from './util/global_worker_pool';
import type { RequestParameters, ResponseCallback } from './util/ajax';
import type { Cancelable } from './types/cancelable';
export type { MapOptions } from './ui/map';
export type { LngLatBoundsLike } from './geo/lng_lat_bounds';
export type { PointLike } from './util/point';
export type { AnimationOptions, CameraForBoundsOptions, JumpToOptions, CameraOptions, CenterZoomBearing, EaseToOptions, FitBoundsOptions, FlyToOptions } from './ui/camera';
declare const exported: {
    supported: any;
    setRTLTextPlugin: (url: string, callback: (error?: Error) => void, deferred?: boolean) => void;
    getRTLTextPluginStatus: () => string;
    Map: typeof Map;
    NavigationControl: typeof NavigationControl;
    GeolocateControl: typeof GeolocateControl;
    AttributionControl: typeof AttributionControl;
    ScaleControl: typeof ScaleControl;
    FullscreenControl: typeof FullscreenControl;
    Popup: typeof Popup;
    Marker: typeof Marker;
    Style: typeof Style;
    LngLat: typeof LngLat;
    LngLatBounds: typeof LngLatBounds;
    Point: typeof Point;
    MercatorCoordinate: typeof MercatorCoordinate;
    Evented: typeof Evented;
    config: {
        MAX_PARALLEL_IMAGE_REQUESTS: number;
        REGISTERED_PROTOCOLS: {
            [x: string]: any;
        };
    };
    /**
     * Initializes resources like WebWorkers that can be shared across maps to lower load
     * times in some situations. `maplibregl.workerUrl` and `maplibregl.workerCount`, if being
     * used, must be set before `prewarm()` is called to have an effect.
     *
     * By default, the lifecycle of these resources is managed automatically, and they are
     * lazily initialized when a Map is first created. By invoking `prewarm()`, these
     * resources will be created ahead of time, and will not be cleared when the last Map
     * is removed from the page. This allows them to be re-used by new Map instances that
     * are created later. They can be manually cleared by calling
     * `maplibregl.clearPrewarmedResources()`. This is only necessary if your web page remains
     * active but stops using maps altogether.
     *
     * This is primarily useful when using GL-JS maps in a single page app, wherein a user
     * would navigate between various views that can cause Map instances to constantly be
     * created and destroyed.
     *
     * @function prewarm
     * @example
     * maplibregl.prewarm()
     */
    prewarm: typeof prewarm;
    /**
     * Clears up resources that have previously been created by `maplibregl.prewarm()`.
     * Note that this is typically not necessary. You should only call this function
     * if you expect the user of your app to not return to a Map view at any point
     * in your application.
     *
     * @function clearPrewarmedResources
     * @example
     * maplibregl.clearPrewarmedResources()
     */
    clearPrewarmedResources: typeof clearPrewarmedResources;
    /**
     * Gets and sets the number of web workers instantiated on a page with GL JS maps.
     * By default, it is set to half the number of CPU cores (capped at 6).
     * Make sure to set this property before creating any map instances for it to have effect.
     *
     * @var {string} workerCount
     * @returns {number} Number of workers currently configured.
     * @example
     * maplibregl.workerCount = 2;
     */
    workerCount: number;
    /**
     * Gets and sets the maximum number of images (raster tiles, sprites, icons) to load in parallel,
     * which affects performance in raster-heavy maps. 16 by default.
     *
     * @var {string} maxParallelImageRequests
     * @returns {number} Number of parallel requests currently configured.
     * @example
     * maplibregl.maxParallelImageRequests = 10;
     */
    maxParallelImageRequests: number;
    /**
     * Clears browser storage used by this library. Using this method flushes the Mapbox tile
     * cache that is managed by this library. Tiles may still be cached by the browser
     * in some cases.
     *
     * This API is supported on browsers where the [`Cache` API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
     * is supported and enabled. This includes all major browsers when pages are served over
     * `https://`, except Internet Explorer and Edge Mobile.
     *
     * When called in unsupported browsers or environments (private or incognito mode), the
     * callback will be called with an error argument.
     *
     * @function clearStorage
     * @param {Function} callback Called with an error argument if there is an error.
     * @example
     * maplibregl.clearStorage();
     */
    clearStorage(callback?: (err?: Error | null) => void): void;
    workerUrl: string;
    /**
     * Sets a custom load tile function that will be called when using a source that starts with a custom url schema.
     * The example below will be triggered for custom:// urls defined in the sources list in the style definitions.
     * The function passed will receive the request parameters and should call the callback with the resulting request,
     * for example a pbf vector tile, non-compressed, represented as ArrayBuffer.
     * @param {string} customProtocol - the protocol to hook, for example 'custom'
     * @param {Function} loadFn - the function to use when trying to fetch a tile specified by the customProtocol
     * @example
     * // this will fetch a file using the fetch API (this is obviously a non iteresting example...)
     * maplibre.addProtocol('custom', (params, callback) => {
            fetch(`https://${params.url.split("://")[1]}`)
                .then(t => {
                    if (t.status == 200) {
                        t.arrayBuffer().then(arr => {
                            callback(null, arr, null, null);
                        });
                    } else {
                        callback(new Error(`Tile fetch error: ${t.statusText}`));
                    }
                })
                .catch(e => {
                    callback(new Error(e));
                });
            return { cancel: () => { } };
        });
     * // the following is an example of a way to return an error when trying to load a tile
     * maplibre.addProtocol('custom2', (params, callback) => {
     *      callback(new Error('someErrorMessage'));
     *      return { cancel: () => { } };
     * });
     */
    addProtocol(customProtocol: string, loadFn: (requestParameters: RequestParameters, callback: ResponseCallback<any>) => Cancelable): void;
    /**
     * Removes a previusly added protocol
     * @param {string} customProtocol - the custom protocol to remove registration for
     * @example
     * maplibregl.removeProtocol('custom');
     */
    removeProtocol(customProtocol: string): void;
};
/**
 * The version of Mapbox GL JS in use as specified in `package.json`,
 * `CHANGELOG.md`, and the GitHub release.
 *
 * @var {string} version
 */
/**
 * Test whether the browser [supports Mapbox GL JS](https://www.mapbox.com/help/mapbox-browser-support/#mapbox-gl-js).
 *
 * @function supported
 * @param {Object} [options]
 * @param {boolean} [options.failIfMajorPerformanceCaveat=false] If `true`,
 *   the function will return `false` if the performance of Mapbox GL JS would
 *   be dramatically worse than expected (e.g. a software WebGL renderer would be used).
 * @return {boolean}
 * @example
 * // Show an alert if the browser does not support Mapbox GL
 * if (!maplibregl.supported()) {
 *   alert('Your browser does not support Mapbox GL');
 * }
 * @see [Check for browser support](https://maplibre.org/maplibre-gl-js-docs/example/check-for-support/)
 */
/**
 * Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text).
 * Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left. Mapbox Studio loads this plugin by default.
 *
 * @function setRTLTextPlugin
 * @param {string} pluginURL URL pointing to the Mapbox RTL text plugin source.
 * @param {Function} callback Called with an error argument if there is an error.
 * @param {boolean} lazy If set to `true`, mapboxgl will defer loading the plugin until rtl text is encountered,
 *    rtl text will then be rendered only after the plugin finishes loading.
 * @example
 * maplibregl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
 * @see [Add support for right-to-left scripts](https://maplibre.org/maplibre-gl-js-docs/example/mapbox-gl-rtl-text/)
 */
/**
  * Gets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text) status.
  * The status can be `unavailable` (i.e. not requested or removed), `loading`, `loaded` or `error`.
  * If the status is `loaded` and the plugin is requested again, an error will be thrown.
  *
  * @function getRTLTextPluginStatus
  * @example
  * const pluginStatus = maplibregl.getRTLTextPluginStatus();
  */
export default exported; // this is the interesting part
//# sourceMappingURL=index.d.ts.map

I would like to be able to do the following which was possible up until this version:

import { Map } from 'maplibre-gl'.

This doesn't work anymore.
I've been searching for a few days now for a solution for this without making any progress.
Any help would be truly appreciated.