@fontoxml/fontoxml-development-tools 3.9.0-beta.1 → 3.9.0-beta.2

package/src/modules/editor/src/webpackPlugins/FdtOutputPlugin.js

@@ -1,6 +1,23 @@
 import os from 'os';
+import DirectoryWatcher from 'watchpack/lib/DirectoryWatcher.js';
 import webpack from 'webpack';
 
+// Monkey patch watchpack to output any chokidar errors.
+let response;
+let watchErrorDebounceTimeout;
+
+const originalOnWatcherError = DirectoryWatcher.prototype.onWatcherError;
+DirectoryWatcher.prototype.onWatcherError = function (_error) {
+	clearTimeout(watchErrorDebounceTimeout);
+	watchErrorDebounceTimeout = setTimeout(() => {
+		(response || console).error(
+			'\nSomething went wrong while watching for file changes. Try closing applications, such as other development servers or IDEs, and restarting the development server to resolve this issue.'
+		);
+	}, 500);
+
+	return originalOnWatcherError.apply(this, arguments);
+};
+
 const BUILD_MESSAGE_DEBOUNCE_IN_MS = 100;
 
 function getEndTimestamp(stats) {
@@ -9,156 +26,146 @@ function getEndTimestamp(stats) {
 	).toLocaleTimeString();
 }
 
