1 line
9.4 KiB
JavaScript
1 line
9.4 KiB
JavaScript
const isFunction=e=>"function"==typeof e,isNode=e=>e instanceof Node,doc="undefined"!=typeof document?document:null;let activeEffect=null;const pendingEffects=new Set;let flushScheduled=!1;const nodeDisposers=new WeakMap,registerNodeCleanup=(e,t)=>{nodeDisposers.has(e)||nodeDisposers.set(e,[]),nodeDisposers.get(e).push(t)},flushEffects=()=>{if(0===pendingEffects.size)return;const e=Array.from(pendingEffects);pendingEffects.clear(),e.sort(((e,t)=>e.depth-t.depth));for(let t=0;t<e.length;t++){const n=e[t];n.disposed||n.execute()}flushScheduled=!1},scheduleFlush=()=>{flushScheduled||(flushScheduled=!0,queueMicrotask(flushEffects))},disposeEffectTree=e=>{if(e.disposed)return;e.disposed=!0;const t=[e];for(;t.length;){const e=t.pop();if(e.cleanups){for(const t of e.cleanups)t();e.cleanups.clear()}if(e.dependencies){for(const t of e.dependencies)t.delete(e);e.dependencies.clear()}if(e.children){for(const n of e.children)t.push(n);e.children.clear()}}},createEffect=e=>{const t={execute:(null,()=>{if(t.disposed)return;if(t.dependencies){for(const e of t.dependencies)e.delete(t);t.dependencies.clear()}if(t.cleanups){for(const e of t.cleanups)e();t.cleanups.clear()}const n=activeEffect;activeEffect=t;try{const o=e();isFunction(o)&&t.cleanups.add(o)}finally{activeEffect=n}}),dependencies:new Set,cleanups:new Set,children:new Set,depth:activeEffect?activeEffect.depth+1:0,disposed:!1,owner:activeEffect};return activeEffect&&activeEffect.children.add(t),t.execute(),()=>disposeEffectTree(t)};export const Watch=createEffect;const getComponentContext=()=>{let e=activeEffect;for(;e;){if(e.componentContext)return e.componentContext;e=e.owner}return null};export const removeNode=e=>{if(!e)return;e.childNodes&&[...e.childNodes].forEach(removeNode);const t=nodeDisposers.get(e);t&&(t.forEach((e=>e())),nodeDisposers.delete(e)),e._raf&&cancelAnimationFrame(e._raf),e._stop&&e._stop();const n=e.componentContext;n&&(n.unmount.forEach((e=>e())),n.unmount=[]),e.leaveTransition?e.leaveTransition((()=>e.remove())):e.remove?.()};const track=e=>{activeEffect&&!activeEffect.disposed&&(e.add(activeEffect),activeEffect.dependencies.add(e))},trigger=e=>{if(e){for(const t of e)t===activeEffect||t.disposed||pendingEffects.add(t);flushScheduled||(flushScheduled=!0,queueMicrotask(flushEffects))}};export const $=(e,t)=>{if(isFunction(e)){let t,n=!0;const o=$(),r=Watch((()=>{const r=e();Object.is(r,t)||(t=r,n=!1,o(r))})),c=getComponentContext();c&&c.unmount.push(r);return r=>void 0===r?(n&&(t=e(),n=!1,o(t)),o()):o(r)}const n=new Set;let o=e;if(t)try{const e=localStorage.getItem(t);null!==e&&(o=JSON.parse(e))}catch(e){}const r=e=>{if(void 0===e)return track(n),o;const r=isFunction(e)?e(o):e;if(!Object.is(r,o)){if(o=r,t)try{localStorage.setItem(t,JSON.stringify(o))}catch(e){}trigger(n)}return o};if(t){const e=Watch((()=>{r(o)})),t=getComponentContext();t&&t.unmount.push(e)}return r};export const computed=e=>{let t,n=!0;const o=new Set;createEffect((()=>{e(),n=!0,trigger(o)}));return()=>(track(o),(()=>{if(!n)return t;const r=activeEffect;activeEffect=null;try{t=e()}finally{activeEffect=r}return n=!1,trigger(o),t})())};export const set=(e,t,n)=>{if(void 0===n)e(isFunction(t)?t(e()):t);else{const o=t.split("."),r=o.pop(),c=o.reduce(((e,t)=>({...e,[t]:{...e[t]}})),{...e()});c[r]=n,e(c)}};export const watch=(e,t)=>{let n,o=!0;return Watch((()=>{const r=isFunction(e)?e():e;o?o=!1:untrack((()=>t(r,n))),n=r}))};export const untrack=e=>{const t=activeEffect;activeEffect=null;try{return e()}finally{activeEffect=t}};export const onMount=e=>{const t=getComponentContext();t&&t.mount.push(e)};export const onUnmount=e=>{const t=getComponentContext();t&&t.unmount.push(e)};const DANGEROUS_PROTOCOL=/^\s*(javascript|data|vbscript):/i,isDangerousAttr=e=>"src"===e||"href"===e||e.startsWith("on"),validateAttr=(e,t)=>{if(null==t||!1===t)return null;if(isDangerousAttr(e)){const e=String(t);if(DANGEROUS_PROTOCOL.test(e))return"#"}return t},setProperty=(e,t,n,o)=>{n=validateAttr(t,n),"class"===t||"className"===t?e.className=n||"":"style"===t&&"object"==typeof n?Object.assign(e.style,n):t in e&&!o?e[t]=n:o?t.startsWith("xlink:")?null==n||!1===n?e.removeAttributeNS("http://www.w3.org/1999/xlink",t.slice(6)):e.setAttributeNS("http://www.w3.org/1999/xlink",t,n):"xmlns"===t||t.startsWith("xmlns:")?null==n||!1===n?e.removeAttributeNS("http://www.w3.org/2000/xmlns/",t):e.setAttributeNS("http://www.w3.org/2000/xmlns/",t,n):null==n||!1===n?e.removeAttribute(t):!0===n?e.setAttribute(t,""):e.setAttribute(t,n):null==n||!1===n?e.removeAttribute(t):!0===n?e.setAttribute(t,""):e.setAttribute(t,n)},appendChildNode=(e,t)=>{if(null!=t)if(isFunction(t)){const n=doc.createTextNode("");e.appendChild(n);let o=[];const r=Watch((()=>{const r=t();if(r?._isFor)r._reconcile(e),o=r();else{const t=(Array.isArray(r)?r:[r]).flat(1/0).filter((e=>null!=e)).map((e=>isNode(e)?e:doc.createTextNode(String(e))));for(const e of o)t.includes(e)||removeNode(e);let c=n;for(let n=t.length-1;n>=0;n--){const o=t[n];(o.parentNode!==e||o.nextSibling!==t[n+1])&&e.insertBefore(o,c),o.componentContext&&o.componentContext.mount.forEach((e=>e())),c=o}o=t}}));registerNodeCleanup(n,r)}else isNode(t)?e.appendChild(t):e.appendChild(doc.createTextNode(String(t)))},SVG_TAGS=/^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view)$/i;export const Tag=(e,t={},...n)=>{if(n=n.flat(1/0),isFunction(e)){const o={mount:[],unmount:[],provisions:{}};let r;const c=Watch((()=>{activeEffect&&(activeEffect.componentContext=o),r=e(t,{children:n,emit:(e,...n)=>{const o=t[`on${e[0].toUpperCase()}${e.slice(1)}`];isFunction(o)&&o(...n)}}),activeEffect&&(activeEffect.componentContext=null)}));return isNode(r)?(r.componentContext=o,r._stop=c,queueMicrotask((()=>o.mount.forEach((e=>e()))))):Array.isArray(r)&&(r.forEach((e=>{isNode(e)&&(e.componentContext=o,e._stop=c)})),queueMicrotask((()=>o.mount.forEach((e=>e()))))),r}const o=SVG_TAGS.test(e),r=o?doc.createElementNS("http://www.w3.org/2000/svg",e):doc.createElement(e);for(const[e,n]of Object.entries(t))if(e.startsWith("on")){const t=e.slice(2).toLowerCase();r.addEventListener(t,n),onUnmount((()=>r.removeEventListener(t,n)))}else if(isFunction(n)){const t=Watch((()=>setProperty(r,e,n(),o)));if(registerNodeCleanup(r,t),/^(INPUT|TEXTAREA|SELECT)$/.test(r.tagName)&&("value"===e||"checked"===e)){const t="checked"===e?"change":"input",o=t=>n(t.target[e]);r.addEventListener(t,o),onUnmount((()=>r.removeEventListener(t,o)))}}else setProperty(r,e,n,o);for(const e of n)appendChildNode(r,e);return r};export const If=(e,t,n=null,o={})=>{let r=null,c=[],s=null;return()=>{const i=!!(isFunction(e)?e():e);if(i===r)return 1===c.length?c[0]:c;if(c.length)if(o.leave){s&&s.cancel&&s.cancel();const e=o.leave(c);s=e,e&&e.finished?e.finished.then((()=>c.forEach((e=>removeNode(e))))):c.forEach((e=>removeNode(e)))}else c.forEach((e=>removeNode(e)));r=i;const a=i?t():n?.()??[],l=(Array.isArray(a)?a:[a]).flat(1/0).filter((e=>null!=e));return c=l,c.length&&o.enter&&o.enter(c),1===c.length?c[0]:c}};export const For=({each:e,key:t,children:n})=>{let o=new Map,r=[];const c=()=>r;return c._isFor=!0,c._reconcile=c=>{const s=isFunction(e)?e():e||[],i=new Map,a=[],l=(e,n)=>t?isFunction(t)?t(e,n):e[t]:n;for(let e=0;e<s.length;e++){const t=s[e],r=l(t,e);let c=o.get(r);c||(c=Tag(n[0],{item:t,index:e})),i.set(r,c),a.push(c),o.delete(r)}if(c){let e=null;for(let t=a.length-1;t>=0;t--){const n=a[t];n.nextSibling!==a[t+1]&&c.insertBefore(n,e),e=n}}for(const e of o.values())removeNode(e);o=i,r=a},c};export const Router=({routes:e})=>{const t=Tag("div",{class:"router-outlet"}),n=()=>window.location.hash.slice(1)||"/",o=$(n()),r=()=>{o(n())};return window.addEventListener("hashchange",r),registerNodeCleanup(t,(()=>window.removeEventListener("hashchange",r))),Watch((()=>{const n=o(),r=e.find((e=>{const t=e.path.split("/").filter(Boolean),o=n.split("/").filter(Boolean);return t.length===o.length&&t.every(((e,t)=>":"===e[0]||e===o[t]))}))||e.find((e=>"*"===e.path));if(r){for(;t.firstChild;)removeNode(t.firstChild);const e={};r.path.split("/").filter(Boolean).forEach(((t,o)=>{":"===t[0]&&(e[t.slice(1)]=n.split("/").filter(Boolean)[o])})),Router.params(e);const o=Tag(r.component,{params:e});t.appendChild(o)}})),t};Router.params=$({});export const navigate=e=>{window.location.hash=e};export const currentPath=()=>window.location.hash.slice(1)||"/";export const createApp=(e,t={})=>n=>{const o="string"==typeof n?doc.querySelector(n):n;o.appUnmount&&o.appUnmount();const r=Tag(e,t);return o.appendChild(r),r.componentContext&&r.componentContext.mount.forEach((e=>e())),o.appUnmount=()=>removeNode(r),o.appUnmount};"div span p a button input form label ul li ol header footer main section article nav aside h1 h2 h3 h4 h5 h6 img svg path circle rect line polyline polygon g defs text tspan use image ellipse foreignObject linearGradient radialGradient stop pattern mask clipPath filter feColorMatrix feBlend feGaussianBlur animate animateTransform set metadata desc title symbol marker view br hr pre code strong em table tr td th thead tbody tfoot select option textarea iframe video audio canvas".split(" ").forEach((e=>{globalThis[e[0].toUpperCase()+e.slice(1)]=(t,...n)=>Tag(e,t,...n)}));export default{$:$,set:set,Watch:Watch,watch:watch,computed:computed,untrack:untrack,Tag:Tag,If:If,For:For,Router:Router,createApp:createApp,removeNode:removeNode,navigate:navigate,currentPath:currentPath,onMount:onMount,onUnmount:onUnmount}; |