## File: README.md

# ice.js



A universal framework based on React.js, [📚 Docs](https://ice.work/).

## Features

- 🐒 **Zero Config**: Out of the box support for ES6+, TypeScript, Less, Sass, CSS Modules，etc
- 🐯 **Practice**: Practice about file-system routing, state Management, request, etc
- 🦁 **Hybrid**: pre-render pages at build time (SSG) or request time (SSR) for default
- 🐌 **Plugin system**: The plugin system provides rich features and allow the community to build reusable solutions
- 🐂 **Multi-End**: Support both web, miniapp and Weex

## Quick start

We recommend creating a new ice.js app using create-ice, which sets up everything automatically for you. To create a project, run:

```bash
$ npm init ice ice-app --template @ice/lite-scaffold
```

`npm init ` is available in npm 6+

Start local server to launch project:

```bash
$ cd ice-app
$ npm install
$ npm run start # running on http://localhost:3000.
```

It's as simple as that!

## Contributing

Please see our [CONTRIBUTING.md](/.github/CONTRIBUTING.md)

## Contributors

Contributors can contact us to join the Contributor Group.

<a href="https://openomy.com/alibaba/ice" target="_blank" style="display: block; width: 100%;" align="center">
  
</a>

## Community

- [Issues](https://github.com/alibaba/ice/issues)
- [Gitter](https://gitter.im/alibaba/ice)

## LICENSE

[MIT](https://github.com/alibaba/ice/blob/master/LICENSE)

---

## File: examples/with-keep-alive-react/README.md

# with-keep-alive

Experimental keep-alive with React 18 `<Activity />`.

## How to debug

First of all, publish the package to the yalc repo.

```bash
$ cd packages/ice && yalc publish --push

$ cd packages/runtime && yalc publish --push
```

Then, install the example dependencies.

```bash
$ cd examples/with-keep-alive

$ yalc add @ice/app @ice/runtime

$ yarn install

$ npm run start
```

---

## File: examples/miniapp-project/src/README.md

# ice.js example miniapp

## feature list

### App

- dataLoader
- miniappManifest
- miniappLifecycles

### Pages

- index
  - Link component
  - history
  - useAppData
  - useData
- second
  - useSearchParams
  - page config
  - page lifecycles
- third/index
  - html tags
  - use json
  - use png
- fourth
  - define
  - process env
  - miniapp native components

---

## File: packages/webpack-modify/README.md

# @ice/webpack-modify

This package providers several APIs to simplify the modification of webpack configurations.

## Usage

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

let modifiedConfig = {};

const webpackConfig = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "sass-loader" }],
      },
    ],
  },
};

// remove loader
modifiedConfig = removeLoader(webpackConfig, {
  rule: 'css',
  loader: 'style-loader',
});
// modify loader
modifiedConfig = modifyLoader(webpackConfig, {
  rule: 'css',
  loader: 'style-loader',
  options: () => ({}),
});
// add loader
modifiedConfig = addLoader(webpackConfig, {
  rule: 'css',
  before: 'style-loader'
});
modifiedConfig = addLoader(webpackConfig, {
  rule: 'css',
  after: 'style-loader'
});
// modify webpack rule options
modifiedConfig = modifyRule(webpackConfig, {
  rule: 'css',
  options: () => {
    return [
      {
        loader: 'css-loader',
        options: () => ([]),
      },
    ]
  },
})
// remove plugin
modifiedConfig = removePlugin(webpackConfig, {
  pluginName: 'AssetsManifestPlugin',
});
```

---

## File: packages/webpack-config/README.md

# @ice/webpack-config

This package providers basic webpack configuration.

## Usage

```js
import { getWebpackConfig } from '@ice/webpack-config';
import webpack from 'webpack';

const config = { alias: {} };
const rootDir = process.cwd();
const runtimeTmpDir = '.ice';   // the path of the asset-manifest.json

const webpackConfig = getWebpackConfig({ 
  rootDir, 
  config,
  webpack, 
  runtimeTmpDir,
  target: 'web',
});
```

---

## File: packages/style-import/README.md

# `@ice/style-import`

A transform function for automatic import style.

## Usage

```js
import transform from '@ice/style-import';

transform(`import { Button } from 'antd';
ReactDOM.render(xxxx);`, [{
  libraryName: 'antd',
  style: (importSpecifiers) =>
    importSpecifiers.map(specifier =>
      `import 'antd/es/${specifier}/style'`).join('\n'),
}]);

// the code will turn out as blew:
/* 
import { Button } from 'Button';
import 'antd/es/Button/style';
ReactDOM.render(xxxx); */
```

---

## File: packages/shared-config/README.md

# @ice/shared-config

This package providers shared configuration for rspack and webpack.

---

## File: packages/runtime/README.md

# @ice/runtime

runtime dependencies for webpack framework `ice`.

`@ice/runtime` includes almost every runtime dependencies for `ice`, the dependencies version will be locked to keep the stability of web framework.

---

## File: packages/route-manifest/README.md

# @ice/route-manifest

Generate route manifest based on the `src` directory in the project for ice.js 3.

## API

### `generateRouteManifest(rootDir: string)`

- rootDir: the project directory absolute path

Will scan the page files in the `rootDir` and generate the routeManifest. For example:

```ts
const routeManifest = generateRouteManifest(__dirname);
console.log(routeManifest);
/**
[
  layout: {
    path: "",
    id: "layout",
    componentName: "Layout",
    file: "layout.tsx",
  },
  "pages/About/index": {
    path: "/About",
    index: true,
    id: "pages/About/index",
    parentId: "layout",
    file: "pages/About/index.tsx",
    componentName: "PagesAboutIndex",
  },
}
*/
```

### `formatNestedRouteManifest(routeManifest: RouteManifest)`

- routeManifest: generated by the `generateRouteManifest` function

It will get the nested route by the routeManifest. For example:

routeManifest:

```ts
const routeManifest = [
  layout: {
    path: "",
    id: "layout",
    componentName: "Layout",
    file: "layout.tsx",
  },
  "pages/About/index": {
    path: "/About",
    index: true,
    id: "pages/About/index",
    parentId: "layout",
    file: "pages/About/index.tsx",
    componentName: "PagesAboutIndex",
  },
}

const nestedRouteManifest = formatNestedRouteManifest(routeManifest);

console.log(nestedRouteManifest);
/**
[
  {
    path: "",
    id: "layout",
    componentName: "Layout",
    file: "layout.tsx",
    children: [
      {
        path: "/About",
        index: true,
        id: "pages/About/index",
        parentId: "layout",
        file: "pages/About/index.tsx",
        componentName: "PagesAboutIndex",
      },
    ]
  }
]
*/
```