The basic typescript example in documentation doesn't seem to work

[phochste]

Issue type:

• :bug: Bug

---

Description:

I tried to run the basic typescript example from the documentation page. But it fails to load a remote context. I assume the example given is a mock application? Can a simple 'hello world' example be provided?

config.jsonld:

{
  "@context": [
    "https://linkedsoftwaredependencies.org/bundles/npm/componentsjs/^5.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"
}

MyClass.ts:

export class MyClass {
  public readonly name: string;
  constructor(name: string) {
    this.name = name;  
    console.log(`done ${name}`);
  }
} 

index.ts:

import { ComponentsManager } from 'componentsjs';

run();

async function run() {
    console.log(__dirname);
    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');
}

package.json:

{
  "name" : "my-package" ,
  "version" : "2.3.4" ,
  "lsd:module" : true ,
  "scripts": {
    "build": "npm run build:ts && npm run build:components",
    "build:ts": "tsc",
    "build:components": "componentsjs-generator",
    "prepare": "npm run build"
  },
  "dependencies": {
    "componentsjs": "^5.3.2"
  },
  "devDependencies": {
    "componentsjs-generator": "^3.1.0"
  }
}

---

Environment:

node --version
v16.14.0

Crash log:

% node build/index.js
/Users/patrickhochstenbach/Dev/componentjs/build
2022-12-06T05:32:22.484Z [Components.js] warn: Detected remote context lookup for 'https://linkedsoftwaredependencies.org/bundles/npm/my-package/^2.0.0/components/context.jsonld' in config.jsonld. This may indicate a missing or invalid dependency, incorrect version number, or an invalid context URL.
/Users/patrickhochstenbach/Dev/componentjs/node_modules/componentsjs/lib/rdf/RdfParser.js:85
        return new Error(`Error while parsing file "${path}": ${error.message}`);
               ^

Error: Error while parsing file "config.jsonld": Failed to load remote context https://linkedsoftwaredependencies.org/bundles/npm/my-package/^2.0.0/components/context.jsonld: Internal Server Error
    at Function.addPathToError (/Users/patrickhochstenbach/Dev/componentjs/node_modules/componentsjs/lib/rdf/RdfParser.js:85:16)
    at PassThrough.<anonymous> (/Users/patrickhochstenbach/Dev/componentjs/node_modules/componentsjs/lib/rdf/RdfParser.js:58:38)
    at PassThrough.emit (node:events:532:35)
    at JsonLdParser.<anonymous> (/Users/patrickhochstenbach/Dev/componentjs/node_modules/rdf-parse/lib/RdfParser.js:59:47)
    at JsonLdParser.emit (node:events:532:35)
    at emitErrorNT (/Users/patrickhochstenbach/Dev/componentjs/node_modules/readable-stream/lib/internal/streams/destroy.js:150:8)
    at emitErrorCloseNT (/Users/patrickhochstenbach/Dev/componentjs/node_modules/readable-stream/lib/internal/streams/destroy.js:113:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

[github-actions[bot]]

Thanks for reporting!

[joachimvh]

Having had a quick look at the documentation, the issue seems to be that the documentation doesn't tell you explicitly to run the generator first. Running the build:components npm script from the example might solve your problem.

[phochste]

No components are generated when I run this script:

npm run build:components

> my-package@2.3.4 build:components
> componentsjs-generator

2022-12-06T08:19:06.452Z [Components.js] warn: Skipped generating invalid package at "/Users/hochsten/Dev/Mellon/componentjs": Invalid package: Missing 'types' or 'typings' in /Users/hochsten/Dev/Mellon/componentjs/package.json
2022-12-06T08:19:06.453Z [Components.js] info: Generating components for 0 package

[joachimvh]

That's a typescript thing that is missing from your package.json: https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#including-declarations-in-your-npm-package

[phochste]

Ok I got a step further. Now I get the components directory and the npm run build runs without an error. But when I execute the dist/index.js script. I get a new error:

% node dist/index.js
/Users/hochsten/Dev/Mellon/componentjs/dist
/Users/hochsten/Dev/Mellon/componentjs/node_modules/componentsjs/lib/rdf/RdfParser.js:85
        return new Error(`Error while parsing file "${path}": ${error.message}`);
               ^

Error: Error while parsing file "config.jsonld": Invalid predicate IRI: name
    at Function.addPathToError (/Users/hochsten/Dev/Mellon/componentjs/node_modules/componentsjs/lib/rdf/RdfParser.js:85:16)
    at PassThrough.<anonymous> (/Users/hochsten/Dev/Mellon/componentjs/node_modules/componentsjs/lib/rdf/RdfParser.js:58:38)
    at PassThrough.emit (node:events:402:35)
    at JsonLdParser.<anonymous> (/Users/hochsten/Dev/Mellon/componentjs/node_modules/rdf-parse/lib/RdfParser.js:59:47)
    at JsonLdParser.emit (node:events:402:35)
    at ParsingContext.emitError (/Users/hochsten/Dev/Mellon/componentjs/node_modules/jsonld-streaming-parser/lib/ParsingContext.js:232:21)
    at Util.predicateToTerm (/Users/hochsten/Dev/Mellon/componentjs/node_modules/jsonld-streaming-parser/lib/Util.js:437:37)
    at EntryHandlerPredicate.handle (/Users/hochsten/Dev/Mellon/componentjs/node_modules/jsonld-streaming-parser/lib/entryhandler/EntryHandlerPredicate.js:106:38)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async JsonLdParser.newOnValueJob (/Users/hochsten/Dev/Mellon/componentjs/node_modules/jsonld-streaming-parser/lib/JsonLdParser.js:201:21)

[joachimvh]

This is because another field that is missing in the package.json is my guess.

The generator generates Components.js definitions for all classes that your npm package exposes. Your package exposes everything that is defined in the main entry of your package.json: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#main

So you would have to add that entry pointing to the javascript file that exports your class.

[phochste]

I've added the main in package.json:

package.json

{
  "name": "my-package",
  "version": "2.3.4",
  "lsd:module": true,
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "npm run build:ts && npm run build:components",
    "build:ts": "tsc",
    "build:components": "componentsjs-generator",
    "prepare": "npm run build"
  },
  "dependencies": {
    "componentsjs": "^5.3.2"
  },
  "devDependencies": {
    "@tsconfig/node14": "^1.0.3",
    "componentsjs-generator": "^3.1.0"
  }
}

And updated the index.ts to export the MyClass:

index.ts:

export * from './MyClass';

Now I get the same error as in https://github.com/LinkedSoftwareDependencies/Components.js/issues/102

% npm run build:components

> my-package@2.3.4 build:components
> componentsjs-generator

2022-12-06T10:21:41.438Z [Components.js] info: Generating components for 1 package
Could not find a valid import path for dist/MyClass.jsonld. 'lsd:importPaths' in package.json may be invalid.

[rubensworks]

Thanks for the issue @phochste!

Since you've configured tsc to use dist/ as output directory, the Components.js generator will not be able to find the .d.ts files, since it will look for a lib/ folder by default.

Invoking the generator as follows should resolve the problem: componentsjs-generator -s dist

(I will update the docs with all of the nuances mentioned in this issues)

[phochste]

Thanks, I had to make one extra change to get it working. I overlooked __dirname in

const manager = await ComponentsManager.build({
  mainModulePath: __dirname, // Path to your npm package's root
});

which would be my dist directory in my typescript example.

This worked:

const manager = await ComponentsManager.build({
    mainModulePath: process.cwd(), 
});

[rubensworks]

I recommend using something like Path.join(__dirname, 'dist') instead. The problem withprocess.cwd()is that this returns the path from which you invoked the Node script, which may differ, while__dirname` will remain fixed, no matter from where it's invoked.