igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
125 lines (124 loc) • 6.73 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
const UpdateChanges_1 = require("../common/UpdateChanges");
const util_1 = require("../common/util");
// use bare specifier to escape the schematics encapsulation for the dynamic import:
const import_helper_js_1 = require("igniteui-angular/migrations/common/import-helper.js");
const version = '11.0.0';
exports.default = () => (host, context) => __awaiter(void 0, void 0, void 0, function* () {
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
const { HtmlParser, getHtmlTagDefinition } = yield (0, import_helper_js_1.nativeImport)('@angular/compiler');
const update = new UpdateChanges_1.UpdateChanges(__dirname, host, context);
const TAGS = ['igx-grid', 'igx-tree-grid', 'igx-hierarchical-grid'];
const prop = ['[showToolbar]', 'showToolbar'];
const warnMsg = `\n<!-- Auto migrated template content. Please, check your bindings! -->\n`;
const changes = new Map();
const applyChanges = () => {
for (const [path, change] of changes.entries()) {
let buffer = host.read(path).toString();
change.sort((c, c1) => c.position - c1.position)
.reverse()
.forEach(c => buffer = c.apply(buffer));
host.overwrite(path, buffer);
}
};
const addChange = (path, change) => {
if (changes.has(path)) {
changes.get(path).push(change);
}
else {
changes.set(path, [change]);
}
};
const makeNgIf = (name, value) => name.startsWith('[') && value !== 'true';
// Try to preserve the template context variable binding
const getTemplateBinding = (node) => {
const template = (0, util_1.findElementNodes)([node], ['ng-template'])
.filter(tmpl => (0, util_1.hasAttribute)(tmpl, 'igxToolbarCustomContent'))[0];
if (template) {
return template.attrs.find(attr => attr.name.startsWith('let') && attr.value.startsWith('grid'))
.name.split('-')[1];
}
return 'childGrid';
};
const moveTemplateIfAny = (grid) => {
const ngTemplates = (0, util_1.findElementNodes)([grid], ['ng-template']);
const toolbarTemplate = ngTemplates.filter(template => (0, util_1.hasAttribute)(template, 'igxToolbarCustomContent'))[0];
if (toolbarTemplate) {
return `${warnMsg}\n${(0, util_1.serializeNodes)(toolbarTemplate.children, getHtmlTagDefinition).join('')}\n`;
}
return '';
};
// Row island migration
for (const path of update.templateFiles) {
(0, util_1.findElementNodes)((0, util_1.parseFile)(new HtmlParser(), host, path), 'igx-row-island')
.filter(island => (0, util_1.hasAttribute)(island, prop))
.map(island => (0, util_1.getSourceOffset)(island))
.forEach(offset => {
const { startTag, file, node } = offset;
const binding = getTemplateBinding(node);
const { name, value } = (0, util_1.getAttribute)(node, prop)[0];
// eslint-disable-next-line max-len
const text = `\n<igx-grid-toolbar [grid]="${binding}" *igxGridToolbar="let ${binding}"${makeNgIf(name, value) ? ` *ngIf="${value}"` : ''}>${moveTemplateIfAny(node)}</igx-grid-toolbar>\n`;
addChange(file.url, new util_1.FileChange(startTag.end, text));
});
}
applyChanges();
changes.clear();
// Clear row island templates
for (const path of update.templateFiles) {
(0, util_1.findElementNodes)((0, util_1.parseFile)(new HtmlParser(), host, path), 'igx-row-island')
.filter(grid => (0, util_1.hasAttribute)(grid, prop))
.map(grid => (0, util_1.findElementNodes)([grid], ['ng-template']))
.reduce((prev, curr) => prev.concat(curr), [])
.filter(template => (0, util_1.hasAttribute)(template, 'igxToolbarCustomContent'))
.forEach(node => {
const { startTag, endTag, file } = (0, util_1.getSourceOffset)(node);
const replaceText = file.content.substring(startTag.start, endTag.end);
addChange(file.url, new util_1.FileChange(startTag.start, '', replaceText, 'replace'));
});
}
applyChanges();
changes.clear();
// General migration
// Prepare the file changes
for (const path of update.templateFiles) {
(0, util_1.findElementNodes)((0, util_1.parseFile)(new HtmlParser(), host, path), TAGS)
.filter(grid => (0, util_1.hasAttribute)(grid, prop))
.map(node => (0, util_1.getSourceOffset)(node))
.forEach(offset => {
const { startTag, file, node } = offset;
const { name, value } = (0, util_1.getAttribute)(node, prop)[0];
// eslint-disable-next-line max-len
const text = `\n<igx-grid-toolbar${makeNgIf(name, value) ? ` *ngIf="${value}"` : ''}>${moveTemplateIfAny(node)}</igx-grid-toolbar>\n`;
addChange(file.url, new util_1.FileChange(startTag.end, text));
});
}
applyChanges();
changes.clear();
// Remove toolbar templates after migration
for (const path of update.templateFiles) {
(0, util_1.findElementNodes)((0, util_1.parseFile)(new HtmlParser(), host, path), TAGS)
.filter(grid => (0, util_1.hasAttribute)(grid, prop))
.map(grid => (0, util_1.findElementNodes)([grid], ['ng-template']))
.reduce((prev, curr) => prev.concat(curr), [])
.filter(template => (0, util_1.hasAttribute)(template, 'igxToolbarCustomContent'))
.forEach(node => {
const { startTag, endTag, file } = (0, util_1.getSourceOffset)(node);
const replaceText = file.content.substring(startTag.start, endTag.end);
addChange(file.url, new util_1.FileChange(startTag.start, '', replaceText, 'replace'));
});
}
applyChanges();
// Remove the input properties
update.applyChanges();
});