Skip to content

Commit c487674

Browse files
longseespacelongseespace
committed
refactor: move common components to, eh folder common 
1 parent 05d9795 commit c487674

14 files changed

+1008
-424
lines changed

‎packages/react-qml/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,12 @@
5050
"@babel/preset-react": "^7.0.0",
5151
"@babel/preset-typescript": "^7.1.0",
5252
"@types/invariant": "^2.2.29",
53-
"@types/jest": "^23.3.12",
53+
"@types/jest": "^24.0.6",
5454
"@types/node": "^10.12.18",
5555
"@types/react-reconciler": "^0.16.0",
5656
"babel-jest": "^23.6.0",
57-
"jest": "^23.6.0",
58-
"ts-jest": "^23.10.5",
57+
"jest": "^24.1.0",
58+
"ts-jest": "^24.0.0",
5959
"typescript": "^3.2.2"
6060
},
6161
"babel": {

‎packages/react-qml/src/renderer/anchor.ts ‎packages/react-qml/src/common/Anchor.ts

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { QmlElement } from './qmlTypes';
2-
31
export type AnchorLineProp =
42
| 'left'
53
| 'top'
@@ -49,9 +47,9 @@ export type AnchorPrimitiveKey =
4947
| 'alignWhenCentered';
5048

5149
type AnchorSubscription = {
52-
source: QmlElement;
50+
source: Qml.QmlElement;
5351
sourceProp: AnchorRefProp;
54-
target?: QmlElement;
52+
target?: Qml.QmlElement;
5553
targetProp?: AnchorRefProp;
5654
onTargetChanged?: () => void;
5755
};
@@ -60,15 +58,15 @@ export interface AnchorRef {
6058
value(): any;
6159
isReady(): boolean;
6260
type(): string;
63-
addSubscription(source: QmlElement, sourceProp: AnchorRefProp): void;
64-
removeSubscription(source: QmlElement, sourceProp: AnchorRefProp): void;
61+
addSubscription(source: Qml.QmlElement, sourceProp: AnchorRefProp): void;
62+
removeSubscription(source: Qml.QmlElement, sourceProp: AnchorRefProp): void;
6563
}
6664

6765
abstract class AbstractAnchorRef implements AnchorRef {
68-
protected qmlElement: QmlElement | null;
66+
protected qmlElement: Qml.QmlElement | null;
6967
protected subscriptions: Array<AnchorSubscription> = [];
7068

71-
constructor(qmlElement: QmlElement | null = null) {
69+
constructor(qmlElement: Qml.QmlElement | null = null) {
7270
this.qmlElement = qmlElement;
7371
}
7472

@@ -85,7 +83,7 @@ abstract class AbstractAnchorRef implements AnchorRef {
8583
});
8684
}
8785

88-
setQmlElement(qmlElement: QmlElement): void {
86+
setQmlElement(qmlElement: Qml.QmlElement): void {
8987
if (this.qmlElement != null) {
9088
throw new Error('Anchor ref cannot be used twice');
9189
}
@@ -97,14 +95,14 @@ abstract class AbstractAnchorRef implements AnchorRef {
9795
return this.qmlElement != null;
9896
}
9997

100-
addSubscription(source: QmlElement, sourceProp: AnchorRefProp): void {
98+
addSubscription(source: Qml.QmlElement, sourceProp: AnchorRefProp): void {
10199
this.subscriptions.push({ source, sourceProp });
102100
if (this.qmlElement) {
103101
source.anchors[sourceProp] = this.value();
104102
}
105103
}
106104

107-
removeSubscription(source: QmlElement, sourceProp: AnchorRefProp): void {
105+
removeSubscription(source: Qml.QmlElement, sourceProp: AnchorRefProp): void {
108106
for (let index = 0; index < this.subscriptions.length; index++) {
109107
const subscription = this.subscriptions[index];
110108
if (
@@ -124,7 +122,7 @@ abstract class AbstractAnchorRef implements AnchorRef {
124122
export class AnchorLineRef extends AbstractAnchorRef {
125123
private line: AnchorLineProp;
126124

127-
constructor(line: AnchorLineProp, qmlElement: QmlElement | null = null) {
125+
constructor(line: AnchorLineProp, qmlElement: Qml.QmlElement | null = null) {
128126
super(qmlElement);
129127
this.line = line;
130128
}
@@ -166,7 +164,7 @@ export class Anchor extends AbstractAnchorRef {
166164
this.bottom = new AnchorLineRef('bottom');
167165
}
168166

169-
setQmlElement(qmlElement: QmlElement): void {
167+
setQmlElement(qmlElement: Qml.QmlElement): void {
170168
super.setQmlElement(qmlElement);
171169

172170
this.left.setQmlElement(qmlElement);
@@ -198,7 +196,7 @@ export class ParentAnchor {
198196
private static parentAnchorSubscriptions: Array<AnchorSubscription> = [];
199197

200198
private static updateAnchors = (
201-
childElement: QmlElement,
199+
childElement: Qml.QmlElement,
202200
childPropName: AnchorRefProp,
203201
parentPropName?: AnchorRefProp
204202
) => {
@@ -218,7 +216,7 @@ export class ParentAnchor {
218216
};
219217

220218
static addSubscription(
221-
childElement: QmlElement,
219+
childElement: Qml.QmlElement,
222220
childPropName: AnchorRefProp,
223221
parentAnchorRef?: string
224222
): void {
@@ -256,7 +254,7 @@ export class ParentAnchor {
256254
}
257255

258256
static removeSubscription(
259-
childElement: QmlElement,
257+
childElement: Qml.QmlElement,
260258
childPropName: AnchorRefProp
261259
): void {
262260
for (

‎packages/react-qml/src/renderer/registry.ts ‎packages/react-qml/src/common/AppRegistry.ts

+24-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
import { QmlComponent } from './qmlTypes';
2-
31
export type RegistryComponentMetadata = { defaultProp: string } & {
42
[key: string]: any;
53
};
64

75
export type RegistryComponent = {
8-
component: QmlComponent;
6+
component: Qml.QmlComponent;
97
metadata: RegistryComponentMetadata;
108
};
119

@@ -22,13 +20,31 @@ export type RawRegistry = {
2220
[name: string]: RawComponent;
2321
};
2422

25-
export class Registry {
23+
interface Registry {
24+
registerComponent(
25+
name: string,
26+
component: Qml.QmlComponent,
27+
metadata: RegistryComponentMetadata
28+
): void;
29+
30+
getComponent(name: string): RegistryComponent | undefined;
31+
32+
registerRawComponent(
33+
name: string,
34+
rawContent: string,
35+
metadata: RegistryComponentMetadata
36+
): void;
37+
38+
getRawComponent(name: string): RawComponent | undefined;
39+
}
40+
41+
class RegistryImpl implements Registry {
2642
private componentRegistry: ComponentRegistry = {};
2743
private rawRegistry: RawRegistry = {};
2844

2945
registerComponent(
3046
name: string,
31-
component: QmlComponent,
47+
component: Qml.QmlComponent,
3248
metadata: RegistryComponentMetadata = { defaultProp: 'data' }
3349
): void {
3450
// allow re-register component for hot-reloading
@@ -47,7 +63,7 @@ export class Registry {
4763
name: string,
4864
rawContent: string,
4965
metadata: RegistryComponentMetadata = { defaultProp: 'data' }
50-
) {
66+
): void {
5167
if (this.rawRegistry[name]) {
5268
throw new Error(`Component is registered: ${name}`);
5369
}
@@ -63,6 +79,6 @@ export class Registry {
6379
}
6480
}
6581

66-
const registry = new Registry();
82+
const AppRegistry = new RegistryImpl();
6783

68-
export default registry;
84+
export default AppRegistry;

‎packages/react-qml/src/common/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './Anchor';
2+
export * from './AppRegistry';

‎packages/react-qml/src/common/qml.d.ts

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
declare namespace Qml {
2+
// QML global objects
3+
// @see https://doc.qt.io/qt-5/qtqml-javascript-qmlglobalobject.html
4+
5+
// Interface to Qt global object
6+
export interface QmlQt {
7+
application: {
8+
readonly state: number; // enum, actually but it's ok for now
9+
readonly layoutDirection: number; // again, enum
10+
readonly font: any;
11+
arguments: string[];
12+
name: string;
13+
displayName: string;
14+
version: string;
15+
organization: string;
16+
domain: string;
17+
readonly supportsMultipleWindows: boolean;
18+
screens: any;
19+
aboutToQuit: QmlSignal;
20+
} & QmlElement;
21+
inputMethod: any;
22+
platform: {
23+
os:
24+
| 'android'
25+
| 'ios'
26+
| 'tvos'
27+
| 'linux'
28+
| 'osx'
29+
| 'qnx'
30+
| 'unix'
31+
| 'windows'
32+
| 'winrt';
33+
pluginName: string;
34+
};
35+
isQtObject(obj: any): boolean;
36+
createComponent(source: string): QmlComponent;
37+
createQmlObject(
38+
qml: string,
39+
parent: QmlElement | null,
40+
filepath?: string
41+
): QmlElement;
42+
callLater(func: Function, ...args: any): void;
43+
}
44+
45+
// Interface to native QmlObject
46+
// ie: object created by Qt.createQmlObject() or component.createObject()
47+
export interface QmlObject {
48+
destroy: (delay?: number) => void;
49+
}
50+
51+
// Interface to Qml Signal
52+
type SignalHandler = () => any;
53+
export interface QmlSignal {
54+
connect: (handler: SignalHandler) => void;
55+
disconnect: (handler: SignalHandler) => void;
56+
}
57+
58+
// Interface to native QmlComponent
59+
// ie: object created by Qt.createComponent()
60+
export interface QmlComponent {
61+
createObject(parent: QmlObject, props?: object): QmlObject;
62+
status: any;
63+
statusChanged: QmlSignal;
64+
errorString(): string;
65+
}
66+
67+
// Basic (key => value) object
68+
export type QmlProps = { [key: string]: any };
69+
70+
// QQuickItem
71+
export type QmlQuickItem = {
72+
parent: QmlElement | null;
73+
left?: any;
74+
top?: any;
75+
right?: any;
76+
bottom?: any;
77+
horizontalCenter?: any;
78+
verticalCenter?: any;
79+
baseline?: any;
80+
};
81+
82+
// QmlElement is basically QmlQuickItem, plus dynamic props
83+
export type QmlElement = QmlObject & QmlProps;
84+
85+
// measure callback as in ReactNative
86+
export type QmlElementMeasureCallback = (
87+
x: number,
88+
y: number,
89+
width: number,
90+
height: number,
91+
pageX: number,
92+
pageY: number
93+
) => void;
94+
95+
// end --
96+
}

‎packages/react-qml/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export * from './common';
12
export * from './renderer';
23
export * from './components';

‎packages/react-qml/src/renderer/QmlElementContainer.ts

+21-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
1-
import {
2-
QmlElementContainer,
3-
QmlElement,
4-
QmlElementMeasureCallback,
5-
} from './qmlTypes';
6-
import { RegistryComponentMetadata } from './registry';
7-
import { inspect } from 'util';
1+
import { RegistryComponentMetadata } from '../common/AppRegistry';
82

93
function isNumber(x: any) {
104
return typeof x === 'number';
115
}
126

137
type Style = { [key: string]: any };
148

15-
function updateElementStyle(element: QmlElement, style: Style) {
9+
function updateElementStyle(element: Qml.QmlElement, style: Style) {
1610
for (let styleName in style) {
1711
const styleValue = style[styleName];
1812

@@ -22,11 +16,28 @@ function updateElementStyle(element: QmlElement, style: Style) {
2216
}
2317
}
2418

19+
export type QmlElementMeasureCallback = (
20+
x: number,
21+
y: number,
22+
width: number,
23+
height: number,
24+
pageX: number,
25+
pageY: number
26+
) => void;
27+
28+
// a QmlElementContainer
29+
export interface QmlElementContainer {
30+
element: Qml.QmlElement;
31+
metadata: RegistryComponentMetadata;
32+
measure?: (callback: QmlElementMeasureCallback) => void;
33+
setNativeProps?: (arg: any) => void;
34+
}
35+
2536
class QmlElementContainerImpl implements QmlElementContainer {
26-
element: QmlElement;
37+
element: Qml.QmlElement;
2738
metadata: RegistryComponentMetadata;
2839

29-
constructor(element: QmlElement, metadata: RegistryComponentMetadata) {
40+
constructor(element: Qml.QmlElement, metadata: RegistryComponentMetadata) {
3041
this.element = element;
3142
this.metadata = metadata;
3243
}

‎packages/react-qml/src/renderer/createQmlComponent.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import registry from './registry';
21
import React from 'react';
3-
import { QmlQt } from './qmlTypes';
2+
import AppRegistry from '../common/AppRegistry';
43

54
type Props = { forwardedRef: React.RefObject<any> };
65

@@ -9,15 +8,15 @@ type State = {
98
};
109

1110
export declare const Component: any;
12-
export declare const Qt: QmlQt;
11+
export declare const Qt: Qml.QmlQt;
1312

1413
const createQmlComponent = (
1514
source: string,
1615
name: string,
1716
metadata = { defaultProp: 'data' }
1817
) => {
1918
const component = Qt.createComponent(source);
20-
registry.registerComponent(name, component, metadata);
19+
AppRegistry.registerComponent(name, component, metadata);
2120

2221
class RQComponent extends React.Component<Props, State> {
2322
state = { status: component.status };

‎packages/react-qml/src/renderer/createRawQmlComponent.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import registry from './registry';
1+
import AppRegistry from '../common/AppRegistry';
22

33
const createRawQmlComponent = (
44
rawContent: string,
55
name: string,
66
metadata = { defaultProp: 'data' }
77
) => {
8-
registry.registerRawComponent(name, rawContent, metadata);
8+
AppRegistry.registerRawComponent(name, rawContent, metadata);
99
return name;
1010
};
1111

0 commit comments

Comments
 (0)