Systemjs interop with UMD bundles, named exports and function default export #2184
Description
Demonstration
Code Sandbox: https://codesandbox.io/s/rough-wind-jzpop?file=/index.html
Expected Behavior
When one System.import('library-with-umd-bundle')
it should correctly expose named exports besides the default export.
In this case in specific, we are dealing with styled-component
library. It exposes a deafult function and lots of named exports:
import styled, { createGlobalStyle, withTheme } from 'styled-components';
const MyDiv = styled.div`color: blue;`;
const MyGlobalStyle = createGlobalStyle`body { color: red; } `;
It's expected that a systemjs bundle with styled-component as dependecy should correctly inject it, supporting the above syntax.
Actual Behavior
In the sandbox, I'm using:
- import-map to resolve the UMD bundle for
styled-components
- import-map to resolve a local
systemjs bundle with styled-component as external
which logs the result of the above syntax
The log shows that the createGlobalStyle
is undefined, unless you access it via styled.createGlobalStyle
.
What I've discussed so far with @joeldenning
I'm not sure if this is actually a bug or a intended not supported feature 🤔
But Joel pin pointed this line on the named-exports.js:45 extra, which only covers object
default exports.
If we look how styled-components
expose those named exports (bundle)
var styled = function styled(tag) {
return constructWithOptions(createStyledComponent, tag);
}; // Shorthands for all valid HTML Elements
...
for (var key in secondary) {
styled[key] = secondary[key];
}
return styled;
It is adding the named exports in styled function itself.
So, should we just enhance named-exports
extra to expose named exports from default function also? (afaik I don't think there are other enumerables keys in a function, besides the one you add yourself... but can libraries misuse this feature, exposing not intended named exports?)
Thanks in advance! 😁