README.md

componentsjs-example

This project provides a straightforward example shows how to build a software system based-on Components.js framework. Since I could not successfully build such system by following The official instruction only. Hope this example helps someone who encountered the same problem.

Installing and running

The Node.js is required for running this project. After Node.js installation, the npm should be also installed by default. This project could be downloaded and installed by the following:

git clone https://github.com/hsinpeng/componentsjs-example.git
cd componentsjs-example
npm ci

Then you will see the results of Components.js.

Steps of Components.js usage

1. Install dependencies
2. Mark your package as a Components.js module
3. Create a configuration file to instantiate our class
4. Instantiate from config file

Current stage and insights of author's usage experience

I struggle with Components.js quite a while. The followings descripts how this project works in certain steps.

• Step 0: Project setup

  • Before dependencies installation, you sould setup your own project by "npm init" command. "package.json" is the configuration file for your own project. Just reminding, this is a common sense.

• Step 1: Install dependencies

  • The TypeScript package is required by "npm install typescript" command (local installation) and initiate its configuration by "npm exec -- tsc -init" command for your own project.
  • Modify "tsconfig.json", the TypeScripe configuration file, for your own project:
    • Unmark "rootDir" of tsconfig.json and set it to your source code rooe folder. My project is setted as ""rootDir": "./src".
    • Unmark "outDir" of tsconfig.json and set it to the output folder you expected. My project is setted as "outDir": "./dist".
    • Note: Unmark "declaration" of tsconfig.json and make sure it is setted as true. The "componentsjs-generator" will require ".d.ts" files.
  • In additionally, your class shoud be exported in index.ts by adding 'export * from "./[Your_Class]";'.

• Step 2: Mark your package as a Components.js module

  • According to componentsjs-generator, declare components is by adding '"lsd:module": true' in package.json. However, it seems not eligible? The declaration could be done by adding '"lsd:module": "https://linkedsoftwaredependencies.org/bundles/npm/[your_project_name]"'. My project is setted as '"lsd:module": "https://linkedsoftwaredependencies.org/bundles/npm/@hsinpeng/componentsjs-example"'.
  • There are some additional settings should be done in package.json:
    • Modify "main" as '"main": "./[outDir]/index.js"'. Note that outDir is setted in tsconfig.json.
    • Add "types" as '"types": "./[outDir]/index.d.ts"'.
    • Add "lsd:importPaths" as '"lsd:importPaths": {"https://linkedsoftwaredependencies.org/bundles/npm/[your_project_name]/[version]/[path]/": "[path]/"}'. Note: paths are important folders in your project.
    • Add "lsd:components" as '"lsd:components": "[componentsDir]/components.jsonld"'. Node: componentsDir is the path that contains components files which generated by componentsjs-generator, default is './components'.
    • Add "lsd:contexts" as '"lsd:contexts": {"https://linkedsoftwaredependencies.org/bundles/npm/[your_project_name]/[version]/components/context.jsonld": "[componentsDir]/context.jsonld"}'.
  • In adding generate script, note that the parameter "--typeScopedContexts" is deprecated to the latest componentsjs-generator version.

• Step 3: Create a configuration file to instantiate our class

  • To be continued

• Step 4: Instantiate from config file

  • To be continued