@tankunsheng/dev-console-common-elements
Advanced tools
@tankunsheng/dev-console-common-elements - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
| { | ||
| "name": "@tankunsheng/dev-console-common-elements", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "dependencies": { | ||
@@ -5,0 +5,0 @@ "@types/node": "^12.0.0", |
@@ -6,11 +6,82 @@ # Dev Console Common Elements POC | ||
| This project is a react app that will look to bind itself onto two elements. Elements with **specific ids** will need to be set on the tenanat's web pages: | ||
| 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: | ||
| 1. dev-console-header | ||
| 2. dev-console-header | ||
| The Dev Console Common Elements react app will look for these elements when it is loaded and render pre-defined react components onto them. | ||
| 2. dev-console-footer | ||
| ```html | ||
| <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/dev-console-common-elements@0.2.0/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 | ||
| ```html | ||
| <!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/dev-console-common-elements@0.2.0/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: | ||
| ```css | ||
| <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 (css/sass) to preprocess non .js files and babel to transpile react and typescript to .js files. | ||
| 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) | ||
@@ -32,1 +103,3 @@ | ||
| 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. | ||
New alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by235.48%
104
Worsened metrics
- Total package byte prevSize
- decreased by-3.46%
2662346
- Number of package files
- decreased by-43.75%
9
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes