0.1.2 โ€ข Published 3 years ago

@gallop/gallop v0.1.2

Weekly downloads
310
License
MIT
Repository
github
Last release
3 years ago

gallop

Coverage Status Gitter npm version

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

Features

  • 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 <slot> 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

Simple use case

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`<div>pure ${prop}</div>` //pure component with no any lifecycle

component(
  '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`
          div {
            background: ${state.color};
          }
        `,
      [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`
      <div>${state.a}</div>
      <div>${name}</div>
      <div>${data.b}</div>
      <div>${age}</div>
      ${repeat(
        [1, 2, 3], //list need to be rendered
        (item) => item, //key diff callback to generate key
        (
          item //actually render
        ) =>
          html` <button @click="${() => console.log(item)}">${item}</button> `
      )}
      <slot> default slot context </slot>
      <div>${memo}</div>
      <button
        @click="${(e: Event) => {
          state.a += 1
          data.b += 2
          console.log(
            this
          ) /*you can still access this by arrow function in event*/
        }}"
      >
        click
      </button>
      <div>
        ${suspense(
          () =>
            import('./components/MyCount').then(
              () => html`<my-count></my-count>`
            ),
          { pending: html`<div>loading...</div>` }
        )}
      </div>
    `
  }
)

render(html` <test-name :name="haha" :age="${2}"> slot content </test-name> `)
0.1.2

3 years ago

1.0.13

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.12

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.12.1

4 years ago

0.12.2

4 years ago

0.12.3

4 years ago

0.12.0

5 years ago

0.11.0

5 years ago

0.11.1

5 years ago

0.10.5

5 years ago

0.10.4

5 years ago

0.10.2

5 years ago

0.10.3

5 years ago

0.10.1

5 years ago

0.10.0

5 years ago

0.9.65

5 years ago

0.9.64

5 years ago

0.9.63

5 years ago

0.9.62

5 years ago

0.9.59

5 years ago

0.9.60

5 years ago

0.9.61

5 years ago

0.9.58

5 years ago

0.9.57

5 years ago

0.9.56

5 years ago

0.9.55

5 years ago

0.9.52

5 years ago

0.9.53

5 years ago

0.9.54

5 years ago

0.9.50

5 years ago

0.9.51

5 years ago

0.9.48

5 years ago

0.9.49

5 years ago

0.9.47

5 years ago

0.9.46

5 years ago

0.9.45

5 years ago

0.9.44

5 years ago

0.9.43

5 years ago

0.9.41

5 years ago

0.9.40

5 years ago

0.9.39

5 years ago

0.9.38

5 years ago

0.9.37

5 years ago

0.9.35

5 years ago

0.9.36

5 years ago

0.9.34

5 years ago

0.9.33

5 years ago

0.9.31

5 years ago

0.9.32

5 years ago

0.9.30

5 years ago

0.9.29

5 years ago

0.9.28

5 years ago

0.9.27

5 years ago

0.9.26

5 years ago

0.9.25

5 years ago

0.9.24

5 years ago

0.9.23

5 years ago

0.9.22

5 years ago

0.9.21

5 years ago

0.9.20

5 years ago

0.9.18

5 years ago

0.9.19

5 years ago

0.9.17

5 years ago

0.9.15

5 years ago

0.9.16

5 years ago

0.9.14

5 years ago

0.9.13

5 years ago

0.9.12

5 years ago

0.9.11

5 years ago

0.9.10

5 years ago

0.9.9

5 years ago

0.9.9-beta.6

5 years ago

0.9.9-beta.5

5 years ago

0.9.9-beta.4

5 years ago

0.9.9-beta.3

5 years ago

0.9.9-beta.0

5 years ago

0.9.8

5 years ago

0.9.8-alpha.2

5 years ago

0.9.8-alpha.1

5 years ago

0.9.8-alpha.0

5 years ago

0.9.7

5 years ago

0.9.6

5 years ago

0.9.5

5 years ago

0.9.2

5 years ago

0.9.3

5 years ago

0.9.0

5 years ago

0.8.14

5 years ago

0.8.13

5 years ago

0.8.12

5 years ago

0.8.11

5 years ago

0.8.9

5 years ago

0.8.8

5 years ago

0.8.7

5 years ago

0.8.10

5 years ago

0.8.6

5 years ago

0.8.5

5 years ago

0.8.4

5 years ago

0.8.3

5 years ago

0.6.7

5 years ago

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.8.1

5 years ago

0.8.0

5 years ago

0.8.2

5 years ago

0.6.6

5 years ago

0.6.5

5 years ago

0.6.4

5 years ago

0.6.3

5 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0

5 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.5

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.1

5 years ago

0.4.2

5 years ago

0.3.6-alpha.0

5 years ago

0.3.5-alpha.1

5 years ago

0.3.5-alpha.2

5 years ago

0.3.5-alpha.0

5 years ago

0.3.4-alpha.0

5 years ago

0.3.4-alpha.1

5 years ago

0.3.3-alpha.0

5 years ago

0.3.2

5 years ago

0.3.0

5 years ago

0.3.1

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.2.0-alpha.0

5 years ago

0.1.8-alpha.0

5 years ago

0.1.6-alpha.0

5 years ago

0.1.7-alpha.0

5 years ago

0.1.4-alpha.1

5 years ago

0.1.5-alpha.0

5 years ago

0.1.4-alpha.0

5 years ago

0.1.3-alpha.0

5 years ago

0.1.2-alpha.0

5 years ago

0.1.1-alpha.0

5 years ago

0.0.9-beta.2

5 years ago

0.1.0

5 years ago

0.0.9-beta.1

5 years ago

0.0.9-beta.0

5 years ago

0.0.7-beta.0

5 years ago

0.0.8-beta.0

5 years ago

0.0.7-alpha.2

5 years ago

0.0.6-beta.0

5 years ago

0.0.7-alpha.1

5 years ago

0.0.7-alpha.0

5 years ago

0.0.6-y.3

5 years ago

0.0.7-y.0

5 years ago

0.0.6-y.2

5 years ago