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

easescript

v0.8.1

Published

EaseScript Is Compiler For Web Development

Downloads

215

Readme

EaseScript

EaseScript 是一个编译语言也是一个脚本编译器。以 JavaScript(ES8) 的语法为标准,通过指定插件编译成不同运行环境的语言。它具备有静态类型推导、代码检查、编译宏块、注解符、表结构、枚举、ESX等。并将常见的WEB技术栈集成在一起,开箱即用。

快速开始

1、安装VSCode扩展插件

打开VSCode编辑器并在扩展面板输入 "EaseScript" 选择并安装此扩展来支持语法高亮和类型提示。 目前仅支持 VSCode

2、进入控制台并输入以下命令

npm install es-installer -g

安装成功后在控制台输入 esi --init 按提示操作即可

3、语法关键字(没有列举出来的表示与ES6一致)

package:声明命名空间,定义在文档的开头

语法:package [标识符]; 如果不指定标识符则为全局。

行内声明:

package com;
class Person{
}

块级声明:

package com{
   class Person{
   }
}

以上两种方式都是声明了在 com 空间中定义的 Person 类

public 修饰符,定义类或者成员属性为公开。默认类或者成员属性为public

语法:protected 标识符[:type] [=初始值]

public name:string;

protected 修饰符,定义成员属性为保护,对外不可访问,子类可访问

语法:protected 标识符[:type] [=初始值]

protected name:string;

private 修饰符,定义成员属性为私有,对外不可访问, 本类中可访问

语法:private 标识符[:type] [=初始值]

private name:string;

import 导入类, 或者导入资源文件(.js, .css)

语法:

import 标识符

import com.Person //导入 Person 类
import “index.css” //导入index.css 文件
import * as V from “vue” //导入vue 到 V 的变量中
import {ref} from “vue” //导入vue 中的ref

class 定义类

语法:[public] class [标识符] [extends 标识符] [implements 标识符, ... ]

class Person extends Human implements IWorker,IHappy{
  name:string
  protected address:string
  private phone:number
  constructor(name:string){
      this.name=name;
      this.phone = 123456789;
      this.address = "sh";
  }
}

typeof: 获取表达式的类型,可以与type 配合使用

语法:typeof 表达式

typeof this.name === ‘string’
type T1 = typeof this.name; //将表达式类型定义给T1

type: 类型声明,方便在代码块中引用类型,或者是将复杂类型简单化,又称为缩短类型。类型声明后只当类型引用不会被构建在代码中。 type 关键字的定义只能出现在块级域中

语法:type 标识符 = 引用类型;

type T1 = string;
type T1 = typeof this.name; //从一个表达式中引用类型
const name:T1 = zs;

3、注解符

注解符是在编译阶段根据不同的指令调整、修改、注入不同的代码块,以达到快速开发的目的。

注解符分为:表达式注解符、声明式注解符和编译宏注解符

声明式注解符: Provider,Callable,Runtime,Syntax,Env,Router,Post,Get,Delete,Put,Option,Deprecated,Define,Internal,Alias,Override,Dynamic,Embed,SkinClass,Abstract,WebComponent,HostComponent,Require,Required,Import,Main,Reference, DOMAttribute,Injector,Reactive,Hook

Runtime,Syntax,Env: 编译时注解符

主要是在编译时如何构建代码。暂未实现

Router,Post,Get,Delete,Put,Option:路由注解符 主要配置在服务端类成员的方法上,Router, 是其它路由注解符的实现, Post,Get,Delete,Put,Option 对应的是路由接收的请求方法。 如果要使用 Router 来定义路由:@Router('/path', method=post), method默认为get;

语法:@Post([path])。 Get,Delete,Put,Option 语法相同

package com.api;
class Person{
  @Post('/list')
  list(id?){
	return [1,2]
  }

在构建后的代码中会自动生成路由文件, 路由规则为:/list/<id?>, 对应的文件为 com.api.Person::list。

Embed:嵌入图片注解符 主要用在成员属性上注入图片的引用, 一般用于前端

语法:@Embed([path])

package com.views;
import web.components.Component
class HomePage extends Component{
  @Embed('./logo.png')
  private logo:string;
  @Override
  render(){
	 return <img src={logo} />
  }

Define,WebComponent,SkinClass:文档类型注解符 定义文档的类型,这个主要在编译阶段配合插件选项来构建代码

语法:@Define(符号类型, 值, 参数)

package com.views;
import web.components.Component
@Define(slot, title,  scope:{name:string}) //给当前组件定义插槽属性, 在编译阶段能正确引用
class HomePage extends Component{
}
/*
<HomePage>
<slot:title>
	<div>title content</div>
</slot:title>
</HomePage>*/

Provider,DOMAttribute,Injector,Reactive,Hook,Alias, Required, HostComponent:成员属性注解符 Provider,DOMAttribute,Injector,Reactive,Hook,Alias, Required 用于前端组件。DOMAttribute, Hook, Alias, Required 不常用,主要是在编写类型描述时对成员属性的一个补充。

语法:@Define(符号类型, 值, 参数)

package com.views;
import web.components.Component
class HomePage extends Component{

  @Injector //从父组件中注入app对象的引用
  private app:App;

  @Reactive //一个有着响应式的属性引用
  private list=[]

  @Provider //提供一组数据,在子组件中引用. 提供者的修饰符必须为public
  public data(){
    return {name:'HomePage'};
  }
}

Require(已弃用, 使用import代替), Import(已弃用, 使用import代替), Reference(引用类型文档):资源引用注解符 语法:@Reference(filepath)

Override, Abstract, Internal, Main, Callable, Dynamic:修饰符注解符 Internal, Main, Callable, Dynamic, 用于在编写类型描述时对成员属性的一个补充

语法:@Override

package com.views;
import web.components.Component

@Abstract // 此类不能被直接实例化, 需要通过子类继承
class HomePage extends Component{

  @Main //为此类添加一个直接调用的入口,在这个类被加载时执行。此注解符绑定的方法必须为静态公开方法。 通过利用这个做一些初始化的工作,当然一般用于入口文件中,比如 App;
  static main(){
    //to do...
  }

  @Override //对父方法的覆盖
  render(){
    //...
  }
}

表达式注解符:

Router,Http

Router:生成一个路由对象 主要用于生成一个前端页面的路由对象

语法:@Router(className, [[param=]params])

package views;
import web.components.Component
class Home extends Component{
  @Override
  render(){
    const params = {
      id:5
    }
	  const route = @Router(views.HomePage, params);
  }

Http:发送Http 请求 主要用于在前端页面向后端请求数据

语法:@Http(className, methodName, [[param=]param], [[data=]data], [[options=]options] )

package views;
import web.components.Component
class Home extends Component{

  async loadData(){
    const params = {
      id:5
    }
    const data = await @Http(com.api.Person, list, params)
  }
}

编译宏注解符:

Runtime,Syntax,Env,Version,

语法:@Runtime(platform) //client, server;

语法:@Syntax(PluginName) //es-vue, es-php,...

语法:@Env(propName, value)

语法:@Version(PluginName, value, operator) // operator: egt,elt,neq,gt,lt,eq

package;
import web.components.Appliction;
class App extends Appliction{
  @Main
  static main(){
    when( Env(NODE_ENV, development) ){
        //如果当前为开模式
        System.setConfig('http.request.baseURL', '/api');
    }then{
        //生产模式
        System.setConfig('http.request.baseURL', '/'); 
    }
  }
}