feat: add midway-react-ssr

example/midway-react-ssr/.eslintignore

@@ -0,0 +1 @@
+build

example/midway-react-ssr/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: true,
+  extends: [
+    'standard-react-ts'
+  ],
+  parserOptions: {
+    project: './tsconfig.lint.json'
+  }
+}

example/midway-react-ssr/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+*.log
+*.log.*
+logs
+.vscode
+dest
+dist
+coverage
+.idea
+package-lock.json
+yarn.lock
+.DS_*
+.nyc*
+run/
+.nodejs-cache
+AUTHORS
+.serverless
+build
+.faas_debug_tmp
+code.zip
+.env_temp
+f.origin.yml
+.eslintcache

example/midway-react-ssr/config.js

@@ -0,0 +1,3 @@
+module.exports = {
+
+}

example/midway-react-ssr/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "ssr-implement",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@midwayjs/web": "^2.3.0",
+    "@midwayjs/decorator": "^2.3.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-id-swiper": "^3.0.0",
+    "react-router-dom": "^5.1.2",
+    "serialize-javascript": "^3.0.0",
+    "ssr-core": "^4.0.0",
+    "ssr-types": "^4.0.0",
+    "swiper": "^5.3.8",
+    "egg": "^2.0.0",
+    "egg-scripts": "^2.10.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/serialize-javascript": "^1.5.0",
+    "eslint-config-standard-react-ts": "^1.0.5",
+    "ssr": "^4.0.0",
+    "typescript": "^3.9.7"
+  },
+  "scripts": {
+    "start:test": "egg-scripts start --daemon --title=midway-server-my_midway_project --framework=@midwayjs/web",
+    "stop": "egg-scripts stop --title=midway-server-my_midway_project",
+    "start_build": "npm run build && cross-env NODE_ENV=development midway-bin dev",
+    "dev": "cross-env ets && cross-env NODE_ENV=local midway-bin dev --ts",
+    "start": "ssr start",
+    "build": "ssr build",
+    "deploy": "ssr build && ssr deploy",
+    "deploy:tencent": "ssr build && ssr deploy --tencent",
+    "lint": "eslint . --ext .js,.tsx,.ts --cache",
+    "lint:fix": "eslint . --ext .js,.tsx,.ts --cache --fix"
+  },
+  "midway-integration": {
+    "tsCodeRoot": "src"
+  }
+}

example/midway-react-ssr/src/config/config.default.ts

@@ -0,0 +1,15 @@
+import { EggAppConfig, EggAppInfo, PowerPartial } from 'egg'
+
+export type DefaultConfig = PowerPartial<EggAppConfig>
+
+export default (appInfo: EggAppInfo) => {
+  const config = {} as DefaultConfig
+
+  // use for cookie sign key, should change to your own and keep security
+  config.keys = appInfo.name + '_1611038425326_4049'
+
+  // add your config here
+  config.middleware = []
+
+  return config
+}

example/midway-react-ssr/src/config/config.unittest.ts

@@ -0,0 +1,3 @@
+export const security = {
+  csrf: false
+}

example/midway-react-ssr/src/config/plugin.ts

@@ -0,0 +1,4 @@
+import { EggPlugin } from 'egg'
+export default {
+  static: false // default is true
+} as EggPlugin

example/midway-react-ssr/src/controller/api.ts

@@ -0,0 +1,19 @@
+import { Inject, Controller, Post, Provide, Query } from '@midwayjs/decorator'
+import { Context } from 'egg'
+import { UserService } from '../service/user'
+
+@Provide()
+@Controller('/api')
+export class APIController {
+  @Inject()
+  ctx: Context
+
+  @Inject()
+  userService: UserService
+
+  @Post('/get_user')
+  async getUser (@Query() uid) {
+    const user = await this.userService.getUser({ uid })
+    return { success: true, message: 'OK', data: user }
+  }
+}

example/midway-react-ssr/src/controller/home.ts

@@ -0,0 +1,10 @@
+import { Controller, Get, Provide } from '@midwayjs/decorator'
+
+@Provide()
+@Controller('/')
+export class HomeController {
+  @Get('/')
+  async home () {
+    return 'Hello Midwayjs!'
+  }
+}

example/midway-react-ssr/src/interface.ts

@@ -0,0 +1,6 @@
+/**
+ * @description User-Service parameters
+ */
+export interface IUserOptions {
+  uid: number
+}

example/midway-react-ssr/src/service/user.ts

@@ -0,0 +1,14 @@
+import { Provide } from '@midwayjs/decorator'
+import { IUserOptions } from '../interface'
+
+@Provide()
+export class UserService {
+  async getUser (options: IUserOptions) {
+    return {
+      uid: options.uid,
+      username: 'mockedName',
+      phone: '12345678901',
+      email: 'xxx.xxx@xxx.com'
+    }
+  }
+}

example/midway-react-ssr/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES2018",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "inlineSourceMap":true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "stripInternal": true,
+    "pretty": true,
+    "declaration": true,
+    "outDir": "dist"
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "test",
+    "web",
+    "build"
+  ]
+}
+

example/midway-react-ssr/tsconfig.lint.json

@@ -0,0 +1,23 @@
+// 仅用于 eslint 检查
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ES2018",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "inlineSourceMap":true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "stripInternal": true,
+    "pretty": true,
+    "declaration": true,
+  },
+  "include": [
+    "src",
+    "web"
+  ]
+}
+

example/midway-react-ssr/web/@types/global.d.ts

@@ -0,0 +1,12 @@
+import { IWindow } from 'ssr-types'
+
+declare module '*.less'
+
+declare global {
+  interface Window {
+    __USE_SSR__?: IWindow['__USE_SSR__']
+    __INITIAL_DATA__?: IWindow['__INITIAL_DATA__']
+    STORE_CONTEXT?: IWindow['STORE_CONTEXT']
+  }
+  const __isBrowser__: Boolean
+}

example/midway-react-ssr/web/common.less

@@ -0,0 +1,56 @@
+.verticalCenter {
+  position: absolute;
+  top: 50%;
+  transform: translate(0, -50%)
+}
+.levelCenter {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0)
+}
+.verticalLevelCenter {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%)
+}
+.verticalCenterFlex {
+  display: flex;
+  align-items: center;
+}
+.levelCenterFlex {
+  display: flex;
+  justify-content: center;
+}
+.verticalLevelCenterFlex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.overflowEllipsis {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+.pName {
+  font-size: 15px;
+  color: #000000;
+  margin-top: 10px;
+  padding-left: 9px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 25px;
+  line-height: 25px;
+  z-index: 99;
+}
+.pDesc {
+  padding-left: 9px;
+  font-size: 13px;
+  color: #999999;
+  margin-bottom: 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  z-index: 99;
+}

example/midway-react-ssr/web/components/brief/index.less

@@ -0,0 +1,50 @@
+.brief-info {
+  padding: 18px 0 0px;
+  position: relative;
+  overflow: hidden;
+}
+
+.brief-title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 8px;
+  padding-left: 10px;
+  span{
+      font-size: 11px;
+      text-align: center;
+      color: #fff;
+      font-weight: bold;
+      background: #FC4273;
+      padding: 1px 4px;
+      margin-right: 9px;
+      border-radius: 3px;
+      &.icon-GOLDEN{
+          background: #EBBA73;
+      }
+  }
+  h1{
+      color: #333;
+      font-size: 18px;
+      margin-bottom: 0;
+  }
+}
+
+.brief-score{
+  font-size: 12px;;
+  padding-left: 10px;
+  color: #666;
+  .hotVv{
+      img{
+          width: 14px;
+          vertical-align: middle;
+          margin-top: -2px
+      }
+  }
+
+  .divide{
+      transform: scale(0.6);
+      margin: 0 5px;
+  }
+
+}

example/midway-react-ssr/web/components/brief/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { BriefDataNode } from '@/interface'
+import styles from './index.less'
+
+interface Props {
+  data: BriefDataNode[]
+}
+function Brief (props: Props) {
+  const data = props.data[0].data
+  return (
+    <div className={styles['brief-info']}>
+      <div className={styles['brief-title']}>
+        <span className={styles['icon-GOLDEN']}>{data.mark.data.text}</span>
+        <h1>{data.showName}</h1>
+      </div>
+      <div className={styles['brief-score']}>
+        {
+          data.subTitleList.map((item, index) => {
+            return (
+              item.subtitle && (
+                <span className={`${(item.subtitleType === 'PLAY_VV' && styles.hotVv) || ''}`} key={`subtile${index}`}>
+                  {
+                    item.subtitleType === 'PLAY_VV'
+                      ? <img src={data.heatIcon} />
+                      : (index > 0) ? (<span className={styles.divide}>/</span>) : ''
+                  }
+                  <span>{item.subtitle}</span>
+                </span>
+              )
+            )
+          })
+        }
+      </div>
+    </div>
+  )
+}
+
+export default Brief