Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Package Generator for NIM - updated way of handling the package generation. #168

Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ef70c63
Change the flag name from '--use-only-new-installation-methods' to '-…
pszczesniak Jun 10, 2024
68b8dfa
Remove log.
pszczesniak Jun 10, 2024
1637990
Tests.
pszczesniak Jun 11, 2024
b72d328
Update 'ckeditor5' dependencies in templates.
pszczesniak Jun 11, 2024
8f96042
Remove logs.
pszczesniak Jun 11, 2024
ecc1a74
Remove old dependencies of ckeditor5 packages in legacy ts template.
pszczesniak Jun 11, 2024
70dd271
Added infobox with the link to the guide when current and legacy inst…
pszczesniak Jun 11, 2024
0382618
Tests coverage back to 100%.
pszczesniak Jun 11, 2024
12beda7
Extend tsconfig for ts templates to prevent imports without extensions.
pszczesniak Jun 13, 2024
13abbf5
Removed unnecessary eslint rules.
pszczesniak Jun 13, 2024
38934e0
Added missing import extensions and needed fixes to handle it correctly.
pszczesniak Jun 13, 2024
ff0c76e
Add eslint rule 'allow-imports-only-from-main-package-entry-point'.
pszczesniak Jun 13, 2024
667a4a8
Unify tsconfigs intendation type and size.
pszczesniak Jun 13, 2024
f3f1d51
Add eslint rule 'require-file-extensions-in-imports'.
pszczesniak Jun 13, 2024
3767f0f
Add eslint rules also to ts templates and add comments to them.
pszczesniak Jun 13, 2024
0434f8b
Added 'exports' in 'package.json' files inside legacy templates.
pszczesniak Jun 14, 2024
93f58fd
Update eslint config and add new rule for NIM templates.
pszczesniak Jun 18, 2024
61a4af4
Added link to documentation about supporting multiple versions of CKE…
pszczesniak Jun 18, 2024
4a0a6f5
Code review fixes.
pszczesniak Jun 18, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -74,35 +74,35 @@ jobs:
name: Run unit tests
command: yarn run coverage
- run:
name: Verify build (JavaScript, npm)
command: node scripts/ci/verify-build -l js -p npm
name: Verify build (JavaScript, npm, current and legacy installation methods)
command: node scripts/ci/verify-build -l js -p npm -m current-and-legacy
- run:
name: Verify build (JavaScript, yarn)
command: node scripts/ci/verify-build -l js -p yarn
name: Verify build (JavaScript, yarn, current and legacy installation methods)
command: node scripts/ci/verify-build -l js -p yarn -m current-and-legacy
- run:
name: Verify build (JavaScript, npm, only new methods)
command: node scripts/ci/verify-build -l js -p npm -m
name: Verify build (JavaScript, npm, current installation methods)
command: node scripts/ci/verify-build -l js -p npm -m current
- run:
name: Verify build (JavaScript, yarn, only new methods)
command: node scripts/ci/verify-build -l js -p yarn -m
name: Verify build (JavaScript, yarn, current installation methods)
command: node scripts/ci/verify-build -l js -p yarn -m current
- run:
name: Verify build (TypeScript, npm, custom plugin name)
command: node scripts/ci/verify-build -l ts -p npm -n CustomPluginName
name: Verify build (TypeScript, npm, current and legacy installation methods, custom plugin name)
command: node scripts/ci/verify-build -l ts -p npm -m current-and-legacy -n CustomPluginName
- run:
name: Verify build (TypeScript, npm, only new methods, custom plugin name)
command: node scripts/ci/verify-build -l ts -p npm -m -n CustomPluginName
name: Verify build (TypeScript, npm, current installation methods, custom plugin name)
command: node scripts/ci/verify-build -l ts -p npm -m current -n CustomPluginName
- run:
name: Verify build (JavaScript, yarn, custom plugin name)
command: node scripts/ci/verify-build -l js -p yarn -n customPluginName400
name: Verify build (JavaScript, yarn, current and legacy installation methods, custom plugin name)
command: node scripts/ci/verify-build -l js -p yarn -m current-and-legacy -n customPluginName400
- run:
name: Verify build (JavaScript, yarn, only new methods, custom plugin name)
command: node scripts/ci/verify-build -l js -p yarn -m -n customPluginName400
name: Verify build (JavaScript, yarn, current installation methods, custom plugin name)
command: node scripts/ci/verify-build -l js -p yarn -m current -n customPluginName400
- run:
name: Verify build (TypeScript, yarn)
command: node scripts/ci/verify-build -l ts -p yarn
name: Verify build (TypeScript, yarn, current and legacy installation methods)
command: node scripts/ci/verify-build -l ts -p yarn -m current-and-legacy
- run:
name: Verify build (TypeScript, yarn, only new methods)
command: node scripts/ci/verify-build -l ts -p yarn -m
name: Verify build (TypeScript, yarn, current installation methods)
command: node scripts/ci/verify-build -l ts -p yarn -m current
- unless:
# Upload the code coverage results for non-nightly builds only.
condition: << pipeline.parameters.isNightly >>
Expand Down
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Changelog

