2

参与开源之夏 x OpenTiny 跨端跨框架 UI 组件库贡献，可以赢取奖金🏆！这份《OpenTiny...

 1 year ago
source link: https://www.cnblogs.com/kagol/p/17324458.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

参与开源之夏 x OpenTiny 跨端跨框架 UI 组件库贡献，可以赢取奖金🏆！这份《OpenTiny 开源贡献指南》请收好🎁！

大家好，我是 Kagol。

近期有几位朋友在 OpenTiny 技术交流群里询问我们在开源之夏(OSPP)的项目，希望能提前做一些准备工作。

6291681574406_.pic.jpg

这里给大家简单介绍下开源之夏。

开源之夏是由中科院软件所“开源软件供应链点亮计划”发起并长期支持的一项暑期开源活动，旨在鼓励在校学生积极参与开源软件的开发维护，培养和发掘更多优秀的开发者，促进优秀开源软件社区的蓬勃发展，助力开源软件供应链建设。

开源之夏联合国内外开源社区，针对重要开源软件的开发与维护提供项目任务，面向全球高校学生开放报名，中选学生将在项目资深开发者（项目导师）的指导下，参与开源贡献，完成开发工作并贡献给开源社区。

参与开源之夏，你可以：

  • 零距离体验顶级开源项目
  • 跟着技术大牛提升研发能力
  • 用成果赢取丰厚奖金和证书（基础项目 8000 奖金🏆 / 进阶项目 12000 奖金🏆）
image.png

开源之夏：https://summer-ospp.ac.cn/

OpenTiny 开源之夏项目：https://summer-ospp.ac.cn/org/orgdetail/36ed1f70-33b1-47c2-a63c-d3faea6b73fc

以下是开源之夏的活动流程

image.png

我能提前做哪些准备呢

大家最关心的两个问题是：

  • 我能参与 OpenTiny 的什么项目
  • 为了更好地完成项目，我能提前做哪些准备工作

OpenTiny 的开源之夏项目目前正在紧锣密鼓地筹备当中，预计下周将发布出来。

在这之前，大家可以做以下准备：

  • 了解 Git 使用和开源贡献基本流程
  • 加入 OpenTiny 社区，熟悉 OpenTiny 项目
  • 通过解决一些小问题和实现一些简单的需求，提前了解 OpenTiny 开发流程、项目结构、实现原理

OpenTiny 基本介绍

OpenTiny 是一套华为云出品的企业级 UI 组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。

它主要有以下亮点特色：

  • TinyVue：一套代码同时支持 Vue2 / Vue3，支持 PC / Mobile
  • 包含 80 多个功能丰富的组件，并提供多个实用的特色组件
  • TinyNG：提供 Angular 组件库
  • TinyPro：提供开箱即用的中后台模板
  • TinyCLI：提供覆盖前端开发全流程的 CLI 工具
  • TinyTheme：提供一款让你的 Web 应用风格更多变的主题配置系统

OpenTiny 基本使用

了解一个开源项目最好的方式就是用用看，感受下这个项目能干什么。

假设你已经有了一个 Vue3 项目

npm i @opentiny/vue@3

App.vue 中引入和使用组件

<script setup lang="ts">
// 1. 引入 TinyVue 组件
import { Button, Alert } from '@opentiny/vue'
</script>

<template>
  <!-- 2. 使用 TinyVue 组件 -->
  <Button>OpenTiny</Button>
  <Alert description="Hello OpenTiny"></Alert>
</template>

OpenTiny 其他开源项目的使用可以参考相应的文档：

启动 OpenTiny 项目

要想参与开源项目贡献，就必须先把项目在本地启动起来，才能进行代码调试。

还是以 TinyVue 为例

pnpm i
pnpm dev

OpenTiny 其他项目请参考相应的贡献指南文档：

OpenTiny 目录结构和基本原理

能把项目启动起来，只是参与贡献的起步阶段，等于是迈出了第一步，接下来就需要花很长的时间熟悉项目，并通过持续解决问题深入项目，从而为后续参与更大的贡献打好坚实的基础。

我们来看下 TinyVue 项目的基本目录结构。

├── packages        // 核心子包
|  ├── renderless   // 组件逻辑层
|  ├── theme        // PC 组件样式
|  ├── theme-mobile // Mobile 组件样式
|  ├── vue          // Vue 组件模板层
|  ├── vue-common   // 公共适配层，实现跨框架的核心
|  ├── vue-icon     // 图标
|  └── vue-locale   // 国际化
├── examples        // 组件 demo / api 文档
|  ├── docs
├── internals                    // 内部构建、发布脚本，配套插件，项目规范
|  ├── cli                       // 构建、发布脚本
|  ├── playwright-config         // 集成测试
|  ├── unplugin-virtual-template // 虚拟模板插件
|  ├── vue-test-utils            // 单元测试
|  └── vue-vite-import           // 按需引入插件
├── pnpm-workspace.yaml
├── tsconfig.json
├── CHANGELOG.md
├── CONTRIBUTING.md
├── CONTRIBUTING.zh-CN.md
├── LICENSE
├── README.md
├── README.zh-CN.md
└── package.json

