git0 0.2.10 → 0.2.11

package/svelte-nodegui/src/dom/react-nodegui/src/components/View/RNView.ts

@@ -0,0 +1,306 @@
+import {
+  QWidget,
+  WindowState,
+  QCursor,
+  CursorShape,
+  NodeWidget,
+  QIcon,
+  FlexLayout,
+  WidgetEventTypes,
+  QWidgetSignals,
+} from "@nodegui/nodegui";
+import { NativeRawPointer } from "@nodegui/nodegui/dist/lib/core/Component";
+import { RNWidget, RNProps } from "../config";
+
+/**
+ * The View component can be used to encapsulate other components and provide structure.
+ * It functions similar to a div in the web world. It is based on
+ * [NodeGui's QWidget](https://docs.nodegui.org/docs/api/QWidget).
+ * ## Example
+ * ```javascript
+ *import React from "react";
+ *import { Renderer, Button, Window, View } from "./index";
+ *const App = () => {
+ *  return (
+ *    <Window>
+ *      <View>
+ *        <Button style={buttonStyle} text={"Hello"} />
+ *        <Button style={buttonStyle} text={"World"} />
+ *      </View>
+ *    </Window>
+ *  );
+ *};
+ *const buttonStyle = `
+ *  color: white;
+ *`;
+ *Renderer.render(<App />);
+ * ```
+ */
+
+export interface ViewProps<Signals extends {}> extends RNProps {
+  /**
+   * Shows or hides the widget and its children. [QWidget: show](https://docs.nodegui.org/docs/api/NodeWidget#widgetshow)
+   */
+  visible?: boolean;
+  /**
+   * Sets the property that holds the widget's style sheet. [QWidget: setStyleSheet](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetstylesheetstylesheet)
+   */
+  styleSheet?: string;
+  /**
+   * Sets the inline stylesheet property. [QWidget: setInlineStyle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetinlinestylestyle)
+   */
+  style?: string;
+  /**
+   * Sets the screen position as well as size of the widget. [QWidget: setGeometry](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetgeometryx-y-width-height)
+   */
+  geometry?: Geometry;
+  /**
+   * Sets the object name (id) of the widget in Qt. Object name can be analogous to id of an element in the web world. Using the objectName of the widget one can reference it in the Qt's stylesheet much like what we do with id in the web world. [QWidget: setObjectName](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetobjectnameobjectname)
+   */
+  id?: string;
+  /**
+   * Sets the property that tells whether mouseTracking is enabled for the widget. [QWidget: setMouseTracking](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmousetrackingismousetracked)
+   */
+  mouseTracking?: boolean;
+  /**
+   * Sets the property that tells whether the widget is enabled. In general an enabled widget handles keyboard and mouse events; a disabled widget does not. [QWidget: setEnabled](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetenabledenabled)
+   */
+  enabled?: boolean;
+  /**
+   * This property holds the level of opacity for the window. [QWidget: setWindowOpacity](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowopacityopacity)
+   */
+  windowOpacity?: number;
+  /**
+   * Sets the window title property. [QWidget: setWindowTitle](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowtitletitle)
+   */
+  windowTitle?: string;
+  /**
+   * Sets the window state. [QWidget: setWindowState](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowstatestate)
+   */
+  windowState?: WindowState;
+  /**
+   * Sets the window mouse cursor. [QWidget: setCursor](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetcursorcursor)
+   */
+  cursor?: CursorShape | QCursor;
+  /**
+   * Sets the window icon. [QWidget: setWindowIcon](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetwindowiconicon)
+   */
+  windowIcon?: QIcon;
+  /**
+   * Sets the minimum size of the widget. [QWidget: setMinimumSize](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetminimumsizewidth-height)
+   */
+  minSize?: Size;
+  /**
+   * Sets the maximum size of the widget. [QWidget: setMaximumSize](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetmaximumsizewidth-height)
+   */
+  maxSize?: Size;
+  /**
+   * Sets both the minimum and maximum sizes of the widget. [QWidget: setFixedSize](https://docs.nodegui.org/docs/api/NodeWidget#widgetsetfixedsizewidth-height)
+   */
+  size?: ViewSize;
+  /**
+   * Sets the screen position of the widget. [QWidget: move](https://docs.nodegui.org/docs/api/NodeWidget#widgetmovex-y)
+   */
+  pos?: Position;
+  /**
+   * Prop to set the event listener map. See [Handlong Events](/docs/guides/handle-events)
+   */
+  on?: Partial<WidgetEventListeners | Signals>;
+  /**
+   * Prop to set the ref. The ref will return the underlying nodegui widget.
+   */
+  ref?: any;
+  /**
+   * Prop to set the Widget Attributes. example:
+   * `<View attributes={{[WidgetAttributes.WA_Disabled]: true}} />`
+   */
+  attributes?: WidgetAttributesMap;
+
+  /**
+   * Prop to set the Widget flags. example:
+   * `<View windowFlags={{[WindowType.SplashScreen]: true}} />`
+   */
+  windowFlags?: WindowFlagsMap;
+}
+
+/**
+ * @ignore
+ */
+export function setViewProps<Signals extends {}>(
+  widget: NodeWidget<any>,
+  newProps: ViewProps<Signals>,
+  oldProps: ViewProps<Signals>
+) {
+  const setter: ViewProps<Signals> = {
+    set visible(shouldShow: boolean) {
+      shouldShow ? widget.show() : widget.hide();
+    },
+    set styleSheet(styleSheet: string) {
+      widget.setStyleSheet(styleSheet);
+    },
+    set style(inlineStyle: string) {
+      if (newProps.styleSheet) {
+        console.warn("Both styleSheet and inlineStyle can't be used together");
+      }
+      widget.setInlineStyle(inlineStyle);
+    },
+    set geometry(geometry: Geometry) {
+      widget.setGeometry(
+        geometry.x,
+        geometry.y,
+        geometry.width,
+        geometry.height
+      );
+    },
+    set id(id: string) {
+      widget.setObjectName(id);
+    },
+    set mouseTracking(isMouseTracked: boolean) {
+      widget.setMouseTracking(isMouseTracked);
+    },
+    set enabled(enable: boolean) {
+      widget.setEnabled(enable);
+    },
+    set windowOpacity(opacity: number) {
+      widget.setWindowOpacity(opacity);
+    },
+    set windowTitle(title: string) {
+      widget.setWindowTitle(title);
+    },
+    set windowState(state: WindowState) {
+      widget.setWindowState(state);
+    },
+    set cursor(cursor: CursorShape | QCursor) {
+      widget.setCursor(cursor);
+    },
+    set windowIcon(icon: QIcon) {
+      widget.setWindowIcon(icon);
+    },
+    set minSize(size: Size) {
+      widget.setMinimumSize(size.width, size.height);
+    },
+    set maxSize(size: Size) {
+      widget.setMaximumSize(size.width, size.height);
+    },
+    set size(size: ViewSize) {
+      if (size.fixed) {
+        widget.setFixedSize(size.width, size.height);
+      } else {
+        const minSize = newProps.minSize || { width: 0, height: 0 };
+        const maxSize = newProps.maxSize || {
+          width: 16777215,
+          height: 16777215,
+        };
+        widget.setMinimumSize(minSize.width, minSize.height);
+        widget.setMaximumSize(maxSize.width, maxSize.height);
+        widget.resize(size.width, size.height);
+      }
+    },
+    set pos(position: Position) {
+      widget.move(position.x, position.y);
+    },
+    set on(listenerMap: Partial<WidgetEventListeners | Signals>) {
+      const listenerMapLatest: any = Object.assign({}, listenerMap);
+      const oldListenerMap = Object.assign({}, oldProps.on);
+      Object.entries(oldListenerMap).forEach(([eventType, oldEvtListener]) => {
+        const newEvtListener = listenerMapLatest[eventType];
+        if (oldEvtListener !== newEvtListener) {
+          widget.removeEventListener(eventType as any, oldEvtListener);
+        } else {
+          delete listenerMapLatest[eventType];
+        }
+      });
+
+      Object.entries(listenerMapLatest).forEach(
+        ([eventType, newEvtListener]) => {
+          widget.addEventListener(eventType as any, newEvtListener);
+        }
+      );
+    },
+    set attributes(attributesMap: WidgetAttributesMap) {
+      Object.entries(attributesMap).forEach(([attribute, value]) => {
+        widget.setAttribute(Number(attribute), value);
+      });
+    },
+    set windowFlags(windowFlagsMap: WindowFlagsMap) {
+      Object.entries(windowFlagsMap).forEach(([flag, value]) => {
+        widget.setWindowFlag(Number(flag), value);
+      });
+    },
+  };
+  Object.assign(setter, newProps);
+}
+
+/**
+ * @ignore
+ */
+export class RNView extends QWidget implements RNWidget {
+  setProps(
+    newProps: ViewProps<QWidgetSignals>,
+    oldProps: ViewProps<QWidgetSignals>
+  ): void {
+    setViewProps(this, newProps, oldProps);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    if (!this.layout) {
+      console.warn("parent has no layout to insert child before another child");
+      return;
+    }
+    (this.layout as FlexLayout).insertChildBefore(child, beforeChild);
+  }
+  static tagName = "view";
+  appendInitialChild(child: NodeWidget<any>): void {
+    this.appendChild(child);
+  }
+  appendChild(child: NodeWidget<any>): void {
+    if (!child) {
+      return;
+    }
+    if (!this.layout) {
+      const flexLayout = new FlexLayout();
+      flexLayout.setFlexNode(this.getFlexNode());
+      this.setLayout(flexLayout);
+      this.layout = flexLayout;
+    }
+    this.layout.addWidget(child);
+  }
+  removeChild(child: NodeWidget<any>) {
+    if (!this.layout) {
+      console.warn("parent has no layout to remove child from");
+      return;
+    }
+    this.layout.removeWidget(child);
+    child.close();
+  }
+}
+
+type Geometry = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type Size = {
+  width: number;
+  height: number;
+};
+type ViewSize = Size & {
+  fixed?: boolean;
+};
+type Position = {
+  x: number;
+  y: number;
+};
+
+type WidgetAttributesMap = {
+  [key: number]: boolean;
+};
+
+type WindowFlagsMap = {
+  [key: number]: boolean;
+};
+
+export type WidgetEventListeners = {
+  [key in WidgetEventTypes]: (event?: NativeRawPointer<"QEvent">) => void;
+};

