https://www.elledecor.com/_assets/fre/scopes/hdm/_next/static/chunks/pages/demos/timer-d800d010ae0afecf.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[22946],{3637:(e,t,n)=>{"use strict";n.d(t,{Q0:()=>i,n6:()=>u,rX:()=>l});var r=n(56317);let i=(0,r.eU)(void 0),l=(0,r.eU)(void 0),u=(0,r.eU)(void 0)},4207:(e,t,n)=>{"use strict";n.r(t),n.d(t,{__N_SSP:()=>l,default:()=>u});var r=n(20882),i=n(9954),l=!0;function u({times:e,cdnCacheDemo:t}){return(0,i.Y)("div",null,(0,i.Y)("h1",null,"DynamicTime Demo"),(0,i.Y)("p",null,"Watch the relative times update dynamically every minute.",(0,i.Y)("br",null),"Times within 24 hours show relative format; older times show the date."),(0,i.Y)("hr",null),(0,i.Y)("h2",null,"Regular Examples (Fresh Server Time)"),(0,i.Y)("div",null,(0,i.Y)("div",null,(0,i.Y)("strong",null,"1 month ago: "),(0,i.Y)(r.A,{datetime:e.oneMonthAgo}),(0,i.Y)("small",null," (",e.oneMonthAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"25 hours ago: "),(0,i.Y)(r.A,{datetime:e.twentyFiveHoursAgo}),(0,i.Y)("small",null," (",e.twentyFiveHoursAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"12 hours ago: "),(0,i.Y)(r.A,{datetime:e.twelveHoursAgo}),(0,i.Y)("small",null," (",e.twelveHoursAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"1 hour ago: "),(0,i.Y)(r.A,{datetime:e.oneHourAgo}),(0,i.Y)("small",null," (",e.oneHourAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"59 minutes ago: "),(0,i.Y)(r.A,{datetime:e.fiftyNineMinutesAgo}),(0,i.Y)("small",null," (",e.fiftyNineMinutesAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"30 minutes ago: "),(0,i.Y)(r.A,{datetime:e.thirtyMinutesAgo}),(0,i.Y)("small",null," (",e.thirtyMinutesAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"5 minutes ago: "),(0,i.Y)(r.A,{datetime:e.fiveMinutesAgo}),(0,i.Y)("small",null," (",e.fiveMinutesAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"1 minute ago: "),(0,i.Y)(r.A,{datetime:e.oneMinuteAgo}),(0,i.Y)("small",null," (",e.oneMinuteAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,"Just Now (30 seconds ago): "),(0,i.Y)(r.A,{datetime:e.thirtySecondsAgo}),(0,i.Y)("small",null," (",e.thirtySecondsAgo,")"))),(0,i.Y)("hr",null),(0,i.Y)("h2",null,"CDN Cache Simulation"),(0,i.Y)("p",null,(0,i.Y)("strong",null,"How this works:")," The server rendered this page with timestamps calculated"," ",(0,i.Y)("strong",null,t.cacheAgeMinutes," minutes ago")," (simulating a CDN-cached page).",(0,i.Y)("br",null),(0,i.Y)("br",null),(0,i.Y)("strong",null,"Without inline script:"),' You would see "1 minute ago" flash to "',t.cacheAgeMinutes+1,' minutes ago" on hydration.',(0,i.Y)("br",null),(0,i.Y)("strong",null,"With inline script:")," The correct time is shown immediately - no flicker!"),(0,i.Y)("div",null,(0,i.Y)("h3",null,"Simulated Stale Cache Examples"),(0,i.Y)("p",null,'Server thought these were "1 minute ago" and "5 minutes ago" when it rendered ',t.cacheAgeMinutes," minutes ago:"),(0,i.Y)("div",null,(0,i.Y)("strong",null,'Server rendered as "1 minute ago": '),(0,i.Y)("span",null,(0,i.Y)(r.A,{datetime:t.wasOneMinuteAgo})),(0,i.Y)("br",null),(0,i.Y)("small",null,'Actual: should now show "',t.cacheAgeMinutes+1,' minutes ago" (',t.wasOneMinuteAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,'Server rendered as "5 minutes ago": '),(0,i.Y)("span",null,(0,i.Y)(r.A,{datetime:t.wasFiveMinutesAgo})),(0,i.Y)("br",null),(0,i.Y)("small",null,'Actual: should now show "',t.cacheAgeMinutes+5,' minutes ago" (',t.wasFiveMinutesAgo,")")),(0,i.Y)("div",null,(0,i.Y)("strong",null,'Server rendered as "Just Now": '),(0,i.Y)("span",null,(0,i.Y)(r.A,{datetime:t.wasJustNow})),(0,i.Y)("br",null),(0,i.Y)("small",null,'Actual: should now show "',t.cacheAgeMinutes,' minutes ago" (',t.wasJustNow,")"))),(0,i.Y)("hr",null),(0,i.Y)("h2",null,"How it works"),(0,i.Y)("ul",null,(0,i.Y)("li",null,(0,i.Y)("strong",null,"<1 minute:"),' Shows "Just Now"'),(0,i.Y)("li",null,(0,i.Y)("strong",null,"1-59 minutes:"),' Shows "X minutes ago"'),(0,i.Y)("li",null,(0,i.Y)("strong",null,"1-23 hours:"),' Shows "X hours ago"'),(0,i.Y)("li",null,(0,i.Y)("strong",null,"24+ hours:"),' Shows absolute date (e.g., "Feb 3, 2026")')),(0,i.Y)("h2",null,"Features"),(0,i.Y)("ul",null,(0,i.Y)("li",null,(0,i.Y)("strong",null,"CDN-cache friendly:")," Inline script updates stale cached content before first paint - no flicker!"),(0,i.Y)("li",null,(0,i.Y)("strong",null,"Hydration-safe:")," React reads from the global registry set by the inline script, avoiding hydration mismatch"),(0,i.Y)("li",null,(0,i.Y)("strong",null,"SEO-friendly:")," Uses semantic <time> element with datetime attribute"),(0,i.Y)("li",null,(0,i.Y)("strong",null,"Efficient:")," All instances share a single global timer (1 timer total, not 1 per component)"),(0,i.Y)("li",null,(0,i.Y)("strong",null,"Auto-cleanup:")," Timer stops when no components need updates (e.g., all showing dates)")))}},20882:(e,t,n)=>{"use strict";n.d(t,{A:()=>j});var r=n(1873),i=n(53520),l=n(71055),u=n(12625),o=n(56317),a=n(33305),s=n(80391),c=n.n(s),m=n(93682);let d=["children","tag"];function f(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function g(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};

