refactor!: New installation method via ckeditor-package-tools 2.1.0

.editorconfig

@@ -1,3 +1,6 @@
+# Configurations to normalize the IDE behavior.
+# http://editorconfig.org/
+
 root = true
 
 [*]
@@ -13,4 +16,4 @@ quote_type = single
 
 [package.json]
 indent_style = space
-tab_width = 4
+tab_width = 2

.eslintrc.cjs

@@ -1,60 +1,46 @@
+/* eslint-env node */
+
+'use strict';
+
 module.exports = {
-	extends: [
-		"ckeditor5",
-		"plugin:@typescript-eslint/strict",
-		"plugin:@typescript-eslint/stylistic-type-checked",
+	extends: 'ckeditor5',
+	parser: '@typescript-eslint/parser',
+	plugins: [
+		'@typescript-eslint'
 	],
 	root: true,
-	plugins: ["@typescript-eslint"],
-	parser: "@typescript-eslint/parser",
-	parserOptions: {
-		project: true,
-		__tsconfigRootDir: __dirname,
-		ecmaVersion: "latest",
-		sourceType: "module",
-	},
-	globals: {
-		MathJax: true,
-		katex: true,
-		console: true,
-	},
 	ignorePatterns: [
-		// Ignore the entire `build/` (the DLL build).
-		"build/**",
+		// Ignore the entire `dist/` (the NIM build).
+		'dist/**',
 		// Ignore compiled JavaScript files, as they are generated automatically.
 		'src/**/*.js',
 		// Also, do not check typing declarations, too.
 		'src/**/*.d.ts'
 	],
 	rules: {
-		// This rule disallows importing core DLL packages directly. Imports should be done using the `ckeditor5` package.
-		// Also, importing non-DLL packages is not allowed. If the package requires other features to work, they should be
-		// specified as soft-requirements.
-		// Read more: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-26.html#soft-requirements.
-		"ckeditor5-rules/ckeditor-imports": "error",
-
-		// This rule could not be found ???
-		"ckeditor5-rules/use-require-for-debug-mode-imports": "off",
-
-		"no-void": ["error", { allowAsStatement: true }],
+		//  This rule disallows importing from any path other than the package main entrypoint.
+		'ckeditor5-rules/allow-imports-only-from-main-package-entry-point': 'error',
+		// This rule ensures that all imports from `@ckeditor/*` packages are done through the main package entry points.
+		// This is required for the editor types to work properly and to ease migration to the installation methods
+		// introduced in CKEditor 5 version 42.0.0.
+		'ckeditor5-rules/no-legacy-imports': 'error',
+		// As required by the ECMAScript (ESM) standard, all imports must include a file extension.
+		// If the import does not include it, this rule will try to automatically detect the correct file extension.
+		'ckeditor5-rules/require-file-extensions-in-imports': [
+			'error',
+			{
+				extensions: [ '.ts', '.js', '.json' ]
+			}
+		]
 	},
 	overrides: [
 		{
 			files: [ 'tests/**/*.[jt]s', 'sample/**/*.[jt]s' ],
 			rules: {
 				// To write complex tests, you may need to import files that are not exported in DLL files by default.
 				// Hence, imports CKEditor 5 packages in test files are not checked.
-				"ckeditor5-rules/ckeditor-imports": "off",
-			},
-		},
-		{
-			env: {
-				node: true,
-			},
-			files: [".eslintrc.{js,cjs}"],
-			parserOptions: {
-				sourceType: "script",
-			},
-		},
-	],
+				'ckeditor5-rules/ckeditor-imports': 'off'
+			}
+		}
+	]
 };

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 build/
+dist/
 tmp/
 sample/ckeditor.dist.js
 package-lock.json

README.md

