@ray-js/panel-sdk v1.10.5

English | 简体中文

@ray-js/panel-sdk

Ray Panel Mini App Base JS SDK

Installation

$ npm install @ray-js/panel-sdk
# or
$ yarn add @ray-js/panel-sdk
# or
$ pnpm add @ray-js/panel-sdk

Basic Usage

Fully use

import { kit, hooks, utils, service } from '@ray-js/panel-sdk';

const { I18N } = kit;

// Never use hooks.useDpState, which will cause the eslint rule to fail to detect
const { useDpState } = hooks;

const data = utils.parseJSON('{}');

service.getAssetHostname().then(data => {
  console.lo('data: ', data);
});

Smart Device Model

Usage

import { SmartDeviceModel } from '@ray-js/panel-sdk';

// SmartDevices comes from typings/sdm.d.ts，negligible for non Typescript developers
export const devices = {} as SmartDevices;

SmartDeviceModel.init<SmartDeviceSchema>().then(device => {
  /**
   * It is recommended that the name of the smart device be used as the key name for assignment
   */
  devices.robot = device;
});

devices.robot.model.actions.power.toggle();

Ray / React Project

// src/app.tsx
import React from 'react';
import 'ray';
import '@/i18n';
import { kit, SdmProvider } from '@ray-js/panel-sdk';
import { devices } from '@/devices';

const { initPanelEnvironment } = kit;

interface Props {
  children: React.ReactNode;
}

initPanelEnvironment({ useDefaultOffline: true });

export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }

  render() {
    return <SdmProvider value={devices.robot}>{this.props.children}</SdmProvider>;
  }
}

// src/pages/home/index.tsx
import React from 'react';
import { Button, View } from '@ray-js/ray';
import { devices } from '@/devices';

export default function Home() {
  const device = devices.robot;
  return (
    <View>
      <Button onClick={() => device.model.actions.power.toggle()}>Click me toggle power</Button>
    </View>
  );
}