[UI] headless UI

開發與深入原始碼

• 到 GitHub headlessui 的 repo 將專案 clone 下來

$ cd headlessui
$ yarn
$ cd packages/@headlessui-react
$ yarn run playground

這時會透過 next server 啟動一個 playground 的頁面。

打開編輯器進到你想了解原始碼的元件（例如 /pages/dialog/dialog.tsx），把 import 的路徑從 @headless/react 改成 ../../src，也就是原始碼的位置：

diff --git a/packages/@headlessui-react/pages/dialog/dialog.tsx b/packages/@headlessui-react/pages/dialog/dialog.tsx
index 8e3f055..6ca72c0 100644
--- a/packages/@headlessui-react/pages/dialog/dialog.tsx
+++ b/packages/@headlessui-react/pages/dialog/dialog.tsx
@@ -1,5 +1,5 @@
 import React, { useState, Fragment } from 'react'
-import { Dialog, Menu, Portal, Transition } from '@headlessui/react'
+import { Dialog, Menu, Portal, Transition } from '../../src'
 import { usePopper } from '../../playground-utils/hooks/use-popper'

 function classNames(...classes) {

接著進到元件原始碼的地方（例如，src/components/dialog/dialog.tsx），修改程式碼後，即可在 playground 的頁面看到對應的改變。