@koine/next 1.0.8 → 1.0.11

package/app/sc/index.d.ts

@@ -0,0 +1,56 @@
+import { AppProps } from "next/app";
+import { AppThemeProps } from "./AppTheme";
+import { AppMainProps } from "./AppMain";
+export declare type NextAppProps = AppProps & AppThemeProps & AppMainProps;
+/**
+ * App
+ *
+ * @example
+ *
+ * ```tsx
+ * import { NextApp, NextAppProps } from "@koine/next/app/sc/auth";
+ * import { Favicon, AnalyticsGoogle } from "@koine/next";
+ * import { theme } from "src/helpers/theme";
+ * import { Layout, ProgressOverlay } from "src/components/Layout";
+ * // import "@fontsource/myfont/800.css";
+ * // import "src/helpers/theme.css";
+ *
+ * const motion = () => import("@koine/react/m/max").then((m) => m.default);
+ *
+ * export default function App(props: NextAppProps) {
+ *   return (
+ *     <NextApp
+ *       {...props}
+ *       Layout={Layout}
+ *       ProgressOverlay={ProgressOverlay}
+ *       theme={theme}
+ *       motion={motion}
+ *       seo={{
+ *         titleTemplate: "%s | MyApp",
+ *         defaultTitle: "MyApp",
+ *         openGraph: {
+ *           type: "website",
+ *           locale: "en_US",
+ *           url: "https://myapp.com/",
+ *           site_name: "MyApp",
+ *         },
+ *         twitter: {
+ *           handle: "@MklrNl",
+ *           site: "@MyApp",
+ *           cardType: "summary_large_image",
+ *         },
+ *       }}
+ *       pre={
+ *         <>
+ *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
+ *           <Favicon name="MyApp" color="#000000" />
+ *         </>
+ *       }
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ */
+export declare const NextApp: (props: NextAppProps) => JSX.Element;
+export default NextApp;

package/app/sc/index.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { AppHead } from "../AppHead";
+import { AppTheme } from "./AppTheme";
+import { AppMain } from "./AppMain";
+/**
+ * App
+ *
+ * @example
+ *
+ * ```tsx
+ * import { NextApp, NextAppProps } from "@koine/next/app/sc/auth";
+ * import { Favicon, AnalyticsGoogle } from "@koine/next";
+ * import { theme } from "src/helpers/theme";
+ * import { Layout, ProgressOverlay } from "src/components/Layout";
+ * // import "@fontsource/myfont/800.css";
+ * // import "src/helpers/theme.css";
+ *
+ * const motion = () => import("@koine/react/m/max").then((m) => m.default);
+ *
+ * export default function App(props: NextAppProps) {
+ *   return (
+ *     <NextApp
+ *       {...props}
+ *       Layout={Layout}
+ *       ProgressOverlay={ProgressOverlay}
+ *       theme={theme}
+ *       motion={motion}
+ *       seo={{
+ *         titleTemplate: "%s | MyApp",
+ *         defaultTitle: "MyApp",
+ *         openGraph: {
+ *           type: "website",
+ *           locale: "en_US",
+ *           url: "https://myapp.com/",
+ *           site_name: "MyApp",
+ *         },
+ *         twitter: {
+ *           handle: "@MklrNl",
+ *           site: "@MyApp",
+ *           cardType: "summary_large_image",
+ *         },
+ *       }}
+ *       pre={
+ *         <>
+ *           <AnalyticsGoogle id="UA-xxxxxxxx-x" />
+ *           <Favicon name="MyApp" color="#000000" />
+ *         </>
+ *       }
+ *     />
+ *   );
+ * }
+ *
+ * ```
+ */
+export const NextApp = (props) => {
+    return (_jsxs(React.StrictMode, { children: [_jsx(AppHead, {}), _jsx(AppTheme, { ...props, children: _jsx(AppMain, { ...props }) })] }));
+};
+export default NextApp;

package/app/sc/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../node/app/sc/index.js",
+  "types": "./index.d.ts"
+}

package/config/index.d.ts

@@ -50,9 +50,22 @@ declare type KoineNextConfig = {
     svg?: boolean;
     /** @default true  Styled components enabled */
     sc?: boolean;
+    /**
+     * When true uses `*.page.ts` or `*.page.tsx` extension for next.js config option [`pageExtensions`](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory). When `true` it enables the same for `next-translate`
+     * @default false
+     */
+    page?: boolean;
 };
 /**
  * Get Next.js config with some basic opinionated defaults
+ *
+ * @param {object} options
+ * @property {boolean} [options.nx=false] Nx monorepo setup
+ * @property {boolean} [options.svg=false] Svg to react components
+ * @property {boolean} [options.sc=false] Styled components enabled
+ * @property {boolean} [options.page=false] When `true` uses `*.page.ts` or `*.page.tsx`
+ *                                          extension for next.js config option [`pageExtensions`](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory)
+ *                                          and it enables the same for `next-translate`.
  */
-export declare function withKoine({ nx, svg, sc, ...nextConfig }?: NextConfig & KoineNextConfig): NextConfig;
+export declare function withKoine({ nx, svg, sc, page, ...nextConfig }?: NextConfig & KoineNextConfig): NextConfig;
 export default withKoine;

package/config/index.js

@@ -1,4 +1,3 @@
-import { __awaiter, __rest } from "tslib";
 /**
  * Normalise pathname
  *
@@ -44,61 +43,92 @@ export function getPathRewrite(source, destination, dynamic) {
 }
 /**
  */
