參與開源之夏 x OpenTiny 跨端跨框架 UI 元件庫貢獻，可以贏取獎金?！這份《OpenTiny 開源貢獻指南》請收好?！

Kagol發表於2023-04-16
跨端框架UI元件

大家好，我是 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 ?）

往期文章推薦

相關文章