intial commit

Author: santoshyadavdev

.gitignore

@@ -0,0 +1,4 @@
+*.js
+*.map
+node_modules
+package-lock.json

README.md

@@ -0,0 +1,33 @@
+# Builder To Run Source Map Explorer
+
+Want to run the source-map-explorer with Angular? 
+This builder does it for you with zero configuration.
+
+
+## Setting up this Builder
+
+```
+ng add @ngx-builders/analyze
+```
+
+## That's it. Now, you are good to go
+
+Now whenever you want to deploy your angular project just run a command `ng run [YOUR_PROJECT_NAME]:analyze` and it will run the source-map-explorer.
+
+
+## 📦 Options <a name="options"></a>
+
+#### --configuration <a name="configuration"></a>
+
+#### --no-build <a name="no-build"></a>
+- **optional**
+- Default: `false` (string)
+- Example:
+  - `ng run [YOUR_PROJECT_NAME]:analyze` – Angular project is build in production mode before the deployment
+  - `ng deploy [YOUR_PROJECT_NAME]:analyze --no-build` – Angular project is NOT build
+
+Skip build process during deployment.
+This can be used when you are sure that you haven't changed anything and want to deploy with the latest artifact.
+This command causes the `--configuration` setting to have no effect.
+
+MIT

analyze/index.ts

@@ -0,0 +1,58 @@
+import { BuilderOutput, createBuilder, BuilderContext } from '@angular-devkit/architect';
+import { json } from '@angular-devkit/core';
+import { Schema } from './schema';
+import util from 'util';
+import { exec } from 'child_process';
+import fs from 'fs';
+
+export const execAsync = util.promisify(exec);
+
+export default createBuilder<any>(
+  async (builderConfig: Schema, context: BuilderContext): Promise<BuilderOutput> => {
+    try {
+      context.reportStatus(`Executing "${builderConfig.noBuild}"...`);
+      // const child = childProcess.spawn(options.command, options.args, { stdio: 'pipe' });
+
+      const configuration = 'production';
+
+      const overrides = {
+        // this is an example how to override the workspace set of options
+        ...({  sourceMap: true })
+      };
+
+
+      const build = await context.scheduleTarget({
+        target: 'build',
+        project: context?.target?.project || '',
+        configuration
+      }, overrides as json.JsonObject);
+
+      const result = await build.result;
+      const buildPath = 'dist/analyze';
+      let fileResult: any;
+
+      if (result.success) {
+        const file = fs.readdirSync(builderConfig.outputPath).filter(f => f.includes('main-es2015'));
+        const mainFile = file.find(f => f.endsWith('.js'));
+        console.log(mainFile);
+
+        const commandToPublish = `source-map-explorer ${builderConfig.outputPath}/${mainFile}`;
+
+        const { stdout, stderr } = await execAsync(commandToPublish);
+        context.logger.info(stdout);
+        context.logger.info(stderr);
+      }
+
+      context.reportStatus(`Done.`);
+      return {
+        success: true
+      };
+    }
+    catch (e) {
+      return {
+        error: e.message,
+        success: true
+      };
+    }
+  });
+

analyze/index_spec.ts

@@ -0,0 +1,60 @@
+import { Architect } from '@angular-devkit/architect';
+import { TestingArchitectHost } from '@angular-devkit/architect/testing';
+import { logging, schema } from '@angular-devkit/core';
+
+const { join } = require('path');
+
+describe('Command Runner Builder', () => {
+ let architect: Architect;
+ let architectHost: TestingArchitectHost;
+
+ 
+ beforeEach(async () => {
+   const registry = new schema.CoreSchemaRegistry();
+   registry.addPostTransform(schema.transforms.addUndefinedDefaults);
+
+ 
+   // Arguments to TestingArchitectHost are workspace and current directories.
+   // Since we don't use those, both are the same in this case.
+   architectHost = new TestingArchitectHost(__dirname, __dirname);
+   architect = new Architect(architectHost, registry);
+
+ 
+   // This will either take a Node package name, or a path to the directory
+   // for the package.json file.
+   await architectHost.addBuilderFromPackage(join(__dirname, '..'));
+   console.log('#', Array.from((architectHost as any)._builderMap.keys()))
+ });
+
+ 
+ // This might not work in Windows.
+ it('can run ls', async () => {
+   // Create a logger that keeps an array of all messages that were logged.
+   const logger = new logging.Logger('');
+   const logs: string[] = [];
+   logger.subscribe(ev => logs.push(ev.message));
+ 
+   // A "run" can contain multiple outputs, and contains progress information.
+   const run = await architect.scheduleBuilder('@example/command-runner:command', {
+     command: 'ls',
+     args: [__dirname],
+   }, { logger });  // We pass the logger for checking later.
+
+ 
+   // The "result" member is the next output of the runner.
+   // This is of type BuilderOutput.
+   const output = await run.result;
+  
+   // Stop the builder from running. This really stops Architect from keeping
+   // the builder associated states in memory, since builders keep waiting
+   // to be scheduled.
+   await run.stop();
+ 
+   // Expect that it succeeded.
+   expect(output.success).toBe(true);
+ 
+   // Expect that this file was listed. It should be since we're running
+   // `ls $__dirname`.
+   expect(logs.toString()).toContain('index_spec.ts');
+ });
+});

