@xyd-js/foo 0.1.0-xyd.0

package/README.md

@@ -0,0 +1,3 @@
+# @xyd-js/foo
+
+`foo` is a package that does components headless things.

package/index.ts

@@ -0,0 +1 @@
+export const test = "test"

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@xyd-js/foo",
+  "version": "0.1.0-xyd.0",
+  "description": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./index.css": "./dist/index.css",
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./renderoll": {
+      "import": "./dist/renderoll.js"
+    }
+  },
+  "dependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "postcss-import": "^16.1.0"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "prebuild": "pnpm clean",
+    "build": "rollup -c rollup.config.js"
+  }
+}

package/packages/renderoll/index.ts

@@ -0,0 +1,3 @@
+export {
+    renderoll
+} from "./renderoll"

package/packages/renderoll/renderoll.tsx

@@ -0,0 +1,189 @@
+import React, {createContext, lazy, useContext, useEffect, useRef, useState, Suspense} from "react";
+import type {RefObject} from "react";
+import {css} from "@linaria/core";
+
+const styles = {
+    loader: {
+        host: css`
+            z-index: 999999;
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+
+            background: white; // TODO: customization
+        `
+    },
+    serveComponent: {
+        host: css`
+            opacity: 0;
+            position: absolute;
+            height: 100%;
+            z-index: 999999;
+        `
+    },
+    content: {
+        host: css`
+            opacity: 0;
+            transition: opacity 0.3s;
+        `,
+        host$$active: css`
+            opacity: 1;
+        `
+    }
+}
+
+export interface RenderollOptions {
+    decorator?: (props: { children: React.ReactNode }) => React.ReactNode
+}
+
+export function renderoll(
+    async: () => Promise<any>,
+    options?: RenderollOptions
+) {
+    const [once, setOnce] = useState(false)
+    const [inited, setInited] = useState(false)
+
+    useEffect(() => {
+        setInited(true)
+    }, []);
+
+    const $RenderLazyComponent = $Lazy(async, options)
+
+    return ({children}) => {
+        return <$LazyContext.Provider value={{
+            onFinish: () => {
+                if (once) {
+                    return
+                }
+                setOnce(true)
+            }
+        }}>
+            {
+                !once && <div className={inited ? styles.serveComponent.host : ""}>
+                    {children}
+                </div>
+            }
+
+            {!once && <$Loader/>}
+
+            <Suspense fallback={<$Loader/>}>
+                <$RenderLazyComponent>
+                    {children}
+                </$RenderLazyComponent>
+            </Suspense>
+        </$LazyContext.Provider>
+    }
+}
+
+// TODO: better api for `onFinish` because this does not match pixel perferct server component
+const $LazyContext = createContext({
+    onFinish: () => {
+    }
+})
+
+function $Loader() {
+    return <div className={styles.loader.host}/>
+}
+
+// TODO: in the future different method than data-slug
+// custom observer logic instead not pixel perfect threshold
+function historyPushStateScroller() {
+    const elements = document.querySelectorAll('[data-slug]');
+
+    if (!elements.length) {
+        console.warn("No elements with [data-slug] found.");
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (!entry.isIntersecting) {
+                return
+            }
+
+            const slug = entry.target.getAttribute("data-slug");
+
+            window.history.pushState(null, "", `${slug}`);
+
+            const event = new CustomEvent("xyd.history.pushState", {
+                detail: {
+                    url: slug,
+                }
+            });
+            window.dispatchEvent(event);
+        });
+    }, {threshold: 0.3});
+
+    elements.forEach(element => observer.observe(element));
+
+    return observer
+}
+
+function $Lazy(
+    async: () => Promise<any>,
+    options?: RenderollOptions
+) {
+    return lazy(async () => {
+        const [Prev, Next] = await async()
+
+        return {
+            default: ({children}) => {
+                const [count, setCount] = useState(0)
+                const serverContent = useRef<Element>(null);
+                const {onFinish} = useContext($LazyContext)
+
+                useEffect(() => {
+                    const observer = historyPushStateScroller()
+
+                    if (!observer) {
+                        return
+                    }
+
+                    return () => {
+                        observer.disconnect();
+                    };
+                }, []);
+
+                useEffect(() => {
+                    if (serverContent?.current) {
+                        // TODO: below mechanism does not match perfect - do we need to compare with server view position?
+                        serverContent?.current.scrollIntoView?.();
+
+                        onFinish()
+                    }
+                }, [serverContent]);
+
+                function onLoaded() {
+                    setCount(count + 1)
+                }
+
+                const loaded = !!count
+
+                const tree = <>
+                    <Prev onLoaded={onLoaded}/>
+
+                    <div ref={serverContent as RefObject<HTMLDivElement>}>
+                        {children}
+                    </div>
+
+                    <Next onLoaded={onLoaded}/>
+                </>
+
+                const content = options?.decorator
+                    ? options?.decorator?.({children: tree})
+                    : tree
+
+                return <div
+                    className={`
+                        ${styles.content.host}
+                        ${loaded && styles.content.host$$active}
+                    `}>
+
+                    {content}
+                </div>
+            }
+        }
+    })
+}

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        autoprefixer: {},
+    },
+}

package/rollup.config.js

@@ -0,0 +1,89 @@
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import {terser} from 'rollup-plugin-terser';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import wyw from '@wyw-in-js/rollup';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+import {createRequire} from 'module';
+
+const require = createRequire(import.meta.url);
+const {dependencies} = require('./package.json', {assert: {type: 'json'}});
+
+const external = Object.keys(dependencies);
+
+export default [
+    {
+        input: {
+            index: 'index.ts',
+            renderoll: 'packages/renderoll/index.ts'
+        },
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+                sourcemap: false,
+                entryFileNames: '[name].js'
+            }
+        ],
+        plugins: [
+            wyw({
+                include: ['**/*.{ts,tsx}'],
+                babelOptions: {
+                    presets: [
+                        '@babel/preset-typescript',
+                        '@babel/preset-react'
+                    ],
+                },
+            }),
+            postcss({
+                extract: true,
+                plugins: [
+                    require('postcss-import'),
+                    require('autoprefixer')
+                ]
+            }),
+            resolve(),
+            commonjs(),
+            typescript({
+                tsconfig: './tsconfig.json',
+            }),
+            babel({
+                babelHelpers: 'bundled',
+                extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                presets: [
+                    '@babel/preset-env',
+                    '@babel/preset-react'
+                ],
+            }),
+            terser(),
+        ],
+        external
+    },
+    {
+        input: 'index.ts',
+        output: {
+            file: 'dist/index.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    },
+    {
+        input: 'packages/renderoll/index.ts',
+        output: {
+            file: 'dist/renderoll.d.ts',
+            format: 'es',
+        },
+        plugins: [dts()],
+        external
+    }
+];

package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}