Add possibility to use es6 modules from data-story

[Lenivaya]

Prerequisites

Since data-story package is using es modules, we need to somehow reuse them in our node-js back-end application.

Using es modules

Start of a story

First of all we must include that lines in package.json to indicate that our code is using es modules

"type": "module",

In our tsconfig we’re also specifying modules to be esnext

"module": "esnext",

Problems with nest-js cli and fixes

With nest cli, tsc will compile the code, but another problem is that since our project now has module type, it requires all js code to have .mjs or .cjs extensions. Nest js and tsc just don’t handle it right now, when running our compiled code with node, it’ll throw an error. A lot of similar problems are being discussed on github
microsoft/TypeScript#18442
microsoft/TypeScript#35148
microsoft/TypeScript#37582
https://github.com/alshdavid/rxjs/blob/main/rollup.config.js#L10

To solve this kind of problem i decided to use rollup.js bundler. It can do what we want in 20 lines of code.

import typescript from '@rollup/plugin-typescript';

export default [
  // ES module build (replaces broken basic TypeScript compilation)
  // * ref: <https://github.com/microsoft/TypeScript/issues/18442> , <https://github.com/alshdavid/rxjs/blob/main/rollup.config.js#L10>
  // * ref: <https://github.com/microsoft/TypeScript/pull/35148>
  // * ref: <https://github.com/microsoft/TypeScript/issues/37582>
  {
    preserveModules: true, // or `false` to bundle as a single file
    input: ['src/main.ts'],
    output: [
      {
        dir: 'dist',
        format: 'cjs',
        entryFileNames: '[name].cjs',
      },
    ],
    plugins: [typescript({ tsconfig: './tsconfig.json' })],
  },
];

So now all code will be properly compiled to the dist folder.

Next step is replacing nest scripts with rollup and nodemon.

"build": "rollup -c",
"start": "concurrently \"rollup -c\" \"node dist/src/main.cjs\"",
"start:dev": "concurrently \"rollup -c --watch\" \"nodemon dist/src/main.cjs\"",
"start:prod": "node dist/src/main.cjs",

Excluding browser code from compiling

Nothing too clever here, just including what we want to see(types, utils, modules in core folder) and excluding what we don’t(browser related things)

{
  "include": [
    "src",
    "node_modules/@ajthinking/data-story/src/core/utils",
    "node_modules/@ajthinking/data-story/src/core/types",
    "node_modules/@ajthinking/data-story/src/core/*.ts"
  ],
  "exclude": ["node_modules/@ajthinking/data-story/src/core/EngineFactory.ts"]
}