0.1.72 • Published 2 years ago

arkhi v0.1.72

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

Arkhi.js - 基於島嶼架構的前端框架

「Arkhi」一詞源自群島(Archipelagos)語源「Arhki」(意味 Chief)和「pelagos」(意味 Sea)。我們利用島嶼架構的設計,協助開發者們規劃出一個個「互動性的小島」,輕鬆建立輕量、快速的網站。

Demo: (WIP)

安裝 Installation

npx create-arkhi@latest my-app

cd my-app

npm i # pnpm, yarn, bun 

Getting Started

建立島嶼

import { useState } from "react";
import { Island } from "arkhi/client";

const Counter = ({...props}) => {
	const [state, setState] = useState();
	return (
		<button onClick={()=>setState(state+1)} {...props}>
			{state}
		</button>
	);
}
const CounterIsland = Island(Counter);

export default function Page() {
	return (
		<>
			<div>
				靜態: <Counter /> 
			</div>
			<div>
				動態: <CounterIsland />
			</div>
		</>
	);
}

透過島嶼 HOC 包裹住,我們將範例中第二個 Counter 標記為島嶼,在客戶端載入時渲染。而第一個 Counter 因為沒有包裹住,所以在客戶端會保持靜態。

須注意一定要加上 {...props},Island 才能夠標記島嶼。

分享狀態

import { Share, useShare } from "arkhi/client";

export data = new Share<string>("init data");

export function Foo() {
	const share = useShare(data);
	return (
		<button onClick={() => data.data+=1 }>
			Click { share }
		</button>
	);
} 

由於在不同的島嶼之間無法共享狀態,我們使用 Share API 解決這個問題。useShare() 會在資料更新時自動提醒所有訂閱資料的島嶼重新選染,達到跨島嶼共享狀態。

島嶼架構

島嶼架構指的是在客戶端針對需要互動性的地方進行渲染,以降低載入時間與提高運作效率的設計。對比渲染整個頁面,在島嶼架構珠我們只會針對性的對需要互動性的部份進行 hydration,並且讓多數的界面保持靜止。

了解更多:Islands Architecture - patterns.dev

0.1.72

2 years ago

0.1.71

2 years ago

0.1.70

2 years ago

0.1.69

2 years ago

0.1.68

2 years ago

0.1.67

2 years ago

0.1.66

2 years ago

0.1.65

2 years ago

0.1.64

2 years ago

0.1.63

2 years ago

0.1.62

2 years ago

0.1.61

2 years ago

0.1.60

2 years ago

0.1.59

2 years ago

0.1.58

2 years ago

0.1.57

2 years ago

0.1.56

2 years ago

0.1.55

2 years ago

0.1.54

2 years ago

0.1.53

2 years ago

0.1.52

2 years ago

0.1.51

2 years ago

0.1.50

2 years ago

0.1.49

2 years ago

0.1.48

2 years ago

0.1.47

2 years ago

0.1.46

2 years ago

0.1.45

2 years ago

0.1.44

2 years ago

0.1.43

2 years ago

0.1.42

2 years ago

0.1.41

2 years ago

0.1.40

2 years ago

0.1.39

2 years ago

0.1.38

2 years ago

0.1.37

2 years ago

0.1.36

2 years ago

0.1.35

2 years ago

0.1.34

2 years ago

0.1.33

2 years ago

0.1.32

2 years ago

0.1.31

2 years ago

0.1.30

2 years ago

0.1.29

2 years ago

0.1.28

2 years ago

0.1.27

2 years ago

0.1.26

2 years ago

0.1.25

2 years ago

0.1.24

2 years ago

0.1.23

2 years ago

0.1.22

2 years ago

0.1.21

2 years ago

0.1.20

2 years ago

0.1.19

2 years ago

0.1.18

2 years ago

0.1.17

2 years ago

0.1.16

2 years ago

0.1.15

2 years ago

0.1.14

2 years ago

0.1.13

2 years ago

0.1.12

2 years ago

0.1.11

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago