Install themes from npm

[lz1998]

What problem does this feature solve?

I want to develop a node.js program to generate echarts image file. (ssr-echarts) There is a theme npm package in echarts4 (echarts-themes-js), but I can't find one for echarts5. Some default themes are enough.

我想开发一个nodejs程序生成echarts图片(ssr-echarts)。 在echarts4，有一个echarts theme的npm包(echarts-themes-js),但是echarts5找不到npm主题包。 只要默认主题就可以。

What does the proposed API look like?

https://www.npmjs.com/package/echarts-themes-js

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[echarts-bot[bot]]

@lz1998 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people, we'd like to suggest using English next time. 🤗

TRANSLATED

**BODY** ### What problem does this feature solve? I want to develop a node.js program to generate echarts image file. ([ssr-echarts](https://github.com/lz1998/ssr-echarts)) There is a theme npm package in echarts4 ([echarts-themes-js](https://www.npmjs.com/package/echarts-themes-js)), but I can't find one for echarts5. Some default themes are enough. I want to develop a nodejs program to generate echarts pictures ([ssr-echarts](https://github.com/lz1998/ssr-echarts)). In echarts4, there is an npm package of echarts theme ([echarts-themes-js](https://www.npmjs.com/package/echarts-themes-js)), but echarts5 cannot find the npm theme package. As long as the default theme is fine. ### What does the proposed API look like? https://www.npmjs.com/package/echarts-themes-js

[lz1998]

I have tries import theme from echarts/theme, but an error occured

/Users/lz1998/WebstormProjects/ssr-echarts/node_modules/echarts/lib/echarts.js:44
export * from './export/core';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Object.require.extensions.<computed> [as .js] (/Users/lz1998/WebstormProjects/ssr-echarts/node_modules/ts-node/src/index.ts:1045:43)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at /Users/lz1998/WebstormProjects/ssr-echarts/node_modules/echarts/theme/macarons.js:29:26
    at Object.<anonymous> (/Users/lz1998/WebstormProjects/ssr-echarts/node_modules/echarts/theme/macarons.js:34:3)

[lz1998]

I replace factory(exports, require('echarts/lib/echarts')); to factory(exports, require('echarts')); in node_modules/echarts/theme/*, then the problem is fixed。

[plainheart]

I'm thinking it might be better to use echarts/lib/echarts if we need tree-shaking.

This issue reminds me of another issue to look into. The current UMD header seems to make tree-shaking invalid.

@pissang There are several questions about this

1) The current UMD header invalidates tree-shaking, which makes the bundled size larger.

This is bundled result with the current UMD header

the module dependency in AMD seems incorrect, it may be also echarts/lib/echarts.

Besides, it would be better to increase the priority of commonjs, just like what rolllup generates.

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('echarts/lib/echarts')) :
  typeof define === 'function' && define.amd ? define(['exports', 'echarts/lib/echarts'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory({}, global.echarts));
}(this, (function (exports, echarts) {
    // ...
})));

This is bundled result with the tweaked UMD header

2) For themes / bmap extension or other plugins, should we import echarts/lib/echarts or echarts/core?

We can see echarts/lib/echarts is importing CanvasRenderer & DatasetComponent, but they are unnecessary if only SVG renderer is needed and no dataset is used. Especially theme files, they only need to import core library.

Perhaps, we should also make the theme or extension installable.

[pissang]

1) The current UMD header invalidates tree-shaking, which makes the bundled size larger.

Because echarts/lib/echarts is not an AMD module. So I still use echarts in the AMD branch. Didn't know the bundler will still go into the AMD branch. This change is very neat and helpful.

Perhaps, we should also make the theme or extension installable.

Yes, it will be great. But we may need to provide separate ESM modules for themes that can be installed manually.

[plainheart]

Because echarts/lib/echarts is not an AMD module.

Never notice it before. Thank you for pointing out.

[lz1998]

Yes, it will be great. But we may need to provide separate ESM modules for themes that can be installed manually.

When will the themes modules be provided?

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.