@koine/next 1.0.4 → 1.0.9

package/config/index.js

@@ -0,0 +1,174 @@
+/**
+ * Normalise pathname
+ *
+ * From a path like `/some//malformed/path///` it returns `some/malformed/path`
+ *
+ * - Removes subsequent slashes
+ * - Removing initial and ending slashes
+ */
+export function normaliseUrlPathname(pathname) {
+    return pathname.replace(/\/+\//g, "/").replace(/^\/+(.*?)\/+$/, "$1");
+}
+/**
+ * Clean a pathname and encode each part
+ *
+ * @see {@link normaliseUrlPathname}
+ */
+export function encodePathname(pathname) {
+    const parts = normaliseUrlPathname(pathname).split("/");
+    return parts
+        .filter((part) => !!part)
+        .map((part) => encodeURIComponent(part))
+        .join("/");
+}
+/**
+ */
+export function getPathRedirect(locale, localisedPathname, templateName, dynamic, permanent) {
+    const suffix = dynamic ? `/:slug*` : "";
+    return {
+        source: `/${locale}/${encodePathname(localisedPathname)}${suffix}`,
+        destination: `/${encodePathname(templateName)}${suffix}`,
+        permanent: Boolean(permanent),
+        locale: false,
+    };
+}
+/**
+ */
+export function getPathRewrite(source, destination, dynamic) {
+    const suffix = dynamic ? `/:path*` : "";
+    return {
+        source: `/${encodePathname(source)}${suffix}`,
+        destination: `/${encodePathname(destination)}${suffix}`,
+    };
+}
+/**
+ */
+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));
+            }
+            else {
+                redirects.push(getPathRedirect(defaultLocale, page, routes[page], false, permanent));
+            }
+        }
+    });
+    // console.log("redirects", redirects);
+    return redirects;
+}
+/**
+ */
+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;
+}
+/**
+ * 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({ 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 ? ["page.tsx", "page.ts"] : undefined,
+        eslint: {
+            ignoreDuringBuilds: true, // we have this strict check on each commit
+        },
+        typescript: {
+            ignoreBuildErrors: true, // we have this strict check on each commit
+        },
+        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,
+            // 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
+            nextConfig["nx"] = {
+                svgr: true,
+            };
+        }
+        else {
+            nextConfig.webpack = (_config, options) => {
+                const webpackConfig = typeof nextConfig.webpack === "function"
+                    ? nextConfig.webpack(_config, options)
+                    : _config;
+                // @see https://dev.to/dolearning/importing-svgs-to-next-js-nna#svgr
+                webpackConfig.module.rules.push({
+                    test: /\.svg$/,
+                    use: [
+                        {
+                            loader: "@svgr/webpack",
+                            options: {
+                                svgoConfig: {
+                                    plugins: [
+                                        {
+                                            name: "removeViewBox",
+                                            active: false,
+                                        },
+                                    ],
+                                },
+                            },
+                        },
+                    ],
+                });
+                return webpackConfig;
+            };
+        }
+    }
+    if (sc) {
+        nextConfig.compiler = {
+            styledComponents: true,
+        };
+    }
+    return nextConfig;
+}
+export default withKoine;

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,10 +1,15 @@
-/// <reference types="react" />
-import NextDocument from "next/document";
-/**
- * For typescript safety of this component
- *
- * @see https://bit.ly/3ceuF8m
- */
-export declare class Document extends NextDocument {
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import NextDocument from "next/document";
+/**
+ * Next Document wrapper for bare projects
+ *
+ * @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

@@ -0,0 +1,19 @@
+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";
+/**
+ * Next Document wrapper for bare projects
+ *
+ * @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, { 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/em/index.js

@@ -0,0 +1,68 @@
+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 createEmotionServer from "@emotion/server/create-instance";
+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, { 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).
+Document.getInitialProps = async (ctx) => {
+    // Resolution order
+    //
+    // On the server:
+    // 1. app.getInitialProps
+    // 2. page.getInitialProps
+    // 3. document.getInitialProps
+    // 4. app.render
+    // 5. page.render
+    // 6. document.render
+    //
+    // On the server with error:
+    // 1. document.getInitialProps
+    // 2. app.render
+    // 3. page.render
+    // 4. document.render
+    //
+    // On the client
+    // 1. app.getInitialProps
+    // 2. page.getInitialProps
+    // 3. app.render
+    // 4. page.render
+    const originalRenderPage = ctx.renderPage;
+    // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
+    // However, be aware that it can have global side effects.
+    const cache = createEmotionCache();
+    const { extractCriticalToChunks } = createEmotionServer(cache);
+    ctx.renderPage = () => originalRenderPage({
+        enhanceApp: (App) => function EnhanceApp(props) {
+            return _jsx(App, { emotionCache: cache, ...props });
+        },
+    });
+    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 {
+        ...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

@@ -0,0 +1,2 @@
+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
- *
- * @see https://bit.ly/3ceuF8m
- */
-export declare class DocumentSc extends NextDocument {
-    static getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps>;
-    render(): JSX.Element;
-}
+/// <reference types="react" />
+import NextDocument, { DocumentContext, DocumentInitialProps } from "next/document";
+/**
+ * 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 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

@@ -1,12 +1,12 @@
-export * from "./Analytics";
-export * from "./Auth";
-export * from "./Favicon";
-export * from "./Forms";
-export * from "./Head";
-export * from "./I18n";
-export * from "./Img";
-export * from "./Link";
-export * from "./NextProgress";
-export * from "./Seo";
-export * from "./Theme";
-export * from "./utils";
+export * from "./Analytics";
+export * from "./Auth";
+export * from "./Favicon";
+export * from "./Forms";
+export * from "./Head";
+export * from "./I18n";
+export * from "./Img";
+export * from "./Link";
+export * from "./NextProgress";
+export * from "./Seo";
+export * from "./Theme";
+export * from "./utils";