npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sreact

v1.0.0

Published

> 使用类似 SwiftUI 的函数式语法书写 JSX

Downloads

6

Readme

React-UI

使用类似 SwiftUI 的函数式语法书写 JSX

概览

import React, {useState} from 'react';
import {View, List, Image} from 'sreact';
import {color, fontSize} from 'sreact/retouch';
import {Empty} from '@components';

function Hello(props: {name:string}) {
	return View(props.name)
}

export default function App() {
  const [visible, setVisible] = useState<boolean>(false);
  const [data, setData] = useState<{src: string, name: string}[]>([]);
  
  useEffect(() => {
    setData([{
      src: "https://xxx.jpg",
      name:"花开"
    }]);
    setVisible(true);
  }, [])
  
  return View( // 总是以根组件开始
  	List(data, (item, index) =>  // 数组组件,传入数据和一个返回子组件的函数
         View(
      			View(item.name),
    				Image(item.src)		
    			)
         .style(
    				color('red');
      			fontSize(12);
    			)
     ).whetherToShow(visible), // 是否渲染
    Empty().whetherToShow(!visible) // 显示空状态
  )
  
}

组件

ReactUI 将 HTML5 中的元素使用 View 基础类封装,所有的组件类都继承自 View 类。View 包含用于书写样式的 style 方法,用于处理 事件的 on[*] 方法,用于设置是否渲染的 whetherToShow 方法等等。所有方法都可以使用链式写法,方法的书写顺序无关语义。

Children 与 Props

==Modal.ts==

import React from 'react';
import {view} from 'sreact';

interface Props{
  title: string;
  Children?: View; //  null | View
}

export function Modal(props: Props) {
  const {title, Children} = props;
  return View(
    View(title),
  	View('X').onClick(() => this.onCancel()),
    Children, // 这里不需要判断是否传值
  ).show(this.visible)
};

// 这是语法糖式的写法
Modal.bindFn<string>('visible'); // 特殊的 prop, 可以写在链式的方法调用里
Modal.bindFn<() => void>('onCancel'); // 构建到原型链上

==App.ts==

import React, {useState} from 'react';
import {view} from 'sreact';
import {Modal} from '@components';

export default function App() {
  
  const [visible, setVisible] = useState<boolean>(false);
  
  return Modal('起司')
    .visible(visible) // 绑定显示状态值
    .onCancel(() => setVisible(false)) 
}

事件与动画

import React from 'react';
import {View} from 'sreact';
import {opacity} from 'sreact/retouch';

export default function App {
  
  const [count, setCount] = setState
  
  return View('hello world')
  	.onClick(({event, view}) => {
    	console.log('查看下', event.target.detail);
    	view.text('by me'); // 命令式重构;虽然破坏了 react 状态的思维,但异常好用;
  	})
  	.onState(count, ({view}) => { // 算是魔法方法,用于处理某些情况用到组件实例
    if (count === 3) {
      view.animate(0, 0.3, 'ease-in').style(opacity(0.3)) // 动画以 0s 延迟,0.3s 动画时长,easeIn 的时间函数,将 组件状态从 opacity: 1 变更到 opacity:0.3 ; 默认保存最后一帧状态,可以通过 animate 的可选参数修改模式和其他属性
    }
  })
  
}

onClick , onHover, onKeyup, onSubmit, onKeydown ...

特殊事件 onState

onState 是组件可以监听某个状态值的变更,从而处理一些额外的事务【这些事务需要使用组件实例】,比如动画。

生命周期

...

共享状态

...