Merge pull request #3501 from alibaba/release-next

Release

docs/guide/advance/ssr.md

@@ -130,7 +130,7 @@ router.get('/*', async (ctx) => {
   // 将资源下载到 server 端
   // const serverBundlePath = await downloadBundle('http://cdn.com/server/index.js');
   const render = require(serverBundlePath);
-  const html = render({
+  const { html, error } = await render({
     // 当前请求的路径（必选参数）
     pathname: ctx.req.pathname
     // 可选

docs/guide/basic/api.md

@@ -156,12 +156,28 @@ function Home() {
 };
 ```
 
-### useSearchParams
+### getSearchParams
 
 用于在非路由函数组件中解析 url 参数。
 
 假设当前 URL 为 `https://example.com?foo=bar`，解析查询参数如下：
 
+```tsx
+// src/components/Example
+import { getSearchParams } from 'ice';
+
+function Example() {
+  const searchParams = getSearchParams()
+  // console.log(searchParams); => { foo: 'bar' }
+}
+```
+
+### useSearchParams
+
+**已废弃**，用于在非路由函数组件中解析 url 参数。
+
+假设当前 URL 为 `https://example.com?foo=bar`，解析查询参数如下：
+
 ```tsx
 // src/components/Example
 import { useSearchParams } from 'ice';
@@ -174,7 +190,7 @@ function Example() {
 
 ### withSearchParams
 
-与 `useSearchParams` 对应，用在 Class Component 中。
+**已废弃**，与 `useSearchParams` 对应，用在 Class Component 中。
 
 ```tsx
 import { withSearchParams } from 'ice';

docs/guide/basic/build.md

@@ -561,3 +561,18 @@ module.exports = ({ context, onGetWebpackConfig }) => {
   ]
 }
 ```
+
+## 调试
+
+在某些情况下可能遇到配置没有生效，或者配置不符合预期，这时候我们可以通过下面的命令进行调试，查看最终的 Webpack 配置是否符合预期。
+
+```bash
+# 调试开发环境
+$ DEBUG=icejs npm start
+
+# 调试构建环境
+$ DEBUG=icejs npm run build
+
+# 调试构建环境
+$ DEBUG=icejs npm run test
+```

examples/basic-spa/mock/index.js

@@ -1,41 +1,4 @@
-const projects = [
-  {
-    id: 1,
-    name: 'facebook/react',
-    description: 'A declarative, efficient, and flexible JavaScript library for building user interfaces',
-    logo: 'https://avatars3.githubusercontent.com/u/69631',
-  },
-  {
-    id: 2,
-    name: 'vuejs/vue',
-    description: 'Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. ',
-    logo: 'https://avatars1.githubusercontent.com/u/6128107',
-  },
-  {
-    id: 3,
-    name: 'angular/angular',
-    description: 'One framework. Mobile & desktop. ',
-    logo: 'https://avatars3.githubusercontent.com/u/139426',
-  },
-  {
-    id: 4,
-    name: 'nuxt/nuxt.js',
-    description: 'The Vue.js Framework',
-    logo: 'https://avatars2.githubusercontent.com/u/23360933',
-  },
-  {
-    id: 5,
-    name: 'zeit/next.js',
-    description: 'The React Framework',
-    logo: 'https://avatars0.githubusercontent.com/u/14985020',
-  },
-  {
-    id: 6,
-    name: 'ice-lab/nice.js',
-    description: 'A universal framework based on React.js.',
-    logo: 'https://avatars1.githubusercontent.com/u/1961952',
-  },
-];
+const projects = require('./projects');
 
 // mock/index.js
 module.exports = {

examples/basic-spa/mock/projects.js

@@ -0,0 +1,38 @@
+module.exports = [
+  {
+    id: 1,
+    name: 'facebook/react',
+    description: 'A declarative, efficient, and flexible JavaScript library for building user interfaces',
+    logo: 'https://avatars3.githubusercontent.com/u/69631',
+  },
+  {
+    id: 2,
+    name: 'vuejs/vue',
+    description: 'Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. ',
+    logo: 'https://avatars1.githubusercontent.com/u/6128107',
+  },
+  {
+    id: 3,
+    name: 'angular/angular',
+    description: 'One framework. Mobile & desktop. ',
+    logo: 'https://avatars3.githubusercontent.com/u/139426',
+  },
+  {
+    id: 4,
+    name: 'nuxt/nuxt.js',
+    description: 'The Vue.js Framework',
+    logo: 'https://avatars2.githubusercontent.com/u/23360933',
+  },
+  {
+    id: 5,
+    name: 'zeit/next.js',
+    description: 'The React Framework',
+    logo: 'https://avatars0.githubusercontent.com/u/14985020',
+  },
+  {
+    id: 6,
+    name: 'ice-lab/nice.js',
+    description: 'A universal framework based on React.js.',
+    logo: 'https://avatars1.githubusercontent.com/u/1961952',
+  },
+];

examples/basic-spa/src/pages/Dashboard/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import { Link, useSearchParams, withSearchParams } from 'ice';
+import { Link, getSearchParams } from 'ice';
 
-@withSearchParams
 class Foo extends React.PureComponent {
   public render() {
-    console.log('Foo:', this.props.searchParams);
+    console.log('Foo:', getSearchParams());
     return (
       <>Foo</>
     );
   }
 }
 
 const Bar = () => {
-  const searchParams = useSearchParams();
+  const searchParams = getSearchParams();
   console.log('Bar:', searchParams);
   return (
     <>Bar</>

examples/with-rax/src/app.ts

@@ -8,5 +8,8 @@ runApp({
     onHide() {
       console.log('app hide...');
     }
+  },
+  router: {
+    basename: '/home'
   }
 });

examples/with-rax/src/components/Logo/index.tsx

@@ -1,16 +1,22 @@
-import { createElement } from 'rax';
+import { createElement, PureComponent } from 'rax';
 import Image from 'rax-image';
+import { withRouter } from 'rax-app';
 
 import './index.css';
 
-export default () => {
-  const source = {
-    uri: '//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png',
-  };
-  return (
-    <Image
-      className="logo"
-      source={source}
-    />
-  );
-};
+class Logo extends PureComponent {
+  public render() {
+    const source = {
+      uri: '//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png',
+    };
+    console.log('with router =>', this.props);
+    return (
+      <Image
+        className="logo"
+        source={source}
+      />
+    );
+  }
+}
+
+export default withRouter(Logo);

examples/with-rax/src/pages/About/index.tsx

@@ -1,11 +1,15 @@
 import { createElement, PureComponent } from 'rax';
 import View from 'rax-view';
 import Text from 'rax-text';
-import { withPageLifeCycle } from 'rax-app';
+import { getSearchParams, withPageLifeCycle } from 'rax-app';
 
 import './index.css';
 
 class About extends PureComponent {
+  public componentDidMount() {
+    console.log('about search params', getSearchParams());
+  }
+
   public onShow() {
     console.log('about show...');
   }

examples/with-rax/src/pages/Home/index.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'rax';
-import { usePageShow, usePageHide } from 'rax-app';
+import { usePageShow, usePageHide, getSearchParams } from 'rax-app';
 import View from 'rax-view';
 import Text from 'rax-text';
 import Logo from '@/components/Logo';
@@ -9,6 +9,10 @@ import './index.css';
 export default function Home(props) {
   const { history } = props;
 
+  const searchParams = getSearchParams();
+
+  console.log('home search params =>', searchParams);
+
   usePageShow(() => {
     console.log('home show...');
   });
@@ -22,7 +26,7 @@ export default function Home(props) {
       <Logo />
       <Text className="title">Welcome to Your Rax App!!!</Text>
       <Text className="info">More information about Rax</Text>
-      <Text className="info" onClick={() => history.push('/about')}>Go About</Text>
+      <Text className="info" onClick={() => history.push('/about?id=1')}>Go About</Text>
     </View>
   );
 }

packages/create-app-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-app-container",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
   "author": "[email protected]",
   "homepage": "https://github.com/alibaba/ice#readme",