git0 0.2.10 → 0.2.11

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

@@ -0,0 +1,226 @@
+// import Reconciler from "react-reconciler";
+// import { NodeWidget, QSystemTrayIcon, NodeObject } from "@nodegui/nodegui";
+// import {
+//   getComponentByTagName,
+//   RNWidget,
+//   RNProps,
+//   RNComponent
+// } from "../components/config";
+
+// export type AppContainer = Set<NodeWidget<any>>;
+export type AppContainer = any;
+
+/*
+export const appContainer: AppContainer = new Set<NodeWidget<any>>();
+
+const shouldIgnoreChild = (child: NodeObject<any>) =>
+  child instanceof QSystemTrayIcon;
+
+const HostConfig: Reconciler.HostConfig<
+  string,
+  RNProps,
+  AppContainer,
+  RNComponent,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any,
+  any
+> = {
+  now: Date.now,
+  getRootHostContext: function(nextRootInstance) {
+    let context = {
+      name: "rootnode"
+    };
+    return context;
+  },
+  getChildHostContext: function(parentContext, fiberType, rootInstance) {
+    const { getContext } = getComponentByTagName(fiberType);
+    return getContext(parentContext, rootInstance);
+  },
+  shouldSetTextContent: function(type, nextProps) {
+    const { shouldSetTextContent } = getComponentByTagName(type);
+    return shouldSetTextContent(nextProps);
+  },
+  createTextInstance: function(
+    newText,
+    rootContainerInstance,
+    context,
+    workInProgress
+  ) {
+    // throw new Error(`Can't create text without <Text> for text: ${newText}`);
+    console.warn(
+      "createTextInstance called in reconciler when platform doesnt have host level text. "
+    );
+    console.warn(`Use <Text /> component to add the text: ${newText}`);
+  },
+  createInstance: function(
+    type,
+    newProps,
+    rootContainerInstance,
+    context,
+    workInProgress
+  ) {
+    const { createInstance } = getComponentByTagName(type);
+    return createInstance(
+      newProps,
+      rootContainerInstance,
+      context,
+      workInProgress
+    );
+  },
+  appendInitialChild: function (parent: RNWidget, child: NodeWidget<any>) {
+    if (shouldIgnoreChild(child)) {
+      return;
+    }
+    parent.appendInitialChild(child);
+  },
+  finalizeInitialChildren: function(
+    instance,
+    type,
+    newProps,
+    rootContainerInstance,
+    context
+  ) {
+    const { finalizeInitialChildren } = getComponentByTagName(type);
+    return finalizeInitialChildren(
+      instance,
+      newProps,
+      rootContainerInstance,
+      context
+    );
+  },
+  prepareForCommit: function(rootNode) {
+    // noop
+  },
+  resetAfterCommit: function(rootNode) {
+    // noop
+  },
+  commitMount: function(instance, type, newProps, internalInstanceHandle) {
+    const { commitMount } = getComponentByTagName(type);
+    return commitMount(instance, newProps, internalInstanceHandle);
+  },
+  appendChildToContainer: function(container, child: NodeWidget<any>) {
+    container.add(child);
+  },
+  insertInContainerBefore: (container, child, beforeChild) => {
+    container.add(child);
+  },
+  removeChildFromContainer: (container, child) => {
+    container.delete(child);
+    if (child.close) {
+      child.close();
+    }
+  },
+  prepareUpdate: function(
+    instance,
+    type,
+    oldProps,
+    newProps,
+    rootContainerInstance,
+    hostContext
+  ) {
+    const { prepareUpdate } = getComponentByTagName(type);
+    return prepareUpdate(
+      instance,
+      oldProps,
+      newProps,
+      rootContainerInstance,
+      hostContext
+    );
+  },
+  commitUpdate: function(
+    instance,
+    updatePayload,
+    type,
+    oldProps,
+    newProps,
+    finishedWork
+  ) {
+    const { commitUpdate } = getComponentByTagName(type);
+    return commitUpdate(
+      instance,
+      updatePayload,
+      oldProps,
+      newProps,
+      finishedWork
+    );
+  },
+  appendChild: (parent: RNWidget, child: NodeWidget<any>) => {
+    if (shouldIgnoreChild(child)) {
+      return;
+    }
+    parent.appendChild(child);
+  },
+  insertBefore: (
+    parent: RNWidget,
+    child: NodeWidget<any>,
+    beforeChild: NodeWidget<any>
+  ) => {
+    if (shouldIgnoreChild(child)) {
+      return;
+    }
+    parent.insertBefore(child, beforeChild);
+  },
+  removeChild: (parent: RNWidget, child: NodeWidget<any>) => {
+    if (!shouldIgnoreChild(child)) {
+      parent.removeChild(child);
+    }
+    if (child.close) {
+      child.close();
+    }
+  },
+  commitTextUpdate: (textInstance, oldText, newText) => {
+    //noop since we manage all text using Text component
+    console.warn(
+      "commitTextUpdate called when platform doesnt have host level text"
+    );
+  },
+  resetTextContent: instance => {
+    console.warn("resetTextContent in reconciler triggered!");
+    // noop for now till we find when this method is triggered
+  },
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  getPublicInstance: instance => {
+    //for supporting refs
+    return instance;
+  },
+  shouldDeprioritizeSubtree: (type, props) => {
+    // Use to deprioritize entire subtree based on props and types. For example if you dont need reconciler to calculate for hidden elements
+    if ((props as any).visible === false) {
+      return true;
+    }
+    return false;
+  },
+  //@ts-ignore
+  hideInstance: (instance: NodeWidget<any>) => {
+    instance.hide();
+  },
+  unhideInstance: (instance: NodeWidget<any>, Props: RNProps) => {
+    instance.show();
+  },
+  hideTextInstance: (instance: any) => {
+    // noop since we dont have any host text
+    console.warn(
+      "hideTextInstance called when platform doesnt have host level text"
+    );
+  },
+  unhideTextInstance: (instance: NodeWidget<any>, Props: RNProps) => {
+    // noop since we dont have any host text
+    console.warn(
+      "unhideTextInstance called when platform doesnt have host level text"
+    );
+  },
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  isPrimaryRenderer: true
+};
+
+export default Reconciler(HostConfig);
+*/

