Merge 13e1392 into 745117b

README.md

@@ -65,20 +65,22 @@ This repository follows the mono-repository structure. It contains multiple npm
 
 To create a new package, call the `ckeditor5-package-generator` executable file. It requires a single argument which is the package name. It must follow the schema: `@scope/ckeditor5-package`, where [@scope](https://docs.npmjs.com/about-scopes) is an owner of the package, and `ckeditor5-package` is the package name. It must start with the `ckeditor5-` prefix.
 
-The tool will create a new directory called `ckeditor5-package` with an example plugin called `MyPlugin` and tools for developing the package.
+The tool will create a new directory called `ckeditor5-package` with an example plugin called `Package` and tools for its development.
 
 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] [--verbose] [--use-npm] [--use-yarn]
+node /path/to/repository/packages/ckeditor5-package-generator <packageName> [--dev] [--use-npm] [--use-yarn] [--name <...>] [--lang <js|ts>] [--verbose]
 ```
 
 #### Options
 
-* `--verbose` - (alias: `-v`) whether to prints additional logs about the current executed task.
-* `--dev` - 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` - whether to use `npm` to install dependencies in a newly created package.
-* `--use-yarn` - whether to use `yarn` to install dependencies in a newly created package.
+* `--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.
+* `--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.
 
 #### Developing the package
 

packages/ckeditor5-package-generator/README.md

@@ -1,7 +1,7 @@
 CKEditor 5 Package Generator
 ============================
 
-The `ckeditor5-package-generator` is a tool for developers, and it creates a working package with the development environment that allows writing new plugins for CKEditor 5.
+The `ckeditor5-package-generator` is a tool for developers. It creates a working package with the development environment that allows writing new custom plugins for CKEditor 5.
 
 ## Table of contents
 
@@ -11,25 +11,28 @@ The `ckeditor5-package-generator` is a tool for developers, and it creates a wor
 
 ## Requirements
 