### Features

* **[generator](https://www.npmjs.com/package/ckeditor5-package-generator)**: Added the `--use-only-new-installation-methods` CLI flag that should allow the generation of a package without support for the [DLL builds](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html). See [#15502](https://github.com/ckeditor/ckeditor5/issues/15502), [#15739](https://github.com/ckeditor/ckeditor5/issues/15739).
* **[generator](https://www.npmjs.com/package/ckeditor5-package-generator)**: Added the `--installation-methods` CLI flag that should allow the generation of a package without support for the [DLL builds](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html). See [#15502](https://github.com/ckeditor/ckeditor5/issues/15502), [#15739](https://github.com/ckeditor/ckeditor5/issues/15739).
* **[tools](https://www.npmjs.com/package/@ckeditor/ckeditor5-package-tools)**: Karma will use the `tsconfig.test.json` file as a TypeScript configuration if it exists when executing automated tests. By default, it fallbacks to `tsconfig.json` file. ([commit](https://github.com/ckeditor/ckeditor5-package-generator/commit/56207d846095a78e35bf2805c2c30823cb6cb9de))

### Bug fixes
Expand Down
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,15 @@ The tool will create a new directory called `ckeditor5-package` with an example
To use a local version of the `@ckeditor/ckeditor5-package-tools` package, use the `--dev` option when executing the command.

```bash
node /path/to/repository/packages/ckeditor5-package-generator <packageName> [--dev] [--use-npm] [--use-yarn] [--use-only-new-installation-methods] [--name <...>] [--lang <js|ts>] [--verbose]
node /path/to/repository/packages/ckeditor5-package-generator <packageName> [--dev] [--use-npm] [--use-yarn] [--installation-methods <current|current-and-legacy>] [--name <...>] [--lang <js|ts>] [--verbose]
```

#### Options

* `--dev` &ndash; whether to execute in the development mode. It means that the `@ckeditor/ckeditor5-package-tools` will not be installed from npm, but from the local file system.
* `--use-npm` &ndash; use `npm` to install dependencies in a newly created package.
* `--use-yarn` &ndash; use `yarn` to install dependencies in a newly created package.
* `--use-only-new-installation-methods` &ndash; use only new installation methods in a newly created package.
* `--installation-methods` &ndash; (values: `current` | `current-and-legacy`) choose which installation methods of CKEditor 5 do you want to support? If omitted, the script will ask the user to choose manually.
* `--name` &ndash; define a class name to be different from the package name.
* `--lang` &ndash; (values: `js` | `ts`) choose whether the created package should use JavaScript or TypeScript. If omitted, the script will ask the user to choose manually.
* `--verbose` &ndash; (alias: `-v`) print additional logs about the current executed task.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"chalk": "^4.1.2",
"coveralls": "^3.1.1",
"eslint": "^7.32.0",
"eslint-config-ckeditor5": "^5.3.2",
"eslint-config-ckeditor5": "^6.0.0",
"glob": "^10.2.5",
"husky": "^8.0.2",
"lint-staged": "^10.5.4",
Expand Down
4 changes: 2 additions & 2 deletions packages/ckeditor5-package-generator/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ While not necessary, it is also nice to have the latest version of `yarn 1.x` in
To create a new package without installing the tool, simply execute the following command:

```bash
npx ckeditor5-package-generator <packageName> [--use-npm] [--use-yarn] [--use-only-new-installation-methods] [--plugin-name <...>] [--lang <js|ts>] [--verbose]
npx ckeditor5-package-generator <packageName> [--use-npm] [--use-yarn] [--installation-methods <current|current-and-legacy>] [--plugin-name <...>] [--lang <js|ts>] [--verbose]
```

The `<packageName>` argument is required and must follow these rules:
Expand All @@ -41,7 +41,7 @@ As a result of executing the command, a new directory with a package in it will

* `--use-npm` &ndash; use `npm` to install dependencies in a newly created package.
* `--use-yarn` &ndash; use `yarn` to install dependencies in a newly created package.
* `--use-only-new-installation-methods` &ndash; use only new installation methods in a newly created package.
* `--installation-methods` &ndash; (values: `current` | `current-and-legacy`) choose which installation methods of CKEditor 5 do you want to support? If omitted, the script will ask the user to choose manually.
* `--plugin-name` &ndash; define a class name to be different from the package name.
* `--lang` &ndash; (values: `js` | `ts`) choose whether the created package should use JavaScript or TypeScript. If omitted, the script will ask the user to choose it manually.
* `--verbose` &ndash; (alias: `-v`) print additional logs about the current executed task.
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-package-generator/bin/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ new Command( packageJson.name )
.option( '--use-yarn', 'whether use yarn to install packages', false )
.option( '--lang <lang>', 'programming language to use' )
.option( '--plugin-name <name>', 'optional custom plugin name' )
.option( '--use-only-new-installation-methods', 'without using legacy methods of installations', false )
.option( '--installation-methods <method>', 'supported method of installation' )
.allowUnknownOption()
.version( packageJson.version )
.addHelpText( 'after', `\nVersion: ${ packageJson.version }` )
Expand Down
32 changes: 29 additions & 3 deletions packages/ckeditor5-package-generator/lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const chalk = require( 'chalk' );

const Logger = require( './utils/logger' );

const chooseInstallationMethods = require( './utils/choose-installation-methods' );
const choosePackageManager = require( './utils/choose-package-manager' );
const chooseProgrammingLanguage = require( './utils/choose-programming-language' );
const copyFiles = require( './utils/copy-files' );
Expand All @@ -26,7 +27,7 @@ const validatePluginName = require( './utils/validate-plugin-name' );
* @param {CKeditor5PackageGeneratorOptions} options
*/
module.exports = async function init( packageName, options ) {
const { dev, verbose, useNpm, useYarn, useOnlyNewInstallationMethods, lang, pluginName } = options;
const { dev, verbose, useNpm, useYarn, installationMethods, lang, pluginName } = options;

const logger = new Logger( verbose );

Expand All @@ -36,6 +37,7 @@ module.exports = async function init( packageName, options ) {
const { directoryName, directoryPath } = createDirectory( logger, packageName );
const packageManager = await choosePackageManager( useNpm, useYarn );
const programmingLanguage = await chooseProgrammingLanguage( logger, lang );
const installationMethodOfPackage = await chooseInstallationMethods( logger, installationMethods );
const packageVersions = getDependenciesVersions( logger, dev );

copyFiles( logger, {
Expand All @@ -45,7 +47,7 @@ module.exports = async function init( packageName, options ) {
packageManager,
programmingLanguage,
packageVersions,
useOnlyNewInstallationMethods
installationMethodOfPackage
} );

await installDependencies( directoryPath, packageManager, verbose, dev );
Expand All @@ -66,6 +68,30 @@ module.exports = async function init( packageName, options ) {
'Example: ' + chalk.gray( packageManager + ' run start' ),
''
].join( '\n' ), { startWithNewLine: true } );

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to avoid changing the box manually in the future when we want to change displayed text, please use the table package in order to generate the box dynamically.

Copy link
Member

@przemyslaw-zan przemyslaw-zan Jun 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An example:

const tableData = [
	[ '' ],
	[ 'Supporting a wider range of CKEditor 5 versions requires using' ],
	[ 'a more complex method of importing modules from CKEditor 5.' ],
	[ '' ],
	[ 'Read more here: <LINK TO THE GUIDE EXPLAINING THIS></LINK>' ],
	[ '' ]
];

const tableConfig = {
	columns: [ {
		paddingLeft: 2,
		paddingRight: 2
	} ],
	singleLine: true,
	border: {
		topLeft: '╭',
		topRight: '╮',
		bottomLeft: '╰',
		bottomRight: '╯',
		topBody: '─',
		bottomBody: '─',
		bodyLeft: '│',
		bodyRight: '│'
	}
};

logger.info( table( tableData, tableConfig ), { startWithNewLine: true } );

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO the cost of maintaining this is low, and the table plugin comes with 17 other dependencies. That's quite a lot of dependencies for drawing a table.

https://npmgraph.js.org/?q=table

if ( installationMethodOfPackage === 'current-and-legacy' ) {
logger.info( [
chalk.yellow.inverse(
' ╔═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╗ '
),
chalk.yellow.inverse(
' ║ Supporting a wider range of CKEditor 5 versions requires using a more complex method of importing modules ║ '
),
chalk.yellow.inverse(
' ║ from CKEditor 5. ║ '
),
chalk.yellow.inverse(
' ║ ║ '
),
chalk.yellow.inverse(
' ║ Read more here: https://ckeditor.com/docs/ckeditor5/latest/framework/tutorials/supporting-multiple-versions.html ║ '
),
chalk.yellow.inverse(
' ╚═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝ '
),
''
].join( '\n' ), { startWithNewLine: true } );
}
};

/**
Expand All @@ -77,7 +103,7 @@ module.exports = async function init( packageName, options ) {
*
* @property {Boolean} [useYarn=false]
*
* @property {Boolean} [useOnlyNewInstallationMethods=false]
* @property {String} installationMethods
*
* @property {Boolean} [dev=false]
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,17 @@ module.exports = {
// 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'
'ckeditor5-rules/ckeditor-imports': 'error',
// This rule disallows importing from any path other than the package main entrypoint.
'ckeditor5-rules/allow-imports-only-from-main-package-entry-point': '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: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,18 @@
],
"type": "module",
"main": "src/index.js",
"exports": {
".": "./src/index.js",
"./dist/index.js": "./dist/index.js",
"./translations/*.js": {
"types": "./dist/translations/*.d.ts",
"import": "./dist/translations/*.js"
},
"./*.css": "./dist/*.css",
"./build/*": "./build/*",
"./src/*": "./src/*",
"./package.json": "./package.json"
},
"license": "MIT",
"engines": {
"node": ">=18.0.0",
Expand All @@ -27,27 +39,10 @@
"ckeditor5-metadata.json"
],
"devDependencies": {
"@ckeditor/ckeditor5-autoformat": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-basic-styles": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-block-quote": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-code-block": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-core": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-dev-build-tools": "<%= packageVersions.ckeditor5DevBuildTools %>",
"@ckeditor/ckeditor5-editor-classic": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-essentials": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-heading": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-image": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-indent": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-inspector": ">=<%= packageVersions.ckeditor5Inspector %>",
"@ckeditor/ckeditor5-link": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-list": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-media-embed": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-package-tools": "<%= packageVersions.packageTools %>",
"@ckeditor/ckeditor5-paragraph": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-table": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-theme-lark": ">=<%= packageVersions.ckeditor5 %>",
"@ckeditor/ckeditor5-upload": ">=<%= packageVersions.ckeditor5 %>",
"ckeditor5": ">=<%= packageVersions.ckeditor5 %>",
"ckeditor5": "alpha",
"eslint": "^7.32.0",
"eslint-config-ckeditor5": ">=<%= packageVersions.eslintConfigCkeditor5 %>",
"http-server": "^14.1.0",
Expand All @@ -57,7 +52,7 @@
"stylelint-config-ckeditor5": ">=<%= packageVersions.stylelintConfigCkeditor5 %>"
},
"peerDependencies": {
"ckeditor5": ">=<%= packageVersions.ckeditor5 %>"
"ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
},
"scripts": {
"build:dist": "node ./scripts/build-dist.mjs",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,20 @@ module.exports = {
'dist/**'
],
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 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: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,9 @@
"main": "dist/index.js",
"module": "dist/index.js",
"exports": {
".": {
"import": "./dist/index.js"
},
".": "./dist/index.js",
"./translations/*.js": {
"types": "./dist/translations/*.d.ts",
"import": "./dist/translations/*.js"
},
"./*.css": "./dist/*.css",
Expand All @@ -36,8 +35,7 @@
"@ckeditor/ckeditor5-dev-build-tools": "<%= packageVersions.ckeditor5DevBuildTools %>",
"@ckeditor/ckeditor5-inspector": ">=<%= packageVersions.ckeditor5Inspector %>",
"@ckeditor/ckeditor5-package-tools": "<%= packageVersions.packageTools %>",
"ckeditor5": "nightly",
"ckeditor5-premium-features": "nightly",
"ckeditor5": "alpha",
"eslint": "^7.32.0",
"eslint-config-ckeditor5": ">=<%= packageVersions.eslintConfigCkeditor5 %>",
"http-server": "^14.1.0",
Expand All @@ -47,8 +45,7 @@
"stylelint-config-ckeditor5": ">=<%= packageVersions.stylelintConfigCkeditor5 %>"
},
"peerDependencies": {
"ckeditor5": "nightly",
"ckeditor5-premium-features": "nightly"
"ckeditor5": ">=42.0.0 || ^0.0.0-nightly"
},
"scripts": {
"build:dist": "node ./scripts/build-dist.mjs",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {

import <%= formattedNames.plugin.pascalCase %> from '../src/<%= formattedNames.plugin.lowerCaseMerged %>.js';

import 'ckeditor5/index.css';
import 'ckeditor5/ckeditor5.css';

/* global document, window */

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,17 @@ module.exports = {
// 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'
'ckeditor5-rules/ckeditor-imports': 'error',
// This rule disallows importing from any path other than the package main entrypoint.
'ckeditor5-rules/allow-imports-only-from-main-package-entry-point': '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: [
{
Expand Down
Loading