File: README.md
ice.js
A universal framework based on React.js, 📚 Docs.
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:
$ npm init ice ice-app --template @ice/lite-scaffoldnpm init is available in npm 6+
Start local server to launch project:
$ 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
Contributors
Contributors can contact us to join the Contributor Group.
Community
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.
$ cd packages/ice && yalc publish --push
$ cd packages/runtime && yalc publish --pushThen, install the example dependencies.
$ cd examples/with-keep-alive
$ yalc add @ice/app @ice/runtime
$ yarn install
$ npm run startFile: 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
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
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
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:
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
generateRouteManifestfunction
It will get the nested route by the routeManifest. For example:
routeManifest:
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",
},
]
}
]
*/