@ray-js/graffiti 1.0.0

package/README.md

@@ -0,0 +1,94 @@
+English | [简体中文](./README-zh_CN.md)
+
+# @ray-js/graffiti
+
+[![latest](https://img.shields.io/npm/v/@ray-js/graffiti/latest.svg)](https://www.npmjs.com/package/@ray-js/graffiti) [![download](https://img.shields.io/npm/dt/@ray-js/graffiti.svg)](https://www.npmjs.com/package/@ray-js/graffiti)
+
+> Canvas Graffiti
+
+## Installation
+
+```sh
+$ npm install @ray-js/graffiti
+# or
+$ yarn add @ray-js/graffiti
+```
+
+## Develop
+
+```sh
+# install deps
+yarn
+
+# watch compile demo
+yarn start:tuya
+```
+
+## Code Demonstration
+
+### Basic usage
+
+- By changing the operation type, you can switch to pencil mode, eraser mode, paint bucket mode
+- By changing `penColor`, you can pass in different pen colors
+- `needStroke` is `true`, start monitoring each brush data, and get the x, y coordinate path data of each brush stroke through `onStrokeChange`
+- By updating the value of `saveTrigger`, you can trigger canvas saving and return the base64 data of the canvas
+- By updating the value of `clearTrigger`, you can trigger canvas clearing
+
+```tsx
+import React, { useState } from 'react';
+import { View } from '@ray-js/ray';
+import Graffiti from '@ray-js/graffiti';
+
+type IStrokeData = {
+  points: Array<{ x: number; y: number }>;
+};
+
+type IData = {
+  base64: string;
+};
+
+export function Home() {
+  const [actionType, setActiontype] = useState<'pencil' | 'eraser' | 'paint'>('pencil');
+  const [color, setColor] = useState('rgba(255, 0, 0, 1)');
+  const [saveTrigger, setSaveTrigger] = useState(0);
+  const [clearTrigger, setClearTrigger] = useState(0);
+
+  const reset = () => {
+    setClearTrigger(clearTrigger + 1);
+  };
+
+  const save = () => {
+    setSaveTrigger(saveTrigger + 1);
+  };
+
+  const handleStrokeChange = (data: IPoints) => {
+    console.log('handleStrokeChange', data);
+  };
+
+  const handleSaveData = (data: IData) => {
+    console.log('handleSaveData', data);
+  };
+
+  return (
+    <>
+      <Graffiti
+        needStroke
+        penColor={color}
+        actionType={actionType}
+        saveTrigger={saveTrigger}
+        clearTrigger={clearTrigger}
+        onStrokeChange={handleStrokeChange}
+        onSaveData={handleSaveData}
+      />
+      <View className="footer">
+        <Button className="btn" type="primary" onClick={reset}>
+          Reset
+        </Button>
+        <Button className="btn" type="primary" onClick={save}>
+          Save
+        </Button>
+      </View>
+    <>
+  );
+}
+```

package/lib/components/index.js

@@ -0,0 +1,200 @@
+import Render from './index.rjs';
+import { getSystemInfoSync } from '@ray-js/ray';
+let _systemInfoResult = null;
+export const getSystemInfoResult = () => {
+  if (_systemInfoResult) {
+    return _systemInfoResult;
+  }
+  try {
+    const info = getSystemInfoSync();
+    _systemInfoResult = info;
+    return _systemInfoResult;
+  } catch (err) {
+    return {
+      windowHeight: 667,
+      windowWidth: 375,
+      pixelRatio: 2
+    };
+  }
+};
+
+// 获取真实的px
+export const getDeviceRealPx = px => {
+  const info = getSystemInfoResult();
+  return Math.round(px * (info.windowWidth / 375));
+};
+const WIDTH = 353;
+const HEIGHT = 353;
+
+// eslint-disable-next-line no-undef
+Component({
+  properties: {
+    canvasIdPrefix: {
+      type: String,
+      value: 'ray-graffiti' // canvas
+    },
+    width: {
+      type: Number,
+      value: WIDTH // 画布宽度
+    },
+    height: {
+      type: Number,
+      value: HEIGHT // 画布高度
+    },
+    mode: {
+      type: String,
+      value: 'grid' // grid 按方格数显示长宽相同, pixel 按像素显示
+    },
+    gridSizeX: {
+      type: Number,
+      value: 32 // 每行格子数量
+    },
+    gridSizeY: {
+      type: Number,
+      value: 32 // 每列格子数量
+    },
+    pixelSizeX: {
+      type: Number,
+      value: 10 // 格子宽度
+    },
+    pixelSizeY: {
+      type: Number,
+      value: 10 // 格子高度
+    },
+    pixelGap: {
+      type: Number,
+      value: 1 // 格子间距
+    },
+    pixelShape: {
+      type: String,
+      value: 'square' // 格子形状, square方形, circle圆形
+    },
+    pixelColor: {
+      type: String,
+      value: 'rgba(255, 255, 255, 0.15)' // 格子颜色
+    },
+    penColor: {
+      // 画笔颜色
+      type: String,
+      value: 'rgb(255, 255, 255)',
+      observer(newValue) {
+        if (newValue && this.render) {
+          if (this.data.actionType === 'pencil') {
+            this.render.updateColor(newValue);
+          } else if (this.data.actionType === 'paint') {
+            this.render.changeBg(newValue);
+          }
+        }
+      }
+    },
+    actionType: {
+      // 操作类型 pencil画笔, eraser橡皮擦, paint油漆桶
+      type: String,
+      value: 'pencil',
+      observer(newValue) {
+        if (newValue && this.render) {
+          if (newValue === 'eraser') {
+            this.render.updateColor(this.data.pixelColor);
+          } else if (newValue === 'pencil') {
+            this.render.updateColor(this.data.penColor);
+          } else if (newValue === 'paint') {
+            this.render.changeBg(this.data.penColor);
+          }
+        }
+      }
+    },
+    needStroke: {
+      // 是否需要每一画笔数据
+      type: Boolean,
+      value: false
+    },
+    saveTrigger: {
+      // 保存标识
+      type: Number,
+      value: 0,
+      observer(newValue) {
+        if (newValue && this.render) {
+          this.render.save();
+        }
+      }
+    },
+    clearTrigger: {
+      // 清空标识
+      type: Number,
+      value: 0,
+      observer(newValue) {
+        if (newValue && this.render) {
+          this.render.clear();
+        }
+      }
+    }
+  },
+  data: {
+    realWidth: WIDTH,
+    realHeight: HEIGHT
+  },
+  lifetimes: {
+    created() {
+      this.render = new Render(this);
+    },
+    ready() {
+      let {
+        canvasIdPrefix,
+        width,
+        height,
+        gridSizeX,
+        gridSizeY,
+        pixelSizeX,
+        pixelSizeY,
+        pixelGap,
+        mode
+      } = this.data;
+      width = getDeviceRealPx(width);
+      height = getDeviceRealPx(height);
+      pixelSizeX = getDeviceRealPx(pixelSizeX);
+      pixelSizeY = getDeviceRealPx(pixelSizeY);
+      pixelGap = getDeviceRealPx(pixelGap);
+      let realPixelSizeX = pixelSizeX;
+      let realPixelSizeY = pixelSizeY;
+      if (mode === 'grid') {
+        realPixelSizeX = Math.floor((width - pixelGap) / gridSizeX - pixelGap);
+        const gridModeSizeX = (realPixelSizeX + pixelGap) * gridSizeX + pixelGap;
+        realPixelSizeY = Math.floor((height - pixelGap) / gridSizeY - pixelGap);
+        const gridModeSizeY = (realPixelSizeY + pixelGap) * gridSizeY + pixelGap;
+        this.setData({
+          realWidth: gridModeSizeX,
+          realHeight: gridModeSizeY
+        });
+      } else {
+        this.setData({
+          realWidth: width,
+          realHeight: height
+        });
+      }
+      this.render.initPanel({
+        canvasIdPrefix: canvasIdPrefix,
+        width: width,
+        height: height,
+        mode: this.data.mode,
+        gridSizeX: gridSizeX,
+        gridSizeY: gridSizeY,
+        pixelSizeX: realPixelSizeX,
+        pixelSizeY: realPixelSizeY,
+        pixelGap: pixelGap,
+        pixelShape: this.data.pixelShape,
+        pixelColor: this.data.pixelColor,
+        penColor: this.data.penColor
+      });
+    }
+  },
+  methods: {
+    touchend(data) {
+      if (!this.data.needStroke) return;
+      if (this.data.actionType === 'paint') return;
+      this.triggerEvent('strokeChange', data);
+    },
+    genImageData(data) {
+      this.triggerEvent('saveData', data);
+    }
+  }
+});

package/lib/components/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/lib/components/index.rjs

@@ -0,0 +1,165 @@
+const pixelRatio = Math.floor(getSystemInfo().pixelRatio) || 1; // 分辨率, 整数
+
+export default Render({
+  async initPanel({
+    canvasIdPrefix,
+    width,
+    height,
+    mode,
+    gridSizeX,
+    gridSizeY,
+    pixelSizeX,
+    pixelSizeY,
+    pixelGap,
+    pixelShape,
+    pixelColor,
+    penColor,
+  }) {
+    let canvas = await getCanvasById(`${canvasIdPrefix}-sourceCanvas`);
+
+    // 根据屏幕分辨率动态计算canvas尺寸
+    if (mode === 'grid') {
+      const gridModeSizeX = (pixelSizeX + pixelGap) * gridSizeX + pixelGap;
+      const gridModeSizeY = (pixelSizeY + pixelGap) * gridSizeY + pixelGap;
+      canvas.width = gridModeSizeX * pixelRatio;
+      canvas.height = gridModeSizeY * pixelRatio;
+      canvas.style.width = gridModeSizeX + 'px';
+      canvas.style.height = gridModeSizeY + 'px';
+    } else {
+      canvas.width = width * pixelRatio;
+      canvas.height = height * pixelRatio;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+    }
+
+    const ctx = canvas.getContext('2d');
+    ctx.scale(pixelRatio, pixelRatio);
+    this.canvas = canvas;
+    this.ctx = ctx;
+
+    this.mode = mode;
+    this.width = width;
+    this.height = height;
+    this.gridSizeX = gridSizeX;
+    this.gridSizeY = gridSizeY;
+    this.pixelSizeX = pixelSizeX;
+    this.pixelSizeY = pixelSizeY;
+    this.pixelGap = pixelGap;
+    this.pixelShape = pixelShape;
+    this.pixelColor = pixelColor;
+    this.penColor = penColor;
+    this.canvasIdPrefix = canvasIdPrefix;
+    // 用于存储触摸开始到结束经过的方格坐标数组集合
+    this.touchedSquaresSet = new Set();
+    // 记录触摸是否开始
+    this.isTouchStarted = false;
+
+    // 初始化画布, 绘制像素点
+    this.createPixel(pixelColor);
+
+    canvas.addEventListener('touchstart', this.handleTouchstart, false);
+    canvas.addEventListener('touchmove', this.handleTouchmove, false);
+    canvas.addEventListener('touchend', this.handleTouchend, false);
+
+    ctx.imageSmoothingEnabled = true; // 开启抗锯齿
+    ctx.imageSmoothingQuality = 'high'; // 高质量抗锯齿
+  },
+  handleTouchstart(e) {
+    const { canvas, pixelGap, pixelSizeX, pixelSizeY } = this;
+    this.touchedSquaresSet.clear();
+    this.isTouchStarted = true;
+    const touch = e.changedTouches[0];
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.floor((touch.pageX - rect.left - pixelGap) / (pixelSizeX + pixelGap));
+    const y = Math.floor((touch.pageY - rect.top - pixelGap) / (pixelSizeY + pixelGap));
+    const coordinate = `${x},${y}`;
+    if (!this.touchedSquaresSet.has(coordinate)) {
+      this.touchedSquaresSet.add(coordinate);
+      this.fillPixel(x, y, this.penColor);
+    }
+  },
+  handleTouchmove(e) {
+    const { canvas, pixelGap, pixelSizeX, pixelSizeY } = this;
+    e.preventDefault();
+    if (this.isTouchStarted) {
+      const touch = e.changedTouches[0];
+      const rect = canvas.getBoundingClientRect();
+      const x = Math.floor((touch.pageX - rect.left - pixelGap) / (pixelSizeX + pixelGap));
+      const y = Math.floor((touch.pageY - rect.top - pixelGap) / (pixelSizeY + pixelGap));
+      const coordinate = `${x},${y}`;
+      if (!this.touchedSquaresSet.has(coordinate)) {
+        this.touchedSquaresSet.add(coordinate);
+        this.fillPixel(x, y, this.penColor);
+      }
+    }
+  },
+  handleTouchend() {
+    this.isTouchStarted = false;
+    const touchedSquares = [];
+    for (const coordinateStr of this.touchedSquaresSet) {
+      const [x, y] = coordinateStr.split(',');
+      touchedSquares.push({ x: Number(x), y: Number(y) });
+    }
+    this.callMethod('touchend', { points: touchedSquares });
+  },
+  createPixel(pixelColor) {
+    const { gridSizeX, gridSizeY, pixelSizeX, pixelSizeY, pixelGap } = this;
+    let realGridSizeX = gridSizeX;
+    let realGridSizeY = gridSizeY;
+    if (this.mode !== 'grid') {
+      realGridSizeX = (this.width - pixelGap) / (pixelSizeX + pixelGap);
+      realGridSizeY = (this.height - pixelGap) / (pixelSizeY + pixelGap);
+    }
+    for (let x = 0; x < realGridSizeX; x++) {
+      for (let y = 0; y < realGridSizeY; y++) {
+        this.fillPixel(x, y, pixelColor);
+      }
+    }
+  },
+  fillPixel(x, y, color) {
+    const { ctx, pixelSizeX, pixelSizeY, pixelGap, pixelShape } = this;
+    const offsetX = pixelGap + x * (pixelSizeX + pixelGap);
+    const offsetY = pixelGap + y * (pixelSizeY + pixelGap);
+    // 清除原有填充颜色
+    ctx.clearRect(offsetX, offsetY, pixelSizeX, pixelSizeY);
+    ctx.fillStyle = color; // 填充颜色
+    if (pixelShape === 'square') {
+      ctx.fillRect(offsetX, offsetY, pixelSizeX, pixelSizeY);
+    } else {
+      const radiusX = pixelSizeX / 2;
+      const radiusY = pixelSizeY / 2;
+      // 开始绘制路径
+      ctx.beginPath();
+      // 使用arc方法绘制圆形，传入圆心x坐标、圆心y坐标、半径、起始角度（弧度制）、结束角度（弧度制）
+      if (radiusX === radiusY) {
+        ctx.arc(offsetX + radiusX, offsetY + radiusY, radiusX, 0, Math.PI * 2);
+      } else {
+        ctx.ellipse(offsetX + radiusX, offsetY + radiusY, radiusX, radiusY, 0, 0, Math.PI * 2);
+        // ctx.arc(offsetX + radiusX, (offsetY + radiusY) / (radiusY / radiusX), radiusX, 0, Math.PI * 2);
+      }
+      // 关闭路径
+      ctx.closePath();
+
+      // 执行填充操作，将圆形内部填充为设定的颜色
+      ctx.fill();
+    }
+  },
+  // 改变画笔颜色
+  updateColor(color) {
+    this.penColor = color;
+  },
+  // 油漆桶
+  changeBg(color) {
+    this.penColor = color;
+    this.createPixel(color);
+  },
+  // 清除画布
+  clear() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.createPixel(this.pixelColor);
+  },
+  save() {
+    const base64 = this.canvas.toDataURL('image/png');
+    this.callMethod('genImageData', { base64 });
+  },
+});

package/lib/components/index.tyml

@@ -0,0 +1,6 @@
+<canvas
+  canvasClassName
+  type="2d"
+  canvas-id="{{`${canvasIdPrefix}-sourceCanvas`}}"
+  style="width: {{realWidth}}px; height: {{realHeight}}px"
+/>

package/lib/index.config.js

@@ -0,0 +1,14 @@
+export const tuya = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: 'Ray Graffiti'
+};
+export const wechat = {
+  backgroundColor: '#f2f4f6',
+  navigationBarTitleText: 'Ray Graffiti'
+};
+export const native = {
+  backgroundColor: 'transparent',
+  isBleOfflineOverlay: false,
+  useSafeAreaView: true,
+  navigationBarTitleText: 'Ray Graffiti'
+};

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IProps } from './props';
+declare const RayGraffiti: React.FC<IProps>;
+export default RayGraffiti;

