✨ feat: migrate FlexBasic to web component implementation #441
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
- Refactor FlexBasic component into a web component, FlexBasicElement, with shadow DOM support. - Introduce CSS variables for flexible styling and layout management. - Update index to export new web component and its definition function. - Remove legacy FlexBasic implementation from FlexBasic.tsx. Signed-off-by: Innei <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Reviewer's GuideReplaces the React-based FlexBasic component with a custom element implementation (FlexBasicElement) backed by a shadow-DOM-based web component, wiring all previous layout props through attributes and CSS custom properties, and updates exports and global typing to support the new element and Vite raw CSS imports. Sequence diagram for defining and using FlexBasicElementsequenceDiagram
actor Developer
participant ReactApp
participant Browser
participant CustomElementsRegistry as customElements
participant FlexBasicElement
Developer->>ReactApp: Import FlexBasic (NativeFlexBasicElement)
ReactApp->>Browser: Render <lobe-flex ...> in DOM
Note over Browser,CustomElementsRegistry: defineFlexBasicElement() has registered lobe-flex
Browser->>CustomElementsRegistry: Lookup constructor for tag lobe-flex
CustomElementsRegistry-->>Browser: FlexBasicElement
Browser->>FlexBasicElement: new FlexBasicElement() and connectedCallback()
FlexBasicElement->>FlexBasicElement: attachShadow({mode:open})
FlexBasicElement->>FlexBasicElement: create style, hostStyle, container, slot
FlexBasicElement->>FlexBasicElement: #sync() apply CSS vars and classes
Developer->>ReactApp: Update props on FlexBasic
ReactApp->>Browser: Update attributes on <lobe-flex>
Browser->>FlexBasicElement: attributeChangedCallback()
FlexBasicElement->>FlexBasicElement: #sync() recompute layout CSS variables
Class diagram for FlexBasicElement web component implementationclassDiagram
class HTMLElement
class FlexBasicProps
class FlexBasicElement {
+static AttrName[] observedAttributes
-ShadowRoot #shadow
-HTMLDivElement #container
+connectedCallback() void
+attributeChangedCallback() void
-#sync() void
}
class Utils {
+getCssValue(value)
+getFlexDirection(direction, horizontal)
+isHorizontal(direction, horizontal)
+isSpaceDistribution(justifyContent)
}
class AttributeParsers {
+parseBooleanAttr(value) boolean
+parseMaybeNumber(value) number|string
+readStringAttr(value) string
}
class FlexBasicExports {
+defineFlexBasicElement(tagName) void
+NativeFlexBasicElement FC_FlexBasicProps
}
FlexBasicElement --|> HTMLElement
FlexBasicElement ..> FlexBasicProps
FlexBasicElement ..> Utils
FlexBasicElement ..> AttributeParsers
FlexBasicExports ..> FlexBasicElement
FlexBasicExports ..> FlexBasicProps
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Member
|
👍 @Innei |
commit: |
- Refactor the FlexBasicElement class definition to be encapsulated within a `defineFlexBasicElement` function for better modularity. - Maintain existing functionality while improving the structure for future enhancements. - Ensure compatibility with custom elements and shadow DOM. Signed-off-by: Innei <[email protected]>
…n logic - Introduce global styles for lobe-flex elements to improve styling consistency. - Refactor initialization logic to eliminate the use of shadow DOM, simplifying the component structure. - Update class management to directly manipulate the element's class list, enhancing performance and readability. Signed-off-by: Innei <[email protected]>
- Eliminate the global CSS styles for lobe-flex elements to streamline the component. - Update the FlexBasicElement definition to focus on core functionality without injecting styles into the document. - Prepare for future enhancements by simplifying the component structure. Signed-off-by: Innei <[email protected]>
- Introduce tests for handling React-style camelCase and kebab-case attributes in the FlexBasic web component. - Validate that attributes are correctly parsed and applied to the element's styles and class list. - Ensure compatibility with custom elements in various environments. Signed-off-by: Innei <[email protected]>
- Introduce ReactFlexBasic as a functional component to handle props and styles dynamically. - Update FlexBasic to conditionally render either the native web component or the React implementation based on the 'as' prop. - Enhance class management in FlexBasicElement to prevent clobbering existing class names, improving compatibility with frameworks like React. - Add unit tests to ensure className integrity when connecting the custom element. Signed-off-by: Innei <[email protected]>
…in Flexbox - Refactor Center component to utilize AutoFlex for improved layout handling. - Update Flexbox exports to default to AutoFlex, streamlining component usage. Signed-off-by: Innei <[email protected]>
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.
💻 变更类型 | Change Type
🔀 变更说明 | Description of Change
📝 补充信息 | Additional Information
Summary by Sourcery
Migrate the FlexBasic layout component to a custom web component backed by a shadow-DOM-based HTMLElement implementation and update exports accordingly.
New Features:
Enhancements: