0.0.263 • Published 2 years ago

@elf-framework/sapa v0.0.263

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

@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.

start, hydrate, renderToHtml

Hot Module Reloader

License : MIT

0.0.263

2 years ago

0.0.262

2 years ago

0.0.249

2 years ago

0.0.247

2 years ago

0.0.246

2 years ago

0.0.244

2 years ago

0.0.242

2 years ago

0.0.252

2 years ago

0.0.250

2 years ago

0.0.159

3 years ago

0.0.158

3 years ago

0.0.153

3 years ago

0.0.150

3 years ago

0.0.157

3 years ago

0.0.156

3 years ago

0.0.155

3 years ago

0.0.154

3 years ago

0.0.205

3 years ago

0.0.204

3 years ago

0.0.202

3 years ago

0.0.209

3 years ago

0.0.208

3 years ago

0.0.206

3 years ago

0.0.164

3 years ago

0.0.163

3 years ago

0.0.162

3 years ago

0.0.161

3 years ago

0.0.201

3 years ago

0.0.200

3 years ago

0.0.167

3 years ago

0.0.166

3 years ago

0.0.165

3 years ago

0.0.160

3 years ago

0.0.216

3 years ago

0.0.215

3 years ago

0.0.214

3 years ago

0.0.213

3 years ago

0.0.218

2 years ago

0.0.217

2 years ago

0.0.174

3 years ago

0.0.212

3 years ago

0.0.179

3 years ago

0.0.211

3 years ago

0.0.178

3 years ago

0.0.210

3 years ago

0.0.177

3 years ago

0.0.176

3 years ago

0.0.171

3 years ago

0.0.170

3 years ago

0.0.227

2 years ago

0.0.226

2 years ago

0.0.225

2 years ago

0.0.224

2 years ago

0.0.229

2 years ago

0.0.228

2 years ago

0.0.107

3 years ago

0.0.184

3 years ago

0.0.223

2 years ago

0.0.222

2 years ago

0.0.189

3 years ago

0.0.221

2 years ago

0.0.220

2 years ago

0.0.180

3 years ago

0.0.117

3 years ago

0.0.119

3 years ago

0.0.239

2 years ago

0.0.118

3 years ago

0.0.197

3 years ago

0.0.195

3 years ago

0.0.194

3 years ago

0.0.231

2 years ago

0.0.193

3 years ago

0.0.192

3 years ago

0.0.191

3 years ago

0.0.190

3 years ago

0.0.125

3 years ago

0.0.129

3 years ago

0.0.241

2 years ago

0.0.120

3 years ago

0.0.124

3 years ago

0.0.123

3 years ago

0.0.139

3 years ago

0.0.138

3 years ago

0.0.130

3 years ago

0.0.149

3 years ago

0.0.141

3 years ago

0.0.145

3 years ago

0.0.144

3 years ago

0.0.143

3 years ago

0.0.85

3 years ago

0.0.41

3 years ago

0.0.80

3 years ago

0.0.82

3 years ago

2.2.0

3 years ago

2.1.47

3 years ago

2.2.2

3 years ago

2.1.45

3 years ago

2.2.4

3 years ago

2.2.7

3 years ago

2.1.43

3 years ago

2.2.6

3 years ago

0.0.37

3 years ago

0.0.74

3 years ago

0.0.30

3 years ago

0.0.75

3 years ago

0.0.32

3 years ago

0.0.71

3 years ago

0.0.72

3 years ago

0.0.26

3 years ago

0.0.29

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.61

3 years ago

2.1.25

3 years ago

0.0.15

3 years ago

0.0.17

3 years ago

0.0.51

3 years ago

0.0.10

3 years ago

0.0.12

3 years ago

2.2.8

3 years ago

0.0.3

3 years ago

2.1.36

3 years ago

2.1.35

3 years ago

2.1.33

3 years ago

0.0.9

3 years ago

0.0.4

3 years ago

2.1.23

3 years ago

2.1.19

3 years ago

2.1.15

3 years ago

2.1.9

3 years ago

2.1.8

3 years ago

2.1.7

3 years ago

2.1.6

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.2

3 years ago

2.1.0

3 years ago

2.0.49

3 years ago

2.0.47

3 years ago

2.0.46

3 years ago

2.0.43

3 years ago

2.0.42

3 years ago

2.0.41

3 years ago

2.0.39

3 years ago

2.0.37

3 years ago

2.0.34

3 years ago

2.0.32

3 years ago

2.0.29

3 years ago

2.0.28

3 years ago

2.0.24

3 years ago

2.0.20

3 years ago

2.0.16

3 years ago

2.0.12

3 years ago

2.0.10

3 years ago

2.0.8

3 years ago

2.0.7

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

1.1.1

3 years ago

1.0.0

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago