@fjaasno/design NPM

Designkomponenter

Noen enkle designkomponenter for å starte med custom elements.

Generelt rundt PWA

Trenger å installere følgende:

npm install workbox-precaching
npm install --save-dev workbox-cli

fjaas-pwa

Gir en spesifikk dialog for om man vil oppdatere PWA-en eller ikke. I første omgang er det kun en dialog, men på sikt ser jeg for meg at denne tar seg av alt rundt å snakke med SW i forbindelse med oppdatering.

Bruk

Det er litt innfløkt, men jeg ser i første omgang for meg tre scenarioer:

A) Kun TypeScript med Parcel eller lignende
B) Bruk av Angular
C) Laste ned via CDN

A) I moderne nettlesere og ved bruk av bundlere

Bruk denne: https://stenciljs.com/docs/custom-elements. Da kan man i koden enten velge kun de man vil bruke:

import { FjaasPwa } from '@fjaasno/design/dist/custom-elements';
customElements.define('fjaas-pwa', FjaasPwa);

eller alle på en gang:

import { defineCustomElements } from '@fjaasno/design/dist/custom-elements';
defineCustomElements();

B) Ved bruk av rammeverk

Angular (https://stenciljs.com/docs/angular)

app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
...
@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

main.ts

import { defineCustomElements } from '@fjaasno/design/loader';
...
defineCustomElements();

C) CDN

Direkte via CDN (https://stenciljs.com/docs/javascript) En av disse (med eller uten eksplisitt versjon):

<script type="module" src="https://cdn.jsdelivr.net/npm/@fjaasno/design/dist/design/design.esm.js"></script>
<script nomodule="" src="https://cdn.jsdelivr.net/npm/@fjaasno/design/dist/design/design.js"></script>

<script type="module" src="https://cdn.jsdelivr.net/npm/@fjaasno/design@0.2.6/dist/design/design.esm.js"></script>
<script nomodule="" src="https://cdn.jsdelivr.net/npm/@fjaasno/design@0.2.6/dist/design/design.js"></script>