gallop gallop
npm install @gallop/gallop


yarn add @gallop/gallop
https://unpkg.com/@gallop/gallop
this framework is purely driven by personal interest
you are extremely welcomed if you can help me to make gallop better
- gallop is non-intrusive so technically you can use it in any framework like Vue or react
- gallop is inspired by many frameworks such as lit-html, Vue, react, cyclejs
- use template literals to auto detect dynamic & static code
- register reactive component in functional way
- react-hooks-like development experience, even much better ๐
- hooks
| | |
| ------------ | --- |
| useState() | โ
|
| useContext() | โ
|
| useEffect() | โ
|
| usRef() | โ
|
| useMemo() | โ
|
| useStyle() | โ
|
- directive function design from lit-html give gallop super good extendiability
- directives
| | |
| ---------- | --- |
| repeat() | โ
|
| dynamic() | โ
|
| suspense() | โ
|
| portal() | โ
|
- support by web components, also named slot
- : to bind props of component
. to bind attributes / value / style / class
@ to bind events, support @click.once.capture.passive like Vue
- auto minimize update
- support web components and pure component
- built-in state management solution by createContext()
- naturally support async component by import()
- support HOC
- support dynamic component for complex component by built-in directive dynamic()
- โกโก enable key diffing in list rendering by built-in directive repeat()
- support lazy load and fallback rendering by built-in directive suspense()
- for more detail, check packages/sandbox or clone this project run yarn run sand
``ts
import {
createContext,
useState,
useEffect,
useContext,
useMemo,
useStyle,
render,
repeat,
suspense,
html,
css,
ReactiveElement
} from '@gallop/gallop'
export const contenxt = createContext({ b: 2 }) //context can be exported to another component
export const PureComponent = (prop: string) => html
//pure component with no any lifecyclecomponent(
'test-name',
function (
this: ReactiveElement, //this parameter: https://www.typescriptlang.org/docs/handbook/functions.html
{ name, age = 1 }: { name: string; age?: number }
) {
let [state] = useState({ a: 1, color: 'red' }) //dont need setX(), useState() return a proxy, and auto trigger rerender, โ you can only use useState() once in a component declaration
console.dir(this) //access dom directly by this
const memo = useMemo(() => state.a * 2, [state.a]) //just like react useMemo()
useStyle(
() =>
css
,
[state.color]
) const [{ b }] = useContext(context) //you need to hook Context to this component by useContext()
useEffect(() => {
console.dir(this) //this context can be pass by arrow function
console.log(cache.val) //return 1
return () => {
console.log(
disconnected callback)
}
}, [state.a]) //trigger effect when depends changed, completely same as react useEffect() return html
loading... }
}
)render(html
)
``