package/lib/index.js

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useMemo } from 'react';
+import { View } from '@ray-js/ray';
+import Graffiti from './components';
+import { getUuid } from './utils';
+import { defaultProps } from './props';
+const classPrefix = 'ray-graffiti';
+const RayGraffiti = props => {
+  const canvasIdPrefix = useMemo(() => {
+    return `${getUuid(classPrefix)}`;
+  }, []);
+  const {
+    style = {},
+    className = '',
+    width,
+    height,
+    mode,
+    gridSizeX,
+    gridSizeY,
+    pixelSizeX,
+    pixelSizeY,
+    pixelGap,
+    pixelShape,
+    pixelColor,
+    penColor,
+    actionType,
+    needStroke,
+    saveTrigger,
+    clearTrigger,
+    onStrokeChange,
+    onSaveData
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    className: `${classPrefix} ${className}`,
+    style: _objectSpread({}, style)
+  }, /*#__PURE__*/React.createElement(Graffiti, {
+    canvasIdPrefix: canvasIdPrefix,
+    width: width,
+    height: height,
+    mode: mode,
+    gridSizeX: gridSizeX,
+    gridSizeY: gridSizeY,
+    pixelSizeX: pixelSizeX,
+    pixelSizeY: pixelSizeY,
+    pixelGap: pixelGap,
+    pixelShape: pixelShape,
+    pixelColor: pixelColor,
+    penColor: penColor,
+    actionType: actionType,
+    needStroke: needStroke,
+    saveTrigger: saveTrigger,
+    clearTrigger: clearTrigger,
+    bindstrokeChange: e => onStrokeChange(e.detail),
+    bindsaveData: e => onSaveData(e.detail)
+  }));
+};
+RayGraffiti.defaultProps = defaultProps;
+RayGraffiti.displayName = classPrefix;
+export default RayGraffiti;

