This project helps you to write [Scriptable](https://scriptable.app/) widgets with JSX syntax. And add some useful tools by the way.
npm install scriptable-jsxThis 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
npm i scriptable-jsx
1. webpack (or other bundler)
2. babel
3. @babel/plugin-transform-react-jsx
1. We can create a jsx file like this:
``jsx
import { render } from "scriptable-jsx";
const widget = new ListWidget();
render(
widget
);
widget.presentMedium();
`
2. Set babel:
`json`
{
...,
"plugins": [
[
"@babel/plugin-transform-react-jsx",
{
"runtime": "automatic",
// use scriptable-jsx to parse jsx
"importSource": "scriptable-jsx"
}
]
]
}
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:
`xml`
backgroundColor={new Color("#ff0000")}
>
`jsx
import { FlexibleSize } from "scriptable-jsx";
`
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.
- [ ] add unit tests
- [ ] remove any` type