DEV Community: sil-vio

How to Create a Web Component in Svelte

sil-vio — Sun, 05 Jan 2020 09:55:25 +0000

In this article we will see how to create a web components using the Svelte framework.
Before we start writing the code, let's first see what a web components is.

Intro to Web Components

Web components are a set of web platform APIs that allow you to create new custom, reusable and encapsulated HTML tags for use in web pages and web apps. Custom components and widgets are based on web component standards, work on modern browsers and they can be used with any HTML-compatible JavaScript library or framework.

Web components are based on four main specifications:

Custom Elements

Custom elements provide a way to build own fully-featured DOM elements. By defining a custom element, authors can inform the parser how to properly construct an element and how elements of that class should react to changes. Custom elements contain their own semantics, behaviors, markup and can be shared across frameworks and browsers.

Shadow DOM

The shadow DOM specification defines how to use encapsulated style and markup in web components. Being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash.

ES Modules

The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way. The JavaScript specification defines a syntax for modules, as well as some host-agnostic parts of their processing model. The specification defines the rest of their processing model: how the module system is bootstrapped, via the script element with type attribute set to "module", and how modules are fetched, resolved, and executed

HTML Template

The HTML template element specification defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.

Web Components technology can be used independently or collectively.

How do I use a web component?

Using a web components is very simple. For example, it is possible to use the component present in the library of web components released from polymer, such as the following component:

https://www.webcomponents.org/element/@polymer/paper-button

Starting from a simple web page:

<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
  </head>
  <body>
      <h1>Test Page</h1>
      <p>This is an example paragraph.</p>
  </body>
</html>

It's possible to import the script that contains the web components to start using the library component as if this were a simple html element.

<html>
  <head>
    <title>This is the title of the webpage!</title>
    <script type="module" src="https://npm-demos.appspot.com/@polymer/paper-button@3.0.1/paper-button.js?@polymer/paper-button@3.0.1"></script>
  </head>
  <body>
      <h1>Test Page</h1>
      <p>This is an example paragraph.</p>
      <paper-button raised class="indigo">button</paper-button>
  </body>
</html>

What is Svelte?

Svelte is a JavaScript framework written by Rich Harris. Svelte applications do not include framework references.
Whereas traditional frameworks like React, Vue or Angular do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.
Svelte generates code to manipulate the DOM, which may give better client run-time performance.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.

Introducing Svelte: Frameworks without the framework

How to make a simple svelte web applications

To create a new svelte project we can start from the official template https://github.com/sveltejs/template.

To create a new project in the my-svelte-project directory, install its dependencies, and start a server you can type the following commands:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

By accessing the url http://localhost:5000 you will see the hello-world web app.

For this example we will create a clock component, you can copy the content of the file app.svelte from this link: https://svelte.dev/examples#clock.

Compiling to a custom elements (aka web components)

Svelte components can also be compiled to custom elements (aka web components) using the customElement: true compiler option. You should specify a tag name for the component using the svelte:options element.

<svelte:options tag="my-element">

By default custom elements are compiled with accessors: true, which means that any props are exposed as properties of the DOM element. To prevent this, add accessors={false} to svelte:options.

To build to custom element we must:

