Create a custom component as a typescript library and reuse in different projects

[rahul2526]

Hi @slackmoehrle @zzf_Cocos ,
My requirement is to create a custom component say :

import { _decorator, Component } from 'cc';
const { ccclass, property} = _decorator;
@ccclass('GameScene')
export class GameScene extends Component {
    load () {
    }
   
    start () {
        console.log("GameScene: start called");
    }
}

I am able to compile above code as a library following this link:
how-to-write-a-typescript-library

to compile it successfully I have to use following configuration in tsconfig.json :

{
  "compilerOptions": {
    "skipLibCheck": true,
    "module": "commonjs",
    "target": "es2015",
    "declaration": true,
    "outDir": "./dist",
    "noImplicitAny": false,
    "strict": false,
    "paths": {
      "cc": ["./temp/declarations/cc"], 
      "cc/env" : ["./temp/declarations/cc.env"]
    },
    "experimentalDecorators": true
  },
  "types": [
    "./temp/declarations/cc.env",
    "./temp/declarations/jsb",
    "./temp/declarations/cc"
  ],
  "isolatedModules": true,
  "moduleResolution": "node",
  "include": [
    "src/**/*"
  ],
  "exclude": ["node_modules","temp"]
}

Now when using this package in some other project, I am not able to attach this component to a node.
It gives error

[Scene] Unresolved specifier cc

cc module is not getting register for this package.
checked modules.json at location
temp/programming/packer-driver/targets/editor/modules.json
resolvedImports value is null for cc for custom component

So question is how to create a typescript library having cc module as dependency. So that it can be used across projects.

Thanks,
Rahul

[slackmoehrle]

I can ask enginering to have a look.

[StudioAMK]

We have been re-using TS Component, that we made, across projects.
But, we didn’t modify tsconfig.
We just used default one.

And what do you mean by compile as a library?
For us, we just drag and drop the xxx.ts file into another project and it works.

May be you should share your codes/project so that we can help you.

[rahul2526]

Hi @StudioAMK ,
I am attaching two zip files:

1. common_library.zip
   This is typescript library project. It includes GameComponent.ts which is extended from Component class from cc module. It will generate a npm like package “common” module,which can be used in creator project as dependency.

2. library_test.zip
   creator version: 3.3.2
   This is a creator project. It includes a MyGameComponent.ts script which needs to be extended from GameComponent from common_library.
   I have added common package as dependency in package.json.
   Once you open the library_test project in cocos creator. It will show errors for undefined cc module for GameComponent class from common module.

I hope I am clear about requirement.
Reason to create a library instead of dragging script to each project separately, As a team for many upcoming projects we want to include common code as separated library. which can be updated as npm package only.

Thanks,
Rahul

[VisualSJ]

This scenario feels appropriate as an editor extension:

https://docs.cocos.com/creator/manual/zh/editor/extension/contributions-database.html

Extensions can carry scripts
And can be reused across projects

[rahul2526]

Hi @VisualSJ ,
Thanks this was very helpful.
you are right I can achieve a common module for different projects by adding it as database.
Just a query, how can I distribute this extension among other team members.
Is there anyway to publish extension for team only rather than to store.

Thanks,
Rahul

[VisualSJ]

You can upload it to CocosStore:
https://store-my.cocos.com
http://store.cocos.com/app

Or through file sharing:
https://docs.cocos.com/creator/manual/en/editor/extension/install.html