Phosphor Application Markup

PAM is an experimental framework for writing Phosphor widgets as XML markup. This lets developers easily create complex components without needing to rely on direct HTML manipulation or a VDOM library.

Why?

Here's a short motivating example:

<BoxPanel>
    <Label BoxLayout.SizeBasis="50"
           BoxLayout.Stretch="0">
        Hello, world!
    </Label>
    <BoxPanel BoxLayout.Stretch="1"
              data-direction="left-to-right">
        <Image href="https://placekitten.com/g/200/300"
               alt="Kitten"/>
        <Image href="http://place-puppy.com/200x200"
               alt="Pupper"/>
    </BoxPanel>
</BoxPanel>

See a live example here

The equivalent JS code is long, and distracting. With PAM, you can focus on the interactions behind the view, and use straight-forward, idomatic XAML for the layout and components.

Getting Started

To write PAM, use the widget names as tags. Each child will get added to widgets with layouts, each upper-case attribute will be treated as an AttachedProperty, and each lower-case attribute will get copied to the widget node.

<TabPanel>
    <Label data-foobar="Test!">
        Here's some content!
    </Label>
    <Label>
        Isn't this fun?
    </Label>
</TabPanel>

To load the XML, instantiate a MarkupLoader and use it:

const loader = new MarkupLoader();
const myWidget = loader.loadXml("<Panel />");

You can register custom properties and widgets using WidgetFactory. There's a global factory pre-instantiated for convenience:

WidgetFactory.global.registerWidget("MyFancyWidget", MyFancyWidget);

WidgetFactory.global.registerProperty("MyProperty", MyAttachedProperty);

Building

Building PAM is easy:

yarn
yarn build
yarn test

To build the kitchen sink example, follow these steps:

cd ./examples
yarn
yarn tsc
yarn webpack

You should now see the compiled output in /docs/example.