feat: app state only allow json object #1443
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WalkthroughThe updates introduce enhanced JSON validation for state input in the CreateStore form, ensuring the content is a non-empty, valid, non-array object. The StateTips component now displays different tips based on a new Changes
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/plugins/state/src/StateTips.vue (1)
27-30: Consider defining constants outside the component for better maintainability.The
TIPS_TYPEconstant definition is correct, but consider moving it to a shared constants file if it's used in multiple components, or use an enum-like structure for better type safety.+// Consider moving to a shared constants file +export const TIPS_TYPE = { + PAGE: 'page', + APP: 'app' +} as const + +export type TipsType = typeof TIPS_TYPE[keyof typeof TIPS_TYPE]packages/plugins/state/src/CreateStore.vue (1)
245-253: Consider refactoring redundant validation logic.The
editorDidMountfunction contains similar editor value processing logic as the newvalidateStatefunction. Consider consolidating this logic to reduce code duplication.+const getEditorValue = () => { + return variableEditor.value.getEditor().getValue() +} + +const getCleanedEditorValue = () => { + return getEditorValue().replace(/\r\n|\s/g, '') +} + const editorDidMount = () => { - const variable = variableEditor.value - .getEditor() - .getValue() - .replace(new RegExp('\\r\\n', 'g', ''), '') - .replace(/\s/g, '') + const variable = getCleanedEditorValue() return Object.prototype.toString.call(variable) === '[object Object]' }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/plugins/state/src/CreateStore.vue(2 hunks)packages/plugins/state/src/StateTips.vue(2 hunks)packages/plugins/state/src/styles/vars.less(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/RenderMain.ts:82-88
Timestamp: 2025-01-14T08:50:50.226Z
Learning: For PR #1011, the focus is on resolving conflicts and migrating code, with architectural improvements deferred for future PRs.
Learnt from: gene9831
PR: opentiny/tiny-engine#1038
File: packages/plugins/block/index.js:24-24
Timestamp: 2025-01-14T08:42:18.574Z
Learning: In the tiny-engine project, breaking changes are documented in the changelog rather than in JSDoc comments or separate migration guides.
packages/plugins/state/src/CreateStore.vue (4)
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/application-function/global-state.ts:12-25
Timestamp: 2025-01-14T08:45:57.032Z
Learning: The code in `packages/canvas/render/src/application-function/global-state.ts` is migrated from an existing codebase and should be handled with care when making modifications.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:95-98
Timestamp: 2025-01-14T06:55:59.692Z
Learning: The tiny-select component from @opentiny/vue library ensures selected options are valid internally, requiring no additional validation in the change handler.
Learnt from: yy-wow
PR: opentiny/tiny-engine#886
File: packages/plugins/state/src/js/http.js:19-19
Timestamp: 2024-10-30T02:19:37.775Z
Learning: In the `packages/plugins/state/src/js/http.js` file, errors for the `requestGlobalState` function are handled by the user, so additional error handling is unnecessary.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/canvas-function/design-mode.ts:6-13
Timestamp: 2025-01-14T06:55:14.457Z
Learning: The code in `packages/canvas/render/src/canvas-function/design-mode.ts` is migrated code that should be preserved in its current form during the migration process. Refactoring suggestions for type safety and state management improvements should be considered in future PRs.
packages/plugins/state/src/StateTips.vue (4)
Learnt from: gene9831
PR: opentiny/tiny-engine#1233
File: packages/canvas/container/src/components/CanvasDivider.vue:184-185
Timestamp: 2025-03-20T07:20:12.221Z
Learning: In CanvasDivider.vue, even though state.verLeft and state.horizontalTop already include 'px' suffix, the CSS properties in state.dividerStyle still need to append 'px' again according to gene9831, suggesting that these state variables might be processed differently than expected when used in style binding.
Learnt from: gene9831
PR: opentiny/tiny-engine#830
File: packages/common/component/MetaChildItem.vue:50-56
Timestamp: 2024-10-15T02:45:17.168Z
Learning: In `packages/common/component/MetaChildItem.vue`, when checking if `text` is an object in the computed property `title`, ensure that `text` is not `null` because `typeof null === 'object'` in JavaScript. Use checks like `text && typeof text === 'object'` to safely handle `null` values.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/canvas-function/design-mode.ts:6-13
Timestamp: 2025-01-14T06:55:14.457Z
Learning: The code in `packages/canvas/render/src/canvas-function/design-mode.ts` is migrated code that should be preserved in its current form during the migration process. Refactoring suggestions for type safety and state management improvements should be considered in future PRs.
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:0-0
Timestamp: 2024-10-10T02:48:10.881Z
Learning: 在 `packages/toolbars/preview/src/Main.vue` 文件中，使用 `useNotify` 而不是 `console` 来记录错误日志。
🔇 Additional comments (5)
packages/plugins/state/src/styles/vars.less (1)
32-32: LGTM! CSS variable addition follows design system conventions.The new
--te-state-tip-highlight-colorvariable is properly named and references the existing design system variable, ensuring consistency across the application.packages/plugins/state/src/StateTips.vue (2)
12-24: LGTM! Well-structured conditional rendering with appropriate styling.The app-tips variant provides clear guidance about JSON object requirements with a practical example. The styling properly uses the new CSS variable for highlighting.
32-37: Props definition follows Vue 3 best practices.The props definition is correctly structured with proper typing and default value.
packages/plugins/state/src/CreateStore.vue (2)
40-40: LGTM! Proper integration with enhanced StateTips component.The
type="app"attribute correctly utilizes the new StateTips functionality to display JSON object-specific guidance.Also applies to: 44-44
189-189: Form validation rule correctly updated.The form rule properly integrates the new
validateStatefunction to enforce JSON object validation.
Comment on lines
+160
to
+185
| const validateState = (rule: any, value: string, callback: (error?: Error) => void) => { | ||
| const stateValue = variableEditor.value | ||
| .getEditor() | ||
| .getValue() | ||
| .replace(new RegExp('\\r\\n', 'g'), '') | ||
| .replace(/\s/g, '') | ||
|
|
||
| if (!stateValue || !stateValue.trim()) { | ||
| callback(new Error('状态内容不能为空')) | ||
| return | ||
| } | ||
|
|
||
| try { | ||
| const parsed = JSON.parse(stateValue) | ||
|
|
||
| // 检查是否为对象且不是数组和null | ||
| if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) { | ||
| callback(new Error('状态必须是一个JSON对象')) | ||
| return | ||
| } | ||
|
|
||
| callback() | ||
| } catch (error) { | ||
| callback(new Error('状态格式不正确，请输入有效的JSON对象')) | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Optimize validation function for better performance and maintainability.
The validation logic is correct, but there are several areas for improvement:
- Redundant editor value retrieval: The editor value is retrieved and processed multiple times
- Inefficient string processing: Multiple regex replacements could be combined
- Code duplication: Similar logic exists in
editorDidMountfunction
const validateState = (rule: any, value: string, callback: (error?: Error) => void) => {
- const stateValue = variableEditor.value
- .getEditor()
- .getValue()
- .replace(new RegExp('\\r\\n', 'g'), '')
- .replace(/\s/g, '')
+ const rawValue = variableEditor.value.getEditor().getValue()
+ const stateValue = rawValue.replace(/\r\n|\s/g, '')
if (!stateValue || !stateValue.trim()) {
callback(new Error('状态内容不能为空'))
return
}
try {
- const parsed = JSON.parse(stateValue)
+ const parsed = JSON.parse(rawValue) // Use raw value for parsing, not cleaned value
// 检查是否为对象且不是数组和null
if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) {
callback(new Error('状态必须是一个JSON对象'))
return
}
callback()
} catch (error) {
callback(new Error('状态格式不正确，请输入有效的JSON对象'))
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const validateState = (rule: any, value: string, callback: (error?: Error) => void) => { | |
| const stateValue = variableEditor.value | |
| .getEditor() | |
| .getValue() | |
| .replace(new RegExp('\\r\\n', 'g'), '') | |
| .replace(/\s/g, '') | |
| if (!stateValue || !stateValue.trim()) { | |
| callback(new Error('状态内容不能为空')) | |
| return | |
| } | |
| try { | |
| const parsed = JSON.parse(stateValue) | |
| // 检查是否为对象且不是数组和null | |
| if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) { | |
| callback(new Error('状态必须是一个JSON对象')) | |
| return | |
| } | |
| callback() | |
| } catch (error) { | |
| callback(new Error('状态格式不正确，请输入有效的JSON对象')) | |
| } | |
| } | |
| const validateState = (rule: any, value: string, callback: (error?: Error) => void) => { | |
| const rawValue = variableEditor.value.getEditor().getValue() | |
| const stateValue = rawValue.replace(/\r\n|\s/g, '') | |
| if (!stateValue || !stateValue.trim()) { | |
| callback(new Error('状态内容不能为空')) | |
| return | |
| } | |
| try { | |
| const parsed = JSON.parse(rawValue) // Use raw value for parsing, not cleaned value | |
| // 检查是否为对象且不是数组和null | |
| if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) { | |
| callback(new Error('状态必须是一个JSON对象')) | |
| return | |
| } | |
| callback() | |
| } catch (error) { | |
| callback(new Error('状态格式不正确，请输入有效的JSON对象')) | |
| } | |
| } |
🤖 Prompt for AI Agents
In packages/plugins/state/src/CreateStore.vue between lines 160 and 185,
optimize the validateState function by retrieving the editor value once and
storing it in a variable before processing. Combine the regex replacements into
a single operation to improve efficiency. Refactor the validation logic to avoid
duplication by extracting common code shared with the editorDidMount function
into a reusable helper function.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Style