-
-
Notifications
You must be signed in to change notification settings - Fork 244
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(vite-plugin-angular): introduce experimental support for .ng for…
…mat (#823) Co-authored-by: Brandon Roberts <[email protected]>
- Loading branch information
1 parent
4dffaf3
commit f12beeb
Showing
28 changed files
with
1,317 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,11 @@ | ||
{ | ||
"singleQuote": true | ||
"singleQuote": true, | ||
"overrides": [ | ||
{ | ||
"files": "*.ng", | ||
"options": { | ||
"parser": "html" | ||
} | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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": {} | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"] | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<script lang="ts"> | ||
onInit(() => { | ||
console.log('anotherOne init'); | ||
}); | ||
</script> | ||
|
||
<template> | ||
<h1>DJ KHALED!!!</h1> | ||
</template> | ||
|
||
<style> | ||
h1 { | ||
color: green; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { provideHttpClient } from '@angular/common/http'; | ||
import { ApplicationConfig } from '@angular/core'; | ||
|
||
export const appConfig: ApplicationConfig = { | ||
providers: [provideHttpClient()], | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<script lang="ts"> | ||
definePipeMetadata({ | ||
name: 'doubled', | ||
}); | ||
|
||
function transform(value: number) { | ||
return value * 2; | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Empty file.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/* You can add global styles to this file, and also import other style files */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"extends": "./tsconfig.json", | ||
"include": ["src/**/*.ts"], | ||
"compilerOptions": { | ||
"types": [] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
})); |
Oops, something went wrong.