shopify-api-js
shopify-api-js copied to clipboard
Export members separately to allow tree-shaking
Overview/summary
Currently there is a single member Shopify
exported from main
(dist/index.js
): exports.Shopify = { Auth: ... }; exports.default = exports.Shopify;
. The modules are then used through it: Shopify.Auth...
and so on.
I’m proposing submodules to be separate exports. Meaning that src/index
would have export ShopifyAuth; export ShopifySession;
etc. (Of course, the naming could be something different)
Motivation
What inspired this enhancement?
For the following script:
import { Shopify } from "@shopify/shopify-api";
const client = new Shopify.Clients.Rest("abc123", "def456");
client.post({ path: "a", type: "application/json", data: "b" }).then(r => console.log(r));
Rollup (with the command npx rollup via-index.js --file bundle-via-index.js --format cjs --plugin @rollup/plugin-node-resolve --plugin @rollup/plugin-commonjs --plugin @rollup/plugin-json
) produces an output of 891 KB, which includes e.g. the GraphQL client.
For comparison, a script using a direct import rolls up to a 653 KB bundle:
import { RestClient } from "@shopify/shopify-api/dist/clients/rest";
const client = new RestClient("abc123", "def456");
client.post({ path: "a", type: "application/json", data: "b" }).then(r => console.log(r));
(Of course, this latter version is a workaround to the problem I’m proposing to solve. However, it’s not considered good practice to circumvent the package index – cf. the tslint rule no-submodule-imports
).