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

1. webpack (or other bundler)
2. babel
3. @babel/plugin-transform-react-jsx

Usage

1. 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();

2. 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 the relative value to the widget size. The number you supply means the percent of the full size of width/height of the widget.

We have registered common sizes (check this 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 the Scriptable app.

TODO

• add unit tests
• remove any type