Use Typescript for builds, cleaned up bins, use Bootstrap 5

Author: travist

.circleci/config.yml

@@ -2,16 +2,14 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:14-browsers
-        environment:
-            CHROME_BIN: "/usr/bin/google-chrome"
+      - image: cimg/node:lts
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
-          name: Install npm
-          command: npm install
+          name: Install modules
+          command: yarn install
       - save_cache:
           key: dependency-cache-{{ checksum "package.json" }}
           paths:

.dccache

@@ -1,10 +1,11 @@
 {
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
   "extends": "formio",
   "parserOptions": {
     "ecmaVersion": 2015,
     "sourceType": "module"
   },
+  "plugins": ["@typescript-eslint"],
   "env": {
     "browser": true,
     "es6": true,

.eslintrc.json

@@ -1,6 +1,7 @@
 _site
 lib
 dump.rdb
+.dccache
 .DS_Store
 .bower.json
 node_modules

.gitignore

@@ -5,7 +5,7 @@ module.exports = {
   timeout: 20000,
   exit: true,
   require: [
-    '@babel/register',
+    'ts-node/register',
     'mock-local-storage',
     'jsdom-global/register'
   ]

.mocharc.js

@@ -14,8 +14,9 @@
               "-t",
               "20000",
               "--colors",
-              "${workspaceFolder}/lib/**/*.unit.js",
-
+              "${workspaceFolder}/src/**/*.unit.js",
+              "-t",
+              "30000"
             ],
             "internalConsoleOptions": "openOnSessionStart",
             "skipFiles": [

.vscode/launch.json

@@ -3,8 +3,7 @@ All notable changes to this project will be documented in this file
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
-
-## [Unreleased: 5.0.0-rc.5]
+## 5.0.0-rc.5
 ### Added
  - FIO-5986: added check for identical uploaded file
  - FIO-6453: added sanitization inside error message container

Changelog.md

@@ -1 +1 @@
-baseurl: ""
+baseurl: /

_config.dev.yml

@@ -3,6 +3,6 @@ description: The core JavaScript Library for Form.io
 author: The Form.io Developers
 markdown: kramdown
 highlighter: rouge
-baseurl: https://formio.github.io/formio.js
-exclude: [package.json, package-lock.json, bower.json, circle.yml, karma.conf.js, gulpfile.js, node_modules, bower_components, src, test, gulp, lib, config]
+baseurl: /formio.js/
+exclude: [package.json, package-lock.json, circle.yml, gulpfile.js, node_modules, bower_components, src, test, gulp, lib, config, tsconfig.json]
 

_config.yml

@@ -7,65 +7,59 @@
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
-  
     gtag('config', 'UA-58453303-6');
   </script>
-
-  <base href="{{ site.baseurl }}/"></base>
+  <base href="{{ site.baseurl }}"></base>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>JavaScript Powered Forms and Form.io SDK</title>
-  <link href="{{ site.baseurl }}/app/syntax.css" rel="stylesheet">
-  <link href="{{ site.baseurl }}/app/main.css" rel="stylesheet">
-  <link href="{{ site.baseurl }}/app/fontawesome/css/font-awesome.min.css" rel="stylesheet">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}app/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}app/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}app/favicon/favicon-16x16.png">
+  <link rel="manifest" href="{{ site.baseurl }}app/favicon/site.webmanifest">
+  <link href="{{ site.baseurl }}app/syntax.css" rel="stylesheet">
+  <link href="{{ site.baseurl }}app/main.css" rel="stylesheet">
+  <link href="{{ site.baseurl }}app/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link href="{{ site.baseurl }}app/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
   {% if page.template %}
-    <link href="https://bootswatch.com/4/{{ page.template }}/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ site.baseurl }}app/bootswatch/dist/{{ page.template }}/bootstrap.min.css" rel="stylesheet">
   {% endif %}
   {% if page.template == nil %}
-    <link href="https://bootswatch.com/4/cosmo/bootstrap.min.css" rel="stylesheet">
+    <link href="{{ site.baseurl }}app/bootswatch/dist/spacelab/bootstrap.min.css" rel="stylesheet">
   {% endif %}
   {% if page.noFormio == nil %}
