@budsbox/builder_vite 1.0.0 → 2.1.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { createBaseConfig, formatVarName, formatFileName } from './lib.js';
+export { createConfigFactory, formatFileName, formatVarName } from './lib.js';
 export { usePlainConfig } from './plain.js';
 export { useReactConfig } from './react.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,5 @@
-export { createBaseConfig, formatVarName, formatFileName } from './lib.js';
+// Value exports
+export { createConfigFactory, formatFileName, formatVarName } from './lib.js';
 export { usePlainConfig } from './plain.js';
 export { useReactConfig } from './react.js';
 //# sourceMappingURL=index.js.map

package/dist/lib.d.ts

@@ -1,16 +1,21 @@
+import type { PackageJson } from 'type-fest';
+import type { ResolvedJson } from '@budsbox/lib-node/pckg';
+import type { ConfigFactoryWithOptions, CustomUserConfigFn, ScopedNameGenerator } from './types.js';
 import { type LibraryOptions, type UserConfigExport, type UserConfigFnPromise } from 'vite';
 /**
- * Creates a base configuration function that merges a provided base configuration
- * with a custom configuration. The result is a function that resolves and merges
- * both configurations based on the given environment.
+ * Creates a configuration factory that extends or modifies a base configuration.
  *
- * @param base - The base configuration, which can either be a `UserConfigExport` object
- * or a function that resolves to a `UserConfigExport` object based on the provided environment.
- * @returns A function that accepts a custom configuration of type `UserConfigExport`
- * and returns a promise-based configuration function (`UserConfigFnPromise`) that resolves
- * to a merged configuration.
+ * @param base - A custom user configuration function that defines the base options.
+ * @returns A configuration factory function that accepts a custom config and an options object to customize or extend the base configuration.
  */
-export declare function createBaseConfig(base: UserConfigExport): (custom?: UserConfigExport) => UserConfigFnPromise;
+export declare function createConfigFactory<TOptions extends object>(base: CustomUserConfigFn<TOptions>): ConfigFactoryWithOptions<TOptions>;
+/**
+ * Creates a configuration factory function that merges a base configuration with a custom configuration.
+ *
+ * @param base - The base configuration to be used as the default.
+ * @returns A function that accepts an optional custom configuration and returns a promise resolving to the merged configuration function.
+ */
+export declare function createConfigFactory(base: UserConfigExport): (custom?: UserConfigExport) => UserConfigFnPromise;
 /**
  * Formats a package name into a standardized string format, suitable for use as a variable name.
  *
@@ -29,4 +34,16 @@ export declare const formatVarName: (packageName: string) => string;
  *          where the extension is either `mjs` for `es` format or `cjs` for other formats.
  */
 export declare const formatFileName: Exclude<LibraryOptions['fileName'], string | undefined>;
+/**
+ * Factory function for creating a `ScopedNameGenerator` that generates scoped,
+ * unique CSS class names based on file paths, package details, and additional rules.
+ *
+ * @param basePackage - The resolved package.json of the base package as a read-only object.
+ *   This package serves as the reference point for relative path calculations and scoping.
+ * @param excludePathChunks - An optional array of path chunks to exclude from being used in
+ *   generated scoped names. Defaults to ['src', 'dist', 'build', 'node_modules'].
+ * @returns A `ScopedNameGenerator` function that takes a local CSS class name and a file path
+ *   as input and returns a generated scoped name.
+ */
+export declare const generateScopedNameFactory: (basePackage: Readonly<ResolvedJson<PackageJson>>, excludePathChunks?: readonly string[]) => ScopedNameGenerator;
 //# sourceMappingURL=lib.d.ts.map

package/dist/lib.js

@@ -1,21 +1,15 @@
+import { readFileSync } from 'node:fs';
+import { basename, dirname, relative } from 'node:path';
+import cssesc from 'cssesc';
 import { mergeConfig, } from 'vite';
-import { isFunction, isNotNil } from '@budsbox/lib-es/guards';
+import { createCachedFn } from '@budsbox/lib-es/function';
+import { isFunction, isNil, isNotNil, isString } from '@budsbox/lib-es/guards';
 import { fif } from '@budsbox/lib-es/logical';
-import { camelCase, parsePackageName } from '@budsbox/lib-es/string';
-/**
- * Creates a base configuration function that merges a provided base configuration
- * with a custom configuration. The result is a function that resolves and merges
- * both configurations based on the given environment.
- *
- * @param base - The base configuration, which can either be a `UserConfigExport` object
- * or a function that resolves to a `UserConfigExport` object based on the provided environment.
- * @returns A function that accepts a custom configuration of type `UserConfigExport`
- * and returns a promise-based configuration function (`UserConfigFnPromise`) that resolves
- * to a merged configuration.
- */
-export function createBaseConfig(base) {
-    return (custom) => async (env) => {
-        const resolvedBase = await fif(await base, isFunction, (baseFn) => baseFn(env), (baseObj) => baseObj);
+import { camelCase, parsePackageName, splitPath } from '@budsbox/lib-es/string';
+import { lookupFileSync } from '@budsbox/lib-node/fs';
+export function createConfigFactory(base) {
+    return (custom, options) => async (env) => {
+        const resolvedBase = await fif(await base, isFunction, (baseFn) => baseFn(env, options), (baseObj) => baseObj);
         const resolvedCustom = await fif(await custom, isFunction, (customFn) => customFn(env), (customObj) => customObj);
         return mergeConfig(resolvedBase, resolvedCustom ?? {});
     };
@@ -46,4 +40,78 @@ export const formatVarName = (packageName) => {
  *          where the extension is either `mjs` for `es` format or `cjs` for other formats.
  */
 export const formatFileName = (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`;
+/**
+ * Factory function for creating a `ScopedNameGenerator` that generates scoped,
+ * unique CSS class names based on file paths, package details, and additional rules.
+ *
+ * @param basePackage - The resolved package.json of the base package as a read-only object.
+ *   This package serves as the reference point for relative path calculations and scoping.
+ * @param excludePathChunks - An optional array of path chunks to exclude from being used in
+ *   generated scoped names. Defaults to ['src', 'dist', 'build', 'node_modules'].
+ * @returns A `ScopedNameGenerator` function that takes a local CSS class name and a file path
+ *   as input and returns a generated scoped name.
+ */
+export const generateScopedNameFactory = (basePackage, excludePathChunks = [
+    'src',
+    'dist',
+    'build',
+    'node_modules',
+]) => {
+    const excludeSet = new Set(excludePathChunks);
+    const { scope: baseScope } = parsePackageName(basePackage.json.name ?? 'anon', true);
+    const lookupCache = new Map();
+    const packageCache = new Map();
+    const scopedNameCache = new Map();
+    const scopedNameGenerator = (localName, filepath) => {
+        const foundPath = lookupFileSync({
+            startDir: dirname(filepath),
+            filename: 'package.json',
+            cache: lookupCache,
+        });
+        let pckgPrefix = '';
+        if (isString(foundPath)) {
+            if (foundPath !== basePackage.path) {
+                const pckg = readPackageJson(packageCache, foundPath);
+                const { scope, name } = parsePackageName(pckg.name ?? '', true);
+                pckgPrefix =
+                    scope === baseScope || isNil(scope) ? name : `${scope}_-_${name}`;
+            }
+        }
+        else {
+            pckgPrefix = '-standalone-';
+        }
+        const subPath = relative(dirname(foundPath ?? basePackage.path), filepath);
+        const pathPart = splitPath(dirname(subPath))
+            .map((chunk) => (chunk === '..' ? '_--_' : chunk))
+            .filter((chunk) => !excludeSet.has(chunk))
+            .join('-');
+        const nameChunks = basename(filepath)
+            .split('.')
+            // remove extension
+            .slice(0, -1);
+        // remove `module` sub-extension
+        if (nameChunks.at(-1) === 'module') {
+            nameChunks.pop();
+        }
+        // remove common filename
+        if (nameChunks.at(-1) === 'style') {
+            nameChunks.pop();
+        }
+        return cssesc([
+            pckgPrefix,
+            [pathPart, nameChunks.join('-')].filter(Boolean).join('_'),
+            localName,
+        ]
+            .filter(Boolean)
+            .join('__'));
+    };
+    const cached = createCachedFn(scopedNameGenerator, (...args) => args.join(':'));
+    const generateScopedName = (localName, filepath) => cached(scopedNameCache, localName, filepath);
+    return generateScopedName;
+};
+const readPackageJson = createCachedFn((path) => {
+    if (!path.endsWith('package.json'))
+        throw new Error(`Not a package.json path: ${path}`);
+    return JSON.parse(readFileSync(path, 'utf-8'));
+});
 //# sourceMappingURL=lib.js.map

package/dist/plain.d.ts

@@ -1,2 +1,44 @@
-export declare const usePlainConfig: (custom?: import("vite").UserConfigExport) => import("vite").UserConfigFnPromise;
+import { type PluginOptions } from 'vite-plugin-react-rich-svg';
+/**
+ * Extended configuration options for the `vite-plugin-react-rich-svg` plugin.
+ *
+ * @see https://github.com/iGoodie/vite-plugin-react-rich-svg?tab=readme-ov-file#plugin-configurations
+ */
+export interface CustomReactRichSvgOptions extends PluginOptions {
+    /**
+     * Enables/disables SVGO optimization for the whole plugin.
+     * Defaults to `true` when `NODE_ENV` is `production`. May be overridden by sub-options (like `rawLoaderOptions.svgoEnabled`).
+     */
+    svgoEnabled?: boolean;
+    /**
+     * Default SVGO configuration for the whole plugin.
+     */
+    svgoConfig?: NonNullable<PluginOptions['rawLoaderOptions']>['svgoConfig'];
+}
+/**
+ * Represents configuration options for plain configurations.
+ */
+export interface PlainConfigOptions {
+    /**
+     * The `import.meta` object.
+     */
+    importMeta?: ImportMeta;
+    /**
+     * Whether the configuration is for a library.
+     */
+    lib?: boolean;
+    /**
+     * An array of strings representing the chunks to exclude from the path part when generating scoped names for CSS modules.
+     */
+    generateScopedNameExcludedPathChunks?: readonly string[];
+    /**
+     * Whether to add the scope of the package to the conditions for module `exports` resolution.
+     */
+    addScopeToConditions?: boolean;
+    /**
+     * Options for the `vite-plugin-react-rich-svg` plugin.
+     */
+    reactRichSvgOptions?: CustomReactRichSvgOptions;
+}
+export declare const usePlainConfig: import("./types.js").ConfigFactoryWithOptions<PlainConfigOptions>;
 //# sourceMappingURL=plain.d.ts.map

package/dist/plain.js

@@ -1,21 +1,84 @@
+import { env } from 'node:process';
 import { NodePackageImporter } from 'sass-embedded';
-import { createBaseConfig } from './lib.js';
-export const usePlainConfig = createBaseConfig(({ mode }) => ({
-    root: 'src',
-    build: {
-        outDir: '../dist',
-        emptyOutDir: true,
-    },
-    css: {
-        modules: {
-            localsConvention: 'camelCaseOnly',
-            generateScopedName: mode === 'production' ? '[hash:hex]' : '[path][name]__[local]',
+import { defaultClientConditions } from 'vite';
+import richSvg from 'vite-plugin-react-rich-svg';
+import { isNotNil } from '@budsbox/lib-es/guards';
+import { fifs } from '@budsbox/lib-es/logical';
+import { parsePackageName } from '@budsbox/lib-es/string';
+import { findCurrentPackageJson } from '@budsbox/lib-node/pckg';
+import packageJson from '#package.json' with { type: 'json' };
+import { createConfigFactory, formatFileName, formatVarName, generateScopedNameFactory, } from './lib.js';
+export const usePlainConfig = createConfigFactory(async ({ mode }, { importMeta, lib = false, generateScopedNameExcludedPathChunks, addScopeToConditions = false, 
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+reactRichSvgOptions = {}, } = {}) => {
+    const basePackage = await findCurrentPackageJson(importMeta);
+    const { scope: baseScope } = parsePackageName(basePackage.json.name ?? 'anon', true);
+    const clientConditions = ((addScopeToConditions ||
+        // enabled by default in this monorepo
+        sameScope(packageJson, basePackage.json)) &&
+        isNotNil(baseScope)) ?
+        [baseScope, ...defaultClientConditions]
+        : [...defaultClientConditions];
+    const svgoEnabled = reactRichSvgOptions.svgoEnabled ?? env.NODE_ENV === 'production';
+    const svgoConfig = reactRichSvgOptions.svgoConfig ?? {};
+    return {
+        plugins: [
+            richSvg({
+                ...reactRichSvgOptions,
+                base64LoaderOptions: {
+                    svgoEnabled,
+                    svgoConfig,
+                    ...reactRichSvgOptions.base64LoaderOptions,
+                },
+                componentLoaderOptions: {
+                    ...reactRichSvgOptions.componentLoaderOptions,
+                    svgrConfig: {
+                        svgo: svgoEnabled,
+                        svgoConfig,
+                        ...reactRichSvgOptions.componentLoaderOptions?.svgrConfig,
+                    },
+                },
+                rawLoaderOptions: {
+                    svgoEnabled,
+                    svgoConfig,
+                    ...reactRichSvgOptions.rawLoaderOptions,
+                },
+                urlLoaderOptions: {
+                    svgoEnabled,
+                    svgoConfig,
+                    ...reactRichSvgOptions.urlLoaderOptions,
+                },
+            }),
+        ],
+        resolve: {
+            conditions: clientConditions,
         },
-        preprocessorOptions: {
-            scss: {
-                importers: [new NodePackageImporter()],
+        root: 'src',
+        build: {
+            outDir: '../dist',
+            emptyOutDir: true,
+            ...fifs(lib, {
+                lib: {
+                    entry: 'index.ts',
+                    name: formatVarName(basePackage.json.name ?? '_anon_'),
+                    fileName: formatFileName,
+                    cssFileName: 'index',
+                },
+            }),
+        },
+        css: {
+            modules: {
+                localsConvention: 'camelCaseOnly',
+                generateScopedName: mode === 'production' ? '[hash:hex]' : (generateScopedNameFactory(basePackage, generateScopedNameExcludedPathChunks)),
+            },
+            preprocessorOptions: {
+                scss: {
+                    importers: [new NodePackageImporter()],
+                },
             },
         },
-    },
-}));
+    };
+});
+const sameScope = (p1, p2) => parsePackageName(p1.name ?? '', true).scope ===
+    parsePackageName(p2.name ?? '', true).scope;
 //# sourceMappingURL=plain.js.map

package/dist/react.d.ts

@@ -1,2 +1,8 @@
-export declare const useReactConfig: (custom?: import("vite").UserConfigExport) => import("vite").UserConfigFnPromise;
+import { type PlainConfigOptions } from './plain.js';
+/**
+ * Represents configuration options for Vite+React configurations.
+ */
+export interface ReactConfigOptions extends PlainConfigOptions {
+}
+export declare const useReactConfig: import("./types.js").ConfigFactoryWithOptions<ReactConfigOptions>;
 //# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -1,13 +1,31 @@
 import react from '@vitejs/plugin-react';
-import { createBaseConfig } from './lib.js';
+import { isTrue } from '@budsbox/lib-es/guards';
+import { fif } from '@budsbox/lib-es/logical';
+import { createConfigFactory } from './lib.js';
 import { usePlainConfig } from './plain.js';
-export const useReactConfig = createBaseConfig(usePlainConfig(() => ({
-    plugins: [
-        react({
-            babel: {
-                plugins: ['babel-plugin-react-compiler'],
+export const useReactConfig = createConfigFactory((env, options) => usePlainConfig(() => {
+    const libConfig = fif(options?.lib, isTrue, {
+        build: {
+            rollupOptions: {
+                external: ['react', 'react-dom'],
+                output: {
+                    globals: {
+                        'react': 'React',
+                        'react-dom': 'ReactDOM',
+                    },
+                },
             },
-        }),
-    ],
-})));
+        },
+    });
+    return {
+        plugins: [
+            react({
+                babel: {
+                    plugins: ['babel-plugin-react-compiler'],
+                },
+            }),
+        ],
+        ...libConfig,
+    };
+}, options)(env));
 //# sourceMappingURL=react.js.map

package/dist/types.d.ts

@@ -0,0 +1,38 @@
+import type { ConfigEnv, UserConfig, UserConfigExport, UserConfigFnPromise } from 'vite';
+import type { Awaitable, Undef } from '@budsbox/lib-types';
+/**
+ * Represents a custom user configuration function used to generate Vite configuration.
+ *
+ * @typeParam TOptions - The type of the custom options object, with a default to `object`.
+ * @param viteEnv - A readonly object representing the Vite configuration environment.
+ * @param options - An optional readonly object representing additional custom configuration options.
+ * @returns A promise or value containing the generated Vite user configuration.
+ */
+export type CustomUserConfigFn<TOptions extends object = object> = (viteEnv: Readonly<ConfigEnv>, options?: Undef<Readonly<TOptions>>) => Awaitable<UserConfig>;
+/**
+ * A `ConfigFactory` is a function type that generates an asynchronous Vite's configuration object generator function.
+ *
+ * @param custom - An optional custom configuration of type `UserConfigExport`. It can be used
+ * to override or extend default configurations.
+ * @returns A function to be invoked by Vite to generate the final configuration object.
+ */
+export type ConfigFactory = (custom?: UserConfigExport) => UserConfigFnPromise;
+/**
+ * A `ConfigFactory` is a function type that generates an asynchronous Vite's configuration object generator function.
+ *
+ * @param custom - An optional custom configuration of type `UserConfigExport`. It can be used
+ * to override or extend default configurations.
+ * @param options - An optional object containing additional configuration options, specific to the factory.
+ * @returns A function to be invoked by Vite to generate the final configuration object.
+ */
+export type ConfigFactoryWithOptions<TOptions extends object> = (custom?: UserConfigExport, options?: Readonly<Partial<TOptions>>) => UserConfigFnPromise;
+/**
+ * A type definition for a function that generates a scoped class name for a given input.
+ * This is used in CSS module transformations.
+ *
+ * @param localName - The local name of the class or element.
+ * @param filename - The filename of the source file.
+ * @returns A scoped class name.
+ */
+export type ScopedNameGenerator = (this: void, localName: string, filename: string) => string;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@budsbox/builder_vite",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "homepage": "https://gitlab.com/budsbox/fe/seed",
   "bugs": {
     "url": "https://gitlab.com/budsbox/fe/seed/-/issues"
@@ -10,13 +10,15 @@
   "author": "Konstantin Kutsyllo <trikadin@pm.me>",
   "type": "module",
   "imports": {
-    "#package.json": "./package.json"
+    "#package.json": "./package.json",
+    "#client": "./client.d.ts"
   },
   "exports": {
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./client": "./client.d.ts",
     "./package.json": "./package.json"
   },
   "files": [
@@ -28,30 +30,36 @@
     "prepack": "yarn p:ts:prepack"
   },
   "dependencies": {
-    "@budsbox/lib-es": "^2.2.0",
-    "tslib": "^2.8.1"
+    "@budsbox/lib-es": "^2.3.0",
+    "@budsbox/lib-node": "^1.1.1",
+    "@types/node": "^22.15.2",
+    "cssesc": "^3.0.0",
+    "ts-deepmerge": "^7.0.3",
+    "tslib": "^2.8.1",
+    "type-fest": "^4.32.0"
   },
   "devDependencies": {
     "@budsbox/eslint": "^1.2.0",
-    "@budsbox/eslint_presets-node-lib": "^1.0.3",
-    "@budsbox/eslint_presets-tools": "^1.0.3",
-    "@budsbox/lib-types": "^1.1.0",
-    "@budsbox/tsconfigs": "^4.3.0",
+    "@budsbox/eslint_presets-node-lib": "^1.0.4",
+    "@budsbox/eslint_presets-tools": "^1.0.4",
+    "@budsbox/lib-types": "^1.3.0",
+    "@budsbox/tsconfigs": "^4.3.1",
+    "@types/cssesc": "^3",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.15.2",
     "@vitejs/plugin-react": "^5.0.3",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
     "eslint": "^9.26.0",
     "sass-embedded": "^1.92.1",
-    "type-fest": "^4.32.0",
     "typescript": "^5.8.3",
-    "vite": "^7.1.5"
+    "vite": "^7.1.5",
+    "vite-plugin-react-rich-svg": "1.x"
   },
   "peerDependencies": {
     "@vitejs/plugin-react": "^5.0.3",
     "babel-plugin-react-compiler": "^19.1.0-rc.3",
     "sass-embedded": "^1.92.1",
-    "vite": "^7.1.5"
+    "vite": "^7.1.5",
+    "vite-plugin-react-rich-svg": "1.x"
   },
   "packageManager": "yarn@4.9.2"
 }