{"id":12988,"library":"component-watcher","title":"Component Watcher","description":"The `component-watcher` package, last updated in 2015 with version 1.0.3, served as a file watching utility specifically designed for the \"Component\" JavaScript module system. It monitored a `component.json` file and emitted events (`resolve`, `scripts`, `styles`) when changes occurred in relevant files, allowing external tools to trigger rebuilds or re-resolutions of assets. The package’s development ceased around 2015, coinciding with the broader decline of the \"Component\" ecosystem in favor of modern bundlers like Webpack, Rollup, and Parcel. Consequently, it is not actively maintained, does not follow a release cadence, and is largely obsolete for contemporary web development workflows. Its core differentiator was its tight integration with the now-defunct \"Component\" build process, which is no longer a prevalent method for front-end asset management.","status":"abandoned","version":"1.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/component/watcher.js","tags":["javascript"],"install":[{"cmd":"npm install component-watcher","lang":"bash","label":"npm"},{"cmd":"yarn add component-watcher","lang":"bash","label":"yarn"},{"cmd":"pnpm add component-watcher","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is CommonJS-only, as it was last updated in 2015. Direct ESM imports are not supported.","wrong":"import { watch } from 'component-watcher'","symbol":"watch","correct":"const watch = require('component-watcher')"},{"note":"The default export is the `watch` function, which is then called to create a watcher instance. There is no default ESM export.","wrong":"import watcher from 'component-watcher'","symbol":"Watcher instance","correct":"const watcher = require('component-watcher')()"}],"quickstart":{"code":"const watch = require('component-watcher');\nconst path = require('path');\n\n// Create a dummy component.json and a script file for demonstration\nconst fs = require('fs');\nconst rootDir = path.join(__dirname, 'temp_component_project');\nconst componentJsonPath = path.join(rootDir, 'component.json');\nconst scriptFilePath = path.join(rootDir, 'index.js');\n\nif (!fs.existsSync(rootDir)) fs.mkdirSync(rootDir, { recursive: true });\nfs.writeFileSync(componentJsonPath, JSON.stringify({\n  \"name\": \"my-component\",\n  \"version\": \"1.0.0\",\n  \"scripts\": [\n    \"index.js\"\n  ]\n}, null, 2));\nfs.writeFileSync(scriptFilePath, '// Initial script content\\nconsole.log(\"Hello\");');\n\nconsole.log(`Watching directory: ${rootDir}`);\n\nconst watcher = watch({\n  root: rootDir,\n  development: true, // Watch development specific fields\n  extensions: { scripts: ['js', 'json', 'html'], styles: ['css'] },\n  fields: { scripts: ['scripts', 'json', 'templates'], styles: ['styles'] }\n});\n\nwatcher.on('resolve', () => {\n  console.log('Event: resolve - component.json or file added/removed. Re-resolve dependencies.');\n});\n\nwatcher.on('scripts', () => {\n  console.log('Event: scripts - A script file changed. Rebuild scripts.');\n});\n\nwatcher.on('styles', () => {\n  console.log('Event: styles - A style file changed. Rebuild styles.');\n});\n\nwatcher.on('error', (err) => {\n  console.error('Watcher encountered an error:', err);\n});\n\n// The watcher starts automatically, but can be manually started/restarted\n// watcher.start(); \n\nconsole.log('Watcher initialized. Try modifying or deleting temp_component_project/index.js or temp_component_project/component.json');\nconsole.log('Press Ctrl+C to stop and clean up.');\n\n// Keep the process alive and clean up on exit\nprocess.on('SIGINT', () => {\n  console.log('\\nStopping watcher and cleaning up...');\n  watcher.stop();\n  fs.unlinkSync(componentJsonPath);\n  fs.unlinkSync(scriptFilePath);\n  fs.rmdirSync(rootDir);\n  process.exit();\n});","lang":"javascript","description":"This quickstart demonstrates how to initialize the `component-watcher` to monitor a `component.json` file and associated script files within a specified root directory. It sets up event listeners for `resolve`, `scripts`, and `styles` changes, logging messages when these events are emitted, and includes basic setup and cleanup for a temporary project structure."},"warnings":[{"fix":"Migrate to modern file watching solutions like `chokidar` or bundler-specific watch modes (e.g., Webpack's `watch` option, Rollup's `rollup -w`, Parcel's built-in watcher).","message":"The `component-watcher` package is abandoned and has not been updated since 2015. It relies on the defunct 'Component' JavaScript module system, which is no longer used in modern web development. Using this package in contemporary projects is highly discouraged.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure usage strictly adheres to CommonJS `require()` syntax within a CommonJS environment. If used in an ESM project, an explicit CommonJS wrapper or bundler configuration would be necessary, but this is not recommended due to the package's overall deprecation.","message":"This package is CommonJS-only. Attempting to use `import` syntax directly in an ESM module will result in a `TypeError: require is not a function` or similar module resolution errors. It was developed prior to widespread ESM adoption in Node.js.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use dedicated file watchers or build tool features for your specific project setup. For example, `webpack-dev-server` for Webpack projects, `rollup-plugin-serve` for Rollup, or `nodemon` for Node.js server restarts.","message":"The package's reliance on a specific `component.json` structure and the 'Component' ecosystem means it will not function as a general-purpose file watcher for projects using other module systems or build tools. Its events are tailored to the 'Component' build process.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"This package is CommonJS-only. Use `const watch = require('component-watcher');` instead, and ensure your project or file is treated as CommonJS.","cause":"Attempting to use `import watch from 'component-watcher'` in an ECMAScript Module (ESM) context.","error":"TypeError: require is not a function"},{"fix":"This package is not actively maintained and may not implement robust error handling or optimization for file descriptor limits. Consider using modern file watchers like `chokidar` or `@parcel/watcher` which offer better performance and handle these issues more gracefully. If you must use it, try increasing your system's `ulimit -n`.","cause":"The underlying file watching mechanism (likely Node.js `fs.watch`) hit the system's limit for open file descriptors when watching a large number of files or deeply nested directories.","error":"Error: EMFILE: too many open files, watch"},{"fix":"Ensure the `root` option points to a directory that exists and contains a valid `component.json` file, as this package is tightly coupled to that specific project structure.","cause":"`component-watcher` was initialized with a `root` option that does not contain a `component.json` file or refers to a non-existent path.","error":"Watcher encountered an error: Error: ENOENT: no such file or directory, stat 'path/to/component.json'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}