@tankunsheng/dev-console-common-elements

v0.2.1

Published

3 years ago

Dev Console Common Elements contains common elements (Header, Footer etc) that all tenants of Dev Console will be required to import and use in order to achieve a common user interface. ## How it works

Downloads

0High
0Medium
0Low

tankunsheng

teochengyong

Dev Console Common Elements POC

Dev Console Common Elements contains common elements (Header, Footer etc) that all tenants of Dev Console will be required to import and use in order to achieve a common user interface.

How it works

This project is a react app that will look to mount itself onto two elements. Elements with specific ids will need to be set on the tenanat's web pages:

dev-console-header
dev-console-footer

<html>

<head>
</head>

<body>
    <div id="dev-console-header"></div>
    <YourMainApp></YourMainApp>
    <div id="dev-console-footer"></div>
</body>

</html>

Once these Ids are set in your html page, load in the Dev Console Common Element's JS bundle from the JSDelivr CDN https://cdn.jsdelivr.net/npm/@tankunsheng/[email protected]/build/devconsole.bundle.js (Change version as needed) and the bundle will run a script that will mount React apps onto the DOM at these two mount points.

Example

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>TechPass</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="./assets/favicon.ico">

</head>

<body>
    <!-- declare where the div of header and footer is -->
    <div id="dev-console-header"></div>
    <app-root>
    </app-root>

    <div id="dev-console-footer"></div>

     <!-- load script which will mount React apps on header and footer divs -->
    <script defer
        src="https://cdn.jsdelivr.net/npm/@tankunsheng/[email protected]/build/devconsole.bundle.js"></script>

</body>

</html>

Note!

Sass-loader and style-loader has been replaced with styled-components as we do not want to interfere or collide with tenant's style sheets.

Style-loader was initially chosen because we want to serve out just one bundled.js file, no additional chunks, or any .css files at all, just one file for easy loading and consumption.

Scripts bundled with style-loader will inject css style tags in head, however, these css styles are unscoped (global to the entire document) and is highly likely to clash with tenant's styles.

Therefore, style-components is selected to replace style-loader as it achieves the objectives of

Only a single bundled JS to be served
Does not interfere with tenant's styles as it generates dynamically scoped css class names

Example of styles injected by styled-components with scoped class names:

<style data-styled="active" data-styled-version="5.3.1">
.eTuIjD{position:relative;background-color:hsl(0,0%,94%);height:auto;padding:4px 0;font-size:14px;}
.eTuIjD .padding{padding:$base-margin-padding !important;}
.eTuIjD .padding--xs{padding:0.25rem !important;}
</style>

Development

This project is scaffolded with React, Webpack, Babel. Necessary webpack loaders added as required to preprocess non .js files and babel to transpile react and typescript to .js files.

To develop locally (served through webpack-serve)

npm start

Build and Publish

Builds out a single js bundle (devconsole.bundle.js)
Publish onto NPM
Serve through jsDelivr or other CDN

npm publish

Alternatively, build and serve devconsole.bundle.js from anywhere you prefer. Be mindful that the tenant's apps will be required to configure CSP headers for these sources.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Dev Console Common Elements POC

How it works

Example

Development

Build and Publish