feat(vite-plugin-angular): add ability to export from .ng files (#856)

apps/ng-app/src/app/export-stuff.ng

@@ -0,0 +1,20 @@
+<script lang="ts">
+  export interface MyInterface {
+    title: string;
+  }
+
+  export type MyType = string;
+
+  export enum Direction {
+    Up,
+    Down,
+    Left,
+    Right,
+  }
+
+  export function myFunc() {
+    return 'hi';
+  }
+</script>
+
+<template> Sharing is caring </template>

apps/ng-app/src/app/hello.ng

@@ -10,10 +10,13 @@
     afterNextRender,
   } from '@angular/core';
 
+  import { myFunc } from './export-stuff.ng';
+
   defineMetadata({
     queries: {
       divElement: new ViewChild('divElement'),
     },
+    exposes: [myFunc],
   });
 
   let divElement: ElementRef<HTMLDivElement>;
@@ -47,6 +50,7 @@
   <p>Text from input: {{ text() }}</p>
   <button (click)="clicked.emit($event)">Emit The Click</button>
   <div #divElement>my div</div>
+  <p>From imported function: {{ myFunc() }}</p>
 </template>
 
 <style>

apps/ng-app/src/app/pages/about.page.ng

@@ -1,5 +1,11 @@
 <script lang="ts">
+  import { RouteMeta } from '@analogjs/router';
   import Hello from '../hello.ng';
+
+  export const routeMeta: RouteMeta = {
+    title: 'My page',
+    canActivate: [() => true],
+  };
 </script>
 
 <template>

apps/ng-app/src/vite-env.d.ts

@@ -30,6 +30,7 @@ declare global {
         | 'inputs'
       >
     ) => void;
+
     /**
      * Invoke the callback when the component is initialized.
      */

packages/vite-plugin-angular/src/lib/authoring/__snapshots__/ng.spec.ts.snap

@@ -72,6 +72,23 @@ export default class VirtualAnalogComponent {
     protected output = new EventEmitter();
     protected outputWithType = new EventEmitter<string>();
 }
