From f848be93b28179c183edafe0cb891e4faa6da250 Mon Sep 17 00:00:00 2001 From: Meqn Date: Tue, 3 Dec 2024 12:01:35 +0000 Subject: [PATCH] docs: update README --- README.md | 50 ++++++++++- build.md | 180 -------------------------------------- libs/Drag/README.zh_CN.md | 2 +- libs/websocket/README.md | 2 +- libs/websocket/note.md | 13 +-- 5 files changed, 51 insertions(+), 196 deletions(-) delete mode 100644 build.md diff --git a/README.md b/README.md index eed4554..e96ade6 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,68 @@ # Jotter -> Document some lightweight front-end libraries (wheel building). The main features is "simple, universal, no dependence". +> Developing some lightweight front-end libraries (build wheels). Mainly "simple, generic, no dependencies". 记录一些轻量级的前端库 (造轮子)。👉 主打 "简洁、通用、无依赖"。 全部来自工作中开发的源码，非常适合项目中实现一些简单功能。 -## Packages +## 📦 Packages | Package | Version | Description | | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | +| [@jotter/websocket](https://github.com/Marinerer/jotter/tree/main/libs/websocket) | [![version](https://img.shields.io/npm/v/@jotter/websocket?style=flat-square)](https://www.npmjs.com/package/@jotter/websocket) | Modern and useful WebSocket wrapper, with standard WebSocket API. | | [@jotter/animator](https://github.com/Marinerer/jotter/tree/main/libs/Animator) | [![version](https://img.shields.io/npm/v/@jotter/animator?style=flat-square)](https://www.npmjs.com/package/@jotter/animator) | Animator is an animation playback controller. | | [@jotter/drag](https://github.com/Marinerer/jotter/tree/main/libs/Drag) | [![version](https://img.shields.io/npm/v/@jotter/drag?style=flat-square)](https://www.npmjs.com/package/@jotter/animator) | Lightweight "drag-and-drop" library of draggable elements within a specified range. | | [dom-event-emit](https://github.com/Marinerer/jotter/tree/main/libs/domEmit) | [![version](https://img.shields.io/npm/v/dom-event-emit?style=flat-square)](https://www.npmjs.com/package/dom-event-emit) | A type-safe, flexible DOM event emitter for browser environments. | | [@jotter/emitter](https://github.com/Marinerer/jotter/tree/main/libs/emitter) | [![version](https://img.shields.io/npm/v/@jotter/emitter?style=flat-square)](https://www.npmjs.com/package/@jotter/emitter) | Simple and modern event emitter library. | -| [@jotter/websocket](https://github.com/Marinerer/jotter/tree/main/libs/websocket) | [![version](https://img.shields.io/npm/v/@jotter/websocket?style=flat-square)](https://www.npmjs.com/package/@jotter/websocket) | Modern and useful WebSocket wrapper, with standard WebSocket API. | | [@jotter/dateformat](https://github.com/Marinerer/jotter/tree/main/libs/dateFormat) | [![version](https://img.shields.io/npm/v/@jotter/dateformat?style=flat-square)](https://www.npmjs.com/package/@jotter/dateformat) | A date/time formatting function. | | [@jotter/from-now](https://github.com/Marinerer/jotter/tree/main/libs/fromNow) | [![version](https://img.shields.io/npm/v/@jotter/from-now?style=flat-square)](https://www.npmjs.com/package/@jotter/from-now) | A relative time formatting functions. | | [@jotter/position](https://github.com/Marinerer/jotter/tree/main/libs/position) | [![version](https://img.shields.io/npm/v/@jotter/position?style=flat-square)](https://www.npmjs.com/package/@jotter/position) | Positioning a DOM element relative to another DOM element. | +### @jotter/websocket + +📚 [Document](./libs/websocket/README.md) + +> Modern and useful WebSocket API wrapper class with additional features such as auto-reconnect, message queuing and Keep-alive detection. +> +> 标准且实用的 WebSocket 包装器，具有标准 `WebSocket API`。支持心跳检测，异常消息处理和自动重连机制。 + +- ⏰ With Standard WebSocket API +- 🧬 Automatic Reconnection +- 💓 Keep-alive (Ping) Support +- 📮 Message Queuing +- 🌐 Flexible Configuration + +### @jotter/animator + +📚 [Document](./libs/Animator/README.md) + +> A lightweight animation controller library for managing time-based animation progress. +> +> 一个轻量级的动画控制库，用于管理基于时间的动画进度。 + +- ⏯ Pause/Resume support +- 🔄 Loop animation support +- 🚥 Progress Control +- 🚌 Rate Control +- ⏱ Forward/Backward control +- 🎯 Custom Animation + +### @jotter/drag + +📚 [Document](./libs/Drag/README.md) + +> A lightweight, flexible `drag-and-drop` library for making DOM elements draggable with mouse and touch support. +> +> 一个轻量级的拖拽库，允许你快速而轻松地使DOM元素在指定区域内拖动。 + +- 🎯 Directional constraints (horizontal/vertical/free) +- 📱 Mouse and touch support +- 🔒 Customizable drag boundaries +- 🎨 Position or transform-based movement +- 🎮 Custom drag handles +- 📦 Zero dependencies + ## License MIT diff --git a/build.md b/build.md deleted file mode 100644 index 7821470..0000000 --- a/build.md +++ /dev/null @@ -1,180 +0,0 @@ -## 发布包 - -1.包版本信息 -``` -pnpm changeset -``` - -2.变更包版本 -``` -pnpm changeset:version -``` - -3.发布npm包 -``` -pnpm release -``` - - -## Publish - -发布 npm Scoped 包 - -```bash -# 设置 scope -npm init --scope=@jotter - -# 发布公共范围模块 -npm publish --access public -``` - - -## package.json -```js -{ - // -} -``` - -## rollup - -```js -defineConfig({ - input: '', - output: { - // - }, - /** - * 排除在 bundle 外部的模块 - * // 1. 外部依赖的名称 - * // 2. 解析过的模块 ID（如文件的绝对路径） - * @comment 当创建 iife 或 umd 格式的 bundle 时，你需要通过 output.globals 选项提供全局变量名，以替换掉外部引入。 - */ - external: [ - "lodash", - "jquery", - "vue" - ], - plugins: [], -}) -``` - -### output -```js -output: { - /** - * 输出的文件 - */ - file: 'bundles.js' - /** - * 输出格式: amd, cjs, es, iife, umd, system - */ - format: 'cjs' // 输出格式: cjs, umd, iife, es6, amd - /** - * format为iife或者umd的时候必须配置, 会作为全局变量 - */ - name: 'myBundle', - /** - * 该选项用于在 umd / iife bundle 中，使用 id: variableName 键值对指定外部依赖。 - * @example jquery 是外部依赖，jquery 模块的 ID 为全局变量 $ - */ - globals: { - jquery: '$', - vue: 'Vue' - } - /** - * 指定输出的插件 - * @comment output.plugins 仅限于在 bundle.generate() 或 bundle.write() 阶段 - */ - plugins: [ - terser() // 压缩文件 - ] - /** - * 生成源码映射文件 - */ - sourcemap: true, - /** - * 指定导出模式，默认是 auto。用于多模块导出 - * @caution 慎用 - */ - exports: 'auto' -} -``` - -### plugins -```js -// rollup typescript配置处理 -// `@rollup/plugin-typescript` -import typescript from 'rollup-plugin-typescript2' -// 生成 .d.ts 文件 -import dts from 'rollup-plugin-dts' -/* -* 解析第三方依赖 -* rollup.js编译源码中的模块引用默认只支持ES6+的模块方式import/export。 -* 然而大量的npm模块是基于CommonJS模块方式，这就导致了大量 npm 模块不能直接编译使用。 -* 所以辅助rollup.js编译支持npm模块和CommonJS模块方式的插件就应运而生 -*/ -import nodeResolve from '@rollup/plugin-node-resolve' -// 识别 commonjs 模式第三方依赖 -import commonjs from '@rollup/plugin-commonjs' -// 支持import 'xx.json'文件 -import json from '@rollup/plugin-json' -// 在打包的时候把目标字符串替换 -import replace from '@rollup/plugin-replace' -// 对打包的js进行压缩 -import { terser } from 'rollup-plugin-terser' -// 删除原来的bundle -import delete from 'rollup-plugin-delete' -// 显示打包后文件的大小 -import filesize from 'rollup-plugin-filesize' -// rollup 的 babel 插件，ES6转ES5 -import { babel } from '@rollup/plugin-babel' - -import copy from 'rollup-plugin-copy' -import image from '@rollup/plugin-image' -import alias from '@rollup/plugin-alias' -``` - -## tsconig.json - -```json -{ - "compilerOptions": { - "allowUnreachableCode": true, // 不报告执行不到的代码错误。 - "allowUnusedLabels": false, // 不报告未使用的标签错误 - "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句 - "baseUrl": ".", // 工作根目录 - "experimentalDecorators": true, // 启用实验性的ES装饰器 - "jsx": "react", // 在 .tsx文件里支持JSX - "sourceMap": true, // 是否生成map文件 - "module": "ES2015", // 指定生成哪个模块系统代码 - "noImplicitAny": false, // 是否默认禁用 any - "removeComments": true, // 是否移除注释 - "target": "ESNext", // 编译的目标是什么版本的 - "outDir": "./dist", // 输出目录 - "declaration": true, // 是否自动创建类型声明文件 - "declarationDir": "./dist/types", // 类型声明文件的输出目录 - "allowJs": true, // 允许编译javascript文件。 - "moduleResolution": "node", - "allowSyntheticDefaultImports": true, - "lib": [ // 编译过程中需要引入的库文件的列表 - "es5", - "es2015", - "es2016", - "es2017", - "es2018", - "dom" - ] - }, - // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件） - "include": [ - "src/**/*" - ], - // 指定一个排除列表（include的反向操作） - "exclude": [ - "node_modules", - "dist" - ] -} -``` - diff --git a/libs/Drag/README.zh_CN.md b/libs/Drag/README.zh_CN.md index 582f79f..2a5b3d2 100644 --- a/libs/Drag/README.zh_CN.md +++ b/libs/Drag/README.zh_CN.md @@ -1,4 +1,4 @@ -# Draggable +# Drag [![version](https://img.shields.io/npm/v/@jotter/drag?style=flat-square)](https://www.npmjs.com/package/@jotter/drag) [![codecov](https://codecov.io/gh/Marinerer/jotter/graph/badge.svg?token=G7QXEHCEXW)](https://codecov.io/gh/Marinerer/jotter) diff --git a/libs/websocket/README.md b/libs/websocket/README.md index 8980c9a..94e2e51 100644 --- a/libs/websocket/README.md +++ b/libs/websocket/README.md @@ -131,7 +131,7 @@ WebSocket connection protocol. WebSocket connection options. ```typescript -interface WebSocketConnectOptions { +interface IOptions { // Reconnection configuration reconnect?: | boolean diff --git a/libs/websocket/note.md b/libs/websocket/note.md index b17ca50..1b30993 100644 --- a/libs/websocket/note.md +++ b/libs/websocket/note.md @@ -54,16 +54,7 @@ - https://github.com/pladaria/reconnecting-websocket/ - https://github.com/joewalnes/reconnecting-websocket - +- https://github.com/zimv/websocket-heartbeat-js +- https://github.com/jaywcjlove/websocket/ - https://github.com/appuri/robust-websocket/ - https://github.com/theturtle32/WebSocket-Node/ - - - -参考： -// https://github.com/pladaria/reconnecting-websocket/ ⭐️⭐️⭐️⭐️ -// https://github.com/joewalnes/reconnecting-websocket ⭐️⭐️⭐️ -// https://github.com/lukeed/sockette/ ⭐️⭐️⭐️ -// https://github.com/appuri/robust-websocket/ -// https://github.com/jaywcjlove/websocket/ -// https://github.com/zimv/websocket-heartbeat-js \ No newline at end of file