Velocity Builder - Figma plugin 影片心得

1. 支援的 CSS 使用？
2. 會影響設計師的工作職責嗎？（e.g. 像是需要對 Tailwind 或 CSS-in-JS 有多少瞭解？）
3. 如何根據商業邏輯調整「UI 設計」與「邏輯切割」？
4. 預估會如何使用？是 Figma plugin 嗎？

通用各種 Framework & CSS 撰寫方式

• 可以直接在 prompt 提出多方面的改善
• prompt 甚至可以完全靠滑鼠輸出「改善的需求」，UI 上會提供建議
• Pulgin 可以整合 builder.io 的開發 dev web (可以想像像 Storybook 會 build 一個網站)，可以讓不同 department 的人「使用非 coding 的方式」同步修改

轉化 mitosis 成各種 Framework 的 component

1. 需要有固定格式：

   1. export method 固定： export default function Component
   2. props 如果直接解構會 parse 錯誤
   3. mitosis 的 component 固定要為 Component.lite.(js|jsx|tsx)

2. 提供各種 hook 來產生對應的互動行為

   1. 以 React 來說，要做到 ref 的綁定也有類似的 API
   2. onMount 會對應到 沒有 dependencies 的 array、 onUpdate 會對應到有特定 dependencies 的 array
   3. useStore 的每一個 object 如果是 primitive value，則會被當作 state，如果是 get 或 function，會被當作 function

3. 官方有提供 ESLint 來確保寫出的 framework component 或 mitosis component 能有效被轉換

嘗試 mitosis 轉換出 React Component：

React hook 的使用時機很看重開發者的判斷，它無法很清楚知道 state 要如何 update；目前在支援 useMemo (issue) 或 useCallback 上還不齊全，期待未來有更符合 React 做 reactive 和 performance 處理的能力。

// src/components/Person.lite.tsx
function Person() {
    const state = useStore({
        name: 'Builder',
        info: {
            name: '',
            age: 0
        }
    })
    
    function updateState(name:string,age:number) {
        state.info.name = name
        state.info.age = age
    }
    
    onUpdate(()=>{
        console.log(state.name)
        updateState(state.name, 30)
    },[state.name])
    
    return <input type='text' onChange={(e)=>{state.name = e.target.value}}/>
}

// output/react/src/components
"use client";
import * as React from "react";
import { useState, useEffect } from "react";

function Person(props) {
  const [name, setName] = useState(() => "Builder");

  const [info, setInfo] = useState(() => ({
    name: "",
    age: 0,
  }));

  // 沒有機制判斷需不需要需要 useCallback，因此會有框架差異
  function updateState(name, age) {
    // 沒有正確使用 hook
    info.name = name;
    info.age = age;
  }

  useEffect(() => {
    console.log(name);
    updateState(name, 30);
  }, [name]);

  return (
    <input
      type="text"
      onChange={(e) => {
        setName(e.target.value);
      }}
    />
  );
}

export default Person;