-/**
- * This plugin wraps webpack's output to ensure only the import stuff gets
- * outputted to the command line.
- */
 export default class FdtOutputPlugin {
 	constructor(options) {
 		this.res = options.res;
-		this.inDevelopmentMode = !!options.inDevelopmentMode;
+		this.inDevelopmentMode = options.inDevelopmentMode;
 
 		this.hasClearLine =
 			typeof this.res.config.stdout.clearLine === 'function';
 
 		this.resetState();
+
+		response = this.res;
 	}
 
 	resetState() {
 		this.previousBuildMessageTimestamp = 0;
+		this.previousBuildProgressIsMinify = false;
 		this.previousProgressIsBuild = false;
 		this.previousRoundedPercentage = null;
 	}
 
-	/**
-	 * @param {number}    percentage
-	 * @param {string}    message
-	 * @param {...string} args
-	 */
-	progressHandler(percentage, _message, ..._args) {
-		if (percentage >= 0.99) {
-			return;
-		}
+	handler(percentage, message, ...args) {
+		if (message === 'doneWithStats') {
+			this.previousProgressIsBuild = false;
+			const stats = args[0];
+			const endTimestamp = getEndTimestamp(stats);
+			const statusPrefix = stats
+				? `Build done at ${endTimestamp} in ${
+						stats.endTime - stats.startTime
+				  }ms`
+				: `Build done at ${endTimestamp}`;
+
+			if (stats && (stats.hasErrors() || stats.hasWarnings())) {
+				this.res.needsClearing = true;
+				this.res[stats.hasErrors() ? 'error' : 'notice'](
+					stats.hasErrors() && stats.hasWarnings()
+						? `${statusPrefix}, with errors and warnings:`
+						: stats.hasErrors()
+						? `${statusPrefix}, with errors:`
+						: `${statusPrefix}, with warnings:`,
+					false
+				);
 
-		if (this.hasClearLine || !this.previousProgressIsBuild) {
+				const errorsAndWarnings = stats.toString({
+					all: false,
+					colors: true,
+					errors: true,
+					moduleTrace: true,
+					warnings: true,
+				});
+
+				this.res.raw(errorsAndWarnings);
+				this.res.raw(os.EOL + os.EOL);
+
+				this.res.needsClearing = false;
+				if (this.inDevelopmentMode) {
+					this.res.log(
+						'Waiting for new changes...',
+						this.hasClearLine
+					);
+				}
+			} else {
+				this.res.needsClearing = true;
+				if (this.inDevelopmentMode) {
+					this.res.success(
+						`${statusPrefix}, waiting for new changes...`,
+						this.hasClearLine
+					);
+				} else {
+					this.res.success(
+						`${statusPrefix}.
+					`,
+						false
+					);
+				}
+			}
+		} else if (message === 'failedWithError') {
+			this.previousProgressIsBuild = false;
+			this.res.needsClearing = true;
+			const error = args[0];
+			const endTimestamp = getEndTimestamp();
+			this.res.error(
+				`Failed at ${endTimestamp} with error: ${
+					error && error.message ? error.message : error
+				}`,
+				this.hasClearLine
+			);
+		} else if (this.hasClearLine || !this.previousProgressIsBuild) {
 			const roundedPercentage = Math.floor(percentage * 100);
 			const buildMessageTimestamp = Date.now();
+			const buildProgressIsMinify =
+				message === 'chunk asset optimization';
 
 			// Relax outputting of progress based on previous state.
 			if (
 				!this.previousProgressIsBuild ||
+				this.previousBuildProgressIsMinify !== buildProgressIsMinify ||
 				(roundedPercentage > this.previousRoundedPercentage &&
 					buildMessageTimestamp >
 						this.previousBuildMessageTimestamp +
 							BUILD_MESSAGE_DEBOUNCE_IN_MS)
 			) {
 				this.previousBuildMessageTimestamp = buildMessageTimestamp;
+				this.previousBuildProgressIsMinify = buildProgressIsMinify;
 				this.previousProgressIsBuild = true;
 				this.previousRoundedPercentage = roundedPercentage;
 
 				this.res.needsClearing = true;
 
+				const statusPrefix = buildProgressIsMinify
+					? 'Minifying'
+					: 'Building';
 				this.res.log(
 					this.hasClearLine
-						? `Building... ${roundedPercentage}%`
-						: `Building...`,
+						? `${statusPrefix}... ${roundedPercentage}%`
+						: `${statusPrefix}...`,
 					true
 				);
 			}
 		}
 	}
 
-	/**
-	 * @param {webpack.Stats} stats
-	 */
-	doneHandler(stats) {
-		this.previousProgressIsBuild = false;
-		const endTimestamp = getEndTimestamp(stats);
-		const statusPrefix = stats
-			? `Build done at ${endTimestamp} in ${
-					stats.endTime - stats.startTime
-			  }ms`
-			: `Build done at ${endTimestamp}`;
-
-		if (stats && (stats.hasErrors() || stats.hasWarnings())) {
-			this.res.needsClearing = true;
-			this.res.clearIfNeeded();
-
-			const errorsAndWarnings = stats.toString({
-				all: false,
-				colors: true,
-				errors: true,
-				moduleTrace: true,
-				warnings: true,
-			});
-			this.res.raw(errorsAndWarnings);
-			this.res.raw(os.EOL + os.EOL);
-
-			this.res[stats.hasErrors() ? 'error' : 'notice'](
-				stats.hasErrors() && stats.hasWarnings()
-					? `${statusPrefix}, with errors and warnings.`
-					: stats.hasErrors()
-					? `${statusPrefix}, with errors.`
-					: `${statusPrefix}, with warnings.`,
-				false
-			);
-			this.res.break();
-
-			this.res.needsClearing = false;
-			if (this.inDevelopmentMode) {
-				this.res.log('Waiting for new changes...', this.hasClearLine);
-			}
-		} else {
-			this.res.needsClearing = true;
-			if (this.inDevelopmentMode) {
-				this.res.success(
-					`${statusPrefix}, waiting for new changes...`,
-					this.hasClearLine
-				);
-			} else {
-				this.res.success(
-					`${statusPrefix}.
-				`,
-					false
-				);
-			}
-		}
-	}
-
-	failedHandler(error) {
-		this.previousProgressIsBuild = false;
-		this.res.needsClearing = true;
-		const endTimestamp = getEndTimestamp();
-		this.res.error(
-			`Failed at ${endTimestamp} with error: ${
-				error && error.message ? error.message : error
-			}`,
-			this.hasClearLine
-		);
-	}
-
-	/**
-	 * @param {webpack.Compiler} compiler
-	 */
 	apply(compiler) {
 		// Listen to compile hook before the webpack ProgressPlugin, to reset state.
-		compiler.hooks.compile.tap(FdtOutputPlugin.name, () => {
+		compiler.hooks.compile.tap('FdtOutputPlugin', (_compilationParams) => {
 			this.resetState();
 		});
 
 		// Use ProgressPlugin to handle most hooks.
 		new webpack.ProgressPlugin({
-			handler: this.progressHandler.bind(this),
+			handler: this.handler.bind(this),
 		}).apply(compiler);
 
 		// Listen to done hook and call handler WITH stats, which ProgressPlugin does not do.
-		compiler.hooks.done.tap(FdtOutputPlugin.name, (stats) => {
-			this.doneHandler(stats);
+		compiler.hooks.done.tap('FdtOutputPlugin', (stats) => {
+			this.handler(1, 'doneWithStats', stats);
 		});
 
 		// Listen to failed hook and call handler, which ProgressPlugin does not do.
-		compiler.hooks.failed.tap(FdtOutputPlugin.name, (error) => {
-			this.failedHandler(error);
+		compiler.hooks.failed.tap('FdtOutputPlugin', (error) => {
+			this.handler(1, 'failedWithError', error);
 		});
 	}
 }

package/src/modules/editor/src/webpackPlugins/RemoveExplicitExtensionResolvePlugin.js

@@ -1,35 +1,35 @@
-/** @typedef {import('enhanced-resolve').Resolver} Resolver */
-
 import getPaths from 'enhanced-resolve/lib/getPaths.js';
 import path from 'path';
 
-/**
- * This plugin ensures that import paths with an extension are always resolved
- * as if they were extensionless.
- */
+/** @typedef {import('enhanced-resolve').Resolver} Resolver */
+
 export default class RemoveExplicitExtensionResolvePlugin {
 	constructor(options = {}) {
 		this.options = options;
+
+		// Performing this plugin as early as possible. An alternative is to do it in the raw-file
+		// step (which is the same stap as the AppendPlugin runs, used for resolve.extensions).
+		this.source = 'resolve';
+		this.target = 'resolve';
 	}
 
 	/**
 	 * @param {Resolver} resolver
 	 */
 	apply(resolver) {
-		const target = resolver.ensureHook('resolve');
+		const target = resolver.ensureHook(this.target);
 		resolver
-			.getHook('resolve')
+			.getHook(this.source)
 			.tapAsync(
-				RemoveExplicitExtensionResolvePlugin.name,
+				'RemoveExplicitExtensionResolvePlugin',
 				(request, resolveContext, callback) => {
 					const basename = getPaths.basename(request.request);
 					if (!basename) {
 						return callback();
 					}
 
-					// If there is no extension, or the extension is not in the
-					// list of extensions, do not try to resolve with different
-					// extensions.
+					// If there is no extension, or the extension is not in the list of extensions, do
+					// not try to resolve with different extensions.
 					const extension = path.extname(basename);
 					const extensions = this.options.extensions || [];
 					if (!extension || !extensions.includes(extension)) {
@@ -43,17 +43,18 @@ export default class RemoveExplicitExtensionResolvePlugin {
 					);
 					const dirPath = path.dirname(request.request);
 					if (!request.request.startsWith(dirPath)) {
-						return callback(
-							new Error(
-								`Failed to remove explicit extension for "${request.request}" to "${fileNameWithoutExtension}".`
-							)
+						throw new Error(
+							`Failed to remove explicit extension for "${request.request}" to "${fileNameWithoutExtension}".`
 						);
 					}
 					const obj = {
 						...request,
-						request: `${dirPath}/${fileNameWithoutExtension}`,
+						request: resolver.join(
+							dirPath,
+							fileNameWithoutExtension
+						),
 					};
-					return resolver.doResolve(
+					resolver.doResolve(
 						target,
 						obj,
 						`removing extension ${extension}`,

package/src/modules/editor/src/webpackPlugins/ResolveImportAliasPlugin.js

@@ -1,37 +1,28 @@
-/** @typedef {import('webpack').Compiler} Compiler */
-
 import { importAliases as legacyImportAliases } from '../config.js';
 
-/**
- * This plugin resolves special import aliases to their actual location on disk,
- * e.g. 'fds/components' to 'fontoxml-vendors/src/fds/components'.
- */
 export default class ResolveImportAliasPlugin {
-	inDevelopmentMode;
+	#inDevelopmentMode;
 
 	constructor(options) {
-		this.inDevelopmentMode = options.inDevelopmentMode || false;
+		this.#inDevelopmentMode = options.inDevelopmentMode || false;
 	}
 
 	_addImportAlias(importAliases, importAlias) {
 		importAliases.set(
 			importAlias.alias,
-			(this.inDevelopmentMode && importAlias.devImport) ||
+			(this.#inDevelopmentMode && importAlias.devImport) ||
 				importAlias.import
 		);
 	}
 
-	/**
-	 * @param {Compiler} compiler
-	 */
 	apply(compiler) {
 		const importAliases = new Map();
 
 		// On each compilation, gather all import aliases as early as possible
 		// and store them so they can be used in the resolver plugin below.
 		compiler.hooks.thisCompilation.tap(
-			ResolveImportAliasPlugin.name,
-			(compilation) => {
+			'ResolveImportAliasPlugin',
+			(compilation, _compilationParams) => {
 				// Start with a clean slate for each compilation.
 				importAliases.clear();
 
@@ -86,12 +77,13 @@ export default class ResolveImportAliasPlugin {
 
 		compiler.resolverFactory.hooks.resolver
 			.for('normal')
-			.tap(ResolveImportAliasPlugin.name, (resolver) => {
+			.tap('ResolveImportAliasPlugin', (resolver) => {
 				const target = resolver.ensureHook('resolve');
+
 				resolver.getHook('resolve').tapAsync(
 					// Loosely based on Webpack's own alias resolve plugin.
 					// See: https://github.com/webpack/enhanced-resolve/blob/main/lib/AliasPlugin.js
-					ResolveImportAliasPlugin.name,
+					'ResolveImportAliasPlugin',
 					(request, resolveContext, callback) => {
 						const innerRequest = request.request || request.path;
 
@@ -121,10 +113,10 @@ export default class ResolveImportAliasPlugin {
 
 								// Don't allow other aliasing or raw request.
 								if (result === undefined) {
-									return callback(undefined, null);
+									return callback(null, null);
 								}
 
-								callback(undefined, result);
+								callback(null, result);
 							}
 						);
 					}

package/src/modules/editor/src/webpackPlugins/UnitTestPlugin.js

@@ -1,26 +1,20 @@
-/** @typedef {import('webpack').Compiler} Compiler */
-
 import {
 	addPackageDependencies,
 	getPackageManifest,
 	orderPackages,
 } from '../getDependenciesInLoadOrder.js';
 
-/**
- * This plugin fakes a proper dependency tree for unit tests.
- */
+const plugin = { name: 'UnitTestPlugin' };
+
 export default class UnitTestPlugin {
 	constructor(options) {
 		this.options = options;
 	}
 
-	/**
-	 * @param {Compiler} compiler
-	 */
 	apply(compiler) {
 		compiler.hooks.thisCompilation.tap(
-			UnitTestPlugin.name,
-			(compilation) => {
+			plugin,
+			(compilation, _compilationParams) => {
 				try {
 					const packageRootFolders =
 						this.options.paths.packageRootFolders;
@@ -30,14 +24,13 @@ export default class UnitTestPlugin {
 					if (!compilation.packagesInfoInLoadOrder) {
 						compilation.errors.push(
 							new Error(
-								`Could not get package load order information. Make sure the package exists, and ${UnitTestPlugin.name} runs after the dependencies in load order plugin.`
+								`Could not get package load order information. Make sure the package exists, and ${plugin.name} runs after the dependencies in load order plugin.`
 							)
 						);
 						return;
 					}
 
-					// Map packagesInfoInLoadOrder back to
-					// packageInfoByPackageName.
+					// Map packagesInfoInLoadOrder back to packageInfoByPackageName.
 					const packageInfoByPackageName =
 						compilation.packagesInfoInLoadOrder.reduce(
 							(acc, packageInfo) => {
@@ -47,9 +40,8 @@ export default class UnitTestPlugin {
 							Object.create(null)
 						);
 
-					// Add a virtual package for the tests, as devDependencies
-					// may be circular if seen as dependencies of the package
-					// itself.
+					// Add a virtual package for the tests, as devDependencies may be circular if seen as
+					// dependencies of the package itself.
 					const manifest = getPackageManifest(rootPackagePath);
 					const virtualTestPackageName = `${rootPackageName}-virtual-test-package`;
 					const initialPackageInfo = {
@@ -70,8 +62,7 @@ export default class UnitTestPlugin {
 						packageInfoByPackageName
 					);
 
-					// Now topologically sort everything again, and filter out
-					// the virtual test package.
+					// Now topologically sort everything again, and filter out the virtual test package.
 					compilation.packagesInfoInLoadOrder = orderPackages(
 						packageInfoByPackageName
 					).filter(
@@ -81,13 +72,12 @@ export default class UnitTestPlugin {
 
 					compilation.packagesInfoInLoadOrderError = null;
 
-					// Set the package to unit test on the compilation for use
-					// in the generated loader.
+					// Set the package to unit test on the compilation for use in the generated loader.
 					compilation.unitTestPackageInfo =
 						packageInfoByPackageName[rootPackageName];
 				} catch (error) {
-					// Do not directly push the error to compilation errors, but
-					// let consumers handle errors themselves.
+					// Do not directly push the error to compilation errors, but let consumers
+					// handle errors themselves.
 					compilation.packagesInfoInLoadOrder = null;
 					compilation.packagesInfoInLoadOrderError = error;
 					compilation.unitTestPackageInfo = null;
@@ -95,7 +85,7 @@ export default class UnitTestPlugin {
 			}
 		);
 
-		compiler.hooks.done.tap(UnitTestPlugin.name, (stats) => {
+		compiler.hooks.done.tap(plugin, (stats) => {
 			if (
 				stats.compilation.errors &&
 				stats.compilation.errors.length &&

package/src/modules/editor-pre-7-7-0/src/api/init/createConfigConfiguration.js

@@ -4,6 +4,7 @@
 import babel from '@babel/core';
 import os from 'os';
 
+import { isPre7170Editor } from '../../../../../editorVersions.js';
 import SchemaSummary from '../../../../schema/src/api/SchemaSummary.js';
 import addCommentToAstNode, {
 	trickRecastIntoKeepingStatementsTogether,
@@ -27,9 +28,21 @@ const buildNamespaceManagerImport = template(
 const buildConfigurationSetUniqueIdConfigurations = template(
 	`configurationManager.set('unique-id-configurations', CONFIGURATION_VALUE);`
 );
+
+// Pre-7.17.0 versions had no xq template tags, so a different expression wil be used.
+const buildConfigurationSetUniqueIdConfigurationsObjectPre7170 =
+	template.expression(
+		`{ selector: 'self::*', namespaceURI: null, localName: 'id', strategy: 'unique-for-document' }`
+	);
+
 const buildConfigurationSetUniqueIdConfigurationsObject = template.expression(
-	`{ selector: 'self::*', namespaceURI: null, localName: 'id', strategy: 'unique-for-document' }`
+	`{ selector: xq\`self::*\`, namespaceURI: null, localName: 'id', strategy: 'unique-for-document' }`
 );
+
+const buildXqImport = template(
+	`import xq from 'fontoxml-selectors/src/xq.js';`
+);
+
 const buildNamespaceManagerAddNamespace = template(
 	'namespaceManager.addNamespace(PREFIX, NAMESPACE_URI);'
 );
@@ -40,17 +53,29 @@ const buildParagraphNodeNameForPastingConfiguration = template(
 // Configuration constants.
 const PARAGRAPH_COUTERPART_ELEMENT_NAME = 'p';
 
+export function buildConfigurationSetUniqueIdConfigurationStatement(version) {
+	return buildConfigurationSetUniqueIdConfigurations({
+		CONFIGURATION_VALUE: t.arrayExpression([
+			isPre7170Editor(version)
+				? buildConfigurationSetUniqueIdConfigurationsObjectPre7170()
+				: buildConfigurationSetUniqueIdConfigurationsObject(),
+		]),
+	});
+}
+
 /**
  * Adds the configuration for unique id configurations.
  *
  * @param {Object}    compiledSchemaResultsByXsdPath The compiled schema for a package by xsd path.
  * @param {ASTNode[]} statements                     The statements node array to add the configuration and/or comments to.
+ * @param {string}    version                        The sdk version used to configure.
  *
  * @return {Promise}
  */
 async function addUniqueIdGenerationConfigurations(
 	compiledSchemaResultsByXsdPath,
-	statements
+	statements,
+	version
 ) {
 	// Check if an id attribute exists in one of the schemas.
 	const idAttributeExists = Object.values(
@@ -65,12 +90,7 @@ async function addUniqueIdGenerationConfigurations(
 
 	// Generate configuration code.
 	const configurationSetUniqueIdConfigurationStatement =
-		buildConfigurationSetUniqueIdConfigurations({
-			CONFIGURATION_VALUE: t.arrayExpression([
-				buildConfigurationSetUniqueIdConfigurationsObject(),
-			]),
-		});
-
+		buildConfigurationSetUniqueIdConfigurationStatement(version);
 	const comments = [
 		'Set to an array of objects to determine the identifying attributes for which a GUID will be',
 		'generated automatically.',
@@ -113,6 +133,7 @@ async function addUniqueIdGenerationConfigurations(
  * @param {Object} prefixByNamespaceUri           The namespace URIs with their prefix.
  * @param {Array}  addons                         The selected addons for this editor instance.
  * @param {Object} compiledSchemaResultsByXsdPath The compiled schema for a package by xsd path.
+ * @param {string} version                        The sdk version used to configure.
  *
  * @return {Promise}
  */
@@ -120,7 +141,8 @@ export default async function createConfigConfiguration(
 	configConfigurationJsFilePath,
 	prefixByNamespaceUri,
 	addons,
-	compiledSchemaResultsByXsdPath
+	compiledSchemaResultsByXsdPath,
+	version
 ) {
 	const importStatements = [];
 	const statements = [];
@@ -209,10 +231,17 @@ export default async function createConfigConfiguration(
 		}
 	}
 
+	// Import xq for editor versions 7.17 or higher
+	if (!isPre7170Editor(version)) {
+		const xqImport = buildXqImport();
+		importStatements.push(xqImport);
+	}
+
 	// Add unique id generation configuration.
 	await addUniqueIdGenerationConfigurations(
 		compiledSchemaResultsByXsdPath,
-		statements
+		statements,
+		version
 	);
 
 	// Get all prefix and namespace entries, sorted naturally by prefix.

package/src/modules/editor-pre-7-7-0/src/api/schema/buildElementConfigurations.js

@@ -0,0 +1,70 @@
+import babel from '@babel/core';
+
+import { isPre7170Editor } from '../../../../../editorVersions.js';
+import addCommentToAstNode from '../addCommentToAstNode.js';
+import createCommentsForElement from './createCommentsForElement.js';
+
+const t = babel.types;
+const template = babel.template;
+
+const buildConfigureAsRemoved = template(
+	'configureAsRemoved(sxModule, SELECTOR);'
+);
+/**
+ * Builds an array of Babel templates containing the schema experience configuration for the given elements.
+ *
+ * @param {Object[]} elements             The sx configuration elements for which to create Babel templates.
+ * @param {Object}   prefixByNamespaceUri The namespace URIs with their prefix.
+ * @param {string}   version              The version of the editor. Pre-7.17.0 versions had no xq template tags, so a different declaration wil be generated.
+ *
+ * @return {Object}
+ */
+export default function buildElementConfigurations(
+	elements,
+	prefixByNamespaceUri,
+	version
+) {
+	return (
+		elements
+			// Sort the elements ascending by the localName property.
+			.sort((a, b) =>
+				a.localName < b.localName
+					? -1
+					: a.localName > b.localName
+					? 1
+					: 0
+			)
+			.map((element) => {
+				const elementSelector = element.namespacePrefix
+					? `self::${element.namespacePrefix}:${element.localName}`
+					: `self::${element.localName}`;
+				let stringTemplateExpression;
+				if (isPre7170Editor(version)) {
+					stringTemplateExpression = t.stringLiteral(elementSelector);
+				} else {
+					const tag = t.identifier('xq');
+
+					const quasi = t.templateLiteral(
+						[t.templateElement({ raw: elementSelector })],
+						[]
+					);
+					stringTemplateExpression = t.taggedTemplateExpression(
+						tag,
+						quasi
+					);
+				}
+				const elementConfiguration = buildConfigureAsRemoved({
+					SELECTOR: stringTemplateExpression,
+				});
+
+				const comments = createCommentsForElement(
+					element,
+					prefixByNamespaceUri
+				);
+
+				// Add preceding comments to the element configuration.
+				addCommentToAstNode(elementConfiguration, comments);
+				return elementConfiguration;
+			})
+	);
+}