addon-ui 0.9.1 → 0.10.0

package/src/components/Truncate/Truncate.tsx

@@ -5,16 +5,14 @@ import React, {
     memo,
     useImperativeHandle,
     useLayoutEffect,
-    useMemo,
     useRef,
     useState,
 } from "react";
-import debounce from "debounce";
 import classnames from "classnames";
 
 import {useComponentProps} from "../../providers";
 
-import {Highlight, HighlightProps} from "../Highlight";
+import {calculateMiddleTruncate} from "./utils";
 
 import styles from "./truncate.module.scss";
 
@@ -22,81 +20,57 @@ export interface TruncateProps extends ComponentProps<"span"> {
     text?: string;
     middle?: boolean;
     separator?: string;
-    highlight?: Omit<HighlightProps, "textToHighlight">;
+    contentClassname?: string;
+    render?: (text: string) => React.ReactNode;
 }
 
-const trimMiddle = (el: HTMLElement, text: string, separator: string) => {
-    const measure = (txt: string) => {
-        el.textContent = txt;
-        return el.scrollWidth <= el.clientWidth;
-    };
-
-    if (measure(text)) return text;
-
-    let low = 0;
-    let high = text.length - 2;
-    let result = "";
-
-    while (low <= high) {
-        const size = Math.floor((low + high) / 2);
-        const left = text.slice(0, Math.ceil(size / 2));
-        const right = text.slice(text.length - Math.floor(size / 2));
-        const trimmed = left + separator + right;
-
-        if (measure(trimmed)) {
-            result = trimmed;
-            low = size + 1;
-        } else {
-            high = size - 1;
-        }
-    }
-
-    return result || text.charAt(0) + separator + text.charAt(text.length - 1);
-};
-
 const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (props, ref) => {
     const {
         text = "",
         middle,
         separator = "...",
         className,
-        highlight,
+        contentClassname,
+        render,
         ...other
     } = {...useComponentProps("truncate"), ...props};
 
-    const innerRef = useRef<HTMLSpanElement | null>(null);
+    const containerRef = useRef<HTMLSpanElement>(null);
     const [displayedText, setDisplayedText] = useState(text);
 
-    const finalText = useMemo(() => {
-        return middle ? displayedText : text;
-    }, [displayedText, text, middle]);
-
-    useImperativeHandle(ref, () => innerRef.current!, []);
+    useImperativeHandle(ref, () => containerRef.current!, []);
 
     useLayoutEffect(() => {
-        const el = innerRef.current;
-        if (!el || !middle) return;
+        const el = containerRef.current;
 
-        let observer: ResizeObserver | null = null;
+        if (!middle || !el) {
+            setDisplayedText(text);
+            return;
+        }
+
+        const observer = new ResizeObserver(entries => {
+            const entry = entries[0];
+            if (!entry) return;
+
+            const maxWidth = entry.contentRect.width;
+            const {fontWeight, fontSize, fontFamily, letterSpacing} = window.getComputedStyle(el);
 
-        const measureAndTrim = debounce(() => {
-            setDisplayedText(trimMiddle(el, text, separator));
-        }, 150);
+            const font = [fontWeight, fontSize, fontFamily].join(" ");
 
-        measureAndTrim();
+            const truncated = calculateMiddleTruncate(text, maxWidth, font, letterSpacing, separator);
 
-        observer = new ResizeObserver(() => measureAndTrim());
+            setDisplayedText(prev => (prev !== truncated ? truncated : prev));
+        });
 
         observer.observe(el);
+        return () => observer.disconnect();
+    }, [text, middle, separator]);
 
-        return () => {
-            measureAndTrim.clear();
-            observer?.disconnect();
-        };
-    }, [text, separator, middle]);
+    const content = render ? render(displayedText) : displayedText;
 
     return (
         <span
+            ref={containerRef}
             className={classnames(
                 styles["truncate"],
                 {
@@ -104,11 +78,19 @@ const Truncate: ForwardRefRenderFunction<HTMLSpanElement, TruncateProps> = (prop
                 },
                 className
             )}
+            title={text}
             {...other}
         >
-            <span ref={innerRef} className={styles["truncate__hidden"]} />
-
-            {highlight ? <Highlight {...highlight} textToHighlight={finalText} /> : finalText}
+            {middle ? (
+                <>
+                    <span className={styles["truncate__hidden"]} aria-hidden="true">
+                        {text}
+                    </span>
+                    <span className={classnames(styles["truncate__content"], contentClassname)}>{content}</span>
+                </>
+            ) : (
+                content
+            )}
         </span>
     );
 };

