araz - npm Package Compare versions
Comparing version 1.2.1 to 1.2.2
| { | ||
| "name": "araz", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "main": "index.ts", |
@@ -141,2 +141,2 @@ // // createElement.ts | ||
| }; | ||
| } | ||
| } |
@@ -1,16 +0,45 @@ | ||
| import { entries, isString } from "lodash-es"; | ||
| import { | ||
| camelCase, | ||
| entries, | ||
| isEqual, | ||
| isFunction, | ||
| isObject, | ||
| isString, | ||
| join, | ||
| map, | ||
| } from "lodash-es"; | ||
| import { VNode } from "./types"; | ||
| const createNode = ({ $tag, $attrs = {}, $children = [] }: VNode): HTMLElement => { | ||
| export const createNode = async ({ | ||
| $tag, | ||
| $attrs = {}, | ||
| $children = [], | ||
| }: VNode): Promise<HTMLElement> => { | ||
| const $el = document.createElement($tag); | ||
| for (const [key, value] of entries($attrs)) { | ||
| $el.setAttribute(key, value.toString()); | ||
| for await (const [key, value] of entries($attrs)) { | ||
| if (isEqual(key,"style") && isObject(value)) { | ||
| const result = map(entries(value),([property, propertyValue]) => `${property}:${propertyValue}`); | ||
| const styleString = join(result, ";"); | ||
| $el.setAttribute("style", styleString); | ||
| } else if (isEqual(key,"events") && isObject(value)) { | ||
| for (const [eventName, eventHandler] of entries(value)) { | ||
| const formattedEventName = camelCase(eventName.slice(2)); | ||
| if (isFunction(eventHandler)) { | ||
| $el.addEventListener( | ||
| formattedEventName, | ||
| eventHandler as unknown as EventListener | ||
| ); | ||
| } | ||
| } | ||
| } else { | ||
| $el.setAttribute(key, isString(value) ? value.toString() : ""); | ||
| } | ||
| } | ||
| for (const child of $children) { | ||
| for await (const child of $children) { | ||
| if (isString(child)) { | ||
| $el.appendChild(document.createTextNode(child)); | ||
| } else { | ||
| const $child = createNode(child); | ||
| const $child = await createNode(child); | ||
| $el.appendChild($child); | ||
@@ -23,5 +52,5 @@ } | ||
| export const render = (vNode: VNode): HTMLElement => { | ||
| export const render = (vNode: VNode): Promise<HTMLElement> => { | ||
| const $el = createNode(vNode); | ||
| return $el; | ||
| }; |
@@ -1,74 +0,1 @@ | ||
| // // types.ts | ||
| // export type EventHandler = (event: Event) => void; | ||
| // export interface CustomGlobalEventHandlers extends GlobalEventHandlers { | ||
| // onabort: EventHandler; | ||
| // } | ||
| // export type StateUpdater<T> = (newValue: T) => void; | ||
| // export type ElementAttributes = { | ||
| // style?: Partial<CSSStyleDeclaration>; | ||
| // classList?: string[]; | ||
| // events?: { [key: string]: EventHandler }; // Change the type here | ||
| // [key: string]: any; | ||
| // }; | ||
| // export type Children = Array<string | Element>; | ||
| // export enum HTML { | ||
| // Div = "div", | ||
| // Anchor = "a", | ||
| // Paragraph = "p", | ||
| // Heading1 = "h1", | ||
| // Heading2 = "h2", | ||
| // Heading3 = "h3", | ||
| // Heading4 = "h4", | ||
| // Heading5 = "h5", | ||
| // Heading6 = "h6", | ||
| // Image = "img", | ||
| // UnorderedList = "ul", | ||
| // OrderedList = "ol", | ||
| // ListItem = "li", | ||
| // Table = "table", | ||
| // TableRow = "tr", | ||
| // TableCell = "td", | ||
| // TableHeaderCell = "th", | ||
| // TableHead = "thead", | ||
| // TableBody = "tbody", | ||
| // TableFoot = "tfoot", | ||
| // Form = "form", | ||
| // Input = "input", | ||
| // TextArea = "textarea", | ||
| // Button = "button", | ||
| // Select = "select", | ||
| // Option = "option", | ||
| // Label = "label", | ||
| // Fieldset = "fieldset", | ||
| // Legend = "legend", | ||
| // LineBreak = "br", | ||
| // HorizontalRule = "hr", | ||
| // Iframe = "iframe", | ||
| // Audio = "audio", | ||
| // Video = "video", | ||
| // Canvas = "canvas", | ||
| // SVG = "svg", | ||
| // Header = "header", | ||
| // Footer = "footer", | ||
| // Navigation = "nav", | ||
| // Main = "main", | ||
| // Article = "article", | ||
| // Section = "section", | ||
| // Aside = "aside", | ||
| // Time = "time", | ||
| // Mark = "mark", | ||
| // BlockQuote = "blockquote", | ||
| // } | ||
| // export type ElementCreator = { | ||
| // tag: HTML; | ||
| // attrs?: ElementAttributes; | ||
| // children?: Children; | ||
| // }; | ||
| type HTMLTags = 'a' | 'abbr' | 'address' | 'area' | 'article' | 'aside' | 'audio' | 'b' | | ||
@@ -88,10 +15,18 @@ 'base' | 'bdi' | 'bdo' | 'blockquote' | 'body' | 'br' | 'button' | 'canvas' | 'caption' | | ||
| export type EventHandler = (event: Event) => void; | ||
| export interface CustomGlobalEventHandlers extends GlobalEventHandlers { | ||
| onabort: EventHandler; | ||
| } | ||
| interface Attrs { | ||
| style?: Partial<CSSStyleDeclaration> | string; | ||
| events?: Partial<CustomGlobalEventHandlers>; | ||
| [key: string]: string | number | boolean | Partial<CSSStyleDeclaration> | undefined; | ||
| } | ||
| export interface VNode { | ||
| $tag: HTMLTags; | ||
| $attrs?: Record<string , string | number | boolean>; | ||
| $children?: (VNode | string)[]; | ||
| $tag: HTMLTags; | ||
| $attrs?: Attrs; | ||
| $children?: (VNode | string)[]; | ||
| } | ||
| export interface Mount{ | ||
| $node: HTMLElement; | ||
| $target: HTMLElement | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-5.2%
12002
- Lines of code
- decreased by-9.66%
290
No dependency changes