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

componentsjs

v6.3.0

Published

A semantic dependency injection framework

Downloads

45,459

Readme

Components.js

A semantic dependency injection framework

Build status Coverage Status npm version DOI

This repository contains the source code of Components.js. Full documentation on its usage can be found at http://componentsjs.readthedocs.io/.

Interested in contributing to this project? Have a look at this contribution guide.

Introduction

Components.js is a dependency injection framework for TypeScript and JavaScript projects using JSON(-LD) files.

Instead of hard-wiring software components together, Components.js allows these components to be instantiated and wired together declaratively using semantic configuration files. The advantage of these semantic configuration files is that software components can be uniquely and globally identified using URIs.

Configurations can be written in any RDF serialization, such as JSON-LD.

This software is aimed for developers who want to build modular and easily configurable and rewireable JavaScript applications.

Get started with the TypeScript or JavaScript quick start guide below!

Quick Start (TypeScript)

1. Install dependencies

Components.js can be installed using npm:

$ npm install componentsjs

Component and module files can be automatically generated using Components-Generator.js:

$ npm install -D componentsjs-generator

2. Mark your package as a Components.js module

package.json:

{
  "name": "my-package",
  "version": "2.3.4",
  "lsd:module": true,
  "main": "index.js",
  "types": "index.d.ts",
  ...
  "scripts": {
    ...
    "build": "npm run build:ts && npm run build:components",
    "build:ts": "tsc",
    "build:components": "componentsjs-generator",
    "prepare": "npm run build",
    ...
  }
}

"lsd:module" will allow Components.js to find your module(s) when they are included from other packages.

The "scripts" entry will make sure that all required component files will be generated when building your package.

The componentsjs-generator will look for your compiled TypeScript files (.d.ts) in the lib/ directory. If you use a different output directory for TypeScript (e.g. dist/), you must pass this to the generator using -s flag (e.g. componentsjs-generator -s dist).

3. Create a configuration file to instantiate our class

Assuming a TypeScript class that is exported from the package:

export class MyClass {
  public readonly name: string;
  constructor(name: string) {
    this.name = name;  
  }
}

config.jsonld:

{
  "@context": [
    "https://linkedsoftwaredependencies.org/bundles/npm/componentsjs/^6.0.0/components/context.jsonld",
    "https://linkedsoftwaredependencies.org/bundles/npm/my-package/^2.0.0/components/context.jsonld"
  ],
  "@id": "urn:my-package:myInstance",
  "@type": "MyClass",
  "name": "John"
}

This configuration is a semantic representation of the instantiation of MyClass with name set to "John".

4. Instantiate from config file

...
import { ComponentsManager } from 'componentsjs';

const manager = await ComponentsManager.build({
  mainModulePath: __dirname, // Path to your npm package's root
});
await manager.configRegistry.register('config.jsonld');
const myInstance = await manager.instantiate('urn:my-package:myInstance');
...

myInstance is an instance of type MyClass, as defined in the config file.

After running npm run build, you can now execute your program.

Quick Start (JavaScript)

1. Install dependencies

Components.js can be installed using npm:

$ npm install componentsjs

2. Define your module and its components

Assuming a JavaScript class that is exported from the package:

export class MyClass {
  public readonly name;
  constructor(name) {
    this.name = name;  
  }
}

module.jsonld:

{
  "@context": [
    "https://linkedsoftwaredependencies.org/bundles/npm/componentsjs/^6.0.0/components/context.jsonld",
    { "ex": "http://example.org/" }
  ],
  "@id": "ex:MyPackage",
  "@type": "Module",
  "requireName": "my-package",
  "components": [
    {
      "@id": "ex:MyPackage/MyClass",
      "@type": "Class",
      "requireElement": "MyClass",
      "parameters": [
        { "@id": "ex:MyPackage/MyClass#name", "unique": true }
      ],
      "constructorArguments": [
        { "@id": "ex:MyPackage/MyClass#name" }
      ]
    }
  ]
}

The npm module my-package exports a class with the name MyClass.

The constructor of MyClass takes a single name argument.

3. Create a configuration file to instantiate our class

config.jsonld:

{
  "@context": [
    "https://linkedsoftwaredependencies.org/bundles/npm/componentsjs/^6.0.0/components/context.jsonld",
    {
      "ex": "http://example.org/",
      "name": "ex:MyPackage/MyClass#name"
    }
  ],
  "@id": "http://example.org/myInstance",
  "@type": "ex:MyPackage/MyClass",
  "name": "John"
}

This configuration is a semantic representation of the instantiation of MyClass with name set to "John".

4. Instantiate from config file

...
import { ComponentsManager } from 'componentsjs';

const manager = await ComponentsManager.build({
  mainModulePath: __dirname, // Path to your npm package's root
});
await manager.configRegistry.register('config.jsonld');
const myInstance = await manager.instantiate('http://example.org/myInstance');
...

myInstance is an instance of type MyClass, as defined in the config file.

Advanced usage

The ComponentsManager can be customized with the following options:

const manager = await ComponentsManager.build({
    // Absolute path to the package root from which module resolution should start.
    mainModulePath: __dirname,
    // Callback for registering components and modules
    // Defaults to an invocation of {@link ComponentRegistry.registerAvailableModules}.
    moduleLoader: (registry) => {},
    // Callback for registering configurations.
    // Defaults to no config registrations.
    configLoader: (registry) => {},
    // A strategy for constructing instances.
    // Defaults to {@link ConstructionStrategyCommonJs}.
    constructionStrategy: new ConstructionStrategyCommonJs(),
    // If the error state should be dumped into `componentsjs-error-state.json` after failed instantiations.
    // Defaults to `true`.
    dumpErrorState: true,
    // The logging level.
    // Defaults to `'warn'`.
    logLevel: 'warn',
    // The module state.
    // Defaults to a newly created instance on the {@link mainModulePath}.
    moduleState: {},
    // If JSON-LD context validation should be skipped.
    // Defaults to `true`.
    skipContextValidation: true,
    // If values for parameters should be type-checked.
    // Defaults to `true`.
    typeChecking: true,
});

Cite

If you are using or extending Components.js as part of a scientific publication, we would appreciate a citation of our article.

@article{taelman_swj_componentsjs_2022,
  author = {Taelman, Ruben and Van Herwegen, Joachim and Vander Sande, Miel and Verborgh, Ruben},
  title = {Components.js: Semantic Dependency Injection},
  journal = {Semantic Web Journal},
  year = {2022},
  month = jan,
  url = {https://linkedsoftwaredependencies.github.io/Article-System-Components/}
}

License

Components.js is written by Ruben Taelman.

This code is copyrighted by Ghent University – imec and released under the MIT license.