Merge pull request #27 from WTFAcademy/dev

Dev

.changeset/dirty-boxes-sneeze.md

@@ -0,0 +1,5 @@
+---
+"solive-docusaurus-theme-code": patch
+---
+
+fix boolean prop not coerce transform

.changeset/new-ravens-hammer.md

@@ -0,0 +1,5 @@
+---
+"solive-core": patch
+---
+
+add disableValidation and monacoEditorOptions

.changeset/strong-kids-design.md

@@ -0,0 +1,5 @@
+---
+"solive-docusaurus-theme-code": patch
+---
+
+add simple mode

.eslintrc.js

@@ -71,6 +71,7 @@ module.exports = {
     'react/require-default-props': 'warn',
     'react/no-unused-prop-types': 'warn',
     'jsx-a11y/click-events-have-key-events': 'warn',
+    'react/jsx-no-bind': 'off',
 
     // import 相关
     'import/prefer-default-export': 'off',

apps/doc/docs/expansion/docusaurus-plugins/guide.mdx

@@ -104,7 +104,7 @@ contract Storage {
 ```
 ````
 
-### 展示结果：
+5. 你将看到：
 
 ```solidity solive height=500px
   /**
@@ -141,3 +141,26 @@ contract Storage {
       }
   }
 ```
+
+### 极简模式
+
+在部分场景下可能只需要展示代码块，而不需要编辑器，你可以使用极简模式（这将关闭语法校验，部署，编译，文件导航功能）：
+
+````md
+  ```solidity solive simple=true height=160px
+    // SPDX-License-Identifier: MIT
+    pragma solidity ^0.8.4;
+    contract HelloWeb3{
+        string public _string = "Hello Web3!";
+    }
+  ```
+````
+
+```solidity solive simple=true height=160px
+
+   // SPDX-License-Identifier: MIT
+   pragma solidity ^0.8.4;
+   contract HelloWeb3{
+       string public _string = "Hello Web3!";
+   }
+```

apps/doc/docs/expansion/docusaurus-plugins/props.mdx

@@ -12,6 +12,7 @@ hide_title: true
 | --- | --- | --- | --- |
 | width | string | 90% | 容器宽度 |
 | height | string | 500px | 容器高度 |
+| simple | boolean | false | 是否极简模式 |
 | consoleOpen | boolean | true | 是否显示控制台 |
 | consoleTriggerControl | boolean | false | 是否显示控制台触发按钮 |
 | consoleDefaultVisible | boolean | false | 控制台默认是否可见 |

apps/doc/docs/solive-props.mdx

@@ -14,6 +14,8 @@ hide_title: true
 | modelInfos | 文件信息 | array | [] | ✅ |
 | height | 高度 | string | - | ✅ |
 | rounded | 窗口弧度 | string | 12px | - |
+| disableValidation | 是否禁用校验 | boolean | false | - |
+| monacoEditorOptions | monaco编辑器配置 | (参考 [IStandaloneEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html)) | - | - |
 | fileNav | 顶部文件导航 | TFileNav | (参考 [TFileNav](/docs/solive-props#tfilenav)) | - |
 | console | 日志块 | TConsole | (参考 [TConsole](/docs/solive-props#tconsole)) | - |
 | deploy | 部署块 | TDeploy | (参考 [TDeploy](/docs/solive-props#tdeploy)) | - |

packages/core/src/editor/index.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Allotment } from 'allotment';
 import { CommandLineIcon } from '@heroicons/react/24/outline';
 import merge from 'lodash/merge';
+import BaseMonaco from 'monaco-editor';
 
 import { ModelInfoType } from '../types/monaco';
 import FileNavBar from '../components/FileNavBar';
@@ -40,10 +41,12 @@ export type TEditorProps = {
   id: string;
   modelInfos: ModelInfoType[];
   height: string;
+  disableValidation?: boolean;
   fileNav?: TFileNavProps;
   rounded?: string;
   console?: TConsoleProps;
   deploy?: TDeployProps;
+  monacoEditorOptions?: BaseMonaco.editor.IStandaloneEditorConstructionOptions;
   // onSuccess?: Dispatch<SetStateAction<number>>;
   // onFailure?: () => void;
   // onCompile?: () => void;
@@ -79,6 +82,7 @@ function Main(props: TEditorProps) {
     fileNav = {},
     rounded = '12px',
     modelInfos,
+    ...others
   } = props;
   const consoleProps = merge(DefaultConsoleProps, console);
   const deployProps = merge(DefaultDeployProps, deploy);
@@ -123,7 +127,7 @@ function Main(props: TEditorProps) {
                   }}
                   />
                 )}
-                <MonacoEditor modelInfos={modelInfos} />
+                <MonacoEditor modelInfos={modelInfos} {...others} />
               </Allotment.Pane>
               {consoleProps.open && (
                 <Allotment.Pane

packages/core/src/editor/monacoEditor.tsx

@@ -21,9 +21,11 @@ loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/[email protected]/
 
 interface IProps {
   modelInfos: ModelInfoType[];
+  disableValidation?: boolean;
+  monacoEditorOptions?: BaseMonaco.editor.IStandaloneEditorConstructionOptions;
 }
 
-function App({ modelInfos }: IProps) {
+function App({ modelInfos, disableValidation = false, monacoEditorOptions = {} }: IProps) {
   const {
     stateRef, dispatch, actions, id,
   } = useEditor();
@@ -46,7 +48,9 @@ function App({ modelInfos }: IProps) {
     actions.updateCodeParserLoading(false);
 
     registerCommandsAndActions(monaco, editor, dispatch, stateRef.current);
-    registerListeners(editor, editorApiRef.current, stateRef.current);
+    // TODO 目前监听仅有处理语法校验问题，后续状态控制需要特殊处理
+    // eslint-disable-next-line no-unused-expressions
+    !disableValidation && registerListeners(editor, editorApiRef.current, stateRef.current);
   }
 
   function handleEditorBeforeMount(monaco: Monaco) {
@@ -113,6 +117,8 @@ function App({ modelInfos }: IProps) {
         minimap: {
           enabled: false,
         },
+        fontSize: 14,
+        ...monacoEditorOptions,
       }}
     />
   );

packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx

@@ -11,6 +11,10 @@ import resolveMeta from '../utils/resolve-meta';
 import transformModel from '../utils/transform-model';
 
 const PropsInfo = {
+  simple: {
+    type: 'boolean',
+    default: false,
+  },
   width: {
     type: 'string',
     default: '90%',
@@ -47,30 +51,50 @@ const PropsInfo = {
 
 function SoliveCodeBlock(props: SoliveCodeBlockProps) {
   const { metastring, children } = props;
-  const allProps = matchProps(metastring?.split('solive')[1] || '', PropsInfo);
+  const allProps = useMemo(() => matchProps(metastring?.split('solive')[1] || '', PropsInfo), [metastring]);
 
   const id = useMemo(() => uuidv4(), []);
   const modelInfos = useMemo(() => transformModel(resolveMeta(children)), [children]);
 
+  const state = useMemo(() => {
+    if (allProps.simple) {
+      return {
+        height: allProps.height,
+        id,
+        modelInfos,
+        fileNav: { open: false },
+        console: { open: false },
+        deploy: { open: false },
+        disableValidation: true,
+      };
+    }
+
+    return {
+      fileNav: {
+        open: allProps.fileNavOpen,
+      },
+      console: {
+        defaultVisible: allProps.consoleDefaultVisible,
+        open: allProps.consoleOpen,
+        triggerControl: allProps.consoleTriggerControl,
+      },
+      deploy: {
+        defaultVisible: allProps.deployDefaultVisible,
+        open: allProps.deployOpen,
+      },
+      height: allProps.height,
+      id,
+      modelInfos,
+    };
+  }, [
+    allProps,
+    id,
+    modelInfos,
+  ]);
+
   return (
     <div style={{ width: allProps.width, maxWidth: '800px', margin: 'auto' }}>
-      <Editor
-        fileNav={{
-          open: allProps.fileNavOpen,
-        }}
-        console={{
-          defaultVisible: allProps.consoleDefaultVisible,
-          open: allProps.consoleOpen,
-          triggerControl: allProps.consoleTriggerControl,
-        }}
-        deploy={{
-          defaultVisible: allProps.deployDefaultVisible,
-          open: allProps.deployOpen,
-        }}
-        height={allProps.height}
-        id={id}
-        modelInfos={modelInfos}
-      />
+      <Editor {...state} />
     </div>
   );
 }

packages/docusaurus-plugin/src/theme/utils/match-props.ts

@@ -39,7 +39,7 @@ export const matchProps = (metaString: string, propsInfo: TPropsInfo): TResultPr
       const key = groups.key.trim();
       const value = groups.value1 || groups.value2 || groups.value3;
       if (propsInfo[key]) {
-        props[key] = value;
+        props[key] = coerceValue(value, propsInfo[key].type);
       }
     }
   }