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

uitypes-cli

v1.0.18

Published

ui types fairygui

Downloads

21

Readme

前置: 本工具暂时只支持fariygui的组件类型生成

目的

  1. 解决获取子对象时没有代码提示(提示子对象的具体属性名字)
  2. 解决获取子对象的类型不明确的问题
  3. 解决通过编辑器修改组件并发布后,项目代码不自动提示错误
  4. 把运行时阶段的空指针报错提前到编译阶段,这样能防止更多的逻辑错误

为什么把错误提前到编译阶段

假设有一个按钮点击后在舞台添加一个通用组件。

某一天这个被多个组件引用的通用组件被别人删除了,ui编辑器发布后,他的项目代码在编译阶段并不会报错。

而是等他在运行时点击按钮才会报错(比如:空指针异常)。

但是如果再运行时阶段,他并没有点击按钮呢?这个报错就会被忽略掉!

直到某一天另一个人更新了他的代码然后启动程序,点击了这个按钮,BOOM!!!

使用明确的类型可以完全把这些错误提前到编译阶段,也就是说你的ui编辑器发布后,生成一下types。

你的业务逻辑代码会在编辑器内提前展示出这些错误!

安装

# 全局安装
npm install uitypes-cli -g

# 本地安装,可以用 npx uitypes 调用
npm install uitypes-cli --save

设置

  1. 第一种方式是通过 uitypes compile --input 绝对路径-你的ui项目目录进行编译
  2. 第二种方式是先通过 uitypes settings --input 绝对路径-你的ui项目目录来进行本地设置,然后再 uitypes compile 不需要加其他参数(推荐)

常用指令

# 输出基本信息
uitypes
# 本地设置
uitypes settings -h
# 查看本地设置
uitypes settings

# 编译
uitypes compile -h

# 根据根目录编译
uitypes compile

# 编译 指定的包
uitypes compile uipkg1 uipkg2

在项目中使用(以fairygui为例)

// 通过命令生成的 `uit.types.d.ts`文件(局部代码)
declare namespace uit {
    namespace test {
		namespace components {
			type TestComponent = fairygui.GComponent & __UIComponent<{
				flag: components.TestFlag;
				btn: fairygui.GButton;
			}, 'abv' | 'def' | 'c1', 't0' | 'tr2'>;
			type TestFlag = fairygui.GLabel & __UIComponent<{
				title: fairygui.GTextField;
				hel: fairygui.GTextField;
			}, string, string>;
		}
	}
}

// 创建一个自定义的组件,并通过as来转换成生成的类型
const view = fairygui.UIPackage.createObject('test', 'TestComponent') as uit.test.components.TestComponent;

// 当调用getChild时,参数会自动提示 'btn' | 'flag'; 
const child = view.getChild('btn');    // typeof child === fairygui.GObject,可以通过child.asButton来转换

// 当调用getChild时,参数会自动提示 'btn' | 'flag';传入第二个参数等价于: view.getChild('btn').asButton
const typedChild = view.getChild('btn', true); // typeof typedChild === fairygui.GButton

// 补充说明: getChild的第二个参数其实并没有实际用处,只是用来确定返回类型的
// 原因: 'btn'即是常量又是字符串,传入此参数后返回值为 fairygui.GObject(getChild方法默认返回的类型)
// 这样的话跟我们的预期不相符
// 另一种方式是 view.getChild<'btn'>('btn'),倒是也能返回明确类型的返回值,但是这么些比较麻烦
// 为了实现简洁的调用api,因此加了第二个参数,只要传递了第二个参数,返回值肯定是明确类型的

// 同理,我们可以获取flag的title,并设置其text内容
view.getChild("flag", true).getChild("title", true).text = '有代码提示且返回类型都是确定的!';

// 如果此时你通过编辑器删除了flag这个子对象,发布后重新生成UITypes后
// 编辑器辉自动检测出错误并给出提示,而不是在运行时阶段,通过空指针的异常来提示你

插件

  • 如果你使用的是新版本的编辑器,请自行编写插件调用uitypes-cli命令
  • 如果你使用的老版本的编辑器,请去项目仓库找到plugins目录,复制里面的插件到你的编辑器的插件目录(重启编辑器,工具-发布UITypes,按照步骤来就行了)

未完待续

  1. 新增dts压缩选项设置