React實時預覽react-live原始碼解析

2022-08-15 14:01:45

引言

react-live 是一個 react 的實時編輯器，可直接編輯 react 程式碼，並實時預覽。可以看下官方的預覽圖：

src
├── components
│   ├── Editor
│   │   └── index.js
│   └── Live
│       ├── LiveContext.js
│       ├── LiveEditor.js
│       ├── LiveError.js
│       ├── LivePreview.js
│       ├── LiveProvider.js
│       └── LiveProvider.test.js
├── constants
│   └── theme.js
├── hoc
│   └── withLive.js
├── index.js
└── utils
    ├── test
    │   ├── errorBoundary.test.js
    │   ├── renderer.js
    │   └── transpile.test.js
    └── transpile
        ├── errorBoundary.js
        ├── evalCode.js
        ├── index.js
        └── transform.js

原始碼解讀

輸入內容

先看下匯出內容，包括：

Editor：編輯器
LiveProvider：實時編輯環境的 Provider，Context.Provider
LiveEditor：實時編輯上下文的編輯器
LiveError：實時編輯上下文的報錯
LivePreview：實時編輯上下文的預覽
LiveContext：實時編輯的 Context
withLive：實時編輯上下文的 HOC

檔案結構和元件拆分一目瞭然。

Provider

先看下 Provider，它提供了以下內容：

element：實時編輯輸出的元素
error：當前的報錯資訊
code：當前編輯的程式碼
language：程式碼語言
theme：程式碼編輯器主題
disabled：是否禁用
onError：報錯的回撥
onChange：程式碼編輯時的回撥

Provider 用來收集程式碼變更，然後通過 transpileAsync 將程式碼編譯生成元件範例：

function transpileAsync(newCode) {
    const errorCallback = error => {
        setState({ error: error.toString(), element: undefined });
    };
    try {
        const transformResult = transformCode ? transformCode(newCode) : newCode;
        return Promise.resolve(transformResult)
            .then(transformedCode => {
                const renderElement = element => setState({ error: undefined, element });
                // Transpilation arguments
                const input = {
                    code: transformedCode,
                    scope
                };
                if (noInline) {
                    setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
                    renderElementAsync(input, renderElement, errorCallback);
                } else {
                    renderElement(generateElement(input, errorCallback));
                }
            })
            .catch(errorCallback);
    } catch (e) {
        errorCallback(e);
        return Promise.resolve();
    }
}

renderElementAsync 可以先無視，主要是用於 noInline 模式下呼叫 render 進行渲染，邏輯與非 noInline 模式下類似。

generateElement

實時預覽的核心部分就在這裡了，它會將程式碼先進行編譯，然後執行程式碼，取得返回值。

const generateElement = ({ code = '', scope = {} }, errorCallback) => {
    // NOTE: Remove trailing semicolon to get an actual expression.
    const codeTrimmed = code.trim().replace(/;$/, '');
    // NOTE: Workaround for classes and arrow functions.
    const transformed = transform(`return (${codeTrimmed})`).trim();
    return errorBoundary(evalCode(transformed, { React, ...scope }), errorCallback);
};

程式碼如上，它會先去掉頭尾空白，然後去掉結尾的分號，這一步是為了下一步的 return 拼接能夠正常返回。通過 return 拼接讓 react-live 能夠支援下述語法直接渲染：

直接寫一個匿名函數：

() => <h3>So functional. Much wow!</h3>;

直接寫 jsx：

<h3>Hello World!</h3>

單 class 元件：

class Comp extends React.Component {
    render() {
        return <center>component</center>;
    }
}

不過也導致了一定的學習成本，如果寫多個函數，多個元件，巢狀等情況下會讓人覺得語法很奇怪。

transform 就是將程式碼通過 sucrase 進行轉譯，處理 jsx、class 這些語法，可以理解為通過 babel 轉譯。

早期的 react-live 通過 buble 進行轉譯，能夠支援 jsx 註釋，現在由於 sucrase 不支援 jsx 註釋，所以新版無法使用 jsx 註釋來控制 jsx 渲染引擎。

/** @jsx mdx */
// 新版上述註釋會失效

隨後將轉譯的程式碼通過 evalCode 轉換為 React element，此處會將 scope 和 React 傳入 evalCode 中。

const evalCode = (code, scope) => {
    const scopeKeys = Object.keys(scope);
    const scopeValues = scopeKeys.map(key => scope[key]);
    return new Function(...scopeKeys, code)(...scopeValues);
};

evalCode 中使用 new Function 來建構函式，scope 就是在這裡作為引數進行注入。如果對 new Function 不理解的可以看我之前一篇關於 JS 沙箱的文章。

errorBoundary 則是一個簡單的 HOC，用來捕獲生成的元件執行時的錯誤資訊，通過 errorCallback 丟擲。

const errorBoundary = (Element, errorCallback) => {
    return class ErrorBoundary extends Component {
        componentDidCatch(error) {
            errorCallback(error);
        }
        render() {
            return typeof Element === 'function' ? <Element /> : React.isValidElement(Element) ? Element : null;
        }
    };
};

上面就是 react-live 能夠實時預覽的核心程式碼了。下面再看下其它幾個元件，都比較簡單。

其他元件

LivePreview 會接受 Provider 中的 Element，將其渲染。

LiveError 接受 Provider 中的 error 進行渲染。

LiveEditor 則是接收 Provider 的 code、language、theme、disabled、onChange，提供編輯功能。

它的編輯器則是通過 useEditable 編輯，Prism 進行程式碼高亮。

總結

上述便是 react-live 的核心程式碼，內容並不多，通過 sucrase 實時編譯程式碼，然後通過 new Function 建構函式注入 scope 來生成 element 實現實時預覽，設計上通過拆離 Editor、Error、Preview 三部分，可以讓使用者自由組合元件的位置、樣式。

以上就是React實時預覽react-live原始碼解析的詳細內容，更多關於react live實時預覽的資料請關注it145.com其它相關文章！