+export const routeMeta = {
+    title: 'My page',
+    canActivate: [() => true],
+}
+export interface MyInterface {
+    title: string
+}
+export type MyType = string;
+export enum Direction {
+    Up,
+    Down,
+    Left,
+    Right,
+}
+export function myFunc() {
+    console.log('hello');
+}
 "
 `;
 

packages/vite-plugin-angular/src/lib/authoring/ng.spec.ts

@@ -11,6 +11,28 @@ defineMetadata({
   }
 });
 
+export const routeMeta = {
+  title: 'My page',
+  canActivate: [() => true],
+}
+
+export interface MyInterface {
+  title: string
+}
+
+export type MyType = string;
+
+export enum Direction {
+  Up,
+  Down,
+  Left,
+  Right,
+}
+
+export function myFunc(){
+  console.log('hello');
+}
+
 let divElement: ElementRef<HTMLDivElement>;
 let test: string;
 

packages/vite-plugin-angular/src/lib/authoring/ng.ts

@@ -13,6 +13,7 @@ import {
   Project,
   PropertyDeclarationStructure,
   Scope,
+  SourceFile,
   StructureKind,
   SyntaxKind,
   VariableDeclarationKind,
@@ -164,6 +165,16 @@ function processNgScript(
 
     const nodeFullText = node.getText();
 
+    if (
+      Node.isTypeAliasDeclaration(node) ||
+      Node.isInterfaceDeclaration(node) ||
+      Node.isEnumDeclaration(node)
+    ) {
+      if (node.hasExportKeyword()) {
+        targetSourceFile.addStatements(nodeFullText);
+      }
+    }
+
     // for VariableStatement (e.g: const ... = ..., let ... = ...)
     if (Node.isVariableStatement(node)) {
       // NOTE: we do not support multiple declarations (i.e: const a, b, c)
@@ -177,99 +188,103 @@ function processNgScript(
         declaration.getInitializer(),
       ];
 
-      // let variable; // no initializer
-      if (!initializer && isLet) {
-        // transfer the whole line `let variable;` over
-        addVariableToConstructor(targetConstructor, '', name, 'let');
-        // populate getters array for Object.defineProperties
-        gettersSetters.push({ propertyName: name, isFunction: false });
-      } else if (initializer) {
-        // with initializer
-        const nameNode = declaration.getNameNode();
-
-        // if destructured.
-        // TODO: we don't have a good abstraction for handling destructured variables yet.
-        if (
-          Node.isArrayBindingPattern(nameNode) ||
-          Node.isObjectBindingPattern(nameNode)
-        ) {
-          targetConstructor.addStatements(nodeFullText);
-
-          const bindingElements = nameNode
-            .getDescendantsOfKind(SyntaxKind.BindingElement)
-            .map((bindingElement) => bindingElement.getName());
-
-          if (isLet) {
-            gettersSetters.push(
-              ...bindingElements.map((propertyName) => ({
-                propertyName,
-                isFunction: false,
-              }))
-            );
-          } else {
-            for (const bindingElement of bindingElements) {
-              targetClass.addProperty({
-                name: bindingElement,
-                kind: StructureKind.Property,
-                scope: Scope.Protected,
-              });
-              targetConstructor.addStatements(
-                `this.${bindingElement} = ${bindingElement};`
+      if (node.hasExportKeyword()) {
+        targetSourceFile.addStatements(nodeFullText);
+      } else {
+        // let variable; // no initializer
+        if (!initializer && isLet) {
+          // transfer the whole line `let variable;` over
+          addVariableToConstructor(targetConstructor, '', name, 'let');
+          // populate getters array for Object.defineProperties
+          gettersSetters.push({ propertyName: name, isFunction: false });
+        } else if (initializer) {
+          // with initializer
+          const nameNode = declaration.getNameNode();
+
+          // if destructured.
+          // TODO: we don't have a good abstraction for handling destructured variables yet.
+          if (
+            Node.isArrayBindingPattern(nameNode) ||
+            Node.isObjectBindingPattern(nameNode)
+          ) {
+            targetConstructor.addStatements(nodeFullText);
+
+            const bindingElements = nameNode
+              .getDescendantsOfKind(SyntaxKind.BindingElement)
+              .map((bindingElement) => bindingElement.getName());
+
+            if (isLet) {
+              gettersSetters.push(
+                ...bindingElements.map((propertyName) => ({
+                  propertyName,
+                  isFunction: false,
+                }))
               );
+            } else {
+              for (const bindingElement of bindingElements) {
+                targetClass.addProperty({
+                  name: bindingElement,
+                  kind: StructureKind.Property,
+                  scope: Scope.Protected,
+                });
+                targetConstructor.addStatements(
+                  `this.${bindingElement} = ${bindingElement};`
+                );
+              }
             }
-          }
-        } else {
-          const isFunctionInitializer = isFunction(initializer);
+          } else {
+            const isFunctionInitializer = isFunction(initializer);
 
-          if (!isLet) {
-            const ioStructure = getIOStructure(initializer);
+            if (!isLet) {
+              const ioStructure = getIOStructure(initializer);
+
+              if (ioStructure) {
+                // outputs
+                if (!!ioStructure.decorators) {
+                  // track output name
+                  outputs.push(name);
+                }
 
-            if (ioStructure) {
-              // outputs
-              if (!!ioStructure.decorators) {
                 // track output name
-                outputs.push(name);
+                targetClass.addProperty({
+                  ...ioStructure,
+                  decorators: undefined,
+                  name,
+                  scope: Scope.Protected,
+                });
+
+                // assign constructor variable
+                targetConstructor.addStatements(`const ${name} = this.${name}`);
+              } else {
+                /**
+                 * normal property
+                 * const variable = initializer;
+                 * We'll create a class property with the same variable name
+                 */
+                addVariableToConstructor(
+                  targetConstructor,
+                  initializer.getText(),
+                  name,
+                  'const',
+                  true
+                );
               }
-
-              // track output name
-              targetClass.addProperty({
-                ...ioStructure,
-                decorators: undefined,
-                name,
-                scope: Scope.Protected,
-              });
-
-              // assign constructor variable
-              targetConstructor.addStatements(`const ${name} = this.${name}`);
             } else {
               /**
-               * normal property
-               * const variable = initializer;
-               * We'll create a class property with the same variable name
+               * let variable = initializer;
+               * We will NOT create a class property with the name because we will add it to the getters
                */
               addVariableToConstructor(
                 targetConstructor,
                 initializer.getText(),
                 name,
-                'const',
-                true
+                'let'
               );
+              gettersSetters.push({
+                propertyName: name,
+                isFunction: isFunctionInitializer,
+              });
             }
-          } else {
-            /**
-             * let variable = initializer;
-             * We will NOT create a class property with the name because we will add it to the getters
-             */
-            addVariableToConstructor(
-              targetConstructor,
-              initializer.getText(),
-              name,
-              'let'
-            );
-            gettersSetters.push({
-              propertyName: name,
-              isFunction: isFunctionInitializer,
-            });
           }
         }
       }
@@ -279,12 +294,16 @@ function processNgScript(
     if (Node.isFunctionDeclaration(node)) {
       const functionName = node.getName();
       if (functionName) {
-        targetConstructor.addStatements([
-          // bring the function over
-          nodeFullText,
-          // assign class property
-          `this.${functionName} = ${functionName}.bind(this);`,
-        ]);
+        if (node.hasExportKeyword()) {
+          targetSourceFile.addStatements(nodeFullText);
+        } else {
+          targetConstructor.addStatements([
+            // bring the function over
+            nodeFullText,
+            // assign class property
+            `this.${functionName} = ${functionName}.bind(this);`,
+          ]);
+        }
       }
     }