feat(angular): Allow SWC additional plugins

feat(angular): Support plugins for component styleUrls and templateUrls Signed-off-by: Jordan Hall <jordan@libertyware.co.uk>
nxext · Mar 6, 2022 · b129a60 · b129a60
1 parent 5ca77d2
commit b129a60
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 38 deletions.
diff --git a/packages/angular/nx/src/generators/application/schema.json b/packages/angular/nx/src/generators/application/schema.json
@@ -23,26 +23,14 @@
       "description": "The file extension to be used for style files.",
       "type": "string",
       "default": "css",
-      "enum": ["css", "scss", "sass", "less"],
+      "enum": ["css"],
       "x-prompt": {
         "message": "Which stylesheet format would you like to use?",
         "type": "list",
         "items": [
           {
             "value": "css",
             "label": "CSS"
-          },
-          {
-            "value": "scss",
-            "label": "SASS(.scss)  [ http://sass-lang.com   ]"
-          },
-          {
-            "value": "sass",
-            "label": "SASS(.sass)  [ http://sass-lang.com   ]"
-          },
-          {
-            "value": "less",
-            "label": "LESS         [ http://lesscss.org     ]"
           }
         ]
       }

diff --git a/packages/angular/swc/src/lib/visitors/components.ts b/packages/angular/swc/src/lib/visitors/components.ts
@@ -20,10 +20,16 @@ import {
   createTemplateElement,
 } from 'swc-ast-helpers';
 import { readFileSync } from 'fs';
