[TS] PoC of using types with custom build

[arkflpc]

Part of #13471.

[Witoso]

The result of PoC:

• Project with custom build based on the alpha.1 release. On ckeditor5 repo in the dedicated branch.
• Write down how the integration went. What steps happened, etc. what was not obvious, did it help, in what, we could later reuse it in guides for this dedicated technology and in TS blog post.

[arkflpc]

The example project is on branch ck/13549-build-from-source-typescript in example/custom-build directory.

I stared with online builder and downloaded a sample project.

Changes in the build

To transform the downloaded build to TypeScript, I did:

1. Add tsconfig.json to the main directory (src is the build directory).

{
  "compilerOptions": {
      "strict": true,
      "noImplicitAny": true,
      "module": "ES6",
      "target": "ES2019",
      "moduleResolution": "node"
  },
  "include": [
    "src"
  ]
}

2. Add ts-loader and typescrtipt (v4.9.3) as dev-dependencies of build.
3. Updated all ckeditor5 dependencies to version 37.0.0-alpha.3.
4. Rename src/ckeditor.js to src/ckeditor.ts.
5. Change all imports in src/ckeditor.ts to pull from package's main export (i.e. import ClassicEditor from @ckeditor/ckeditor5-editor-classic/src/classiceditor; replaced by import { ClassicEditor } from @ckeditor/ckeditor5-editor-classic;).
6. Update webpack.config.json (using ts-loader for .ts and added resolve: { extensions: [ '.js', '.ts' ] }; changed entry to ckeditor.ts).

After that changes, the build builds correctly and generates build/ckeditor.js and build/ckeditor.js.map).

Enabling types in the build

To generate types for the build (to be used by the sample project), I did:

1. Add tsconfig.types.json.

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "declarationDir": "build",
    "stripInternal": true
  },
  "include": [
    "src",
  ]
}

2. Add "postbuild": "tsc -p ./tsconfig.types.json" to package.json (under "scripts").
3. Add "types": "./build/ckeditor.d.ts", to package.json.

After that changes, the build generates build/ckeditor.d.ts in addition to the other build results.

Changing the sample project to be in TypeScript.

The sample project after being downloaded is basically the <script> tag in index.html. To make it a TypeScript project, I made the content of this script be a separate .js file built by webpack from .d.ts.

I made the changes (all of them are in sample directory):

1. Add tsconfig.json

{
  "compilerOptions": {
      "strict": true,
      "noImplicitAny": true,
      "module": "ES6",
      "target": "ES2019",
      "moduleResolution": "node"
  }
}

2. Add app.ts which creates an editor instance from the build.

import ClassicEditor from '../build/ckeditor';

ClassicEditor.create( /* ... */ );

3. Add webpack.config.json that:
   • resolves .ts files,
   • uses ts-loaded,
   • has an entry ./app.ts,
   • has an output ./app.js in the same directory.
4. Change index.html:
   • removed <script src="../build/ckeditor.js"></script>,
   • <script>ClassicEditor.create( /* ... /* ).</script> replaced with <script src="./app.js"><script>.

After that changes, the project builds with webpack --mode production run in sample directory.

The types are visible in Visual Studio when editing sample/app.ts.

[arkflpc]

cc: @apadol-cksource