diez compile --watch Option?

[phil-lgr]

At the cli level, I would like to run diez compile -t web in watch mode, i.e. rebuilding the package when I change design src files.

If this is something that makes sense, I could give this a try and add a --watch option with some guidance over here:

diez/src/compiler/compiler-core/src/commands/compile.ts

Line 10 in 220f76c

options: [

It would be the equivalent of running tsc with something like --build --watch --preserveWatchOutput

[zackbrown]

We've discussed a --watch option as an alternative to hot mode, and I believe @roperzh made some progress on this, but I don't believe we have a working version. It would be awesome if you want to knock this out, @phil-lgr . Perhaps you and Rob can do a quick sync over a call or on the Diez Slack?

[phil-lgr]

@roperzh I'd be happy to assist on that, I'll DM you on Slack

[roperzh]

Pasting a few bits of what we discussed on Slack for the sake of overcommunication:

I believe a quick tour of how things work under the hood might help (apologies if you already know all of this)
In the grand scheme of things, the compiler does four big steps:

• It compiles the source TypeScript code to JavaScript:

  diez/src/compiler/compiler-core/src/parser.ts

  Line 545 in 220f76c

  private async compile () {

• Requires the compiled design system:

  diez/src/compiler/compiler-core/src/compiler.ts

  Lines 295 to 300 in 220f76c

  	try {
  	componentModule = await loadComponentModule(this.parser.emitRoot);
  	} catch (error) {
  	await showStackTracesFromRuntimeError(error);
  	process.exit(1);
  	}

• Using the TypeScript API and the runtime values from the compiled code it builds a tree of components:

  diez/src/compiler/compiler-core/src/compiler.ts

  Lines 302 to 313 in 220f76c

  	for (const componentName of this.parser.rootComponentNames) {
  	// Fall back to the camel case variant of the component name. The parser capitalizes component names automatically.
  	const {symbolName} = this.parser.getMetadataForTypeOrThrow(componentName);
  	const maybeConstructor = componentModule[symbolName];
  	if (!maybeConstructor) {
  	Log.warning(`Unable to resolve component instance from ${this.parser.projectRoot}: ${componentName}.`);
  	continue;
  	}
  	const componentInstance = isConstructible(maybeConstructor) ? new maybeConstructor() : maybeConstructor;
  	await this.processComponentInstance(componentInstance, componentName);
  	}

• Using the tree of components, each target compiler can build source code for the target platform (for example the web compiler: https://github.com/diez/diez/blob/220f76cd06c265e82e6da3adfe04bd744923e9b3/src/compiler/targets/src/targets/web.compiler.ts)
  There's more to the equation, but that is a general idea!
  To make --watch work, we need to:
• Trigger the TypeScript compiler. hot mode does this, we can borrow/merge some functionality:

  diez/src/compiler/compiler-core/src/parser.ts

  Lines 568 to 608 in 220f76c

  	/**
  	* Starts a TypeScript server in watch mode, similar to `tsc --watch` but with more control over when sources are emitted.
  	*/
  	watch () {
  	const host = createWatchCompilerHost(
  	this.program.getRootFileNames() as string[],
  	Object.assign(
  	this.program.getCompilerOptions(),
  	{
  	// Write out to the expected directory.
  	outDir: this.emitRoot,
  	},
  	),
  	sys,
  	createSemanticDiagnosticsBuilderProgram,
  	(diagnostic) => this.printDiagnostics(diagnostic),
  	(diagnostic) => this.printDiagnostics(diagnostic),
  	);
  	// Skip watch status change notifications.
  	host.onWatchStatusChange = () => {
  	this.hotBuildStartTime = Date.now();
  	};
  	host.afterProgramCreate = (watchProgram) => {
  	this.program = watchProgram.getProgram();
  	const changedFiles = watchProgram.getState().changedFilesSet;
  	if (changedFiles) {
  	for (const file of changedFiles.keys()) {
  	const sourceFile = this.project.getSourceFile(file);
  	if (sourceFile) {
  	sourceFile.refreshFromFileSystemSync();
  	}
  	}
  	}
  	this.run(false);
  	};

• Trigger the target compiler

There's a possibility of leveraging some of the work done for hot mode, but copy + pasting some code and writing a new functionality would be OK since hot has its idiosyncrasy and it's a complicated beast.