@rxap/config
Version:
Provides a configuration service for Angular applications, allowing you to load and manage application settings from various sources such as static files, URLs, local storage, and URL parameters. It supports schema validation and provides utilities for ac
1,011 lines (839 loc) • 38.4 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-config</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">angular-config</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content interface">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Interfaces</li>
<li class="breadcrumb-item"
>
ConfigLoadOptions</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source"
class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/lib/config.service.ts</code>
</p>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Optional</span>
<a href="#fromCid"
>
fromCid
</a>
</li>
<li>
<span class="modifier">Optional</span>
<a href="#fromDns"
>
fromDns
</a>
</li>
<li>
<span class="modifier">Optional</span>
<a href="#fromLocalStorage"
>
fromLocalStorage
</a>
</li>
<li>
<span class="modifier">Optional</span>
<a href="#fromUrlParam"
>
fromUrlParam
</a>
</li>
<li>
<span class="modifier">Optional</span>
<a href="#schema"
>
schema
</a>
</li>
<li>
<span class="modifier">Optional</span>
<a href="#static"
>
static
</a>
</li>
<li>
<span class="modifier">Optional</span>
<a href="#url"
>
url
</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">Properties</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fromCid"></a>
<span class="name "><b>fromCid</b>
<a href="#fromCid">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>fromCid: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Load additional configuration directly from the given Content Identifier (CID).
This takes precedence over <code>fromDns</code> if both are provided.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fromDns"></a>
<span class="name "><b>fromDns</b>
<a href="#fromDns">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>fromDns: <code>string | boolean</code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | boolean</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Load additional configuration based on a CID found in a DNS TXT record.
If true, uses <code>location.hostname</code>. If a string, uses that domain.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fromLocalStorage"></a>
<span class="name "><b>fromLocalStorage</b>
<a href="#fromLocalStorage">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>fromLocalStorage: <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fromUrlParam"></a>
<span class="name "><b>fromUrlParam</b>
<a href="#fromUrlParam">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>fromUrlParam: <code>string | boolean</code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | boolean</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="schema"></a>
<span class="name "><b>schema</b>
<a href="#schema">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>schema: <code><a href="../miscellaneous/typealiases.html#AnySchema" target="_self" >AnySchema</a></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../miscellaneous/typealiases.html#AnySchema" target="_self" >AnySchema</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="static"></a>
<span class="name "><b>static</b>
<a href="#static">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>static: <code>Record<string | any></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>Record<string | any></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>static config values</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="url"></a>
<span class="name "><b>url</b>
<a href="#url">
<span class="icon ion-ios-link"></span>
</a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>url: <code>string | string[] | </code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>string | string[] | </code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Optional</i>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
Inject,
Injectable,
Optional,
} from '@angular/core';
import { Environment } from '@rxap/environment';
import {
coerceArray,
CoercePrefix,
deepMerge,
SetObjectValue,
} from '@rxap/utilities';
import { ReplaySubject } from 'rxjs';
import { RXAP_CONFIG } from './tokens';
import { NoInferType } from './types';
import {
dnsLookup,
fetchCidContentAsJson,
} from './utilities';
export type AnySchema = { validateAsync: (...args: any[]) => any };
export interface ConfigLoadOptions {
fromUrlParam?: string | boolean;
fromLocalStorage?: boolean;
schema?: AnySchema;
url?: string | string[] | ((environment: Environment) => string | string[]);
/**
* static config values
*/
static?: Record<string, any>;
/**
* Load additional configuration based on a CID found in a DNS TXT record.
* If true, uses `location.hostname`. If a string, uses that domain.
*/
fromDns?: string | boolean;
/**
* Load additional configuration directly from the given Content Identifier (CID).
* This takes precedence over `fromDns` if both are provided.
*/
fromCid?: string;
}
@Injectable({
providedIn: 'root',
})
export class ConfigService<Config extends Record<string, any> = Record<string, any>> {
public static onError = new ReplaySubject<unknown>(1);
public static onRequestError = new ReplaySubject<Response>(1);
public static onErrorFnc: Array<(error: any) => void> = [];
public static onRequestErrorFnc: Array<(response: Response) => void> = [];
public static Config: any = null;
/**
* Static default values for the config object.
* Will be overwritten by an dynamic config file specified in
* the Urls array.
*/
public static Defaults: any = {};
/**
* Any value definition in the Overwrites object will overwrite any
* value form the Defaults values or dynamic config files
*/
public static Overwrites: any = {};
public static LocalStorageKey = 'rxap/config/local-config';
/**
* @deprecated instead use the url property of the ConfigLoadOptions
*/
public static Urls = [];
public readonly config!: Config;
constructor(@Optional() @Inject(RXAP_CONFIG) config: any | null = null) {
this.config = ConfigService.Config;
if (config) {
this.config = deepMerge(this.config ?? {}, config);
}
if (!this.config) {
throw new Error('config not available');
}
}
/**
* Used to load the app config from a remote resource.
*
* Promise.all([ ConfigService.Load() ])
* .then(() => platformBrowserDynamic().bootstrapModule(AppModule))
* .catch(err => console.error(err))
*
*/
public static async Load(options?: ConfigLoadOptions, environment?: Environment): Promise<void> {
options ??= {};
let config: any = deepMerge(this.Defaults, {});
if (environment?.config) {
if (typeof environment.config === 'string') {
options.url = environment.config;
} else {
options.static = environment.config.static;
options.url = environment.config.url;
options.fromUrlParam = environment.config.fromUrlParam;
options.fromLocalStorage = environment.config.fromLocalStorage;
options.schema = environment.config.schema;
}
}
config = deepMerge(config, options?.static ?? {});
const urls = (options?.url ? coerceArray(options.url) : ConfigService.Urls).map(url => {
if (typeof url === 'function') {
if (!environment) {
throw new Error('environment is required when url is a function');
}
return coerceArray(url(environment));
}
return coerceArray(url);
}).flat();
for (const url of urls) {
config = deepMerge(config, await this.loadConfig(url, true, options?.schema));
}
config = deepMerge(config, this.Overwrites);
if (options?.fromLocalStorage !== false) {
const localConfig = localStorage.getItem(ConfigService.LocalStorageKey);
if (localConfig) {
try {
config = deepMerge(config, JSON.parse(localConfig));
} catch (e: any) {
console.error('local config could not be parsed');
}
}
}
if (options?.fromUrlParam) {
const param = typeof options.fromUrlParam === 'string' ? options.fromUrlParam : 'config';
config = deepMerge(config, this.LoadConfigDefaultFromUrlParam(param));
}
if (options?.fromDns) {
await this.loadConfigFromDns(options as any);
}
if (options?.fromCid) {
config = deepMerge(config, await this.loadConfigFromCid(options as any));
}
console.debug('app config', config);
this.Config = config;
}
private static async loadConfigFromCid(options: ConfigLoadOptions & { fromCid: string | boolean }) {
console.debug('Loading config from CID: ', options.fromCid);
try {
const cidContent = await fetchCidContentAsJson(options.fromCid);
if (cidContent && typeof cidContent === 'object') {
console.log(`Merging configuration from CID ${options.fromCid}.`, cidContent);
// Merge CID content into the existing config object
console.log('Configuration merged successfully.');
return cidContent;
} else if (cidContent) {
console.warn(`Content fetched from CID ${options.fromCid} is not a mergeable object, skipping merge.`);
} else {
console.warn(`No content fetched or content was null for CID ${options.fromCid}.`);
}
} catch (error) {
console.error(`Failed to fetch or process content for CID ${options.fromCid}:`, error);
// Decide how to handle fetch/processing errors
}
}
private static async loadConfigFromDns(options: ConfigLoadOptions & { fromDns: string | boolean }) {
console.debug('Loading config from DNS');
let domain = location.hostname;
if (typeof options.fromDns === 'string') {
domain = options.fromDns;
}
domain = CoercePrefix(domain, '_config.');
try {
console.log(`Attempting DNS lookup for domain: ${domain}`);
const txtData = await dnsLookup(domain, 'TXT');
console.log(`DNS TXT record data found: ${txtData}`);
// Example CID extraction logic (adapt to your TXT record format)
// This looks for IPFS CIDs (v0 'Qm...' or v1 'b...') potentially after 'ipfs://' or '/'
const cidMatch = txtData.match(/(?:ipfs:\/\/|\/|^)([a-zA-Z0-9]{40,})$/);
if (cidMatch && cidMatch[1]) {
options.fromCid = cidMatch[1];
console.log(`Extracted CID from DNS: ${options.fromCid}`);
} else {
console.warn(`Could not extract a valid CID format from DNS TXT data: "${txtData}"`);
}
} catch (error) {
console.error(`DNS lookup for ${domain} failed:`, error);
// Decide if failure is critical or recoverable
}
}
private static handleError(error: any) {
this.onError.next(error);
for (const fnc of this.onErrorFnc) {
try {
fnc(error);
} catch (e: any) {
console.error('Error in onErrorFnc', e);
}
}
}
private static handleRequestError(response: Response) {
this.onRequestError.next(response);
for (const fnc of this.onRequestErrorFnc) {
try {
fnc(response);
} catch (e: any) {
console.error('Error in onRequestErrorFnc', e);
}
}
}
private static async loadConfig<T = any>(url: string, required?: boolean, schema?: AnySchema): Promise<T | null> {
let config: any;
let response: any;
try {
response = await fetch(url);
} catch (error: any) {
const message = `Could not fetch config from '${ url }': ${ error.message }`;
if (required) {
this.handleError(error);
this.showError(message);
throw new Error(message);
} else {
console.warn(message);
return null;
}
}
if (!response.ok) {
let message = `Config request results in non ok response for '${ url }': (${ response.status }) ${ response.statusText }`;
switch (response.status) {
case 404:
message = `Config not found at '${ url }'`;
break;
case 405:
message = `Config service is not started yet. Wait 30s and try again.`;
break;
case 401:
message = `Unauthorized to fetch config from '${ url }'`;
break;
}
if (required) {
this.handleRequestError(response);
this.showError(message);
throw new Error(message);
} else {
console.warn(message);
return null;
}
}
try {
config = await response.json();
} catch (error: any) {
const message = `Could not parse config from '${ url }' to a json object: ${ error.message }`;
if (required) {
this.handleError(error);
this.showError(message);
throw new Error(message);
} else {
console.warn(message);
return null;
}
}
if (schema) {
try {
config = await schema.validateAsync(config);
} catch (error: any) {
const message = `Config from '${ url }' is not valid: ${ error.message }`;
if (required) {
this.handleError(error);
this.showError(message);
throw new Error(message);
} else {
console.warn(message);
return null;
}
}
}
return config;
}
private static LoadConfigDefaultFromUrlParam(param = 'config') {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const configFromParams = {};
for (const configParam of urlParams.getAll('config')) {
try {
const split = configParam.split(';');
if (split.length === 2) {
const keyPath = split[0];
const value = split[1];
SetObjectValue(configFromParams, keyPath, value);
}
} catch (e: any) {
console.warn(`Parsing of url config param failed for '${ configParam }': ${ e.message }`);
}
}
return configFromParams;
}
public static async SideLoad(
url: string,
propertyPath: string,
required?: boolean,
schema?: AnySchema,
): Promise<void> {
if (!this.Config) {
throw new Error('Config side load is only possible after the initial config load.');
}
const config = await this.loadConfig(url, required, schema);
SetObjectValue(this.Config, propertyPath, config);
console.debug(`Side loaded config for '${ propertyPath }' successful`, this.Config);
}
public static Get<T = any, K extends Record<string, any> = Record<string, any>>(
path: string,
defaultValue: T | undefined,
config: Record<string, any>,
): T
public static Get<T = any, K extends Record<string, any> = Record<string, any>>(
path: string,
defaultValue: NoInferType<T>,
config: Record<string, any> = this.Config,
): T {
if (!config) {
throw new Error('config not loaded');
}
let configValue: any = config;
if (typeof path !== 'string') {
throw new Error('The config property path is not a string');
}
for (const fragment of path.split('.')) {
if (configValue && typeof configValue === 'object' && fragment in configValue) {
configValue = configValue[fragment];
} else {
if (defaultValue !== undefined) {
return defaultValue;
}
console.debug(`Config with path '${ path }' not found`);
return undefined as any;
}
}
return configValue;
}
private static showError(message: string) {
const hasUl = document.getElementById('rxap-config-error') !== null;
const ul = document.getElementById('rxap-config-error') ?? document.createElement('ul');
ul.id = 'rxap-config-error';
ul.style.position = 'fixed';
ul.style.bottom = '16px';
ul.style.right = '16px';
ul.style.backgroundColor = 'white';
ul.style.padding = '32px';
ul.style.zIndex = '99999999';
ul.style.color = 'black';
const messageLi = document.createElement('li');
messageLi.innerText = message;
ul.appendChild(messageLi);
const refreshHintLi = document.createElement('li');
refreshHintLi.innerText = 'Please refresh the page to try again.';
ul.appendChild(refreshHintLi);
const autoRefreshHintLi = document.createElement('li');
autoRefreshHintLi.innerText = 'The page will refresh automatically in 30 seconds.';
ul.appendChild(autoRefreshHintLi);
if (!hasUl) {
document.body.appendChild(ul);
}
setTimeout(() => location.reload(), 30000);
}
public setLocalConfig(config: Config): void {
localStorage.setItem(ConfigService.LocalStorageKey, JSON.stringify(config));
}
public clearLocalConfig(): void {
localStorage.removeItem(ConfigService.LocalStorageKey);
}
public get<T = any>(propertyPath: string): T | undefined;
public get<T = any>(propertyPath: string, defaultValue: NoInferType<T>): T;
public get<T = any>(propertyPath: string, defaultValue?: T): T | undefined {
return ConfigService.Get(propertyPath, defaultValue, this.config);
}
public getOrThrow<T = any>(propertyPath: string): T;
public getOrThrow<T = any>(propertyPath: string, defaultValue: NoInferType<T>): T;
public getOrThrow<T = any>(propertyPath: string, defaultValue?: T): T {
const value = ConfigService.Get(propertyPath, defaultValue, this.config);
if (value === undefined) {
throw new Error(`Could not find config in path '${ propertyPath }'`);
}
return value;
}
}
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'interface';
var COMPODOC_CURRENT_PAGE_URL = 'ConfigLoadOptions.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
</body>
</html>