Integration for Phelia framework

Phelia, the React-integrated framework for Slack Block Kit, has become popular suddenly in spite of the newcomer. Surprisingly it has amassed many stars than Bolt, the official framework by Slack.

It has unique components to build Block Kit JSON, with an awesome React-style event handler. However, React-style HTML tags cannot use in the content.

On the other hand, jsx-slack has a stable ergonomic templating and HTML rendering that had taken a year to reach. And we're still catching up Slack's update rapidly.

One of the crazy ideas is to provide jsx-slack integration to Phelia through another render function of JSX. Wisely merging of Phelia's awesome event handling (such as <Button onClick={}>) and jsx-slack's ergonomic Block Kit template would make the wonderful experience to create the Slack app and would grow the value of both libs more.

/* @jsx JSXSlack.h */
import React from "react";
import {
  JSXSlack, // JSXSlack.h is a render function for Phelia
  Message, // <Message> is inherited from Phelia
  Actions,
  Button,
} from "@speee-js/jsx-slack/phelia";
import randomImage from "../utils";

export function RandomImage({ useState }: PheliaMessageProps) {
  const [imageUrl, setImageUrl] = useState("imageUrl", randomImage());

  return (
    <Message text="Choose a dog">
      {/* Can use jsx-slack style templating that is familiar to HTML */}
      <img
        src={imageUrl}
        alt="a very adorable doggy dog"
        title="an adorable :dog:"
      />
      <hr />
      <Actions>
        <Button
          style="primary"
          actionId="randomImage"
          onClick={() => {
            // Handle event by Phelia
            setImageUrl(randomImage())
          }}
        >
          <p>
            <b>New doggy</b>
          </p>
        </Button>
      </Actions>
    </Message>
  );
}

yhatt / jsx-slack

Integration for Phelia framework #162