### Mount Component (Vue.js) Source: https://github.com/zzzteph/weakpass/blob/main/tools/passgen/dist/index.html Mounts a component to the DOM. This involves calling the setup function if it exists, rendering the component, and performing initial DOM patching. ```javascript function mountComponent(instance, isHydrate) { instance.isMounted = false; const subTree = (instance.effect = new Effect(() => { if (instance.isMounted) { callHook(instance, 'beforeUpdate'); patch(instance.oldSubTree, instance.subTree, instance.vnode.el.parentNode, instance.vnode.el, instance, null, instance.appContext); callHook(instance, 'updated'); } else { callHook(instance, 'beforeMount'); const subTree = instance.subTree = renderComponentRoot(instance); patch(null, subTree, instance.vnode.el.parentNode, instance.vnode.el, instance, null, instance.appContext); instance.oldSubTree = subTree; instance.isMounted = true; callHook(instance, 'mounted'); } }, { scheduler: queueJob })); const update = subTree.update; subTree.update = () => { if (update) { update(); } }; return subTree; } ``` -------------------------------- ### Install Project Dependencies with npm Source: https://github.com/zzzteph/weakpass/blob/main/tools/passcheck/README.md Installs all necessary dependencies for the project using the Node Package Manager (npm). This command is typically run once after cloning a project to set up the development environment. ```bash npm install ``` -------------------------------- ### Bulma Column Sizing (Desktop Responsive) Source: https://github.com/zzzteph/weakpass/blob/main/tools/passgen/dist/index.html Defines column widths and their corresponding horizontal offsets for desktop viewports. These classes offer granular control over layout for larger screens. ```css @media screen and (min-width: 1024px){.column.is-narrow-desktop{flex:none;width:unset}.column.is-full-desktop{flex:none;width:100%}.column.is-three-quarters-desktop{flex:none;width:75%}.column.is-two-thirds-desktop{flex:none;width:66.6666%}.column.is-half-desktop{flex:none;width:50%}.column.is-one-third-desktop{flex:none;width:33.3333%}.column.is-one-quarter-desktop{flex:none;width:25%}.column.is-one-fifth-desktop{flex:none;width:20%}.column.is-two-fifths-desktop{flex:none;width:40%}.column.is-three-fifths-desktop{flex:none;width:60%}.column.is-four-fifths-desktop{flex:none;width:80%}.column.is-offset-three-quarters-desktop{margin-inline-start:75%}.column.is-offset-two-thirds-desktop{margin-inline-start:66.6666%}.column.is-offset-half-desktop ``` -------------------------------- ### Install Dependencies for Passgen Tool Source: https://context7.com/zzzteph/weakpass/llms.txt Command to install Node.js dependencies for the 'passgen' tool. This is a standard npm command used to download and set up the necessary packages for the tool to run. ```bash # Setup any tool (passgen, lookup, passcheck, kraker-js) cd tools/passgen npm install ``` -------------------------------- ### Run Vite Development Server Source: https://context7.com/zzzteph/weakpass/llms.txt Command to start a development server using Vite for the project. Vite is a modern build tool that offers fast cold server starts and instant Hot Module Replacement (HMR). ```bash # Development server (Vite) npm run dev ``` -------------------------------- ### Dependency Tracking and Update Scheduling in Vue Source: https://github.com/zzzteph/weakpass/blob/main/tools/passgen/dist/index.html This snippet illustrates the core logic for tracking dependencies (`oe`, `Un`) and scheduling updates (`Pn`). It shows how `_trackId` and `_depsLength` are used to manage reactive effects and how `_shouldSchedule` and `scheduler` properties control when and how updates are triggered. The `ps` array acts as a queue for pending scheduler tasks. ```javascript function Gi(e){return e.value} function qs(e){e._trackId++,e._depsLength=0} function en(e){if(e.deps.length>e._depsLength){for(let t=e._depsLength;t{for(const o of i)if(o.type==="childList")for(const r of o.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&n(r)}).observe(document,{childList:!0,subtree:!0});function s(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerPolicy&&(o.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?o.credentials="include":i.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function n(i){if(i.ep)return;i.ep=!0;const o=s(i);fetch(i.href,o)}})(); ``` -------------------------------- ### Vue Map and Set Reactivity Handlers Source: https://github.com/zzzteph/weakpass/blob/main/tools/passgen/dist/index.html This snippet details how Vue handles reactivity for `Map` and `Set` data structures. It defines custom handlers for methods like `get`, `set`, `add`, `delete`, and `clear`, ensuring that property access and modifications trigger dependency tracking and updates appropriately. The `_e` function is used to signal these changes to the reactivity system. ```javascript function _e(e,t,s,n,i,o){ const r=hs.get(e); if(!r)return; let c=[] if(t==="clear")c=[...r.values()]; else if(s==="length"&&v(e)){ const f=Number(n); r.forEach((g,C)=>{ (C==="length"||!$e(C)&&C>=f)&&c.push(g) }) } else switch(s!==void 0&&c.push(r.get(s)),t){ case"add":v(e)?ws(s)&&c.push(r.get("length")):(c.push(r.get(Ve)),dt(e)&&c.push(r.get(As)));break; case"delete":v(e)||(c.push(r.get(Ve)),dt(e)&&c.push(r.get(As)));break; case"set":dt(e)&&c.push(r.get(Ve));break } Ss(); for(const f of c)f&&Pn(f,4); vs() } const Yn=(e,t)=>{const s=new Map;return s.cleanup=e,s.computed=t,s}, hs=new WeakMap, Ve=Symbol("__ob__"), As=Symbol("__v_isRef"); function oe(e,t,s){ if(Ne&&Xe){ let n=hs.get(e); n||hs.set(e,n=new Map); let i=n.get(s); i||n.set(s,i=Yn(()=>n.delete(s))), Un(Xe,i) } } function wt(e,t=!1,s=!1,n=!1){ e=e.__v_raw; const i=Y(e), o=Y(t); s||(Be(t,o)&&oe(i,"get",t),oe(i,"get",o)); const{has:r}=Zt(i), c=n?Ns:s?js:Mt; if(r.call(i,t))return c(e.get(t)); if(r.call(i,o))return c(e.get(o)); e!==i&&e.get(t) } function Et(e,t=!1){ const s=this.__v_raw, n=Y(s), i=Y(e); return t||(Be(e,i)&&oe(n,"has",e),oe(n,"has",i)),e===i?s.has(e):s.has(e)||s.has(i) } function xt(e,t=!1){ return e=e.__v_raw, !t&&oe(Y(e),"iterate",Ve), Reflect.get(e,"size",e) } function sn(e){ e=Y(e); const t=Y(this); return Zt(t).has.call(t,e)||(t.add(e),_e(t,"add",e,e)),this } function nn(e,t){ t=Y(t); const s=Y(this), {has:n,get:i}=Zt(s); let o=n.call(s,e); o||(e=Y(e),o=n.call(s,e)); const r=i.call(s,e); return s.set(e,t),o?Be(t,r)&&_e(s,"set",e,t):_e(s,"add",e,t) } ``` -------------------------------- ### Vendor Prefix Handling for Styles Source: https://github.com/zzzteph/weakpass/blob/main/tools/passgen/dist/index.html A utility to normalize style property names, including handling common vendor prefixes (Webkit, Moz, ms). It caches the resolved property names for efficiency. ```javascript const mn=["Webkit","Moz","ms"],fs={};function Yr(e,t){const s=fs[t];if(s)return s;let n=ot(t);if(n!=="filter"&&n in e)return fs[t]=n;n=On(n);for(let i=0;ie!="arguments"&&e!="caller").map(e=>Symbol[e]).filter($e)),tn=qi(); function qi(){ const e={}; return ["includes", "indexOf", "lastIndexOf"].forEach(t=>{ e[t]=function(...s){ const n=Y(this); for(let o=0,r=this.length;o{ e[t]=function(...s){ Fe(),Ss(); const n=Y(this)[t].apply(this,s); return vs(),je(),n } }), e } function eo(e){ $e(e)||(e=String(e)); const t=Y(this); return oe(t, "has", e),t.hasOwnProperty(e) } class Hn { constructor(t=!1,s=!1){ this._isReadonly=t, this._isShallow=s } get(t,s,n){ const i=this._isReadonly, o=this._isShallow; if(s==="__v_isReactive")return!i; if(s==="__v_isReadonly")return i; if(s==="__v_isShallow")return o; if(s==="__v_raw")return n===(i?o?Co:$n:o?Vn:Xn).get(t)||Object.getPrototypeOf(t)===Object.getPrototypeOf(n)?t:void 0; const r=v(t); if(!i){ if(r&&W(tn,s))return Reflect.get(tn,s,n); if(s==="hasOwnProperty")return eo } const c=Reflect.get(t,s,n); return ($e(s)?zn.has(s):Zi(s))||(i||oe(t,"get",s),o)?c:re(c)?r&&ws(s)?c:c.value:G(c)?i?Gn(c):Bs(c):c } } class Ln extends Hn { constructor(t=!1){ super(!1,t) } set(t,s,n,i){ let o=t[s]; if(!this._isShallow){ const f=Qt(o); if(!Pt(n)&&!Qt(n)&&(o=Y(o),n=Y(n)),!v(t)&&re(o)&&!re(n)) return f?!1:(o.value=n,!0) } const r=v(t)&&ws(s)?Number(s)