Skip to main content

Modules

Much like normal npm modules, LINCD modules bundle different functionality into one package.

Specifically a LINCD module can contain multiple Components, Shapes and Ontologies.

Creating a new module

Decide on a name for your module, go to a root directory in your terminal where you want the module to be created and run:

npx lincd-cli create-module [name]

then enter the newly created folder for your module and run yarn dev

Next, go ahead and create your first ontology, shape or component next!

Important files in a module

src/index.ts

This file simply imports all the files you want to bundle. When adding new components, ontologies or shapes to your module you will need to import them here.

The order in which you import files matters. It is recommended to import files in this order:

  1. ontologies
  2. components
  3. shapes

No exports from index

It is not recommended to export anything from index.ts. This way consumers of your module are encouraged to only use individual imports like your-module/lib/components/Foo which helps to reduce bundle sizes.

src/module.ts

This file creates and then exports decorators and helper functions that allow you to link components, shapes and ontologies to this module and to each other. You will need to import these decorators from this file in other files.

For example, a linked component is created using the @linkedComponent decorator, which is imported from ../module like so:

//src/components/testComponent.tsx import from /src/module.ts
import {linkedComponent} from '../module';

@linkedComponent(SomeShape)
export class TestComponent extends React.Component<any, any> {
//...
}

Registering your module on lincd.org

First reopen package.json and check that you've set the following fields. All of which are used to display information on lincd.org:

fieldnotes
nameA human friendly title for your module.
descriptionA plain text description of your module.
author & contributorsPlease use the object form with separate keys for name, email and url.
repositoryBy putting your component on github and filling in this field lincd.org will be able to show participants, avatars and other meta information about your module. Please use the object notation with a separate field for type and url.

When your module is complete, go ahead and run yarn publish. This will build minified bundles of your module and after uploading it to npm your module will be automatically registered in the LINCD registry.

You can also manually (re)register your module in the LINCD registry with

yarn lincd register