GoogleChromeLabs / GoogleChromeLabs/native-url

Named exports as default export

Open
#26 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
286
Forks
11
PR merge metrics
No merged PRs in 30d

Description

`native-url` exposes methods thorugh named exports. To get default Node `url` behavior you would need to import entire module contents

```js
import * as url from 'native-url'; // or 'url' if aliased`
```

This is fine for your own code, but dependencies will throw error since they can’t find default export by default, and most 3rd party code using Node `url` depend on that default export to be available.

To fix this, it’s best to make changes to code at compile time to expose every named export as property of object which should be default export.

Here is a Babel plugin code which achieves that:

```js
const babel = require('@babel/core');

const plugin = babel.createConfigItem(({ types: t }) => {
return {
visitor: {
ExportNamedDeclaration(path, parent) {
const properties = path.node.specifiers.map((node) => ({
exported: node.exported.name,
local: node.local.name
}));
path.insertAfter(
t.exportDefaultDeclaration(
t.objectExpression(
properties.map((prop) =>
t.objectProperty(
t.identifier(prop.exported),
t.identifier(prop.local)
)
)
)
)
);
}
}
};
});
```

And here is how you apply it with Webpack:

```js
{
test: /\.m?js$/,
include: /node_modules\/native-url/,
use: [
{
loader: 'babel-loader',
options: {
plugins: [plugin]
}
}
]
};
```

After that you can use both modules’ named exports as default export.

Is this something which should be documented for both Webpack and Rollup, or should `native-url` expose default export by default?

Contributor guide

Open the contributing guide

Research direction

The issue names native-url's named exports, a Babel plugin, and Webpack/Rollup integration, but no repository files or tests. Start by locating the package entry point and build/export configuration, then compare the current default and named import behavior. Done means the default-export compatibility decision is implemented and verified, or the Webpack and Rollup guidance is documented.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, nodejs, rollup, webpack
Domain
backend, build-system
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.