package/lib/props.d.ts

@@ -0,0 +1,127 @@
+/// <reference types="react" />
+export interface IProps {
+    /**
+     * @description.zh 样式
+     * @description.en Style
+     * @default {}
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description.zh 类名
+     * @description.en className
+     * @default ''
+     */
+    className?: string;
+    /**
+     * @description.zh 画布宽度
+     * @description.en Canvas width
+     * @default 353
+     */
+    width?: number;
+    /**
+     * @description.zh 画布高度
+     * @description.en Canvas height
+     * @default 353
+     */
+    height?: number;
+    /**
+     * @description.zh 画布显示模式(grid: 按格子数量显示, pixel: 按像素显示格子), 如果 mode 设置为 grid, 那么 pixelSizeX, pixelSizeY 属性将不生效, 如果 mode 设置为 pixel, 那么 gridSizeX, gridSizeY 属性将不生效, 推荐使用 grid 模式
+     * @description.en Canvas display mode (grid: display by grid number, pixel: display by pixel grid), if mode is set to grid, then pixelSizeX, pixelSizeY properties will not take effect, if mode is set to pixel, then gridSizeX, gridSizeY properties will not take effect, it is recommended to use grid mode
+     * @default grid
+     */
+    mode?: 'grid' | 'pixel';
+    /**
+     * @description.zh 每行格子数量
+     * @description.en Number of grid per row and column
+     * @default 32
+     */
+    gridSizeX?: number;
+    /**
+     * @description.zh 每列格子数量
+     * @description.en Number of grid per column
+     * @default 32
+     */
+    gridSizeY?: number;
+    /**
+     * @description.zh 格子宽度
+     * @description.en Pixel width
+     * @default 10
+     */
+    pixelSizeX?: number;
+    /**
+     * @description.zh 格子高度
+     * @description.en Pixel height
+     * @default 10
+     */
+    pixelSizeY?: number;
+    /**
+     * @description.zh 格子间距
+     * @description.en Pixel gap
+     * @default 1
+     */
+    pixelGap?: number;
+    /**
+     * @description.zh 格子形状, square 方形, circle 圆形
+     * @description.en Pixel shape
+     * @default square
+     */
+    pixelShape?: 'square' | 'circle';
+    /**
+     * @description.zh 网格颜色
+     * @description.en Grid color
+     * @default `rgba(255, 255, 255, 0.15)`
+     */
+    pixelColor?: string;
+    /**
+     * @description.zh 画笔颜色
+     * @description.en Pen color
+     * @default `rgb(255, 255, 255)`
+     */
+    penColor?: string;
+    /**
+     * @description.zh 操作类型, pencil 画笔, eraser 橡皮擦, paint 油漆桶
+     * @description.en Action type
+     * @default pencil
+     */
+    actionType?: 'pencil' | 'eraser' | 'paint';
+    /**
+     * @description.zh 是否监听每一画笔数据, 开启后可以通过 onStrokeChange 获取每一笔画笔数据
+     * @description.en Whether to listen to each stroke data, after opening, you can get each stroke data through onStrokeChange
+     * @default false
+     */
+    needStroke?: boolean;
+    /**
+     * @description.zh 触发保存的标识, 每次递增该值, 可以触发 onSaveData 返回保存数据
+     * @description.en Trigger save mark, increase this value each time, you can trigger onSaveData to return saved data
+     * @default 0
+     */
+    saveTrigger?: number;
+    /**
+     * @description.zh 触发清空的标识, 每次递增该值, 可以触发画笔清空
+     * @description.en Trigger clear mark, increase this value each time, you can trigger the pen to clear
+     * @default 0
+     */
+    clearTrigger?: number;
+    /**
+     * @description.zh 画笔数据更新时触发, 返回画笔经过的x,y坐标路径数据
+     * @description.en Triggered when the brush data is updated, returns the x,y coordinate path data of the brush.
+     * @default () => null
+     */
+    onStrokeChange?: (data: IStrokeData) => void;
+    /**
+     * @description.zh 保存数据时触发, 返回画布的base64数据
+     * @description.en Triggered when saving data, return canvas base64 data
+     * @default () => null
+     */
+    onSaveData?: (data: IData) => void;
+}
+export type IStrokeData = {
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+};
+export type IData = {
+    base64: string;
+};
+export declare const defaultProps: IProps;

