Skip to content

Commit f509a41

Browse files
ClassicOldSongClassicOldSong
authored
Merge pull request #3 from ammarahm-ed/add-typescript-support
2 parents f3a1634 + d399c5e commit f509a41

File tree

4 files changed

+221
-1
lines changed

4 files changed

+221
-1
lines changed

‎index.d.ts

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
import { Style } from "@nativescript/core";
2+
import {
3+
Document,
4+
DOMEvent,
5+
HTMLElementTagNameMap,
6+
Node,
7+
NSComponentsMap,
8+
NSCustomComponentsMap,
9+
} from "dominative";
10+
import { JSX as SolidJSX } from "solid-js";
11+
12+
/**
13+
* This is the app entry point. Provide a top-level component function and
14+
* an element to mount to. It is recommended this element be empty: while render
15+
* will just append children, the returned dispose function will remove all children.
16+
* For example:
17+
```tsx
18+
import { render } from "@nativescript-community/solid-js";
19+
import { document } from "dominative";
20+
render(() => <App />, document.body);
21+
```
22+
* The root node can be any NativeScript node. By default `document.body` is a `Frame` element. However
23+
* you can do something like below to render something different as root element.
24+
```tsx
25+
document.body.appendChild(document.createElement("ContentView"));
26+
render(() => <App />, document.body.firstElementChild);
27+
```
28+
* Read more about the render function here:
29+
* @link https://www.solidjs.com/docs/latest#render
30+
*/
31+
export function render(app: () => JSX.Element, root: Node):void;
32+
33+
export type Filter<
34+
Set,
35+
Needle extends string
36+
> = Set extends `${Needle}${infer _X}` ? never : Set;
37+
38+
export type MapNativeViewEvents<T, C> = {
39+
[K in T as `on:${K}`]: (event: DOMEvent<C>) => void;
40+
};
41+
42+
type NSComponentEventsMap = {
43+
[K in keyof NSComponentsMap]: MapNativeViewEvents<
44+
HTMLElementTagNameMap[K]["eventNames"],
45+
HTMLElementTagNameMap[K]
46+
>;
47+
} & {
48+
[K in keyof NSCustomComponentsMap]: MapNativeViewEvents<
49+
NSCustomComponentsMap[K]["eventNames"],
50+
NSCustomComponentsMap[K]
51+
>;
52+
};
53+
54+
export type IgnoredKeys =
55+
| "cssType"
56+
| "requestLayout"
57+
| "layoutNativeView"
58+
| "goBack"
59+
| "replacePage"
60+
| "firstElementChild"
61+
| "lastElementChild"
62+
| "children"
63+
| "childNodes"
64+
| "append"
65+
| "insertBefore"
66+
| "replaceChild"
67+
| "appendChild"
68+
| "textContent"
69+
| "removeChild"
70+
| "childElementCount"
71+
| "innerHTML"
72+
| "outerHTML"
73+
| "insertBefore"
74+
| "setAttribute"
75+
| "getAttribute"
76+
| "removeAttribute"
77+
| "removeAttributeNS"
78+
| "setAttributeNS"
79+
| "namespaceURI"
80+
| "dispatchEvent"
81+
| "getAttributeNS"
82+
| "localName"
83+
| "nodeName"
84+
| "tagName"
85+
| "attributes"
86+
| "hasChildNodes"
87+
| "firstChild"
88+
| "lastChild"
89+
| "replaceWith"
90+
| "cloneNode"
91+
| "remove"
92+
| "parentNode"
93+
| "height"
94+
| "width"
95+
| "appendData";
96+
97+
export type PickedNSComponentKeys<T> = Omit<
98+
T,
99+
Filter<
100+
keyof T,
101+
| "_"
102+
| "set"
103+
| "get"
104+
| "has"
105+
| "change"
106+
| "each"
107+
| "can"
108+
| "create"
109+
| "send"
110+
| "perform"
111+
| "go"
112+
| "on"
113+
>
114+
>;
115+
type OverrideProperties = {
116+
style: Partial<
117+
| Style
118+
| {
119+
color: string;
120+
width: number | string;
121+
height: number | string;
122+
backgroundColor: string;
123+
borderTopColor: string;
124+
borderRightColor: string;
125+
borderBottomColor: string;
126+
borderLeftColor: string;
127+
boxShadow: string;
128+
textShadow: string;
129+
}
130+
>;
131+
height: string | number;
132+
width: string | number;
133+
class: string;
134+
};
135+
136+
export type DefineNSComponent<T, E> = Partial<
137+
Omit<
138+
T,
139+
IgnoredKeys | keyof OverrideProperties | keyof PickedNSComponentKeys<T>
140+
> &
141+
E
142+
>;
143+
144+
declare global {
145+
var document: Document;
146+
}
147+
148+
declare global {
149+
namespace JSX {
150+
function mapElementTag<K extends keyof NSDefaultComponents>(
151+
tag: K
152+
): NSDefaultComponents[K];
153+
154+
function createElement<
155+
Element extends NSDefaultComponents,
156+
Key extends keyof NSDefaultComponents
157+
>(element: Key | undefined | null, attrs: Element[Key]): Element[Key];
158+
159+
function createElement<
160+
Element extends NSDefaultComponents,
161+
Key extends keyof NSDefaultComponents,
162+
T
163+
>(
164+
element: Key | undefined | null,
165+
attrsEnhancers: T,
166+
attrs: Element[Key] & T
167+
): Element[Key];
168+
169+
type Element = SolidJSX.Element;
170+
interface ArrayElement extends Array<Element> {}
171+
interface FunctionElement {
172+
(): Element;
173+
}
174+
interface ElementClass {
175+
// empty, libs can define requirements downstream
176+
}
177+
interface ElementAttributesProperty {
178+
// empty, libs can define requirements downstream
179+
}
180+
interface ElementChildrenAttribute {
181+
children: {};
182+
}
183+
184+
interface IntrinsicAttributes {
185+
ref?: unknown | ((e: unknown) => void);
186+
}
187+
188+
type Accessor<T> = () => T;
189+
interface Directives {}
190+
interface DirectiveFunctions {
191+
[x: string]: (el: Element, accessor: Accessor<any>) => void;
192+
}
193+
interface ExplicitProperties {}
194+
interface ExplicitAttributes {}
195+
interface CustomEvents {}
196+
interface CustomCaptureEvents {}
197+
198+
type JSXElementAttributes<K> = SolidJSX.CustomAttributes<
199+
NSComponentsMap[K]
200+
> &
201+
Partial<
202+
DefineNSComponent<HTMLElementTagNameMap[K], NSComponentEventsMap[K]> &
203+
OverrideProperties & {
204+
children: Element;
205+
}
206+
>;
207+
208+
type NSDefaultComponents = {
209+
[K in keyof HTMLElementTagNameMap as `${Lowercase<K>}`]: JSXElementAttributes<K>;
210+
};
211+
interface IntrinsicElements extends NSDefaultComponents {}
212+
}
213+
}

‎nativescript.webpack.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const solid = (config, env) => {
5151
generate: 'universal',
5252
},
5353
],
54+
"@babel/typescript"
5455
],
5556
env: {
5657
development: {

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "0.0.4-alpha.2",
44
"description": "SolidJS to work with NativeScript",
55
"main": "src/index.js",
6+
"types": "index.d.ts",
67
"scripts": {},
78
"keywords": [
89
"{N}",
@@ -20,7 +21,8 @@
2021
"homepage": "https://github.com/nativescript-community/solid-js",
2122
"peerDependencies": {
2223
"dominative": "^0.0.7-alpha.2",
23-
"solid-js": "^1.6.6"
24+
"solid-js": "^1.6.6",
25+
"@babel/preset-typescript": "7.18.6"
2426
},
2527
"publishConfig": {
2628
"access": "public"

‎src/renderer.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ export const {
7070
}
7171
});
7272

73+
export function use(fn, args) {
74+
return fn?.(args);
75+
}
76+
7377
// Forward Solid control flow
7478
export {
7579
For,

0 commit comments

Comments
 (0)