Genesis Foundation Web Core

foundation-web-core re-exports FAST classes.

API Docs

Installation

npm i @genesislcap/foundation-web-core

Features

Re-exported FAST Packages

This package re-exports the following Microsoft FAST packages:

• fast-colors: Provides color utilities and color system support.
• fast-components: Collection of web components designed according to the FAST Design System.
• fast-element: Lightweight base class for creating custom elements.
• fast-foundation: Provides foundational behaviors and utilities for web components.
• fast-router: Router implementation for single-page applications.
• fast-web-utilities: Collection of utility functions for web component development.

Directives

Additionally, this package exports a directives folder containing the following files:

• sync.ts: Implementation of a directive for synchronous data binding.
• when-else.ts: Implementation of a directive for conditional rendering using whenElse clause.

Usage

To utilize the features provided by this package, you can import @genesislcap/foundation-web-core.

import { css, customElement, FASTElement, html, sync } from '@genesislcap/foundation-web-core';

@customElement({
  name: 'my-custom-element',
  template: html`
    <other-custom-element
      value="${sync((x) => x.syncedValue)}"
    ></other-custom-element>
  `,
  styles: css`
    :host {
      ...
    }
  `,
})
export class MyCustomElement extends FASTElement { 
  ...
}

License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.

Licensed components

Genesis low-code platform