feat(vite-plugin-angular): add support for .ag extension (#1307)

analogjs · Aug 31, 2024 · 4754793 · 4754793
1 parent cd4bce1
commit 4754793
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 16 deletions.
diff --git a/apps/ng-app/src/app/another-one.analog → apps/ng-app/src/app/another-one.ag b/apps/ng-app/src/app/another-one.analog → apps/ng-app/src/app/another-one.ag
diff --git a/apps/ng-app/src/app/app.component.analog b/apps/ng-app/src/app/app.component.analog
@@ -6,7 +6,7 @@
   import { delay } from 'rxjs';
 
   import Hello from './hello.analog' with { analog: 'imports'};
-  import AnotherOne from './another-one.analog' with { analog: 'imports' };
+  import AnotherOne from './another-one.ag' with { analog: 'imports' };
   import Highlight from './highlight.analog' with { analog: 'imports' };
 
   // components can optionally be imported with no default import name

diff --git a/apps/ng-app/src/vite-env.d.ts b/apps/ng-app/src/vite-env.d.ts
@@ -47,3 +47,8 @@ declare module '*.analog' {
   const cmp = any;
   export default cmp;
 }
+
+declare module '*.ag' {
+  const cmp = any;
+  export default cmp;
+}
diff --git a/packages/platform/src/lib/router-plugin.ts b/packages/platform/src/lib/router-plugin.ts
@@ -68,8 +68,9 @@ export function routerPlugin(options?: Options): Plugin[] {
               `${root}/src/app/routes/**/*.ts`,
               `${root}/src/app/pages/**/*.page.ts`,
               `${root}/src/app/pages/**/*.page.analog`,
+              `${root}/src/app/pages/**/*.page.ag`,
               ...(options?.additionalPagesDirs || [])?.map(
-                (glob) => `${workspaceRoot}${glob}/**/*.page.{ts,analog}`
+                (glob) => `${workspaceRoot}${glob}/**/*.page.{ts,analog,ag}`
               ),
             ],
             { dot: true }

diff --git a/packages/vite-plugin-angular/esbuild.ts b/packages/vite-plugin-angular/esbuild.ts
@@ -28,7 +28,7 @@ export const analogSFC: (options?: PluginOptions) => esbuild.Plugin = (
       ],
     });
 
