@koine/next 2.0.0-beta.8 → 2.0.0-beta.80

package/12/AnalyticsGoogle.d.ts

@@ -1,6 +1,5 @@
 export type AnalyticsGoogleProps = {
-    /** Falls back to `.env` variable `NEXT_PUBLIC_GTM_ID` */
     id?: string;
 };
-export declare const AnalyticsGoogle: ({ id }: AnalyticsGoogleProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare let AnalyticsGoogle: ({ id }: AnalyticsGoogleProps) => import("react/jsx-runtime").JSX.Element | null;
 export default AnalyticsGoogle;

package/12/DisableErrorOverlay.d.ts

@@ -1,7 +1,2 @@
-/**
- * Disable error overlay during `dev`
- *
- * @see https://github.com/vercel/next.js/discussions/13387#discussioncomment-101564
- */
-export declare const DisableErrorOverlay: () => import("react/jsx-runtime").JSX.Element;
+export declare let DisableErrorOverlay: () => import("react/jsx-runtime").JSX.Element;
 export default DisableErrorOverlay;

package/12/Seo.d.ts

@@ -1,12 +1,15 @@
 import type { NextSeoProps } from "next-seo/lib/types";
 import { type LinkTag, type MetaTag } from "./seoBuildTags";
-import type { SeoData } from "./types-seo";
+export type SeoData = {
+    hidden?: boolean;
+    title?: string;
+    description?: string;
+    keywords?: string | string[];
+    ogimage?: string;
+};
 type SeoPropsOpenGraph = NextSeoProps["openGraph"] & {
     image?: string;
 };
-/**
- * @see https://github.com/garmeeh/next-seo/blob/master/src/types.ts#L395
- */
 export type SeoProps = Omit<NextSeoProps, "additionalMetaTags" | "additionalLinkTags" | "mobileAlternate" | "robotsProps"> & {
     metaTags?: ReadonlyArray<MetaTag>;
     linkTags?: ReadonlyArray<LinkTag>;
@@ -16,26 +19,5 @@ export type SeoProps = Omit<NextSeoProps, "additionalMetaTags" | "additionalLink
     openGraph?: SeoPropsOpenGraph;
     og?: SeoPropsOpenGraph;
 };
-/**
- * Adapted from [garmeeh/next-seo](https://github.com/garmeeh/next-seo)
- *
- * See also:
- * - https://github.com/catnose99/next-head-seo
- * - https://nextjs.org/docs/api-reference/next/head
- *
- * NB: on the homepage you usually want to customize the `titleTemplate` to avoid
- * doubled app name. Assuming your default seo configuration is something like:
- *
- * ```js
- * {
- *   titleTemplate: "%s | MyApp"
- * }
- * ```
- *
- * On the homepage you migh want to override it, e.g.:
- * ```js
- * <Seo title="MyApp | Some description" titleTemplate="%s" />
- * ```
- */
-export declare const Seo: (props: SeoProps) => import("react/jsx-runtime").JSX.Element;
+export declare let Seo: (props: SeoProps) => import("react/jsx-runtime").JSX.Element;
 export default Seo;

package/12/SeoDefaults.d.ts

@@ -1,11 +1,10 @@
 import type { DefaultSeoProps } from "next-seo/lib/types";
+import type { JsonObject } from "@koine/utils";
 import { type LinkTag, type MetaTag } from "./seoBuildTags";
-/**
- * @see https://github.com/garmeeh/next-seo/blob/master/src/types.ts#L413
- */
 export type SeoDefaultsProps = Omit<DefaultSeoProps, "additionalMetaTags" | "additionalLinkTags" | "dangerouslySetAllPagesToNoIndex" | "dangerouslySetAllPagesToNoFollow" | "defaultOpenGraphImageWidth" | "defaultOpenGraphImageHeight" | "defaultOpenGraphVideoWidth" | "defaultOpenGraphVideoHeight" | "mobileAlternate" | "robotsProps"> & {
     metaTags?: ReadonlyArray<MetaTag>;
     linkTags?: ReadonlyArray<LinkTag>;
+    schema?: JsonObject;
 };
-export declare const SeoDefaults: (props: SeoDefaultsProps) => import("react/jsx-runtime").JSX.Element;
+export declare let SeoDefaults: (props: SeoDefaultsProps) => import("react/jsx-runtime").JSX.Element;
 export default SeoDefaults;

package/12/seoBuildTags.d.ts

@@ -1,23 +1,8 @@
-import React from "react";
+/// <reference types="react" />
 import type { SeoProps } from "./Seo";
 import type { SeoDefaultsProps } from "./SeoDefaults";
 export type MetaTag = React.DetailedHTMLProps<React.MetaHTMLAttributes<HTMLMetaElement>, HTMLMetaElement>;
 export type LinkTag = React.DetailedHTMLProps<React.LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>;
 type BuildTagsParams = SeoProps & SeoDefaultsProps;
-/**
- * Comparing to `next-seo` we do a couple of things in addition while many
- * others are removed.
- *
- * - Add `seo` meta object coming from a CMS probably
- * - Add `ogimage` and `openGraph.image` as single image source
- * - Add `og` alias to define `openGraph`
- * - Add check for `title` equal to `templateTitle` to avoid meta titles like
- *   "My site | My site" often happening in homepages
- * - Remove the open graph videos and images
- *
- * - Shorter code
- *
- * @returns
- */
-export declare const seoBuildTags: ({ seo, hidden, keywords, title, titleTemplate, defaultTitle, noindex, nofollow, description, languageAlternates, twitter, facebook, openGraph, og: ogAlias, canonical, metaTags, linkTags, }?: BuildTagsParams) => React.ReactNode[];
+export declare const seoBuildTags: ({ seo, hidden, keywords, title, titleTemplate, defaultTitle, noindex, nofollow, description, languageAlternates, twitter, facebook, openGraph, og: ogAlias, canonical, metaTags, linkTags, schema, }?: BuildTagsParams) => import("react").ReactNode[];
 export default seoBuildTags;

package/12/types.d.ts

@@ -0,0 +1,2 @@
+export type { SeoData } from "./Seo";
+export type { SeoDefaultsProps } from "./SeoDefaults";

package/12.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./12";

package/12.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./12.cjs.js').default;

package/12.cjs.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var router = require('next/router');
+var Script = require('next/script');
+var react = require('react');
+var browser = require('@koine/browser');
+var Head = require('next/head');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Script__default = /*#__PURE__*/_interopDefaultLegacy(Script);
+var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
+
+let AnalyticsGoogle = ({ id }) => {
+    const uid = id || process.env["NEXT_PUBLIC_GTM_ID"];
+    const { events, asPath, query } = router.useRouter();
+    const [ready, setReady] = react.useState(false);
+    const [routed, setRouted] = react.useState(false);
+    react.useEffect(() => {
+        const handleRouteChange = () => {
+            setRouted(true);
+        };
+        events.on("routeChangeComplete", handleRouteChange);
+        return () => {
+            events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [events]);
+    react.useEffect(() => {
+        if (routed && ready && asPath) {
+            browser.gtagPageview(asPath);
+        }
+    }, [asPath, query, routed, ready]);
+    if (!uid) {
+        return null;
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Script__default["default"], { id: "google-tagmanager", src: `https://www.googletagmanager.com/gtag/js?id=${id}`, strategy: "afterInteractive", onLoad: () => setReady(true) }), jsxRuntime.jsx(Script__default["default"], { id: "google-analytics", strategy: "afterInteractive", children: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){window.dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${id}', { 'send_page_view': false });
+        ` })] }));
+};
+
+let DisableErrorOverlay = () => (jsxRuntime.jsx(Head__default["default"], { children: process.env["NODE_ENV"] === "development" && (jsxRuntime.jsx("script", { dangerouslySetInnerHTML: {
+            __html: `window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});`,
+        } })) }));
+
+exports.AnalyticsGoogle = AnalyticsGoogle;
+exports.DisableErrorOverlay = DisableErrorOverlay;

package/12.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './12.cjs.js';
+export { _default as default } from './12.cjs.default.js';

package/12.d.ts

@@ -0,0 +1,3 @@
+export { AnalyticsGoogle, type AnalyticsGoogleProps, } from "./12/AnalyticsGoogle";
+export { DisableErrorOverlay } from "./12/DisableErrorOverlay";
+export * from "./12/types";

package/12.esm.js

@@ -0,0 +1,43 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useState, useEffect } from 'react';
+import { gtagPageview } from '@koine/browser';
+import Head from 'next/head';
+
+let AnalyticsGoogle = ({ id }) => {
+    const uid = id || process.env["NEXT_PUBLIC_GTM_ID"];
+    const { events, asPath, query } = useRouter();
+    const [ready, setReady] = useState(false);
+    const [routed, setRouted] = useState(false);
+    useEffect(() => {
+        const handleRouteChange = () => {
+            setRouted(true);
+        };
+        events.on("routeChangeComplete", handleRouteChange);
+        return () => {
+            events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [events]);
+    useEffect(() => {
+        if (routed && ready && asPath) {
+            gtagPageview(asPath);
+        }
+    }, [asPath, query, routed, ready]);
+    if (!uid) {
+        return null;
+    }
+    return (jsxs(Fragment, { children: [jsx(Script, { id: "google-tagmanager", src: `https://www.googletagmanager.com/gtag/js?id=${id}`, strategy: "afterInteractive", onLoad: () => setReady(true) }), jsx(Script, { id: "google-analytics", strategy: "afterInteractive", children: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){window.dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${id}', { 'send_page_view': false });
+        ` })] }));
+};
+
+let DisableErrorOverlay = () => (jsx(Head, { children: process.env["NODE_ENV"] === "development" && (jsx("script", { dangerouslySetInnerHTML: {
+            __html: `window.addEventListener('error',event =>{event.stopImmediatePropagation()});window.addEventListener('unhandledrejection',event =>{event.stopImmediatePropagation()});`,
+        } })) }));
+
+export { AnalyticsGoogle, DisableErrorOverlay };

package/README.md

@@ -1,13 +1 @@
 # @koine/next
-
-## i18n
-
-To make typescript work nicely with `useT`, `getT` and `T` make sure to enable [`resolveJsonModule`](https://www.typescriptlang.org/tsconfig#resolveJsonModule) in your `tsconfig.json` file:
-
-```json
-{
-  "compilerOptions": {
-    "resolveJsonModule": true
-  }
-}
-```

package/ThemeContext.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./ThemeContext";
+export { default } from "./ThemeContext";

package/ThemeContext.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./ThemeContext.cjs.js').default;

package/ThemeContext.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const ThemeContext = react.createContext({
+    setTheme: (_) => { },
+    themes: [],
+});
+
+exports.ThemeContext = ThemeContext;
+exports["default"] = ThemeContext;

package/ThemeContext.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './ThemeContext.cjs.js';
+export { _default as default } from './ThemeContext.cjs.default.js';

package/ThemeContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type ThemeContextProps = {
+    themes: string[];
+    forcedTheme?: string;
+    setTheme: (theme: string) => void;
+    theme?: string;
+    resolvedTheme?: string;
+    systemTheme?: "dark" | "light";
+};
+export declare const ThemeContext: import("react").Context<ThemeContextProps>;
+export default ThemeContext;

package/ThemeContext.esm.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const ThemeContext = createContext({
+    setTheme: (_) => { },
+    themes: [],
+});
+
+export { ThemeContext, ThemeContext as default };

package/ThemeProvider.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./ThemeProvider";
+export { default } from "./ThemeProvider";

package/ThemeProvider.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./ThemeProvider.cjs.js').default;

package/ThemeProvider.cjs.js

@@ -0,0 +1,214 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Script = require('next/script');
+var react = require('react');
+var utils = require('@koine/utils');
+var ThemeContext = require('./ThemeContext.cjs.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Script__default = /*#__PURE__*/_interopDefaultLegacy(Script);
+
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const THEME_STORAGE_KEY = "theme";
+const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme, themes = ["light", "dark"], defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, }) => {
+    const [theme, setThemeState] = react.useState(() => getTheme(THEME_STORAGE_KEY, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = react.useState(() => getTheme(THEME_STORAGE_KEY));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = react.useCallback((theme) => {
+        let resolved = theme;
+        if (utils.isServer || !resolved)
+            return;
+        if (theme === "system" && enableSystem) {
+            resolved = getSystemTheme();
+        }
+        const name = value ? value[resolved] : resolved;
+        const enable = disableTransitionOnChange ? disableAnimation() : null;
+        const d = document.documentElement;
+        if (attribute === "class") {
+            d.classList.remove(...attrs);
+            if (name)
+                d.classList.add(name);
+        }
+        else {
+            if (name) {
+                d.setAttribute(attribute, name);
+            }
+            else {
+                d.removeAttribute(attribute);
+            }
+        }
+        if (enableColorScheme) {
+            const fallback = colorSchemes.includes(defaultTheme)
+                ? defaultTheme
+                : "";
+            const colorScheme = colorSchemes.includes(resolved)
+                ? resolved
+                : fallback;
+            d.style.colorScheme = colorScheme;
+        }
+        enable?.();
+    }, [
+        attribute,
+        attrs,
+        defaultTheme,
+        disableTransitionOnChange,
+        enableColorScheme,
+        enableSystem,
+        value,
+    ]);
+    const setTheme = react.useCallback((theme) => {
+        setThemeState(theme);
+        try {
+            localStorage.setItem(THEME_STORAGE_KEY, theme);
+        }
+        catch (e) {
+        }
+    }, []);
+    const handleMediaQuery = react.useCallback((e) => {
+        const resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, enableSystem, forcedTheme, applyTheme]);
+    react.useEffect(() => {
+        const media = window.matchMedia(MEDIA);
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return () => media.removeListener(handleMediaQuery);
+    }, [handleMediaQuery]);
+    react.useEffect(() => {
+        const handleStorage = (e) => {
+            if (e.key !== THEME_STORAGE_KEY) {
+                return;
+            }
+            const theme = e.newValue || defaultTheme;
+            setTheme(theme);
+        };
+        window.addEventListener("storage", handleStorage);
+        return () => window.removeEventListener("storage", handleStorage);
+    }, [defaultTheme, setTheme]);
+    react.useEffect(() => {
+        applyTheme(forcedTheme ?? theme);
+    }, [applyTheme, forcedTheme, theme]);
+    return (jsxRuntime.jsxs(ThemeContext.ThemeContext.Provider, { value: {
+            theme,
+            setTheme,
+            forcedTheme,
+            resolvedTheme: theme === "system" ? resolvedTheme : theme,
+            themes: enableSystem ? [...themes, "system"] : themes,
+            systemTheme: (enableSystem ? resolvedTheme : undefined),
+        }, children: [jsxRuntime.jsx(ThemeScript, { forcedTheme,
+                disableTransitionOnChange,
+                enableSystem,
+                enableColorScheme,
+                themes,
+                defaultTheme,
+                attribute,
+                value,
+                children,
+                attrs,
+                nonce }), children] }));
+};
+const ThemeScript = react.memo(({ forcedTheme, attribute, enableSystem, enableColorScheme, defaultTheme, value, attrs, nonce, }) => {
+    const defaultSystem = defaultTheme === "system";
+    const optimization = (() => {
+        const removeClasses = `d.remove(${attrs
+            .map((t) => `'${t}'`)
+            .join(",")})`;
+        return `var d=document.documentElement.classList;${removeClasses};`;
+    })();
+    const fallbackColorScheme = (() => {
+        if (!enableColorScheme) {
+            return "";
+        }
+        const fallback = colorSchemes.includes(defaultTheme)
+            ? defaultTheme
+            : null;
+        if (fallback) {
+            return `if(e==='light'||e==='dark'||!e)d.style.colorScheme=e||'${defaultTheme}'`;
+        }
+        else {
+            return `if(e==='light'||e==='dark')d.style.colorScheme=e`;
+        }
+    })();
+    const updateDOM = (name, literal = false, setColorScheme = true) => {
+        const resolvedName = value ? value[name] : name;
+        const val = literal ? name + `|| ''` : `'${resolvedName}'`;
+        let text = "";
+        if (enableColorScheme &&
+            setColorScheme &&
+            !literal &&
+            colorSchemes.includes(name)) {
+            text += `d.style.colorScheme = '${name}';`;
+        }
+        if (attribute === "class") {
+            if (literal || resolvedName) {
+                text += `d.add(${val})`;
+            }
+            else {
+                text += `null`;
+            }
+        }
+        else {
+            if (resolvedName) {
+                text += `d[s](n, ${val})`;
+            }
+        }
+        return text;
+    };
+    const scriptSrc = (() => {
+        if (forcedTheme) {
+            return `!function(){${optimization}${updateDOM(forcedTheme)}}()`;
+        }
+        if (enableSystem) {
+            return `!function(){try {${optimization}var e=localStorage.getItem('${THEME_STORAGE_KEY}');if("system"===e||(!e&&${defaultSystem})){var t="${MEDIA}",m=window.matchMedia(t);if(m.media!==t||m.matches){${updateDOM("dark")}}else{${updateDOM("light")}}}else if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}${!defaultSystem
+                ? `else{` + updateDOM(defaultTheme, false, false) + "}"
+                : ""}${fallbackColorScheme}}catch(e){}}()`;
+        }
+        return `!function(){try{${optimization}var e=localStorage.getItem("${THEME_STORAGE_KEY}");if(e){${value ? `var x=${JSON.stringify(value)};` : ""}${updateDOM(value ? `x[e]` : "e", true)}}else{${updateDOM(defaultTheme, false, false)};}${fallbackColorScheme}}catch(t){}}();`;
+    })();
+    const encodedScript = `data:text/javascript;base64,${encodeBase64(scriptSrc)}`;
+    return (jsxRuntime.jsx(Script__default["default"], { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
+}, () => true);
+const getTheme = (key, fallback) => {
+    if (utils.isServer)
+        return undefined;
+    let theme;
+    try {
+        theme = localStorage.getItem(key) || undefined;
+    }
+    catch (e) {
+    }
+    return theme || fallback;
+};
+const disableAnimation = () => {
+    const d = document;
+    const css = d.createElement("style");
+    css.appendChild(d.createTextNode(`*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+    d.head.appendChild(css);
+    return () => {
+        (() => window.getComputedStyle(d.body))();
+        setTimeout(() => {
+            d.head.removeChild(css);
+        }, 1);
+    };
+};
+const getSystemTheme = (e) => {
+    if (!e)
+        e = window.matchMedia(MEDIA);
+    const isDark = e.matches;
+    const systemTheme = isDark ? "dark" : "light";
+    return systemTheme;
+};
+const encodeBase64 = (str) => {
+    return utils.isServer ? Buffer.from(str).toString("base64") : btoa(str);
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports["default"] = ThemeProvider;

package/ThemeProvider.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './ThemeProvider.cjs.js';
+export { _default as default } from './ThemeProvider.cjs.default.js';

package/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+type ValueObject = {
+    [themeName: string]: string;
+};
+export type ThemeProviderProps = React.PropsWithChildren<{
+    themes?: string[];
+    forcedTheme?: string;
+    enableSystem?: boolean;
+    disableTransitionOnChange?: boolean;
+    enableColorScheme?: boolean;
+    defaultTheme?: string;
+    attribute?: string | "class";
+    value?: ValueObject;
+    nonce?: string;
+}>;
+export declare const ThemeProvider: ({ forcedTheme, disableTransitionOnChange, enableSystem, enableColorScheme, themes, defaultTheme, attribute, value, children, nonce, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default ThemeProvider;