deno.land / x / nano_jsx@v0.1.0 / core.ts
نووسراو ببینە
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294import './types.ts'
export const isSSR = () => typeof _nano !== 'undefined' && _nano.isSSR === true
export interface FC<P = {}> { (props: P): Element | void // (props: P, context?: any): any}
/** Creates a new Microtask using Promise() */export const tick = Promise.prototype.then.bind(Promise.resolve()) as (cb: Function) => any
export const removeAllChildNodes = (parent: HTMLElement) => { while (parent.firstChild) { parent.removeChild(parent.firstChild) }}
// https://stackoverflow.com/a/7616484/12656855export const strToHash = (s: string) => { let hash = 0
for (let i = 0; i < s.length; i++) { const chr = s.charCodeAt(i) hash = (hash << 5) - hash + chr hash |= 0 // Convert to 32bit integer } return Math.abs(hash).toString(32)}
export const appendChildren = (element: HTMLElement | SVGElement, children: HTMLElement[], escape = true) => { // if the child is an html element if (!Array.isArray(children)) { appendChildren(element, [children], escape) return }
// htmlCollection to array if (typeof children === 'object') children = Array.prototype.slice.call(children)
children.forEach(child => { // if child is an array of children, append them instead if (Array.isArray(child)) appendChildren(element, child, escape) else { // render the component const c = _render(child) as HTMLElement
if (typeof c !== 'undefined') { // if c is an array of children, append them instead if (Array.isArray(c)) appendChildren(element, c, escape) // apply the component to parent element else { if (isSSR() && !escape) element.appendChild(c.nodeType == null ? (c.toString() as unknown as Node) : c) else element.appendChild(c.nodeType == null ? document.createTextNode(c.toString()) : c) } } } })}
/** * A simple component for rendering SVGs */const SVG = (props: any) => { const child = props.children[0] as SVGElement const attrs = child.attributes
if (isSSR()) return child
const svg = hNS('svg') as SVGElement for (let i = attrs.length - 1; i >= 0; i--) { svg.setAttribute(attrs[i].name, attrs[i].value) } svg.innerHTML = child.innerHTML
return svg as any}
/** Returns the populated parent if available else one child or an array of children */export const render = (component: any, parent: HTMLElement | null = null, removeChildNodes = true) => { let el = _render(component)
if (Array.isArray(el)) { el = el.map(e => _render(e)) if (el.length === 1) el = el[0] }
if (parent) { if (removeChildNodes) removeAllChildNodes(parent)
// if parent and child are the same, we replace the parent instead of appending to it if (el && parent.id && parent.id === el.id && parent.parentElement) { parent.parentElement.replaceChild(el, parent) } else { // append element(s) to the parent if (Array.isArray(el)) el.forEach((e: any) => { appendChildren(parent, _render(e)) //parent.appendChild(_render(e)) }) else appendChildren(parent, _render(el)) } return parent } // returning one child or an array of children else { if (isSSR() && !Array.isArray(el)) return [el] return el }}
export const hydrate = render
export const _render = (comp: any): any => { // null, false, undefined if (comp === null || comp === false || typeof comp === 'undefined') return []
// string, number if (typeof comp === 'string' || typeof comp === 'number') return comp.toString()
// SVGElement if (comp.tagName && comp.tagName.toLowerCase() === 'svg') return SVG({ children: [comp] })
// HTMLElement if (comp.tagName) return comp
// TEXTNode (Node.TEXT_NODE === 3) if (comp && comp.nodeType === 3) return comp
// Class Component if (comp && comp.component && comp.component.isClass) return renderClassComponent(comp)
// Class Component (Uninitialized) if (comp.isClass) return renderClassComponent({ component: comp, props: {} })
// Functional Component if (comp.component && typeof comp.component === 'function') return renderFunctionalComponent(comp)
// Array (render each child and return the array) (is probably a fragment) if (Array.isArray(comp)) return (comp.map(c => _render(c)) as any).flat()
// function if (typeof comp === 'function' && !comp.isClass) return _render(comp())
// if component is a HTMLElement (rare case) if (comp.component && comp.component.tagName && typeof comp.component.tagName === 'string') return _render(comp.component)
// (rare case) if (Array.isArray(comp.component)) return _render(comp.component)
// (rare case) if (comp.component) return _render(comp.component)
// object if (typeof comp === 'object') return []
console.warn('Something unexpected happened with:', comp)}
const renderFunctionalComponent = (fncComp: any): any => { const { component, props } = fncComp return _render(component(props))}
const renderClassComponent = (classComp: any): any => { const { component, props } = classComp
// calc hash const hash = strToHash(component.toString())
// make hash accessible in constructor, without passing it to it component.prototype._getHash = () => hash
const Component = new component(props) if (!isSSR()) Component.willMount()
let el = Component.render() el = _render(el) Component.elements = el
// pass the component instance as ref if (props && props.ref) props.ref(Component)
if (!isSSR()) tick(() => { Component._didMount() })
return el}
const hNS = (tag: string) => document.createElementNS('http://www.w3.org/2000/svg', tag) as SVGElement
// https://stackoverflow.com/a/42405694/12656855export const h = (tagNameOrComponent: any, props: any = {}, ...children: any[]) => { // if children is passed as props, merge with ...children if (props && props.children) { if (Array.isArray(children)) { if (Array.isArray(props.children)) children = [...props.children, ...children] else children.push(props.children) } else { if (Array.isArray(props.children)) children = props.children else children = [props.children] } }
// render WebComponent in SSR if (isSSR() && _nano.ssrTricks.isWebComponent(tagNameOrComponent)) { const element = _nano.ssrTricks.renderWebComponent(tagNameOrComponent, props, children, _render) if (element === null) return `ERROR: "<${tagNameOrComponent} />"` else return element }
// if tagNameOrComponent is a component if (typeof tagNameOrComponent !== 'string') return { component: tagNameOrComponent, props: { ...props, children: children } }
// custom message if document is not defined in SSR try { if (isSSR() && typeof tagNameOrComponent === 'string' && !document) throw new Error('document is not defined') } catch (err: any) { console.log('ERROR:', err.message, '\n > Please read: https://github.com/nanojsx/nano/issues/106') }
let ref
const element = tagNameOrComponent === 'svg' ? (hNS('svg') as SVGElement) : (document.createElement(tagNameOrComponent) as HTMLElement)
// check if the element includes the event (for example 'oninput') const isEvent = (el: HTMLElement | any, p: string) => { // check if the event begins with 'on' if (0 !== p.indexOf('on')) return false
// we return true if SSR, since otherwise it will get rendered if (el._ssr) return true
// check if the event is present in the element as object (null) or as function return typeof el[p] === 'object' || typeof el[p] === 'function' }
for (const p in props) { // https://stackoverflow.com/a/45205645/12656855 // style object to style string if (p === 'style' && typeof props[p] === 'object') { const styles = Object.keys(props[p]) .map(k => `${k}:${props[p][k]}`) .join(';') .replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) props[p] = `${styles};` }
// handel ref if (p === 'ref') ref = props[p] // handle events else if (isEvent(element, p.toLowerCase())) element.addEventListener(p.toLowerCase().substring(2), (e: any) => props[p](e)) // dangerouslySetInnerHTML else if (p === 'dangerouslySetInnerHTML' && props[p].__html) { if (!isSSR()) { const fragment = document.createElement('fragment') fragment.innerHTML = props[p].__html element.appendChild(fragment) } else { element.innerHTML = props[p].__html } } // modern dangerouslySetInnerHTML else if (p === 'innerHTML' && props[p].__dangerousHtml) { if (!isSSR()) { const fragment = document.createElement('fragment') fragment.innerHTML = props[p].__dangerousHtml element.appendChild(fragment) } else { element.innerHTML = props[p].__dangerousHtml } } // className else if (/^className$/i.test(p)) element.setAttribute('class', props[p]) // setAttribute else if (typeof props[p] !== 'undefined') element.setAttribute(p, props[p]) }
// these tags should not be escaped by default (in ssr) const escape = !(['noscript', 'script', 'style'] as any).includes(tagNameOrComponent) appendChildren(element, children, escape)
if (ref) ref(element) return element as any}
nano_jsx
Version Info
8 months ago