-    build.onLoad({ filter: /.analog$/ }, async (args) => {
+    build.onLoad({ filter: /\.(analog|ag)$/ }, async (args) => {
       await analogPlugin.handleHotUpdate?.({ file: args.path, modules: [] });
       const result = await analogPlugin.transform?.('', args.path);
       return { loader: 'js', contents: result?.code };

diff --git a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
@@ -368,7 +368,9 @@ export function angular(options?: PluginOptions): Plugin[] {
           }
 
           if (
-            (id.endsWith('.analog') || id.endsWith('.agx')) &&
+            (id.endsWith('.analog') ||
+              id.endsWith('.agx') ||
+              id.endsWith('.ag')) &&
             pluginOptions.supportAnalogFormat &&
             fileEmitter
           ) {
@@ -427,8 +429,8 @@ export function angular(options?: PluginOptions): Plugin[] {
     const workspaceRoot = normalizePath(resolve(pluginOptions.workspaceRoot));
 
     const globs = [
-      `${appRoot}/**/*.{analog,agx}`,
-      ...extraGlobs.map((glob) => `${workspaceRoot}${glob}.{analog,agx}`),
+      `${appRoot}/**/*.{analog,agx,ag}`,
+      ...extraGlobs.map((glob) => `${workspaceRoot}${glob}.{analog,agx,ag}`),
       ...(pluginOptions.additionalContentDirs || [])?.map(
         (glob) => `${workspaceRoot}${glob}/**/*.agx`
       ),

diff --git a/packages/vite-plugin-angular/src/lib/authoring/__snapshots__/analog.spec.ts.snap b/packages/vite-plugin-angular/src/lib/authoring/__snapshots__/analog.spec.ts.snap
@@ -7,6 +7,7 @@ import External from "./external.analog";
 import { ExternalService } from "./external";
 import { ExternalEnum } from "./external.model";
 import nonameanalog from "./noname.analog";
+import nonameag from "./noname.ag";
 
 @Component({
     standalone: true,
@@ -23,7 +24,7 @@ import nonameanalog from "./noname.analog";
     queries: {
         divElement: new ViewChild('divElement')
     },
-    imports: [External, nonameanalog],
+    imports: [External, nonameanalog, nonameag],
     providers: [ExternalService],
     outputs: ['output', 'outputWithType']
 })

diff --git a/packages/vite-plugin-angular/src/lib/authoring/analog.spec.ts b/packages/vite-plugin-angular/src/lib/authoring/analog.spec.ts
@@ -7,6 +7,7 @@ import External from './external.analog' with { analog: 'imports' };
 import { ExternalService } from './external' with { analog: 'providers' };
 import { ExternalEnum } from './external.model' with { analog: 'exposes' };
 import './noname.analog' with { analog: 'imports' };
+import './noname.ag' with { analog: 'imports' };
 
 defineMetadata({
   exposes: [Math],

diff --git a/packages/vite-plugin-angular/src/lib/authoring/analog.ts b/packages/vite-plugin-angular/src/lib/authoring/analog.ts
@@ -192,7 +192,8 @@ function processAnalogScript(
       if (
         !structure.namedImports?.length &&
         !structure.defaultImport &&
-        structure.moduleSpecifier.endsWith('.analog')
+        (structure.moduleSpecifier.endsWith('.analog') ||
+          structure.moduleSpecifier.endsWith('.ag'))
       ) {
         const generatedName = structure.moduleSpecifier.replace(
           /[^a-zA-Z]/g,

diff --git a/packages/vite-plugin-angular/src/lib/host.ts b/packages/vite-plugin-angular/src/lib/host.ts
@@ -44,9 +44,16 @@ export function augmentHostWithResources(
       onError,
       ...parameters
     ) => {
-      if (fileName.endsWith('.analog.ts') || fileName.endsWith('.agx.ts')) {
+      if (
+        fileName.endsWith('.analog.ts') ||
+        fileName.endsWith('.agx.ts') ||
+        fileName.endsWith('.ag.ts')
+      ) {
         const contents = readFileSync(
-          fileName.replace('.analog.ts', '.analog').replace('.agx.ts', '.agx'),
+          fileName
+            .replace('.analog.ts', '.analog')
+            .replace('.agx.ts', '.agx')
+            .replace('.ag.ts', '.ag'),
           'utf-8'
         );
         const source = compileAnalogFile(fileName, contents, options.isProd);
@@ -131,13 +138,20 @@ export function augmentHostWithResources(
       // Resource file only exists for external stylesheets
       const filename =
         context.resourceFile ??
-        `${context.containingFile.replace(/(\.analog)?\.ts$/, (...args) => {
-          // NOTE: if the original file name contains `.analog`, we turn that into `-analog.css`
-          if (args.includes('.analog') || args.includes('.agx')) {
-            return `-analog.${options?.inlineStylesExtension}`;
+        `${context.containingFile.replace(
+          /(\.analog|\.ag)?\.ts$/,
+          (...args) => {
+            // NOTE: if the original file name contains `.analog`, we turn that into `-analog.css`
+            if (
+              args.includes('.analog') ||
+              args.includes('.ag') ||
+              args.includes('.agx')
+            ) {
+              return `-analog.${options?.inlineStylesExtension}`;
+            }
+            return `.${options?.inlineStylesExtension}`;
           }
-          return `.${options?.inlineStylesExtension}`;
-        })}`;
+        )}`;
 
       let stylesheetResult;