package/lib/props.js

@@ -0,0 +1,20 @@
+export const defaultProps = {
+  style: {},
+  width: 353,
+  height: 353,
+  mode: 'grid',
+  gridSizeX: 32,
+  gridSizeY: 32,
+  pixelSizeX: 10,
+  pixelSizeY: 10,
+  pixelGap: 1,
+  pixelShape: 'square',
+  pixelColor: 'rgba(255, 255, 255, 0.15)',
+  penColor: 'rgb(255, 255, 255)',
+  actionType: 'pencil',
+  needStroke: false,
+  saveTrigger: 0,
+  clearTrigger: 0,
+  onStrokeChange: () => null,
+  onSaveData: () => null
+};

package/lib/utils.d.ts

@@ -0,0 +1 @@
+export declare const getUuid: (prefix?: string) => string;

package/lib/utils.js

@@ -0,0 +1,8 @@
+export const getUuid = function () {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const id = `${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`;
+  if (prefix) {
+    return `${prefix}_${id}`;
+  }
+  return id;
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@ray-js/graffiti",
+  "version": "1.0.0",
+  "description": "画布涂鸦组件",
+  "main": "lib/index",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "types": "lib/index.d.ts",
+  "maintainers": [
+    "tuya_npm",
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "scripts": {
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "lint:style": "stylelint \"src/**/*.less\" --fix",
+    "build": "ray build --type=component",
+    "watch": "ray start --type=component --output ./example/src/lib",
+    "build:tuya": "ray build -t tuya ./example",
+    "build:wechat": "ray build ./example --target=wechat",
+    "build:web": "ray build ./example --target=web",
+    "build:native": "ray build ./example --target=native",
+    "start:native": "ray start ./example -t native --verbose",
+    "start:tuya": "ray start -t tuya ./example",
+    "start:wechat": "ray start ./example -t wechat --verbose",
+    "start:web": "ray start ./example -t web",
+    "prepublishOnly": "yarn build",
+    "release-it": "standard-version"
+  },
+  "peerDependencies": {
+    "@ray-js/ray": "^1.4.9"
+  },
+  "dependencies": {
+    "clsx": "^1.2.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/cli": "^1.4.9",
+    "@ray-js/components-ty-lamp": "^2.0.2",
+    "@ray-js/lamp-saturation-slider": "^1.1.7",
+    "@ray-js/panel-sdk": "^1.13.0-storage.7",
+    "@ray-js/ray": "^1.4.9",
+    "@vant/stylelint-config": "^1.4.2",
+    "core-js": "^3.19.1",
+    "eslint-config-tuya-panel": "^0.4.2",
+    "husky": "^1.2.0",
+    "lint-staged": "^10.2.11",
+    "standard-version": "9.3.2",
+    "stylelint": "^13.0.0"
+  },
+  "resolutions": {
+    "@ray-js/builder-mp": "1.4.15"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}