Skip to content

Commit

Permalink
fix: 去掉自定义的选择框&修复React路由
Browse files Browse the repository at this point in the history
  • Loading branch information
@wjywy
wjywy committed Oct 27, 2024
1 parent 56c47d8 commit cbf9a53
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 55 deletions.
14 changes: 9 additions & 5 deletions packages/react-generator/src/generator/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
} from '../utils'
// import { validateByParse, validateByCompile } from '../utils/vue-sfc-validator'
import { traverse as traverseState, unwrapExpression, translateHookState } from '../parser/state'
import { capitalizeFirstLetter } from '../utils/uaperCase'
import { preProcess } from '../pre-processor'
import {
DEFAULT_COMPONENTS_MAP,
Expand Down Expand Up @@ -235,7 +236,7 @@ const generateReactImports = (description, moduleName, type, componentsMap) => {

const importsFromReact = [
'import * as React from "react"',
'import * as utils from "../lowcode/utils.js"',
// 'import * as utils from "../lowcode/utils.js"',
`import './${moduleName}.css'`
]

Expand Down Expand Up @@ -411,20 +412,20 @@ const generateReactCode = ({ schema, name, type, componentsMap }) => {
const shouldComponentUpdate = lifecycleMap['shouldComponentUpdate']

const stringUseEffect = `
useEffect(() => {
React.useEffect(() => {
${componentDidMount && componentDidMount['body'] ? componentDidMount['body'] : ''}
${componentWillUnmount && componentWillUnmount['body'] ? `return () => {${componentWillUnmount['body']}}` : ''}
}, [${componentDidUpdate && componentDidUpdate['params'] ? componentDidUpdate['params'] : ''}])
`

const stringUseLayoutEffect = `
useLayoutEffect(() => {
React.useLayoutEffect(() => {
${componentWillMount && componentWillMount['body'] ? componentWillMount['body'] : ''}
}, [${componentDidUpdate && componentDidUpdate['params'] ? componentDidUpdate['params'] : ''}])
`

const stringUseMemo = `
useMemo(() => {
React.useMemo(() => {
${shouldComponentUpdate && shouldComponentUpdate['body'] ? shouldComponentUpdate['body'] : ''}
}, [${shouldComponentUpdate && shouldComponentUpdate['params'] ? shouldComponentUpdate['params'] : ''}])
`
Expand All @@ -434,10 +435,11 @@ const generateReactCode = ({ schema, name, type, componentsMap }) => {

console.log(arrowMethods.join('\n'), 'arrowMethod>>>>>>')

const componentName = capitalizeFirstLetter(name)
// 生成模板
const result = `${imports.join('\n')}
export default ${name} = () => {
const ${componentName} = () => {
${statement}
${getters.join('\n')}
Expand All @@ -456,6 +458,8 @@ const generateReactCode = ({ schema, name, type, componentsMap }) => {
</>
)
}
export default ${componentName}
`

return result
Expand Down
28 changes: 23 additions & 5 deletions packages/react-generator/src/plugins/genRouterPlugin.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { mergeOptions } from '../utils/mergeOptions'
import { capitalizeFirstLetter } from '../utils/uaperCase'

const defaultOption = {
fileName: 'index.jsx',
Expand Down Expand Up @@ -46,28 +47,45 @@ function genRouterPlugin(options = {}) {
const importSnippet =
'import { Routes, Route } from "react-router-dom"\n import { useLazy } from "../hooks/uselazy"'

const lazyPage = routesList.map(({ fileName, filePath }) => {
console.log(filePath)
const lazyPage = routesList.map(({ fileName }) => {
if (!fileName) {
return ''
}

const componentName = capitalizeFirstLetter(fileName)

return `
const ${fileName} = useLazy(import("@views/${fileName}/${fileName}.jsx"))
const ${componentName} = useLazy(import("@/views/${fileName}/${fileName}.jsx"))
`
})

let homePage = ''
let temp = ''
for (const { fileName, path, redirect } of routesList) {
if (redirect) {
temp = redirect
continue
}

if (fileName) {
if (temp === path) {
homePage = capitalizeFirstLetter(fileName)
}
}
}

const routes = routesList.map(({ fileName, path, redirect }) => {
let pathAttr = `path='${path}'`
let redirectAttr = ''
let componentAttr = ''

if (redirect) {
redirectAttr = `redirect='${redirect}'`
redirectAttr = `redirect='${redirect}' element={<${homePage} />}`
}

if (fileName) {
componentAttr = `element={${fileName}}`
const fileUpperName = capitalizeFirstLetter(fileName)
componentAttr = `element={<${fileUpperName} />}`
}

const ans = `<Route ${pathAttr} ${componentAttr} ${redirectAttr}></Route>`
Expand Down
4 changes: 4 additions & 0 deletions packages/react-generator/src/utils/uaperCase.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const capitalizeFirstLetter = (string) => {
if (!string) return string // 检查空字符串
return string.charAt(0).toUpperCase() + string.slice(1)
}
54 changes: 9 additions & 45 deletions packages/toolbars/generate-vue/src/Main.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
<span class="icon" @click="generate">
<svg-icon :name="icon"></svg-icon>
</span>
<tiny-select title="请选择出码产物" :options="state.options" v-model="state.value" size="small"
style="width: 80px"></tiny-select>
</template>
</tiny-popover>
<generate-file-selector :visible="state.showDialogbox" :data="state.saveFilesInfo" @confirm="confirm"
Expand All @@ -15,7 +13,7 @@

<script>
import { reactive } from 'vue'
import { Popover, Select } from '@opentiny/vue'
import { Popover } from '@opentiny/vue'
import {
getGlobalConfig,
useBlock,
Expand All @@ -34,12 +32,10 @@ import { generateApp as generateReactApp } from '../../../react-generator/src/in
import { fetchMetaData, fetchPageList, fetchCode as fetchBlockSchema } from './http'
import FileSelector from './FileSelector.vue'
// import { generateVuePage } from './generateCode'
export default {
components: {
TinyPopover: Popover,
TinySelect: Select,
GenerateFileSelector: FileSelector
},
props: {
Expand Down Expand Up @@ -71,7 +67,9 @@ export default {
]
})
const curFramework = getGlobalConfig()?.dslMode
const getParams = () => {
// console.log(useCanvas().canvasApi.value, 'value>>>>>')
const { getSchema } = useCanvas().canvasApi.value
const params = {
framework: getGlobalConfig()?.dslMode,
Expand Down Expand Up @@ -155,8 +153,7 @@ export default {
const params = getParams()
const { id } = useEditorInfo().useInfo()
const promises = [
params.framework === 'Vue' ? useHttp().get(`/app-center/v1/api/apps/schema/${id}`) : fetchBlockSchema(params),
// state.value === 'React' ? fetchBlockSchema(params) : useHttp().get(`/app-center/v1/api/apps/schema/${id}`),
curFramework === 'Vue' ? useHttp().get(`/app-center/v1/api/apps/schema/${id}`) : fetchBlockSchema(params),
fetchMetaData(params),
fetchPageList(params.app)
]
Expand All @@ -166,14 +163,7 @@ export default {
}
const [appData, metaData, pageList, dirHandle] = await Promise.all(promises)
// 如果是React，其appData数据的格式与Vue中的appData不一致，React是（一般有两个文件，第一个文件是Jsx文件，第二个文件是Css文件）：
// error: Array<T
// filePath: string
// index: boolean
// panelName: string // 文件名
// panelType: string // 出码类型
// panelValue: string // 文件内容
// prettierOpts: Object // 格式化参数
const pageDetailList = await getAllPageDetails(pageList)
const blockSet = new Set()
Expand Down Expand Up @@ -233,43 +223,17 @@ export default {
}
}
})
),
)
}
const allSchema = {
Vue: vueSchema,
React: reactSchema
}
// const appSchema = {
// // metaData 包含dataSource、utils、i18n、globalState
// ...metaData,
// // 页面 schema
// pageSchema: pageDetailList.map((item) => {
// const { page_content, ...meta } = item
// return {
// ...page_content,
// meta: {
// ...meta,
// router: meta.route
// }
// }
// }),
// blockSchema,
// // 物料数据
// // componentsMap: [...(appData.componentsMap || [])],由于React在调用fetchcode的时候就已经调用了react-dsl里面的函数，
// // 所以在这直接调用./generateCode里面的函数直接格式化返回的React的代码就可以了
// componentsMap: [...(appData.componentsMap || [])],
// meta: {
// ...(appData.meta || {})
// },
// reactData: state.value === 'React' ? [...(appData || [])] : []
// }
state.instance = state.value === 'React' ? generateReactApp() : generateVueApp()
const res = await state.instance.generate(await allSchema[state.value])
state.instance = curFramework === 'React' ? generateReactApp() : generateVueApp()
const res = await state.instance.generate(await allSchema[curFramework])
const { genResult = [] } = res || {}
const fileRes = genResult.map(({ fileContent, fileName, path, fileType }) => {
Expand Down

0 comments on commit cbf9a53

Please sign in to comment.