npm - @quietui/squeak - Versions diffs - 1.0.0 - Mend

@quietui/squeak 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/.editorconfig ADDED Viewed

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

package/.prettierignore ADDED Viewed

@@ -0,0 +1,6 @@
+*.md
+.github
+dist
+node_modules
+package-lock.json
+tsconfig.json

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,5 @@
+# Changelog
+## 1.0.0
+- Initial fork

package/LICENSE.md ADDED Viewed

@@ -0,0 +1,7 @@
+Copyright (c) 2024 A Beautiful Site, LLC
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,253 @@
+# Squeak
+Squeak is a tiny, zero-dependency library that provides a [Reactive Controller](https://lit.dev/docs/composition/controllers/) for localizing terms, dates, and numbers, and currency across one or more custom elements in a component library. It _does not_ aim to replicate a full-blown localization tool. For that, you should use something like [i18next](https://www.i18next.com/).
+Reactive Controllers are supported by Lit out of the box, but they're designed to be generic so other libraries can elect to support them either natively or through an adapter. If you're favorite custom element authoring library doesn't support Reactive Controllers yet, consider asking the maintainers to add support for them!
+## Overview
+Here's an example of how Squeak can be used to create a localized custom element with Lit.
+```ts
+import { Localize, registerTranslation } from '@quietui/squeak';
+// Note: translations can also be lazy loaded (see "Registering Translations" below)
+import en from '../translations/en';
+import es from '../translations/es';
+registerTranslation(en, es);
+@customElement('my-element')
+export class MyElement extends LitElement {
+  private localize = new Localize(this);
+  @property() lang: string;
+  render() {
+    return html`
+      <h1>${this.localize.term('hello_world')}</h1>
+    `;
+  }
+}
+```
+To set the page locale, apply the desired `lang` attribute to the `<html>` element.
+```html
+<html lang="es">
+  ...
+</html>
+```
+Changes to `<html lang>` will trigger an update to all localized components automatically.
+## Why use Squeak instead of a proper i18n library?
+It's not uncommon for a custom element to require localization, but implementing it at the component level is challenging. For example, how should we provide a translation for this close button that exists in a custom element's shadow root?
+```html
+#shadow-root
+  <button type="button" aria-label="Close">
+    <svg>...</svg>
+  </button>
+```
+Typically, custom element authors dance around the problem by exposing attributes or properties for such purposes.
+```html
+<my-element close-label="${t('close')}">
+  ...
+</my-element>
+```
+But this approach offloads the problem to the user so they have to provide every term, every time. It also doesn't scale with more complex components that have more than a handful of terms to be translated.
+This is the use case this library is solving for. It is not intended to solve localization at the framework level. There are much better tools for that.
+## How it works
+To achieve this goal, we lean on HTML’s [`lang`](~https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang~) attribute to determine what language should be used. The default locale is specified by `<html lang="...">`, but any localized element can be scoped to a locale by setting its `lang` attribute. This means you can have more than one language per page, if desired.
+```html
+<html lang="en">
+<body>
+  <my-element>This element will be English</my-element>
+  <my-element lang="es">This element will be Spanish</my-element>
+  <my-element lang="fr">This element will be French</my-element>
+</body>
+</html>
+```
+This library provides a set of tools to localize dates, currencies, numbers, and terms in your custom element library with a minimal footprint. Reactivity is achieved with a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) that listens for `lang` changes on `<html>`.
+By design, `lang` attributes on ancestor elements are ignored. This is for performance reasons, as there isn't an efficient way to detect the "current language" of an arbitrary element. I consider this a gap in the platform and [I've proposed properties](https://github.com/whatwg/html/issues/7039) to make this lookup less expensive.
+Fortunately, the majority of use cases appear to favor a single language per page. However, multiple languages per page are also supported, but you'll need to explicitly set the `lang` attribute on all components whose language differs from the one set in `<html lang>`.
+## Usage
+First, install the library.
+```bash
+npm install @quietui/squeak
+```
+Next, follow these steps to localize your components.
+1. Create a translation
+2. Register the translation
+3. Localize your components
+### Creating a translation
+All translations must extend the `Translation` type and implement the required meta properties (denoted by a `$` prefix). Additional terms can be implemented as show below.
+```ts
+// en.ts
+import type { Translation } from '@quietui/squeak';
+const translation: Translation = {
+  $code: 'en',
+  $name: 'English',
+  $dir: 'ltr',
+  // Simple terms
+  upload: 'Upload',
+  // Terms with placeholders
+  greetUser: (name: string) => `Hello, ${name}!`,
+  // Plurals
+  numFilesSelected: (count: number) => {
+    if (count === 0) return 'No files selected';
+    if (count === 1) return '1 file selected';
+    return `${count} files selected`;
+  }
+};
+export default translation;
+```
+### Registering translations
+Once you've created a translation, you need to register it before use. The first translation you register should be the default translation. The default translation acts as a fallback in case a term can't be found in another translation. As such, the default translation should be assumed to be complete at all times.
+```ts
+import { registerDefaultTranslation } from '@quietui/squeak';
+import en from './en.js';
+registerDefaultTranslation(en);
+```
+To register additional translations, call the `registerTranslation()` method. This example imports and register two more translations up front.
+```ts
+import { registerTranslation } from '@quietui/squeak';
+import es from './es.js';
+import ru from './ru.js';
+registerTranslation(es, ru);
+```
+Translations registered with country codes such as `en-gb` are also supported. For example, if the user's language is set to _German (Austria)_, or `de-at`, the localizer will first look for a translation registered as `de-at` and then fall back to `de`. Thus, it's a good idea to register a base translation (e.g. `de`) to accompany those with country codes (e.g. `de-*`). This ensures users of unsupported regions will still receive a comprehensible translation.
+#### Dynamic registrations
+It's important to note that translations _do not_ have to be registered up front. You can register them on demand as the language changes in your app. Upon registration, localized components will update automatically.
+Here's a sample function that dynamically loads a translation.
+```ts
+import { registerTranslation } from '@quietui/squeak';
+async function changeLanguage(lang) {
+  const availableTranslations = ['en', 'es', 'fr', 'de'];
+  if (availableTranslations.includes(lang)) {
+    const translation = await import(`/path/to/translations/${lang}.js`);
+    registerTranslation(translation);
+  }
+}
+```
+### Localizing components
+You can use Squeak with any library that supports [Lit's Reactive Controller pattern](https://lit.dev/docs/composition/controllers/). In Lit, a localized custom element will look something like this.
+```ts
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Localize } from '@quietui/squeak/dist/lit.js';
+@customElement('my-element')
+export class MyElement extends LitElement {
+  private localize = new Localize(this);
+  // Make sure to make `dir` and `lang` reactive so the component will respond to changes to its own attributes
+  @property() dir: string;
+  @property() lang: string;
+  render() {
+    return html`
+      <!-- Terms -->
+      ${this.localize.term('hello')}
+      <!-- Numbers/currency -->
+      ${this.localize.number(1000, { style: 'currency', currency: 'USD'})}
+      <!-- Dates -->
+      ${this.localize.date('2021-09-15 14:00:00 ET'), { month: 'long', day: 'numeric', year: 'numeric' }}
+      <!-- Relative times -->
+      ${this.localize.relativeTime(2, 'day'), { style: 'short' }}
+      <!-- Determining language -->
+      ${this.localize.lang()}
+      <!-- Determining directionality, e.g. 'ltr' or 'rtl' -->
+      ${this.localize.dir()}
+    `;
+  }
+}
+```
+### Other methods
+- `this.localize.exists()` - Determines if the specified term exists, optionally checking the default translation.
+- `this.localize.update()` - Forces all localized components to update. Most users won't ever need to call this.
+## Typed translations and arguments
+Because translations are defined by the user, there's no way for TypeScript to automatically know about the terms you've defined. This means you won't get strongly typed arguments when calling `this.localize.term()`. However, you can solve this by extending `Translation` and `Localize`.
+In a separate file, e.g. `my-localize.ts`, add the following code.
+```ts
+import { Localize as DefaultLocalize } from '@quietui/squeak';
+// Extend the default controller with your custom translation
+export class Localize extends DefaultLocalize<MyTranslation> {}
+// Export `registerTranslation` so you can import everything from this file
+export { registerTranslation } from '@quietui/squeak';
+// Define your translation terms here
+export interface MyTranslation extends Translation {
+  myTerm: string;
+  myOtherTerm: string;
+  myTermWithArgs: (count: string) => string;
+}
+```
+Now you can import `MyLocalize` and get strongly typed translations when you use `this.localize.term()`!
+## Advantages
+- Zero dependencies
+- Extremely lightweight
+- Supports simple terms, plurals, and complex translations
+- Supports dates, numbers, and currencies using built-in [`Intl` APIs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+- Good DX for custom element authors and consumers
+  - Intuitive API for custom element authors
+  - Consumers only need to load the translations they want and set the `lang` attribute
+- Translations can be loaded up front or on demand

package/RELEASE.md ADDED Viewed

@@ -0,0 +1,8 @@
+# Release
+This package gets published from the root folder. To release:
+```bash
+npm version major|minor|patch
+npm publish
+```

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
+export interface Translation {
+    $code: string;
+    $name: string;
+    $dir: 'ltr' | 'rtl';
+}
+export interface ExistsOptions {
+    lang: string;
+    includeDefault: boolean;
+}
+export declare function registerDefaultTranslation(translation: Translation): void;
+export declare function registerTranslation(...translation: Translation[]): void;
+export declare function update(): void;
+export declare class Localize<UserTranslation extends Translation> implements ReactiveController {
+    host: ReactiveControllerHost & HTMLElement;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    dir(): string;
+    lang(): string;
+    private getTranslationData;
+    exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean;
+    term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string;
+    date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string;
+    number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string;
+    relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string;
+}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,105 @@
+const connectedElements = new Set();
+const documentElementObserver = new MutationObserver(update);
+const translations = new Map();
+let documentDirection = document.documentElement.dir || 'ltr';
+let documentLanguage = document.documentElement.lang || navigator.language;
+let defaultTranslation;
+documentElementObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['dir', 'lang']
+});
+export function registerDefaultTranslation(translation) {
+    defaultTranslation = translation;
+    update();
+}
+export function registerTranslation(...translation) {
+    translation.map(t => {
+        const code = t.$code.toLowerCase();
+        if (translations.has(code)) {
+            translations.set(code, Object.assign(Object.assign({}, translations.get(code)), t));
+        }
+        else {
+            translations.set(code, t);
+        }
+    });
+    update();
+}
+export function update() {
+    documentDirection = document.documentElement.dir || 'ltr';
+    documentLanguage = document.documentElement.lang || navigator.language;
+    [...connectedElements.keys()].map((el) => {
+        if (typeof el.requestUpdate === 'function') {
+            el.requestUpdate();
+        }
+    });
+}
+export class Localize {
+    constructor(host) {
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        connectedElements.add(this.host);
+    }
+    hostDisconnected() {
+        connectedElements.delete(this.host);
+    }
+    dir() {
+        return `${this.host.dir || documentDirection}`.toLowerCase();
+    }
+    lang() {
+        return `${this.host.lang || documentLanguage}`.toLowerCase();
+    }
+    getTranslationData(lang) {
+        var _a, _b;
+        const locale = new Intl.Locale(lang.replace(/_/g, '-'));
+        const language = locale === null || locale === void 0 ? void 0 : locale.language.toLowerCase();
+        const region = (_b = (_a = locale === null || locale === void 0 ? void 0 : locale.region) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : '';
+        const primary = translations.get(`${language}-${region}`);
+        const secondary = translations.get(language);
+        return { locale, language, region, primary, secondary };
+    }
+    exists(key, options) {
+        var _a;
+        const { primary, secondary } = this.getTranslationData((_a = options.lang) !== null && _a !== void 0 ? _a : this.lang());
+        options = Object.assign({ includeDefault: false }, options);
+        if ((primary && primary[key]) ||
+            (secondary && secondary[key]) ||
+            (options.includeDefault && defaultTranslation && defaultTranslation[key])) {
+            return true;
+        }
+        return false;
+    }
+    term(key, ...args) {
+        const { primary, secondary } = this.getTranslationData(this.lang());
+        let term;
+        if (primary && primary[key]) {
+            term = primary[key];
+        }
+        else if (secondary && secondary[key]) {
+            term = secondary[key];
+        }
+        else if (defaultTranslation && defaultTranslation[key]) {
+            term = defaultTranslation[key];
+        }
+        else {
+            console.error(`No translation found for: ${String(key)}`);
+            return String(key);
+        }
+        if (typeof term === 'function') {
+            return term(...args);
+        }
+        return term;
+    }
+    date(dateToFormat, options) {
+        dateToFormat = new Date(dateToFormat);
+        return new Intl.DateTimeFormat(this.lang(), options).format(dateToFormat);
+    }
+    number(numberToFormat, options) {
+        numberToFormat = Number(numberToFormat);
+        return isNaN(numberToFormat) ? '' : new Intl.NumberFormat(this.lang(), options).format(numberToFormat);
+    }
+    relativeTime(value, unit, options) {
+        return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
+    }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "name": "@quietui/squeak",
+  "version": "1.0.0",
+  "description": "A tiny, zero-dependency library that provides a Reactive Controller for localizing terms, dates, and numbers, and currency across one or more custom elements in a component library.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "tsc -w",
+    "build": "tsc",
+    "clean": "node ./scripts/clean.js",
+    "prebuild": "npm run clean",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/quietui/squeak.git"
+  },
+  "keywords": [
+    "web components",
+    "custom elements",
+    "localization",
+    "internationalization",
+    "i18n",
+    "l10n"
+  ],
+  "author": "Cory LaViska",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/quietui/squeak/issues"
+  },
+  "homepage": "https://github.com/quietui/squeak#readme",
+  "devDependencies": {
+    "del": "^7.1.0",
+    "lit": "^3.1.2",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.3"
+  }
+}