package/svelte-nodegui/src/dom/react-nodegui/src/components/View/index.ts

@@ -0,0 +1,44 @@
+import { registerComponent, ComponentConfig } from "../config";
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { RNView, ViewProps } from "./RNView";
+import { AppContainer } from "../../reconciler";
+import { QWidgetSignals } from "@nodegui/nodegui";
+class ViewConfig extends ComponentConfig {
+  tagName = RNView.tagName;
+  shouldSetTextContent() {
+    return false;
+  }
+  createInstance(
+    newProps: ViewProps<QWidgetSignals>,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNView {
+    const widget = new RNView();
+    widget.setProps(newProps, {});
+    return widget;
+  }
+  commitMount(
+    instance: RNView,
+    newProps: ViewProps<QWidgetSignals>,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNView,
+    updatePayload: any,
+    oldProps: ViewProps<QWidgetSignals>,
+    newProps: ViewProps<QWidgetSignals>,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const View = registerComponent<ViewProps<QWidgetSignals>>(
+  new ViewConfig()
+);

package/svelte-nodegui/src/dom/react-nodegui/src/components/Window/RNWindow.ts

@@ -0,0 +1,66 @@
+import {
+  QMainWindow,
+  NodeWidget,
+  QMainWindowSignals,
+  QMenuBar,
+} from "@nodegui/nodegui";
+import { setViewProps, ViewProps } from "../View/RNView";
+import { RNWidget } from "../config";
+
+export interface WindowProps extends ViewProps<QMainWindowSignals> {
+  menuBar?: QMenuBar;
+}
+
+const setWindowProps = (
+  window: RNWindow,
+  newProps: WindowProps,
+  oldProps: WindowProps
+) => {
+  const setter: WindowProps = {
+    set menuBar(menubar: QMenuBar) {
+      window.setMenuBar(menubar);
+      console.log("menubar was set");
+    },
+  };
+  Object.assign(setter, newProps);
+  setViewProps(window, newProps, oldProps);
+};
+
+/**
+ * @ignore
+ */
+export class RNWindow extends QMainWindow implements RNWidget {
+  setProps(newProps: WindowProps, oldProps: WindowProps): void {
+    setWindowProps(this, newProps, oldProps);
+  }
+  removeChild(child: NodeWidget<any>) {
+    const removedChild = this.takeCentralWidget();
+    if (removedChild) {
+      removedChild.close();
+    }
+    child.close();
+  }
+  appendInitialChild(child: NodeWidget<any> | QMenuBar): void {
+    if (child instanceof QMenuBar) {
+      if (!this.menuBar()) {
+        this.setMenuBar(child);
+      } else {
+        console.warn("MainWindow can't have more than one menubar.");
+      }
+      return;
+    }
+
+    if (!this.centralWidget) {
+      this.setCentralWidget(child);
+    } else {
+      console.warn("MainWindow can't have more than one child node");
+    }
+  }
+  appendChild(child: NodeWidget<any>): void {
+    this.appendInitialChild(child);
+  }
+  insertBefore(child: NodeWidget<any>, beforeChild: NodeWidget<any>): void {
+    this.appendInitialChild(child);
+  }
+  static tagName = "mainwindow";
+}

package/svelte-nodegui/src/dom/react-nodegui/src/components/Window/index.ts

@@ -0,0 +1,50 @@
+import { registerComponent, ComponentConfig } from "../config";
+import type { Fiber } from "../../utils/decoupleFromReact";
+import { WindowProps, RNWindow } from "./RNWindow";
+import { AppContainer } from "../../reconciler";
+
+class WindowConfig extends ComponentConfig {
+  tagName = RNWindow.tagName;
+  shouldSetTextContent(nextProps: WindowProps): boolean {
+    return false;
+  }
+  createInstance(
+    newProps: WindowProps,
+    rootInstance: AppContainer,
+    context: any,
+    workInProgress: Fiber
+  ): RNWindow {
+    const window = new RNWindow();
+    window.setProps(newProps, {});
+    return window;
+  }
+  finalizeInitialChildren(
+    instance: RNWindow,
+    newProps: WindowProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ): boolean {
+    return true;
+  }
+  commitMount(
+    instance: RNWindow,
+    newProps: WindowProps,
+    internalInstanceHandle: any
+  ): void {
+    if (newProps.visible !== false) {
+      instance.show();
+    }
+    return;
+  }
+  commitUpdate(
+    instance: RNWindow,
+    updatePayload: any,
+    oldProps: WindowProps,
+    newProps: WindowProps,
+    finishedWork: Fiber
+  ): void {
+    instance.setProps(newProps, oldProps);
+  }
+}
+
+export const Window = registerComponent<WindowProps>(new WindowConfig());

package/svelte-nodegui/src/dom/react-nodegui/src/components/config.ts

@@ -0,0 +1,95 @@
+import { NodeWidget, Component } from "@nodegui/nodegui";
+import type { Fiber } from "../utils/decoupleFromReact";
+import { AppContainer } from "../reconciler";
+
+type UpdatePayload = any;
+
+export interface RNProps {}
+
+export abstract class RNComponent {
+  static tagName: string;
+  abstract setProps(newProps: RNProps, oldProps: RNProps): void;
+  abstract appendInitialChild(child: Component): void;
+  abstract appendChild(child: Component): void;
+  abstract insertBefore(child: Component, beforeChild: Component): void;
+  abstract removeChild(child: Component): void;
+}
+export abstract class RNWidget extends NodeWidget<any> implements RNComponent {
+  static tagName: string;
+  abstract setProps(newProps: RNProps, oldProps: RNProps): void;
+  abstract appendInitialChild(child: NodeWidget<any>): void;
+  abstract appendChild(child: NodeWidget<any>): void;
+  abstract insertBefore(
+    child: NodeWidget<any>,
+    beforeChild: NodeWidget<any>
+  ): void;
+  abstract removeChild(child: NodeWidget<any>): void;
+}
+export abstract class ComponentConfig {
+  abstract tagName: string;
+  getContext(parentContext: any, rootInstance: AppContainer) {
+    return {};
+  }
+  abstract shouldSetTextContent(nextProps: RNProps): boolean;
+  abstract createInstance(
+    newProps: RNProps,
+    rootInstance?: AppContainer,
+    context?: any,
+    workInProgress?: Fiber
+  ): RNComponent;
+  finalizeInitialChildren(
+    instance: RNComponent,
+    newProps: RNProps,
+    rootContainerInstance: AppContainer,
+    context: any
+  ) {
+    return false;
+  }
+  commitMount(
+    instance: RNComponent,
+    newProps: RNProps,
+    internalInstanceHandle: any
+  ) {
+    return;
+  }
+  // Update methods:
+  prepareUpdate(
+    instance: RNComponent,
+    oldProps: RNProps,
+    newProps: RNProps,
+    rootContainerInstance: AppContainer,
+    hostContext: any
+  ): UpdatePayload {
+    return true;
+  }
+  abstract commitUpdate(
+    instance: RNComponent,
+    updatePayload: any,
+    oldProps: RNProps,
+    newProps: RNProps,
+    finishedWork: Fiber
+  ): void;
+}
+
+// type ReactNodeGuiTag<P> = string | React.ComponentType<P>;
+type ReactNodeGuiTag<P> = string;
+
+const components = new Map<string, ComponentConfig>();
+
+export const getComponentByTagName = (tagName: string): ComponentConfig => {
+  const config = components.get(tagName);
+  if (!config) {
+    throw `Unknown component ${tagName}`;
+  }
+  return config;
+};
+
+export function registerComponent<Props>(
+  config: ComponentConfig
+): ReactNodeGuiTag<Props> {
+  if (components.has(config.tagName)) {
+    throw `A component with tagName: ${config.tagName} already exists. This base component will be ignored`;
+  }
+  components.set(config.tagName, config);
+  return config.tagName;
+}

package/svelte-nodegui/src/dom/react-nodegui/src/index.ts

@@ -0,0 +1,52 @@
+export { Action } from "./components/Action";
+export { BoxView } from "./components/BoxView";
+export { GridView } from "./components/GridView";
+export { GridRow } from "./components/GridView/GridRow";
+export { GridColumn } from "./components/GridView/GridColumn";
+export { Slider } from "./components/Slider";
+export { Svg } from "./components/Svg";
+export { View } from "./components/View";
+export { Window } from "./components/Window";
+export { Text } from "./components/Text";
+export { Image } from "./components/Image";
+export { AnimatedImage } from "./components/AnimatedImage";
+export { Button } from "./components/Button";
+export { CheckBox } from "./components/CheckBox";
+export { LineEdit } from "./components/LineEdit";
+export { Menu } from "./components/Menu";
+export { MenuBar } from "./components/MenuBar";
+export { PlainTextEdit } from "./components/PlainTextEdit";
+export { ProgressBar } from "./components/ProgressBar";
+export { RadioButton } from "./components/RadioButton";
+export { Dial } from "./components/Dial";
+export { SpinBox } from "./components/SpinBox";
+export { ScrollArea } from "./components/ScrollArea";
+export { ComboBox } from "./components/ComboBox";
+export { SystemTrayIcon } from "./components/SystemTrayIcon";
+export { Tabs } from "./components/Tab";
+export { TabItem } from "./components/TabItem";
+
+export { ImageProps, RNImage } from "./components/Image/RNImage";
+export { AnimatedImageProps, RNAnimatedImage } from "./components/AnimatedImage/RNAnimatedImage";
+export { ViewProps, RNView } from "./components/View/RNView";
+export { CheckBoxProps, RNCheckBox } from "./components/CheckBox/RNCheckBox";
+export { TextProps, RNText } from "./components/Text/RNText";
+export { DialProps, RNDial } from "./components/Dial/RNDial";
+export { LineEditProps, RNLineEdit } from "./components/LineEdit/RNLineEdit";
+export { WindowProps, RNWindow } from "./components/Window/RNWindow";
+export { ProgressBarProps, RNProgressBar } from "./components/ProgressBar/RNProgressBar";
+export { ComboBoxProps, RNComboBox } from "./components/ComboBox/RNComboBox";
+export { ButtonProps, RNButton } from "./components/Button/RNButton";
+export { SpinBoxProps, RNSpinBox } from "./components/SpinBox/RNSpinBox";
+export { RadioButtonProps, RNRadioButton } from "./components/RadioButton/RNRadioButton";
+export { TabProps, RNTab } from "./components/Tab/RNTab";
+export { MenuProps, RNMenu } from "./components/Menu/RNMenu";
+export { MenuBarProps, RNMenuBar } from "./components/MenuBar/RNMenuBar";
+export { PlainTextEditProps, RNPlainTextEdit } from "./components/PlainTextEdit/RNPlainTextEdit";
+export { SliderProps, RNSlider } from "./components/Slider/RNSlider";
+export { SvgProps, RNSvg } from "./components/Svg/RNSvg";
+export { SystemTrayIconProps, RNSystemTrayIcon } from "./components/SystemTrayIcon/RNSystemTrayIcon";
+export { ActionProps, RNAction } from "./components/Action/RNAction";
+export { BoxViewProps, RNBoxView } from "./components/BoxView/RNBoxView";
+export { GridViewProps, RNGridView } from "./components/GridView/RNGridView";
+export { ScrollAreaProps, RNScrollArea } from "./components/ScrollArea/RNScrollArea";