@suey/surly v1.0.10

安装

采用vite创建项目, 使用 npm:

$ npm init
$ npm install vite --save-dev
$ tsc --init
$ npm install @suey/surly --save

使用 pnpm

$ pnpm init
$ pnpm install vite --save-dev
$ tsc --init
$ pnpm install @suey/surly --save

如果你还想使用一部分基础函数, 你可以

$ npm install @suey/packages --save
$ pnpm install @suey/packages --save

// vite.config.ts
// 导入插件, 以解析 jsx 语法和提供 框架支持
import { defineConfig } from 'vite';
import { surlyTsx } from '@suey/surly/compiler';

export default defineConfig({
  plugins: [surlyTsx()]
});

// main.tsx
import { Surly, Inject, Component, Created, Mount, Mounted, Destroy, Destroyed, Render } from '@suey/surly';
import { setupApp } from '@suey/surly';
import { printError, printInfo, printWarn } from '@suey/surly/printer';

/** 你的组件可以不由Component修饰, 但得保证含有 render 函数, 或者是由 @Render 装饰器修饰的函数 */
class HelloWrold {
  render = () => (<div>Hello World !!</div>)
}

@Surly('app')
class App {
  /** 使用 Inject可以实现自动注入, 就比如你实现了一个向全局提供服务的类, 你只需要使用 Inject 修饰, 并给出服务类的类型, 那么会自动将该服务类注入到这里 */
  @Inject c: HelloWrold;

  /** 这是函数的生命周期 */
  @Created create() {
    printInfo(`当组件被初始化的时候会自动调用`);
  }

  /** 渲染函数 */
  render() {
    return (
      <div><HelloWrold /></div>
    )
  }
}

/** 创建应用程序 */
setupApp(App);

/**
 * 当然如果想要手动卸载, 又或者使用插件以丰富可以接受其返回值
 * const app = setupApp(App);
 *
 * app.destory();
 */

/**
 * 1. css in js
 * 2. 自动注入全局变量, 更加系统化, @Inject 函数, @Provider 函数配合, 组件交流, 换肤更加容易
 * 3. 综合 1 和 2 两点, css in js, css 变量可以描述为一个js变量进行处理, 样式更换更加平滑
 * 4. 借鉴了其他框架, 采用了组件化处理, 生命周期函数以及响应式系统, 使用者只需要关注数据, 由数据驱动视图
 *    生命周期由装饰器修饰提供, 当某个函数需要被作为生命周期函数处理时, 只需要加上生命周期处理函数
 * 5. 强大的注入系统, 大多数处境, 你的组件需要获得信息的时候, 只需要使用装饰器便可以获得, 例如某个函数需要获取 props 时, 只需要加上参数装饰器 @Props 修饰即可
 * 6. 典型的控制反转机制, 你无需自行处理组件的渲染过程, 只需要在意代码逻辑, 在意组件的组织过程即可
 * 7. 多 render 渲染函数机制, 当你声明一个 render 函数返回 node 节点的时候, 可以为 render 函数命名, 采用 @Render 装饰器
 *    例如 @Render('pc') render() {}, @Render('android') render() {}
 *    这将为多平台处理创造出解决方案。当你使用 setup 建立应用程序的时候, 配置平台参数, 即可动态的返回创建的node节点
 * 8. 存储系统的提供, 在其他框架中, 存储系统将作为一个对象, 例如 Vuex 的处理方案, 需要引入一个 useStore 函数, 创建对应的对象
 *    但利用注入系统, 你只需要引入这个存储系统类即可, 并且作为类型注释放到注释对象中
 *    例如 @Inject('store') store: Store; Store为你的存储类, 这时将会去寻找一个名为 store 的 Store类型的对象
 * 9. 采用 tsx 的写法, 相比 Vue 更加灵活.虽然 Vue 也可以采用 tsx 的写法, 但是并没有 css in js 的加持, 并没有那么丝滑。
 * 10.创建 hooks 之后的使用方式更加简单, 推荐 hooks 也写成装饰器的形式, 这样可以自动的加装到组件对象中。当然写成函数式的方式也没有问题。
 *
 *
 * 11.router处理, 目前还没有想好如何与结合router创建一个 spa 页面
 * 12.SSR, 目前不会 SSR, 所以根本没有什么入手点去创建一个 SSR 应用程序
 *
 * 13.样式隔离系统, 默认采取了样式隔离, 避免污染全局的 CSS, 当用户需要创建全局的样式时, 建议创建 css, scss, less 文件进行处理
 * 14.采用Web Worker实现性能优化，并提供Worker的使用Api
 *
 * 15.还需要避免虚拟Dom进行对比所产生的性能消耗，如何在最大程度上减少 diff 算法带来的性能损失
 * 16.引入了Web Worker之后，将会多出一个多线程的概念，如何解决多线程带来的 Api 书写和语义简写
 *
 * 17.如果采用此框架进行编写项目，那么就不能采用CDN的模式进行书写，因为默认情况下浏览器不支持TS，本框架需要使用到TS的类型注释以达到控制反转的效果
 * 18.强大的介入系统，本框架会预留许多的空置位，让用户编写代码时，如果想要在框架运行的时候介入其中，做某些操作，本框架会做最大程度的预留空间
 *
 * 19.需要建立 cli,创建本框架的脚手架,负责帮忙建立项目文件.
 */

/** 接下来列举一个简单的 hooks 装饰器, 我并未实现具体的函数修改过程 */

/**
 * 节流函数装饰器, 直接装饰使用
 * @param target 装饰器对象
 * @param propertyKey 装饰器函数的key
 * @param descriptor 装饰器函数的描述
 */
function Throttle<T>(target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>): void;

/**
 * 创建一个节流函数装饰器
 * @param {number} time 节流函数的时间参数
 * @returns {MethodDecorator} 返回一个方法装饰
 */
function Throttle(time?: number): MethodDecorator;

/**
 * 创建一个节流函数
 * @param {() => void} fn 执行函数
 * @param {number} time 节流函数的时间参数
 * @returns 返回一个节流函数
 */
function Throttle(fn: () => void, time?: number): Function;

function Throttle<T>(target?: object | (() => void) | number, propertyKey?: string | symbol | number, descriptor?: TypedPropertyDescriptor<T>): MethodDecorator | Function | void {
  // 装饰器
  if (target && propertyKey && descriptor) {

    return;
  }

  // 节流函数装饰器
  if (!target || typeof target === 'number') {
    target = target ?? 50;

    return (t, p, d) => {
      // 修改函数
    }
  }

  // 正常调用的节流函数, 书写并返回

  return () => void 0;
}


const resize = Throttlr((e: UIEvent) => {
  console.log('页面大小被调整了');
});

class Target {
  @Created created() {
    window.addEventListener('resize', (e) => this.resize(e));

    // window.addEventListener('resize', e => resize(e));
  }

  // @Throttle resize(e: UIEvent) {
  //   console.log('页面大小被调整了');
  // }

  // @Throttle(100) resize(e: UIEvent) {
  //   console.log('页面大小被调整了');
  // }
}