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

mini-frame-builder

v0.0.1

Published

小程序ts风格框架支持库

Downloads

1

Readme

微信小程序 ts 风格开发框架

基于gulp-task全量编译小程序 ts 源码至 js 项目结构

实现原理:通过 ts 装饰器收集信息,在实例化时将对应属性注入到指定位置.

usage

  1. 实现并默认导出一个实现对应接口的 class,如:export default class extents PageIntf {}.
  2. class 增加装饰器 @page or @app or @component
  3. 属性字段. 需要增加 @data@property(组件内) 注解, 增加后对应的 data 字段通过Proxy 关联至 data 或者 globalData 上。
  4. 组件Component 针对不同生命周期事件,及其他options 增加额外的装饰器,引入即可在编译时,将对应事件挂载到对应属性上.
  5. 组件非生命周期方法,默认添加到 methods:{} 中,可省略@method 装饰器

命名规则

注意

  1. 要转换的模块写法格式应遵循 export default class extents [Intf] 形式,或在定义class name 时,避免占用微信变量,如 AppPageComponent 等.
  2. 为了方便起见,library 中引入的为 latest 版本 API 包,当 library 需要更新时,触发检查将 ./node_modules 目录下 npm 包复制到 ./library 目录下.
  3. Page 中的分享事件,因为对接官方接口的关系,默认处于一个定义的打开状态,如果需要禁用,需要增加 @disableShare 注解
  4. 组件原生方法,如:setData(), 通过 ComponentInstanceMethods.ts 预留空方法使用.然后在编译/导出 options 前阶段,针对删除这些参数变量.

example

// 基本用法

@app
export default class extends AppIntf {
  /**
   *
   */
  globalData: { [key: string]: any } = {};
}

// 实现一个 page.js
@page
export default class extends PageIntf {
  @data
  data1:any = null;
  @data
  data2:any = null;
  @data
  data3:any = null;
  // 剩下的就是Page相关的事件,可以从上层抽象类中查询
  onShow(){
    // setData - plan 1
    this.setData({data1:'xxx'});
    // setData - plan 2 (需要@data装饰器)
    this.data1 = xxx;
  }
}

实现方式

  1. 通过 glob 按条件检索项目内的需要编译的 ts 文件
  2. 编译流程: /src/**.ts -> tsc bu

原生小程序使用

  1. install yarn add mini-frame-library --dev
  2. 实现 class
  3. 使用 Mini.instantiation(default class) 或 增加 编译前预处理``(推荐)