1t%2?f(Object(n),!0).forEach(function(t){(0,m.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}let y=function(e){let{children:t,tag:n="script"}=e,r=(0,i.A)(e,d);return(0,l.createElement)(n,g(g({},r),{},{dangerouslySetInnerHTML:{__html:t}}))};var h=n(9954);function p(){return(0,h.Y)(y,{id:"dynamic-time-script"},c())}let v=(0,o.eU)(Date.now()),Y=(0,o.eU)(0),w=(0,o.eU)(null),b=(0,o.eU)(null,(e,t)=>{let n=e(Y);if(t(Y,n+1),0===n){let e=setInterval(()=>{t(v,Date.now())},6e4);t(w,e)}}),O=(0,o.eU)(null,(e,t)=>{let n=Math.max(0,e(Y)-1);if(t(Y,n),0===n){let n=e(w);null!==n&&(clearInterval(n),t(w,null))}});function A(e){var t=Date.now(),n=new Date(e).getTime();if(Number.isNaN(n))return{text:"",isDynamic:!1};var r=t-n;if(r<0)return{text:new Date(n).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}),isDynamic:!1};if(r<6e4)return{text:"Just Now",isDynamic:!0};if(r<36e5){var i=Math.floor(r/6e4);return{text:i+" minute"+(1!==i?"s":"")+" ago",isDynamic:!0}}if(r<864e5){var l=Math.floor(r/36e5);return{text:l+" hour"+(1!==l?"s":"")+" ago",isDynamic:!0}}return{text:new Date(n).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}),isDynamic:!1}}var S=n(71055);let D=["datetime"];function j(e){let t,n,s,c,m,{datetime:d}=e,f=(0,i.A)(e,D),g=(t=(0,u.Xr)(b),n=(0,u.Xr)(O),s=(0,l.useMemo)(()=>(0,o.eU)(e=>(e(v),A(d).text)),[d]),c=(0,u.md)(s),m=A(d).isDynamic,(0,l.useEffect)(()=>{if(m)return t(),()=>n()},[m,t,n]),c),y=new Date(d).toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric",hour:"numeric",minute:"2-digit",hour12:!0});return(0,h.Y)(S.Fragment,null,(0,h.Y)(a.Q,{name:"document-after-body",append:"dynamic-time",once:!0},(0,h.Y)(p,null)),(0,h.Y)("time",(0,r.A)({dateTime:d,"data-dynamic":!0,title:y},f),g))}},23472:(e,t,n)=>{"use strict";n.d(t,{el:()=>v,_E:()=>w,Cs:()=>Y});var r=n(53520),i=n(93682),l=n(71055),u=n(12625),o=n(84239),a=n(77089);function s(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach(function(t){(0,i.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function d(e,t,n){return t?e:n===e?void 0:n}function f(e,t){return!!e?.lockedBy&&e.lockedBy!==t}function g(e,t,n,i,l){let u=e?.[t];if(!u?.multi||!(n in u.entries))return e;let o=u.entries,{[n]:a}=o,c=(0,r.A)(o,[n].map(s)),d=u.ids.filter(e=>e!==n),f=u.priorities||{},{[n]:g}=f,y=(0,r.A)(f,[n].map(s)),h=Object.values(y).some(e=>0!==e);if(0===d.length){let{[t]:n}=e;return(0,r.A)(e,[t].map(s))}let p=l&&u.lockedBy===i;return m(m({},e),{},{[t]:m(m({entries:c,ids:d,multi:!0},u.lockedBy&&!p?{lockedBy:u.lockedBy}:{}),h?{priorities:y}:{})})}function y(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)}return n}function p(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};

1t%2?h(Object(n),!0).forEach(function(t){(0,i.A)(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function v(e,t){return e===t||!!(0,a.dv)(e)&&!!(0,a.dv)(t)&&e.length===t.length&&e.every((e,n)=>e.id===t[n].id&&e.value===t[n].value)}function Y(e,t,n,i=!1,o=!1,a=!1,s=0){let c=(0,u.Xr)(e),h=(0,l.useRef)(void 0),v=(0,l.useId)(),w="string"==typeof i?i:v;!function(e,t){if("P"===e[0])return t();let n=console.error;console.error=(...e)=>{"string"==typeof e[0]&&e[0].includes("Cannot update a component")||n.apply(console,e)};try{return t()}finally{console.error=n}}(v,()=>c(e=>{var l,u;let c;if(i){let r,i,l,u,c,y,Y=e?.[t];if(Y?.entries?.[w]===n&&Y?.lockedBy===(a?v:void 0)&&(Y?.priorities?.[w]??0)===s||f(Y,v)||o&&!h.current&&Y?.multi&&w in Y.entries)return e;h.current&&h.current.key!==t&&(e=g(e,h.current.key,h.current.id,v,!!h.current.locked)),h.current&&h.current.key===t&&h.current.id!==w&&(e=g(e,t,h.current.id,v,!!h.current.locked));let b=e?.[t];return h.current={key:t,id:w,append:!0,locked:a},p(p({},e),{},{[t]:(r=b?.multi?b.entries:{},i=b?.multi?b.ids.filter(e=>e!==w):[],l=d(v,a,b?.lockedBy),u=m(m({},b?.priorities),{},{[w]:s}),c=[...i,w],(y=Object.values(u).some(e=>0!==e))&&c.sort((e,t)=>(u[t]??0)-(u[e]??0)),m(m({entries:m(m({},r),{},{[w]:n}),ids:c,multi:!0},l?{lockedBy:l}:{}),y?{priorities:u}:{}))})}if(h.current&&h.current.key!==t){let t=e??{},n=h.current.key,{[n]:i}=t,l=(0,r.A)(t,[n].map(y));i?.id===h.current.id&&(e=l)}if(e?.[t]&&(l=e[t],u=!!h.current,f(l,v)||l[w]===n&&l.lockedBy===(a?v:void 0)||l.selected&&l.id!==w||o&&!u&&l.id!==w||0))return e;let Y=e?.[t];return h.current={key:t,id:w,locked:a},p(p({},e),{},{[t]:m({[w]:n,id:w},(c=d(v,a,Y?.lockedBy))?{lockedBy:c}:{})})})),(0,l.useEffect)(()=>()=>{c(e=>{if(!e||!h.current||!e[h.current.key])return e;let t=h.current.id;if(h.current.append)return g(e,h.current.key,t,v,!!h.current.locked);let n=h.current.key,{[n]:i}=e,l=(0,r.A)(e,[n].map(y));return i?.id===t?l:e})},[c,v])}function w(e,t){let n=(0,u.Xr)(t),r=(0,u.md)((0,o.mg)(t,(0,l.useCallback)(t=>(0,a.L2)(t?.[e]),[e]),v));return(0,l.useEffect)(()=>{n(t=>{if(!t?.[e])return t;let n=t[e];return"multi"in n&&n.multi||n.selected?t:p(p({},t),{},{[e]:p(p({},n),{},{selected:!0})})})},[e,n]),r}},33305:(e,t,n)=>{"use strict";n.d(t,{Q:()=>l});var r=n(23472),i=n(3637);function l({name:e,children:t=null,append:n=!1,once:u=!1,locked:o=!1,priority:a=0}){return(0,r.Cs)(i.Q0,e,t,n,u,o,a),null}},77089:(e,t,n)=>{"use strict";n.d(t,{L2:()=>l,dv:()=>i,hO:()=>u});let r=Symbol.for("slot-multi");function i(e){return Array.isArray(e)&&!0===e[r]}function l(e){if(e){if("multi"in e&&e.multi){if(!e.ids?.length)return;let t=e.ids.map(t=>({id:t,value:e.entries[t]}));return Object.defineProperty(t,r,{value:!0}),t}return e[e.id]}}function u(e){return i(e)?e.map(({value:e})=>e):e}},80391:e=>{e.exports='!function(){function t(t){var e=6e4,n=36e5,r=Date.now(),i=new Date(t).getTime();if(Number.isNaN(i))return{text:"",isDynamic:!1};var a=r-i;if(a<0)return{text:new Date(i).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}),isDynamic:!1};if(a<e)return{text:"Just Now",isDynamic:!0};if(a<n){var o=Math.floor(a/e);return{text:o+" minute"+(1!==o?"s":"")+" ago",isDynamic:!0}}if(a<864e5){var c=Math.floor(a/n);return{text:c+" hour"+(1!==c?"s":"")+" ago",isDynamic:!0}}return{text:new Date(i).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"}),isDynamic:!1}}(()=>{const e=document.querySelectorAll("time[data-dynamic]");for(let n=0;n<e.length;n++){const r=e[n],i=t(r.getAttribute("dateTime"));r.textContent=i.text}})()}();'},84239:(e,t,n)=>{"use strict";n.d(t,{mg:()=>o,tG:()=>c});var r=n(56317);let i=Symbol("RESET"),l=(e,t,n)=>(t.has(n)?t:t.set(n,e())).get(n),u=new WeakMap;function o(e,t,n=Object.is){var i;let a,s;return i=()=>{let i=Symbol(),l=(0,r.eU)(r=>{let u=r(l);return(([e,r])=>{if(r===i)return t(e);let l=t(e,r);return n(r,l)?r:l})([r(e),u])});return l.init=i,l},a=l(()=>new WeakMap,u,e),s=l(()=>new WeakMap,a,t),l(i,s,n)}let a=e=>"function"==typeof(null==e?void 0:e.then),s=function(e=()=>{try{return window.localStorage}catch(e){"u">typeof window&&console.warn(e);return}}){var t;let n,r,i,l,u={getItem:(t,i)=>{var l,u;let o=e=>{if(n!==(e=e||"")){try{r=JSON.parse(e,void 0)}catch(e){return i}n=e}return r},s=null!=(u=null==(l=e())?void 0:l.getItem(t))?u:null;return a(s)?s.then(o):o(s)}

1,setItem:(t,n)=>{var r;return null==(r=e())?void 0:r.setItem(t,JSON.stringify(n,void 0))},removeItem:t=>{var n;return null==(n=e())?void 0:n.removeItem(t)}};try{i=null==(t=e())?void 0:t.subscribe}catch(e){}return!i&&"u">typeof window&&"function"==typeof window.addEventListener&&window.Storage&&(i=(t,n)=>{if(!(e()instanceof window.Storage))return()=>{};let r=r=>{r.storageArea===e()&&r.key===t&&n(r.newValue)};return window.addEventListener("storage",r),()=>{window.removeEventListener("storage",r)}}),i&&(l=i,u.subscribe=(e,t,n)=>l(e,e=>{let r;try{r=JSON.parse(e||"")}catch(e){r=n}t(r)})),u}();function c(e,t,n=s,l){let u=null==l?void 0:l.getOnInit,o=(0,r.eU)(u?n.getItem(e,t):t);return o.debugPrivate=!0,o.onMount=r=>{var i;return r(n.getItem(e,t)),null==(i=n.subscribe)?void 0:i.call(n,e,r,t)},(0,r.eU)(e=>e(o),(r,l,u)=>{let s="function"==typeof u?u(r(o)):u;return s===i?(l(o,t),n.removeItem(e)):a(s)?s.then(t=>(l(o,t),n.setItem(e,t))):(l(o,s),n.setItem(e,s))})}},99845:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/demos/timer",function(){return n(4207)}])}},e=>{e.O(0,[46593,90636,38792],()=>e(e.s=99845)),_N_E=e.O()}]);