refactor: replace useCustomSetting with inject for renderer settings

index.js

@@ -1,6 +1,6 @@
 import Renderer from './renderer/RenderMain'
 
-export { RENDERER_SETTINGS_KEY } from './renderer/renderer-settings'
+export { RENDERER_SETTINGS } from './renderer/renderer-settings'
 
 export { customElements, Mapper } from './renderer/render'
 

renderer/RenderMain.js

@@ -16,8 +16,6 @@ import Loading from './Loading.vue'
 import renderer, { parseData } from './render'
 import useContext from './useContext'
 import { setPageCss } from './pageCss'
-import { RENDERER_SETTINGS_KEY } from './renderer-settings'
-import useCustomSetting from './useCustomSetting'
 import { getPageLifeCycleFns } from './lifeCycles'
 
 export default {
@@ -39,14 +37,6 @@ export default {
       Object.keys(obj).forEach((key) => delete obj[key])
     }
 
-    // 设置 customSettings，如 Function
-    const { setCustomSettings } = useCustomSetting()
-
-    const customSettings = inject(RENDERER_SETTINGS_KEY, null)
-    if (customSettings) {
-      setCustomSettings(customSettings)
-    }
-
     const customContext = inject('customContext', null)
     if (customContext) {
       setContext({ customContext })

renderer/render.js

@@ -14,7 +14,7 @@ import { h, provide, inject } from 'vue'
 
 import { isHTMLTag, hyphenate } from '@vue/shared'
 import Notify from '@opentiny/vue-notify'
-import useCustomSetting, { DEFAULT_RENDERER_SETTINGS } from './useCustomSetting'
+import { RENDERER_SETTINGS, DEFAULT_RENDERER_SETTINGS } from './renderer-settings'
 import { applyDefaultPropsToProps } from './applyDefaultProps'
 import {
   CanvasRow,
@@ -34,8 +34,6 @@ import {
   CanvasRouterView
 } from './builtin'
 
-const { getCustomSettings } = useCustomSetting()
-
 const hyphenateRE = /\B([A-Z])/g
 export const customElements = {}
 const [JS_EXPRESSION, JS_FUNCTION] = ['JSExpression', 'JSFunction']
@@ -75,7 +73,7 @@ const isFunctionConstructor = (fn) => {
 
 // 规避创建function eslint报错
 export const newFn = (...argv) => {
-  const Fn = getCustomSettings().Function ?? DEFAULT_RENDERER_SETTINGS.Function
+  const Fn = inject(RENDERER_SETTINGS)?.Function ?? DEFAULT_RENDERER_SETTINGS.Function
 
   if (Fn && isFunctionConstructor(Fn)) {
     return new Fn(...argv)
@@ -85,7 +83,7 @@ export const newFn = (...argv) => {
 }
 
 const transformJSX = (code) => {
-  const customSettings = getCustomSettings()
+  const customSettings = inject(RENDERER_SETTINGS)
 
   if (customSettings.transformJSX) {
     return customSettings.transformJSX(code)
@@ -347,7 +345,7 @@ const generateCollection = (schema) => {
 }
 
 const getMaterial = (name) => {
-  const materials = getCustomSettings().materials || DEFAULT_RENDERER_SETTINGS.materials
+  const materials = inject(RENDERER_SETTINGS)?.materials || DEFAULT_RENDERER_SETTINGS.materials
 
   return materials?.[name]
 }
@@ -603,7 +601,7 @@ const getBindProps = (schema, scope, context) => {
   bindProps.class = bindProps.className
   delete bindProps.className
 
-  applyDefaultPropsToProps(componentName, bindProps, getCustomSettings()?.defaultPropsMap)
+  applyDefaultPropsToProps(componentName, bindProps, inject(RENDERER_SETTINGS)?.defaultPropsMap)
 
   return bindProps
 }

renderer/renderer-settings.ts

@@ -0,0 +1,17 @@
+import type { DefaultPropsMap } from './applyDefaultProps'
+import type { Component } from 'vue'
+
+export const RENDERER_SETTINGS = Symbol('RENDERER_SETTINGS')
+
+const defaultMaterials: Record<string, Component> = {}
+
+export interface IRendererSettings {
+  Function?: FunctionConstructor
+  materials?: Record<string, Component>
+  defaultPropsMap?: DefaultPropsMap
+}
+
+export const DEFAULT_RENDERER_SETTINGS: IRendererSettings = {
+  Function: Function,
+  materials: defaultMaterials
+}

src/App.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref, onMounted, provide } from 'vue'
-import SchemaRenderer, { RENDERER_SETTINGS_KEY } from '../index.js'
+import SchemaRenderer, { RENDERER_SETTINGS } from '../index.js'
 // import { CustomFunction } from './CustomFunction.js'
 
 const schema = ref({})
 
 // 支持自定义 Function 的实现，用于不支持 new Function 的场景，解析 schema 中的函数字符串时使用
-// provide(RENDERER_SETTINGS_KEY, { Function: CustomFunction })
+// provide(RENDERER_SETTINGS, { Function: CustomFunction })
 
 onMounted(async () => {
   schema.value = await import('./mock/schema.json')