feat(vite-plugin-angular): introduce experimental support for .ng for…

…mat (#823) Co-authored-by: Brandon Roberts <[email protected]>
analogjs · Jan 2, 2024 · f12beeb · f12beeb
1 parent 4dffaf3
commit f12beeb
Show file tree

Hide file tree

Showing 28 changed files with 1,317 additions and 29 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,11 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.ng",
+      "options": {
+        "parser": "html"
+      }
+    }
+  ]
 }
diff --git a/apps/ng-app/.eslintrc.json b/apps/ng-app/.eslintrc.json
@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/apps/ng-app/index.html b/apps/ng-app/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ng-app</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/ng-app/project.json b/apps/ng-app/project.json
@@ -0,0 +1,63 @@
+{
+  "name": "ng-app",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/ng-app/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}",
+        "{workspaceRoot}/dist/apps/ng-app/.nitro",
+        "{workspaceRoot}/dist/apps/ng-app/ssr",
+        "{workspaceRoot}/dist/apps/ng-app/analog"
+      ],
+      "options": {
+        "configFile": "apps/ng-app/vite.config.ts",
+        "outputPath": "dist/apps/ng-app/client"
+      },
+      "defaultConfiguration": "production",
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "sourcemap": false,
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "ng-app:build",
+        "port": 3000
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "ng-app:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "ng-app:build:production"
+        }
+      }
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "ng-app:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/ng-app/**/*.ts", "apps/ng-app/**/*.html"]
+      }
+    }
+  }
+}
diff --git a/apps/ng-app/src/app/another-one.ng b/apps/ng-app/src/app/another-one.ng
@@ -0,0 +1,15 @@
+<script lang="ts">
+  onInit(() => {
+    console.log('anotherOne init');
+  });
+</script>
+
+<template>
+  <h1>DJ KHALED!!!</h1>
+</template>
+
+<style>
+  h1 {
+    color: green;
+  }
+</style>
diff --git a/apps/ng-app/src/app/app.component.ng b/apps/ng-app/src/app/app.component.ng
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { inject, signal, effect, computed } from '@angular/core';
+  import { HttpClient } from '@angular/common/http';
+  import Hello from './hello.ng';
+  import AnotherOne from './another-one.ng';
+  import { JsonPipe } from '@angular/common';
+  import { delay } from 'rxjs';
+  import Highlight from './highlight.ng';
+  import Doubled from './doubled.ng';
+
+  defineComponentMetadata({
+    selector: 'app-root',
+    imports: [JsonPipe],
+  });
+
+  const title = 'Angular Analog';
+
+  const http = inject(HttpClient);
+
+  const counter = signal(1);
+  const doubled = computed(() => counter() * 2);
+  const todo = signal(null);
+
+  const increment = () => {
+    counter.update((value) => value + 1);
+  };
+
+  function decrement() {
+    counter.update((value) => value - 1);
+  }
+
+  effect(() => {
+    console.log('counter changed', counter());
+  });
+
+  onInit(() => {
+    console.log('App init');
+    http
+      .get('https://jsonplaceholder.typicode.com/todos/1')
+      .pipe(delay(2000))
+      .subscribe((data) => {
+        todo.set(data);
+        console.log('data', data);
+      });
+  });
+</script>
+
+<template>
+  @if (counter() > 5) {
+  <Hello />
+  <AnotherOne />
+  }
+
+  <p>Counter: {{ counter() }}</p>
+  <p highlight>Doubled: {{ doubled() }}</p>
+  <p>Doubled with Pipe: {{ counter() | doubled }}</p>
+  <button (click)="increment()">increment</button>
+  <button (click)="decrement()">decrement</button>
+
+  @if (todo(); as todo) {
+  <pre>{{todo | json }}</pre>
+  } @else {
+  <p>Loading todo...</p>
+  }
+</template>
+
+<style>
+  p {
+    color: red;
+  }
+
+  button {
+    background: blue;
+    color: white;
+    padding: 1rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+</style>
diff --git a/apps/ng-app/src/app/app.config.ts b/apps/ng-app/src/app/app.config.ts
@@ -0,0 +1,6 @@
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideHttpClient()],
+};
diff --git a/apps/ng-app/src/app/doubled.ng b/apps/ng-app/src/app/doubled.ng
@@ -0,0 +1,9 @@
+<script lang="ts">
+  definePipeMetadata({
+    name: 'doubled',
+  });
+
+  function transform(value: number) {
+    return value * 2;
+  }
+</script>
diff --git a/apps/ng-app/src/app/hello.ng b/apps/ng-app/src/app/hello.ng
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { DestroyRef, inject } from '@angular/core';
+
+  inject(DestroyRef).onDestroy(() => {
+    console.log('hello destroyed');
+  });
+</script>
+
+<template>
+  <h1>Hello.ng again</h1>
+</template>
diff --git a/apps/ng-app/src/app/highlight.ng b/apps/ng-app/src/app/highlight.ng
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { afterNextRender, ElementRef, inject } from '@angular/core';
+
+  defineDirectiveMetadata({
+    selector: 'p[highlight]',
+  });
+
+  const elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+
+  afterNextRender(() => {
+    elementRef.nativeElement.style.backgroundColor = 'yellow';
+  });
+</script>
diff --git a/apps/ng-app/src/assets/.gitkeep b/apps/ng-app/src/assets/.gitkeep
diff --git a/apps/ng-app/src/favicon.ico b/apps/ng-app/src/favicon.ico
diff --git a/apps/ng-app/src/main.ts b/apps/ng-app/src/main.ts
@@ -0,0 +1,8 @@
+import 'zone.js';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import AppComponent from './app/app.component.ng';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);
diff --git a/apps/ng-app/src/styles.css b/apps/ng-app/src/styles.css
@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/ng-app/src/vite-env.d.ts b/apps/ng-app/src/vite-env.d.ts
@@ -0,0 +1,38 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ANALOG_PUBLIC_BASE_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare global {
+  import type { Component, Directive, Pipe } from '@angular/core';
+
+  interface Window {
+    defineComponentMetadata: (
+      metadata: Omit<
+        Component,
+        | 'template'
+        | 'templateUrl'
+        | 'host'
+        | 'standalone'
+        | 'changeDetection'
+        | 'styleUrls'
+        | 'styleUrl'
+        | 'styles'
+      >
+    ) => void;
+    defineDirectiveMetadata: (
+      metadata: Omit<Directive, 'host' | 'standalone'>
+    ) => void;
+    definePipeMetadata: (metadata: Omit<Pipe, 'standalone'>) => void;
+  }
+}
+
+declare module '*.ng' {
+  const cmp = any;
+  export default cmp;
+}
diff --git a/apps/ng-app/tsconfig.app.json b/apps/ng-app/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
diff --git a/apps/ng-app/tsconfig.editor.json b/apps/ng-app/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": []
+  }
+}
diff --git a/apps/ng-app/tsconfig.json b/apps/ng-app/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
diff --git a/apps/ng-app/vite.config.ts b/apps/ng-app/vite.config.ts
@@ -0,0 +1,31 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite';
+import analog from '@analogjs/platform';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  publicDir: 'src/assets',
+  build: {
+    target: ['es2020'],
+  },
+  resolve: {
+    mainFields: ['module'],
+  },
+  plugins: [
+    analog({
+      ssr: false,
+      vite: { experimental: { dangerouslySupportNgFormat: true } },
+    }),
+  ],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['src/test.ts'],
+    include: ['**/*.spec.ts'],
+    reporters: ['default'],
+  },
+  define: {
+    'import.meta.vitest': mode !== 'production',
+  },
+}));