CAP Utilities 💡

CAP Utilities is part of the CAP Generator and was created to provider a collection of general and useful utilities for Schematics in Angular.

To learn more about Schematics we recomend you to see the Schematic documentation.

How to install❓

To Install using npm, simply do:

npm install cap-utilities

How to Use❓

To import all the functions we recommend you the following import declaration:

import * as astUtils from 'cap-utilities'

Functions 📂

• addStylesToAngularJSON
• addLinkStyleToHTMLHead
• addRoutes
• addBodyClass
• addEnvironmentVar
• addExportToModule
• addEntryComponentToModule
• addPackageToPackageJson
• addToNgModule
• appendToStartFile
• appendHtmlElementToBody
• getAppName
• getAppModulePath
• getAngularAppConfig
• getAppNameFromPackageJSON
• hasBootstrap
• isAngularBrowserProject
• readIntoSourceFile
• removeContentFromFile
• updateIndexFile
• updateIndexHeadFile
• updateBodyOfIndexFile
• addIdToElement
• addToAngularJSONArchitectBudgets

addIdToElement

Disclaimer 🚧

This repository contains parts of code which is directly taken from Angular Schematics package. All credits go to the respective developers!

Importan

We are still working on the documentation of the functions (methods).

Functions 📂

addStylesToAngularJSON

Function to add styles into the angular. json.

Example:

| param | Description | |-------------|:---------------------:| | host | | | stylePaths | array of strings |

  cap_utils.addStylesToAngularJSON(
    host, [
      './src/assets/webslidemenu/dropdown-effects/fade-down.css',
      './src/assets/webslidemenu/webslidemenu.scss'])

addLinkStyleToHTMLHead

Insert an html link on the head of and html file

Example:

| param | Description | |-------------|:---------------------:| | host | | | linkHTMLTags | array of strings | | path | string |

  cap_utils.addLinkStyleToHTMLHead(host, [
      '<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=optional" rel="stylesheet" async defer>',
      '<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=optional" rel="stylesheet" async defer>',
      '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" async defer>'
    ], path)

addRoutes

| param | Description | |--------------|:---------------------:| | host | | | routingPath | | | routePaths | | | srcImport | |

@return

Example:

astUtils.addRoutes(host, filePath, [
  { path: '', pathMatch: 'full', component: 'HomeComponent' },
  { path: 'home', pathMatch: 'full', component: 'HomeComponent' }
], importUrl)

addBodyClass

Adds a class to the body of the document.

| param | Description | |--------------|:---------------------:| | host | | | htmlFilePath | | | className | | | srcImport | |

@return

Example:

addEnvironmentVar

Appends a key: value on a specific environment file.

| param | Description | |--------------|:---------------------:| | host | Tree | | routePaths | An array of objects that contains the environments data. |

RoutePaths' interface | Property | Description | |--------------|:---------------------:| | env | The environment to be added (example: prod, staging...)| | appPath | application path (/src...) | | key | The key to be added | | value | The value to be added |

@return void

Example:

cap_utils.addEnvironmentVar(host, [
      {
        env: '',
        appPath: options.path || '/src',
        key: 'apiUrl',
        value: 'http://localhost:4000/api/'
      },
      {
        env: 'prod',
        appPath: options.path || '/src',
        key: 'apiUrl',
        value: 'http://mydomain.com/api/'
      }
    ])

addExportToModule

Custom function to insert an export into NgModule. It also imports it.

| param | Description | |--------------|:---------------------:| | source | | | modulePath | | | classifiedName | | | importPath | |

@return

Example:

addEntryComponentToModule

Custom function to insert an entryComponent into NgModule. It also imports it.

| param | Description | |--------------|:---------------------:| | source | | | modulePath | | | classifiedName | | | importPath | |

@return

Example:

addPackageToPackageJson

| param | Description | |--------------|:---------------------:| |Host | | |packages | Object's array of type packageI |

Package interface(packageI)

| Name | Value | |--------------|:---------------:| | type | String | | pkg | String | | version | String |

@return

Example:

export function addPackageJsonDependencies(): Rule {
  return (host: Tree) => {
    cap_utilities.addPackageToPackageJson(host, [
      {
        type: NodeDependencyType.Default,
        pkg: 'cap-storage-aws',
        version: '~3.0.3'
      },
      {
        type: NodeDependencyType.Default,
        pkg: 'aws-sdk',
        version: '~2.701.0'
      },
      {
        type: NodeDependencyType.Default,
        pkg: 'ngx-file-drop',
        version: '~9.0.1'
      },
      {
        type: NodeDependencyType.Default,
        pkg: 'sweetalert2',
        version: '~9.15.1'
      },{
        type: NodeDependencyType.Default,
        pkg: 'uuid',
        version: '~8.1.0'
      }
    ])
    // cap_utilities.addPackageToPackageJson(host, NodeDependencyType.Default, 'cap-storage-aws', '~3.0.3')
    return host;
  };
}

addToNgModule

Add modules, components or services into the declaration module.