-import { dirname, join } from 'path';
+import { dirname, extname, join } from 'path';
+
+export interface AngularComponentOptions {
+  sourceUrl: string;
+  templateUrl?: (filePath: unknown, ext: string) => string;
+  styleUrls?: (filePath: unknown, ext: string) => string;
+}
 
 export class AngularComponents extends Visitor {
-  constructor(private sourceUrl: string) {
+  constructor(private options: AngularComponentOptions) {
     super();
   }
   override visitModuleItems(items: ModuleItem[]): ModuleItem[] {
@@ -56,13 +62,28 @@ export class AngularComponents extends Visitor {
                       'templateUrl'
                     ) {
                       const actualImportPath = join(
-                        dirname(this.sourceUrl),
+                        dirname(this.options.sourceUrl),
                         ((prop as KeyValueProperty).value as Identifier).value
                       );
-                      const templateContent = readFileSync(
-                        actualImportPath,
-                        'utf8'
-                      );
+                      let templateContent: string;
+                      if (this.options.templateUrl) {
+                        templateContent = this.options.templateUrl(
+                          actualImportPath,
+                          extname(actualImportPath)
+                        );
+                      } else if (extname(actualImportPath) === 'html') {
+                        templateContent = readFileSync(
+                          actualImportPath,
+                          'utf8'
+                        );
+                      } else {
+                        console.error(
+                          `HTML type ${extname(
+                            actualImportPath
+                          )} is not supported. Please use a custom templateUrl option`
+                        );
+                        return '';
+                      }
 
                       return createKeyValueProperty(
                         createIdentifer('template'),
@@ -80,10 +101,24 @@ export class AngularComponents extends Visitor {
                         (prop as KeyValueProperty).value as ArrayExpression
                       ).elements.map((el) => {
                         const actualImportPath = join(
-                          dirname(this.sourceUrl),
+                          dirname(this.options.sourceUrl),
                           (el?.expression as StringLiteral).value
                         );
-                        return readFileSync(actualImportPath, 'utf8');
+                        if (this.options.styleUrls) {
+                          return this.options.styleUrls(
+                            actualImportPath,
+                            extname(actualImportPath)
+                          );
+                        } else if (extname(actualImportPath) === 'css') {
+                          return readFileSync(actualImportPath, 'utf8');
+                        } else {
+                          console.error(
+                            `Style type ${extname(
+                              actualImportPath
+                            )} is not supported. Please use a custom styleUrls option`
+                          );
+                          return '';
+                        }
                       });
                       return {
                         ...prop,

diff --git a/packages/angular/vite/src/lib/vite-plugin-angular/index.ts b/packages/angular/vite/src/lib/vite-plugin-angular/index.ts
@@ -7,29 +7,29 @@ import {
   AngularInjector,
   AngularSwapPlatformDynamic,
 } from '@nxext/angular-swc';
-// import { defautSideEffects, optimizer } from './utils/optimizer';
+import { defautSideEffects, optimizer } from './utils/optimizer';
 
 export function ViteAngularPlugin(
   angularOptions?: AngularVitePluginOptions
 ): Plugin {
   let angularComponentPlugin: AngularComponents;
   let angularInjectorPlugin: AngularInjector;
   let isProduction = true;
-  // let isBuild = false;
-  // let sideEffectFreeModules: string[];
+  let isBuild = false;
+  let sideEffectFreeModules: string[];
   // eslint-disable-next-line no-useless-escape
   const fileExtensionRE = /\.[^\/\s\?]+$/;
   return {
     name: 'vite-plugin-angular-by-nxext',
     enforce: 'pre',
     configResolved(config) {
       isProduction = config.isProduction;
-      // isBuild = config.command === 'build';
+      isBuild = config.command === 'build';
     },
     buildStart: async () => {
-      // sideEffectFreeModules = defautSideEffects(
-      //   angularOptions?.buildOptimizer?.sideEffectFreeModules
-      // );
+      sideEffectFreeModules = defautSideEffects(
+        angularOptions?.buildOptimizer?.sideEffectFreeModules
+      );
     },
     transform: (code, id) => {
       const [filepath, querystring = ''] = id.split('?');
@@ -38,12 +38,15 @@ export function ViteAngularPlugin(
         filepath.match(fileExtensionRE) ||
         [];
 
-      // if (id.includes('node_modules')) {
-      //   return isBuild ? optimizer(code, id, {
-      //     sideEffectFreeModules,
-      //     angularCoreModules: angularOptions?.buildOptimizer?.angularCoreModules,
-      //   }) : { code };
-      // }
+      if (id.includes('node_modules')) {
+        return isBuild
+          ? optimizer(code, id, {
+              sideEffectFreeModules,
+              angularCoreModules:
+                angularOptions?.buildOptimizer?.angularCoreModules,
+            })
+          : { code };
+      }
 
       if (/\.(html|css?)$/.test(extension)) {
         return;
@@ -66,7 +69,11 @@ export function ViteAngularPlugin(
         },
         plugin: plugins([
           (m: Program) => {
-            angularComponentPlugin = new AngularComponents(id);
+            angularComponentPlugin = new AngularComponents({
+              sourceUrl: id,
+              styleUrls: angularOptions?.component?.styleUrls,
+              templateUrl: angularOptions?.component?.templateUrl,
+            });
             return angularComponentPlugin.visitProgram(m);
           },
           (m: Program) => {
@@ -76,6 +83,7 @@ export function ViteAngularPlugin(
           (m: Program) => {
             return new AngularImportCompilerComponents().visitProgram(m);
           },
+          ...(angularOptions?.swc?.plugins ?? []),
           ...(isProduction
             ? [(m: Program) => new AngularSwapPlatformDynamic().visitProgram(m)]
             : []),

diff --git a/packages/angular/vite/src/lib/vite-plugin-angular/plugin-options.ts b/packages/angular/vite/src/lib/vite-plugin-angular/plugin-options.ts
@@ -1,7 +1,17 @@
-import type { JscTarget } from '@swc/core';
+import type { JscTarget, Plugin } from '@swc/core';
 import { OptimizerOptions } from './utils/optimizer';
-
+import { AngularComponentOptions } from '@nxext/angular-swc';
 export interface AngularVitePluginOptions {
   target: JscTarget;
   buildOptimizer?: OptimizerOptions;
+  /**
+   * @summary This is an experiment plugin system. It could be removed or change at any time
+   */
+  component?: Omit<AngularComponentOptions, 'sourceUrl'>;
+  /**
+   * @summary This is an experiment plugin system. It could be removed or change at any time
+   */
+  swc?: {
+    plugins: Plugin[];
+  };
 }