Skip to content

Systemjs interop with UMD bundles, named exports and function default export #2184

Closed
@Sauloxd

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! 😁

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions