@webbspark/quick-create

v1.11.1

Published

8 months ago

Short hand replacement for document.createElement DOM method

0High
0Medium
0Low

gieardia

@webbspark/quick-create

Description

Short hand replacement for document.createElement DOM method

Notes

Package uses JSDOC commenting to assist via Intellisense - optimized for VSCode

Importing Scripts

Note: Sever must be able to serve the node_modules/@webbspark folder or it should be copied into a folder the server can serve this folder.
Electron apps can access the node_modules folder directly, copying is not necessary

create
import { create } from 'node_modules/@webbspark/quick-create/index.js';
Properties
a - Tag Type: <a>
abbr - Tag Type: <abbr>
address - Tag Type: <address>
area - Tag Type: <area>
article - Tag Type: <article>
aside - Tag Type: <aside>
audio - Tag Type: <audio>
b - Tag Type: <b>
base - Tag Type: <base>
bdo - Tag Type: <bdo>
blockquote - Tag Type: <blockquote>
body - Tag Type: <body>
br - Tag Type: <br>
button - Tag Type: <button>
canvas - Tag Type: <canvas>
caption - Tag Type: <caption>
center - Tag Type: <center>
cite - Tag Type: <cite>
code - Tag Type: <code>
col - Tag Type: <col>
colgroup - Tag Type: <colgroup>
datalist - Tag Type: <datalist>
dd - Tag Type: <dd>
del - Tag Type: <del>
dfn - Tag Type: <dfn>
div - Tag Type: <div>
dl - Tag Type: <dl>
dt - Tag Type: <dt>
em - Tag Type: <em>
embed - Tag Type: <embed>
fieldset - Tag Type: <fieldset>
figcaption - Tag Type: <figcaption>
figure - Tag Type: <figure>
footer - Tag Type: <footer>
form - Tag Type: <form>
head - Tag Type: <head>
header - Tag Type: <header>
h1 - Tag Type: <h1>
h2 - Tag Type: <h2>
h3 - Tag Type: <h3>
h4 - Tag Type: <h4>
h5 - Tag Type: <h5>
h6 - Tag Type: <h6>
hr - Tag Type: <hr>
html - Tag Type: <html>
i - Tag Type: <i>
iframe - Tag Type: <iframe>
img - Tag Type: <img>
input - Tag Type: <input>
ins - Tag Type: <ins>
kbd - Tag Type: <kbd>
label - Tag Type: <label>
legend - Tag Type: <legend>
li - Tag Type: <li>
link - Tag Type: <link>
main - Tag Type: <main>
map - Tag Type: <map>
mark - Tag Type: <mark>
meta - Tag Type: <meta>
meter - Tag Type: <meter>
nav - Tag Type: <nav>
noscript - Tag Type: <noscript>
object - Tag Type: <object>
ol - Tag Type: <ol>
optgroup - Tag Type: <optgroup>
option - Tag Type: <option>
p - Tag Type: <p>
pre - Tag Type: <pre>
progress - Tag Type: <progress>
q - Tag Type: <q>
s - Tag Type: <s>
samp - Tag Type: <samp>
script - Tag Type: <script>
section - Tag Type: <section>
select - Tag Type: <select>
small - Tag Type: <small>
source - Tag Type: <source>
span - Tag Type: <span>
strike - Tag Type: <strike>
strong - Tag Type: <strong>
style - Tag Type: <style>
sub - Tag Type: <sub>
sup - Tag Type: <sup>
table - Tag Type: <table>
tbody - Tag Type: <tbody>
td - Tag Type: <td>
textarea - Tag Type: <textarea>
tfoot - Tag Type: <tfoot>
th - Tag Type: <th>
thead - Tag Type: <thead>
time - Tag Type: <time>
title - Tag Type: <title>
tr - Tag Type: <tr>
u - Tag Type: <u>
ul - Tag Type: <ul>
var - Tag Type: <var>
video - Tag Type: <video>
wbr - Tag Type: <wbr>
svg - Tag Type: <svg>
defs - Tag Type: <defs>
mask - Tag Type: <mask>
rect - Tag Type: <rect>
textnode - Node Type: #text
custom(tag: string): HTMLElement
getByID(id: string): HTMLElement
getByTag(tag: string): HTMLElement[]
getByName(name: string): HTMLElement[]
getByClass(className: string): HTMLElement
getByQuery(query: string): HTMLElement[]
Use Example
import { create } from './node_modules/@webbspark/index.js';

const elm = create.div;
elm.className = 'dark';

const email = create.input;
inp.type = 'text';
inp.placeholder = 'Email Address';
inp.style.color = 'blue';

const password = create.input;
inp.type = 'password';
inp.placeholder = 'Password';
inp.style.color = 'blue';

const btn = create.button;
btn.innerText = 'Login';

elm.append(email, password, btn);
document.body.append(elm);

tools
Just Prototypes - import './node_modules/@webbspark/index.js';
Full - import { tools } from './node_modules/@webbspark/index.js';
Properties
debounce(key: string, cb: function, timeout: number): void - Used to add debounce to inputs, recall onkeyup and the call back function will only be called when no changes are made for the specified timeout(milliseconds)
wait(timeout): Promise<void> - an awaitable pause function
Global/Window Functions
registerLoopFunction(key: string, cb: function, timing: number): void - sets a function to to be looped, re-calling the callback every timing milliseconds
checkLoopFunction(key: string): boolean - Returns whether or not a loop function exists for the given key
removeLoopFunction(key: string): void - removes the loop function exists with the given key
clearLoopFunctions(): void - removes all loop functions
Prototypes
String.toTitle(): string; - Hello World
String.toCamel(): string; - helloWorld
String.toSnake(): string; - hello_world
String.toKebab(): string; - hello-world
String.toPascal(): string; - HelloWorld

HTMLImportElement
Just HTMLImportElement - import './node_modules/@webbspark/lib/html-import.js';
With create - import { create } from './node_modules/@webbspark/index.js';
Notes
The html-import element will automatically load a css and js file with the same name, and at the same path, as the given src value
The html-import element will not load the src by default
Observed Attributes
load - When set, loads the imported file when the dom is generated
nocss - When set, does not attempt to load a css file based on the src attribute
nojs - When set, does not attempt to load a js file based on the src attribute
nomod - When set, does not attempt to apply a module object to the html-import element, when loading the js file based on the src attribute
Properties
load(): Promise<(object | undefined)> - Loads the html from the src attribute, returning a promise that resolves when the html is fully loaded. Resolves with the module(default export class) of the loaded js file, unless nojs is set.
unload(): void - Removes and clears and objects loaded by the html-import
show(): void - Removes the hidden attribute from the html-import element
hide(): void - Sets the hidden attribute on the html-import element
onAttributeChange: (attrName: string) => void - Sets a callback that is called when a attribute changes on the html-import element
onUnload(): void - Sets a callback that is called when the html-import is unloaded
module: object - The user-defined default class loaded from the js file associated to the html-import src element
Use Example
index.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <html-import id="tabs" src="./components/tabs.html">
  </body>
</html>
index.js
import { create } from './node_modules/@webbspark/index.js';

const tabs = create.getByID('tabs');
tabs.load().then((module) => {
     module.tabs = [
       { title: 'tab1' },
       { title: 'tab2' }
     ]
});
tabs.html
<template id="tab-element">
  <span></span>
</template>

<div name="tabs-main"></div>
tabs.js
export default class Tabs {
 #tabTemplate;
 #parent;
 #main;

 #tabs = [];
 get tabs() { return this.#tabs; }
 set tabs(value) {
    this.#tabs = value;
    this.#loadTabs();
 }

 get #tab() {
    let tabElm = this.#tabTemplate.cloneNode(true).content.children[0];
    ((t) => {
       Object.defineProperties(t, {
         title: {
            get() { return t.children[0].innerText; },
            set(value) { t.children[0].innerText = value; }
         }
       })
    })(tabElm);

    return tabElm;
 }

 constructor(parent) {
   this.#parent = parent;
   this.#main = parent.querySelector('[name=tabs-main]');
   this.#tabTemplate = parent.querySelector('[id=tab-template]');
 }

 #loadTabs() {
   Array.from(this.#main.children).map(c => c.remove());
   this.#tabs.map(t => this.addTab(t));
 }
 
 addTab(tabData) {
   let tab = this.#tab;
   tab.title = tabData.title;
   
   this.#main.append(tab);
 }
}

Feature Requests and Bug Reporting - NOT IMPLEMENTED

Bug Reporting
Feature Requests

License

Permission to use, and/or distribute this software for any legal purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

BY USING THIS SOFTWARE YOU AGREE TO ALL THE TERMS AND CONDITIONS HEREIN.

THE SOFTWARE IS PROVIDED "AS IS" AND THE COPYRIGHT HOLDER/AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

COPYRIGHT HOLDER/AUTHOR RESERVES THE RIGHT TO CHANGE THESE TERMS AND CONDITIONS AT ANY TIME, FOR ANY REASON, WITHOUT PRIOR NOTICE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@webbspark/quick-create

Description

Notes

Importing Scripts

create

Properties

Use Example

tools

Properties

Global/Window Functions

Prototypes

HTMLImportElement

Notes

Observed Attributes

Properties

Use Example

index.html

index.js

tabs.html

tabs.js

Feature Requests and Bug Reporting - NOT IMPLEMENTED

License