package/prettier.config.js ADDED Viewed

@@ -0,0 +1,18 @@
+/** @type {import("prettier").Config} */
+export default {
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  htmlWhitespaceSensitivity: 'css',
+  insertPragma: false,
+  bracketSameLine: false,
+  jsxSingleQuote: false,
+  printWidth: 120,
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'none',
+  useTabs: false
+};

package/scripts/clean.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { deleteSync } from 'del';
+deleteSync('./dist');

package/src/index.ts ADDED Viewed

@@ -0,0 +1,186 @@
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+export type FunctionParams<T> = T extends (...args: infer U) => string ? U : [];
+export interface Translation {
+  $code: string; // e.g. en, en-GB
+  $name: string; // e.g. English, Español
+  $dir: 'ltr' | 'rtl';
+}
+export interface ExistsOptions {
+  lang: string;
+  includeDefault: boolean;
+}
+const connectedElements = new Set<HTMLElement>();
+const documentElementObserver = new MutationObserver(update);
+const translations: Map<string, Translation> = new Map();
+let documentDirection = document.documentElement.dir || 'ltr';
+let documentLanguage = document.documentElement.lang || navigator.language;
+let defaultTranslation: Translation;
+// Watch for changes on <html lang>
+documentElementObserver.observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ['dir', 'lang']
+});
+/** Registers the default (fallback) translation. */
+export function registerDefaultTranslation(translation: Translation) {
+  defaultTranslation = translation;
+  update();
+}
+/** Registers one or more translations */
+export function registerTranslation(...translation: Translation[]) {
+  translation.map(t => {
+    const code = t.$code.toLowerCase();
+    if (translations.has(code)) {
+      // Merge translations that share the same language code
+      translations.set(code, { ...translations.get(code), ...t });
+    } else {
+      translations.set(code, t);
+    }
+  });
+  update();
+}
+/** Updates all localized elements that are currently connected */
+export function update() {
+  documentDirection = document.documentElement.dir || 'ltr';
+  documentLanguage = document.documentElement.lang || navigator.language;
+  [...connectedElements.keys()].map((el: LitElement) => {
+    if (typeof el.requestUpdate === 'function') {
+      el.requestUpdate();
+    }
+  });
+}
+/**
+ * Localize Reactive Controller for components built with Lit
+ *
+ * To use this controller, import the class and instantiate it in a custom element constructor:
+ *
+ * private localize = new Localize(this);
+ *
+ * This will add the element to the set and make it respond to changes to <html dir|lang> automatically. To make it
+ * respond to changes to its own dir|lang properties, make it a property:
+ *
+ *   @property() dir: string;
+ *   @property() lang: string;
+ *
+ * To use a translation method, call it like this:
+ *
+ *   ${this.localize.term('term_key_here')}
+ *   ${this.localize.date('2021-12-03')}
+ *   ${this.localize.number(1000000)}
+ */
+export class Localize<UserTranslation extends Translation> implements ReactiveController {
+  host: ReactiveControllerHost & HTMLElement;
+  constructor(host: ReactiveControllerHost & HTMLElement) {
+    this.host = host;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    connectedElements.add(this.host);
+  }
+  hostDisconnected() {
+    connectedElements.delete(this.host);
+  }
+  /**
+   * Gets the host element's directionality as determined by the `dir` attribute. The return value is transformed to
+   * lowercase.
+   */
+  dir() {
+    return `${this.host.dir || documentDirection}`.toLowerCase();
+  }
+  /**
+   * Gets the host element's language as determined by the `lang` attribute. The return value is transformed to
+   * lowercase.
+   */
+  lang() {
+    return `${this.host.lang || documentLanguage}`.toLowerCase();
+  }
+  private getTranslationData(lang: string) {
+    // Convert "en_US" to "en-US". Note that both underscores and dashes are allowed per spec, but underscores result in
+    // a RangeError by the call to `new Intl.Locale()`. See: https://unicode.org/reports/tr35/#unicode-locale-identifier
+    const locale = new Intl.Locale(lang.replace(/_/g, '-'));
+    const language = locale?.language.toLowerCase();
+    const region = locale?.region?.toLowerCase() ?? '';
+    const primary = <UserTranslation>translations.get(`${language}-${region}`);
+    const secondary = <UserTranslation>translations.get(language);
+    return { locale, language, region, primary, secondary };
+  }
+  /** Determines if the specified term exists, optionally checking the default translation. */
+  exists<K extends keyof UserTranslation>(key: K, options: Partial<ExistsOptions>): boolean {
+    const { primary, secondary } = this.getTranslationData(options.lang ?? this.lang());
+    options = {
+      includeDefault: false,
+      ...options
+    };
+    if (
+      (primary && primary[key]) ||
+      (secondary && secondary[key]) ||
+      (options.includeDefault && defaultTranslation && defaultTranslation[key as keyof Translation])
+    ) {
+      return true;
+    }
+    return false;
+  }
+  /** Outputs a translated term. */
+  term<K extends keyof UserTranslation>(key: K, ...args: FunctionParams<UserTranslation[K]>): string {
+    const { primary, secondary } = this.getTranslationData(this.lang());
+    let term: any;
+    // Look for a matching term using regionCode, code, then fallback to the default
+    if (primary && primary[key]) {
+      term = primary[key];
+    } else if (secondary && secondary[key]) {
+      term = secondary[key];
+    } else if (defaultTranslation && defaultTranslation[key as keyof Translation]) {
+      term = defaultTranslation[key as keyof Translation];
+    } else {
+      console.error(`No translation found for: ${String(key)}`);
+      return String(key);
+    }
+    if (typeof term === 'function') {
+      return term(...args) as string;
+    }
+    return term;
+  }
+  /** Outputs a localized date in the specified format. */
+  date(dateToFormat: Date | string, options?: Intl.DateTimeFormatOptions): string {
+    dateToFormat = new Date(dateToFormat);
+    return new Intl.DateTimeFormat(this.lang(), options).format(dateToFormat);
+  }
+  /** Outputs a localized number in the specified format. */
+  number(numberToFormat: number | string, options?: Intl.NumberFormatOptions): string {
+    numberToFormat = Number(numberToFormat);
+    return isNaN(numberToFormat) ? '' : new Intl.NumberFormat(this.lang(), options).format(numberToFormat);
+  }
+  /** Outputs a localized time in relative format. */
+  relativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions): string {
+    return new Intl.RelativeTimeFormat(this.lang(), options).format(value, unit);
+  }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    /* Basic Options */
+    // "incremental": true                    /* Enable incremental compilation */,
+    "target": "es2017"                        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "es2015"                        /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [                                  /* Specify library files to be included in the compilation. */
+      "dom",
+      "dom.Iterable",
+      "es2020"
+    ],
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true                       /* Generates corresponding '.d.ts' file. */,
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true                      /* Generates corresponding '.map' file. */,
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./dist"                        /* Redirect output structure to the directory. */,
+    "rootDir": "./src"                        /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    // "strict": true,                        /* Enable all strict type-checking options. */
+    "noImplicitAny": true                     /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true                  /* Enable strict null checks. */,
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    "noUnusedLocals": true                    /* Report errors on unused locals. */,
+    "noUnusedParameters": true                /* Report errors on unused parameters. */,
+    "noImplicitReturns": true                 /* Report error when not all code paths in function return a value. */,
+    "noFallthroughCasesInSwitch": true        /* Report errors for fallthrough cases in switch statement. */,
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+    /* Module Resolution Options */
+    "moduleResolution": "node"                /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    "experimentalDecorators": true,           /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "removeComments": true,
+    "skipLibCheck": true                      /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}