🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
MIT License
Bot releases are hidden (Show)
Published by ClarkXia about 1 year ago
--speedup
#6497Published by ClarkXia about 1 year ago
rspack
) to speed up both local development, as well as production builds.Enable feature through ice start --speedup
:
{
"scripts": {
"start": "ice start --speedup",
"build": "ice build --speedup"
},
}
Published by ClarkXia about 1 year ago
import { defineConfig } from '@ice/app';
export default defineConfig({
routes: {
defineRoutes: (route) => {
// Limitation: about.tsx should locate in root dir
route('/hello', '/absolute/path/to/about.tsx');
},
},
});
// Support Node API for other build tools.
import createService from '@ice/app/service';
const service = createService({ rootDir: '', command: 'start', commadArgs: {} });
service.run();
Published by ClarkXia about 1 year ago
// Export runApp in `src/app.ts` allows to customize render options
export const runApp = (render, option) => {
render();
};
Published by ClarkXia about 1 year ago
import { defineConfig } from '@ice/app';
// Remove react-router in case of render page like MPA mode.
export default defineConfig(() => ({
optimization: { disableRouter: true },
}));
import { defineConfig } from '@ice/app';
export default defineConfig(() => ({
dropLogLevel: ['trace', 'warn'],
}));
page-vendors
#6386import { defineConfig } from '@ice/app';
export default defineConfig(() => ({
codeSplitting: 'page-vendors',
}));
Published by ClarkXia over 1 year ago
export default defineConfig(() => ({
// Configrate htmlGenerating to disable html generation.
htmlGenerating: false,
});
plugin-rax-compat
#6362Published by ClarkXia over 1 year ago
usePageAssets
#6238import { defineConfig } from '@ice/app';
export default defineConfig(() => ({
// Active feature by config optimization.router `true`
optimization: {
router: true,
},
}));
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
type=module
to rax-compat #6176Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Patch: revert @swc/core version because of https://github.com/swc-project/swc/issues/7174
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Published by ClarkXia over 1 year ago
Support access /about/repo/$id
by create route component about.repo.$id.tsx
.
└── src
├── root.jsx
└── pages
- ├── about
- │ ├── repo
- │ │ └── $id.tsx
│ └── index.tsx
+ └── about.repo.$id.tsx
Remain route path by []
which matches routing rules, such as index
route component | route |
---|---|
src/pages/[index].tsx | /index |
src/pages/about/[index].tsx | /about/index |
Visit docs for more details.
server.onDemand
optional #6010Published by ClarkXia over 1 year ago
Enable on demand compile by config ice.config.mts
:
import { defineConfig } from '@ice/app';
import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';
import customPlugin from './plugin';
export default defineConfig(() => ({
ssr: true,
server: {
onDemand: true,
// Strongly recommand to set esm format when use on demand compilation.
format: 'esm',
},
}));
import { defineConfig } from '@ice/app';
export default defineConfig({
routes: {
config: [
{
path: 'rewrite',
// 从 src/page 开始计算路径,并且需要写后缀
component: 'sales/layout.tsx',
children: [
{
path: '/favorites',
component: 'sales/favorites.tsx',
},
{
path: 'overview',
component: 'sales/overview.tsx',
},
{
path: 'recommends',
component: 'sales/recommends.tsx',
},
],
},
{
path: '/',
component: 'index.tsx',
},
],
},
});
We strongly recommend to use file system routing, which makes routes more predictable and intuitive.
@jsx createElement
comment. Thanks for the PR from @MrpandaLiurax-compat
#5999Published by ClarkXia over 1 year ago
// New API from ice for Suspense SSR
import { useSuspenseData, withSuspense } from 'ice';
function Comments() {
const comments = useSuspenseData(getData);
return (
<div>
{comments.map((comment, i) => (
<p className="comment" key={i}>
{comment}
</p>
))}
</div>
);
}
export default withSuspense(Comments);
const fakeData = [
"Wait, it doesn't wait for React to load?",
'How does this even work?',
'I like marshmallows',
];
async function getData() {
await new Promise((resolve) => {
setTimeout(() => resolve(null), 3000);
});
return fakeData;
}
rax compat mode
#5847@ice/plugin-icestark
#5825data-loader.js
#5843