analyze/schema.d.ts

@@ -0,0 +1,4 @@
+export interface Schema {
+    noBuild?: boolean;
+    outputPath: string;
+}

analyze/schema.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "type": "object",
+  "properties": {
+    "noBuild": {
+      "type": "boolean"
+    },
+    "outputPath": {
+      "type": "string"
+    }
+  }
+}

builders.json

@@ -0,0 +1,9 @@
+{
+  "builders": {
+    "analyze": {
+      "implementation": "./analyze",
+      "schema": "./analyze/schema.json",
+      "description": "Runs the analyzer."
+    }
+  }
+}

collection.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+      "ng-add": {
+        "description": "Builder to analyze package using source-map-explorer",
+        "factory": "./ng-add/index",
+        "schema": "./ng-add/schema.json",
+        "aliases": [
+          "install"
+        ]
+      }
+    }
+  }

ng-add/index.ts

@@ -0,0 +1,115 @@
+import { Rule, SchematicContext, SchematicsException, Tree, chain } from '@angular-devkit/schematics';
+import { experimental, JsonParseMode, parseJson } from '@angular-devkit/core';
+import { addPackageJsonDependency, NodeDependency, NodeDependencyType } from 'schematics-utilities';
+
+function addPackageJsonDependencies(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        
+        // always add the package under dev dependencies
+        const dependencies: NodeDependency[] = [
+            { type: NodeDependencyType.Dev, version: '~0.0.0', name: '@ngx-builders/analyze' },
+            { type: NodeDependencyType.Dev, version: '~2.4.2', name: 'source-map-explorer' }
+        ];
+        
+        dependencies.forEach(dependency => {
+            addPackageJsonDependency(host, dependency);
+            context.logger.log('info', `✅️ Added "${dependency.name}" into ${dependency.type}`);
+        });
+
+        return host;
+    };
+}
+
+function getWorkspace(host: Tree): { path: string; workspace: experimental.workspace.WorkspaceSchema } {
+    const possibleFiles = ['/angular.json', './angular.json'];
+    const path = possibleFiles.find(path => host.exists(path));
+
+    if (!path) {
+        throw new SchematicsException(`Could not find angular.json`);
+    }
+
+    const configBuffer = host.read(path);
+    if (!configBuffer) {
+        throw new SchematicsException(`Could not find angular.json`);
+    }
+
+    const content = configBuffer.toString();
+    let workspace: experimental.workspace.WorkspaceSchema;
+
+    try {
+        workspace = <any>parseJson(content, JsonParseMode.Loose) as experimental.workspace.WorkspaceSchema;
+    } catch (e) {
+        throw new SchematicsException(`Could not parse angular.json: ${e.message}`);
+    }
+
+    return { path, workspace };
+}
+
+interface NgAddOptions {
+    project?: string;
+    siteID: string;
+    netlifyToken: string;
+}
+
+export function sourceMapBuilder(options: NgAddOptions): Rule {
+    return (tree: Tree, _context: SchematicContext) => {
+        // get the workspace details
+        const { path: workspacePath, workspace } = getWorkspace(tree);
+
+        // getting project name
+        if (!options.project) {
+            if (workspace.defaultProject) {
+                options.project = workspace.defaultProject;
+            } else {
+                throw new SchematicsException(
+                    'No Angular project selected and no default project in the workspace'
+                );
+            }
+        }
+
+        // Validating project name
+        const project = workspace.projects[options.project];
+        if (!project) {
+            throw new SchematicsException(
+                'The specified Angular project is not defined in this workspace'
+            );
+        }
+
+        // Checking if it is application
+        if (project.projectType !== 'application') {
+            throw new SchematicsException(
+                `Deploy requires an Angular project type of "application" in angular.json`
+            );
+        }
+
+        // Getting output path from Angular.json
+        if (
+            !project.architect ||
+            !project.architect.build ||
+            !project.architect.build.options ||
+            !project.architect.build.options.outputPath
+        ) {
+            throw new SchematicsException(
+                `Cannot read the output path(architect.build.options.outputPath) of the Angular project "${options.project}" in angular.json`
+            );
+        }
+
+        // adding deploy statement for builder
+        project.architect['analyze'] = {
+            "builder": "@ngx-builders/analyze:analyze",
+            "options": {
+                "outputPath": project.architect.build.options.outputPath
+            }
+        }
+
+        tree.overwrite(workspacePath, JSON.stringify(workspace, null, 2));
+        return tree;
+    };
+}
+
+export default function (options: NgAddOptions): Rule {
+    return chain([
+        sourceMapBuilder(options),
+        addPackageJsonDependencies()
+    ]);
+}

ng-add/schema.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "id": "source-map-explore",
+    "title": "Builder to analyze using source-map-explorer",
+    "type": "object",
+    "properties": {},
+    "required": []
+}