@elf-framework/sapa NPM

@elf-framework/sapa

Fantastic UI library

Install

npm install @elf-framework/sapa 

// or 

yarn add @elf-framework/sapa

ready to use JSX

vite config

esbuild: {
    jsxFactory: "createElementJsx",
    jsxFragment: "FragmentInstance",
    jsxInject: `import { createElementJsx, FragmentInstance } from "@elf-framework/sapa"`,
},

use jsx-runtime

tsconfig.json

"compilerOptions": {
  "jsx": "react-jsx",
  "jsxImportSource": "@elf-framework/sapa",
}

Core Concept

Sapa is a library for easily creating DOM-based UIs. However, since it uses JSX as a grammar, it can be used as data.

The basic template uses JSX, and many functions are structured similarly to React, providing a structure that anyone who has used React can move comfortably.

JSX

It uses JSX as the template engine.

function MyApp() {
  return <div>Sample Text</div>
}

JSX basically exists in a form similar to html. For example, instead of using the class attribute as className , apply it as class .

function MyApp() {
  return <div class="layout">SampleText</div>
}

You can also use the className attribute as is. If you use the className attribute, it is automatically linked to the class attribute.

Component

Sapa consists of two components.

Class component
Function component

Class Component

import {UIElement} from "@elf-framework/sapa";

class MyApp extends UIElement {
  template () {
    return <div>My App</div>
  }
}

Function Component

function MyApp() {
  return <div>My App</div>
}

Hook

You can use a Hook similar to React.

useState
useCallback
useMemo
useReducer
useContext
useRef
useEffect

See here for details.

DOM

It has several features that allow you to directly control the DOM.

ref - Provides a selector to directly access the dom node.
event - Provides a magic method to easily set the dom event.

DOM Event

You can set various DOM events using Magic Methods.

import {CLICK, ALT} from "@elf-framework/sapa";

class MyApp extends UIElement {
  template() {
    return <div>My App</div>
  }

  [CLICK() + ALT] (e) {
    console.log(e);
  }
}

Store

Sapa basically provides 3 types of store.

state : Rendering control through the instance state and setState function used inside the component
useState: Sorted storage used inside the component, rendering control with update function
$store : Message passing through subscribe, a public repository used in component inheritance

The above three types allow us to handle data in various ways.

instance state

class MyApp extends UIElement {
  template () {
    return <div>{this.state.myVariable}</div>
  }

  [CLICK()] () {
    const { myVariable = 0 } = this.state;
    myVariable++;
    this.setState({ myVariable })
  }
}

hook state

function MyApp () {
  const [myVariable, setMyVariable] = useState(0);

  return <div onClick={() => setMyVariable(myVariable+1)}>{myVariable}</div>
}

hierarchy store

import {useStoreValue} from "@elf-framework/sapa";

class MyApp extends UIElement {
  template () {

    // subscribe event for $store
    const [myVariable, setMyVariable] = useStoreValue("myVariable", 0);

    return <div onClick={() => {
      setMyVariable((v) => v + 1);
    }}>{myVariable}</div>
  }
}

Message

Sapa provides a way to send messages from an internal component hierarchy.

import {useComponentRender} from "@elf-framework/sapa";

function MyApp () {

  useComponentRender("refreshComponent");

  return <div onClick={() => {
    this.emit("refreshComponent");
  }}></div>
}

Sapa focuses on how to store data, how to send messages, and how to render DOM through JSX.