npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wulechuan/scoped-glob-watchers

v0.2.12

Published

A file/glob lazy watchers controller, with scopes defined, each said scope a watcher.

Downloads

10

Readme

Scoped Glob Watchers

NPM Page

@wulechuan/scoped-glob-watchers

Introduction

This is a controller for multiple scoped lazy watchers upon globs/files.

Scopes and Actions

A scope here means one or several globs. A given watcher watches every file the said globs cover. Whenever some change happened to any of those files, a pre-defined action will be taken to response that change. The response, aka the action, makes the watcher meaningful. Otherwise, why do we watch a file?

In words, a scope is mapped to an action by a watcher.

The term glob basically means a description on how we can select some files we are interested in.

See: https://www.npmjs.com/package/glob#glob-primer

It's worth to mention that a certain file is allowed and often needed to be covered in several scopes. So that when the said file changes, several actions will be taken at the same time.

In words, one change might cause multiple actions.

Lazy Meshanism

A watcher is called a lazy one is because when a file changing event issues, the watcher doesn't take actions bound to that change immediately, but rather waits for a short period of time (by default 900 milliseconds) to gather more changes of files, be those changes happen to be of the same file, or not. When the time is up for the said wait, the watcher acts as desired.

This meshanism is meaningful in lots of cases where a batch of files change almost at the same time, while they all are bound to the same action, and they are meant to share the single take of the action.

Say we are saving a bunch of files in one go via a shortcut key in a powerful code editor, like using the "Ctrl+k s" in Microsoft Visual Studio Code. When several .styl files might change at the same time, only one single compilation action is expected to be taken upon all these changes.

Multiple Watchers and One Controller over Them

Obviously we often need several watchers to watch different scopes. For conveniences, I build this watchers controller, which basically can create and handle multiple watchers in one go, each watcher bound to a certain scope, aka some files on your file system.

Underlying File Watching Engines

Currently the controller, or the mechanism, whatever, utilizes only the gaze as the underlying file watching engine. Though theoretically the controller could connect to any other watching engine, as long as a connector is provided (which is not).

Usage

An npm script entry of this repository has been setup to run an instance of this watchers controller, utilizing gulp. So people can try it out right here inside this repository before they decide to use it elsewhere.

See below Try It out, See It in Action.

An Example

See the try-it-out/a-dummy-project/start.js included by this repository as an example.

Below is the key snippet from the said start.js.

const basePathForShorteningPathsInLog = joinPathPOSIX(
    npmProjectRootPath,
    'try-it-out/a-dummy-project'
)


// Three scopes are defined below.
// And three watchers will be created for them each.
const scopedWatchingSettings = {
    'My Lovely Images': {
        globsToWatch:                      sourceGlobsOfImagesToWatch,
        actionToTake:                      fakeActionOfCopyingImages,
        shouldTakeActionOnWatcherCreation: true,
    },
    'CSS: Stylus': {
        globsToWatch:                      sourceGlobsOfStylusToWatch,
        actionToTake:                      fakeActionOfCompilingStylus,
        shouldTakeActionOnWatcherCreation: true,
    },
    'Javascript': {
        // This one below overrides the same property in the shared settings.
        basePathForShorteningPathsInLog:   joinPathPOSIX(basePathForShorteningPathsInLog, 'javascript'),

        globsToWatch:                      sourceGlobsOfJavascriptToWatch,
        actionToTake:                      fakeActionOfCompilingJavascripts,
        shouldTakeActionOnWatcherCreation: true,
    },
};

scopedGlobsLazilyWatchingMechanism.createWatchersAccordingTo(
    scopedWatchingSettings,


    /**
        Below is an object containing some shared options across all scopes.
        If a property of same name exists in an scope settings,
        the value of the scope property will be taken,
        intead of the one defined below.
    */
    {
        // Optional but important. Default to process.cwd()
        watchingBasePath: npmProjectRootPath,

        // Optional. Just for better logging.
        basePathForShorteningPathsInLog,

        shouldLogVerbosely: false,
    }
);

Try It out, See It in Action

There is a dummy project included within this repository, so that people can try this watchers controller without difficulty.

The said dummy project locates here:

<this repository root folder>/try-it-out/a-dummy-project

Before You Try

Before you can start trying, you first need to install all dependencies for this npm project.

This is a one time action, you don't need to do it every time before you run the tryout script.

Open a console/terminal and run:

npm install

or even simpler:

npm i

Run the Tryout Script

Open a console/terminal and run:

npm start

That's it.

What to Try

Now the script is up and running, what should we do to see something meaningful?

Well, the controller first create 3 watchers, each for a scope covering some files in the dummy project.

Then you can randomly make changes to those files. For example you can modify contents of some files and save them, you can create some new files, or you can delete existing ones.

Keep an eye on the console/terminal, you should see beautiful messages logged there.

Note that the scopes are designed in together to cover all files in that project. So basically any file change will for sure trigger some action.

Also note that it's the dummy project files that are watched, not the source files of this repository.

A Snapshot of Mine

Here is a snapshot of my console, hosted within Cygwin.

After Some Changes

API

Sorry. I don't have too much spare time at present. I have my boy to take care of.

Consult my ugly source codes if you'd like to. :p

Changes from Version to Version

Changes in v0.2.10

  • Try out dummy project no longer use Gulp.

Changes in v0.2.0

Only some internal APIs changed. Bugs Fixed.

Changes in v0.1.0

  • For the construction options of watchers, the property basePath has been renamed into watchingBasePath.

  • For the construction options of watchers, a new property basePathForShorteningPathsInLog is added.