add angular config

.eslintrc.cjs

@@ -12,5 +12,13 @@ module.exports = {
     browser: true,
   },
   plugins: ['prettier'],
-  overrides: FRAMEWORKS.map(({ eslint }) => eslint),
+  overrides: FRAMEWORKS.reduce((acc, { eslint }) => {
+    if (Array.isArray(eslint)) {
+      acc.push(...eslint);
+    } else {
+      acc.push(eslint);
+    }
+
+    return acc;
+  }, []),
 };

.vscode/extensions.json

@@ -1,11 +1,4 @@
 {
-  "recommendations": [
-    "astro-build.astro-vscode",
-    "bradlc.vscode-tailwindcss",
-    "svelte.svelte-vscode",
-    "johnsoncodehk.volar",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
-  ],
+  "recommendations": ["astro-build.astro-vscode", "bradlc.vscode-tailwindcss", "svelte.svelte-vscode", "johnsoncodehk.volar", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -7,5 +7,5 @@
   "vetur.validation.template": false,
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
-  },
+  }
 }

README.md

@@ -32,6 +32,23 @@ How do we solve this ? Developers love having framework overview by examples. It
 
 # Reactivity
 ## Declare state
+### Angular
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-name',
+})
+export class NameComponent {
+	@Input() name: string = 'John';
+
+	constructor() {
+		console.log(this.name);
+	}
+}
+
+```
+
 ### React
 ```jsx
 import { useState } from 'react';
@@ -63,6 +80,24 @@ console.log(name.value); // John
 ```
 
 ## Update state
+### Angular
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-name',
+})
+export class NameComponent {
+	@Input() name: string = 'John';
+
+	constructor() {
+		this.name = 'Jane';
+		console.log(this.name);
+	}
+}
+
+```
+
 ### React
 ```jsx
 import { useState } from 'react';
@@ -98,6 +133,32 @@ console.log(name.value); // Jane
 ```
 
 ## Computed state
+### Angular
+```ts
+import { Component, OnInit, Input, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core';
+
+@Pipe({
+	name: 'double',
+})
+export class DoubleCountPipe implements PipeTransform {
+	transform(value: number): number {
+		return value * 2;
+	}
+}
+
+@Component({
+	selector: 'app-doublecount',
+	template: ' <div></div>',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DoublecountComponent implements OnInit {
+	@Input() count: number = 10;
+
+	constructor() {}
+}
+
+```
+
 ### React
 ```jsx
 import { useState, useMemo } from 'react';
@@ -358,7 +419,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<input ref="inputElement" />
+  <input ref="inputElement">
 </template>
 
 ```
