Grid Weblets

A svelte¹ project for creating web components - which are reusable custom elements with their functionality encapsulated away from the rest of the code — that interact with TF Grid 3 and could be utilized from other web apps.

It solves such problem where you had to write complex HTML (and associated style and script) to render custom UI controls (eg, to deploy some workload on the TF Grid 3), and how using them multiple times in different projects can be a miss if you are not careful.

The Contents

• Getting Started
  • Prerequisites
  • Installation
  • Run The Playground
• Elements
  • Kubernetes
  • Virtual Machine
  • Caprover
  • Deployed List
• Add New Weblet
• Playground
• Add Weblet To Plain HTML File
• Test a weblet
  • Create
  • Build
  • Use

Getting Started

In order to work with this project you need to have Node.js installed. It's recommended that you use the Active long-term support (LTS) version 16. Node includes npm (the node package manager), and npx (the node package runner). Note that it is recommended to use the Yarn package manager in place of npm, we'll assume you are using yarn in these Docs.

Prerequisites

• Node.js >= 14
• Yarn
• development tools: gcc g++ make libtool

If your are using Debian based OS you can follow the below instructions to install the prerequisites.

# install Node.js 16 (Active LTS)
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
# install Yarn
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
# this would be required for building some optional dependencies 
sudo apt-get install libtool gcc g++ make

You can see the following for more information about installing other versions of Node.js : install Node.js on Debian and Ubuntu based distributions

Installation

Steps.mp4

• Clone the repo

  git clone https://github.com/threefoldtech/grid_weblets.git
  

• Install the dependencies

  The project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. TO avoid any issues with package managers other than npm remove package-lock.json.

  cd grid_weblets/
  # we gonna use yarn so it's recommended to remove npm lock file or rename it
  rm package-lock.json
  # install project dependencies
  yarn install
  cd easy-docs/ && yarn install
  cd ..

• Compile

  yarn build:app

  JavaScript heap out of memory error:

  In some cases you could see an error like this: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

  As Rollup needs to keep all module information in memory simultaneously to be able to analyze relevant side effects for tree-shaking, it is possible that bundling large projects reaches Node's memory limit. If this happens, it can help to increase this limit by running Rollup via

  export NODE_OPTIONS="--max-old-space-size=2048" # or even higher size 8192
  yarn build:app # on grid_weblets (dir)

  Increasing --max-old-space-size as needed. Note that this number can safely surpass your available physical memory. In that case, Node will start paging memory to disk as needed.

Run The Playground

Finally to run the playground, you need to serve the bundle created in docs directory, for that you could use serve

npx serve docs

you could then access open this link in your browser http://localhost:3000

Elements

Kubernetes

<tf-kubernetes></tf-kubernetes>

Virtual Machine

<tf-vm></tf-vm>

Caprover

<tf-caprover></tf-caprover>

Deployed List

<tf-deployedlist></tf-deployedlist> <!-- to show all tabs -->
<!-- Accept tab attribute      tab =  'vm' | 'k8s' | 'caprover' -->
<tf-deployedlist tab="k8s"></tf-deployedlist>
<tf-deployedlist tab="vm"></tf-deployedlist>
<tf-deployedlist tab="caprover"></tf-deployedlist>

Add New Weblet

We are going to add new weblet called demo .

1. Add new folder called demo at src/elements/demo .
2. Add Demo.wc.svelte at src/elements/demo/Demo.wc.svelte .
3. Add index.ts at src/elements/demo/index.ts .

// index.ts

// import *demo* component
import Demo from './Demo.wc.svelte';

// import *defineElement* library
import defineElement from '../../utils/defineElement';


// Register new wc
defineElement('demo', Demo); // tf-demo

// Demo.wc.svelte

/* Write whatever svelte code u need here */

Find More About svelte here .

4. Developing weblet by importing Demo.wc.svelte into App.svelte.

<!-- App.svelte -->
<script lang="ts">
    import Demo from './elements/demo/Demo.wc.svelte';
</script>

<Demo />

yarn dev

5. Build Demo.wc.svelte.

yarn build

Playground

• cd easy-docs
• yarn build will output in the docs directory
• serve content in docs dir for path /grid_weblets so play.grid.tf/grid_weblets

Add Weblet To Plain HTML File

Assume we need to include vm weblet in its own index.html file.
The index.html file should be like the following.

Notes: Your will need to include base.wc.js & profiles.wc.js for every component to work also you will need to inject the required libraries grid3_client and ts-rmb-http-client in window.configs Object.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VM Weblet Example</title>

    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }
    </style>

    <script src="/path/to/libs/to/inject"></script>
    <!-- window.configs should include the required libs -->

    <script src="/path/to/base.wc.js"></script>
    <script src="/path/to/profiles.wc.js"></script>
    <script defer src="/path/to/vm.wc.js"></script>
</head>
<body>
    <tf-base></tf-base>
    <tf-profiles></tf-profiles>
    <tf-vm></tf-vm>
</body>
</html>

Test a weblet

Create

• Add new folder for your weblet as src/elements/demo
• Import Demo.wc svelte into App.svelte
• Add your weblet on elements list in easy-docs/src/App.vue
• Append a weblet in easy-docs/src/views/Editor.vue by appending the weblets list

Build

• Make sure to install dependencies in both / and /easy-docs by running yarn
• yarn serve:app

Use

• In profile Tab, Create or Load your profile
• Begin to Deploy your weblet
• List the info to access weblet

Footnotes

1. In case you wonder what is svelte, It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM. if your are interested to learn more about Sevlte and how to get started with it you can check this tutorial ↩