-export function getRedirects({ defaultLocale, routes, dynamicRoutes, permanent, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const redirects = [];
-        Object.keys(routes).forEach((page) => {
-            const dynamic = dynamicRoutes[page];
-            if (routes[page] !== page) {
-                if (dynamic) {
-                    redirects.push(getPathRedirect(defaultLocale, page, routes[page], true, permanent));
-                }
-                else {
-                    redirects.push(getPathRedirect(defaultLocale, page, routes[page], false, permanent));
-                }
+export async function getRedirects({ defaultLocale, routes, dynamicRoutes, permanent, }) {
+    const redirects = [];
+    Object.keys(routes).forEach((page) => {
+        const dynamic = dynamicRoutes[page];
+        if (routes[page] !== page) {
+            if (dynamic) {
+                redirects.push(getPathRedirect(defaultLocale, page, routes[page], true, permanent));
             }
-        });
-        // console.log("redirects", redirects);
-        return redirects;
+            else {
+                redirects.push(getPathRedirect(defaultLocale, page, routes[page], false, permanent));
+            }
+        }
     });
+    // console.log("redirects", redirects);
+    return redirects;
 }
 /**
  */
-export function getRewrites({ routes, dynamicRoutes, }) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const rewrites = [];
-        Object.keys(routes).forEach((page) => {
-            const dynamic = dynamicRoutes[page];
-            if (routes[page] !== page) {
-                if (dynamic) {
-                    rewrites.push(getPathRewrite(routes[page], page, true));
-                }
-                else {
-                    rewrites.push(getPathRewrite(routes[page], page));
-                }
+export async function getRewrites({ routes, dynamicRoutes, }) {
+    const rewrites = [];
+    Object.keys(routes).forEach((page) => {
+        const dynamic = dynamicRoutes[page];
+        if (routes[page] !== page) {
+            if (dynamic) {
+                rewrites.push(getPathRewrite(routes[page], page, true));
+            }
+            else {
+                rewrites.push(getPathRewrite(routes[page], page));
             }
-        });
-        // console.log("rewrites", rewrites);
-        return rewrites;
+        }
     });
+    // console.log("rewrites", rewrites);
+    return rewrites;
 }
 /**
  * Get Next.js config with some basic opinionated defaults
+ *
+ * @param {object} options
+ * @property {boolean} [options.nx=false] Nx monorepo setup
+ * @property {boolean} [options.svg=false] Svg to react components
+ * @property {boolean} [options.sc=false] Styled components enabled
+ * @property {boolean} [options.page=false] When `true` uses `*.page.ts` or `*.page.tsx`
+ *                                          extension for next.js config option [`pageExtensions`](https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory)
+ *                                          and it enables the same for `next-translate`.
  */
-export function withKoine(_a = {}) {
-    var { nx = true, svg = true, sc = true } = _a, nextConfig = __rest(_a, ["nx", "svg", "sc"]);
-    nextConfig = Object.assign({ 
+export function withKoine({ nx = true, svg = true, sc = true, page, ...nextConfig } = {}) {
+    nextConfig = {
         // @see https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory
-        pageExtensions: ["page.tsx", "page.ts"], eslint: {
+        pageExtensions: page ? ["page.tsx", "page.ts"] : undefined,
+        eslint: {
             ignoreDuringBuilds: true, // we have this strict check on each commit
-        }, typescript: {
+        },
+        typescript: {
             ignoreBuildErrors: true, // we have this strict check on each commit
-        }, poweredByHeader: false, swcMinify: true, experimental: Object.assign({ 
+        },
+        poweredByHeader: false,
+        swcMinify: true,
+        experimental: {
             // @see https://github.com/vercel/vercel/discussions/5973#discussioncomment-472618
             // @see critters error https://github.com/vercel/next.js/issues/20742
             // optimizeCss: true,
             // @see https://github.com/vercel/next.js/discussions/30174#discussion-3643870
-            scrollRestoration: true }, (nextConfig.experimental || {})) }, nextConfig);
+            scrollRestoration: true,
+            // concurrentFeatures: true,
+            // serverComponents: true,
+            // reactRoot: true,
+            ...(nextConfig.experimental || {}),
+            // @see https://nextjs.org/docs/advanced-features/compiler#modularize-imports
+            modularizeImports: {
+                ...(nextConfig?.experimental?.modularizeImports || {}),
+                // FIXME: make these work with the right file/folder structure?
+                // "@koine/next/?(((\\w*)?/?)*)": {
+                //   transform: "@koine/next/{{ matches.[1] }}/{{member}}",
+                // },
+                // "@koine/react/?(((\\w*)?/?)*)": {
+                //   transform: "@koine/react/{{ matches.[1] }}/{{member}}",
+                // },
+                // "@koine/utils/?(((\\w*)?/?)*)": {
+                //   transform: "@koine/utils/{{ matches.[1] }}/{{member}}",
+                // },
+            },
+        },
+        // @see https://github.com/vercel/next.js/issues/7322#issuecomment-887330111
+        // reactStrictMode: false,
+        ...nextConfig,
+    };
     if (svg) {
         if (nx) {
             // @see https://github.com/gregberge/svgr

package/config/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/config/index.js",
+  "types": "./index.d.ts"
+}

package/document/Document.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
 import NextDocument from "next/document";
 /**
- * For typescript safety of this component
+ * Next Document wrapper for bare projects
  *
- * @see https://bit.ly/3ceuF8m
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document";
+ * ```
  */
 export declare class Document extends NextDocument {
     render(): JSX.Element;

package/document/Document.js

@@ -2,13 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NextDocument, { Html, Head, Main, NextScript } from "next/document";
 import { Meta, NoJs } from "@koine/react";
 /**
- * For typescript safety of this component
+ * Next Document wrapper for bare projects
  *
- * @see https://bit.ly/3ceuF8m
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document";
+ * ```
  */
 export class Document extends NextDocument {
     render() {
         const { locale, defaultLocale } = this.props.__NEXT_DATA__;
-        return (_jsxs(Html, Object.assign({ lang: locale || defaultLocale, className: "no-js" }, { children: [_jsxs(Head, { children: [_jsx(Meta, {}), _jsx(NoJs, {})] }), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] })));
+        return (_jsxs(Html, { lang: locale || defaultLocale, className: "no-js", children: [_jsxs(Head, { children: [_jsx(Meta, {}), _jsx(NoJs, {})] }), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] }));
     }
 }

package/document/css/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import NextDocument, { DocumentContext, DocumentInitialProps } from "next/document";
+import { ThemeVanillaValue } from "@koine/react/sc";
+/**
+ * Next Document wrapper for `css/tailwind` based projects
+ *
+ * Uses cookie to manage the current theme
+ *
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document/css";
+ * ```
+ */
+export declare class Document extends NextDocument {
+    static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps & {
+        theme: ThemeVanillaValue;
+    }>;
+    render(): JSX.Element;
+}
+export default Document;

package/document/css/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import NextDocument, { Html, Head, Main, NextScript, } from "next/document";
+import { Meta, NoJs } from "@koine/react";
+import { getInitialThemeFromRequest } from "@koine/react/sc"; // FIXME: this should be imported from another entrypoint
+/**
+ * Next Document wrapper for `css/tailwind` based projects
+ *
+ * Uses cookie to manage the current theme
+ *
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document/css";
+ * ```
+ */
+export class Document extends NextDocument {
+    static async getInitialProps(ctx) {
+        const initialProps = await NextDocument.getInitialProps(ctx);
+        return {
+            ...initialProps,
+            theme: getInitialThemeFromRequest(ctx.req?.headers.cookie /*  || document?.cookie */ || ""),
+        };
+    }
+    render() {
+        const { locale, defaultLocale } = this.props.__NEXT_DATA__;
+        return (_jsxs(Html, { lang: locale || defaultLocale, className: "no-js", children: [_jsxs(Head, { children: [_jsx(Meta, {}), _jsx(NoJs, {})] }), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] }));
+    }
+}
+export default Document;

package/document/css/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../node/document/css/index.js",
+  "types": "./index.d.ts"
+}

package/document/em/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import NextDocument from "next/document";
+/**
+ * Next Document wrapper for `emotion` based projects
+ *
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document/em";
+ * ```
+ */
+export declare class Document extends NextDocument {
+    render(): JSX.Element;
+}
+export default Document;

package/document/{Document--emotion.js → em/index.js}

@@ -1,18 +1,27 @@
-import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Document, { Html, Head, Main, NextScript } from "next/document";
+import NextDocument, { Html, Head, Main, NextScript } from "next/document";
+import { Meta, NoJs } from "@koine/react";
 import createEmotionServer from "@emotion/server/create-instance";
-import { createEmotionCache } from "../utils/emotion-cache";
-import { NoJs } from "@koine/react";
-export class DocumentEmotion extends Document {
+import { createEmotionCache } from "../../utils/emotion-cache";
+/**
+ * Next Document wrapper for `emotion` based projects
+ *
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document/em";
+ * ```
+ */
+export class Document extends NextDocument {
     render() {
         const { locale, defaultLocale } = this.props.__NEXT_DATA__;
-        return (_jsxs(Html, Object.assign({ lang: locale || defaultLocale, className: "no-js" }, { children: [_jsxs(Head, { children: [_jsx(NoJs, {}), this.props.emotionStyleTags] }), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] })));
+        return (_jsxs(Html, { lang: locale || defaultLocale, className: "no-js", children: [_jsxs(Head, { children: [_jsx(Meta, {}), _jsx(NoJs, {}), this.props.emotionStyleTags] }), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] }));
     }
 }
 // `getInitialProps` belongs to `_document` (instead of `_app`),
 // it's compatible with static-site generation (SSG).
-DocumentEmotion.getInitialProps = (ctx) => __awaiter(void 0, void 0, void 0, function* () {
+Document.getInitialProps = async (ctx) => {
     // Resolution order
     //
     // On the server:
@@ -41,15 +50,19 @@ DocumentEmotion.getInitialProps = (ctx) => __awaiter(void 0, void 0, void 0, fun
     const { extractCriticalToChunks } = createEmotionServer(cache);
     ctx.renderPage = () => originalRenderPage({
         enhanceApp: (App) => function EnhanceApp(props) {
-            return _jsx(App, Object.assign({ emotionCache: cache }, props));
+            return _jsx(App, { emotionCache: cache, ...props });
         },
     });
-    const initialProps = yield Document.getInitialProps(ctx);
+    const initialProps = await Document.getInitialProps(ctx);
     // This is important. It prevents emotion to render invalid HTML.
     // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
     const emotionStyles = extractCriticalToChunks(initialProps.html);
     const emotionStyleTags = emotionStyles.styles.map((style) => (_jsx("style", { "data-emotion": `${style.key} ${style.ids.join(" ")}`, 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: { __html: style.css } }, style.key)));
-    return Object.assign(Object.assign({}, initialProps), { emotionStyleTags });
-});
+    return {
+        ...initialProps,
+        emotionStyleTags,
+    };
+};
+export default Document;

package/document/em/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../node/document/em/index.js",
+  "types": "./index.d.ts"
+}

package/document/index.d.ts

@@ -1,4 +1,2 @@
-export * from "./Document";
-export * from "./Document--emotion";
-export * from "./Document--sc";
-export * from "./Document--vanilla";
+export { Document } from "./Document";
+export { Document as default } from "./Document";

package/document/index.js

@@ -1,4 +1,2 @@
-export * from "./Document";
-export * from "./Document--emotion";
-export * from "./Document--sc";
-export * from "./Document--vanilla";
+export { Document } from "./Document";
+export { Document as default } from "./Document";

package/document/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/document/index.js",
+  "types": "./index.d.ts"
+}

package/document/{Document--sc.d.ts → sc/index.d.ts}

@@ -1,11 +1,20 @@
 /// <reference types="react" />
 import NextDocument, { DocumentContext, DocumentInitialProps } from "next/document";
 /**
- * For typescript safety of this component
+ * Next Document wrapper for `styled-components` based projects
  *
+ * For typescript safety of this component
  * @see https://bit.ly/3ceuF8m
+ *
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document/sc";
+ * ```
  */
-export declare class DocumentSc extends NextDocument {
+export declare class Document extends NextDocument {
     static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps>;
     render(): JSX.Element;
 }
+export default Document;

package/document/sc/index.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+/* ? eslint-disable @next/next/no-document-import-in-page */
+import NextDocument, { Html, Head, Main, NextScript, } from "next/document";
+import { Meta, NoJs } from "@koine/react";
+import { ServerStyleSheet } from "styled-components";
+/**
+ * Next Document wrapper for `styled-components` based projects
+ *
+ * For typescript safety of this component
+ * @see https://bit.ly/3ceuF8m
+ *
+ * @example
+ *
+ * in your `myapp/pages/_document.tsx`:
+ * ```tsx
+ * export { Document as default } from "@koine/next/document/sc";
+ * ```
+ */
+export class Document extends NextDocument {
+    static async getInitialProps(ctx) {
+        const sheet = new ServerStyleSheet();
+        const originalRenderPage = ctx.renderPage;
+        try {
+            ctx.renderPage = () => originalRenderPage({
+                enhanceApp: (App) => (props) => sheet.collectStyles(_jsx(App, { ...props })),
+            });
+            const initialProps = await NextDocument.getInitialProps(ctx);
+            return {
+                ...initialProps,
+                // @ts-expect-error FIXME: have they changed type?
+                styles: (_jsxs(React.Fragment, { children: [initialProps.styles, sheet.getStyleElement()] })),
+            };
+        }
+        finally {
+            sheet.seal();
+        }
+    }
+    render() {
+        const { locale, defaultLocale } = this.props.__NEXT_DATA__;
+        return (_jsxs(Html, { lang: locale || defaultLocale, className: "no-js", children: [_jsxs(Head, { children: [_jsx(Meta, {}), _jsx(NoJs, {})] }), _jsxs("body", { children: [_jsx(Main, {}), _jsx(NextScript, {})] })] }));
+    }
+}
+export default Document;

package/document/sc/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../../node/document/sc/index.js",
+  "types": "./index.d.ts"
+}

package/index.d.ts

@@ -10,6 +10,3 @@ export * from "./NextProgress";
 export * from "./Seo";
 export * from "./Theme";
 export * from "./utils";
-export * from "./app";
-export * from "./config";
-export * from "./document";

package/index.js

@@ -10,6 +10,3 @@ export * from "./NextProgress";
 export * from "./Seo";
 export * from "./Theme";
 export * from "./utils";
-export * from "./app";
-export * from "./config";
-export * from "./document";

package/node/Analytics/AnalyticsGoogle.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsGoogle = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const router_1 = require("next/router");
+const script_1 = tslib_1.__importDefault(require("next/script"));
+const utils_1 = require("@koine/utils");
+const AnalyticsGoogle = ({ id }) => {
+    const uid = id || process.env["NEXT_PUBLIC_GTM_ID"];
+    const { events, asPath, query } = (0, router_1.useRouter)();
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const [routed, setRouted] = (0, react_1.useState)(false);
+    // const [url, setUrl] = useState("");
+    (0, react_1.useEffect)(() => {
+        const handleRouteChange = () => {
+            setRouted(true);
+        };
+        events.on("routeChangeComplete", handleRouteChange);
+        return () => {
+            events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [events]);
+    (0, react_1.useEffect)(() => {
+        if (routed && ready && asPath) {
+            // const search = query;
+            (0, utils_1.pageview)(asPath);
+        }
+    }, [asPath, query, routed, ready]);
+    if (!uid) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "google-tagmanager", src: `https://www.googletagmanager.com/gtag/js?id=${id}`, strategy: "afterInteractive", onLoad: () => setReady(true) }), (0, jsx_runtime_1.jsx)(script_1.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 });
+        ` })] }));
+};
+exports.AnalyticsGoogle = AnalyticsGoogle;

package/node/Analytics/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AnalyticsGoogle"), exports);