{"id":10918,"library":"framework-utils","title":"framework-utils","description":"framework-utils is a concise, TypeScript-first utility library providing focused functions primarily for front-end framework development, with its current stable version being 1.1.0. It's part of the broader Daybrush ecosystem of UI components and tools, distinguishing itself by offering specific, lightweight solutions like CSS class prefixing and CSS string manipulation. The package generally follows an 'as-needed' release cadence, with updates typically coinciding with new features, bug fixes, or compatibility adjustments within the Daybrush project family. Its key differentiators include its explicit TypeScript support, minimal dependencies, and clear focus on solving common boilerplate problems in UI development, making it suitable for projects that require precise, low-overhead utility functions rather than a broad, opinionated framework.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/daybrush/framework-utils","tags":["javascript","typescript"],"install":[{"cmd":"npm install framework-utils","lang":"bash","label":"npm"},{"cmd":"yarn add framework-utils","lang":"bash","label":"yarn"},{"cmd":"pnpm add framework-utils","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM named import is the standard for this TypeScript-first library. CommonJS require() is not officially supported and may lead to undefined behavior or type errors.","wrong":"const { prefixNames } = require('framework-utils');","symbol":"prefixNames","correct":"import { prefixNames } from 'framework-utils';"},{"note":"Direct named import is preferred for tree-shaking and clarity. While a wildcard import may work, it can pull in unused code if your bundler isn't configured correctly.","wrong":"import * as FrameworkUtils from 'framework-utils'; FrameworkUtils.prefixCSS(...);","symbol":"prefixCSS","correct":"import { prefixCSS } from 'framework-utils';"},{"note":"This library does not appear to have a default export. Attempting to import a default will result in an undefined value or a runtime error. Use named imports or a namespace import for all available utilities.","wrong":"import FrameworkUtils from 'framework-utils';","symbol":"All exports","correct":"import type * as FrameworkUtils from 'framework-utils'; // For type checking only\nimport * as FrameworkUtilsRuntime from 'framework-utils'; // For runtime usage"}],"quickstart":{"code":"import { prefixNames, prefixCSS } from 'framework-utils';\n\n// Example 1: Prefixing multiple class names\nconst baseName = \"my-component-\";\nconst namesToPrefix = [\"header\", \"body\", \"footer\"];\nconst prefixedClassNames = prefixNames(baseName, ...namesToPrefix);\n\nconsole.log(`Prefixed class names: ${prefixedClassNames}`);\n// Expected output: \"Prefixed class names: my-component-header my-component-body my-component-footer\"\n\n// Example 2: Prefixing CSS selectors within a style string\nconst cssPrefix = \"app-scope-\";\nconst rawCSS = `\n.button {\n  background-color: blue;\n}\n.text-input, .text-area {\n  border: 1px solid gray;\n}\n/* Comments are also handled */\n`;\nconst prefixedStyle = prefixCSS(cssPrefix, rawCSS);\n\nconsole.log(`Prefixed CSS:\n${prefixedStyle}`);\n/* Expected output:\nPrefixed CSS:\n.app-scope-button {\n  background-color: blue;\n}\n.app-scope-text-input, .app-scope-text-area {\n  border: 1px solid gray;\n}\n*/\n\n// Demonstrate using another utility if available (hypothetical, based on common patterns)\n// As the README only shows prefixNames and prefixCSS, we focus on expanding those.\n// const someOtherUtil = FrameworkUtilsRuntime.someOtherUtility();\n// console.log(someOtherUtil);","lang":"typescript","description":"Demonstrates the core functionality of `framework-utils` by prefixing both class names and CSS selectors, highlighting common use cases for UI development."},"warnings":[{"fix":"Ensure your project uses an ESM-compatible module system (e.g., `\"type\": \"module\"` in `package.json` for Node.js, or a bundler like Webpack/Rollup for browser environments) and uses `import` statements.","message":"This library is primarily designed for ESM (ECMAScript Modules) environments and ships with TypeScript types. While CommonJS environments might work with transpilation, direct `require()` calls are not officially supported and can lead to runtime issues or incorrect type inference, especially in modern Node.js setups.","severity":"gotcha","affected_versions":">=1.0.0"},{"message":"When using `prefixCSS`, be aware that it performs string manipulation on CSS. Extremely complex or malformed CSS strings, especially those relying on advanced parsing or non-standard syntax, might not be handled as expected. Always test the output with your specific CSS.","severity":"gotcha"},{"message":"The `framework-utils` package is specifically designed as a utility helper for framework development, often within the Daybrush ecosystem. While generic, ensure its utilities align with your project's needs to avoid unnecessary dependency or partial reimplementation if only a small fraction of its functionality is required. Consider its targeted scope before adopting.","severity":"gotcha"},{"fix":"Check the GitHub repository for recent commits or issues to gauge ongoing activity. Consider contributing fixes or new features if needed, or evaluate alternative, more actively maintained libraries for new projects.","message":"While not explicitly stated as deprecated, the package has not seen a version update since 1.1.0 in 2021. Users should be mindful that maintenance might be limited to critical issues or updates related to other Daybrush projects, rather than active feature development.","severity":"deprecated","affected_versions":"<=1.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your project's module resolution is configured for ESM. For Node.js, add `\"type\": \"module\"` to your `package.json`. For bundlers, verify that Babel or TypeScript compilation targets allow for correct ESM output and imports.","cause":"This typically occurs in a CommonJS environment trying to import an ESM-only library, or when a bundler incorrectly processes the module.","error":"TypeError: (0 , framework_utils__WEBPACK_IMPORTED_MODULE_0__.prefixNames) is not a function"},{"fix":"Run `npm install framework-utils` or `yarn add framework-utils`. If TypeScript still reports an error, ensure your `tsconfig.json` includes `\"moduleResolution\": \"Node16\"` or `\"Bundler\"` and that `\"skipLibCheck\": true` isn't masking other issues. The library ships its own types.","cause":"The package is not installed, or TypeScript cannot find its declaration files (`.d.ts`).","error":"Cannot find module 'framework-utils' or its corresponding type declarations."},{"fix":"Change `import FrameworkUtils from 'framework-utils';` to `import { prefixNames, prefixCSS } from 'framework-utils';` for specific utilities, or `import * as FrameworkUtils from 'framework-utils';` for a namespace import.","cause":"Attempting to import a default export from `framework-utils` when only named exports are provided.","error":"TS2305: Module '\"framework-utils\"' has no default export."}],"ecosystem":"npm"}