@@ -760,12 +821,12 @@ export default function IsAvailable() {
 ### Svelte
 ```svelte
 <script>
-    let isAvailable = false
+	let isAvailable = false;
 </script>
 
-
-<input id="is-available" type=checkbox bind:checked={isAvailable}>
+<input id="is-available" type="checkbox" bind:checked={isAvailable} />
 <label for="is-available">Is available</label>
+
 ```
 
 ### Vue 3
@@ -818,7 +879,7 @@ export default function PickPill() {
 	let picked = 'red';
 </script>
 
-<div>Picked: { picked }</div>
+<div>Picked: {picked}</div>
 
 <input id="blue-pill" bind:group={picked} type="radio" value="blue" />
 <label for="blue-pill">Blue pill</label>
@@ -972,3 +1033,4 @@ https://remix.run/docs/en/v1/guides/routing
     |-- about.vue // about page "/about"
 ```
 
+

config.cjs

@@ -35,6 +35,46 @@ const FRAMEWORKS = [
 			extends: ['eslint:recommended', 'plugin:vue/vue3-recommended'],
 		},
 	},
+	{
+		id: 'angular',
+		title: 'Angular',
+		ext: 'ts',
+		eslint: {
+			files: ['**/angular/*.ts'],
+		},
+		eslint: [
+			{
+				files: ['**/angular/*.ts'],
+				parserOptions: {
+					project: ['tsconfig.app.json', 'tsconfig.spec.json'],
+					createDefaultProgram: true,
+				},
+				extends: [
+					'plugin:@angular-eslint/recommended',
+					// This is required if you use inline templates in Components
+					'plugin:@angular-eslint/template/process-inline-templates',
+				],
+				rules: {
+					/**
+					 * Any TypeScript source code (NOT TEMPLATE) related rules you wish to use/reconfigure over and above the
+					 * recommended set provided by the @angular-eslint project would go here.
+					 */
+					'@angular-eslint/directive-selector': ['error', { type: 'attribute', prefix: 'app', style: 'camelCase' }],
+					'@angular-eslint/component-selector': ['error', { type: 'element', prefix: 'app', style: 'kebab-case' }],
+				},
+			},
+			{
+				files: ['**/angular/*.html'],
+				extends: ['plugin:@angular-eslint/template/recommended'],
+				rules: {
+					/**
+					 * Any template/HTML related rules you wish to use/reconfigure over and above the
+					 * recommended set provided by the @angular-eslint project would go here.
+					 */
+				},
+			},
+		],
+	},
 ];
 
 module.exports = { FRAMEWORKS };

content/1-reactivity/1-declare-state/angular/name.component.ts

@@ -1,14 +1,12 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-name',
+	selector: 'app-name',
 })
 export class NameComponent {
+	@Input() name: string = 'John';
 
-  @Input() name:string = "John"
-  
-  constructor() { 
-    console.log(this.name)
-  }
-
+	constructor() {
+		console.log(this.name);
+	}
 }

content/1-reactivity/2-update-state/angular/name.component.ts

@@ -1,15 +1,13 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'app-name',
+	selector: 'app-name',
 })
 export class NameComponent {
+	@Input() name: string = 'John';
 
-  @Input() name:string = "John";
-  
-  constructor() { 
-    this.name = "Jane";
-    console.log(this.name);
-  }
-
+	constructor() {
+		this.name = 'Jane';
+		console.log(this.name);
+	}
 }

content/1-reactivity/3-computed-state/angular/doublecount.component.ts

@@ -1,27 +1,21 @@
-import { Component, OnInit,Input, Pipe, PipeTransform,ChangeDetectionStrategy  } from '@angular/core';
+import { Component, OnInit, Input, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core';
 
 @Pipe({
-  name: 'double'
+	name: 'double',
 })
 export class DoubleCountPipe implements PipeTransform {
-  transform(value: number): number {
-    return (value*2);
-  }
+	transform(value: number): number {
+		return value * 2;
+	}
 }
 
 @Component({
-  selector: 'app-doublecount',
-  template: ' <div></div>',
-  changeDetection:ChangeDetectionStrategy.OnPush
+	selector: 'app-doublecount',
+	template: ' <div></div>',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DoublecountComponent implements OnInit {
+	@Input() count: number = 10;
 
-  @Input() count:number = 10;
-
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+	constructor() {}
 }

content/2-templating/5-dom-ref/vue3/InputFocused.vue

@@ -9,5 +9,5 @@ onMounted(() => {
 </script>
 
 <template>
-	<input ref="inputElement" />
+  <input ref="inputElement">
 </template>

content/6-form-input/2-checkbox/svelte/IsAvailable.svelte

@@ -1,7 +1,6 @@
 <script>
-    let isAvailable = false
+	let isAvailable = false;
 </script>
 
-
-<input id="is-available" type=checkbox bind:checked={isAvailable}>
-<label for="is-available">Is available</label>
+<input id="is-available" type="checkbox" bind:checked={isAvailable} />
+<label for="is-available">Is available</label>

content/6-form-input/3-radio/svelte/PickPill.svelte

@@ -2,7 +2,7 @@
 	let picked = 'red';
 </script>
 
-<div>Picked: { picked }</div>
+<div>Picked: {picked}</div>
 
 <input id="blue-pill" bind:group={picked} type="radio" value="blue" />
 <label for="blue-pill">Blue pill</label>

package.json

@@ -12,7 +12,7 @@
     "build:content": "node scripts/generate_readme.js && node scripts/generate_index_page.js",
     "lint": "eslint .",
     "lint:fix": "pnpm run lint -- --fix",
-    "prettier": "prettier --plugin-search-dir=. . --check",
+    "prettier": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check",
     "prettier:fix": "pnpm run prettier -- --write",
     "format": "pnpm run prettier:fix && pnpm run lint:fix",
     "prepare": "husky install"
@@ -29,10 +29,14 @@
   },
   "homepage": "https://github.com/matschik/component-party#readme",
   "devDependencies": {
+    "@angular-eslint/eslint-plugin": "^13.2.0",
+    "@angular-eslint/eslint-plugin-template": "^13.2.0",
     "@astrojs/svelte": "^0.0.2",
     "@astrojs/tailwind": "^0.1.0",
     "@tailwindcss/typography": "^0.5.2",
-    "astro": "^1.0.0-beta.2", 
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "astro": "^1.0.0-beta.2",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",

scripts/templates/README.base.md

@@ -30,4 +30,4 @@ How do we solve this ? Developers love having framework overview by examples. It
 
 ---
 
-<slot/>
+<slot/>

scripts/templates/index.base.md

@@ -2,4 +2,4 @@
 layout: ../layouts/BaseLayout.astro
 ---
 
-<slot/>
+<slot/>

scripts/utils/getDocContent.js

@@ -20,7 +20,7 @@ export default function getDocContent() {
 			title: contentDirTitle,
 			sections: [],
 		};
-		
+
 		let fileContent = `# ${contentDirTitle}\n`;
 
 		for (const subSectionDir of subSectionDirs) {
@@ -52,11 +52,11 @@ export default function getDocContent() {
 			}
 		}
 
-		content += fileContent
+		content += fileContent;
 		tree.push(treeNode);
 	}
 
-	fs.writeFileSync("src/tree.js", `export default ${JSON.stringify(tree, null, 2)}`, "utf8")
+	fs.writeFileSync('src/tree.js', `export default ${JSON.stringify(tree, null, 2)}`, 'utf8');
 
 	return content;
 }

