Skip to content

Commit

Permalink
feat(cdk): add schematics for migrate @taiga-ui/addon-editor to `@t…
Browse files Browse the repository at this point in the history
…inkoff/tui-editor` (#4870)

Co-authored-by: tinkoff-bot <[email protected]>
  • Loading branch information
splincode and tinkoff-bot authored Jul 10, 2023
1 parent e1ffffa commit 5f40437
Show file tree
Hide file tree
Showing 8 changed files with 208 additions and 11 deletions.
5 changes: 5 additions & 0 deletions projects/cdk/schematics/migration.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
"version": "3.35.0",
"factory": "./ng-update/v3-35/index#updateToV3_35"
},
"updateToV3_36": {
"description": "Add @tinkoff/tui-editor",
"version": "3.36.0",
"factory": "./ng-update/v3-36/index#updateToV3_36"
},
"updateToV4": {
"description": "Updates Taiga UI packages to v4",
"version": "4.0.0",
Expand Down
6 changes: 1 addition & 5 deletions projects/cdk/schematics/ng-add/schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"type": "boolean",
"default": true,
"x-prompt": {
"message": "Do you plan on using custom SVGs/icons or addon-editor? If `Yes` we will include ng-dompurify as sanitizer, read more: https://taiga-ui.dev/icons/bundled#sanitizer",
"message": "Do you plan on using custom SVGs/icons or TUI editor? If `Yes` we will include ng-dompurify as sanitizer, read more: https://taiga-ui.dev/icons/bundled#sanitizer",
"type": "confirmation"
}
},
Expand Down Expand Up @@ -79,10 +79,6 @@
"value": "addon-tablebars",
"label": "addon-tablebars Group action sliding toolbar"
},
{
"value": "addon-editor",
"label": "addon-editor Rich text editor extension with related components"
},
{
"value": "addon-preview",
"label": "addon-preview Custom fullscreen dialog to preview various content such as documents, images etc."
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import {getSourceFiles} from 'ng-morph';

import {ALL_FILES} from '../../../constants';
import {ALL_FILES} from '../../constants';

export function replaceText(replaceable: Array<{from: string; to: string}>): void {
const sourceFiles = getSourceFiles(ALL_FILES);
export function replaceText(
replaceable: Array<{from: string; to: string}>,
pattern = ALL_FILES,
): void {
const sourceFiles = getSourceFiles(pattern);

sourceFiles.forEach(file => {
let text = file.getFullText();
Expand Down
2 changes: 1 addition & 1 deletion projects/cdk/schematics/ng-update/v3-30/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
titleLog,
} from '../../utils/colored-log';
import {replaceImports} from '../steps/icons/replace-imports';
import {replaceText} from '../steps/icons/replace-text';
import {getFileSystem} from '../utils/get-file-system';
import {replaceText} from '../utils/replace-text';
import {ICONS_TS} from './constants/constants';
import {ICONS} from './constants/icons';

Expand Down
2 changes: 1 addition & 1 deletion projects/cdk/schematics/ng-update/v3-35/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
titleLog,
} from '../../utils/colored-log';
import {replaceImports} from '../steps/icons/replace-imports';
import {replaceText} from '../steps/icons/replace-text';
import {getFileSystem} from '../utils/get-file-system';
import {replaceText} from '../utils/replace-text';
import {ICONS_TS} from './constants/constants';
import {ICONS} from './constants/icons';

Expand Down
51 changes: 51 additions & 0 deletions projects/cdk/schematics/ng-update/v3-36/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import {Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
import {
addPackageJsonDependency,
getPackageJsonDependency,
removePackageJsonDependency,
saveActiveProject,
} from 'ng-morph';

import {ALL_TS_FILES} from '../../constants';
import {TuiSchema} from '../../ng-add/schema';
import {
FINISH_SYMBOL,
infoLog,
REPLACE_SYMBOL,
SMALL_TAB_SYMBOL,
titleLog,
} from '../../utils/colored-log';
import {getFileSystem} from '../utils/get-file-system';
import {replaceText} from '../utils/replace-text';

const OLD_PACKAGE = `@taiga-ui/addon-editor`;
const NEW_PACKAGE = `@tinkoff/tui-editor`;
const NEW_PACKAGE_VERSION = `^1.0.1`;

// eslint-disable-next-line @typescript-eslint/naming-convention
export function updateToV3_36(options: TuiSchema): Rule {
return (tree: Tree, _: SchematicContext) => {
if (!getPackageJsonDependency(tree, OLD_PACKAGE)) {
!options[`skip-logs`] &&
titleLog(`${FINISH_SYMBOL} No migrations required for ${OLD_PACKAGE}\n`);

return;
}

const fileSystem = getFileSystem(tree);

!options[`skip-logs`] &&
infoLog(
`${SMALL_TAB_SYMBOL}${REPLACE_SYMBOL} replacing imports for ${OLD_PACKAGE}...`,
);

replaceText([{from: OLD_PACKAGE, to: NEW_PACKAGE}], ALL_TS_FILES);
removePackageJsonDependency(tree, OLD_PACKAGE);
addPackageJsonDependency(tree, {name: NEW_PACKAGE, version: NEW_PACKAGE_VERSION});

fileSystem.commitEdits();
saveActiveProject();

!options[`skip-logs`] && titleLog(`${FINISH_SYMBOL} successfully migrated \n`);
};
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/* eslint-disable rxjs/no-topromise */
import {HostTree} from '@angular-devkit/schematics';
import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing';
import {TuiSchema} from '@taiga-ui/cdk/schematics/ng-add/schema';
import {
createProject,
createSourceFile,
resetActiveProject,
saveActiveProject,
setActiveProject,
} from 'ng-morph';
import {join} from 'path';

import {createAngularJson} from '../../../utils/create-angular-json';

const collectionPath = join(__dirname, `../../../migration.json`);

const COMPONENT_BEFORE = `import { TUI_EDITOR_EXTENSIONS, TUI_ATTACH_FILES_LOADER } from '@taiga-ui/addon-editor';
@Component({
selector: 'test',
templateUrl: './test.template.html',
styleUrls: ['./index.less'],
providers: [
{
provide: TUI_EDITOR_EXTENSIONS,
useValue: [
import('@taiga-ui/addon-editor/extensions/starter-kit').then(
({StarterKit}) => StarterKit,
),
import('@tiptap/extension-text-style').then(({TextStyle}) => TextStyle),
import('@taiga-ui/addon-editor/extensions/link').then(
({TuiLink}) => TuiLink,
),
import('@taiga-ui/addon-editor/extensions/jump-anchor').then(
({TuiJumpAnchor}) => TuiJumpAnchor,
),
import('@taiga-ui/addon-editor/extensions/file-link').then(
({TuiFileLink}) => TuiFileLink,
),
],
},
{
provide: TUI_ATTACH_FILES_LOADER,
deps: [FileIoService],
useFactory: fileLoader,
},
],
})
export class TestComponent {
}`;

const COMPONENT_AFTER = `import { TUI_EDITOR_EXTENSIONS, TUI_ATTACH_FILES_LOADER } from '@tinkoff/tui-editor';
@Component({
selector: 'test',
templateUrl: './test.template.html',
styleUrls: ['./index.less'],
providers: [
{
provide: TUI_EDITOR_EXTENSIONS,
useValue: [
import('@tinkoff/tui-editor/extensions/starter-kit').then(
({StarterKit}) => StarterKit,
),
import('@tiptap/extension-text-style').then(({TextStyle}) => TextStyle),
import('@tinkoff/tui-editor/extensions/link').then(
({TuiLink}) => TuiLink,
),
import('@tinkoff/tui-editor/extensions/jump-anchor').then(
({TuiJumpAnchor}) => TuiJumpAnchor,
),
import('@tinkoff/tui-editor/extensions/file-link').then(
({TuiFileLink}) => TuiFileLink,
),
],
},
{
provide: TUI_ATTACH_FILES_LOADER,
deps: [FileIoService],
useFactory: fileLoader,
},
],
})
export class TestComponent {
}`;

const PACKAGE_BEFORE = `{
"dependencies": {
"@angular/core": "~13.0.0",
"@taiga-ui/addon-editor": "3.35.0"
}
}`;

const PACKAGE_AFTER = `{
"dependencies": {
"@angular/core": "~13.0.0",
"@tinkoff/tui-editor": "^1.0.1"
}
}`;

describe(`ng-update`, () => {
let host: UnitTestTree;
let runner: SchematicTestRunner;

beforeEach(() => {
host = new UnitTestTree(new HostTree());
runner = new SchematicTestRunner(`schematics`, collectionPath);

setActiveProject(createProject(host));

createMainFiles();

saveActiveProject();
});

it(`should migrate addon-editor`, async () => {
const tree = await runner
.runSchematicAsync(
`updateToV3_36`,
{'skip-logs': process.env[`TUI_CI`] === `true`} as Partial<TuiSchema>,
host,
)
.toPromise();

expect(tree.readContent(`test/app/test.component.ts`)).toEqual(COMPONENT_AFTER);
expect(tree.readContent(`package.json`)).toEqual(PACKAGE_AFTER);
});

afterEach(() => {
resetActiveProject();
});
});

function createMainFiles(): void {
createSourceFile(`test/app/test.component.ts`, COMPONENT_BEFORE);

createSourceFile(`test/app/test.template.html`, `<tui-editor></tui-editor>`);

createAngularJson();

createSourceFile(`package.json`, PACKAGE_BEFORE);
}
1 change: 0 additions & 1 deletion projects/demo/src/modules/app/home/examples/addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ npm i @taiga-ui/addon-commerce // Money-related extension with currencies, cred
npm i @taiga-ui/addon-mobile // Components and tools specific to mobile version of the app
npm i @taiga-ui/addon-table // Interactive table component and related utilities
npm i @taiga-ui/addon-tablebars // Group action sliding toolbar
npm i @taiga-ui/addon-editor // Rich text editor extension with related components
npm i @taiga-ui/addon-preview // Custom fullscreen dialog to preview various content such as documents, images etc.
npm i @taiga-ui/addon-doc // Taiga UI based library for developing documentation portals for Angular libraries
npm i @taiga-ui/layout // Layout components
Expand Down

0 comments on commit 5f40437

Please sign in to comment.