NodeGui源码学习

├─config
├─extras
│  ├─assets
│  ├─legal
│  │  ├─logo
│  │  ├─yode
│  │  └─yoga
│  └─logo
├─plugin
├─scripts
│  └─tests
├─src
│  ├─cpp
│  │  └─lib
│  ├─examples
│  └─lib
└─website

import { QMainWindow } from './lib/QtWidgets/QMainWindow';
import { QLabel } from './lib/QtWidgets/QLabel';
import { FlexLayout } from './lib/core/FlexLayout';
import { QWidget } from './lib/QtWidgets/QWidget';
import { QBoxLayout } from './lib/QtWidgets/QBoxLayout';
import { Direction } from './lib/QtEnums';
import { QStackedLayout } from './lib/QtWidgets/QStackedLayout';
import { QComboBox } from './lib/QtWidgets/QComboBox';

// Create main window
const win = new QMainWindow();
win.setWindowTitle('QStackedLayout');

// Create central widget and layout
const centralWidget = new QWidget();
centralWidget.setObjectName('myroot');
const rootLayout = new QBoxLayout(Direction.TopToBottom);
centralWidget.setLayout(rootLayout);

// Create stacked layout
const stackedLayout = new QStackedLayout();

// Create pages with labels
const createPage = (text: string) => {
    const page = new QWidget();
    const layout = new FlexLayout();
    page.setLayout(layout);
    const label = new QLabel();
    label.setText(text);
    layout.addWidget(label);
    return page;
};

stackedLayout.addWidget(createPage('This is page 1'));
stackedLayout.addWidget(createPage('This is page 2'));
stackedLayout.addWidget(createPage('This is page 3'));

// Create combo box to switch pages
const combobox = new QComboBox();
combobox.addItems(['Page 1', 'Page 2', 'Page 3']);
combobox.addEventListener('currentIndexChanged', (index) => stackedLayout.setCurrentIndex(index));

// Add combo box and stacked layout to root layout
rootLayout.addWidget(combobox);
rootLayout.addLayout(stackedLayout);

// Create and update label for current index
const currentIndexLabel = new QLabel();
currentIndexLabel.setText(`Current Index: ${stackedLayout.currentIndex()}`);
stackedLayout.addEventListener('currentChanged', (index) => {
    currentIndexLabel.setText(`Current Index: ${index}`);
});
rootLayout.addWidget(currentIndexLabel);

// Set up and show main window
win.setCentralWidget(centralWidget);
win.setMinimumSize(300, 100);
win.show();

(global as any).win = win;

export class QMainWindow extends QWidget<QMainWindowSignals> {
    constructor(arg?: QWidget<QWidgetSignals> | NativeElement) {
        let native: NativeElement;
        if (checkIfNativeElement(arg)) {
            native = arg as NativeElement;
        } else if (arg != null) {
            const parent = arg as QWidget;
            native = new addon.QMainWindow(parent.native);
        } else {
            native = new addon.QMainWindow();
        }
        super(native);
    }
  ...
}

Napi::Object QMainWindowWrap::init(Napi::Env env, Napi::Object exports) {
  Napi::HandleScope scope(env);
  char CLASSNAME[] = "QMainWindow";
  Napi::Function func = DefineClass(
      env, CLASSNAME,
      {InstanceMethod("setCentralWidget", &QMainWindowWrap::setCentralWidget),
       InstanceMethod("centralWidget", &QMainWindowWrap::centralWidget),
       InstanceMethod("takeCentralWidget", &QMainWindowWrap::takeCentralWidget),
       InstanceMethod("setMenuBar", &QMainWindowWrap::setMenuBar),
       InstanceMethod("menuBar", &QMainWindowWrap::menuBar),
       InstanceMethod("setMenuWidget", &QMainWindowWrap::setMenuWidget),
       InstanceMethod("setStatusBar", &QMainWindowWrap::setStatusBar),
       InstanceMethod("statusBar", &QMainWindowWrap::statusBar),
       QWIDGET_WRAPPED_METHODS_EXPORT_DEFINE(QMainWindowWrap)});
  constructor = Napi::Persistent(func);
  exports.Set(CLASSNAME, func);
  QOBJECT_REGISTER_WRAPPER(QMainWindow, QMainWindowWrap);
  return exports;
}

function createInstance(type: string, props: Object, rootContainerInstance: Container): Instance;

function finalizeInitialChildren(parent: Instance, type: string, props: Object, rootContainerInstance: Container): boolean;

export class Renderer {
  static container?: ReactReconciler.FiberRoot;
  update(element: ReactElement, callback: () => void | null | undefined) {
    const root = Renderer.container;
    if (root) {
      return reconciler.updateContainer(element, Renderer.container, null, callback);
    }
    console.error('ReactTinyDOM update, no root');
  }
  static forceUpdate() {
    if (Renderer.container) {
      //@ts-ignore
      Renderer.container._reactInternalInstance = Renderer.container.current;
      deepForceUpdate(Renderer.container);
    }
  }
  static render(element: React.ReactNode, options?: RendererOptions) {
    const isConcurrent = true;
    const hydrate = false;

    const rendererOptions = Object.assign({}, defaultOptions, options);

    Renderer.container = reconciler.createContainer(
      appContainer,
      isConcurrent,
      hydrate
    ); // Creates root fiber node.
    // eslint-disable-next-line @typescript-eslint/ban-types
    (rendererOptions.onInit as Function)(reconciler);

    const parentComponent = null; // Since there is no parent (since this is the root fiber). We set parentComponent to null.
    reconciler.updateContainer(
      element,
      Renderer.container,
      parentComponent,
      () => {
        // eslint-disable-next-line @typescript-eslint/ban-types
        (rendererOptions.onRender as Function)();
      }
    ); // Start reconcilation and render the result
  }
  static clear() {
    reconciler.updateContainer(null, Renderer.container, null, () => {});
  }
}

