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

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

@@ -1,23 +1,6 @@
 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) {
@@ -26,146 +9,156 @@ 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;
 	}
 
-	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
-				);
+	/**
+	 * @param {number}    percentage
+	 * @param {string}    message
+	 * @param {...string} args
+	 */
+	progressHandler(percentage, _message, ..._args) {
+		if (percentage >= 0.99) {
+			return;
+		}
 
-				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) {
+		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
-						? `${statusPrefix}... ${roundedPercentage}%`
-						: `${statusPrefix}...`,
+						? `Building... ${roundedPercentage}%`
+						: `Building...`,
 					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', (_compilationParams) => {
+		compiler.hooks.compile.tap(FdtOutputPlugin.name, () => {
 			this.resetState();
 		});
 
 		// Use ProgressPlugin to handle most hooks.
 		new webpack.ProgressPlugin({
-			handler: this.handler.bind(this),
+			handler: this.progressHandler.bind(this),
 		}).apply(compiler);
 
 		// Listen to done hook and call handler WITH stats, which ProgressPlugin does not do.
-		compiler.hooks.done.tap('FdtOutputPlugin', (stats) => {
-			this.handler(1, 'doneWithStats', stats);
+		compiler.hooks.done.tap(FdtOutputPlugin.name, (stats) => {
+			this.doneHandler(stats);
 		});
 
 		// Listen to failed hook and call handler, which ProgressPlugin does not do.
-		compiler.hooks.failed.tap('FdtOutputPlugin', (error) => {
-			this.handler(1, 'failedWithError', error);
+		compiler.hooks.failed.tap(FdtOutputPlugin.name, (error) => {
+			this.failedHandler(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';
 
-/** @typedef {import('enhanced-resolve').Resolver} Resolver */
-
+/**
+ * This plugin ensures that import paths with an extension are always resolved
+ * as if they were extensionless.
+ */
 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(this.target);
+		const target = resolver.ensureHook('resolve');
 		resolver
-			.getHook(this.source)
+			.getHook('resolve')
 			.tapAsync(
-				'RemoveExplicitExtensionResolvePlugin',
+				RemoveExplicitExtensionResolvePlugin.name,
 				(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,18 +43,17 @@ export default class RemoveExplicitExtensionResolvePlugin {
 					);
 					const dirPath = path.dirname(request.request);
 					if (!request.request.startsWith(dirPath)) {
-						throw new Error(
-							`Failed to remove explicit extension for "${request.request}" to "${fileNameWithoutExtension}".`
+						return callback(
+							new Error(
+								`Failed to remove explicit extension for "${request.request}" to "${fileNameWithoutExtension}".`
+							)
 						);
 					}
 					const obj = {
 						...request,
-						request: resolver.join(
-							dirPath,
-							fileNameWithoutExtension
-						),
+						request: `${dirPath}/${fileNameWithoutExtension}`,
 					};
-					resolver.doResolve(
+					return resolver.doResolve(
 						target,
 						obj,
 						`removing extension ${extension}`,

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

@@ -1,28 +1,37 @@
+/** @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',
-			(compilation, _compilationParams) => {
+			ResolveImportAliasPlugin.name,
+			(compilation) => {
 				// Start with a clean slate for each compilation.
 				importAliases.clear();
 
@@ -77,13 +86,12 @@ export default class ResolveImportAliasPlugin {
 
 		compiler.resolverFactory.hooks.resolver
 			.for('normal')
-			.tap('ResolveImportAliasPlugin', (resolver) => {
+			.tap(ResolveImportAliasPlugin.name, (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',
+					ResolveImportAliasPlugin.name,
 					(request, resolveContext, callback) => {
 						const innerRequest = request.request || request.path;
 
@@ -113,10 +121,10 @@ export default class ResolveImportAliasPlugin {
 
 								// Don't allow other aliasing or raw request.
 								if (result === undefined) {
-									return callback(null, null);
+									return callback(undefined, null);
 								}
 
-								callback(null, result);
+								callback(undefined, result);
 							}
 						);
 					}

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

@@ -1,20 +1,26 @@
+/** @typedef {import('webpack').Compiler} Compiler */
+
 import {
 	addPackageDependencies,
 	getPackageManifest,
 	orderPackages,
 } from '../getDependenciesInLoadOrder.js';
 
-const plugin = { name: 'UnitTestPlugin' };
-
+/**
+ * This plugin fakes a proper dependency tree for unit tests.
+ */
 export default class UnitTestPlugin {
 	constructor(options) {
 		this.options = options;
 	}
 
+	/**
+	 * @param {Compiler} compiler
+	 */
 	apply(compiler) {
 		compiler.hooks.thisCompilation.tap(
-			plugin,
-			(compilation, _compilationParams) => {
+			UnitTestPlugin.name,
+			(compilation) => {
 				try {
 					const packageRootFolders =
 						this.options.paths.packageRootFolders;
@@ -24,13 +30,14 @@ 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 ${plugin.name} runs after the dependencies in load order plugin.`
+								`Could not get package load order information. Make sure the package exists, and ${UnitTestPlugin.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) => {
@@ -40,8 +47,9 @@ 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 = {
@@ -62,7 +70,8 @@ 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(
@@ -72,12 +81,13 @@ 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;
@@ -85,7 +95,7 @@ export default class UnitTestPlugin {
 			}
 		);
 
-		compiler.hooks.done.tap(plugin, (stats) => {
+		compiler.hooks.done.tap(UnitTestPlugin.name, (stats) => {
 			if (
 				stats.compilation.errors &&
 				stats.compilation.errors.length &&

package/src/modules/editor/test/fixtures.test.js

@@ -32,9 +32,6 @@ function getFixtureOptions(fixture) {
 }
 
 const testFactoryFunctionByName = {
-	// Fixtures handled by other tests.
-	dependencyWatching: false,
-
 	notFound: (_fixturesPath, fixture, _fixtureOptions) => {
 		return () => {
 			assert.fail(`No testsuite for ${getTestSuiteName(fixture)}.`);

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

@@ -1,15 +1,34 @@
 import assert from 'assert';
 import fs from 'fs-extra';
 import path from 'path';
+import tmp from 'tmp';
 import unzipper from 'unzipper';
 import { fileURLToPath } from 'url';
 
-import createTempDirectory from '../../../../editor/test/helpers/createTempDirectory.js';
 import schemaZipHelpers from '../../../src/api/schema/zipHelpers.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+export default async function createTempDirectory() {
+	return new Promise((resolve, reject) => {
+		tmp.dir(
+			{
+				prefix: 'fonto-dev-test-',
+				unsafeCleanup: true,
+			},
+			(error, path, cleanupCallback) => {
+				if (error) {
+					reject(error);
+					return;
+				}
+
+				resolve({ path, cleanupCallback });
+			}
+		);
+	});
+}
+
 describe('api/schema/schemaZipHelpers', () => {
 	describe('zipSchemaSource', () => {
 		const fixturePath = path.join(

package/src/modules/editor/src/templates/app-entry.cjs

@@ -1,69 +0,0 @@
-(function appEntry() {
-	return Promise.resolve()
-		.then(function () {
-			window.startFontoBootstrap();
-
-			require('fontoxml-shims/src/main');
-
-			const glamor = require('glamor');
-			glamor.styleSheet.maxLength = 4;
-			glamor.plugins.remove(
-				glamor.plugins.fns.find(function (pluginFn) {
-					return pluginFn.name === 'prefixes';
-				})
-			);
-
-			const getQueryParameterByName =
-				require('fontoxml-utils/src/getQueryParameterByName').default;
-			const scope = getQueryParameterByName(
-				window.location.search,
-				'scope'
-			);
-			const configurationManager =
-				require('fontoxml-configuration/src/configurationManager').default;
-			configurationManager.set('scope', scope ? JSON.parse(scope) : {});
-			configurationManager.set(
-				'version-info',
-				require('./generated?type=versionInfo').default
-			);
-			configurationManager.set(
-				'fonto-debug-build',
-				require('./generated?type=debugBuild').default
-			);
-
-			require('./generated?type=styles');
-
-			require('./generated?type=setDefaultConfiguration');
-
-			require('config/configuration');
-
-			return configurationManager.applyDefaults();
-		})
-		.then(function () {
-			require('./generated?type=messages');
-
-			require('./generated?type=configureSxModule');
-
-			require('config/schemaExperienceResolver');
-
-			require('./generated?type=install');
-
-			require('react');
-			const ReactDOM = require('react-dom');
-			const renderApp = require('fontoxml-editor/src/renderApp').default;
-
-			ReactDOM.render(
-				renderApp(),
-				window.document.getElementById('index-app-root')
-			);
-
-			window.completeFontoBootstrap();
-		})
-		.catch(function (error) {
-			if (window.showFontoError) {
-				window.showFontoError(error);
-			} else {
-				throw error;
-			}
-		});
-})();

package/src/modules/editor/test/apps/minimal/config/configuration.js

@@ -1,5 +0,0 @@
-// import configurationManager from 'fontoxml-configuration/src/configurationManager.js';
-
-// configurationManager.set('paragraph-node-name-for-pasting', 'paragraph');
-
-// No configuration.

package/src/modules/editor/test/apps/minimal/config/fonto-manifest.json

@@ -1,6 +0,0 @@
-{
-	"dependencies": {
-		"app-test": "packages/app-test",
-		"fontoxml-platform-base": "platform/fontoxml-platform-base"
-	}
-}

package/src/modules/editor/test/apps/minimal/config/schemaExperienceResolver.js

@@ -1,15 +0,0 @@
-// import configurationManager from 'fontoxml-configuration/src/configurationManager.js';
-// import sxManager from 'fontoxml-modular-schema-experience/src/sxManager.js';
-// import SchemaLocationToSchemaExperienceResolver from 'fontoxml-schema-experience-resolver/src/SchemaLocationToSchemaExperienceResolver.js';
-// import TEST_SX_SHELL_LOCATION from 'app-test/src/SCHEMA_LOCATIONS.js';
-
-// var schemaLocationToSchemaExperienceResolver = new SchemaLocationToSchemaExperienceResolver();
-// schemaLocationToSchemaExperienceResolver.register(
-// 	sxManager.defineSchemaExperience('assets/schemas/test-sx-shell.json', [
-// 		'test-sx-shell'
-// 	]),
-// 	TEST_SX_SHELL_LOCATION
-// );
-// configurationManager.set('schema-experience-resolver', schemaLocationToSchemaExperienceResolver);
-
-// No schema experience resolver.

package/src/modules/editor/test/apps/minimal/packages/app-test/src/SCHEMA_LOCATIONS.js

@@ -1 +0,0 @@
-export default ['urn:fontoxml:test'];

package/src/modules/editor/test/apps/minimal/packages/app-test/src/install.js

@@ -1,3 +0,0 @@
-export default function install() {
-	// Do stuff
-}

package/src/modules/editor/test/apps/minimal/platform/fontoxml-configuration/fonto-manifest.json

@@ -1,4 +0,0 @@
-{
-	"dependencies": {},
-	"role": "internal"
-}

package/src/modules/editor/test/apps/minimal/platform/fontoxml-configuration/src/configurationManager.js

@@ -1,11 +0,0 @@
-class ConfigurationManager {
-	set() {
-		//
-	}
-
-	applyDefaults() {
-		//
-	}
-}
-
-export default new ConfigurationManager();

package/src/modules/editor/test/apps/minimal/platform/fontoxml-editor/fonto-manifest.json

@@ -1,4 +0,0 @@
-{
-	"dependencies": {},
-	"role": "internal"
-}