DOCSEARCHbyAlgolia
Submit Docs

Silver Formily Documentation

website·Indexed 29 days ago

https://silver-formily.org

An independent wrapper and non-strict fork of Formily designed to provide continued maintenance and a unified framework for managing complex forms in mid-to-back-end development.

Tokens
1.4K
Snippets
9
Records
12
Agent score
48%

What's inside Silver Formily

  1. Overview of Silver Formily Architecture

    Silver Formily is a cross-frontend-framework form framework designed to manage complex form state, lifecycles, and validation. It uses a standalone reactive system independent of any specific frontend framework. The architecture is divided into four layers: Foundation Modules (reactive state), Core Modules (runtime and schema), Frontend Framework Bindings (glue layers for frameworks like Vue), and UI Bindings (component library integrations).

  2. Overview of Silver Formily Architecture

    Silver Formily is a cross-framework form management library. It uses a modular architecture to separate state management, schema definition, and UI rendering. A critical architectural detail is that it employs its own independent reactive system, separate from any specific frontend framework's reactivity.

  3. Maintain content and configuration for the Silver Formily educational portal

    Follow these guidelines when editing the Silver Formily educational portal:

    • Content Strategy: This is a teaching portal; do not duplicate full API or component documentation from sub-sites.
    • Localization: Place page content in the root directory and the en/ directory to maintain consistent Chinese and English structures.
    • Configuration:
      • Shared site configurations are provided via @silver-formily/docs-toolkit.
      • Site matrix data specific to the main portal is located in .vitepress/site-data.ts.
    • Assets:
      • Place static assets in the public/ directory.
      • Build artifacts are located in .vitepress/dist and should not be modified manually.

  4. Understand Silver Formily Core Modules

    Core modules handle the runtime model, Schema semantics, and form orchestration. For beginners, it is recommended to focus on @silver-formily/core and avoid Schema-based writing (MarkupSchema/JSONSchema) initially to reduce the learning curve.
    // Core Modules
@silver-formily/core: The runtime core responsible for form state, field lifecycles, effects orchestration, and validation scheduling.
@silver-formily/json-schema: Maps JSON Schema structures to form runtime semantics.
@silver-formily/validator: Provides declarative validation (rules, formats, localization, and async validation).
@silver-formily/path: Tools for path resolution, pattern matching, and deep access.

  5. Understand Silver Formily Core Modules

    Core modules handle the runtime model, schema semantics, and form orchestration. For beginners, it is recommended to focus on @silver-formily/core and avoid Schema-based authoring initially to lower the learning curve.

    Modules:

    • @silver-formily/core: The primary form runtime (state, field lifecycle, effect orchestration, validation scheduling).
    • @silver-formily/json-schema: Maps JSON Schema structures into runtime semantics.
    • @silver-formily/validator: Declarative validation (rules, formats, localization, async validation).
    • @silver-formily/path: Path parsing, pattern matching, and deep access utilities.

  6. Understand Silver Formily Foundation Modules

    Foundation modules provide the underlying reactive capabilities that allow Formily to operate independently of a frontend framework's own state management.

    Modules:

    • @silver-formily/shared: Low-level shared utilities and type helpers.
    • @silver-formily/reactive: Provides reactive state, observables, reactions, and dependency tracking.

  7. Understand Silver Formily Base Modules

    Base modules provide the underlying infrastructure for the framework. They are generally not the primary focus for learners but are essential for the framework's operation.
    // Base Modules
@silver-formily/shared: General utility tools and type helpers.
@silver-formily/reactive: Provides reactive state capabilities (observable, reaction, and dependency tracking).

  8. Integrate Silver Formily with Vue 3

    Silver Formily provides glue layers to connect its reactive core and domain model to Vue 3.

    Modules:

    • @silver-formily/vue: Rendering layer for field components, schema rendering, and Vue adaptation.
    • @silver-formily/reactive-vue: Binding layer between @silver-formily/reactive and Vue 3 (observers, lifecycle coordination).

  9. Run development and build commands for Silver Formily Docs

    Use the following pnpm scripts to manage the Silver Formily educational portal site, which is powered by VitePress.
    # Start the development server
pnpm dev

# Build the documentation for production
pnpm docs:build

# Preview the production build locally
pnpm preview

# Run and fix ESLint issues
pnpm lint
pnpm format

  10. Integrate Silver Formily with Vue 3

    Silver Formily provides 'glue' layers to bind its core logic and reactive system to Vue 3. These packages are typically the primary interface developers interact with during implementation.
    // Vue Bindings
@silver-formily/vue: Vue 3 rendering layer for field components and Schema rendering.
@silver-formily/reactive-vue: Binds the @silver-formily/reactive kernel to Vue 3 (observers, lifecycle linkage, and side-effect binding).

  11. Use Silver Formily UI Bindings

    UI bindings connect the core framework to specific component libraries to provide ready-to-use form UIs.

    Modules:

    • @silver-formily/element-plus: Desktop form components based on Element Plus.
    • @silver-formily/vant: Mobile form components based on Vant.
    • @silver-formily/grid: Responsive grid layout abstraction used across different UI bindings.

  12. Use Silver Formily UI Component Bindings

    UI bindings connect the core form logic to specific component libraries to create functional user interfaces. @silver-formily/grid is a universal grid layout wrapper used across different component libraries.
    // UI Bindings
@silver-formily/element-plus: Desktop form components based on Element Plus.
@silver-formily/vant: Mobile form components based on Vant.
@silver-formily/grid: Responsive grid layout capabilities based on container size and breakpoints.