Rename things to ngx-loading-customizer

CONTRIBUTING.md

@@ -13,6 +13,6 @@
 
 ## Publish
 
-- Adjust version in [package.json](./projects/ngx-loadable/package.json)
+- Adjust version in [package.json](./projects/ngx-loading-customizer/package.json)
 - `npm run package`
-- (You need to have npm access to do that): `npm publish ./dist/ngx-loadable/ngx-loadable-x.x.x.tgz`
+- (You need to have npm access to do that): `npm publish ./dist/ngx-loading-customizer/ngx-loading-customizer-x.x.x.tgz`

README.md

@@ -11,16 +11,16 @@ Angular Loadable is a library that helps you represent and show data that needs
 ## Installation
 
 ```
-npm install --save ngx-loadable
+npm install --save ngx-loading-customizer
 ```
 
 ## Try it
 
-This repo includes an example application showcasing the usage of ngx-loadable.
+This repo includes an example application showcasing the usage of ngx-loading-customizer.
 
 ```
-$ git clone https://github.com/fboeller/ngx-loadable.git
-$ cd ngx-loadable
+$ git clone https://github.com/fboeller/ngx-loading-customizer.git
+$ cd ngx-loading-customizer
 $ npm install
 $ npm start example-app
 ```
@@ -32,7 +32,7 @@ $ npm start example-app
 Given an observable, you can construct a loadable with the operator `toLoadable`.
 
 ```typescript
-import { toLoadable } from "ngx-loadable";
+import { toLoadable } from "ngx-loading-customizer";
 import { of } from "rxjs";
 
 const loadable$ = of({ id: 42 }).pipe(toLoadable);
@@ -46,7 +46,7 @@ First, make sure to import the `LoadableModule` in your module.
 
 ```typescript
 import { NgModule } from "@angular/core";