add customElement: true, to the rollup.config.js file:

    plugins: [
        svelte({
            customElement: true,

add in App.svelte

<svelte:options tag="svelte-clock">

In case you not define this svelte:option the compiler will warning you with the following message

svelte plugin: No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/

run "npm run build"

During development (npm run dev), live reloading will be enabled. This means that any changes made to your custom-element or the HTML will be immediately reflected in the browser.

Once the web components is ready we can run “npm run build” which will compile a minified, production-ready version of your custom element in the public/bundle.js file.
The compiler will take care of creating the Shadow DOM, applying attributes/properties, and defining your custom element.

To test the web components created we can utilize the http-server.
To install we can execute the following command:

npm install http-server -g

Then we can create in the public directory the index.html, importing the bundle.js and declaring the custom element “svelte-clock”:

<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
    <script src="bundle.js"></script>
  </head>
  <body>
      <h1>Test Page</h1>
      <p>This is an example paragraph.</p>
      <svelte-clock/>
  </body>
</html>

Executing the following command we can see the components in action:

> http-server -p 8080 -c-1 public/
Starting up http-server, serving public/
Available on:
  http://127.0.0.1:8080

Svelte Web Components: Conclusion

Properties

Any props that your custom element accepts will automatically be transformed to element attributes at compile time. It is recommended to stick with lowercase attribute names as naming conventions like camelCase or PascalCase will not work in HTML.

To test we can add a simple properties to the custom element.

<script>
    ...
    export let clocktitle = "Svelte Clock"
    ...
</script>
...
<h1>{clocktitle}</h1>
...

In our index.html we can now set the value

<svelte-clock clocktitle="My Clock"></svelte-clock>

Events

Custom events emitted from within a Svelte 3 wrapped as a web-component do not bubble up to the web-component itself as normal DOM events (the custom event by default does not go past the boundaries of the shadowDom) and can not be handled in the usual manner within the template.

<svelte-clock custom-event="handler()">

Events are not emitted from components compiled to a custom element #3119

vogloblinsky posted on Jun 26, 2019

The native Svelte syntax for listening events on:mycustomevent doesn't works with events dispatched by a Svelte component exported to Custom Element.

Here is a reproduction repository :

https://github.com/vogloblinsky/svelte-3-wc-debug

svelte3-raw

Example using just Svelte syntax. Inner component dispatch a custom event 'message'. App component listen to it using on:message

It works !

//Inner.svelte
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sayHello() {
        console.log('sayHello in child: ', 'Hello!');
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>

//App.svelte
<script>
    import Inner from './Inner.svelte';

    function handleMessage(event) {
        console.log('handleMessage in parent: ', event.detail.text);
    }
</script>

<Inner on:message={handleMessage}/>

svelte3-wc

Example using just Svelte syntax and exporting component to Web Components. Inner component dispatch a custom event 'message'. App component listen to it using on:message

Same syntax doesn't work.

//Inner.svelte
<svelte:options tag="inner-btn"/>
<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    function sayHello() {
        console.log('sayHello in child: ', 'Hello!');
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>

<button on:click={sayHello}>
    Click to say hello
</button>

//App.svelte
<svelte:options tag="my-app" />
<script>
    import Inner from './Inner.svelte';

    function handleMessage(event) {
        console.log('handleMessage in parent: ', event.detail.text);
    }
</script>

<inner-btn on:message={handleMessage}/>

Vanilla JS works fine in public/index.html

const button = document
                    .querySelector('my-app')
                    .shadowRoot.querySelector('inner-btn');

                button.$on('message', e => {
                    console.log('handleMessage in page');
                });

View on GitHub

To make it cross the boundaries of shadowDom we have to create a Custom Event as mentioned in the v2 docs for svelte. Custom events can be created in your Svelte component using the CustomEvent api. After defining a custom event, you can dispatch that event by calling this.dispatchEvent(event) in response to changes in your component.
Custom events cannot be dispatched in response to lifecycle methods. For instance, if you try to dispatch a custom event in your onMount lifecycle method, your event will not be dispatched.

To add a events we can add a button:

<button on:click="{dispatchSavedDateEvent}">Save Date</button>

when is clicked we can emit a custom event:

function dispatchSavedDateEvent(e) {
   console.log("[dispatchSecondIsElapsedEvent] time: ", time);
   // 1. Create the custom event.
   const event = new CustomEvent("savedData", {
     detail: time,
     bubbles: true,
     cancelable: true,
     composed: true // makes the event jump shadow DOM boundary
   });

   // 2. Dispatch the custom event.
   this.dispatchEvent(event);
 }

The read-only composed property of the Event interface returns a Boolean which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM.

An alternative method is to utilize createEventDispatcher

import { createEventDispatcher } from 'svelte'; 
const dispatch = createEventDispatcher();
...
dispatch('second', {
       text: '10 seconds elapsed!'
     });
...

In the index.html we must subscribe to the new event in the following way:

document.querySelector('svelte-clock')
    .$on('second', (e) => { console.log("[index.html][second]", e)})

Imports

To import Svelte components we must declare each nested elements with the tag

<svelte:option tag="my-nested-element”>

Declaring child components as custom elements, these elements are also available to the consumer.
The nested element use the same Shadow DOM as the parent, there is no way to set the Shadow DOM mode to "closed" for the nested element.

The main advantage in using Svelte.js for creating web components is that the final component has very small dimensions. In our small example the web component packaged in the bundle.js weighs only 7170 bytes, dimensions that if compared with web components created by other frameworks make our web components tens of times smaller and faster to be executed by the browser.

How to make a PWA in Angular

sil-vio — Thu, 26 Dec 2019 20:10:23 +0000

Progressive Web App

A Progressive Web App (PWA) is a web application that uses modern Web features to offer users an experience very similar to a native app.

Unlike traditional web apps, progressive web apps are a hybrid between regular web pages and mobile applications. The term "progressive" refers to the fact that initially they are perceived as normal websites but progressively behave more and more like cross-platform mobile apps.

The basic technical criteria for a site to be considered a Progressive Web App by the browser are:

They are hosted in HTTPS;
They can be loaded and executed even while the user's device is offline. To obtain this functionality, Progressive Web Apps require Service Workers;
We have a reference Web App Manifest with at least four key properties: name, short_name, start_url, and display.
Have an icon at least 144 × 144 pixels in png format.

Manifest e Service Workers

The browser features that allow normal websites to become PWAs are the "manifest" and the "service workers".

Manifest

It is a simple JSON file that defines the basic parameters of the PWA, to control how the app should look to the user and define its appearance at launch: icons, other basic features such as colors, fonts, screen orientation and possibility of being installed on the home screen.

Service Workers

Technically, Service Workers provide a network proxy implemented as JavaScript script in the web browser to manage web / HTTP requests programmatically. Service workers are interposed between the network connection and the terminal providing the content. They are able to use cache mechanisms efficiently and allow error-free behavior during long periods of offline use.
Today, SWs already include features such as push notifications and background sync. The main function is the ability to intercept and manage network requests, including programmatic management of a response cache. It is an API that allows you to support offline experiences by giving developers complete control of the experience.

App Shell

For fast loading, service workers store the basic interface or "shell" of the web application in Responsive Web Design mode. This shell provides an initial static frame, layout or architecture in which content can be loaded both progressively and dynamically, allowing users to interact with the app despite the different levels of connection quality they have. Technically, the shell is a code that is stored locally in the mobile terminal browser cache.

Angular & PWA

To create a PWA in Angular we must first create a normal web application. To do this we have to create a new project through the CLI provided by Angular.

To install the cli you can run the following command:

~$ npm install -g @angular/cli

Once installed you can check the version:

~$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.21
Node: 13.3.0
OS: linux x64

To create a new application, called my-pwa, you need to run the following command:

$ ng new my-pwa

During the creation process you will be asked whether to add the routing component and which stylesheet format we want to use in our project.

Now we can move on to transforming our angular web app into a Progressive Web App.

How to add a Service Worker

To add a service worker to the project you can use the angular CLI using the ng add @ angular / pwa command. The CLI will take care of enabling the application to use a service worker.

$ ng add @angular/pwa --project my-pwa

The command will perform the following actions:

adds the @ angular / service-worker package to the project in package.json
enable service worker support at build time in angular.json
import and register the service worker in app.module.ts
Update the index.html file:
- include the link to the manifest.json file
- adds the meta theme-color tag
Create a folder to place icons to support PWA installation
Create the service worker configuration file ngsw-config.json

the ngsw-config.json file generated by the CLI contains the configuration of the cache policies and resources to be cached.
By default the cached resources are:

index.html.
favicon.ico.
Build artifact (JS and CSS bundles).
The files in the assets folder.
Image and font in the build path (e.g. ./dist/my-pwa/)

Since the ng serve command is not compatible with the sw it is not possible to test the functionality of a PWA in development mode, but it is necessary to start an external http server to test our PWA locally.

In order to test if the configuration was successful we must now build our application for the production profile:

$ ng build --prod

As a local server we will use http-server, given its ease of use.
To install it you need to run the following command:

$ npm install http-server -g

To make PWA available we can now run the following command:

$ http-server -p 8080 -c-1 dist/my-pwa

Once the server is started, at the url http://localhost:8080, we can access our application and, if everything went ok, we should see the "+" button for installation in the address bar of our browser.

As we can see from the image above, our web application is installable.

Well! we created our first Progressive Web Application!😊