Skip to content

Commit

Permalink
Updated values returned by the getPackageNameFormats function.
Browse files Browse the repository at this point in the history
  • Loading branch information
przemyslaw-zan committed Nov 8, 2022
1 parent 149a75e commit 18eb02d
Show file tree
Hide file tree
Showing 26 changed files with 339 additions and 219 deletions.
5 changes: 3 additions & 2 deletions packages/ckeditor5-package-generator/lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,15 @@ module.exports = async function init( packageName, options ) {

validatePackageName( logger, packageName );
validatePluginName( logger, pluginName );
const packageNameFormats = getPackageNameFormats( packageName, pluginName );
const formattedNames = getPackageNameFormats( packageName, pluginName );
const { directoryName, directoryPath } = createDirectory( logger, packageName );
const packageManager = await choosePackageManager( useNpm, useYarn );
const programmingLanguage = await chooseProgrammingLanguage( logger, lang );
const packageVersions = getDependenciesVersions( logger, dev );

copyFiles( logger, {
packageNameFormats,
packageName,
formattedNames,
directoryPath,
packageManager,
programmingLanguage,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<%= packageNameFormats.fullScoped %>
<% print( '='.repeat( packageNameFormats.fullScoped.length ) ) %>
<%= packageName %>
<% print( '='.repeat( packageName.length ) ) %>

This package was created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package.

Expand Down Expand Up @@ -163,6 +163,6 @@ Examples:

## License

The `<%= packageNameFormats.fullScoped %>` package is available under [MIT license](https://opensource.org/licenses/MIT).
The `<%= packageName %>` package is available under [MIT license](https://opensource.org/licenses/MIT).

However, it is the default license of packages created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package and it can be changed.
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"plugins": [
{
"name": "<%= packageNameFormats.spacedOut %>",
"className": "<%= packageNameFormats.pascalCase %>",
"name": "<%= formattedNames.plugin.spacedOut %>",
"className": "<%= formattedNames.plugin.pascalCase %>",
"description": "Adds text to the editor.",
"path": "src/<%= packageNameFormats.lowerCase %>.<%= programmingLanguage %>",
"path": "src/<%= formattedNames.plugin.lowerCaseMerged %>.<%= programmingLanguage %>",
"uiComponents": [
{
"name": "<%= packageNameFormats.camelCase %>Button",
"name": "<%= formattedNames.plugin.camelCase %>Button",
"type": "Button",
"iconPath": "theme/icons/ckeditor.svg"
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"<%= packageNameFormats.spacedOut %>": "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."
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "<%= packageNameFormats.fullScoped %>",
"name": "<%= packageName %>",
"version": "0.0.1",
"description": "A plugin for CKEditor 5.",
"keywords": [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +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 <%= packageNameFormats.pascalCase %> from '../src/<%= packageNameFormats.lowerCase %>';
import <%= formattedNames.plugin.pascalCase %> from '../src/<%= formattedNames.plugin.lowerCaseMerged %>';

/* global document, window */

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
<%= packageNameFormats.pascalCase %>,
<%= formattedNames.plugin.pascalCase %>,
Essentials,
Autoformat,
BlockQuote,
Expand All @@ -54,7 +54,7 @@ ClassicEditor
Base64UploadAdapter
],
toolbar: [
'<%= packageNameFormats.camelCase %>Button',
'<%= formattedNames.plugin.camelCase %>Button',
'|',
'heading',
'|',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
build</a>, initialized using the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">DLL builds</a>.
</p>
<p>
Your plugin (<%= packageNameFormats.pascalCase %>) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the <code>sample/dll.html</code> file.
Your plugin (<%= formattedNames.plugin.pascalCase %>) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the <code>sample/dll.html</code> file.
</p>

<h3>Uncaught TypeError</h3>
<p>If the editor is not initialized correctly and the browser console displays an error such as the following:</p>
<pre><code>Uncaught TypeError: Cannot read properties of undefined (reading '<%= packageNameFormats.pascalCase %>') at dll.html:85</code></pre>
<p>it means that the DLL build of the <code><%= packageNameFormats.fullScoped %></code> package has not been created.</p>
<pre><code>Uncaught TypeError: Cannot read properties of undefined (reading '<%= formattedNames.plugin.pascalCase %>') at dll.html:85</code></pre>
<p>it means that the DLL build of the <code><%= packageName %></code> package has not been created.</p>
<p>Please call the <code><%= packageManager %> run dll:build</code> command in the CLI, and after it finishes, refresh the page.</p>

<h3>Anatomy of the DLL build</h3>
Expand Down Expand Up @@ -77,16 +77,16 @@
<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>

<!-- The "<%= packageNameFormats.fullScoped %>" package DLL build is served from the `build/` directory -->
<script src="../build/<%= packageNameFormats.featureName %>.js"></script>
<!-- The "<%= packageName %>" package DLL build is served from the `build/` directory -->
<script src="../build/<%= formattedNames.package.raw %>.js"></script>

<script>
console.log( 'Objects exported by the DLL build:', CKEditor5[ '<%= packageNameFormats.featureName %>' ] );
console.log( 'Objects exported by the DLL build:', CKEditor5[ '<%= formattedNames.package.camelCase %>' ] );

CKEditor5.editorClassic.ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
CKEditor5[ '<%= packageNameFormats.featureName %>' ].<%= packageNameFormats.pascalCase %>,
CKEditor5[ '<%= formattedNames.package.camelCase %>' ].<%= formattedNames.plugin.pascalCase %>,
CKEditor5.essentials.Essentials,
CKEditor5.autoformat.Autoformat,
CKEditor5.blockQuote.BlockQuote,
Expand All @@ -110,7 +110,7 @@
CKEditor5.upload.Base64UploadAdapter
],
toolbar: [
'<%= packageNameFormats.camelCase %>Button',
'<%= formattedNames.plugin.camelCase %>Button',
'|',
'heading',
'|',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ <h1>CKEditor 5 – Development Sample</h1>
<h2>Development environment</h2>
<p>
This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor
build</a> that loads your plugin (<code><%= packageNameFormats.pascalCase %></code>) generated by the tool. You can modify this
build</a> that loads your plugin (<code><%= formattedNames.plugin.pascalCase %></code>) generated by the tool. You can modify this
sample and use it to validate whether a plugin or a set of plugins work fine.
</p>
<p>
<code><%= packageNameFormats.pascalCase %></code> inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
<code><%= formattedNames.plugin.pascalCase %></code> inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
</p>

<h3>Helpful resources</h3>
Expand Down Expand Up @@ -71,11 +71,11 @@ <h3>The directory structure</h3>
│ ├─ index.html # The currently displayed file.
│ └─ ckeditor.js # The editor initialization script.
├─ src
│ ├─ <%= packageNameFormats.lowerCase %>.ts
│ ├─ <%= formattedNames.plugin.lowerCaseMerged %>.ts
│ ├─ index.js # The modules exported by the package when using the DLL builds.
│ └─ **/*.js # All JavaScript source files should be saved here.
├─ tests
│ ├─ <%= packageNameFormats.lowerCase %>.js
│ ├─ <%= formattedNames.plugin.lowerCaseMerged %>.js
│ ├─ index.js # Tests for the plugin.
│ └─ **/*.js # All tests should be saved here.
├─ theme
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@ import { ButtonView } from 'ckeditor5/src/ui';

import ckeditor5Icon from '../theme/icons/ckeditor.svg';

export default class <%= packageNameFormats.pascalCase %> extends Plugin {
export default class <%= formattedNames.plugin.pascalCase %> extends Plugin {
static get pluginName() {
return '<%= packageNameFormats.pascalCase %>';
return '<%= formattedNames.plugin.pascalCase %>';
}

init() {
const editor = this.editor;
const t = editor.t;
const model = editor.model;

// Add the "<%= packageNameFormats.camelCase %>Button" to feature components.
editor.ui.componentFactory.add( '<%= packageNameFormats.camelCase %>Button', locale => {
// Add the "<%= formattedNames.plugin.camelCase %>Button" to feature components.
editor.ui.componentFactory.add( '<%= formattedNames.plugin.camelCase %>Button', locale => {
const view = new ButtonView( locale );

view.set( {
label: t( '<%= packageNameFormats.spacedOut %>' ),
label: t( '<%= formattedNames.plugin.spacedOut %>' ),
icon: ckeditor5Icon,
tooltip: true
} );
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import ckeditor from './../theme/icons/ckeditor.svg';

export { default as <%= packageNameFormats.pascalCase %> } from './<%= packageNameFormats.lowerCase %>';
export { default as <%= formattedNames.plugin.pascalCase %> } from './<%= formattedNames.plugin.lowerCaseMerged %>';

export const icons = {
ckeditor
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import <%= packageNameFormats.pascalCase %> from '../src/<%= packageNameFormats.lowerCase %>';
import <%= formattedNames.plugin.pascalCase %> from '../src/<%= formattedNames.plugin.lowerCaseMerged %>';

/* global document */

describe( '<%= packageNameFormats.pascalCase %>', () => {
describe( '<%= formattedNames.plugin.pascalCase %>', () => {
it( 'should be named', () => {
expect( <%= packageNameFormats.pascalCase %>.pluginName ).to.equal( '<%= packageNameFormats.pascalCase %>' );
expect( <%= formattedNames.plugin.pascalCase %>.pluginName ).to.equal( '<%= formattedNames.plugin.pascalCase %>' );
} );

describe( 'init()', () => {
Expand All @@ -23,10 +23,10 @@ describe( '<%= packageNameFormats.pascalCase %>', () => {
Paragraph,
Heading,
Essentials,
<%= packageNameFormats.pascalCase %>
<%= formattedNames.plugin.pascalCase %>
],
toolbar: [
'<%= packageNameFormats.camelCase %>Button'
'<%= formattedNames.plugin.camelCase %>Button'
]
} );
} );
Expand All @@ -36,18 +36,18 @@ describe( '<%= packageNameFormats.pascalCase %>', () => {
return editor.destroy();
} );

it( 'should load <%= packageNameFormats.pascalCase %>', () => {
const myPlugin = editor.plugins.get( '<%= packageNameFormats.pascalCase %>' );
it( 'should load <%= formattedNames.plugin.pascalCase %>', () => {
const myPlugin = editor.plugins.get( '<%= formattedNames.plugin.pascalCase %>' );

expect( myPlugin ).to.be.an.instanceof( <%= packageNameFormats.pascalCase %> );
expect( myPlugin ).to.be.an.instanceof( <%= formattedNames.plugin.pascalCase %> );
} );

it( 'should add an icon to the toolbar', () => {
expect( editor.ui.componentFactory.has( '<%= packageNameFormats.camelCase %>Button' ) ).to.equal( true );
expect( editor.ui.componentFactory.has( '<%= formattedNames.plugin.camelCase %>Button' ) ).to.equal( true );
} );

it( 'should add a text into the editor after clicking the icon', () => {
const icon = editor.ui.componentFactory.create( '<%= packageNameFormats.camelCase %>Button' );
const icon = editor.ui.componentFactory.create( '<%= formattedNames.plugin.camelCase %>Button' );

expect( editor.getData() ).to.equal( '' );

Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { <%= packageNameFormats.pascalCase %> as <%= packageNameFormats.pascalCase %>Dll, icons } from '../src';
import <%= packageNameFormats.pascalCase %> from '../src/<%= packageNameFormats.lowerCase %>';
import { <%= formattedNames.plugin.pascalCase %> as <%= formattedNames.plugin.pascalCase %>Dll, icons } from '../src';
import <%= formattedNames.plugin.pascalCase %> from '../src/<%= formattedNames.plugin.lowerCaseMerged %>';

import ckeditor from './../theme/icons/ckeditor.svg';

describe( 'CKEditor5 <%= packageNameFormats.pascalCase %> DLL', () => {
it( 'exports <%= packageNameFormats.pascalCase %>', () => {
expect( <%= packageNameFormats.pascalCase %>Dll ).to.equal( <%= packageNameFormats.pascalCase %> );
describe( 'CKEditor5 <%= formattedNames.plugin.pascalCase %> DLL', () => {
it( 'exports <%= formattedNames.plugin.pascalCase %>', () => {
expect( <%= formattedNames.plugin.pascalCase %>Dll ).to.equal( <%= formattedNames.plugin.pascalCase %> );
} );

describe( 'icons', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "<%= packageNameFormats.fullScoped %>",
"name": "<%= packageName %>",
"version": "0.0.1",
"description": "A plugin for CKEditor 5.",
"keywords": [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ 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 <%= packageNameFormats.pascalCase %> from '../src/<%= packageNameFormats.lowerCase %>';
import <%= formattedNames.plugin.pascalCase %> from '../src/<%= formattedNames.plugin.lowerCaseMerged %>';

ClassicEditor
.create( document.getElementById( 'editor' )!, {
plugins: [
<%= packageNameFormats.pascalCase %>,
<%= formattedNames.plugin.pascalCase %>,
Essentials,
Autoformat,
BlockQuote,
Expand All @@ -58,7 +58,7 @@ ClassicEditor
Base64UploadAdapter
],
toolbar: [
'<%= packageNameFormats.camelCase %>Button',
'<%= formattedNames.plugin.camelCase %>Button',
'|',
'heading',
'|',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
build</a>, initialized using the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/dll-builds.html">DLL builds</a>.
</p>
<p>
Your plugin (<%= packageNameFormats.pascalCase %>) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the <code>sample/dll.html</code> file.
Your plugin (<%= formattedNames.plugin.pascalCase %>) generated by the tool is already loaded into the editor. By default, it has an example button that adds some text to the editor. Whenever you change the plugin's name or toolbar items, make sure to update the editor configuration in the <code>sample/dll.html</code> file.
</p>

<h3>Uncaught TypeError</h3>
<p>If the editor is not initialized correctly and the browser console displays an error such as the following:</p>
<pre><code>Uncaught TypeError: Cannot read properties of undefined (reading '<%= packageNameFormats.pascalCase %>') at dll.html:85</code></pre>
<p>it means that the DLL build of the <code><%= packageNameFormats.fullScoped %></code> package has not been created.</p>
<pre><code>Uncaught TypeError: Cannot read properties of undefined (reading '<%= formattedNames.plugin.pascalCase %>') at dll.html:85</code></pre>
<p>it means that the DLL build of the <code><%= packageName %></code> package has not been created.</p>
<p>Please call the <code><%= packageManager %> run dll:build</code> command in the CLI, and after it finishes, refresh the page.</p>

<h3>Anatomy of the DLL build</h3>
Expand Down Expand Up @@ -88,16 +88,16 @@
<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>

<!-- The "<%= packageNameFormats.fullScoped %>" package DLL build is served from the `build/` directory -->
<script src="../build/<%= packageNameFormats.featureName %>.js"></script>
<!-- The "<%= packageName %>" package DLL build is served from the `build/` directory -->
<script src="../build/<%= formattedNames.package.raw %>.js"></script>

<script>
console.log( 'Objects exported by the DLL build:', CKEditor5[ '<%= packageNameFormats.featureName %>' ] );
console.log( 'Objects exported by the DLL build:', CKEditor5[ '<%= formattedNames.package.camelCase %>' ] );

CKEditor5.editorClassic.ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [
CKEditor5[ '<%= packageNameFormats.featureName %>' ].<%= packageNameFormats.pascalCase %>,
CKEditor5[ '<%= formattedNames.package.camelCase %>' ].<%= formattedNames.plugin.pascalCase %>,
CKEditor5.essentials.Essentials,
CKEditor5.autoformat.Autoformat,
CKEditor5.blockQuote.BlockQuote,
Expand All @@ -121,7 +121,7 @@
CKEditor5.upload.Base64UploadAdapter
],
toolbar: [
'<%= packageNameFormats.camelCase %>Button',
'<%= formattedNames.plugin.camelCase %>Button',
'|',
'heading',
'|',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ <h1>CKEditor 5 – Development Sample</h1>
<h2>Development environment</h2>
<p>
This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor
build</a> that loads your plugin (<code><%= packageNameFormats.pascalCase %></code>) generated by the tool. You can modify this
build</a> that loads your plugin (<code><%= formattedNames.plugin.pascalCase %></code>) generated by the tool. You can modify this
sample and use it to validate whether a plugin or a set of plugins work fine.
</p>
<p>
<code><%= packageNameFormats.pascalCase %></code> inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
<code><%= formattedNames.plugin.pascalCase %></code> inserts text into the editor. You can click the CKEditor 5 icon in the toolbar and see the results.
</p>

<h3>Helpful resources</h3>
Expand Down Expand Up @@ -71,11 +71,11 @@ <h3>The directory structure</h3>
│ ├─ index.html # The currently displayed file.
│ └─ ckeditor.ts # The editor initialization script.
├─ src
│ ├─ <%= packageNameFormats.lowerCase %>.ts
│ ├─ <%= formattedNames.plugin.lowerCaseMerged %>.ts
│ ├─ index.ts # The modules exported by the package when using the DLL builds.
│ └─ **/*.ts # All TypeScript source files should be saved here.
├─ tests
│ ├─ <%= packageNameFormats.lowerCase %>.ts
│ ├─ <%= formattedNames.plugin.lowerCaseMerged %>.ts
│ ├─ index.ts # Tests for the plugin.
│ └─ **/*.ts # All tests should be saved here.
├─ theme
Expand Down

0 comments on commit 18eb02d

Please sign in to comment.