// App.ts
import React from "react";

export default function App() {
  const size = {height: 600, width: 800};
  const pos = {x: 300, y: 300};
  const [count, setCount] = React.useState(10);

  const buttonHandler = {
    clicked: () => {
      console.log("the button was clicked");
      setCount(count + 1);
    }
  };

  return (
    <Window size={size} pos={pos}>
      <View>
        <Button text="Click me" on={buttonHandler}></Button>
        <Text>count is {count}</Text>
      </View>
    </Window>
  );
};

// main.js
import React from 'React'
import { Renderer } from '@/renderer'
import App from './main/App/App'

console.log('create main page')
// 找到挂载点
const rootElement = document.getElementById('app')
// 渲染
const app = React.createElement(App, rootElement)
// 使用自定义解析
Renderer.render(app)  // 这里其实是使用我们自定义的Renderer的render函数了

import React from "react";
import { Text, Renderer, Window } from ".";
import { Button } from "./components/Button";
import { View } from "./components/View";

const App = () => {
  return (
    <Window styleSheet={styleSheet}>
      <View id="container">
        <View id="textContainer">
          <Text>Hello</Text>
        </View>
        <View>
          <Button text="Click me"></Button>
        </View>
      </View>
    </Window>
  );
};

const styleSheet = `
  #container {
    flex: 1;
    min-height: '100%';
    justify-content: 'center';
  }
  #textContainer {
    flex-direction: 'row';
    justify-content: 'space-around';
    align-items: 'center';
  }
`;

Renderer.render(<App />);

function createRenderer(rendererOptions?: RendererOptions): Renderer;

import { createRenderer } from 'vue';

const rendererOptions = {
  // 提供自定义的 patchProp 方法
  patchProp(el, key, prevValue, nextValue) {
    // 自定义属性更新逻辑
  },
  // 提供其他自定义选项...
};

const renderer = createRenderer(rendererOptions);

// 使用 renderer 挂载 Vue 组件
const app = Vue.createApp({...});
const vm = renderer.createApp(app).mount('#app');

export interface QAbstractButtonSignals extends QWidgetSignals {
    clicked: (checked: boolean) => void;
    pressed: () => void;
    released: () => void;
    toggled: (checked: boolean) => void;
}

// EventWidget.ts
export abstract class EventWidget<Signals extends unknown> extends Component {
    private emitter: EventEmitter;
    private _isEventProcessed = false;

    constructor(native: NativeElement) {
        super(native);
        if (native.initNodeEventEmitter == null) {
            throw new Error('initNodeEventEmitter not implemented on native side');
        }

        const preexistingEmitterFunc = native.getNodeEventEmitter();
        if (preexistingEmitterFunc != null) {
            this.emitter = preexistingEmitterFunc.emitter;
            return;
        }

        this.emitter = new EventEmitter();
        this.emitter.emit = wrapWithActivateUvLoop(this.emitter.emit.bind(this.emitter));
        const logExceptions = (eventName: string, ...args: any[]): boolean => {
            // Preserve the value of `_isQObjectEventProcessed` as we dispatch this event
            // to JS land, and restore it afterwards. This lets us support recursive event
            // dispatches on the same object.
            const previousEventProcessed = this._isEventProcessed;
            this._isEventProcessed = false;

            // Events start with a capital letter, signals are lower case by convention.
            const firstChar = eventName.charAt(0);
            const isQEvent = firstChar.toUpperCase() === firstChar;
            if (isQEvent) {
                try {
                    const event = wrapNative(args[0]);
                    const afterBaseWidget = args[1];
                    const baseWidgetResult = args[2];
                    if (!afterBaseWidget) {
                        this.emitter.emit(eventName, event);
                    } else {
                        this._isEventProcessed = baseWidgetResult;
                        this.emitter.emit(`${eventName}_after`, event);
                    }
                } catch (e) {
                    console.log(
                        `An exception was thrown while dispatching an event of type '${eventName.toString()}':`,
                    );
                    console.log(e);
                }
            } else {
                try {
                    const wrappedArgs = args.map(wrapNative);
                    this.emitter.emit(eventName, ...wrappedArgs);
                } catch (e) {
                    console.log(
                        `An exception was thrown while dispatching a signal of type '${eventName.toString()}':`,
                    );
                    console.log(e);
                }
            }

            const returnCode = this._isEventProcessed;
            this._isEventProcessed = previousEventProcessed;
            return returnCode;
        };
        logExceptions.emitter = this.emitter;
        native.initNodeEventEmitter(logExceptions);
        addDefaultErrorHandler(native, this.emitter);
    }
    ...
}