didi/mpx

Features

• Mini Program Development - Provides a framework for building cross-platform mini-programs and web applications from a single codebase.
• Cross-Platform Application Development - Transforms a single codebase into functional applications for multiple mini-program ecosystems and web environments.
• Cross-Platform UI Component Libraries - Develops a single set of mobile UI components that compile into multiple mini-program ecosystems and the web.
• Cross-Platform Rendering - Compiles a single codebase into native components for multiple mini-program ecosystems and the web.
• Single File Components - Bundles templates, logic, and styles into a single file format for modular and organized component development.
• UI and Functional Components - Defines pages and components using a unified interface that supports computed properties, watchers, and lifecycle normalization.
• Application State Management - Centralizes shared data in a store, providing structured methods to update state and handle asynchronous operations.
• Two-Way Data Binding - Synchronizes UI input components with script data properties across different platform syntaxes.
• Asset Bundling - Combines source code into production packages and processes stylesheets to improve application performance.
• Bundle Size Optimization - Reduces application bundle size using automated code splitting and tree shaking.
• Conditional Compilation Directives - Uses build-time macros to conditionally include or exclude code based on target platform requirements.
• Conditional Compilation - Applies conditional compilation to handle environment-specific logic across different platforms.
• Subpackage Distribution Strategies - Partitions application code into subpackages based on dependency analysis to minimize initial bundle size.
• Mini Program Subpackage Configurations - Supports sub-package partitioning to optimize loading performance and manage large-scale application bundles.
• Type Safety - Provides full type inference for components and pages using TypeScript to improve code quality and reliability.
• API Proxy Layers - Normalizes API calls through a unified proxy layer to ensure consistent behavior across different mini-program environments.
• Communication Bridges - Standardizes messaging and navigation between embedded web pages and their hosting native environments.
• Application Initialization Sequences - Registers the root application instance to manage global lifecycles and shared data.
• Reactive Data Stores - Creates observable objects and manages property updates to ensure the framework triggers necessary UI updates.
• Computed State Caching - Caches derived state based on reactive dependencies to improve execution speed.
• Reactive State Management - Manages application state using reactive primitives like computed properties and watchers.
• Composition API Integrations - Maps store state, getters, and actions into reactive references for use within functional component setups.
• Global State Managers - Provides a centralized store for shared data that supports merging multiple instances to facilitate modular state management.
• Unified API Wrappers - Standardizes disparate external API endpoints into a consistent request and response format for portability.
• Reactive Component Models - Declares initial component state using objects or functions, making properties reactive and accessible directly on the component instance.
• Single File Components - Encapsulates templates, logic, and styles into single-file components to enable modular UI construction across multiple mini-program and web platforms.
• Component Lifecycle Hooks - Registers custom logic at specific component lifecycle stages using unified hooks across platforms.
• Component Property Systems - Exposes external component attributes that are automatically proxied to the instance and integrated into the reactive system.
• Custom UI Components - Defines reusable UI units with encapsulated logic, data, and templates that can be registered and embedded within pages.
• State-Synchronized Bindings - Links UI input components to script data properties across different platform syntaxes.
• Event Handling - Supports binding event listeners to components with event bubbling and propagation control.
• Form Data Binding - Synchronizes a component's value with a data property by listening for input events and updating state.
• Data Binding Syntax - Provides a declarative template syntax that supports dynamic styling, conditional rendering, and two-way data binding for efficient interface development.
• Directive-Based View Renderers - Uses directives to conditionally render elements, loop through lists, and bind data directly within view templates.
• Logic Organizers - Organizes component logic by functional concern within setup functions to improve maintainability and code structure.
• Component Lifecycle Management - Provides a framework for managing the creation, updates, and destruction of components throughout their operational lifecycle.
• Reactive State Managers - Initializes responsive data objects that trigger automatic UI updates when properties change.
• Reactive State Synchronization - Synchronizes user interfaces with underlying data models using computed properties and watchers.
• Reactive View Synchronization - Updates the user interface automatically when underlying JavaScript data objects are modified.
• View Rendering Optimizations - Compiles templates into render functions to minimize update frequency and data payloads.
• Cross-Platform UI Frameworks - Enables building shared reactive components that function across web and mobile environments.
• Event Binding - Attaches event listeners to components using standard binding syntax to manage user interactions across platforms.
• Application Entry Point Triggering - Initializes the application entry point and defines global data or lifecycle behaviors for the entire program.
• Child-to-Parent Event Emission - Triggers custom events from child components to notify parents of internal state changes.
• Reactive Data Binding - Tracks component data changes and updates the view automatically to provide a declarative programming experience.
• Reactive State Management - Creates reactive data references and computed properties that automatically trigger view updates when values change.
• Reactive State Watchers - Modifies application state and triggers UI changes automatically using computed properties, watchers, and data binding patterns.
• Page Definitions - Defines application pages with support for data reactivity, computed properties, and platform-specific lifecycles.
• Vue TypeScript Integrations - Performs automatic type checking for script content within component files or external files during compilation.
• Platform Object Normalizers - Maps platform-specific lifecycles and objects to a unified set to eliminate behavioral differences.
• Framework Capability Extensions - Injects custom logic, global API methods, or shared mixins into the application lifecycle through a standardized plugin system.
• Component Reference Collections - Collects multiple component instances or node queries automatically when defined within a list rendering loop.
• Data Change Observers - Observes data mutations to trigger custom logic via declarative options or instance methods.
• Input Value Sanitizers - Applies transformation logic to user input before updating the data model to ensure input meets specific requirements.
• State Partitioning - Organizes data into independent store instances or sub-modules to facilitate distributed management.
• Request-Scoped State Managers - Isolates application state per request to prevent cross-request data pollution and support synchronization between environments.
• State-Based Wait Loops - Pauses test execution until specific conditions like page navigation or data loading are met.
• Build Performance and Optimization - Optimizes build performance through persistent caching and efficient dependency graph management.
• Bundle Size Analyzers - Analyzes bundle size to identify and reduce the final application package footprint for faster loading.
• Mini Program Bundle Optimization - Optimizes mini-program performance through tree shaking, atomic CSS, and batched view updates.
• Platform-Specific Code Execution - Uses environment variables within logic and templates to execute platform-specific code paths during the build process.
• Component Configuration - Sets options for style isolation, virtual host nodes, and slot support to control how components interact with their environment.
• Cross-Platform Configuration Managers - Defines platform-specific settings for mini-programs using a compile-time macro to handle environment differences.
• Component Instance Registries - Provides a unified directive to retrieve component instances and node information across different platforms.
• Mini Program Build Systems - Transforms source files into the discrete file structures required by various platforms using a build system.
• Resource Resolution Bundlers - Transforms source code into platform-specific bundles using a resource resolution plugin.
• Bundle Visualization - Includes interactive graphical representations to visualize module size and composition within the bundle.
• Sub-Package Partitioning - Divides the project into a main package and subpackages to optimize loading and support large-scale development.
• Build Optimization - Provides build-time optimization techniques to streamline compilation and improve development cycle speed.
• Cross-Platform Deployment Targets - Translates a single codebase into multiple target environments using static transpilation and runtime adaptation.
• Atomic CSS Distribution - Extracts and distributes atomic CSS into packages based on usage frequency to minimize bundle size.
• Package Distribution - Optimizes resource allocation between main and sub-packages to minimize initial bundle size.
• Mini Program Native Integrations - Allows native mini-program files and framework-specific files to coexist in the same project for incremental migration.
• Independent Subpackage Initializers - Enables subpackages to run independently of the main bundle, including custom initialization logic for isolated environments.
• Subpackage Preloaders - Downloads required subpackages in the background based on user navigation patterns to reduce wait times.
• Multi-Platform Build Systems - Transforms a single codebase into functional applications for various mini-program ecosystems and the web.
• Native Framework Integrations - Supports incremental migration of existing native codebases and reuse framework-developed components within native projects.
• Webview Navigation Standards - Unifies navigation and messaging interfaces for pages running inside embedded webviews.
• Deferred Execution - Queues callbacks to execute after data synchronization to ensure operations use current state.
• Shared Logic Packages - Distributes reusable logic and lifecycle hooks as shared packages to ensure consistency across application pages.
• State Type Inference - Derives types for data, computed properties, and store states automatically using generic functions to improve code reliability.
• Native Code Exporters - Converts components, pages, or entire projects into native code for integration into legacy mini-program environments.
• State Store Namespacing - Organizes data into independent store instances or sub-modules to facilitate distributed management.
• Reactive Data Unwrappers - Enables the conversion of reactive data instances into standard JavaScript objects for use in non-reactive contexts.
• Custom Transpilation Pipelines - Transforms source code into platform-specific bundles using a static transpilation pipeline.
• Type Declaration Files - Supplements existing properties and options with custom type declarations via declaration files for improved development support.
• TypeScript Development Environments - Write TypeScript directly within component files or import external files to perform type checking during compilation.
• Typed Property Declarations - Defines input properties with full type inference support using a compile-time macro for better development safety.
• Global Mixin Injectors - Adds shared methods, data, or lifecycles to all applications and pages globally to ensure consistent behavior.
• Reactive Property Watchers - Allows deleting properties from reactive objects and triggering updates for all subscribed listeners.
• Behavioral Mixins - Injects reusable sets of functions and properties into components to share logic across different UI elements.
• Incremental Migration Tools - Transitions existing native projects gradually by allowing new features to use the project logic.
• Conditional Compilation Attributes - Provides directives for selecting platform-specific code paths during the build process.
• Component Abstractions - Declares generic nodes within a component whose concrete implementation is determined by the consumer to enhance reusability.
• UI Component Development - Facilitates building reusable UI components with encapsulated logic and styles.
• Conditional Block Directives - Enables conditional inclusion of template, script, or style sections based on the target platform during the build.
• Component-Based Dependency Management - Imports components from packages and bundles only the required dependencies automatically to optimize application size.
• Component Data Injection - Distributes data from a provider component to any descendant component regardless of depth using dependency injection.
• Application Performance Optimization - Optimizes runtime execution and bundle size through automated code analysis and reactivity tracking.
• Platform Capability Resolution - Normalizes platform-specific API differences to ensure consistent behavior across diverse runtime environments.
• Platform-Specific File Resolution - Loads platform-specific file variants based on the current build mode to handle architectural differences between environments.
• Predictable State Containers - Modifies the store state through explicit mutations to ensure all changes are trackable and secure.
• Proxy-Based API Wrappers - Normalizes platform-specific interfaces through a consistent proxy-based wrapper layer.
• Post-Update Callbacks - Schedules callbacks to run after the update cycle to ensure state changes are reflected.
• Cross-Extension Logic Sharing - Injects shared data, methods, and lifecycle hooks into applications, pages, or components to reuse logic consistently.
• Component Slots - Injects external template structures into designated slots within a component, supporting multiple named slots for flexible layout.
• Mixed-Source Project Builders - Combines native files and project files within a single project through the build process.
• State Change Observers - Triggers custom callbacks or asynchronous operations in response to specific changes in data properties.
• Global State Stores - Stores application-wide data in a centralized store that supports merging multiple instances.
• State Update Batching - Buffers data changes to prevent redundant computations and unnecessary re-renders.
• TypeScript Type Definitions - Provides robust type inference for state, getters, and actions in store creation using TypeScript.
• Reactive State Monitoring - Tracks changes to reactive data and executes callback functions to keep the user interface synchronized.
• Component and Interaction Testing - Simulates runtime environments to verify component behavior and rendering outputs during user interactions.
• Custom Mock Response Overrides - Intercepts network requests to return static data or custom objects for isolated testing.
• Asynchronous Test Handling - Synchronizes test execution with asynchronous view updates to ensure accurate assertions during state transitions.
• Page Condition Synchronization - Synchronizes test execution with page states and routing to ensure automation stability.
• Component Testing - Simulates component lifecycles and state changes to verify rendering output and data update logic.
• End-to-End Testing - Executes automated unit and end-to-end tests to verify application stability across platforms.
• Test Automation Interfaces - Provides an automated testing interface to validate user flows and application interactions.
• Test Case Generators - Converts recorded user interactions into editable JavaScript test scripts to streamline test creation.
• Automated End-to-End Testing - Runs automated scripts to verify complete user flows across the application.
• UI Element Locators - Provides specialized selectors for locating UI elements within custom components.
• Dynamic Component Renderers - Renders different components at a single mount point by binding a dynamic identifier to toggle between them.
• Component Style Customizations - Adjusts visual properties like colors, fonts, and spacing through pre-compilation or runtime CSS variables to match design requirements.
• Exposed Component APIs - Controls which variables and methods are accessible to the template or parent components to optimize performance and encapsulation.
• Component Prop and Method Standards - Provides runtime polyfills for component methods and event triggers to ensure feature parity across different platforms.
• Server-Side Data Fetching - Fetches asynchronous data during server-side rendering to ensure components are fully populated.
• Cross-Component Communication - Establishes parent-child or ancestor-descendant links between components to enable cross-component communication and lifecycle coordination.
• CSS Utility Classes - Uses pre-defined atomic CSS utility classes within templates for consistent cross-platform styling.
• Slot-Based Layouts - Inserts external template structures into predefined component locations using named or default slots.
• Input Synchronization - Updates component data automatically when user input occurs by mapping input values to the bound state.
• Dynamic Class Bindings - Merges dynamic class names with static class attributes during rendering to allow state-based styling of elements.
• Native Element Template References - Enables direct access to DOM nodes and component instances within the setup context.
• Native UI Component Libraries - Integrates native mini-program components and libraries into the framework's component system for hybrid development.
• Parent-to-Child Data Flows - Declares external properties with type validation, default values, and change observers to allow data flow from parent to child.
• Component Logic Patterns - Encapsulates component state and behavior into reusable functions using a setup entry point to improve code organization.
• Component Styling - Configures host nodes and style boundaries to prevent internal component styles from leaking.
• Style Encapsulations - Manages style injection and encapsulation to balance global sharing with component isolation.
• Atomic CSS Generators - Integrates utility-first CSS class generation into the build process for consistent design systems.
• Inline Style Bindings - Combines inline style objects with static style attributes during rendering to apply computed visual properties to elements.
• CSS Variable Override Themes - Adjusts visual styles using pre-compilers or CSS variables to match specific business design requirements across the application.
• Reactive State Watchers - Executes callback functions in response to changes in reactive references or getter functions.
• Update Batching - Buffers multiple data changes within a single event loop tick to prevent redundant re-renders and improve interface responsiveness.
• Mock Backends - Generates local server responses to verify application behavior without a live backend connection.
• Client-Server State Synchronization - Coordinates application instances and routing on the server to ensure consistent state upon hydration.
• Compiled Web Frameworks - Compiles mini-program projects into web-compatible code for cross-platform deployment.
• Standalone Package Configurations - Defines standalone packages that run without the main package and execute specific initialization logic.
• Dependency Injection Patterns - Passes data from parent components to descendants using provide and inject patterns to avoid prop drilling.
• Derived State - Creates cached computed properties that derive new data from state and recalculate when dependencies change.
• Full Page Server Rendering - Generates HTML on the server to improve initial load performance and search engine optimization.
• Server Lifecycle Management - Executes specific logic during initialization and server-side creation to prevent state pollution across requests.
• Independent Instance Management - Distributes data management across independent store instances to facilitate cross-team collaboration.
• Hydratable HTML Generators - Produces static HTML on the server to improve initial load speed with subsequent client-side hydration.
• Server-Side Data Prefetching - Fetches required data during server-side rendering to ensure the page is fully populated before reaching the client.
• Server-Side Rendering - Provides server-side rendering capabilities to deliver static markup and enhance page load speeds.
• State Hydration - Serializes server-side state into HTML and hydrates it on the client to maintain consistency.
• Test-Controlled State Updates - Synchronizes test execution with application state changes like routing and component updates to ensure stability.
• Store Composition - Provides patterns for combining independent state store instances into a unified application data management flow.
• Tree-Shaking Optimizations - Implements tree-shaking to automatically remove unused code and optimize final bundle volume.
• Web-Native Integration Bridges - Standardizes communication between embedded web content and native host environments.
• Cross-Platform - Maps platform-specific lifecycle events into a single internal standard to ensure consistent behavior.
• Development Frameworks - Enhanced framework with cross-platform support and performance optimization.
• Frontend Frameworks - Framework for cross-platform mini-program development.

Star history