src/pages/index.md

@@ -4,6 +4,23 @@ layout: ../layouts/BaseLayout.astro
 
 # Reactivity
 ## Declare state
+### Angular
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-name',
+})
+export class NameComponent {
+	@Input() name: string = 'John';
+
+	constructor() {
+		console.log(this.name);
+	}
+}
+
+```
+
 ### React
 ```jsx
 import { useState } from 'react';
@@ -35,6 +52,24 @@ console.log(name.value); // John
 ```
 
 ## Update state
+### Angular
+```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+	selector: 'app-name',
+})
+export class NameComponent {
+	@Input() name: string = 'John';
+
+	constructor() {
+		this.name = 'Jane';
+		console.log(this.name);
+	}
+}
+
+```
+
 ### React
 ```jsx
 import { useState } from 'react';
@@ -70,6 +105,32 @@ console.log(name.value); // Jane
 ```
 
 ## Computed state
+### Angular
+```ts
+import { Component, OnInit, Input, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core';
+
+@Pipe({
+	name: 'double',
+})
+export class DoubleCountPipe implements PipeTransform {
+	transform(value: number): number {
+		return value * 2;
+	}
+}
+
+@Component({
+	selector: 'app-doublecount',
+	template: ' <div></div>',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DoublecountComponent implements OnInit {
+	@Input() count: number = 10;
+
+	constructor() {}
+}
+
+```
+
 ### React
 ```jsx
 import { useState, useMemo } from 'react';
@@ -330,7 +391,7 @@ onMounted(() => {
 </script>
 
 <template>
-	<input ref="inputElement" />
+  <input ref="inputElement">
 </template>
 
 ```
@@ -732,12 +793,12 @@ export default function IsAvailable() {
 ### Svelte
 ```svelte
 <script>
-    let isAvailable = false
+	let isAvailable = false;
 </script>
 
-
-<input id="is-available" type=checkbox bind:checked={isAvailable}>
+<input id="is-available" type="checkbox" bind:checked={isAvailable} />
 <label for="is-available">Is available</label>
+
 ```
 
 ### Vue 3
@@ -790,7 +851,7 @@ export default function PickPill() {
 	let picked = 'red';
 </script>
 
-<div>Picked: { picked }</div>
+<div>Picked: {picked}</div>
 
 <input id="blue-pill" bind:group={picked} type="radio" value="blue" />
 <label for="blue-pill">Blue pill</label>
@@ -944,3 +1005,4 @@ https://remix.run/docs/en/v1/guides/routing
     |-- about.vue // about page "/about"
 ```
 
+

src/tree.js

@@ -1,110 +1,110 @@
 export default [
-  {
-    "id": "reactivity",
-    "title": "Reactivity",
-    "sections": [
-      {
-        "id": "declare-state",
-        "title": "Declare state"
-      },
-      {
-        "id": "update-state",
-        "title": "Update state"
-      },
-      {
-        "id": "computed-state",
-        "title": "Computed state"
-      }
-    ]
-  },
-  {
-    "id": "templating",
-    "title": "Templating",
-    "sections": [
-      {
-        "id": "minimal-template",
-        "title": "Minimal template"
-      },
-      {
-        "id": "styling",
-        "title": "Styling"
-      },
-      {
-        "id": "loop",
-        "title": "Loop"
-      },
-      {
-        "id": "event-click",
-        "title": "Event click"
-      },
-      {
-        "id": "dom-ref",
-        "title": "Dom ref"
-      },
-      {
-        "id": "conditional",
-        "title": "Conditional"
-      },
-      {
-        "id": "render",
-        "title": "Render"
-      }
-    ]
-  },
-  {
-    "id": "lifecycle",
-    "title": "Lifecycle",
-    "sections": [
-      {
-        "id": "on-mount",
-        "title": "On mount"
-      },
-      {
-        "id": "on-unmount",
-        "title": "On unmount"
-      }
-    ]
-  },
-  {
-    "id": "component-composition",
-    "title": "Component composition",
-    "sections": [
-      {
-        "id": "props",
-        "title": "Props"
-      }
-    ]
-  },
-  {
-    "id": "form-input",
-    "title": "Form input",
-    "sections": [
-      {
-        "id": "input-text",
-        "title": "Input text"
-      },
-      {
-        "id": "checkbox",
-        "title": "Checkbox"
-      },
-      {
-        "id": "radio",
-        "title": "Radio"
-      },
-      {
-        "id": "select",
-        "title": "Select"
-      }
-    ]
-  },
-  {
-    "id": "webapp-features",
-    "title": "Webapp features",
-    "sections": [
-      {
-        "id": "routing",
-        "title": "Routing"
-      }
-    ]
-  }
-]
+	{
+		id: 'reactivity',
+		title: 'Reactivity',
+		sections: [
+			{
+				id: 'declare-state',
+				title: 'Declare state',
+			},
+			{
+				id: 'update-state',
+				title: 'Update state',
+			},
+			{
+				id: 'computed-state',
+				title: 'Computed state',
+			},
+		],
+	},
+	{
+		id: 'templating',
+		title: 'Templating',
+		sections: [
+			{
+				id: 'minimal-template',
+				title: 'Minimal template',
+			},
+			{
+				id: 'styling',
+				title: 'Styling',
+			},
+			{
+				id: 'loop',
+				title: 'Loop',
+			},
+			{
+				id: 'event-click',
+				title: 'Event click',
+			},
+			{
+				id: 'dom-ref',
+				title: 'Dom ref',
+			},
+			{
+				id: 'conditional',
+				title: 'Conditional',
+			},
+			{
+				id: 'render',
+				title: 'Render',
+			},
+		],
+	},
+	{
+		id: 'lifecycle',
+		title: 'Lifecycle',
+		sections: [
+			{
+				id: 'on-mount',
+				title: 'On mount',
+			},
+			{
+				id: 'on-unmount',
+				title: 'On unmount',
+			},
+		],
+	},
+	{
+		id: 'component-composition',
+		title: 'Component composition',
+		sections: [
+			{
+				id: 'props',
+				title: 'Props',
+			},
+		],
+	},
+	{
+		id: 'form-input',
+		title: 'Form input',
+		sections: [
+			{
+				id: 'input-text',
+				title: 'Input text',
+			},
+			{
+				id: 'checkbox',
+				title: 'Checkbox',
+			},
+			{
+				id: 'radio',
+				title: 'Radio',
+			},
+			{
+				id: 'select',
+				title: 'Select',
+			},
+		],
+	},
+	{
+		id: 'webapp-features',
+		title: 'Webapp features',
+		sections: [
+			{
+				id: 'routing',
+				title: 'Routing',
+			},
+		],
+	},
+];

tsconfig.app.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": ["es2018", "dom"]
+  }
+}

tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}