Note: If you wanna include a module with the method forRoot into the app module, intance of write the path of the module write the name of the module(link npm import).

| param | Type | Description | |-------------------|---------------------| :-----------------------------------------------------------: | | host | Tree | Tree | | options | Any | The available options for the schematic | | elementsToImport? | Object array | Object array of type importElementsModulearray |

importElementsModule' interface

| Property | Type | Description | |-------------------|---------------------|:-------------------------------------------------------------:| | name | String | Name of the component, module or service to import | | path | String | Path of the component, module or service to import | | type | String | Type of element to import (component, module or service) | | forRootValues? | Object | Object of type forRootValuesI |

forRootValuesI

| Property | Type | Description | |-------------------|---------------------|:-------------------------------------------------------------:| | configuration? | Any | Property to append an object, array, etc before to the forRoot values| | params | Object array | Params that needs the module into the forRoot method |

forRootParamsI

| Property | Type | Description | |-------------------|---------------------|:-------------------------------------------------------------:| | name | String | Params's name | | value | Any | Params's value |

@return

Example:

  astUtils.addToNgModule(host, options, [{
      name: 'HeaderComponent',
      path: 'app/header/header.component',
      type: 'component'
    },
    {
      name: 'FooterComponent',
      path: 'app/footer/footer.component',
      type: 'component'
    },
    {
      name: 'HomeModule',
      path: 'app/home/home.module',
      type: 'module'
    },
    {
      name: 'CapStorageAWS',
      path: 'cap-storage-aws',
      type: 'module',
      forRootValues: [
          {
            name: 'bucket',
            value: `my-credentials`
          },
          {
            name: 'accessKeyId',
            value: `my-credentials`
          },
          {
            name: 'secretAccessKey',
            value: `my-credentials`
          },
          {
            name: 'region',
            value: `my-credentials`
          },
          {
            name: 'folder',
            value: `my-credentials`
          }
        ]
      }]
    }]);

appendToStartFile

Appends a fragment to the start file.

| param | Description | |--------------|:---------------------:| | host | | | filePath |Path of the file. | | fragment |The maximum number of items to return. | | srcImport | |

@return A tree with the updates.

Example:

  const mainDiv =
  `<div id="main">
    <router-outlet></router-outlet>
  </div>`;
  astUtils.appendToStartFile(host, filePath, mainDiv);
    
  const content = `<app-header></app-header>` ;
  astUtils.appendToStartFile(host, filePath, content);

appendHtmlElementToBody

Appends the given element HTML fragment to the <body> element of the specified HTML file.

| param | Description | |--------------|:---------------------:| | host | Tree | | htmlFilePath | | | elementHtml | | | side | |

@return

Example:

getAppName

| param | Description | |--------------|:---------------------:| | config | |

@return

Example:

getAppModulePath

| param | Description | |--------------|:---------------------:| | host | Tree | | mainPath | |

@return

Example:

getAngularAppConfig

| param | Description | |--------------|:---------------------:| | config | |

@return

Example:

getAppNameFromPackageJSON

| param | Description | |--------------|:---------------------:| | | |

@return

Example:

hasBootstrap

| param | Description | |--------------|:---------------------:| | | |

@return

Example:

isAngularBrowserProject

| param | Description | |--------------|:---------------------:| | projectConfig | |

@return

Example:

readIntoSourceFile

| param | Description | |--------------|:---------------------:| | | |

@return

Example:

removeContentFromFile

Remove content from specified file

| param | Description | |--------------|:---------------------:| | host | | | filePath |Path of the file that's going to be deleted. |

@return The updated tree.

Example:

function removeComponentHtml(filePath: string): Rule {
  return (hostd: Tree) => {
    astUtils.removeContentFromFile(host, filePath);
    return host;
  };
}

updateIndexFile

| param | Description | |--------------|:---------------------:| | | |

@return

Example:

updateIndexHeadFile

Appends the given element HTML fragment to the <head> element of the specified HTML file.

| param | Description | |---------------------|:---------------------:| | hostP | | | path | | | arrayLinks | |

@return

Example:

updateBodyOfIndexFile

| param | Description | |--------------|:---------------------:| | | |

@return

Example:

addIdToElement

Add a id to a element on a html file

| param | Description | |---------------|:-----------------------------:| | host | Tree | | htmlFilePath |Html file path | | idName |Name of the id to be added | | tagName |Html tag name to append the id |

Example:

  function addIdAppToBody(htmlFilePath: string): Rule {
    return (host: Tree) => {
      addIdToElement(host, htmlFilePath, 'app', 'body');
    }
}*/

addToAngularJSONArchitectBudgets

Modify the budgets object within the Architect property of the Angular JSON File

| Property | Type | Description | |-------------------|---------------------|:-------------------------------------------------------------:| | host | Tree | | | data | any | An object that it's going to modified the current budget information.|

Example:

  cap_utilities.addToAngularJSONArchitectBudgets(host, {
    type: 'anyComponentStyle',
    maximumWarning: '40kb',
    maximumError: '50kb'
  }

License

Apache-2.0 © Software Allies