Scriptable-jsx NPM

scriptable-jsx

This project helps you to write Scriptable widgets with JSX syntax. And add some useful tools by the way.

you can check demos in demo folder

简体中文

Install

npm i scriptable-jsx

Requirements

webpack (or other bundler)
babel
@babel/plugin-transform-react-jsx

Usage

We can create a jsx file like this:

import { render } from "scriptable-jsx";

const widget = new ListWidget();

render(
  <stack>
    <text>Hello World</text>
  </stack>,
  widget
);

widget.presentMedium();

Set babel:

{
  ...,
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "runtime": "automatic",
        // use scriptable-jsx to parse jsx
        "importSource": "scriptable-jsx"
      }
    ]
  ]
}

Supported Tags

We have supported these native tags now:

stack
image
spacer
text
date

Remember, just like react, all the native tags are lowercase. The custom tags should start with uppercase.

All the props are the same as native basically. For example:

<date date={new Date()} applyTimeStyle></date>
<stack
  size={new Size(100, 50)}
  backgroundColor={new Color("#ff0000")}
>
  <text>Test</text>
</stack>

External Features

FlexibleSize

import { FlexibleSize } from "scriptable-jsx";

<stack size={new FlexibleSize(50, 50)}></stack>;

The native Size means the pt unit. It's accurate but not flexible. Users need to adapt to different models. But, FlexibleSize helps you to write relative value to the widget size. The number you supply means the percent of the full size of width/height of widget.

We have registered common sizes (check in device-data.ts). You can add custom sizes too.

Warning: Size for macOS is not provided currently. Actually, the runtime size should be provided by Scriptable app.