@jag-k/scriptable-jsx 1.0.1 → 1.1.2

package/dist/alert.d.ts

@@ -2,7 +2,7 @@
 export declare function alertCreateElement(element: unknown, props: Record<string, any>, ...children: any[]): Alert | {
     type: "text-field";
     props: Record<string, any>;
-    children?: never;
+    children?: undefined;
 } | {
     type: "action";
     props: Record<string, any>;

package/dist/index.d.ts

@@ -1,10 +1,9 @@
-/// <reference path="../types/index.d.ts" />
 /// <reference types="@types/scriptable-ios" />
 export declare class ScriptableJSX {
     static createElement(element: unknown, props: Record<string, any>, ...children: any[]): Alert | {
         type: "text-field";
         props: Record<string, any>;
-        children?: never;
+        children?: undefined;
     } | {
         type: "action";
         props: Record<string, any>;
@@ -13,26 +12,26 @@ export declare class ScriptableJSX {
         type: "text";
         props: Record<string, any>;
         text: string;
-        children?: never;
+        children?: undefined;
     } | {
         type: "stack";
         props: Record<string, any>;
         children: any[];
-        text?: never;
+        text?: undefined;
     } | {
         type: "spacer";
         props: Record<string, any>;
-        text?: never;
-        children?: never;
+        text?: undefined;
+        children?: undefined;
     } | {
         type: "image";
         props: Record<string, any>;
-        text?: never;
-        children?: never;
+        text?: undefined;
+        children?: undefined;
     } | {
         type: "date";
         props: Record<string, any>;
-        text?: never;
-        children?: never;
+        text?: undefined;
+        children?: undefined;
     } | undefined;
 }

package/dist/index.js

@@ -262,14 +262,15 @@ function processContainerChildren(widget, children) {
                     }
                     case "image": {
                         let init;
-                        if (child.props.image) {
-                            init = child.props.image;
+                        const { data } = child.props || {};
+                        if (typeof data === "string") {
+                            init = Image.fromFile(child.props.fileURL);
                         }
-                        else if (child.props.data) {
-                            init = Image.fromData(child.props.data);
+                        else if (data.size) {
+                            init = data;
                         }
-                        else if (child.props.fileURL) {
-                            init = Image.fromFile(child.props.fileURL);
+                        else {
+                            init = Image.fromData(data);
                         }
                         const image = widget.addImage(init);
                         processImageProps(image, child.props || {});
@@ -383,7 +384,6 @@ function alertCreateElement(element, props, ...children) {
     }
 }
 
-/// <reference path="../types/index.d.ts" />
 const createElements = [widgetCreateElement, alertCreateElement];
 class ScriptableJSX {
     static createElement(element, props, ...children) {

package/dist/widget.d.ts

@@ -3,25 +3,25 @@ export declare function widgetCreateElement(element: unknown, props: Record<stri
     type: "text";
     props: Record<string, any>;
     text: string;
-    children?: never;
+    children?: undefined;
 } | {
     type: "stack";
     props: Record<string, any>;
     children: any[];
-    text?: never;
+    text?: undefined;
 } | {
     type: "spacer";
     props: Record<string, any>;
-    text?: never;
-    children?: never;
+    text?: undefined;
+    children?: undefined;
 } | {
     type: "image";
     props: Record<string, any>;
-    text?: never;
-    children?: never;
+    text?: undefined;
+    children?: undefined;
 } | {
     type: "date";
     props: Record<string, any>;
-    text?: never;
-    children?: never;
+    text?: undefined;
+    children?: undefined;
 } | undefined;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@jag-k/scriptable-jsx",
   "description": "Create a Scriptable bundle from JSX",
   "license": "SEE LICENSE IN LICENSE",
-  "version": "1.0.1",
+  "version": "1.1.2",
   "author": {
     "email": "jag.konon@gmail.com",
     "name": "Jag_k",
@@ -25,7 +25,7 @@
   },
   "scripts": {
     "build": "rollup -c",
-    "watch": "rollup -cw",
+    "watch": "npm run prebuild && rollup -cw",
     "prebuild": "rm -rf dist"
   },
   "files": [
@@ -42,7 +42,7 @@
   ],
   "devDependencies": {
     "@rollup/plugin-typescript": "^8.3.4",
-    "rollup": "^2.67.3",
+    "rollup": "^2.78.0",
     "tslib": "^2.4.0"
   },
   "types": "./dist/index.d.ts",

package/types/index.d.ts

@@ -1,10 +1,117 @@
-/// <reference path="./alert.d.ts" />
-/// <reference path="./widget.d.ts" />
+declare namespace JSX {
+  // Widgets types
+  type JSXColor = Color | string | number;
+  type Align = "left" | "right" | "center";
+  type ContentAlign = "top" | "bottom" | "center";
+  type DateStyle = "time" | "date" | "relative" | "offset" | "timer";
 
-import {JSX as Alert} from "./alert";
-import {JSX as Widget} from "./widget";
+  interface Alienable {
+    align?: Align;
+  }
+
+  interface ContentAlienable {
+    align?: ContentAlign;
+  }
+
+  interface PaddingProps {
+    'p-all'?: number;
+
+    'p-x'?: number;
+    'p-y'?: number;
+
+    'p-top'?: number;
+    'p-bottom'?: number;
+    'p-right'?: number;
+    'p-left'?: number;
+  }
+
+  interface WidgetAndStackBase extends PaddingProps {
+    spacing?: number;
+    backgroundColor?: JSXColor;
+    backgroundImage?: Image;
+    backgroundGradient?: LinearGradient;
+    url?: string;
+  }
+
+  interface StackProps extends WidgetAndStackBase, ContentAlienable {
+    layout?: "vertical" | "horizontal";
+    size?: Size;
+    cornerRadius?: number;
+    borderWidth?: number;
+    borderColor?: JSXColor;
+  }
+
+  interface WidgetProps extends WidgetAndStackBase {
+    refreshAfterDate?: Date;
+  }
+
+  interface SpacerProps {
+    length?: number;
+  }
+
+  interface TextProps extends Alienable {
+    font?: Font;
+    color?: JSXColor;
+    opacity?: number;
+    lineLimit?: number;
+    minimumScaleFactor?: number;
+    shadowColor?: JSXColor;
+    shadowOffset?: Point;
+    shadowRadius?: number;
+    url?: string;
+  }
+
+  type ImageContentMode = "fitting" | "filling";
+
+  interface ImageProps extends Alienable {
+    data: string /* file url */ | Image | Data;
+    size?: Size;
+    cornerRadius?: number;
+    resizable?: boolean;
+    opacity?: number;
+    borderColor?: JSXColor;
+    borderWidth?: number;
+    containerRelativeShape?: boolean;
+    tintColor?: JSXColor;
+    url?: string;
+    contentMode?: ImageContentMode;
+  }
+
+  interface DateProps extends TextProps {
+    date: Date | string | number;
+    style?: DateStyle;
+  }
+
+  // Alert types
+  export interface AlertProps {
+    title?: string;
+    message?: string;
+  }
+
+  export interface ActionProps {
+    type?: "action" | "cancel" | "destructive";
+    text?: string;
+    children?: string | string[];
+  }
+
+  export interface TextFieldProps {
+    placeholder?: string;
+    text?: string;
+    secure?: boolean;
+  }
+
+  interface IntrinsicElements {
+    // Widget Elements
+    widget: WidgetProps;
+    stack: StackProps;
+    image: ImageProps;
+    spacer: SpacerProps;
+    text: TextProps;
+    date: DateProps;
 
-export declare namespace JSX {
-  export interface IntrinsicElements extends Alert.IntrinsicElements, Widget.IntrinsicElements {
+    // Alert Elements
+    alert: AlertProps;
+    action: ActionProps;
+    'text-field': TextFieldProps;
   }
 }

package/types/alert.d.ts

@@ -1,24 +0,0 @@
-export declare namespace JSX {
-  interface AlertProps {
-    title?: string;
-    message?: string;
-  }
-
-  interface ActionProps {
-    type?: "action" | "cancel" | "destructive";
-    text?: string;
-    children?: string | string[];
-  }
-
-  interface TextFieldProps {
-    placeholder?: string;
-    text?: string;
-    secure?: boolean;
-  }
-
-  interface IntrinsicElements {
-    alert: AlertProps;
-    action: ActionProps;
-    'text-field': TextFieldProps;
-  }
-}

package/types/widget.d.ts

@@ -1,95 +0,0 @@
-export declare namespace JSX {
-  type JSXColor = Color | string | number;
-  type Align = "left" | "right" | "center";
-  type ContentAlign = "top" | "bottom" | "center";
-  type DateStyle = "time" | "date" | "relative" | "offset" | "timer";
-
-  interface Alienable {
-    align?: Align;
-  }
-
-  interface ContentAlienable {
-    align?: ContentAlign;
-  }
-
-  interface PaddingProps {
-    'p-all'?: number;
-
-    'p-x'?: number;
-    'p-y'?: number;
-
-    'p-top'?: number;
-    'p-bottom'?: number;
-    'p-right'?: number;
-    'p-left'?: number;
-  }
-
-  interface WidgetAndStackBase extends PaddingProps {
-    spacing?: number;
-    backgroundColor?: JSXColor;
-    backgroundImage?: Image;
-    backgroundGradient?: LinearGradient;
-    url?: string;
-  }
-
-  interface StackProps extends WidgetAndStackBase, ContentAlienable {
-    layout?: "vertical" | "horizontal";
-    size?: Size;
-    cornerRadius?: number;
-    borderWidth?: number;
-    borderColor?: JSXColor;
-  }
-
-  interface WidgetProps extends WidgetAndStackBase {
-    refreshAfterDate?: Date;
-  }
-
-  interface SpacerProps {
-    length?: number;
-  }
-
-  interface TextProps extends Alienable {
-    font?: Font;
-    color?: JSXColor;
-    opacity?: number;
-    lineLimit?: number;
-    minimumScaleFactor?: number;
-    shadowColor?: JSXColor;
-    shadowOffset?: Point;
-    shadowRadius?: number;
-    url?: string;
-  }
-
-  type ImageContentMode = "fitting" | "filling";
-
-  interface ImageCommonProps extends Alienable {
-    size?: Size;
-    cornerRadius?: number;
-    resizable?: boolean;
-    opacity?: number;
-    borderColor?: JSXColor;
-    borderWidth?: number;
-    containerRelativeShape?: boolean;
-    tintColor?: JSXColor;
-    url?: string;
-    contentMode?: ImageContentMode;
-  }
-
-  type ImageProps =
-    & ImageCommonProps
-    & ({ data: Data } | { fileURL: string } | { image: Image });
-
-  interface DateProps extends TextProps {
-    date: Date | string | number;
-    style?: DateStyle;
-  }
-
-  interface IntrinsicElements {
-    widget: WidgetProps;
-    stack: StackProps;
-    image: ImageProps;
-    spacer: SpacerProps;
-    text: TextProps;
-    date: DateProps;
-  }
-}