feat: support without document file (#546)

* feat: support without document file

* fix: generate html

* feat: ssr

* chore: remove useless version

examples/basic-without-document/README.md

@@ -0,0 +1 @@
+# basic-without-document

examples/basic-without-document/build.json

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

examples/basic-without-document/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "with-rax",
+  "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": "^1.0.0",
+    "rax-view": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/rax": "^1.0.0"
+  },
+  "scripts": {
+    "start": "rax-app start",
+    "build": "rax-app build"
+  },
+  "engines": {
+    "node": ">=8.0.0"
+  }
+}

examples/basic-without-document/src/app.json

@@ -0,0 +1,19 @@
+{
+  "routes": [
+    {
+      "path": "/",
+      "source": "pages/Home/index"
+    },
+    {
+      "path": "/about",
+      "source": "pages/About/index",
+      "window": {
+        "title": "About Page"
+      }
+    }
+  ],
+  "window": {
+    "title": "Rax App"
+  },
+  "metas": ["<meta name=\"description\" content=\"150 words\" />"]
+}

examples/basic-without-document/src/app.ts

@@ -0,0 +1,4 @@
+import { createElement } from 'rax';
+import { runApp } from 'rax-app';
+
+runApp();

examples/basic-without-document/src/components/Logo/index.css

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

examples/basic-without-document/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: 'https://img.alicdn.com/imgextra/i4/O1CN0145ZaIM1QEObAAbKa1_!!6000000001944-2-tps-1701-1535.png',
+    };
+    console.log('with router =>', this.props);
+    return (
+      <Image
+        className="logo"
+        source={source}
+      />
+    );
+  }
+}
+
+export default Logo;

examples/basic-without-document/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-without-document/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 } 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 About;

examples/basic-without-document/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-without-document/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" 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-without-document/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/with-rax-store/src/pages/Home/models/counter.ts

@@ -1,4 +1,4 @@
-import { IRootDispatch } from 'rax-app';
+import { IStoreDispatch } from 'rax-app';
 
 export const delay = (time) => new Promise((resolve) => setTimeout(() => resolve(), time));
 
@@ -16,7 +16,7 @@ export default {
     },
   },
 
-  effects: (dispatch: IRootDispatch) => ({
+  effects: (dispatch: IStoreDispatch) => ({
     async decrementAsync() {
       await delay(10);
       dispatch.counter.decrement();

examples/with-rax-store/tsconfig.json

@@ -1,20 +1,33 @@
 {
+  "compileOnSave": false,
+  "buildOnSave": false,
   "compilerOptions": {
-    "module": "esNext",
-    "target": "es2015",
+    "baseUrl": ".",
     "outDir": "build",
-    "jsx": "react",
+    "module": "esnext",
+    "target": "es6",
+    "jsx": "preserve",
     "jsxFactory": "createElement",
     "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
     "sourceMap": true,
-    "alwaysStrict": true,
-    "baseUrl": ".",
+    "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"],
-      "rax": ["node_modules/@types/rax"]
+      "rax-app": [".rax/index.ts"]
     }
   },
-  "include": ["src/*", ".rax"],
-  "exclude": ["build"]
+  "include": ["src", ".rax"],
+  "exclude": ["node_modules", "build", "public"]
 }

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

@@ -1,10 +1,10 @@
-.about {
+.home {
   align-items: center;
   margin-top: 200rpx;
 }
 
 .title {
-  font-size: 45rpx;
+  font-size: 35rpx;
   font-weight: bold;
   margin: 20rpx 0;
 }

packages/error-stack-tracey/index.d.ts

@@ -1,4 +1,4 @@
 declare module 'error-stack-tracey' {
-  export function parse(error: object, bundleContent: string): object;
+  export function parse(error: object, bundleContent: string): any[];
   export function print(message: string, stackFrame: any[]): void;
 }

packages/plugin-rax-app/src/base.js

@@ -56,7 +56,7 @@ module.exports = (api, { target, babelConfigOptions, progressOptions = {} }) =>
     }
 
     config.plugin('DefinePlugin').tap((args) => [
-      Object.assign(...args, {
+      Object.assign({}, ...args, {
         'process.env.PUBLIC_URL': JSON.stringify(publicUrl),
       }),
     ]);

packages/plugin-rax-web/package.json

@@ -28,6 +28,7 @@
     "@builder/app-helpers": "^2.0.0",
     "react-dev-utils": "^10.0.0",
     "chalk": "^4.1.0",
-    "html-minifier": "^4.0.0"
+    "html-minifier": "^4.0.0",
+    "cheerio": "1.0.0-rc.3"
   }
 }

packages/plugin-rax-web/src/DocumentPlugin/builtInLoader.ts

@@ -0,0 +1,40 @@
+import * as qs from 'qs';
+import * as fs from 'fs';
+import { formatPath } from '@builder/app-helpers';
+import { IBuiltInDocumentQuery } from '../types';
+
+/**
+ * loader for wrap document and pages to be server render function, which can render page to html
+ */
+export default function () {
+  const query: IBuiltInDocumentQuery = typeof this.query === 'string' ? qs.parse(this.query.substr(1)) : this.query;
+  const { staticExportPagePath, builtInDocumentTpl } = query;
+
+  const formatedPagePath = staticExportPagePath ? formatPath(staticExportPagePath) : null;
+  const needStaicExport = formatedPagePath && fs.existsSync(formatedPagePath);
+  let source;
+
+  if (needStaicExport) {
+    source = `
+  import { createElement } from 'rax';
+  import renderer from 'rax-server-renderer';
+  import Page from '${formatedPagePath}';
+
+  export function renderInitialHTML(assets) {
+    const contentElement = createElement(Page, {});
+
+    const initialHtml = contentElement ? renderer.renderToString(contentElement, {
+      defaultUnit: 'rpx'
+    }) : '';
+
+    return initialHtml;
+  }
+`;
+  } else {
+    source = `
+    export const renderInitialHTML = () => '';
+    `;
+  }
+  source += `\n export const html = \`${builtInDocumentTpl}\`;`;
+  return source;
+}