@koine/next 2.0.0-beta.72 → 2.0.0-beta.73

package/12/AnalyticsGoogle.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { useEffect, useState } from "react";
+import { gtagPageview } from "@koine/browser";
+export 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 });
+        ` })] }));
+};
+export default AnalyticsGoogle;

package/12/DisableErrorOverlay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Head from "next/head";
+export 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 default DisableErrorOverlay;

package/12/Seo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Head from "next/head";
+import { seoBuildTags } from "./seoBuildTags";
+export let Seo = (props) => _jsx(Head, { children: seoBuildTags(props) });
+export default Seo;

package/12/SeoDefaults.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Head from "next/head";
+import { seoBuildTags } from "./seoBuildTags";
+export let SeoDefaults = (props) => (_jsx(Head, { children: seoBuildTags(props) }));
+export default SeoDefaults;

package/12/seoBuildTags.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { isArray } from "@koine/utils";
+const defaults = {
+    tplTitle: "",
+};
+export const seoBuildTags = ({ seo, hidden, keywords, title = "", titleTemplate, defaultTitle, noindex, nofollow, description, languageAlternates = [], twitter, facebook, openGraph, og: ogAlias, canonical, metaTags, linkTags, schema, } = {}) => {
+    const id = "seo-";
+    const render = [];
+    const $names = {};
+    const $properties = {};
+    if (titleTemplate) {
+        defaults.tplTitle = titleTemplate;
+    }
+    title = title || seo?.title || "";
+    if (title) {
+        if (defaults.tplTitle && defaults.tplTitle !== title) {
+            title = defaults.tplTitle.replace(/%s/g, title);
+        }
+    }
+    else if (defaultTitle) {
+        title = defaultTitle;
+    }
+    if (title) {
+        render.push(_jsx("title", { children: title }, id + "title"));
+        $properties["og:title"] = title;
+    }
+    $names["robots"] = `${noindex || hidden ? "noindex" : "index"},${nofollow || hidden ? "nofollow" : "follow"}`;
+    description = description || seo?.description;
+    if (description) {
+        $names["description"] = description;
+        $properties["og:description"] = description;
+    }
+    keywords = keywords || seo?.keywords;
+    if (keywords) {
+        $names["keywords"] = isArray(keywords) ? keywords.join(", ") : keywords;
+    }
+    if (languageAlternates?.length > 0) {
+        languageAlternates.forEach(({ href, hrefLang }) => {
+            render.push(_jsx("link", { rel: "alternate", hrefLang: hrefLang, href: href }, id + "languageAlternate-" + hrefLang));
+        });
+    }
+    if (canonical) {
+        render.push(_jsx("link", { rel: "canonical", href: canonical }, id + "canonical"));
+        $properties["og:url"] = canonical;
+    }
+    if (facebook?.appId)
+        $properties["fb:app_id"] = facebook.appId;
+    if (twitter) {
+        if (twitter.cardType)
+            $names["twitter:card"] = twitter.cardType;
+        if (twitter.site)
+            $names["twitter:site"] = twitter.site;
+        if (twitter.handle)
+            $names["twitter:creator"] = twitter.handle;
+    }
+    const og = ogAlias || openGraph;
+    if (og?.title)
+        $properties["og:title"] = og?.title;
+    if (og?.description)
+        $properties["og:description"] = og?.description;
+    if (og?.url)
+        $properties["og:url"] = og.url;
+    if (og?.type)
+        $properties["og:type"] = og.type.toLowerCase();
+    if (og?.locale)
+        $properties["og:locale"] = og.locale;
+    if (og?.siteName)
+        $properties["og:siteName"] = og.siteName;
+    const ogimage = og?.image || seo?.ogimage;
+    if (ogimage)
+        $properties["og:image"] = ogimage;
+    Object.keys($names).forEach((key) => {
+        render.push(_jsx("meta", { name: key, content: $names[key] }, id + "name-" + key));
+    });
+    Object.keys($properties).forEach((key) => {
+        render.push(_jsx("meta", { property: key, content: $properties[key] }, id + "prop-" + +key));
+    });
+    if (metaTags && metaTags.length > 0) {
+        metaTags.forEach((tag) => {
+            render.push(_jsx("meta", { ...tag }, id + "meta-" + (tag.name || tag.property || tag.httpEquiv)));
+        });
+    }
+    if (linkTags?.length) {
+        linkTags.forEach((tag) => {
+            render.push(_jsx("link", { ...tag }, id + "link-" + (tag.href || tag.rel)));
+        });
+    }
+    if (schema) {
+        render.push(_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schema) } }, id + "schema"));
+    }
+    return render;
+};
+export default seoBuildTags;

package/12/types.js

@@ -0,0 +1 @@
+export {};

package/12.js

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

package/config.js

@@ -0,0 +1,60 @@
+import { withI18n, withI18nAsync, withI18nLegacy, } from "@koine/i18n/next";
+export let withKoine = (options = {}) => {
+    const { nx, svg, i18nRoutes, i18nCompiler, ...restNextConfig } = options;
+    const nextConfig = {
+        eslint: {
+            ignoreDuringBuilds: true,
+        },
+        typescript: {
+            ignoreBuildErrors: true,
+        },
+        poweredByHeader: false,
+        experimental: {
+            scrollRestoration: true,
+            ...(restNextConfig.experimental || {}),
+        },
+        ...restNextConfig,
+    };
+    if (svg) {
+        if (nx) {
+            nextConfig["nx"] = { svgr: true };
+        }
+        else {
+            delete nextConfig["nx"];
+            nextConfig.webpack = (_config, options) => {
+                const webpackConfig = typeof nextConfig.webpack === "function"
+                    ? nextConfig.webpack(_config, options)
+                    : _config;
+                webpackConfig.module.rules.push({
+                    test: /\.svg$/,
+                    use: [
+                        {
+                            loader: "@svgr/webpack",
+                            options: {
+                                svgoConfig: {
+                                    plugins: [
+                                        {
+                                            name: "removeViewBox",
+                                            active: false,
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                    ],
+                });
+                return webpackConfig;
+            };
+        }
+    }
+    if (i18nRoutes) {
+        return withI18nLegacy({ ...nextConfig, i18nRoutes });
+    }
+    if (i18nCompiler) {
+        if (nx) {
+            return withI18nAsync({ ...nextConfig, i18nCompiler });
+        }
+        return withI18n({ ...nextConfig, i18nCompiler });
+    }
+    return nextConfig;
+};

package/index.js

@@ -0,0 +1,4 @@
+export { load } from "./utils/load";
+export { ThemeContext } from "./theme/ThemeContext";
+export { ThemeProvider } from "./theme/ThemeProvider";
+export { useTheme } from "./theme/useTheme";

package/package.json

@@ -2,9 +2,9 @@
   "name": "@koine/next",
   "sideEffects": false,
   "dependencies": {
-    "@koine/browser": "2.0.0-beta.72",
-    "@koine/utils": "2.0.0-beta.72",
-    "@koine/i18n": "2.0.0-beta.72"
+    "@koine/browser": "2.0.0-beta.73",
+    "@koine/utils": "2.0.0-beta.73",
+    "@koine/i18n": "2.0.0-beta.73"
   },
   "peerDependencies": {
     "next": "^14.0.4",
@@ -36,5 +36,5 @@
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "version": "2.0.0-beta.72"
+  "version": "2.0.0-beta.73"
 }

package/theme/ThemeContext.js

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

package/theme/ThemeProvider.js

@@ -0,0 +1,204 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NextScript from "next/script";
+import { memo, useCallback, useEffect, useState } from "react";
+import { isServer } from "@koine/utils";
+import { ThemeContext } from "./ThemeContext";
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const THEME_STORAGE_KEY = "theme";
+export const ThemeProvider = ({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme, themes = ["light", "dark"], defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, }) => {
+    const [theme, setThemeState] = useState(() => getTheme(THEME_STORAGE_KEY, defaultTheme));
+    const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(THEME_STORAGE_KEY));
+    const attrs = !value ? themes : Object.values(value);
+    const applyTheme = useCallback((theme) => {
+        let resolved = theme;
+        if (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 = useCallback((theme) => {
+        setThemeState(theme);
+        try {
+            localStorage.setItem(THEME_STORAGE_KEY, theme);
+        }
+        catch (e) {
+        }
+    }, []);
+    const handleMediaQuery = useCallback((e) => {
+        const resolved = getSystemTheme(e);
+        setResolvedTheme(resolved);
+        if (theme === "system" && enableSystem && !forcedTheme) {
+            applyTheme("system");
+        }
+    }, [theme, enableSystem, forcedTheme, applyTheme]);
+    useEffect(() => {
+        const media = window.matchMedia(MEDIA);
+        media.addListener(handleMediaQuery);
+        handleMediaQuery(media);
+        return () => media.removeListener(handleMediaQuery);
+    }, [handleMediaQuery]);
+    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]);
+    useEffect(() => {
+        applyTheme(forcedTheme ?? theme);
+    }, [applyTheme, forcedTheme, theme]);
+    return (_jsxs(ThemeContext.Provider, { value: {
+            theme,
+            setTheme,
+            forcedTheme,
+            resolvedTheme: theme === "system" ? resolvedTheme : theme,
+            themes: enableSystem ? [...themes, "system"] : themes,
+            systemTheme: (enableSystem ? resolvedTheme : undefined),
+        }, children: [_jsx(ThemeScript, { forcedTheme,
+                disableTransitionOnChange,
+                enableSystem,
+                enableColorScheme,
+                themes,
+                defaultTheme,
+                attribute,
+                value,
+                children,
+                attrs,
+                nonce }), children] }));
+};
+const ThemeScript = 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 (_jsx(NextScript, { id: "next-theme-script", strategy: "beforeInteractive", src: encodedScript, nonce: nonce }));
+}, () => true);
+const getTheme = (key, fallback) => {
+    if (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 isServer ? Buffer.from(str).toString("base64") : btoa(str);
+};
+export default ThemeProvider;

package/theme/useTheme.js

@@ -0,0 +1,5 @@
+"use client";
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext";
+export const useTheme = () => useContext(ThemeContext);
+export default useTheme;

package/utils/load.js

@@ -0,0 +1,5 @@
+export function load(component, milliseconds) {
+    return new Promise((resolve) => {
+        setTimeout(() => resolve(component), milliseconds);
+    });
+}