Re: [I] [Bug] Compatibility with ESM [echarts]

[via GitHub]

MichelMunoz commented on issue #20554:
URL: https://github.com/apache/echarts/issues/20554#issuecomment-3263732373

   Same problem here (typescript 5.92, ESM, server is node 22.19 or deno 2.4.5, 
echarts 6 for SSR)
   I toyed around to find a clean-ish temporary workaround until the ESM 
compatibility issues raised here are resolved ; it might be useful for some 
people.
   
   The idea is to have an extra module declaration file allowing us to
   - not import from echarts/types/dist (which causes issues with node, [given 
that it _refuses_ type stripping of 
dependencies](https://nodejs.org/api/typescript.html#type-stripping-in-dependencies)
   - import the "real" entries (ie. "echarts/renderers" or "echarts") allowing 
to replicate, transparently, without errors the examples of the documentation, 
that would fail in editors or tsc eg.
   ```typescript
   import * as echarts from 'echarts';
   echart.init(...)
   ```
   - have nice types and completion for dev-time and tsc
   
   
   The "how", on a minimalistic example, taken from the docs, "generate a SVG 
server side and save to file" ; it must work in vscode, tsc, node and deno:
   - have a `./custom-types/echarts-modules.d.ts` which declare modules 
*properly*
   ```typescript
   declare module "echarts" {
       export { init } from "echarts/types/dist/echarts";
   }
   
   declare module "echarts/renderers" {
       export { SVGRenderer } from "echarts/types/dist/renderers";
   }
   ```
   - declare it in the tsconfig, without losing the usual `@types` packages
   ```typescript
   "compilerOptions": {
       ...
       "typeRoots": [
         "./custom-types", 👈
         "node_modules/@types"
       ]
       ...
   },
   "include": [
     "./src", 
     "./custom-types" 👈
   ],
   ```
   - have your code use the import from the modules (ie. `from 
<module-name-declared>`):
   ```typescript
   import type { SVGRenderer } from "echarts/renderers"; 👈
   import { init } from "echarts"; 👈
   import fs from "node:fs"
   
   
   let x : SVGRenderer;
   let chart = init(null, null, {
       renderer: 'svg',
       ssr: true,
       width: 600,
       height: 400
   })
   
   chart.setOption({
       xAxis: {
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },
       yAxis: {},
       series: [
           {
               type: 'bar',
               data: [23, 24, 18, 25, 27, 28, 25]
           }
       ]
   });
   const svgStr = chart.renderToSVGString();
   chart.dispose()
   fs.writeFileSync('/home/munoz/MMU/TEMP/TEST/out/bar.svg', svgStr, 'utf-8');
   
   ```
   and voilà, no error in editor, no error in tsc, runs in node and deno.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org