-import { LoadableModule } from "ngx-loadable";
+import { LoadableModule } from "ngx-loading-customizer";
 import { CommonModule } from "@angular/common";
 
 @NgModule({
@@ -60,7 +60,7 @@ You can use `idle`, `loading`, `loaded('value')` and `errored('error')` to const
 
 ```typescript
 import { Component } from "@angular/core";
-import { idle, Loadable } from "ngx-loadable";
+import { idle, Loadable } from "ngx-loading-customizer";
 
 @Component({
   selector: "app-some",
@@ -92,7 +92,7 @@ Create your custom loading animation component and pass it to the `LoadableModul
 
 ```typescript
 import { NgModule } from "@angular/core";
-import { LoadableModule } from "ngx-loadable";
+import { LoadableModule } from "ngx-loading-customizer";
 import { CustomLoadingAnimationComponent } from "./custom-loading-animation.component";
 
 @NgModule({
@@ -148,8 +148,8 @@ In case you would like to show a loading animation immediately, you can change t
 
 ```typescript
 import { NgModule } from "@angular/core";
-import { LoadableModule } from "ngx-loadable";
-import { LoadableLoadingComponent } from "ngx-loadable";
+import { LoadableModule } from "ngx-loading-customizer";
+import { LoadableLoadingComponent } from "ngx-loading-customizer";
 
 @NgModule({
   imports: [
@@ -171,15 +171,15 @@ It defines some utility functions to work with it.
 If you have a loadable and want to change its value once it is loaded, you can use `map`.
 
 ```typescript
-import { map, loaded } from "ngx-loadable";
+import { map, loaded } from "ngx-loading-customizer";
 const loadable = loaded(5);
 const result = map((x) => x + 10, loadable); // loaded(15)
 ```
 
 If you have a loadable and want to map it to another loadable once it is loaded, you can use `flatMap`.
 
 ```typescript
-import { flatMap, loaded } from "ngx-loadable";
+import { flatMap, loaded } from "ngx-loading-customizer";
 const loadable = loaded(5);
 const result = flatMap((x) => loaded(x + 10), loadable); // loaded(15)
 ```

angular.json

@@ -3,30 +3,30 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "ngx-loadable": {
+    "ngx-loading-customizer": {
       "projectType": "library",
-      "root": "projects/ngx-loadable",
-      "sourceRoot": "projects/ngx-loadable/src",
+      "root": "projects/ngx-loading-customizer",
+      "sourceRoot": "projects/ngx-loading-customizer/src",
       "prefix": "ld",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/ngx-loadable/tsconfig.lib.json",
-            "project": "projects/ngx-loadable/ng-package.json"
+            "tsConfig": "projects/ngx-loading-customizer/tsconfig.lib.json",
+            "project": "projects/ngx-loading-customizer/ng-package.json"
           },
           "configurations": {
             "production": {
-              "tsConfig": "projects/ngx-loadable/tsconfig.lib.prod.json"
+              "tsConfig": "projects/ngx-loading-customizer/tsconfig.lib.prod.json"
             }
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/ngx-loadable/tsconfig.lib.json",
-              "projects/ngx-loadable/tsconfig.spec.json"
+              "projects/ngx-loading-customizer/tsconfig.lib.json",
+              "projects/ngx-loading-customizer/tsconfig.spec.json"
             ],
             "exclude": ["**/node_modules/**"]
           }
@@ -106,5 +106,5 @@
       }
     }
   },
-  "defaultProject": "ngx-loadable"
+  "defaultProject": "ngx-loading-customizer"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ngx-loadable",
+  "name": "ngx-loading-customizer",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -9,8 +9,8 @@
     "prettier": "npx prettier --write .",
     "prettier-check": "npx prettier --check .",
     "check": "npm run lint && npm run test && npm run prettier-check",
-    "build-lib": "ng build ngx-loadable --prod && cp ./README.md ./dist/ngx-loadable/ && cp ./LICENSE ./dist/ngx-loadable/",
-    "npm-pack": "cd dist/ngx-loadable && npm pack && cd ../..",
+    "build-lib": "ng build ngx-loading-customizer --prod && cp ./README.md ./dist/ngx-loading-customizer/ && cp ./LICENSE ./dist/ngx-loading-customizer/",
+    "npm-pack": "cd dist/ngx-loading-customizer && npm pack && cd ../..",
     "package": "npm run build-lib && npm run npm-pack"
   },
   "husky": {
@@ -21,14 +21,14 @@
   "jest": {
     "preset": "jest-preset-angular",
     "setupFilesAfterEnv": [
-      "<rootDir>/projects/ngx-loadable/setup-jest.ts"
+      "<rootDir>/projects/ngx-loading-customizer/setup-jest.ts"
     ],
     "roots": [
-      "<rootDir>/projects/ngx-loadable/src"
+      "<rootDir>/projects/ngx-loading-customizer/src"
     ],
     "collectCoverage": true,
     "collectCoverageFrom": [
-      "<rootDir>/projects/ngx-loadable/src/**/{!(public-api),}.{ts,js}"
+      "<rootDir>/projects/ngx-loading-customizer/src/**/{!(public-api),}.{ts,js}"
     ],
     "clearMocks": true,
     "coverageThreshold": {
@@ -41,7 +41,7 @@
     },
     "globals": {
       "ts-jest": {
-        "tsconfig": "<rootDir>/projects/ngx-loadable/tsconfig.spec.json"
+        "tsconfig": "<rootDir>/projects/ngx-loading-customizer/tsconfig.spec.json"
       }
     }
   },

projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
-import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { idle } from 'projects/ngx-loading-customizer/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loading-customizer/src/lib/loadable.type';
 
 @Component({
   selector: 'app-custom-default-loading-example',

projects/example-app/src/app/examples/custom-default-loading-example/custom-default-loading-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CustomDefaultLoadingExampleComponent } from './custom-default-loading-example.component';
 import { LoadingSpinnerComponent } from './loading-spinner/loading-spinner.component';

projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
-import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { idle } from 'projects/ngx-loading-customizer/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loading-customizer/src/lib/loadable.type';
 
 @Component({
   selector: 'app-custom-loading-template-example',

projects/example-app/src/app/examples/custom-loading-template-example/custom-loading-template-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
 import { CustomLoadingTemplateExampleComponent } from './custom-loading-template-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CommonModule } from '@angular/common';

projects/example-app/src/app/examples/default-example/default-example.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
-import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { idle } from 'projects/ngx-loading-customizer/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loading-customizer/src/lib/loadable.type';
 
 @Component({
   selector: 'app-default-example',

projects/example-app/src/app/examples/default-example/default-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
 import { DefaultExampleComponent } from './default-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CommonModule } from '@angular/common';

projects/example-app/src/app/examples/lightweight-example/lightweight-example.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { idle } from 'projects/ngx-loadable/src/lib/loadable.constructors';
-import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { idle } from 'projects/ngx-loading-customizer/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loading-customizer/src/lib/loadable.type';
 
 @Component({
   selector: 'app-lightweight-example',

projects/example-app/src/app/examples/lightweight-example/lightweight-example.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 
-import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
 import { LightweightExampleComponent } from './lightweight-example.component';
 import { LoadFormModule } from '../../load-form/load-form.module';
 import { CommonModule } from '@angular/common';

projects/example-app/src/app/examples/ngrx-example/ngrx-example.module.ts

@@ -5,7 +5,7 @@ import { StoreModule } from '@ngrx/store';
 import { responseReducer } from './reducer';
 import { EffectsModule } from '@ngrx/effects';
 import { LoadEffects } from './effects';
-import { LoadableModule } from 'projects/ngx-loadable/src/lib/angular/loadable.module';
+import { LoadableModule } from 'projects/ngx-loading-customizer/src/lib/angular/loadable.module';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 

projects/example-app/src/app/examples/ngrx-example/reducer.ts

@@ -4,8 +4,8 @@ import {
   idle,
   loaded,
   loading,
-} from 'projects/ngx-loadable/src/lib/loadable.constructors';
-import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+} from 'projects/ngx-loading-customizer/src/lib/loadable.constructors';
+import { Loadable } from 'projects/ngx-loading-customizer/src/lib/loadable.type';
 import { load, loadError, loadSuccess } from './actions';
 
 const reducer = createReducer(

projects/example-app/src/app/examples/ngrx-example/selector.ts

@@ -1,5 +1,5 @@
 import { createFeatureSelector } from '@ngrx/store';
-import { Loadable } from 'projects/ngx-loadable/src/lib/loadable.type';
+import { Loadable } from 'projects/ngx-loading-customizer/src/lib/loadable.type';
 
 export const selectResponse = createFeatureSelector<Loadable<unknown>>(
   'response'

projects/example-app/src/app/load-form/load-form.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { toLoadable } from 'projects/ngx-loadable/src/lib/functions/to-loadable.function';
-import { Loadable } from 'projects/ngx-loadable/src/public-api';
+import { toLoadable } from 'projects/ngx-loading-customizer/src/lib/functions/to-loadable.function';
+import { Loadable } from 'projects/ngx-loading-customizer/src/public-api';
 import { Subject } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LoadService } from '../load.service';

projects/ngx-loadable/ng-package.json → projects/ngx-loading-customizer/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-loadable",
+  "dest": "../../dist/ngx-loading-customizer",
   "lib": {
     "entryFile": "src/public-api.ts"
   }

projects/ngx-loadable/package.json → projects/ngx-loading-customizer/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "ngx-loadable",
+  "name": "ngx-loading-customizer",
   "version": "0.0.1",
-  "description": "Angular Loadable is a library that helps you represent and show data that needs to be loaded from a backend and can therefore be in a loading state.",
+  "description": "Angular Loading Customizer is a library that helps you represent and show data that needs to be loaded from an external source.",
   "author": "Fabian Böller",
   "license": "MIT",
   "publishConfig": {
@@ -10,10 +10,10 @@
   "private": false,
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/fboeller/ngx-loadable.git"
+    "url": "git+https://github.com/fboeller/ngx-loading-customizer.git"
   },
   "bugs": {
-    "url": "https://github.com/fboeller/ngx-loadable/issues"
+    "url": "https://github.com/fboeller/ngx-loading-customizer/issues"
   },
   "keywords": [
     "angular",
@@ -22,7 +22,7 @@
   ],
   "np": {
     "yarn": false,
-    "contents": "dist/ngx-loadable"
+    "contents": "dist/ngx-loading-customizer"
   },
   "peerDependencies": {
     "@angular/common": ">=10.2.0",