代码组件

npm i -g functorz
# 此命令也适用于升级 cli 工具版本
# 如遇网络缓慢可切换源并强制重装：
# npm i -g functorz --registry=https://registry.npmmirror.com --force

functorz --help
 
zvm cli 0.5.8
 
Usage: functorz [options] [command]
 
Options:
  -h, --help                      display help for command
 
Commands:
  create [options] <项目名>          初始化项目。会在登录的账户下创建关联的自定义组件项目，并且在本地初始化一个模板项目。
  publish [options]               发布项目。
  reinit [options]                重新注册项目ID，将本地项目重新发布为自己账号下的一个新项目。
  reset [options]                 创建模板项目。在当前目录下重置一个模板项目。
  signin [options] <用户名/邮箱> <密码>  登录到Zion平台，目前仅支持用户名密码/邮箱密码方式登录。
  signout [options]               退出，删除目前登录信息。
  help [command]                  display help for command

> functorz signin 你的邮箱账号 你的密码

> functorz signin 你的邮箱账号 你的密码
 
zvm cli 0.5.8
 
ℹ 登录
✔ 登录成功

# create 项目名
> functorz create test

> functorz create test
 
zvm cli 0.5.8
 
ℹ 项目初始化
✔ 准备工作目录完成
✔ 获取最新模板完成
✔ 生成项目完成
✔ 在Zion平台注册项目完成
✔ 关联远程项目完成
✔ 项目初始化完成

> cd test
> npm install

import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal } from 'antd';
import { EventHandler } from 'zvm-code-context';
 
// 组件的属性数据，右边栏配置，由外向内传递
export interface ConfirmModalPropData {
  buttonTitle: string;
  modalTitle: string;
  modalContent?: string;
}
 
// 组件的状态，右边栏配置，由内向外传递，可供宿主项目的其他组件绑定
export interface ConfirmModalStateData {}
 
// 组件可供绑定的事件，类型目前是固定的，只能是 EventHandler
export interface ConfirmModalEvent {
  onConfirm?: EventHandler;
  onCancel?: EventHandler;
}
 
// 固定写法。运行时，宿主项目将通过以下三个属性传递进来
export interface ConfirmModalProps {
  propData: ConfirmModalPropData;
  propState: ConfirmModalStateData;
  event: ConfirmModalEvent;
}
 
// 组件逻辑
export function ConfirmModal({ propData, event }: ConfirmModalProps) {
  const showConfirm = () => {
    Modal.confirm({
      title: propData.modalTitle || '',
      icon: <ExclamationCircleFilled />,
      content: propData.modalContent || '',
      onOk() {
        event.onConfirm?.call(null);
      },
      onCancel() {
        event.onCancel?.call(null);
      },
    });
  };
 
  return (
    <Button type='primary' onClick={showConfirm}>
      {propData.buttonTitle || ''}
    </Button>
  );
}

阅读“https://docs.functorz.com/community/code_component/”，然后完全按照Zion平台的规范编写一个 React 组件。
组件名为 ConfirmModal，功能是弹出确认对话框。组件需要支持以下功能：
 
1. 组件属性包括：
 
- 按钮文本
- 弹窗标题
- 弹窗内容
 
2. 组件状态包括：
 
- 确认事件处理函数
- 取消事件处理函数
 
3. 组件需要使用 Ant Design 的 Modal 和 Button 组件
4. 组件需要导出以下类型：
 
- ConfirmModalPropData
- ConfirmModalStateData
- ConfirmModalEvent
- ConfirmModalProps
  请使用 TypeScript 编写，并确保组件符合 Zion 平台的代码组件规范。

// 某组件内
import { useAppContext } from 'zvm-code-context';
 
const { component, discover, query, navigate, globalData, pageData } =
  useAppContext();
 
// ...

> npm run preview # 本地启动一个静态资源服务器，可以为构建产物支持 http 访问。默认启动 6326 端口。

> npm run preview # 本地启动一个静态资源服务器，可以为构建产物支持 http 访问。默认启动 6326 端口。
> npm run watch:build  # 监听本地源代码发生的变化，当编辑保存后，自动运行 npm run build。
# 注意如果不启动 watch:build 命令，可以在编辑后手动运行 npm run build。效果一致。

# 必须在项目的目录下运行
> functorz publish
 
zvm cli 0.5.8
 
ℹ 发布项目
✔ 扫描组件信息完成
✔ 组件解析完成
✔ 项目构建完成
✔ 注册版本信息中0.0.2
ℹ 产物上传开始
ℹ   ConfirmModal-DkZp9JXU.js
ℹ   __federation_expose_Main-DxfqaaDF.js
ℹ   __federation_fn_import-lyDSGtOx.js
ℹ   __federation_shared_classnames-DNBU_3PZ.js
ℹ   __federation_shared_constate-BXZUjDp9.js
ℹ   __federation_shared_lodash-CMjxsLue.js
ℹ   __federation_shared_moment-CEY8C7XE.js
ℹ   __federation_shared_react-DO25RkNm.js
ℹ   __federation_shared_react-dom-ChyTJqHm.js
ℹ   __federation_shared_react-router-dom-BwChNopu.js
ℹ   __federation_shared_zvm-code-context-DJ2L4k_6.js
ℹ   _commonjsHelpers-BFTU3MAI.js
ℹ   index-BBIatVb0.js
ℹ   remoteEntry.js
ℹ   style-CLbg9otl.css
✔ 产物上传完成
✔ 发布项目成功

// 在小程序编译产物中，这段会变成 <view>Hello world</view>
<div>Hello world</div>

// 1.在 src/typings/global.d.ts 中加入
declare const wx: any;
 
// 2.使用
wx.createSelectorQuery()
  .select('#xxx')
  .boundingClientRect((rect: any) => {
    // console.log(rect)
  })
  .exec();

npm i @tarojs/taro@4.0.9 @tarojs/components@4.0.9

// 在 vite.config.ts 的 shared 中加入 @tarojs/taro 和 @tarojs/components
export default defineConfig({
  plugins: [
    ...
    federation({
      ...
      shared: [..., "@tarojs/taro", "@tarojs/components"],
    }),
  ],
  ...
});
 
// 使用
import Taro from '@tarojs/taro';
import { ScrollView } from '@tarojs/components';
 
Taro.createSelectorQuery()
  .select("#xxx")
  .boundingClientRect((rect: any) => {
    // console.log(rect)
   })
   .exec();
 
return <ScrollView>xxxx</ScrollView>

npm i taro-ui
 
# 如遇依赖冲突可用：
npm i taro-ui --legacy-peer-deps

import { AtCalendar } from 'taro-ui';
import 'taro-ui/dist/style/components/calendar.scss';
 
export interface CalendarPropData {}
 
export interface CalendarEvent {}
 
export interface CalendarStateData {}
 
export interface CalendarProps {
  event: CalendarEvent;
  propData: CalendarPropData;
  propState: CalendarStateData;
}
 
export function Calendar({}: CalendarProps) {
  return <AtCalendar />;
}

npm i -g functorz

functorz --help

functorz update

- /resources/icon.webp：组件包图标，尺寸为 24x24
- /resources/组件名/icon.webp：组件图标，尺寸为 72x54
- /resources/组件名/canvas.webp：组件在画布上的预览图，尺寸为 300x200
- /resources/组件名/cover.webp：组件包在插件市场的封面图，尺寸为 200x150

{
  "description": "请在这里填写您的项目描述",
  "homepage": "请填写您的的项目预览地址",
  "category": "display",
  "platforms": ["WEB", "WECHAT"]
}