How .ts component running even inside Cocos Creator Editor

Off Topic
#1

Hi all, I started to create my own game eninge + editor inspired by Cocos Creator. I am using electron for it, but I stuck on the step where I need add possibility to add any components to the nodes.

The problem I don’t know how to read and parse .ts component files inside the editor.

My hierarhy of full application is:

  1. Specific project directrory what have basic game template and waiting you dev will add own components, files. It also runs the game on localhost when you open directory by Electron App.

  2. Electron App Backend that parse opened project directory and send data to the Electorn App Front End Window.

  3. Electron App Front End Window receives data from Electron App Backend provides by opened project directory. It shows all files, scene hieracrhy and inspector panel for every node in the scene. Also provides posibility to change any Node properties (transorm, active), hieracrhy of scene. Addeding removing the nodes, files (the same as in Cocos Creator Editor).

So I came to step where when I create any components in .ts file, the editor should parse this file and give posibility to add this component to the node and change properties of the component.

But the problem I don’t know how can I do this?
Component inside .ts file and also in different scope (project directory), while my editor runs in another directory and just listen project directory changes.

Also this components should be created dinamically in the editor, but how can I achieve this if I just have the .ts file in another directory? So I can’t just write

import {MyComponent} from '../../project_directory/scripts';

new MyComponent();

it should be something like this:

new componentsCache['MyComponent']();

Why I need to create instance of Component? because it has @decorators as in Cocos Creator.
with them I can easely add any components and its properties to the some storage or cache I can then use in the Electron App Fron End. So I can then display the names of cached components developer and choose what component to add, and also create fileds for every @property declared.

After new @cclass and @property calls also, I see this in Cocos Creator

I wrote simple test decorator:

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

function extendedProperty(options) {
    console.log(false);
    return property(options);
}

@ccclass('Main')
export class Main extends Component {
    // @property(MyOwn)
    // private myOwn = null;

    @extendedProperty()
    private number: number = 1;

    start() {}

    update(deltaTime: number) {}
}

so then I can see the log when I maximize Cocos Editor:

image
image1305×978 64.9 KB

So I am just wondering how you achieved this?

How does your component (what even isn’t imported anywhere) run? I just create it in folder and I see it runs in the editor even I don’t add it to any Node.

Or my Electorn Application Arhitecture isn’t correct for this stuff? and you have another arhitecture in Cocos Creator Editor?

Thanks.