package/svelte-nodegui/src/dom/react-nodegui/src/utils/decoupleFromReact.ts

@@ -0,0 +1,2 @@
+export type Fiber = any;
+export type FunctionComponentElement<Props> = any;

package/svelte-nodegui/src/dom/react-nodegui/src/utils/helpers.ts

@@ -0,0 +1,14 @@
+export function throwUnsupported(instance: object) {
+  throw new Error(
+    `Unsupported operation performed in ${instance.constructor.name}`
+  );
+}
+
+export function isValidUrl(str: string) {
+  try {
+    new URL(str);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}

package/svelte-nodegui/src/dom/shared/Logger.ts

@@ -0,0 +1,16 @@
+// declare let __DEV__: boolean|undefined;
+
+export function log(message?: any, ...optionalParams: any[]): void {
+    if (!(global as any).__DEV__) return;
+    console.log(message, optionalParams);
+}
+
+export function warn(message?: any, ...optionalParams: any[]): void {
+    if (!(global as any).__DEV__) return;
+    console.warn(message, optionalParams);
+}
+
+export function error(message?: any, ...optionalParams: any[]): void {
+    // if(!(global as any).__DEV__) return;
+    console.error(message, optionalParams);
+}

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

@@ -0,0 +1 @@
+export { log, warn, error } from "./Logger";

package/svelte-nodegui/src/dom/svelte/HeadElement.ts

@@ -0,0 +1,41 @@
+import { NSVElement, NSVNodeTypes } from "../nativescript-vue-next/runtime/nodes";
+import { RNObject } from "./RNObject";
+import StyleElement from "./StyleElement";
+// import { addCss } from "@nativescript/core/application"
+
+export default class HeadElement extends NSVElement<RNObject> {
+    private readonly styleElements: Set<StyleElement> = new Set();
+
+    constructor() {
+        super("head")
+    }
+
+    addStyleElement(styleElement: StyleElement): void {
+        this.styleElements.add(styleElement);
+        this.updateStyles();
+    }
+
+    removeStyleElement(styleElement: StyleElement): void {
+        this.styleElements.delete(styleElement);
+        this.updateStyles();
+    }
+
+    getStyleSheet(): string {
+        let css: string = "";
+        let i: number = 0;
+        for (const styleElement of this.styleElements) {
+            if(i > 0){
+                css += "\n";
+            }
+            css += styleElement.nativeView.textContent;
+            i++;
+        }
+        return css;
+    }
+
+    updateStyles(): void {
+        const ss: string = this.getStyleSheet();
+        // console.log(`[HeadElement] updateStyles got stylesheet: \`${ss}\``);
+        this.ownerDocument.setStyleSheets(ss);
+    }
+}

package/svelte-nodegui/src/dom/svelte/RNObject.ts

@@ -0,0 +1,95 @@
+import {
+    QObject,
+    QObjectSignals,
+    Component,
+  } from "@nodegui/nodegui";
+  import { RNComponent, RNProps } from "../react-nodegui/src/components/config";
+  import { throwUnsupported } from "../react-nodegui/src/utils/helpers";
+  
+  export interface ObjectProps extends RNProps {
+    /**
+     * 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;
+  
+    /**
+     * Prop to set the event listener map. See [Handlong Events](/docs/guides/handle-events)
+     */
+    on?: Partial<QObjectSignals>;
+
+    textContent?: string;
+  }
+  
+  const setObjectProps = (
+    widget: RNObject,
+    newProps: ObjectProps,
+    oldProps: ObjectProps
+  ) => {
+    const setter: ObjectProps = {
+      set id(id: string) {
+        widget.setObjectName(id);
+      },
+      set on(listenerMap: Partial<QObjectSignals>) {
+        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 textContent(t: string) {
+        widget.setProperty("textContent", t);
+      },
+    };
+    Object.assign(setter, newProps);
+  };
+  
+  /**
+   * @see https://docs.nodegui.org/docs/api/generated/classes/qobject/
+   */
+  export class RNObject extends QObject implements RNComponent {
+    get id(): string {
+      return this.objectName();
+    }
+    get textContent(): string{
+      return this.property("textContent").toString();
+    }
+    set textContent(t: string) {
+      this.setProperty("textContent", t);
+    };
+    setProps(newProps: ObjectProps, oldProps: ObjectProps): void {
+      setObjectProps(this, newProps, oldProps);
+    }
+    appendInitialChild(child: Component) {
+      /* Just no-op. Use-cases include e.g. document > head */
+      // throwUnsupported(this);
+    }
+    appendChild(child: Component): void {
+      // console.log(`[RNObject] appendChild(${child})`);
+      /* Just no-op. Use-cases include e.g. document > head */
+      // throwUnsupported(this);
+    }
+    insertBefore(child: Component, beforeChild: Component): void {
+      /* Just no-op. Use-cases include e.g. document > head */
+      // throwUnsupported(this);
+    }
+    removeChild(child: Component): void {
+      /* Just no-op. Use-cases include e.g. document x head */
+      // throwUnsupported(this);
+    }
+    static tagName = "object";
+
+    toString(): string {
+      return `RNObject()`;
+    }
+  }

package/svelte-nodegui/src/dom/svelte/StyleElement.ts

@@ -0,0 +1,92 @@
+// import { ElementNode, logger as log } from '../basicdom'
+import { NSVElement, NSVNodeTypes } from "../nativescript-vue-next/runtime/nodes";
+import { RNObject } from "./RNObject";
+import { log } from "../shared/Logger";
+import HeadElement from "./HeadElement";
+// import { StyleScope } from '@nativescript/core/ui/styling/style-scope'
+// import { Frame } from '@nativescript/core'
+
+class StyleSheet {
+    private readonly _rules: string[] = [];
+
+    constructor(private styleElement: NSVElement){
+    }
+
+    // The css rules generated by svelte have a keyframe every 16 milliseconds and are quite slow to create and run
+    // this is here to support the simple and short ones, but ideally we would promote our own transitions in svelte-native/transitions
+    // which would delegate to the more direct nativescript way of working.
+
+    deleteRule(index: number) {
+        console.log(`[StyleSheet] deleteRule ${index}`);
+
+        // if(this.styleElement.parentNode){
+        //     console.log(`[StyleSheet.deleteRule] found parentNode: ${this.styleElement.parentNode}`);
+        // } else {
+        //     console.log(`[StyleSheet.deleteRule] found no parentNode.`);
+        // }
+
+        /* TODO: implement for NodeGUI */
+        let removed = this._rules.splice(index, 1);
+        this.styleElement.ownerDocument.head?.updateStyles();
+
+        // for (let r in removed) {
+        //     // log.debug(() => `removing transition rule ${r}`);
+        //     // Turns out nativescript doesn't support "removing" css.
+        //     // this is pretty horrible but better than a memory leak. 
+        //     // since this code is called mainly for keyframes, and keyframes don't add new selectors (they just end up in _keyframes)
+        //     // we can almost remove the rules ourselves.
+        //     if (r.startsWith('@keyframes')) {
+        //         const name = r.split(" ")[1];
+        //         let frame: Frame = Frame.topmost();
+        //         if (frame && (frame as any)._styleScope) {
+        //             let scope = (frame as any)._styleScope as StyleScope;
+        //             delete scope._keyframes[name]
+        //             scope._css = scope._css.replace(r, "");
+        //         }
+        //     }
+        // }
+    }
+
+    insertRule(rule: string, index: number = 0) {
+        console.log(`[StyleSheet] insertRule(\`${rule}\`, ${index})`);
+        // log.debug(() => `Adding transition rule ${rule}`);
+        // log(`Adding transition rule ${rule}`);
+
+        // if(this.styleElement.parentNode){
+        //     console.log(`[StyleSheet.insertRule] found parentNode: ${this.styleElement.parentNode}`);
+        // } else {
+        //     console.log(`[StyleSheet.insertRule] found no parentNode.`);
+        // }
+        
+        // let frame = Frame.topmost();
+        // frame.addCss(rule);
+        this._rules.splice(index, 0, rule);
+        this.styleElement.ownerDocument.head?.updateStyles();
+    }
+
+    get cssRules(): any {
+        return this._rules;
+    }
+}
+
+export default class StyleElement extends NSVElement<RNObject> {
+    private readonly _sheet: StyleSheet;
+
+    constructor() {
+        super("style")
+        this._sheet = new StyleSheet(this);
+    }
+
+    get sheet(): StyleSheet {
+        return this._sheet;
+    }
+
+    get textContent(): string {
+        return this.nativeView.textContent;
+    }
+
+    set textContent(t: string) {
+        this.nativeView.textContent = t;
+        this.ownerDocument.head?.updateStyles();
+    }
+}

package/svelte-nodegui/src/dom/svelte/SvelteNodeGUIDocument.ts

@@ -0,0 +1,124 @@
+
+// import { DocumentNode, ElementNode, createElement, TextNode, logger as log } from '../basicdom';
+import { elementIterator, NSVComment, NSVElement, NSVNodeTypes, NSVText } from "../nativescript-vue-next/runtime/nodes";
+import { RNWindow } from "../react-nodegui/src/components/Window/RNWindow";
+import { warn, error, log } from '../shared/Logger';
+import HeadElement from "./HeadElement";
+import { RNObject } from "./RNObject";
+import StyleElement from "./StyleElement";
+import TemplateElement from "./TemplateElement";
+
+export default class SvelteNodeGUIDocument extends NSVElement<RNObject> {
+    public head: HeadElement = this.createElement('head') as HeadElement;
+    public body: NSVElement<RNObject> = this.createElement('body') as NSVElement<RNObject>;
+    private _windows: Set<NSVElement<RNWindow>> = new Set();
+
+    constructor() {
+        super("document");
+
+        this.appendChild(this.head);
+        this.appendChild(this.body);
+
+        // log(`created ${this}`)
+    }
+
+    createEvent(type: string) {
+        let e: any = {};
+        e.initCustomEvent = (type: string, ignored1: boolean, ignored2: boolean, detail: any) => {
+            e.type = type;
+            e.detail = detail;
+            e.eventName = type;
+        }
+        return e;
+    }
+
+    createComment(data: string): NSVComment {
+        console.log(`Creating comment with data: "${data}"`);
+        return new NSVComment(data)
+    }
+
+    // createPropertyNode(tagName: string, propertyName: string): PropertyNode {
+    //     console.log(`[SvelteNodeGUIDocument] createPropertyNode("${tagName}", "${propertyName}")`);
+    //     return new PropertyNode(tagName, propertyName)
+    // }
+
+    createElement(tagName: string): NSVElement {
+        // if (tagName.indexOf(".") >= 0) {
+        //     let bits = tagName.split(".", 2);
+        //     return this.createPropertyNode(bits[0], bits[1]);
+        // }
+        // return nodeOps.createElement(tagName) as NSVElement;
+
+        let ele: NSVElement;
+        switch (tagName) {
+            case "template":
+                ele = new TemplateElement();
+                break;
+            case "style":
+                ele = new StyleElement();
+                break;
+            case "head":
+                ele = new HeadElement();
+                break;
+            case "document":
+                ele = new SvelteNodeGUIDocument();
+                break;
+            case "window":
+                ele = new NSVElement(tagName);
+                this._windows.add(ele as NSVElement<RNWindow>);
+                // console.log(`[SvelteNodeGUIDocument] added window ${(ele)}. Will set stylesheet on it: \`${this.head.getStyleSheet()}\``);
+                (ele.nativeView as RNWindow).setStyleSheet(this.head.getStyleSheet());
+                break;
+            case "fragment":
+            default: {
+                ele = new NSVElement(tagName);
+            }
+        }
+        if(tagName !== "document"){
+            ele.ownerDocument = this;
+        }
+        return ele;
+    }
+
+    createElementNS(namespace: string, tagName: string): NSVElement {
+        return this.createElement(tagName)
+    }
+
+    createTextNode(data: string): NSVText {
+        // console.log(`[SvelteNodeGUIDocument] createTextNode("${data}")`);
+        return new NSVText(data);
+    }
+
+    getElementById(id: string): NSVElement|null {
+        for(let el of elementIterator(this)){
+            // console.log(`getElementById iterating over element <${(el as NSVElement).tagName ?? "node"}> ${(el as NSVElement).id}`);
+            if(el.nodeType === NSVNodeTypes.ELEMENT && (el as NSVElement).id === id){
+                return el as NSVElement;
+            }
+        }
+        return null;
+    }
+
+    dispatchEvent(event: any) {
+        //Svelte dev fires these for tool support
+    }
+
+    addWindow(win: NSVElement<RNWindow>): void {
+        this._windows.add(win);
+    }
+    /**
+     * I'm not clear where would be a good place to call this.
+     */
+    deleteWindow(win: NSVElement<RNWindow>): void {
+        this._windows.delete(win);
+    }
+
+    setStyleSheets(styleSheet: string): void {
+        // console.log(`[SvelteNodeGUIDocument] setStyleSheets(\`${styleSheet}\`)`);
+
+        this._windows.forEach(win => {
+            // console.log(`[SvelteNodeGUIDocument] setStyleSheets on window ${win}`);
+            win.nativeView.setStyleSheet(styleSheet);
+        });
+    }
+}

package/svelte-nodegui/src/dom/svelte/TemplateElement.ts

@@ -0,0 +1,16 @@
+import { NSVElement, NSVNodeTypes } from '../nativescript-vue-next/runtime/nodes';
+import { RNObject } from './RNObject';
+
+export default class TemplateElement extends NSVElement<RNObject> {
+    constructor() {
+        super("template");
+    }
+
+    set component(value: typeof SvelteComponent) {
+        this.setAttribute('component', value)
+    }
+
+    get component(): typeof SvelteComponent {
+        return this.getAttribute('component') as typeof SvelteComponent
+    }
+}