其中最核心的就是 packages 子包目录，这个目录主要包含以下关键子目录：

  • renderless：组件逻辑层，这是框架无关的部分，里面封装了组件的数据和方法
  • vue ：组件模板层，每个框架需要有一套模板，因为不同框架的模板语法不同
  • theme ：组件样式层，这也是框架无关的，组件样式并不是写死的，而是抽成了CSS变量，方便主题定制
  • vue-common：框架适配层，实现跨框架的关键，每个框架需要有一套适配层

OpenTiny 采用组件与框架分离的设计理念（Renderless 架构），将组件拆分为三个构成部分：组件模板、组件样式和组件逻辑，并针对 Vue2 和 Vue3 实现了一个版本适配器，抹平 Vue2 和 Vue3 的差异，从而实现一套代码同时支持 Vue2 和 Vue3。

这样不管是 Vue2 项目还是 Vue3 项目，使用组件的方式都是一样的，可以实现无缝切换，可以极大地降低 Vue2 迁移到 Vue3 的成本和风险。

如何解决 Issue，参与实际贡献

知道得再多，不实际写点代码，参与实际的贡献，终究还是停留在纸面上，只有解决开源项目的实际用户问题，才能不断积累开源贡献经验，为开源项目创造价值。

我们以两个实际的 Issue 为例，一个是 bug，一个是新特性，带大家一起通过解决 Issue 积累开源贡献经验。

解决问题三部曲：

先来看第一个问题，先理解这个问题，并复现出来。

这个问题很容易复现，使用 TinyLine 组件时，配置以下 settings 不生效。

<template>
  <tiny-line ... :settings="settings"></tiny-line>
</template>

<script>
const settings = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      // not work
      lineStyle: {
        color: '#ffa147',
        width: 2,
        type: 'dashed'
      }
    }
  }
}
</script>

问题复现之后，就是定位问题，找到问题的根因。

经过一番调试，最终发现 getLineTooltip 方法将 tooltip 属性都过滤掉了，只保留了 formatter / trigger 两个属性。所以用户配置 axisPointer 这个属性自然就是不生效的。

代码：chart-line/index.ts#L138 getLineTooltip

问题根因找到之后，就是寻找解决方案啦。

最终解决的方法是将经过内部封装和处理的 ECharts options 属性后面加一层用户传入的 settings 属性覆盖。

return options

->

return { ...options, ...settings }

最终解决的 PR：

另一个 Issue 解决的思路也是一样的，就不再赘述，最终解决的 PR 如下：

欢迎添加小助手微信：opentiny-official 不迷路，我们每周五20点会在村长直播间，与大家分享 OpenTiny 开源项目的更多内容，与大家一起成长！

本文主要手把手教大家参与 OpenTiny 开源项目。

从阅读项目的 README 文档了解项目是什么，到尝试使用 OpenTiny，再到通过阅读贡献指南文档，将项目启动起来，再到介绍 OpenTiny 项目目录和基本原理，最后是通过带大家分析和解决项目中实际的用户问题，走完整个贡献的流程。

为大家后续参与 OpenTiny 更多贡献做一个指引和入门。

TinyVue 招募贡献者啦

如果你对我们的跨端跨框架组件库 TinyVue 感兴趣，欢迎参与到我们的开源社区中来，一起将它建设得更好！👏👏

参与 TinyVue 组件库建设，你将收获：

直接的价值：

  • 通过打造一个跨端、跨框架的组件库项目，学习最新的 Monorepo + Vite + Vue3 + TypeScript 技术
  • 学习从 0 到 1 搭建一个自己的组件库的整套流程和方法论，包括组件库工程化、组件的设计和开发等
  • 为自己的简历和职业生涯添彩，参与过优秀的开源项目，这本身就是受面试官青睐的亮点
  • 结识一群优秀的、热爱学习、热爱开源的小伙伴，大家一起打造一个伟大的产品
  • 参与开源之夏，赢取丰厚奖金

长远的价值：

  • 打造个人品牌，提升个人影响力
  • 培养良好的编码习惯
  • 获得华为云 OpenTiny 开源社区的荣誉&认可和定制小礼物
  • 成为 PMC & Committer 之后还能参与 OpenTiny 整个开源生态的决策和长远规划，培养自己的管理和规划能力
    未来有更多机会和可能

欢迎广大的开发者参与到我们 TinyVue 的开源项目中来👏

我需要你.png

如果你对我们 OpenTiny 的开源项目感兴趣，欢迎添加小助手微信：opentiny-official，拉你进群，一起交流前端技术，一起玩开源。

OpenTiny 官网：https://opentiny.design/

OpenTiny 仓库：https://github.com/opentiny/

Vue 组件库：https://github.com/opentiny/tiny-vue（欢迎 Star 🌟）

Angular 组件库：https://github.com/opentiny/ng（欢迎 Star 🌟）

CLI 工具：https://github.com/opentiny/tiny-cli（欢迎 Star 🌟）

往期文章推荐


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK