refactor: enhance ssr in SPA mode

__tests__/dev-cases/basic-spa-ssr.test.ts

@@ -0,0 +1,27 @@
+import { startFixture, setupBrowser } from '../utils/start';
+import { IPage } from '../utils/browser';
+
+const example = 'basic-spa-ssr';
+let page: IPage = null;
+let browser = null;
+let devServer = null;
+
+describe('should start web devServer: ', () => {
+  test('open /', async () => {
+    const serverOptions = await startFixture(example);
+    const port = serverOptions.port;
+    devServer = serverOptions.devServer;
+    const res = await setupBrowser({ port, defaultHtml: '' });
+    page = res.page;
+    browser = res.browser;
+    expect(await page.$$text('.title')).toStrictEqual(['Welcome to Your Rax App with SSR']);
+    await page.click('#link');
+    await page.waitForFunction(`document.getElementsByClassName('about').length > 0`);
+  }, 120000);
+});
+
+
+afterAll(async () => {
+  await browser.close();
+  await devServer.close();
+});

__tests__/dev-cases/basic-spa.test.ts

@@ -14,7 +14,7 @@ describe('should start web devServer: ', () => {
     const serverOptions = await startFixture(example);
     const port = serverOptions.port;
     devServer = serverOptions.devServer;
-    const res = await setupBrowser({ port });
+    const res = await setupBrowser({ port, defaultHtml: '' });
     page = res.page;
     browser = res.browser;
     await page.waitForFunction(`document.getElementsByTagName('span').length > 0`);

__tests__/dev-cases/basic-ssr-with-document.test.ts

@@ -0,0 +1,32 @@
+import { startFixture, setupBrowser } from '../utils/start';
+import { IPage } from '../utils/browser';
+
+const example = 'basic-ssr-with-document';
+let page: IPage = null;
+let browser = null;
+let devServer = null;
+
+describe('should start web devServer: ', () => {
+  test('open /home', async () => {
+    const serverOptions = await startFixture(example);
+    const port = serverOptions.port;
+    devServer = serverOptions.devServer;
+    const res = await setupBrowser({ port, defaultHtml: 'home.html' });
+    page = res.page;
+    browser = res.browser;
+    expect(await page.$$text('#star')).toStrictEqual(['10000']);
+    expect(await page.$$text('.title')).toStrictEqual(['Welcome to Your Rax App with SSR']);
+  }, 120000);
+
+  test('open /about', async () => {
+    await page.push('/about.html');
+    expect(await page.$$text('#star')).toStrictEqual(['10000']);
+    expect(await page.$$text('.title')).toStrictEqual(['About Page']);
+  })
+});
+
+afterAll(async () => {
+  await browser.close();
+  await devServer.close();
+});
+

__tests__/dev-cases/basic-ssr.test.ts

@@ -0,0 +1,30 @@
+import { startFixture, setupBrowser } from '../utils/start';
+import { IPage } from '../utils/browser';
+
+const example = 'basic-ssr';
+let page: IPage = null;
+let browser = null;
+let devServer = null;
+
+describe('should start web devServer: ', () => {
+  test('open /home', async () => {
+    const serverOptions = await startFixture(example);
+    const port = serverOptions.port;
+    devServer = serverOptions.devServer;
+    const res = await setupBrowser({ port, defaultHtml: 'home.html' });
+    page = res.page;
+    browser = res.browser;
+    expect(await page.$$text('.title')).toStrictEqual(['Welcome to Your Rax App with SSR']);
+  }, 120000);
+
+  test('open /about', async () => {
+    await page.push('/about.html');
+    expect(await page.$$text('.title')).toStrictEqual(['About Page']);
+  })
+});
+
+afterAll(async () => {
+  await browser.close();
+  await devServer.close();
+});
+

examples/basic-spa-ssr/README.md

@@ -0,0 +1 @@
+# basic-spa-ssr

examples/basic-spa-ssr/build.json

@@ -0,0 +1,6 @@
+{
+  "targets": ["web"],
+  "web": {
+    "ssr": true
+  }
+}

examples/basic-spa-ssr/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "basic-spa-ssr",
+  "description": "rax example",
+  "dependencies": {
+    "rax": "^1.1.0",
+    "rax-document": "^0.1.0",
+    "rax-image": "^2.0.0",
+    "rax-link": "^1.0.1",
+    "rax-text": "^2.0.0",
+    "rax-view": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/rax": "^1.0.0"
+  },
+  "scripts": {
+    "start": "rax-app start",
+    "build": "rax-app build"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

examples/basic-spa-ssr/src/app.json

@@ -0,0 +1,18 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    },
+    {
+      "path": "/about",
+      "source": "pages/About/index",
+      "window": {
+        "title": "About Page"
+      }
+    }
+  ],
+  "window": {
+    "title": "Rax App"
+  }
+}

examples/basic-spa-ssr/src/app.tsx

@@ -0,0 +1,27 @@
+import { runApp } from 'rax-app';
+
+runApp({
+  app: {
+    // ErrorBoundary
+    errorBoundary: false,
+
+    // 生命周期
+    onShow() {
+      console.log('app show...');
+    },
+    onHide() {
+      console.log('app hide...');
+    },
+
+    // 获取初始数据
+    getInitialData: async () => {
+      return {
+        a: 1,
+        b: 2,
+      };
+    },
+  },
+  router: {
+    type: 'browser'
+  }
+});

examples/basic-spa-ssr/src/components/Logo/index.css

@@ -0,0 +1,5 @@
+.logo {
+  width: 200rpx;
+  height: 180rpx;
+  margin-bottom: 20rpx;
+}

examples/basic-spa-ssr/src/components/Logo/index.tsx

@@ -0,0 +1,21 @@
+import { createElement, PureComponent } from 'rax';
+import Image from 'rax-image';
+
+import './index.css';
+
+class Logo extends PureComponent {
+  render() {
+    const source = {
+      uri: `${process.env.PUBLIC_URL}/rax.png`,
+    };
+    console.log('with router =>', this.props);
+    return (
+      <Image
+        className="logo"
+        source={source}
+      />
+    );
+  }
+}
+
+export default Logo;

examples/basic-spa-ssr/src/pages/About/index.css

@@ -0,0 +1,16 @@
+.home {
+  align-items: center;
+  margin-top: 200rpx;
+}
+
+.title {
+  font-size: 35rpx;
+  font-weight: bold;
+  margin: 20rpx 0;
+}
+
+.info {
+  font-size: 36rpx;
+  margin: 8rpx 0;
+  color: #555;
+}

examples/basic-spa-ssr/src/pages/About/index.tsx

@@ -0,0 +1,31 @@
+import { createElement, Component } from 'rax';
+import View from 'rax-view';
+import Text from 'rax-text';
+import { getSearchParams, withPageLifeCycle } from 'rax-app';
+
+import './index.css';
+
+class About extends Component {
+  componentDidMount() {
+    console.log('about search params', getSearchParams());
+  }
+
+  onShow() {
+    console.log('about show...');
+  }
+
+  onHide() {
+    console.log('about hide...');
+  }
+
+  render() {
+    return (
+      <View className="about">
+        <Text className="title">About Page</Text>
+        <Text className="info" onClick={() => (this.props as any).history.push('/')}>Go Home</Text>
+      </View>
+    );
+  }
+}
+
+export default withPageLifeCycle(About);

examples/basic-spa-ssr/src/pages/Home/index.css

@@ -0,0 +1,16 @@
+.home {
+  align-items: center;
+  margin-top: 200rpx;
+}
+
+.title {
+  font-size: 35rpx;
+  font-weight: bold;
+  margin: 20rpx 0;
+}
+
+.info {
+  font-size: 36rpx;
+  margin: 8rpx 0;
+  color: #555;
+}

examples/basic-spa-ssr/src/pages/Home/index.tsx

@@ -0,0 +1,42 @@
+import { createElement } from 'rax';
+import { usePageShow, usePageHide, getSearchParams } from 'rax-app';
+import View from 'rax-view';
+import Text from 'rax-text';
+import Logo from '@/components/Logo';
+
+import './index.css';
+
+export default function Home(props) {
+  const { history } = props;
+
+  const searchParams = getSearchParams();
+
+  console.log('home search params =>', searchParams);
+  console.log('home page props =>', props);
+
+  usePageShow(() => {
+    console.log('home show...');
+  });
+
+  usePageHide(() => {
+    console.log('home hide...');
+  });
+
+  return (
+    <View className="home">
+      <Logo />
+      <Text className="title">{props?.data?.title || 'Welcome to Your Rax App'}</Text>
+      <Text className="info">{props?.data?.info || 'More information about Rax'}</Text>
+      <Text className="info" id="link" onClick={() => history.push('/about', { id: 1 })}>Go About</Text>
+    </View>
+  );
+}
+
+Home.getInitialProps = async () => {
+  return {
+    data: {
+      title: 'Welcome to Your Rax App with SSR',
+      info: 'More information about Rax',
+    },
+  };
+};

examples/basic-spa-ssr/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "preserve",
+    "jsxFactory": "createElement",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "rax-app": [".rax/index.ts"]
+    }
+  },
+  "include": ["src", ".rax"],
+  "exclude": ["node_modules", "build", "public"]
+}

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

@@ -25,18 +25,9 @@ export default function Home(props) {
   return (
     <View className="home">
       <Logo />
-      <Text className="title">{props?.data?.title || 'Welcome to Your Rax App'}</Text>
-      <Text className="info">{props?.data?.info || 'More information about Rax'}</Text>
+      <Text className="title">Welcome to Your Rax App</Text>
+      <Text className="info">More information about Rax</Text>
       <Text className="info" id="link" onClick={() => history.push('/about', { id: 1 })}>Go About</Text>
     </View>
   );
 }
-
-Home.getInitialProps = async () => {
-  return {
-    data: {
-      title: 'Welcome to Your Rax App with SSR',
-      info: 'More information about Rax',
-    },
-  };
-};

examples/basic-ssr-with-document/README.md

@@ -0,0 +1 @@
+# basic-ssr-with-document

examples/basic-ssr-with-document/build.json

@@ -0,0 +1,8 @@
+{
+  "targets": ["web"],
+  "web": {
+    "ssr": true,
+    "mpa": true
+  },
+  "compileDependencies": []
+}