package/src/components/Truncate/truncate.module.scss

@@ -2,30 +2,29 @@
 
 .truncate {
   position: relative;
-  display: block;
-  width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  max-width: 100%;
+  min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: color var(--truncate-speed-color, var(--speed-color));
 
+  &--middle {
+    text-overflow: clip;
+  }
+
   &__hidden {
-    opacity: 0;
-    position: absolute;
-    width: 100%;
+    display: block;
+    height: 0;
+    visibility: hidden;
     white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
 
-  &--middle {
-    text-overflow: clip;
-
-    padding-right: var(--truncate-around-space, 8px);
-
-    @include theme.rtl() {
-      padding-right: 0;
-      padding-left: var(--truncate-around-space, 8px);
-    }
+  &__content {
+    display: block;
   }
 }

package/src/components/Truncate/utils.ts

@@ -0,0 +1,62 @@
+const MAX_CACHE_SIZE = 1000;
+const cache = new Map<string, string>();
+let canvas: HTMLCanvasElement | null = null;
+
+const addToCache = (key: string, value: string) => {
+    if (cache.size >= MAX_CACHE_SIZE) {
+        const oldestKey = cache.keys().next().value;
+        if (oldestKey !== undefined) {
+            cache.delete(oldestKey);
+        }
+    }
+    cache.set(key, value);
+};
+
+export const calculateMiddleTruncate = (
+    text: string,
+    maxWidth: number,
+    font: string,
+    letterSpacing: string,
+    separator: string
+) => {
+    const cacheKey = `${text}-${maxWidth}-${font}-${letterSpacing}-${separator}`;
+    if (cache.has(cacheKey)) return cache.get(cacheKey)!;
+
+    if (!canvas) {
+        canvas = document.createElement("canvas");
+    }
+    const context = canvas.getContext("2d");
+    if (!context) return text;
+    context.font = font;
+    context.letterSpacing = letterSpacing;
+
+    const measure = (txt: string) => context.measureText(txt).width;
+
+    if (measure(text) <= maxWidth) {
+        addToCache(cacheKey, text);
+        return text;
+    }
+
+    let low = 0;
+    let high = text.length;
+    let result = "";
+
+    while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        const leftHalf = Math.ceil(mid / 2);
+        const rightHalf = Math.floor(mid / 2);
+
+        const trimmed = text.slice(0, leftHalf) + separator + text.slice(text.length - rightHalf);
+
+        if (measure(trimmed) <= maxWidth) {
+            result = trimmed;
+            low = mid + 1;
+        } else {
+            high = mid - 1;
+        }
+    }
+
+    const finalResult = result || text[0] + separator + text.slice(-1);
+    addToCache(cacheKey, finalResult);
+    return finalResult;
+};

package/src/plugin/index.ts

@@ -1,7 +1,8 @@
 import path from "path";
 import {definePlugin} from "adnbn";
-import {Configuration as Rspack} from "@rspack/core";
+import {Configuration as Rspack, NormalModule} from "@rspack/core";
 import {RspackVirtualModulePlugin} from "rspack-plugin-virtual-module";
+import kebabCase from "lodash/kebabCase";
 
 import StyleBuilder from "./builder/StyleBuilder";
 import ConfigBuilder from "./builder/ConfigBuilder";
@@ -13,20 +14,52 @@ import ConfigFinder from "./finder/ConfigFinder";
 import type {BuilderContract} from "./types";
 
 export interface PluginOptions {
+    /**
+     * Directory path where plugin configuration and style files are located, relative to the project root.
+     * @default "."
+     */
     themeDir?: string;
-    configFileName?: string;
-    styleFileName?: string;
+
+    /**
+     * Name of the configuration file.
+     * @default "config.ui"
+     */
+    configName?: string;
+
+    /**
+     * Name of the style file.
+     * @default "style.ui"
+     */
+    styleName?: string;
+
+    /**
+     * Whether to merge configuration files from different app directories.
+     * @default true
+     */
     mergeConfig?: boolean;
+
+    /**
+     * Whether to merge style files from different app directories.
+     * @default true
+     */
     mergeStyles?: boolean;
+
+    /**
+     * Configuration for splitting chunks.
+     * Can be a boolean to enable/disable or a callback to customize chunk names.
+     * @default true
+     */
+    splitChunks?: boolean | ((name: string) => string | undefined);
 }
 
 export default definePlugin((options: PluginOptions = {}) => {
     const {
         themeDir = ".",
-        configFileName = "ui.config",
-        styleFileName = "ui.style",
+        configName = "ui.config",
+        styleName = "ui.style",
         mergeConfig = true,
         mergeStyles = true,
+        splitChunks = false,
     } = options;
 
     let configFinder: Finder;
@@ -47,14 +80,14 @@ export default definePlugin((options: PluginOptions = {}) => {
                 path.join(srcDir, sharedDir, ...normalizeThemeDir),
             ];
 
-            configFinder = new ConfigFinder(configFileName, config).setCanMerge(mergeConfig).setSearchDirs(searchDirs);
-            styleFinder = new StyleFinder(styleFileName, config).setCanMerge(mergeStyles).setSearchDirs(searchDirs);
+            configFinder = new ConfigFinder(configName, config).setCanMerge(mergeConfig).setSearchDirs(searchDirs);
+            styleFinder = new StyleFinder(styleName, config).setCanMerge(mergeStyles).setSearchDirs(searchDirs);
 
             configBuilder = new ConfigBuilder(configFinder);
             styleBuilder = new StyleBuilder(styleFinder);
         },
         bundler: () => {
-            return {
+            const config: Rspack = {
                 plugins: [
                     new RspackVirtualModulePlugin(
                         {
@@ -64,7 +97,188 @@ export default definePlugin((options: PluginOptions = {}) => {
                         "addon-ui-virtual"
                     ),
                 ],
-            } satisfies Rspack;
+            };
+
+            if (splitChunks) {
+                const splitChunksNameCallback = typeof splitChunks === "function" ? splitChunks : undefined;
+
+                const toUIChunk = (name: string) => {
+                    if (splitChunksNameCallback) {
+                        const finalName = splitChunksNameCallback(name);
+
+                        if (finalName) {
+                            return finalName;
+                        }
+                    }
+
+                    return `${kebabCase(name)}.ui`;
+                };
+
+                const extractName = (res: string): string | null => {
+                    if (!res) {
+                        return null;
+                    }
+
+                    const match = res.match(/src[\\/]components[\\/]([^\\/]+)/);
+
+                    if (match && match[1] && !match[1].includes(".") && match[1] !== "index") {
+                        const componentName = match[1];
+                        const normalized = componentName.toLowerCase();
+
+                        if (["button", "basebutton", "iconbutton"].includes(normalized)) {
+                            return "button";
+                        }
+
+                        if (["list", "listitem"].includes(normalized)) {
+                            return "list";
+                        }
+
+                        if (["view", "viewdrawer", "viewmodal", "viewport"].includes(normalized)) {
+                            return "view";
+                        }
+
+                        if (["svgsprite", "icon"].includes(normalized)) {
+                            return "svg";
+                        }
+
+                        return componentName;
+                    }
+
+                    return null;
+                };
+
+                config.optimization = {
+                    splitChunks: {
+                        cacheGroups: {
+                            addonUI: {
+                                test: module => {
+                                    const resource =
+                                        (module as NormalModule).resource ||
+                                        (typeof module.nameForCondition === "function"
+                                            ? module.nameForCondition()
+                                            : "");
+
+                                    if (!resource) {
+                                        return false;
+                                    }
+
+                                    if (
+                                        resource.includes("addon-ui-virtual") ||
+                                        resource.includes("addon-ui-style.scss") ||
+                                        resource.includes("addon-ui-config") ||
+                                        /providers[\\/]ui[\\/]styles/.test(resource)
+                                    ) {
+                                        return true;
+                                    }
+
+                                    const isComponent = /src[\\/]components[\\/]/.test(resource);
+
+                                    if (isComponent) {
+                                        if (resource.includes("node_modules")) {
+                                            return resource.includes("addon-ui");
+                                        }
+
+                                        return true;
+                                    }
+
+                                    return /node_modules[\\/](@radix-ui|radix-ui|autosize|odometer|react-highlight-words|react-responsive-overflow-list)/.test(
+                                        resource
+                                    );
+                                },
+                                name(module) {
+                                    const resource =
+                                        (module as NormalModule).resource ||
+                                        ((typeof module.nameForCondition === "function"
+                                            ? module.nameForCondition()
+                                            : "") as string);
+
+                                    const directName = extractName(resource);
+
+                                    if (directName) {
+                                        return toUIChunk(directName);
+                                    }
+
+                                    if (
+                                        resource.includes("addon-ui-virtual") ||
+                                        resource.includes("addon-ui-style.scss") ||
+                                        resource.includes("addon-ui-config") ||
+                                        /providers[\\/]ui[\\/]styles/.test(resource)
+                                    ) {
+                                        return toUIChunk("common");
+                                    }
+
+                                    if (resource.includes("node_modules")) {
+                                        if (resource.includes("radix-ui")) {
+                                            const match = resource.match(/@radix-ui[\\/]react-([^\\/]+)/);
+
+                                            if (match) {
+                                                const radixName = match[1];
+
+                                                const mainRadixComponents = [
+                                                    "accordion",
+                                                    "avatar",
+                                                    "checkbox",
+                                                    "dialog",
+                                                    "dropdown-menu",
+                                                    "popover",
+                                                    "scroll-area",
+                                                    "select",
+                                                    "switch",
+                                                    "tabs",
+                                                    "toast",
+                                                    "tooltip",
+                                                ];
+
+                                                if (mainRadixComponents.includes(radixName)) {
+                                                    return toUIChunk(radixName);
+                                                }
+                                            }
+
+                                            return toUIChunk("common");
+                                        }
+
+                                        if (resource.includes("odometer")) {
+                                            return toUIChunk("odometer");
+                                        }
+
+                                        if (resource.includes("autosize")) {
+                                            return toUIChunk("text-area");
+                                        }
+
+                                        if (resource.includes("react-highlight-words")) {
+                                            return toUIChunk("highlight");
+                                        }
+
+                                        if (resource.includes("react-responsive-overflow-list")) {
+                                            return toUIChunk("truncate-list");
+                                        }
+                                    }
+
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    let issuer = (module as any).issuer;
+
+                                    while (issuer) {
+                                        const nameFromIssuer = extractName(issuer.resource || "");
+
+                                        if (nameFromIssuer) {
+                                            return toUIChunk(nameFromIssuer);
+                                        }
+
+                                        issuer = issuer.issuer;
+                                    }
+
+                                    return toUIChunk("common");
+                                },
+                                chunks: "all",
+                                enforce: true,
+                                priority: 30,
+                            },
+                        },
+                    },
+                };
+            }
+
+            return config satisfies Rspack;
         },
         manifest: ({manifest}) => {
             manifest.addPermission("storage");

package/src/providers/theme/ThemeProvider.tsx

@@ -14,30 +14,124 @@ const isValid = (theme: Theme | undefined): theme is Theme => {
 };
 
 export interface ThemeProviderProps extends Pick<Config, "components"> {
+    /**
+     * Theme persistence storage configuration.
+     *
+     * @remarks
+     * - When `undefined`, theme changes are stored only in component state (memory) and reset on page reload.
+     * - When `true`, uses the default `ThemeStorage` implementation (typically localStorage).
+     * - When a custom `ThemeStorageContract` object is provided, uses that implementation for theme persistence.
+     *
+     * The storage is used to save, retrieve, and watch for theme changes across sessions or tabs.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * // No persistence (memory only)
+     * <ThemeProvider>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use default storage (localStorage)
+     * <ThemeProvider storage={true}>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use custom storage implementation
+     * const customStorage: ThemeStorageContract = {
+     *   get: async () => { ... },
+     *   change: async (theme) => { ... },
+     *   toggle: async () => { ... },
+     *   watch: (callback) => { ... }
+     * };
+     *
+     * <ThemeProvider storage={customStorage}>
+     *   <App />
+     * </ThemeProvider>
+     * ```
+     */
     storage?: ThemeStorageContract | true;
+    /**
+     * The DOM element where the provider will set attributes "browser"
+     *
+     * @remarks
+     * - When a string is provided, it's used as a CSS selector to find the element via `document.querySelector`.
+     * - When an Element is provided, attributes are set directly on that element.
+     * - When `false`, no element attributes are set.
+     *
+     * Attributes are automatically cleaned up when the component unmounts.
+     *
+     * @default "html"
+     *
+     * @example
+     * ```tsx
+     * // Use default html element
+     * <ThemeProviderProps>
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use custom selector
+     * <ThemeProviderProps container="#app-root">
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Use direct element reference
+     * <ThemeProviderProps container={document.body}>
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // Disable container attributes
+     * <ThemeProviderProps container={false}>
+     *   <App />
+     * </ThemeProviderProps>
+     * ```
+     */
+    container?: string | Element | false;
 }
 
-const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({children, components, storage}) => {
+const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = props => {
+    const {children, components, storage, container} = props;
+
     const [theme, setTheme] = useState<Theme>(() => (isDarkMedia() ? Theme.Dark : Theme.Light));
 
     const currentStorage: ThemeStorageContract | undefined = useMemo(() => {
-        if (!storage) return;
+        if (!storage) {
+            return;
+        }
 
-        if (storage === true) return new ThemeStorage();
+        if (storage === true) {
+            return new ThemeStorage();
+        }
 
         return storage;
     }, [storage]);
 
-    const changeTheme = useCallback(
-        (theme: Theme) => {
-            if (currentStorage) {
-                currentStorage.change(theme).catch(e => console.error("ThemeProvider: set theme to storage error", e));
-            } else {
-                setTheme(theme);
-            }
-        },
-        [currentStorage]
-    );
+    // prettier-ignore
+    const changeTheme = useCallback((theme: Theme) => {
+        setTheme(theme);
+
+        if (currentStorage) {
+            currentStorage
+                .change(theme)
+                .catch(e => console.error("ThemeProvider: set theme to storage error", e));
+        }
+    }, [currentStorage]);
 
     const toggleTheme = useCallback(() => {
         changeTheme(theme === Theme.Dark ? Theme.Light : Theme.Dark);
@@ -57,8 +151,20 @@ const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({children, com
     }, [currentStorage]);
 
     useEffect(() => {
-        document.querySelector("html")?.setAttribute("theme", theme);
-    }, [theme]);
+        if (container === false) {
+            return;
+        }
+
+        const element = typeof container === "string" ? document.querySelector(container) : container;
+
+        if (element) {
+            element.setAttribute("theme", theme);
+
+            return () => {
+                element.removeAttribute("theme");
+            };
+        }
+    }, [theme, container]);
 
     return (
         <ThemeContext.Provider value={{theme, changeTheme, toggleTheme, components}}>{children}</ThemeContext.Provider>