-Due to the upcoming end of long-term support for `Node.js 12` in [April 2022](https://nodejs.org/en/about/releases/), the minimal version of `Node.js` required by CKEditor 5 Package Generator is `14`. And while not necessary, it is also nice to have the latest version of `yarn 1.x` installed globally.
+Due to the end of long-term support for `Node.js 12` in [April 2022](https://nodejs.org/en/about/releases/), the minimal version of `Node.js` required by CKEditor 5 Package Generator is `14`. And while not necessary, it is also nice to have the latest version of `yarn 1.x` installed globally.
 
 ## Creating a package
 
-To create a new package, execute the following command:
+To create a new package without installing the tool, simply execute the following command:
 
 ```bash
-npx ckeditor5-package-generator <packageName> [--verbose] [--use-npm] [--use-yarn]
+npx ckeditor5-package-generator <packageName> [--use-npm] [--use-yarn] [--name <...>] [--lang <js|ts>] [--verbose]
 ```
 
-The `<packageName>` argument is required and must follow these rules:
+The `<packageName>` argument is required and must obey these rules:
 
-* The provided name must match the schema: `@scope/ckeditor5-*`, where [@scope](https://docs.npmjs.com/about-scopes) is an owner of the package.
+* The provided name must match the schema: `@scope/ckeditor5-*`, where [@scope](https://docs.npmjs.com/about-scopes) is the owner of the package.
 * The package name must start with the `ckeditor5-` prefix.
+* Allowed characters are numbers (`0-9`), lowercase letters (`a-z`) and symbols: `-` `.` `_`.
 
-As a result of executing the command, a new directory with a package will be created. The directory's name will be equal to the specified package name without the `@scope` part, and it will contain an example plugin and the development environment.
+As a result of executing the command, a new directory with a package in it will be created. The directory's name will be equal to the specified package name without the `@scope` part, and it will contain an example plugin and the development environment.
 
 ### Modifiers
 
-* `--verbose` &ndash; (alias: `-v`) whether to prints additional logs about the current executed task.
-* `--use-npm` &ndash; whether to use `npm` to install dependencies in a newly created package.
-* `--use-yarn` &ndash; whether to use `yarn` to install dependencies in a newly created package.
+* `--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.
+* `--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.

packages/ckeditor5-package-generator/bin/index.js

@@ -27,6 +27,7 @@ new Command( packageJson.name )
 	.option( '--use-npm', 'whether use npm to install packages', false )
 	.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' )
 	.allowUnknownOption()
 	.action( ( packageName, options ) => init( packageName, options ) )
 	.parse( process.argv );

packages/ckeditor5-package-generator/lib/index.js

@@ -9,46 +9,47 @@ const chalk = require( 'chalk' );
 
 const Logger = require( './utils/logger' );
 
+const choosePackageManager = require( './utils/choose-package-manager' );
 const chooseProgrammingLanguage = require( './utils/choose-programming-language' );
 const copyFiles = require( './utils/copy-files' );
 const createDirectory = require( './utils/create-directory' );
 const getDependenciesVersions = require( './utils/get-dependencies-versions' );
-const getDllConfiguration = require( './utils/get-dll-configuration' );
+const getPackageNameFormats = require( './utils/get-package-name-formats' );
 const initializeGitRepository = require( './utils/initialize-git-repository' );
 const installDependencies = require( './utils/install-dependencies' );
 const installGitHooks = require( './utils/install-git-hooks' );
 const validatePackageName = require( './utils/validate-package-name' );
-const choosePackageManager = require( './utils/choose-package-manager' );
+const validatePluginName = require( './utils/validate-plugin-name' );
 
 /**
  * @param {String|undefined} packageName
  * @param {CKeditor5PackageGeneratorOptions} options
  */
 module.exports = async function init( packageName, options ) {
-	const logger = new Logger( options.verbose );
+	const { dev, verbose, useNpm, useYarn, lang, pluginName } = options;
+
+	const logger = new Logger( verbose );
 
 	validatePackageName( logger, packageName );
+	validatePluginName( logger, pluginName );
+	const formattedNames = getPackageNameFormats( packageName, pluginName );
 	const { directoryName, directoryPath } = createDirectory( logger, packageName );
-	const packageManager = await choosePackageManager( {
-		isNpmFlagUsed: options.useNpm,
-		isYarnFlagUsed: options.useYarn
-	} );
-	const programmingLanguage = await chooseProgrammingLanguage( logger, options );
-	const packageVersions = getDependenciesVersions( logger, { devMode: options.dev } );
-	const dllConfiguration = getDllConfiguration( packageName );
+	const packageManager = await choosePackageManager( useNpm, useYarn );
+	const programmingLanguage = await chooseProgrammingLanguage( logger, lang );
+	const packageVersions = getDependenciesVersions( logger, dev );
 
 	copyFiles( logger, {
-		program: packageManager,
-		programmingLanguage,
 		packageName,
+		formattedNames,
 		directoryPath,
-		packageVersions,
-		dllConfiguration
+		packageManager,
+		programmingLanguage,
+		packageVersions
 	} );
 
-	await installDependencies( directoryPath, options.verbose, packageManager, options.dev );
+	await installDependencies( directoryPath, packageManager, verbose, dev );
 	initializeGitRepository( directoryPath, logger );
-	await installGitHooks( directoryPath, logger, options );
+	await installGitHooks( directoryPath, logger, verbose );
 
 	logger.info( [
 		chalk.green( 'Done!' ),
@@ -76,4 +77,8 @@ module.exports = async function init( packageName, options ) {
  * @property {Boolean} [useYarn=false]
  *
  * @property {Boolean} [dev=false]
+ *
+ * @property {String} lang
+ *
+ * @property {String} pluginName
  */

packages/ckeditor5-package-generator/lib/templates/common/README.md

@@ -26,7 +26,7 @@ To read about the CKEditor 5 framework, visit the [CKEditor5 documentation](http
 
 Npm scripts are a convenient way to provide commands in a project. They are defined in the `package.json` file and shared with other people contributing to the project. It ensures that developers use the same command with the same options (flags).
 
-All the scripts can be executed by running `<%= program %> run <script>`. Pre and post commands with matching names will be run for those as well.
+All the scripts can be executed by running `<%= packageManager %> run <script>`. Pre and post commands with matching names will be run for those as well.
 
 The following scripts are available in the package.
 
@@ -42,13 +42,13 @@ Examples:
 
 ```bash
 # Starts the server and open the browser.
-<%= program %> run start
+<%= packageManager %> run start
 
 # Disable auto-opening the browser.
-<%= program %> run start <%= cliSeparator %>--no-open
+<%= packageManager %> run start <%= cliSeparator %>--no-open
 
 # Create the editor with the interface in German.
-<%= program %> run start <%= cliSeparator %>--language=de
+<%= packageManager %> run start <%= cliSeparator %>--language=de
 ```
 
 ### `test`
@@ -64,10 +64,10 @@ Examples:
 
 ```bash
 # Execute tests.
-<%= program %> run test
+<%= packageManager %> run test
 
 # Generate code coverage report after each change in the sources.
-<%= program %> run test <%= cliSeparator %>--coverage --test
+<%= packageManager %> run test <%= cliSeparator %>--coverage --test
 ```
 
 ### `lint`
@@ -78,7 +78,7 @@ Examples:
 
 ```bash
 # Execute eslint.
-<%= program %> run lint
+<%= packageManager %> run lint
 ```
 
 ### `stylelint`
@@ -89,7 +89,7 @@ Examples:
 
 ```bash
 # Execute stylelint.
-<%= program %> run stylelint
+<%= packageManager %> run stylelint
 ```
 
 ### `dll:build`
@@ -100,10 +100,10 @@ Examples:
 
 ```bash
 # Build the DLL file that is ready to publish.
-<%= program %> run dll:build
+<%= packageManager %> run dll:build
 
 # Build the DLL file and listen to changes in its sources.
-<%= program %> run dll:build <%= cliSeparator %>--watch
+<%= packageManager %> run dll:build <%= cliSeparator %>--watch
 ```
 
 ### `dll:serve`
@@ -114,7 +114,7 @@ Examples:
 
 ```bash
 # Starts the HTTP server and opens the browser.
-<%= program %> run dll:serve
+<%= packageManager %> run dll:serve
 ```
 
 ### `translations:collect`
@@ -130,7 +130,7 @@ The task may end with an error if one of the following conditions is met:
 Examples:
 
 ```bash
-<%= program %> run translations:collect
+<%= packageManager %> run translations:collect
 ```
 
 ### `translations:download`
@@ -144,7 +144,7 @@ To avoid passing the `--transifex` option every time when calls the command, you
 Examples:
 
 ```bash
-<%= program %> run translations:download <%= cliSeparator %>--transifex [API URL]
+<%= packageManager %> run translations:download <%= cliSeparator %>--transifex [API URL]
 ```
 
 ### `translations:upload`
@@ -158,7 +158,7 @@ To avoid passing the `--transifex` option every time when you call the command,
 Examples:
 
 ```bash
-<%= program %> run translations:upload <%= cliSeparator %>--transifex [API URL]
+<%= packageManager %> run translations:upload <%= cliSeparator %>--transifex [API URL]
 ```
 
 ## License

packages/ckeditor5-package-generator/lib/templates/common/ckeditor5-metadata.json

@@ -1,13 +1,13 @@
 {
 	"plugins": [
 		{
-			"name": "My plugin",
-			"className": "MyPlugin",
+			"name": "<%= formattedNames.plugin.spacedOut %>",
+			"className": "<%= formattedNames.plugin.pascalCase %>",
 			"description": "Adds text to the editor.",
-			"path": "src/myplugin.<%= programmingLanguage %>",
+			"path": "src/<%= formattedNames.plugin.lowerCaseMerged %>.<%= programmingLanguage %>",
 			"uiComponents": [
 				{
-					"name": "myButton",
+					"name": "<%= formattedNames.plugin.camelCase %>Button",
 					"type": "Button",
 					"iconPath": "theme/icons/ckeditor.svg"
 				}

packages/ckeditor5-package-generator/lib/templates/common/lang/contexts.json

@@ -1,3 +1,3 @@
 {
-  "My plugin": "Content for a tooltip is displayed when a user hovers the CKEditor 5 icon."
+	"<%= formattedNames.plugin.spacedOut %>": "Content for a tooltip is displayed when a user hovers the CKEditor 5 icon."
 }

packages/ckeditor5-package-generator/lib/templates/js/.gitignore.txt

@@ -0,0 +1,5 @@
+build/
+coverage/
+node_modules/
+tmp/
+sample/ckeditor.dist.js

packages/ckeditor5-package-generator/lib/templates/js/package.json

@@ -62,7 +62,7 @@
     "start": "ckeditor5-package-tools start",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
     "test": "ckeditor5-package-tools test",
-    "prepare": "<%= program %> run dll:build",
+    "prepare": "<%= packageManager %> run dll:build",
     "translations:collect": "ckeditor5-package-tools translations:collect",
     "translations:download": "ckeditor5-package-tools translations:download",
     "translations:upload": "ckeditor5-package-tools translations:upload"

packages/ckeditor5-package-generator/lib/templates/js/sample/ckeditor.js → packages/ckeditor5-package-generator/lib/templates/js/sample/ckeditor.js.txt

@@ -23,15 +23,14 @@ import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
 import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
 
-import MyPlugin from '../src/myplugin';
+import <%= formattedNames.plugin.pascalCase %> from '../src/<%= formattedNames.plugin.lowerCaseMerged %>';
 
 /* global document, window */
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
 		plugins: [
-			// `MyPlugin` is an example plugin generated by the package generator.
-			MyPlugin,
+			<%= formattedNames.plugin.pascalCase %>,
 			Essentials,
 			Autoformat,
 			BlockQuote,
@@ -55,8 +54,7 @@ ClassicEditor
 			Base64UploadAdapter
 		],
 		toolbar: [
-			// `myButton` is an example button provided by the `MyPlugin` class.
-			'myButton',
+			'<%= formattedNames.plugin.camelCase %>Button',
 			'|',
 			'heading',
 			'|',
@@ -80,7 +78,13 @@ ClassicEditor
 			'redo'
 		],
 		image: {
-			toolbar: [ 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'imageTextAlternative' ]
+			toolbar: [
+				'imageStyle:inline',
+				'imageStyle:block',
+				'imageStyle:side',
+				'|',
+				'imageTextAlternative'
+			]
 		},
 		table: {
 			contentToolbar: [