@koine/next 2.0.0-beta.82 → 2.0.0-beta.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/12.cjs.js CHANGED
@@ -14,7 +14,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
14
  var o__default = /*#__PURE__*/_interopDefaultLegacy(o);
15
15
  var r__default = /*#__PURE__*/_interopDefaultLegacy(r);
16
16
 
17
- let AnalyticsGoogle=({id:s})=>{let l=s||process.env.NEXT_PUBLIC_GTM_ID,{events:m,asPath:c,query:d}=router.useRouter(),[p,f]=react.useState(!1),[w,u]=react.useState(!1);return (react.useEffect(()=>{let e=()=>{u(!0);};return m.on("routeChangeComplete",e),()=>{m.off("routeChangeComplete",e);}},[m]),react.useEffect(()=>{w&&p&&c&&browser.gtagPageview(c);},[c,d,w,p]),l)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(o__default["default"],{id:"google-tagmanager",src:`https://www.googletagmanager.com/gtag/js?id=${s}`,strategy:"afterInteractive",onLoad:()=>f(!0)}),jsxRuntime.jsx(o__default["default"],{id:"google-analytics",strategy:"afterInteractive",children:`
17
+ /** Falls back to `.env` variable `NEXT_PUBLIC_GTM_ID` */let AnalyticsGoogle=({id:s})=>{let l=s||process.env.NEXT_PUBLIC_GTM_ID,{events:m,asPath:c,query:d}=router.useRouter(),[p,f]=react.useState(!1),[w,u]=react.useState(!1);return (// const [url, setUrl] = useState("");
18
+ react.useEffect(()=>{let e=()=>{u(!0);};return m.on("routeChangeComplete",e),()=>{m.off("routeChangeComplete",e);}},[m]),react.useEffect(()=>{w&&p&&c&&// const search = query;
19
+ browser.gtagPageview(c);},[c,d,w,p]),l)?/*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[/*#__PURE__*/jsxRuntime.jsx(o__default["default"],{id:"google-tagmanager",src:`https://www.googletagmanager.com/gtag/js?id=${s}`,strategy:"afterInteractive",onLoad:()=>f(!0)}),/*#__PURE__*/jsxRuntime.jsx(o__default["default"],{id:"google-analytics",strategy:"afterInteractive",children:`
18
20
  window.dataLayer = window.dataLayer || [];
19
21
  function gtag(){window.dataLayer.push(arguments);}
20
22
  gtag('js', new Date());
@@ -22,7 +24,11 @@ let AnalyticsGoogle=({id:s})=>{let l=s||process.env.NEXT_PUBLIC_GTM_ID,{events:m
22
24
  gtag('config', '${s}', { 'send_page_view': false });
23
25
  `})]}):null};
24
26
 
25
- let DisableErrorOverlay=()=>jsxRuntime.jsx(r__default["default"],{children:"development"===process.env.NODE_ENV&&jsxRuntime.jsx("script",{dangerouslySetInnerHTML:{__html:"window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});"}})});
27
+ /**
28
+ * Disable error overlay during `dev`
29
+ *
30
+ * @see https://github.com/vercel/next.js/discussions/13387#discussioncomment-101564
31
+ */let DisableErrorOverlay=()=>/*#__PURE__*/jsxRuntime.jsx(r__default["default"],{children:"development"===process.env.NODE_ENV&&/*#__PURE__*/jsxRuntime.jsx("script",{dangerouslySetInnerHTML:{__html:"window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});"}})});
26
32
 
27
33
  exports.AnalyticsGoogle = AnalyticsGoogle;
28
34
  exports.DisableErrorOverlay = DisableErrorOverlay;
package/12.esm.js CHANGED
@@ -5,7 +5,9 @@ import { useState, useEffect } from 'react';
5
5
  import { gtagPageview } from '@koine/browser';
6
6
  import r from 'next/head';
7
7
 
8
- let AnalyticsGoogle=({id:s})=>{let l=s||process.env.NEXT_PUBLIC_GTM_ID,{events:m,asPath:c,query:d}=useRouter(),[p,f]=useState(!1),[w,u]=useState(!1);return (useEffect(()=>{let e=()=>{u(!0);};return m.on("routeChangeComplete",e),()=>{m.off("routeChangeComplete",e);}},[m]),useEffect(()=>{w&&p&&c&&gtagPageview(c);},[c,d,w,p]),l)?jsxs(Fragment,{children:[jsx(o,{id:"google-tagmanager",src:`https://www.googletagmanager.com/gtag/js?id=${s}`,strategy:"afterInteractive",onLoad:()=>f(!0)}),jsx(o,{id:"google-analytics",strategy:"afterInteractive",children:`
8
+ /** Falls back to `.env` variable `NEXT_PUBLIC_GTM_ID` */let AnalyticsGoogle=({id:s})=>{let l=s||process.env.NEXT_PUBLIC_GTM_ID,{events:m,asPath:c,query:d}=useRouter(),[p,f]=useState(!1),[w,u]=useState(!1);return (// const [url, setUrl] = useState("");
9
+ useEffect(()=>{let e=()=>{u(!0);};return m.on("routeChangeComplete",e),()=>{m.off("routeChangeComplete",e);}},[m]),useEffect(()=>{w&&p&&c&&// const search = query;
10
+ gtagPageview(c);},[c,d,w,p]),l)?/*#__PURE__*/jsxs(Fragment,{children:[/*#__PURE__*/jsx(o,{id:"google-tagmanager",src:`https://www.googletagmanager.com/gtag/js?id=${s}`,strategy:"afterInteractive",onLoad:()=>f(!0)}),/*#__PURE__*/jsx(o,{id:"google-analytics",strategy:"afterInteractive",children:`
9
11
  window.dataLayer = window.dataLayer || [];
10
12
  function gtag(){window.dataLayer.push(arguments);}
11
13
  gtag('js', new Date());
@@ -13,6 +15,10 @@ let AnalyticsGoogle=({id:s})=>{let l=s||process.env.NEXT_PUBLIC_GTM_ID,{events:m
13
15
  gtag('config', '${s}', { 'send_page_view': false });
14
16
  `})]}):null};
15
17
 
16
- let DisableErrorOverlay=()=>jsx(r,{children:"development"===process.env.NODE_ENV&&jsx("script",{dangerouslySetInnerHTML:{__html:"window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});"}})});
18
+ /**
19
+ * Disable error overlay during `dev`
20
+ *
21
+ * @see https://github.com/vercel/next.js/discussions/13387#discussioncomment-101564
22
+ */let DisableErrorOverlay=()=>/*#__PURE__*/jsx(r,{children:"development"===process.env.NODE_ENV&&/*#__PURE__*/jsx("script",{dangerouslySetInnerHTML:{__html:"window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});"}})});
17
23
 
18
24
  export { AnalyticsGoogle, DisableErrorOverlay };
@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var react = require('react');
6
6
 
7
- const ThemeContext=react.createContext({setTheme:e=>{},themes:[]});
7
+ /** List of all available theme names *//** Forced theme name for the current page *//** Update the theme *//** Active theme name *//** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` *//** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */const ThemeContext=/*#__PURE__*/react.createContext({// eslint-disable-next-line @typescript-eslint/no-empty-function
8
+ setTheme:e=>{},themes:[]});
8
9
 
9
10
  exports.ThemeContext = ThemeContext;
10
11
  exports["default"] = ThemeContext;
@@ -1,5 +1,6 @@
1
1
  import { createContext } from 'react';
2
2
 
3
- const ThemeContext=createContext({setTheme:e=>{},themes:[]});
3
+ /** List of all available theme names *//** Forced theme name for the current page *//** Update the theme *//** Active theme name *//** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` *//** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */const ThemeContext=/*#__PURE__*/createContext({// eslint-disable-next-line @typescript-eslint/no-empty-function
4
+ setTheme:e=>{},themes:[]});
4
5
 
5
6
  export { ThemeContext, ThemeContext as default };
@@ -12,7 +12,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var o__default = /*#__PURE__*/_interopDefaultLegacy(o);
14
14
 
15
- let l=["light","dark"],d="(prefers-color-scheme: dark)",c="theme";const ThemeProvider=({forcedTheme:r,disableTransitionOnChange:o=!1,enableSystem:v=!0,enableColorScheme:y,themes:p=["light","dark"],defaultTheme:g=v?"system":"light",attribute:w="data-theme",value:x,children:S,nonce:k})=>{let[b,L]=react.useState(()=>u(c,g)),[T,j]=react.useState(()=>u(c)),C=x?Object.values(x):p,E=react.useCallback(e=>{let t=e;if(utils.isServer||!t)return;"system"===e&&v&&(t=f());let r=x?x[t]:t,i=o?$():null,n=document.documentElement;if("class"===w?(n.classList.remove(...C),r&&n.classList.add(r)):r?n.setAttribute(w,r):n.removeAttribute(w),y){let e=l.includes(g)?g:"",r=l.includes(t)?t:e;n.style.colorScheme=r;}i?.();},[w,C,g,o,y,v,x]),I=react.useCallback(e=>{L(e);try{localStorage.setItem(c,e);}catch(e){}},[]),M=react.useCallback(e=>{j(f(e)),"system"===b&&v&&!r&&E("system");},[b,v,r,E]);return react.useEffect(()=>{let e=window.matchMedia(d);return e.addListener(M),M(e),()=>e.removeListener(M)},[M]),react.useEffect(()=>{let e=e=>{e.key===c&&I(e.newValue||g);};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[g,I]),react.useEffect(()=>{E(r??b);},[E,r,b]),jsxRuntime.jsxs(ThemeContext.ThemeContext.Provider,{value:{theme:b,setTheme:I,forcedTheme:r,resolvedTheme:"system"===b?T:b,themes:v?[...p,"system"]:p,systemTheme:v?T:void 0},children:[jsxRuntime.jsx(h,{forcedTheme:r,disableTransitionOnChange:o,enableSystem:v,enableColorScheme:y,themes:p,defaultTheme:g,attribute:w,value:x,children:S,attrs:C,nonce:k}),S]})};let h=react.memo(({forcedTheme:t,attribute:o,enableSystem:i,enableColorScheme:n,defaultTheme:s,value:a,attrs:m,nonce:h})=>{let u="system"===s,$=(()=>{let e=`d.remove(${m.map(e=>`'${e}'`).join(",")})`;return `var d=document.documentElement.classList;${e};`})(),f=n?(l.includes(s)?s:null)?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${s}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,r=!0)=>{let i=a?a[e]:e,s=t?e+"|| ''":`'${i}'`,m="";return n&&r&&!t&&l.includes(e)&&(m+=`d.style.colorScheme = '${e}';`),"class"===o?t||i?m+=`d.add(${s})`:m+="null":i&&(m+=`d[s](n, ${s})`),m},p=t?`!function(){${$}${y(t)}}()`:i?`!function(){try {${$}var e=localStorage.getItem('${c}');if("system"===e||(!e&&${u})){var t="${d}",m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}${u?"":"else{"+y(s,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${$}var e=localStorage.getItem("${c}");if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}else{${y(s,!1,!1)};}${f}}catch(t){}}();`;return jsxRuntime.jsx(o__default["default"],{id:"next-theme-script",strategy:"beforeInteractive",src:`data:text/javascript;base64,${v(p)}`,nonce:h})},()=>!0),u=(e,t)=>{let r;if(!utils.isServer){try{r=localStorage.getItem(e)||void 0;}catch(e){}return r||t}},$=()=>{let e=document,t=e.createElement("style");return t.appendChild(e.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),e.head.appendChild(t),()=>{window.getComputedStyle(e.body),setTimeout(()=>{e.head.removeChild(t);},1);}},f=e=>(e||(e=window.matchMedia(d)),e.matches?"dark":"light"),v=e=>utils.isServer?Buffer.from(e).toString("base64"):btoa(e);
15
+ let l=["light","dark"],d="(prefers-color-scheme: dark)",c="theme";/** List of all available theme names *//** Forced theme name for the current page *//** Whether to switch between dark and light themes based on prefers-color-scheme *//** Disable all CSS transitions when switching themes *//** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons *//** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light *//** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) *//** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value *//** Nonce string to pass to the inline script for CSP headers *//**
16
+ * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
17
+ *
18
+ * Differences:
19
+ *
20
+ * - enableColorScheme: `false` by default (instead of `true`), this plays more
21
+ * nicely with tailwind `dark` class mode as dark theme is supposed to be only
22
+ * controlled by tailwind modifiers
23
+ */const ThemeProvider=({forcedTheme:r,disableTransitionOnChange:o=!1,enableSystem:v=!0,enableColorScheme:y,themes:p=["light","dark"],defaultTheme:g=v?"system":"light",attribute:w="data-theme",value:x,children:S,nonce:k})=>{let[b,L]=react.useState(()=>u(c,g)),[T,j]=react.useState(()=>u(c)),C=x?Object.values(x):p,E=react.useCallback(e=>{let t=e;if(utils.isServer||!t)return;"system"===// If theme is system, resolve it before setting theme
24
+ e&&v&&(t=f());let r=x?x[t]:t,i=o?$():null,n=document.documentElement;if("class"===w?(n.classList.remove(...C),r&&n.classList.add(r)):r?n.setAttribute(w,r):n.removeAttribute(w),y){let e=l.includes(g)?g:"",r=l.includes(t)?t:e;n.style.colorScheme=r;}i?.();},[w,C,g,o,y,v,x]),I=react.useCallback(e=>{L(e);// Save to storage
25
+ try{localStorage.setItem(c,e);}catch(e){}},// Unsupported
26
+ []),M=react.useCallback(e=>{j(f(e)),"system"===b&&v&&!r&&E("system");},[b,v,r,E]);return(// Always listen to System preference
27
+ react.useEffect(()=>{let e=window.matchMedia(d);return(// Intentionally use deprecated listener methods to support iOS & old browsers
28
+ e.addListener(M),M(e),()=>e.removeListener(M))},[M]),// localStorage event handling
29
+ react.useEffect(()=>{let e=e=>{e.key===c&&I(// If default theme set, use it if localstorage === null (happens on local storage manual deletion)
30
+ e.newValue||g);};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[g,I]),// Whenever theme or forcedTheme changes, apply it
31
+ react.useEffect(()=>{E(r??b);},[E,r,b]),/*#__PURE__*/jsxRuntime.jsxs(ThemeContext.ThemeContext.Provider,{value:{theme:b,setTheme:I,forcedTheme:r,resolvedTheme:"system"===b?T:b,themes:v?[...p,"system"]:p,systemTheme:v?T:void 0},children:[/*#__PURE__*/jsxRuntime.jsx(h,{forcedTheme:r,disableTransitionOnChange:o,enableSystem:v,enableColorScheme:y,themes:p,defaultTheme:g,attribute:w,value:x,children:S,attrs:C,nonce:k}),S]}))};let h=/*#__PURE__*/react.memo(({forcedTheme:t,attribute:o,enableSystem:i,enableColorScheme:n,defaultTheme:s,value:a,attrs:m,nonce:h})=>{let u="system"===s,// Code-golfing the amount of characters in the script
32
+ $=(()=>{let e=`d.remove(${m.map(e=>`'${e}'`).join(",")})`;return `var d=document.documentElement.classList;${e};`})(),f=n?(l.includes(s)?s:null)?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${s}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,r=!0)=>{let i=a?a[e]:e,s=t?e+"|| ''":`'${i}'`,m="";return(// MUCH faster to set colorScheme alongside HTML attribute/class
33
+ // as it only incurs 1 style recalculation rather than 2
34
+ // This can save over 250ms of work for pages with big DOM
35
+ n&&r&&!t&&l.includes(e)&&(m+=`d.style.colorScheme = '${e}';`),"class"===o?t||i?m+=`d.add(${s})`:m+="null":i&&(m+=`d[s](n, ${s})`),m)},p=t?`!function(){${$}${y(t)}}()`:i?`!function(){try {${$}var e=localStorage.getItem('${c}');if("system"===e||(!e&&${u})){var t="${d}",m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}${u?"":"else{"+y(s,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${$}var e=localStorage.getItem("${c}");if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}else{${y(s,!1,!1)};}${f}}catch(t){}}();`;return /*#__PURE__*/jsxRuntime.jsx(o__default["default"],{id:"next-theme-script",strategy:"beforeInteractive",src:// We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
36
+ // However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
37
+ // But our script cannot be external because it changes at runtime based on React props
38
+ // so we trick next/script by passing `src` as a base64 JS script
39
+ `data:text/javascript;base64,${v(p)}`,nonce:h})},// Never re-render this component
40
+ ()=>!0),// Helpers
41
+ u=(e,t)=>{let r;if(!utils.isServer){try{r=localStorage.getItem(e)||void 0;}catch(e){}// Unsupported
42
+ return r||t}},$=()=>{let e=document,t=e.createElement("style");return t.appendChild(e.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),e.head.appendChild(t),()=>{// Force restyle
43
+ window.getComputedStyle(e.body),// Wait for next tick before removing
44
+ setTimeout(()=>{e.head.removeChild(t);},1);}},f=e=>(e||(e=window.matchMedia(d)),e.matches?"dark":"light"),v=e=>utils.isServer?Buffer.from(e).toString("base64"):btoa(e);
16
45
 
17
46
  exports.ThemeProvider = ThemeProvider;
18
47
  exports["default"] = ThemeProvider;
@@ -1,9 +1,38 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import o from 'next/script';
3
- import { memo, useState, useCallback, useEffect } from 'react';
3
+ import { useState, useCallback, useEffect, memo } from 'react';
4
4
  import { isServer } from '@koine/utils';
5
5
  import { ThemeContext } from './ThemeContext.esm.js';
6
6
 
7
- let l=["light","dark"],d="(prefers-color-scheme: dark)",c="theme";const ThemeProvider=({forcedTheme:r,disableTransitionOnChange:o=!1,enableSystem:v=!0,enableColorScheme:y,themes:p=["light","dark"],defaultTheme:g=v?"system":"light",attribute:w="data-theme",value:x,children:S,nonce:k})=>{let[b,L]=useState(()=>u(c,g)),[T,j]=useState(()=>u(c)),C=x?Object.values(x):p,E=useCallback(e=>{let t=e;if(isServer||!t)return;"system"===e&&v&&(t=f());let r=x?x[t]:t,i=o?$():null,n=document.documentElement;if("class"===w?(n.classList.remove(...C),r&&n.classList.add(r)):r?n.setAttribute(w,r):n.removeAttribute(w),y){let e=l.includes(g)?g:"",r=l.includes(t)?t:e;n.style.colorScheme=r;}i?.();},[w,C,g,o,y,v,x]),I=useCallback(e=>{L(e);try{localStorage.setItem(c,e);}catch(e){}},[]),M=useCallback(e=>{j(f(e)),"system"===b&&v&&!r&&E("system");},[b,v,r,E]);return useEffect(()=>{let e=window.matchMedia(d);return e.addListener(M),M(e),()=>e.removeListener(M)},[M]),useEffect(()=>{let e=e=>{e.key===c&&I(e.newValue||g);};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[g,I]),useEffect(()=>{E(r??b);},[E,r,b]),jsxs(ThemeContext.Provider,{value:{theme:b,setTheme:I,forcedTheme:r,resolvedTheme:"system"===b?T:b,themes:v?[...p,"system"]:p,systemTheme:v?T:void 0},children:[jsx(h,{forcedTheme:r,disableTransitionOnChange:o,enableSystem:v,enableColorScheme:y,themes:p,defaultTheme:g,attribute:w,value:x,children:S,attrs:C,nonce:k}),S]})};let h=memo(({forcedTheme:t,attribute:o$1,enableSystem:i,enableColorScheme:n,defaultTheme:s,value:a,attrs:m,nonce:h})=>{let u="system"===s,$=(()=>{let e=`d.remove(${m.map(e=>`'${e}'`).join(",")})`;return `var d=document.documentElement.classList;${e};`})(),f=n?(l.includes(s)?s:null)?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${s}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,r=!0)=>{let i=a?a[e]:e,s=t?e+"|| ''":`'${i}'`,m="";return n&&r&&!t&&l.includes(e)&&(m+=`d.style.colorScheme = '${e}';`),"class"===o$1?t||i?m+=`d.add(${s})`:m+="null":i&&(m+=`d[s](n, ${s})`),m},p=t?`!function(){${$}${y(t)}}()`:i?`!function(){try {${$}var e=localStorage.getItem('${c}');if("system"===e||(!e&&${u})){var t="${d}",m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}${u?"":"else{"+y(s,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${$}var e=localStorage.getItem("${c}");if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}else{${y(s,!1,!1)};}${f}}catch(t){}}();`;return jsx(o,{id:"next-theme-script",strategy:"beforeInteractive",src:`data:text/javascript;base64,${v(p)}`,nonce:h})},()=>!0),u=(e,t)=>{let r;if(!isServer){try{r=localStorage.getItem(e)||void 0;}catch(e){}return r||t}},$=()=>{let e=document,t=e.createElement("style");return t.appendChild(e.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),e.head.appendChild(t),()=>{window.getComputedStyle(e.body),setTimeout(()=>{e.head.removeChild(t);},1);}},f=e=>(e||(e=window.matchMedia(d)),e.matches?"dark":"light"),v=e=>isServer?Buffer.from(e).toString("base64"):btoa(e);
7
+ let l=["light","dark"],d="(prefers-color-scheme: dark)",c="theme";/** List of all available theme names *//** Forced theme name for the current page *//** Whether to switch between dark and light themes based on prefers-color-scheme *//** Disable all CSS transitions when switching themes *//** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons *//** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light *//** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) *//** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value *//** Nonce string to pass to the inline script for CSP headers *//**
8
+ * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
9
+ *
10
+ * Differences:
11
+ *
12
+ * - enableColorScheme: `false` by default (instead of `true`), this plays more
13
+ * nicely with tailwind `dark` class mode as dark theme is supposed to be only
14
+ * controlled by tailwind modifiers
15
+ */const ThemeProvider=({forcedTheme:r,disableTransitionOnChange:o=!1,enableSystem:v=!0,enableColorScheme:y,themes:p=["light","dark"],defaultTheme:g=v?"system":"light",attribute:w="data-theme",value:x,children:S,nonce:k})=>{let[b,L]=useState(()=>u(c,g)),[T,j]=useState(()=>u(c)),C=x?Object.values(x):p,E=useCallback(e=>{let t=e;if(isServer||!t)return;"system"===// If theme is system, resolve it before setting theme
16
+ e&&v&&(t=f());let r=x?x[t]:t,i=o?$():null,n=document.documentElement;if("class"===w?(n.classList.remove(...C),r&&n.classList.add(r)):r?n.setAttribute(w,r):n.removeAttribute(w),y){let e=l.includes(g)?g:"",r=l.includes(t)?t:e;n.style.colorScheme=r;}i?.();},[w,C,g,o,y,v,x]),I=useCallback(e=>{L(e);// Save to storage
17
+ try{localStorage.setItem(c,e);}catch(e){}},// Unsupported
18
+ []),M=useCallback(e=>{j(f(e)),"system"===b&&v&&!r&&E("system");},[b,v,r,E]);return(// Always listen to System preference
19
+ useEffect(()=>{let e=window.matchMedia(d);return(// Intentionally use deprecated listener methods to support iOS & old browsers
20
+ e.addListener(M),M(e),()=>e.removeListener(M))},[M]),// localStorage event handling
21
+ useEffect(()=>{let e=e=>{e.key===c&&I(// If default theme set, use it if localstorage === null (happens on local storage manual deletion)
22
+ e.newValue||g);};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)},[g,I]),// Whenever theme or forcedTheme changes, apply it
23
+ useEffect(()=>{E(r??b);},[E,r,b]),/*#__PURE__*/jsxs(ThemeContext.Provider,{value:{theme:b,setTheme:I,forcedTheme:r,resolvedTheme:"system"===b?T:b,themes:v?[...p,"system"]:p,systemTheme:v?T:void 0},children:[/*#__PURE__*/jsx(h,{forcedTheme:r,disableTransitionOnChange:o,enableSystem:v,enableColorScheme:y,themes:p,defaultTheme:g,attribute:w,value:x,children:S,attrs:C,nonce:k}),S]}))};let h=/*#__PURE__*/memo(({forcedTheme:t,attribute:o$1,enableSystem:i,enableColorScheme:n,defaultTheme:s,value:a,attrs:m,nonce:h})=>{let u="system"===s,// Code-golfing the amount of characters in the script
24
+ $=(()=>{let e=`d.remove(${m.map(e=>`'${e}'`).join(",")})`;return `var d=document.documentElement.classList;${e};`})(),f=n?(l.includes(s)?s:null)?`if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${s}'`:"if(e==='light'||e==='dark')d.style.colorScheme=e":"",y=(e,t=!1,r=!0)=>{let i=a?a[e]:e,s=t?e+"|| ''":`'${i}'`,m="";return(// MUCH faster to set colorScheme alongside HTML attribute/class
25
+ // as it only incurs 1 style recalculation rather than 2
26
+ // This can save over 250ms of work for pages with big DOM
27
+ n&&r&&!t&&l.includes(e)&&(m+=`d.style.colorScheme = '${e}';`),"class"===o$1?t||i?m+=`d.add(${s})`:m+="null":i&&(m+=`d[s](n, ${s})`),m)},p=t?`!function(){${$}${y(t)}}()`:i?`!function(){try {${$}var e=localStorage.getItem('${c}');if("system"===e||(!e&&${u})){var t="${d}",m=window.matchMedia(t);if(m.media!==t||m.matches){${y("dark")}}else{${y("light")}}}else if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}${u?"":"else{"+y(s,!1,!1)+"}"}${f}}catch(e){}}()`:`!function(){try{${$}var e=localStorage.getItem("${c}");if(e){${a?`var x=${JSON.stringify(a)};`:""}${y(a?"x[e]":"e",!0)}}else{${y(s,!1,!1)};}${f}}catch(t){}}();`;return /*#__PURE__*/jsx(o,{id:"next-theme-script",strategy:"beforeInteractive",src:// We MUST use next/script's `beforeInteractive` strategy to avoid flashing on load.
28
+ // However, it only accepts the `src` prop, not `dangerouslySetInnerHTML` or `children`
29
+ // But our script cannot be external because it changes at runtime based on React props
30
+ // so we trick next/script by passing `src` as a base64 JS script
31
+ `data:text/javascript;base64,${v(p)}`,nonce:h})},// Never re-render this component
32
+ ()=>!0),// Helpers
33
+ u=(e,t)=>{let r;if(!isServer){try{r=localStorage.getItem(e)||void 0;}catch(e){}// Unsupported
34
+ return r||t}},$=()=>{let e=document,t=e.createElement("style");return t.appendChild(e.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),e.head.appendChild(t),()=>{// Force restyle
35
+ window.getComputedStyle(e.body),// Wait for next tick before removing
36
+ setTimeout(()=>{e.head.removeChild(t);},1);}},f=e=>(e||(e=window.matchMedia(d)),e.matches?"dark":"light"),v=e=>isServer?Buffer.from(e).toString("base64"):btoa(e);
8
37
 
9
38
  export { ThemeProvider, ThemeProvider as default };
package/config.cjs.js CHANGED
@@ -4,6 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var next = require('@koine/i18n/next');
6
6
 
7
- let withKoine=(n={})=>{let{nx:i,svg:t,i18nRoutes:m,i18nCompiler:s,...a}=n,k={eslint:{ignoreDuringBuilds:!0},typescript:{ignoreBuildErrors:!0},poweredByHeader:!1,experimental:{scrollRestoration:!0,...a.experimental||{}},modularizeImports:{...a.modularizeImports||{},"@koine/api":{transform:"@koine/api/{{member}}"},"@koine/browser":{transform:"@koine/browser/{{member}}"},"@koine/dom":{transform:"@koine/dom/{{member}}"},"@koine/node":{transform:"@koine/node/{{member}}"},"@koine/i18n/?(((\\w*)?/?)*)":{transform:"@koine/i18n/{{ matches.[1] }}/{{member}}"},"@koine/react/?(((\\w*)?/?)*)":{transform:"@koine/react/{{ matches.[1] }}/{{member}}"},"@koine/next/?(((\\w*)?/?)*)":{transform:"@koine/next/{{ matches.[1] }}/{{member}}"},"@koine/utils":{transform:"@koine/utils/{{member}}"}},...a};return (t&&(i?k.nx={svgr:!0}:(delete k.nx,k.webpack=(e,r)=>{let o="function"==typeof k.webpack?k.webpack(e,r):e;return o.module.rules.push({test:/\.svg$/,use:[{loader:"@svgr/webpack",options:{svgoConfig:{plugins:[{name:"removeViewBox",active:!1}]}}}]}),o})),m)?next.withI18nLegacy({...k,i18nRoutes:m}):s?i?next.withI18nAsync({...k,i18nCompiler:s}):next.withI18n({...k,i18nCompiler:s}):k};
7
+ /**
8
+ * Get Next.js config with some basic opinionated defaults
9
+ *
10
+ * @param {object} options
11
+ * @property {boolean} [options.nx=false] Nx monorepo setup
12
+ * @property {boolean} [options.svg=false] SVG to react components
13
+ */let withKoine=(n={})=>{let{nx:i,svg:t,i18nRoutes:m,i18nCompiler:s,...a}=n,k={// @see https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory
14
+ eslint:{ignoreDuringBuilds:!0},// we have this strict check on each commit
15
+ typescript:{ignoreBuildErrors:!0},// we have this strict check on each commit
16
+ poweredByHeader:!1,experimental:{// @see https://github.com/vercel/vercel/discussions/5973#discussioncomment-472618
17
+ // @see critters error https://github.com/vercel/next.js/issues/20742
18
+ // optimizeCss: true,
19
+ // @see https://github.com/vercel/next.js/discussions/30174#discussion-3643870
20
+ scrollRestoration:!0,...a.experimental||{}},modularizeImports:{...a.modularizeImports||{},// @see https://www.zhoulujun.net/nextjs/advanced-features/compiler.html#modularize-imports
21
+ "@koine/api":{transform:"@koine/api/{{member}}"},"@koine/browser":{transform:"@koine/browser/{{member}}"},"@koine/dom":{transform:"@koine/dom/{{member}}"},"@koine/node":{transform:"@koine/node/{{member}}"},"@koine/i18n/?(((\\w*)?/?)*)":{transform:"@koine/i18n/{{ matches.[1] }}/{{member}}"},"@koine/react/?(((\\w*)?/?)*)":{transform:"@koine/react/{{ matches.[1] }}/{{member}}"},"@koine/next/?(((\\w*)?/?)*)":{transform:"@koine/next/{{ matches.[1] }}/{{member}}"},"@koine/utils":{transform:"@koine/utils/{{member}}"}},...a};return (t&&(i?// @see https://github.com/gregberge/svgr
22
+ k.nx={svgr:!0}:(// if falsy just remove the key
23
+ delete k.nx,k.webpack=(e,r)=>// ...[_config, options]: Parameters<NonNullable<NextConfig['webpack']>>
24
+ {let o="function"==typeof k.webpack?k.webpack(e,r):e;return(// @see https://dev.to/dolearning/importing-svgs-to-next-js-nna#svgr
25
+ o.module.rules.push({test:/\.svg$/,use:[{loader:"@svgr/webpack",options:{svgoConfig:{plugins:[{name:"removeViewBox",active:!1}]}}}]}),o)})),m)?next.withI18nLegacy({...k,i18nRoutes:m}):s?i?next.withI18nAsync({...k,i18nCompiler:s}):next.withI18n({...k,i18nCompiler:s}):k};
8
26
 
9
27
  exports.withKoine = withKoine;
package/config.esm.js CHANGED
@@ -1,5 +1,23 @@
1
1
  import { withI18nLegacy, withI18nAsync, withI18n } from '@koine/i18n/next';
2
2
 
3
- let withKoine=(n={})=>{let{nx:i,svg:t,i18nRoutes:m,i18nCompiler:s,...a}=n,k={eslint:{ignoreDuringBuilds:!0},typescript:{ignoreBuildErrors:!0},poweredByHeader:!1,experimental:{scrollRestoration:!0,...a.experimental||{}},modularizeImports:{...a.modularizeImports||{},"@koine/api":{transform:"@koine/api/{{member}}"},"@koine/browser":{transform:"@koine/browser/{{member}}"},"@koine/dom":{transform:"@koine/dom/{{member}}"},"@koine/node":{transform:"@koine/node/{{member}}"},"@koine/i18n/?(((\\w*)?/?)*)":{transform:"@koine/i18n/{{ matches.[1] }}/{{member}}"},"@koine/react/?(((\\w*)?/?)*)":{transform:"@koine/react/{{ matches.[1] }}/{{member}}"},"@koine/next/?(((\\w*)?/?)*)":{transform:"@koine/next/{{ matches.[1] }}/{{member}}"},"@koine/utils":{transform:"@koine/utils/{{member}}"}},...a};return (t&&(i?k.nx={svgr:!0}:(delete k.nx,k.webpack=(e,r)=>{let o="function"==typeof k.webpack?k.webpack(e,r):e;return o.module.rules.push({test:/\.svg$/,use:[{loader:"@svgr/webpack",options:{svgoConfig:{plugins:[{name:"removeViewBox",active:!1}]}}}]}),o})),m)?withI18nLegacy({...k,i18nRoutes:m}):s?i?withI18nAsync({...k,i18nCompiler:s}):withI18n({...k,i18nCompiler:s}):k};
3
+ /**
4
+ * Get Next.js config with some basic opinionated defaults
5
+ *
6
+ * @param {object} options
7
+ * @property {boolean} [options.nx=false] Nx monorepo setup
8
+ * @property {boolean} [options.svg=false] SVG to react components
9
+ */let withKoine=(n={})=>{let{nx:i,svg:t,i18nRoutes:m,i18nCompiler:s,...a}=n,k={// @see https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory
10
+ eslint:{ignoreDuringBuilds:!0},// we have this strict check on each commit
11
+ typescript:{ignoreBuildErrors:!0},// we have this strict check on each commit
12
+ poweredByHeader:!1,experimental:{// @see https://github.com/vercel/vercel/discussions/5973#discussioncomment-472618
13
+ // @see critters error https://github.com/vercel/next.js/issues/20742
14
+ // optimizeCss: true,
15
+ // @see https://github.com/vercel/next.js/discussions/30174#discussion-3643870
16
+ scrollRestoration:!0,...a.experimental||{}},modularizeImports:{...a.modularizeImports||{},// @see https://www.zhoulujun.net/nextjs/advanced-features/compiler.html#modularize-imports
17
+ "@koine/api":{transform:"@koine/api/{{member}}"},"@koine/browser":{transform:"@koine/browser/{{member}}"},"@koine/dom":{transform:"@koine/dom/{{member}}"},"@koine/node":{transform:"@koine/node/{{member}}"},"@koine/i18n/?(((\\w*)?/?)*)":{transform:"@koine/i18n/{{ matches.[1] }}/{{member}}"},"@koine/react/?(((\\w*)?/?)*)":{transform:"@koine/react/{{ matches.[1] }}/{{member}}"},"@koine/next/?(((\\w*)?/?)*)":{transform:"@koine/next/{{ matches.[1] }}/{{member}}"},"@koine/utils":{transform:"@koine/utils/{{member}}"}},...a};return (t&&(i?// @see https://github.com/gregberge/svgr
18
+ k.nx={svgr:!0}:(// if falsy just remove the key
19
+ delete k.nx,k.webpack=(e,r)=>// ...[_config, options]: Parameters<NonNullable<NextConfig['webpack']>>
20
+ {let o="function"==typeof k.webpack?k.webpack(e,r):e;return(// @see https://dev.to/dolearning/importing-svgs-to-next-js-nna#svgr
21
+ o.module.rules.push({test:/\.svg$/,use:[{loader:"@svgr/webpack",options:{svgoConfig:{plugins:[{name:"removeViewBox",active:!1}]}}}]}),o)})),m)?withI18nLegacy({...k,i18nRoutes:m}):s?i?withI18nAsync({...k,i18nCompiler:s}):withI18n({...k,i18nCompiler:s}):k};
4
22
 
5
23
  export { withKoine };
package/load.cjs.js CHANGED
@@ -2,7 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- function load(e,o){return new Promise(t=>{setTimeout(()=>t(e),o);})}
5
+ /**
6
+ * Utility to load a component with an optional pre-determined delay.
7
+ *
8
+ * This was designed to improve anti spam with async form loading.
9
+ *
10
+ * @see https://github.com/vercel/next.js/blob/main/packages/next/next-server/lib/dynamic.tsx
11
+ * @see https://github.com/vercel/next.js/blob/canary/examples/with-dynamic-import/pages/index.js
12
+ */function load(e,o){return new Promise(t=>{setTimeout(()=>t(e),o);})}
6
13
 
7
14
  exports["default"] = load;
8
15
  exports.load = load;
package/load.esm.js CHANGED
@@ -1,3 +1,10 @@
1
- function load(e,o){return new Promise(t=>{setTimeout(()=>t(e),o);})}
1
+ /**
2
+ * Utility to load a component with an optional pre-determined delay.
3
+ *
4
+ * This was designed to improve anti spam with async form loading.
5
+ *
6
+ * @see https://github.com/vercel/next.js/blob/main/packages/next/next-server/lib/dynamic.tsx
7
+ * @see https://github.com/vercel/next.js/blob/canary/examples/with-dynamic-import/pages/index.js
8
+ */function load(e,o){return new Promise(t=>{setTimeout(()=>t(e),o);})}
2
9
 
3
10
  export { load as default, load };
package/package.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@koine/next",
3
3
  "sideEffects": false,
4
4
  "dependencies": {
5
- "@koine/browser": "2.0.0-beta.82",
6
- "@koine/utils": "2.0.0-beta.82",
7
- "@koine/i18n": "2.0.0-beta.82"
5
+ "@koine/browser": "2.0.0-beta.83",
6
+ "@koine/utils": "2.0.0-beta.83",
7
+ "@koine/i18n": "2.0.0-beta.83"
8
8
  },
9
9
  "peerDependencies": {
10
10
  "next": "^14.0.4",
@@ -56,5 +56,5 @@
56
56
  },
57
57
  "module": "./index.esm.js",
58
58
  "main": "./index.cjs.js",
59
- "version": "2.0.0-beta.82"
59
+ "version": "2.0.0-beta.83"
60
60
  }
package/useTheme.cjs.js CHANGED
@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var react = require('react');
6
6
  var ThemeContext = require('./ThemeContext.cjs.js');
7
7
 
8
- const useTheme=()=>react.useContext(ThemeContext.ThemeContext);
8
+ /**
9
+ * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
10
+ */const useTheme=()=>react.useContext(ThemeContext.ThemeContext);
9
11
 
10
12
  exports["default"] = useTheme;
11
13
  exports.useTheme = useTheme;
package/useTheme.esm.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { useContext } from 'react';
2
2
  import { ThemeContext } from './ThemeContext.esm.js';
3
3
 
4
- const useTheme=()=>useContext(ThemeContext);
4
+ /**
5
+ * @borrows [next-themes](https://github.com/pacocoursey/next-themes)
6
+ */const useTheme=()=>useContext(ThemeContext);
5
7
 
6
8
  export { useTheme as default, useTheme };