@@ -22,6 +22,16 @@ ckeditor5-math is a TeX-based mathematical plugin for CKEditor 5. You can use it
     -   [From plain text](#from-plain-text)
 -   [Autoformat support](#autoformat-support)
 -   [Preview workaround](#preview-workaround)
+* [Available scripts](#available-scripts)
+  * [`start`](#start)
+  * [`test`](#test)
+  * [`lint`](#lint)
+  * [`stylelint`](#stylelint)
+  * [`build:dist`](#builddist)
+  * [`translations:collect`](#translationscollect)
+  * [`translations:download`](#translationsdownload)
+  * [`translations:upload`](#translationsupload)
+  * [`ts:build` and `ts:clear`](#tsbuild-and-tsclear)
 
 ## Features
 
@@ -286,3 +296,132 @@ To enter a development loop with hot reload support:
 -   http://localhost:8080
 
 [ckeditor 5 inspector]: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html#ckeditor-5-inspector
+
+## Available scripts
+
+NPM scripts are a convenient way to provide commands in a project. They are defined in the `package.json` file and shared with people contributing to the project. It ensures developers use the same command with the same options (flags).
+
+All the scripts can be executed by running `yarn run <script>`. Pre and post commands with matching names will be run for those as well.
+
+The following scripts are available in the package.
+
+### `start`
+
+Starts an HTTP server with the live-reload mechanism that allows previewing and testing of plugins available in the package.
+
+When the server starts, the default browser will open the developer sample. This can be disabled by passing the `--no-open` option to that command.
+
+You can also define the language that will translate the created editor by specifying the `--language [LANG]` option. It defaults to `'en'`.
+
+Examples:
+
+```bash
+# Starts the server and open the browser.
+yarn run start
+
+# Disable auto-opening the browser.
+yarn run start --no-open
+
+# Create the editor with the interface in German.
+yarn run start --language=de
+```
+
+### `test`
+
+Allows executing unit tests for the package, specified in the `tests/` directory. The command accepts the following modifiers:
+
+* `--coverage` &ndash; to create the code coverage report,
+* `--watch` &ndash; to observe the source files (the command does not end after executing tests),
+* `--source-map` &ndash; to generate source maps of sources,
+* `--verbose` &ndash; to print additional webpack logs.
+
+Examples:
+
+```bash
+# Execute tests.
+yarn run test
+
+# Generate code coverage report after each change in the sources.
+yarn run test --coverage --test
+```
+
+### `lint`
+
+Runs ESLint, which analyzes the code (all `*.ts` files) to quickly find problems.
+
+Examples:
+
+```bash
+# Execute eslint.
+yarn run lint
+```
+
+### `stylelint`
+
+Similar to the `lint` task, stylelint analyzes the CSS code (`*.css` files in the `theme/` directory) in the package.
+
+Examples:
+
+```bash
+# Execute stylelint.
+yarn run stylelint
+```
+
+### `build:dist`
+
+Creates npm and browser builds of your plugin. These builds can be added to the editor by following the [Configuring CKEditor 5 features](https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/configuration.html) guide.
+
+Examples:
+
+```bash
+# Builds the `npm` and browser files thats are ready to publish.
+npm run build:dist
+```
+
+### `translations:collect`
+
+Collects translation messages (arguments of the `t()` function) and context files, then validates whether the provided values do not interfere with the values specified in the `@ckeditor/ckeditor5-core` package.
+
+The task may end with an error if one of the following conditions is met:
+
+* Found the `Unused context` error &ndash; entries specified in the `lang/contexts.json` file are not used in source files. They should be removed.
+* Found the `Context is duplicated for the id` error &ndash; some of the entries are duplicated. Consider removing them from the `lang/contexts.json` file, or rewrite them.
+* Found the `Context for the message id is missing` error &ndash; entries specified in source files are not described in the `lang/contexts.json` file. They should be added.
+
+Examples:
+
+```bash
+yarn run translations:collect
+```
+
+### `translations:download`
+
+Download translations from the Transifex server. Depending on users' activity in the project, it creates translation files used for building the editor.
+
+The task requires passing the URL to Transifex API. Usually, it matches the following format: `https://www.transifex.com/api/2/project/[PROJECT_SLUG]`.
+
+To avoid passing the `--transifex` option whenever you call the command, you can store it in `package.json`, next to the `ckeditor5-package-tools translations:download` command.
+
+Examples:
+
+```bash
+yarn run translations:download --transifex [API URL]
+```
+
+### `translations:upload`
+
+Uploads translation messages onto the Transifex server. It allows users to create translations into other languages using the Transifex platform.
+
+The task requires passing the URL to the Transifex API. Usually, it matches the following format: `https://www.transifex.com/api/2/project/[PROJECT_SLUG]`.
+
+To avoid passing the `--transifex` option whenever you call the command, you can store it in `package.json`, next to the `ckeditor5-package-tools translations:upload` command.
+
+Examples:
+
+```bash
+yarn run translations:upload --transifex [API URL]
+```
+
+### `ts:build` and `ts:clear`
+
+These scripts compile TypeScript and remove the compiled files. They are used in the aforementioned life cycle scripts, and there is no need to call them manually.

ckeditor5-metadata.json

@@ -1,23 +1,23 @@
 {
-	"plugins": [
-		{
-			"name": "Math",
-			"className": "Math",
-			"description": "Adds mathematical formulas to the editor.",
-			"path": "src/math.js",
-			"uiComponents": [
-				{
-					"name": "math",
-					"type": "Button",
-					"iconPath": "theme/icons/math.svg"
-				}
-			]
-		},
-		{
-			"name": "AutoformatMath",
-			"className": "AutoformatMath",
-			"description": "Implements autoformatting with mathematical formulas.",
-			"path": "src/autoformatmath.js"
-		}
-	]
+  "plugins": [
+    {
+      "name": "Math",
+      "className": "Math",
+      "description": "Adds mathematical formulas to the editor.",
+      "path": "src/math.ts",
+      "uiComponents": [
+        {
+          "name": "math",
+          "type": "Button",
+          "iconPath": "theme/icons/math.svg"
+        }
+      ]
+    },
+	{
+		"name": "AutoformatMath",
+		"className": "AutoformatMath",
+		"description": "Implements autoformatting with mathematical formulas.",
+		"path": "src/autoformatmath.ts"
+	}
+  ]
 }

lang/contexts.json

@@ -0,0 +1,3 @@
+{
+  "Math": "Adds mathematical formulas to the editor."
+}