{feature} add option for code blocks to include root-level providers

CHANGELOG.md

@@ -5,6 +5,13 @@
 <!-- add new items here -->
 
 - Support setters with an `@Input()` decorator
+- Decrease the need for explicit `@input` configuration in comment:
+  - Use explicit type on input properties when detecting input type
+  - Parse (some) unary expressions that yield a known type
+  - Map string union types into enumerations
+- Fix default property in enumeration always being set to the first option
+- Fix negative numbers not being detected as default value
+- Make it possible for code blocks to add root-level providers
 
 ## v0.2.0
 

src/angular/builder/writer.rs

@@ -63,19 +63,21 @@ impl Writer {
 			Vec::with_capacity(2 + config.polyfills.len() + chapter.number_of_code_blocks());
 
 		if !config.polyfills.contains(&"zone.js".to_owned()) {
-			main_script.push("import 'zone.js';\n".to_owned());
+			main_script.push("import 'zone.js';".to_owned());
 		}
 
 		for polyfill in &config.polyfills {
-			main_script.push(format!("import '{polyfill}';\n"));
+			main_script.push(format!("import '{polyfill}';"));
 		}
 
 		main_script.push(
-			"\
-				import {NgZone, type ApplicationRef} from '@angular/core';\n\
+			"\n\
+				import {NgZone, type ApplicationRef, type Provider, type EnvironmentProviders, type Type} from '@angular/core';\n\
 				import {bootstrapApplication} from '@angular/platform-browser';\n\
 				const zone = new NgZone({});\n\
-				const providers = [{provide: NgZone, useValue: zone}];\n\
+				function makeProviders(component: Type<unknown> & {rootProviders?: readonly (Provider | EnvironmentProviders)[] | null | undefined}) {\n\
+					return [{provide: NgZone, useValue: zone}, ...(component.rootProviders ?? [])];\n\
+				}\n\
 				const applications: Promise<ApplicationRef>[] = [];\n\
 				(globalThis as any).mdBookAngular = {zone, applications};\n\
 			"
@@ -99,7 +101,7 @@ impl Writer {
 			main_script.push(format!(
 				"\
 					import {{{} as CodeBlock_{code_block_index}}} from './codeblock_{code_block_index}.js';\n\
-					applications.push(bootstrapApplication(CodeBlock_{code_block_index}, {{providers}}));\n\
+					applications.push(bootstrapApplication(CodeBlock_{code_block_index}, {{providers: makeProviders(CodeBlock_{code_block_index})}}));\n\
 				",
 				&code_block.class_name
 			));

test-book/src/sample-2.ts

@@ -1,4 +1,10 @@
-import {Component, ChangeDetectionStrategy, Input} from '@angular/core';
+import {
+	Component,
+	ChangeDetectionStrategy,
+	Input,
+	ENVIRONMENT_INITIALIZER,
+	Provider,
+} from '@angular/core';
 
 @Component({
 	selector: 'announce-it',
@@ -24,6 +30,16 @@ export class AnnounceComponent {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ConvinceComponent {
+	static rootProviders: Provider[] = [
+		{
+			provide: ENVIRONMENT_INITIALIZER,
+			multi: true,
+			useValue: () => {
+				console.log('provided');
+			},
+		},
+	];
+
 	/**
 	 * Person to convince
 	 */