@furo/precompiled NPM

@furo/precompiled

The @furo/precompiled is for those who want to use the furo componetnt directly in HTML. There is no build step needed. It is a convenient way to use the components to prototype some ideas or just play around with FBP without a complex installation procedure. When you know that your ideas work, transfer them 1:1 to a web component, so others can install, use and extend them.

Warning This package was created teach furo FBP and for creating our demo systems , so we can use and show our components in a HUGO generated page. Some of the files are very big at the moment, because they are not optimized yet.

Demo

Run npm run stard-cdn-sample to start the cdn based sample.

Installation

The version of this package represents the versioning of @furo/collection.

Note Keep in mind that you can not mix CDN , NPM and self builded variants of the installation.

CDN

You can use the components by refering to them via the CDN. This is good when your project is public and your server is slower then the CDN.

<script type="module" src="/config/init.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.7.0/dist/furo-fbp.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.7.0/dist/framework.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.7.0/dist/layout.js"></script>

NPM

When your clients are in a closed environment and can not reach the real internet, prefer this variant. All files are delivered from your servers.

npm i -S @furo/precompiled

Build by your self and using `/dist`

When you need some other components, which are not installable as precompiled versions. Or you want to add your own components or compositions, you can clone this repository and extend it by your own component, or the installed components.

Make sure that they are referenced by collection.js via a file that represents your package. You can also add it as an entry point in the rollup.config.js.

You can copy the /dist folder to your project or make it available for your projects on some other way. Do this by pushing them to npm or by serving them via your CDN.

This kind of installation is only one step away from a set up with open wc and working with web dev server, which do not need a build step during the development phase. Consider to switch to this variant if your project gains complexity.

Usage

To use the components you have to load the package where they reside in. You will notice, that some components have their own js file. This is because they are used from different packages and is needed to keep a clean dependeny tree. It is ok to load this components directly, when you do not need something other, or load the package where they reside. It has no side effect if load them twice. Your browser knows what it have to do.

<script type="module" src="/config/init.js"></script>
<script type="module" src="/node_modules/@furo/precompiled/dist/furo-fbp.js"></script>
<script type="module" src="/node_modules/@furo/precompiled/dist/framework.js"></script>

<script type="module" src="/node_modules/@furo/precompiled/dist/layout.js"></script>

The init file optional

When you want to use the data components you have to install the specs that you have gerated with furo. This is a good place to do it. Maybe you want to set the locales or install your translations too.

To load the init.js from your page, do the following in your index.html.

Load the init.js before you load the other packages. Because some of them are dependant to the settings you do in the init and some will switch to a default setup.

index.html

 <!-- init is needed because we use data components -->
  <script type="module" src="/config/init.js"></script>
  <script type="module" src="dist/furo-fbp.js"></script>

/config/init.js

import { Init, i18n,  Env } from '/dist/framework.js'
import {Types,Services} from "./data_environment.js";

/**
 * Register resource bundle i18n
 */
import { Translations } from './translations.js';
i18n.registerResBundle(Translations);

/**
 * Register the types and services which was generated by furo
 */
Init.registerApiTypes(Types);
Init.registerApiServices(Services);

/**
 * register the API prefix based on the APPROOT.
 * This information is used for furo-deep-link and furo-reverse-deep-link to resolve the api address.
 *
 * We use /api here, because we do not have a dedicated host like api.xxx.com for the api services
 * @type {string}
 */
Env.api.prefix = `/api`;
Init.applyCustomApiPrefixToServicesAndTypes(Env.api.prefix);


/**
 * Translate static messages in SPEC
 */
let locale = 'de_ch';
if (i18n.resbundle[Env.locale.toLowerCase().replace('-', '_')]) {
  locale = Env.locale.toLowerCase().replace('-', '_');
}
Init.translateStaticTypeMessages(locale);

Compatibility Table

compat

Package Structure

The packages structured and named like the modules from components.furo.pro. This module contains some additional files like DOMFBP.js which is needed when you want the fbp features on <body>.

Addtional files:

fixed-tooltip-display.js Tooltip display for pages which scrolls the hole page.
DOMFBP.js Append FPB to any dom node, even body
light-bulb.js A nice example component used in the docs
ui5DisplayRegistry.js A UI5 display registry for the dynamic type renderers.
ui5Icons.js The complete iconset, because we can not expose them individually (sorry)

collection.js

This file contains the full set of the precompiled package and is huge.

Elements

furo-app-bar-top Toolbar to place on top
furo-app-drawer Application drawer
furo-card Material design card element
furo-loading-indicator-bar An ugly progress bar
furo-tooltip displays a tooltip
furo-tooltip-display helper component for tooltip

config.js

Furo config components

Elements

furo-config access config data
furo-config-loader load config files

data.js

This package contains the furo data components.

Elements

furo-api-fetch fetch data from network
furo-collection-agent interface component to handle collection requests
furo-custom-method interface component to handle custom methods
furo-data-object Typed data object, the heart of all furo-data related components
furo-deep-link Resolve deep links HATEOAS based on query params
furo-entity-agent interface component to handle entity requests
furo-rel-exists checks for a specific rel in links
furo-reverse-deep-link create query param object from HATEOAS
furo-sortby-container create query param object for sort
...

Elements

furo-data-bool-icon Displays a icon/symbol for a boolean value
furo-data-checkbox-input binds to a furo data checkbox input element
furo-data-collection-dropdown bindable dropdown
furo-data-color-input Binds a entityObject field to a furo-color-input field
furo-data-date-input Bind a entityObject.field to a date input
furo-data-display Displays a data field
furo-data-file-input Binds a entityObject field to a furo-file-input field
furo-data-money-input Binds a entityObject field google.type.Money to a furo-number-input and currency dropdown fields
furo-data-number-input Bind a entityObject.field to a number input
furo-data-password-input Bind a entityObject.field to a password input
furo-data-property display and bind types of type any
furo-data-property-display helper for furo-data-property
furo-data-radio-buton-input furo data radio-button input element
furo-data-range-input Bind a entityObject.field to a range input
furo-data-reference-search autocomplete searcher for referenced types
furo-data-repeat automatic display of repeated fields
furo-data-search-input Bind a entityObject.field to a search input
furo-data-sign-pad Bind a entityObject.field to a sign-pad input
furo-data-text-input Bind a entityObject.field to a text input
furo-data-textarea-input Bind a entityObject.field to a textarea input
furo-data-time-input Bind a entityObject.field to a time input
...