Create the project directory and initialize an npm project
mkdir my-plugin && cd my-plugin
npm init -y| type State = { | |
| added: boolean; | |
| interval: false | ReturnType<typeof setInterval>; | |
| inFrame: boolean; | |
| callbacks: Array<SetFocusedCallback>; | |
| }; | |
| type EnrichedHTMLIFrameElement = HTMLIFrameElement & { ___onWindowFocusHandled: boolean }; | |
| type SetFocusedCallback = (focused?: boolean) => void; | 
| // for multiple requests | |
| let isRefreshing = false; | |
| let failedQueue = []; | |
| const processQueue = (error, token = null) => { | |
| failedQueue.forEach(prom => { | |
| if (error) { | |
| prom.reject(error); | |
| } else { | |
| prom.resolve(token); | 
| import axios from 'axios' | |
| let mockingEnabled = false | |
| const mocks = {} | |
| export function addMock(url, data) { | |
| mocks[url] = data | |
| } | 
I am moving this gist to a github repo so more people can contribute to it. Also, it makes it easier for me to version control.
Please go to - https://github.com/praveenpuglia/shadow-dom-in-depth for latest version of this document. Also, if you find the document useful, please shower your love, go ⭐️ it. :)
Heads Up! It's all about the V1 Spec.
In a nutshell, Shadow DOM enables local scoping for HTML & CSS.
| // takes a {} object and returns a FormData object | |
| var objectToFormData = function(obj, form, namespace) { | |
| var fd = form || new FormData(); | |
| var formKey; | |
| for(var property in obj) { | |
| if(obj.hasOwnProperty(property)) { | |
| if(namespace) { | 
| { | |
| "za_branch_bank_codes": | |
| [ | |
| { | |
| "bank_name" : "Absa Bank", | |
| "bank_code" : "632005" | |
| }, | |
| { | |
| "bank_name" : "African Bank", | |
| "bank_code" : "430000" |