shopify-api-js icon indicating copy to clipboard operation
shopify-api-js copied to clipboard

Export members separately to allow tree-shaking

Open tkalliom opened this issue 2 years ago • 0 comments

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).

tkalliom avatar Apr 26 '22 15:04 tkalliom