vvix
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.6 • Public • Published

    vvix-cli

    请不要在真实开发下使用 vvix,还未稳定 !!!!!!!!!!!!!!!!!!!!!!!!!

    如果你实在喜欢这种写法,请使用Vue3 !!!!!!!!!!!!!!!!!!!!!!!!!

    DO NOT USE IN REAL PRODUCT, IT'S STILL NOT STABLE!!!!!!!!!!!!!!!!!!!!

    If you really like this style, please use Vue3 !!!!!!!!!!!!!!

    轻量级玩具 响应式 JSX/TSX 框架

    vvix 可以让你使用:

    • ts 支持
    • vue 响应式 api 大部分支持
    • 更加 vue 的 react,更加 react 的 vue
    • 和 vue3 类似的 diff 算法

    vvix brings you:

    • ts support
    • most of "vue" reactive apis
    • reactive react, jsx in vue
    • more efficient diff algorithm than react

    使用/Usage:

    挂载 App 根组件到 id 为 root 的 dom 节点上

    render App on the dom whose id is "root"

    demo 地址

    import {createApp} from 'vvix'
    
    const App = () => () =>
      <div>hello world</div>
    
    createApp(<App />).mount("#root")
    

    基础的计数器

    Simple counter demo

    demo 地址

    const Counter = () => {
      const counter = ref(0)
      const click = () => {
        counter.value++
      }
      return () => <div onClick={click}>
        counter: {counter.value}
      </div>
    }
    
    createApp(<Counter />).mount("#app")
    

    组件的嵌套

    parent and child components

    demo 地址

    interface Props {
      title: string;
      content: string;
    }
    
    const enum Status {
      Success,
      Pending,
      Fail,
      Normal
    }
    
    const Item: FC<Props> = ({ title, content }) => () => (
      <div>
        <h1>{title}</h1>
        <p>{content}</p>
      </div>
    );
    
    const MsgItem = () => {
      const [status, data, retry] = useRequest<
        Array<{ id: number; title: string; content: string }>
      >();
      return () => (
        <>
          <button onClick={retry}>retry</button>
          {
            status.value === Status.Pending
            ? "loading..."
            : status.value === Status.Fail
              ? "oops, something wrong !"
              : data.value?.map((item) => (
                <Item
                  key={item.id}
                  title={item.title}
                  content={item.content}
                />
              ))
          }
        </>
      );
    };
    

    组件传送门(让组件挂载在其它 dom 上)

    portal(mount the component on another dom)

    demo 地址

    import { createPortal } from "vvix";
    
    const Portal = createPortal<{
      msg: string;
    }>(({ msg }) => {
      return () => <div>{msg}</div>;
    }, "#portal");
    
    const App = () => {
      return () => (
        <div>
          <Portal msg="portal render success" />
        </div>
      );
    };
    

    demo

    Api

    createApp

    挂载根组件到 dom 上

    mount root component on the dom

    /*
      nodeOps: an plain object which includes some  platform apis, for example:
      {
        getElement(parent, child) {
          return parent.querySelector(child)
        },
        appendChild(parent, child) {
          parent.appendChild(child)
        },
        ...
      }
      if you just want to render it on the dom, just don't care the second parameter
    */
    
    createApp(vnode: VNode, nodeOps?: NodeOps).mount(container: Dom | string)
    

    ref & reactive

    ref(value?)
    reactive(obj)
    
    const count = ref(0);
    count.value++
    console.log(cont.value) // update render
    
    const state = reactive({
      list: [],
      users: {}
    })
    state.list.push({ msg: hello }) // update render
    

    expose

    import {expose, onMounted} from 'vvix'
    
    const Child = () => {
      const count = ref(0)
      expose({
        count: count
      })
      return <div>child</div>
    }
    const Parent = () => {
      const childComponent = ref()
      onMounted
    
    }
    

    作者大学生佛系更新,欢迎提出好的 PR/issue 和 star ^_^

    I won't guarantee when will it be finished, welcome you PR, issue and Star ^_^

    github: https://github.com/JSerFeng/vvix

    Install

    npm i vvix

    DownloadsWeekly Downloads

    51

    Version

    0.2.6

    License

    ISC

    Unpacked Size

    340 kB

    Total Files

    43

    Last publish

    Collaborators

    • jserfeng