-    <link href="{{ site.baseurl }}/dist/formio.full.min.css" rel="stylesheet">
+    <link href="{{ site.baseurl }}dist/formio.full.min.css" rel="stylesheet">
   {% endif %}
   <script src="https://cdn.form.io/ace/ace.js"></script>
-  <script src="{{ site.baseurl }}/app/jquery/jquery.slim.min.js"></script>
-  <script src="{{ site.baseurl }}/app/bootstrap/js/bootstrap.min.js"></script>
+  <script src="{{ site.baseurl }}app/bootstrap/js/bootstrap.min.js"></script>
   {% if page.noFormio == nil %}
-    <script src="{{ site.baseurl }}/dist/formio.full.js"></script>
+    <script src="{{ site.baseurl }}dist/formio.full.js"></script>
   {% endif %}
   {% if page.contrib %}
-    <script src="{{ site.baseurl }}/dist/formio.contrib.min.js"></script>
+    <script src="{{ site.baseurl }}dist/formio.contrib.min.js"></script>
   {% endif %}
-  <script type="text/javascript">
-    window.onload = function() {
-      if (Formio) {
-        Formio.icons = 'fontawesome';
-        document.getElementById('renderer-version').innerHTML = Formio.version;
-      }
-    };
-  </script>
 </head>
 <body>
 <a href="https://github.com/formio/formio.js"><img style="position: absolute; top: 0; right: 0; border: 0;z-index:3000;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
-<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
+<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 p-0">
   <div class="container">
-    <a class="navbar-brand" href="#">
-      <img height="25px;" style="display: inline;" alt="Form.io" src="https://help.form.io/assets/formio-logo.png"> | JavaScript SDK Library
+    <a class="navbar-brand p-0" href="#">
+      <svg width="150px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 115.2"><defs><style>.cls-1{fill:#373a36;}.cls-2{fill:#69b342;}</style></defs><polygon class="cls-1" points="95.53 37.72 127.07 37.72 127.07 45.67 105.07 45.67 105.07 56.68 125.68 56.68 125.68 64.64 105.07 64.64 105.07 82.62 95.53 82.62 95.53 37.72"/><path class="cls-1" d="M139.14,65.76c0,6.49,2.81,10.34,7.34,10.34s7.15-3.85,7.15-10.28c0-7-2.6-10.39-7.29-10.39-4.35,0-7.2,3.21-7.2,10.33m24-.06c0,10.2-6.14,17.7-16.89,17.7-10.52,0-16.67-7.46-16.67-17.52,0-10.4,6.34-17.75,17.11-17.75,10,0,16.45,7,16.45,17.57"/><path class="cls-1" d="M167,58.06c0-3.35,0-6.33-.07-9.15h9.22c.12.75.24,4.1.24,5.92,1.5-3.85,5.12-6.67,10.89-6.7V57c-6.82-.18-10.89,1.64-10.89,10.88v14.7H167Z"/><path class="cls-1" d="M192.81,57.6c0-2.92,0-5.8-.06-8.69h9c.12.82.31,2.7.36,4a10.6,10.6,0,0,1,9.43-4.8c4.88,0,7.56,2.51,8.76,5.13,2-2.76,4.91-5.13,10.45-5.13,5.92,0,10.76,3.61,10.76,12.38V82.62h-9.17v-21c0-3-1.11-6-4.95-6-4,0-5.56,2.56-5.56,7.73V82.62H212.6V62c0-3.49-.87-6.31-4.88-6.31-3.81,0-5.63,2.33-5.63,8.11V82.62h-9.28Z"/><rect class="cls-1" x="247.55" y="71.18" width="10.09" height="11.44"/><path class="cls-1" d="M263.73,48.91h9.39V82.62h-9.39Zm0-13.83h9.39V43.4h-9.39Z"/><path class="cls-1" d="M289.11,65.76c0,6.49,2.8,10.34,7.33,10.34s7.16-3.85,7.16-10.28c0-7-2.61-10.39-7.29-10.39-4.36,0-7.2,3.21-7.2,10.33m24-.06c0,10.2-6.15,17.7-16.89,17.7-10.53,0-16.67-7.46-16.67-17.52,0-10.4,6.33-17.75,17.11-17.75,10,0,16.45,7,16.45,17.57"/><polygon class="cls-1" points="45.38 65.99 54.91 56.55 46.72 48.42 37.2 57.85 45.38 65.99"/><polygon class="cls-1" points="10.87 57.41 46.43 92.97 54.38 85.01 26.7 57.32 53.92 30.1 46.05 22.23 10.87 57.41"/><polygon class="cls-2" points="59.37 35.48 51.42 43.43 65.73 57.75 51.45 72.03 59.37 80.03 81.63 57.76 81.6 57.73 81.61 57.71 59.37 35.48"/></svg>
     </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-      <ul class="navbar-nav nav-fill mr-auto">
-        <li class="nav-item {% if page.section == 'home' %}active bg-white border{% endif %}"><a class="nav-link" href="{{ site.baseurl }}"><i class="fa fa-home"></i></a></li>
-        <li class="nav-item {% if page.section == 'builder' %}active bg-white border{% endif %}"><a class="nav-link" href="app/builder.html"><i class="fa fa-th-list"></i> Form Builder</a></li>
-        <li class="nav-item {% if page.section == 'sandbox' %}active bg-white border{% endif %}"><a class="nav-link" href="app/sandbox.html"><i class="fa fa-cube"></i> Sandbox</a></li>
-        <li class="nav-item {% if page.section == 'examples' %}active bg-white border{% endif %}"><a class="nav-link" href="app/examples"><i class="fa fa-check-square-o"></i> Examples</a></li>
-        <li class="nav-item"><a class="nav-link" target="_blank" href="https://github.com/formio/formio.js/wiki"><i class="fa fa-book"></i> Documentation</a></li>
-        <li class="nav-item {% if page.section == 'sdk'%}active bg-white border{% endif %}"><a class="nav-link" href="app/sdk"><i class="fa fa-list-alt"></i> SDK</a></li>
+      <ul class="navbar-nav nav-fill me-auto">
+        <li class="nav-item {% if page.section == 'home' %}active bg-white border{% endif %}"><a class="text-dark nav-link p-3" href="{{ site.baseurl }}"><i class="bi bi-house-fill"></i></a></li>
+        <li class="nav-item {% if page.section == 'builder' %}active bg-white border{% endif %}"><a class="text-dark nav-link p-3" href="app/builder.html"><i class="bi bi-menu-button-wide"></i> Form Builder</a></li>
+        <li class="nav-item {% if page.section == 'sandbox' %}active bg-white border{% endif %}"><a class="text-dark nav-link p-3" href="app/sandbox.html"><i class="bi bi-box"></i> Sandbox</a></li>
+        <li class="nav-item {% if page.section == 'examples' %}active bg-white border{% endif %}"><a class="text-dark nav-link p-3" href="app/examples"><i class="bi bi-check-square"></i> Examples</a></li>
+        <li class="nav-item"><a class="text-dark nav-link p-3" target="_blank" href="https://help.form.io/developers/form-renderer"><i class="bi bi-book"></i> Documentation</a></li>
+        <li class="nav-item {% if page.section == 'sdk'%}active bg-white border{% endif %}"><a class="text-dark nav-link p-3" href="app/sdk"><i class="bi bi-window"></i> SDK</a></li>
       </ul>
-      <ul class="navbar-nav">
+      <ul class="navbar-nav float-end">
         <li class="nav-item"><a class="github-button nav-link" href="https://github.com/formio/formio.js" data-size="large" data-show-count="true" aria-label="Star formio/formio.js on GitHub">Star</a></li>
         <li class="nav-item"><a class="github-button nav-link" href="https://github.com/formio/formio.js/fork" data-size="large" data-show-count="true" aria-label="Fork formio/formio.js on GitHub">Fork</a></li>
       </ul>
@@ -75,12 +69,17 @@
 <div class="{% if page.fluid %}container-fluid{% endif %}{% if page.fluid == nil %}container{% endif %}">
   {{ content }}
 </div>
-<hr />
-<div>
-  <h4 class="text-center text-muted">powered by <img src="{{ site.baseurl }}/app/logo.png" class="mr-2" style="height: 1.2em;" /></h4>
-  <p class="text-center text-muted mb-0" style="font-size: 0.8em">Copyright © Form.io LLC 2021. All rights reserved</p>
+<div class="container">
+  <footer class="py-3 my-4">
+    <h4 class="align-center text-center text-muted">powered by <svg width="150px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 324 115.2"><defs><style>.cls-1{fill:#373a36;}.cls-2{fill:#69b342;}</style></defs><polygon class="cls-1" points="95.53 37.72 127.07 37.72 127.07 45.67 105.07 45.67 105.07 56.68 125.68 56.68 125.68 64.64 105.07 64.64 105.07 82.62 95.53 82.62 95.53 37.72"/><path class="cls-1" d="M139.14,65.76c0,6.49,2.81,10.34,7.34,10.34s7.15-3.85,7.15-10.28c0-7-2.6-10.39-7.29-10.39-4.35,0-7.2,3.21-7.2,10.33m24-.06c0,10.2-6.14,17.7-16.89,17.7-10.52,0-16.67-7.46-16.67-17.52,0-10.4,6.34-17.75,17.11-17.75,10,0,16.45,7,16.45,17.57"/><path class="cls-1" d="M167,58.06c0-3.35,0-6.33-.07-9.15h9.22c.12.75.24,4.1.24,5.92,1.5-3.85,5.12-6.67,10.89-6.7V57c-6.82-.18-10.89,1.64-10.89,10.88v14.7H167Z"/><path class="cls-1" d="M192.81,57.6c0-2.92,0-5.8-.06-8.69h9c.12.82.31,2.7.36,4a10.6,10.6,0,0,1,9.43-4.8c4.88,0,7.56,2.51,8.76,5.13,2-2.76,4.91-5.13,10.45-5.13,5.92,0,10.76,3.61,10.76,12.38V82.62h-9.17v-21c0-3-1.11-6-4.95-6-4,0-5.56,2.56-5.56,7.73V82.62H212.6V62c0-3.49-.87-6.31-4.88-6.31-3.81,0-5.63,2.33-5.63,8.11V82.62h-9.28Z"/><rect class="cls-1" x="247.55" y="71.18" width="10.09" height="11.44"/><path class="cls-1" d="M263.73,48.91h9.39V82.62h-9.39Zm0-13.83h9.39V43.4h-9.39Z"/><path class="cls-1" d="M289.11,65.76c0,6.49,2.8,10.34,7.33,10.34s7.16-3.85,7.16-10.28c0-7-2.61-10.39-7.29-10.39-4.36,0-7.2,3.21-7.2,10.33m24-.06c0,10.2-6.15,17.7-16.89,17.7-10.53,0-16.67-7.46-16.67-17.52,0-10.4,6.33-17.75,17.11-17.75,10,0,16.45,7,16.45,17.57"/><polygon class="cls-1" points="45.38 65.99 54.91 56.55 46.72 48.42 37.2 57.85 45.38 65.99"/><polygon class="cls-1" points="10.87 57.41 46.43 92.97 54.38 85.01 26.7 57.32 53.92 30.1 46.05 22.23 10.87 57.41"/><polygon class="cls-2" points="59.37 35.48 51.42 43.43 65.73 57.75 51.45 72.03 59.37 80.03 81.63 57.76 81.6 57.73 81.61 57.71 59.37 35.48"/></svg></h4>
+    <p class="text-center text-muted mb-0" style="font-size: 0.8em">Copyright © Form.io LLC <span id="year"></span>. All rights reserved</p>
+    <p class="text-center text-muted mb-0" style="font-size: 0.8em">Renderer v<span id="renderer-version"></span></p>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+    <script type="text/javascript">
+      document.getElementById('year').innerText = (new Date()).getFullYear();
+      document.getElementById('renderer-version').innerHTML = Formio.version;
+    </script>
+  </footer>
 </div>
-<p class="text-center text-muted mb-0" style="font-size: 0.8em">Renderer v<span id="renderer-version"></span></p>
-<script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
 </html>

_layouts/default.md

@@ -8,7 +8,7 @@ layout: default
       {% for section in sections %}
         {% if section.disabled == nil %}
           <li class="nav-item ml-0">
-            <a class="nav-link border-top rounded-0 {% if section.url == page.url %}active{% endif %}" href="{{ site.baseurl }}{{ section.url }}">{{ section.title }}</a>
+            <a class="nav-link border-top rounded-0 {% if section.url == page.url %}active{% endif %}" href="{{ site.baseurl }}{{ section.url | replace_first: "/", "" }}">{{ section.title }}</a>
           </li>
         {% endif %}
       {% endfor %}

_layouts/vtabs.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2021 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.