ice.js Framework

The ice.js miniapp project demonstrates several core capabilities for building mini-program style applications. The features are divided into application-level capabilities and page-level capabilities.

App-level Features

• dataLoader: Mechanisms for loading application data.
• miniappManifest: Configuration via a manifest file.
• miniappLifecycles: Application-wide lifecycle hooks.

Page-level Features

• Navigation & State: Support for Link components, history management, and hooks like useAppData and useData.
• Routing & Config: Support for useSearchParams, page-specific configurations, and page lifecycles.
• Assets & Rendering: Usage of standard HTML tags, JSON data, and PNG images.
• Advanced Integration: Environment variable processing, component definitions, and support for miniapp native components.

ice.js is a universal framework based on React.js designed for multi-platform development. Key capabilities include:

• Zero Config: Built-in support for ES6+, TypeScript, Less, Sass, and CSS Modules.
• Hybrid Rendering: Supports Static Site Generation (SSG) at build time and Server-Side Rendering (SSR) at request time.
• Plugin System: An extensible architecture that allows the community to build and reuse solutions.
• Multi-End Support: A single framework capable of targeting Web, Mini-apps, and Weex.
• Standardized Practices: Built-in patterns for file-system routing, state management, and network requests.

ice.js is a React-based frontend solution centered around the application development framework (ice.js 3). It provides core capabilities for application building, routing, and debugging, alongside advanced capabilities for micro-frontends and integrated development.

Key features include:

• Out-of-the-box support: TypeScript, Webpack 5, CSS Modules, Mock, and SSR.
• Business Best Practices: Built-in directory structures, code standards, routing solutions, state management, and data fetching.
• Multiple Application Modes: Supports Server-Side Rendering (SSR) and Static Site Generation (SSG).
• Plugin Architecture: All official capabilities are implemented as plugins, allowing businesses to extend functionality via custom plugins.
• Domain-specific Solutions: Includes ICESTARK for micro-frontends and integrated development solutions.

The @ice/miniapp-html-styles package provides built-in CSS styles to ensure compatibility with standard HTML tag styles when developing mini-apps. It is divided into two main style sets:

• html.css: Provides HTML4 built-in styles for compatibility with legacy HTML tag styles.
• html5.css: Provides HTML5 built-in styles for compatibility with modern HTML5 tag styles.

The @ice/webpack-modify package provides utility APIs to programmatically add, remove, or modify loaders and plugins within a webpack configuration object. This is useful for plugin developers or users who need to fine-tune the underlying webpack setup without manually traversing complex configuration trees.

import { removeLoader, modifyLoader, addLoader, removePlugin } from '@ice/webpack-modify';

SSG (Static Site Generation) is a rendering mode where HTML content is pre-generated during the build process.

In ice.js, SSG is enabled by default. It allows parts of your components that do not depend on dynamic runtime data to be rendered into static HTML immediately. This improves initial load performance compared to traditional CSR (Client-Side Rendering) where the entire component tree must wait for JavaScript to load and execute before rendering.

@ice/miniapp-react-dom is a React renderer specifically designed for mini-programs. It is built using react-reconciler and connects to the DOM instance provided by @ice/miniapp-runtime.

It functions as the mini-program equivalent of react-dom, meaning it provides a consistent API surface for rendering React components into a mini-program environment.

Fusion components can be used directly in an ice.js project. There are two ways to handle styles:

1. Full Style Import (Recommended for most cases): If you do not have extreme requirements for bundle size or custom themes, you do not need the @ice/plugin-fusion plugin. Instead, import the full CSS file in your global stylesheet.
2. Plugin-based On-demand Loading: Use the @ice/plugin-fusion plugin if you need on-demand style loading or specific theme customization.

Note: For script code, modern bundlers like Webpack and Vite support tree-shaking, so on-demand import via babel-plugin-import is not recommended.

/* Recommended approach for most users: Full import in src/global.css */
@import '@alifd/next/dist/next.var.css';

body {}