feat: support deal with github-pages

Author: ascoders

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pri",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "types": "src/index.ts",
   "main": "built/index.js",
   "scripts": {
@@ -62,6 +62,7 @@
     "ora": "^1.4.0",
     "parcel-bundler": "^1.6.1",
     "portfinder": "^1.0.13",
+    "pre-commit": "^1.2.2",
     "prettier": "^1.10.2",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -76,7 +77,6 @@
     "typescript": "^2.7.1",
     "update-notifier": "^2.3.0",
     "walk": "^2.3.9",
-    "yargs": "^11.0.0",
-    "pre-commit": "^1.2.2"
+    "yargs": "^11.0.0"
   }
 }

package.json

@@ -159,19 +159,38 @@ Production deployment. By default the dist folder is `./dist`.
   **`ProjectConfig` Details**
 
   ```typescript
-  class IConfig {
+    export class IProjectConfig {
     /**
      * Title for html <title>
      */
     public title?: string = "pri"
     /**
-     * Dist dir path when running: npm run build | pri build
+     * Dist dir path
+     * Only take effect on npm run build | pri build
      */
     public distDir?: string = "dist"
     /**
-     * Public url path when running: npm run build | pri build
+     * Assets public path. eg: some.com, some.com/somePath, /somePath
+     * If not set, result: /<distPath>
+     * If set /somePath for example, result: /somePath/<distPath>
+     * If set some.com for example, result: //some.com/<distPath>
+     * If set some.com/somePath for example, result: //some.com/somePath/<distPath>
+     * Only take effect on npm run build | pri build
      */
     public publicPath?: string | null = null
+    /**
+     * Base href for all pages.
+     * For example, /admin is the root path after deploy, you should set baseHref to /admin.
+     * There is no need to modify the code, routing / can automatically maps to /admin.
+     * Only take effect on npm run build | pri build
+     */
+    public baseHref?: string = "/"
+    /**
+     * Generate static index file for each route, when building.
+     * Usefal for static service who don't serve fallback html, like github-pages.
+     * Only take effect on npm run build | pri build
+     */
+    public staticBuild = false
     /**
      * Custom env
      */
@@ -289,6 +308,41 @@ Production deployment. By default the dist folder is `./dist`.
 
 </details>
 
+<details>
+  <summary>Deploy to github pages.</summary>
+  
+  <p>
+
+  Set up `publicPath`, `baseHref` and `staticBuild` in the **Custom config**.
+
+  ```typescript
+  // src/config/config.default.ts
+
+  import { ProjectConfig } from "pri"
+
+  export default {
+    staticBuild: true,
+    publicPath: "/<your-repo-name>",
+    baseHref: "/<your-repo-name>"
+  } as ProjectConfig
+  ```
+
+  Then, execute `npm i gh-pages --save-dev`, and add npm scripts:
+
+  ```json
+  "deploy": "pri build && && gh-pages -d dist"
+  ```
+
+  Finally, execute `npm run deploy`!
+
+  > This is because js files will be served from `/<your-repo-name>` and the root path changed to `/<your-repo-name>` on github-pages.
+
+  > `staticBuild` will generate static index file for each route.
+
+  </p>
+
+</details>
+
 #### TODO
 
 - Static file serving.
@@ -489,7 +543,6 @@ Production deployment. By default the dist folder is `./dist`.
 - Scope Hoist.
 - Prefetching.
 - Code coverage.
-- Static html.
 
 ## Inspired
 

readme.md

@@ -16,7 +16,7 @@ import { log } from "./utils/log"
 /**
  * -V --version
  */
-commander.version(pkg.version, "-v, --version");
+commander.version(pkg.version, "-v, --version")
 
 /**
  * Regist commander.
@@ -26,32 +26,35 @@ commander.command(DEV)
   .description("Develop your project.")
   .action(async () => {
     await CommandDev()
-  });
+  })
 
 const BUILD = "build"
 commander.command(BUILD)
   .description("Pack your project.")
-  .action(async () => {
-    await CommandBuild()
-  });
+  .option("-s, --static")
+  .action(async (options) => {
+    await CommandBuild({
+      static: options.static
+    })
+  })
 
 const PREVIEW = "preview"
 commander.command(PREVIEW)
   .description("Preview your project in production mode.")
   .action(async () => {
     await CommandPreview()
-  });
+  })
 
 const INIT = "init"
 commander.command(INIT)
   .action(async () => {
     await CommandInit()
-  });
+  })
 
 /**
  * Parse argv.
  */
-commander.parse(process.argv);
+commander.parse(process.argv)
 
 /**
  * When no args given, use dev command
@@ -67,5 +70,5 @@ updateNotifier({ pkg }).notify()
 
 // 捕获异常
 process.on("unhandledRejection", error => {
-  log(colors.red(error.toString()));
-});
+  log(colors.red(error.toString()))
+})

src/bin.ts

@@ -2,103 +2,57 @@ import { execSync } from "child_process"
 import * as colors from "colors"
 import * as fs from "fs-extra"
 import * as path from "path"
-import { Configuration, Linter } from "tslint"
 import { analyseProject } from "../../utils/analyse-project"
 import { createEntry } from "../../utils/create-entry"
 import { ensureFiles } from "../../utils/ensure-files"
+import { generateHtmlByRouterPath, generateStaticHtml } from "../../utils/generate-static-html"
 import { log, spinner } from "../../utils/log"
 import { findNearestNodemodules } from "../../utils/npm-finder"
 import { getConfig } from "../../utils/project-config"
-import { IConfig } from "../../utils/project-config-interface"
+import { IProjectConfig } from "../../utils/project-config-interface"
+import { lint } from "../../utils/tslint"
 
 const projectRootPath = process.cwd();
 
-export const CommandBuild = async () => {
+export const CommandBuild = async (options: {
+  static?: boolean
+}) => {
   const env = "prod"
-  const config = getConfig(projectRootPath, env)
+  const projectConfig = getConfig(projectRootPath, env)
 
   // tslint check
-  log("Pre-commit checks...")
+  lint(projectRootPath)
 
-  const configurationFilename = "tslint.json"
-  const options = {
-    fix: true,
-    formatter: "json"
-  }
-
-  const program = Linter.createProgram("tsconfig.json", projectRootPath)
-  const linter = new Linter(options, program)
-
-  const files = Linter.getFileNames(program)
-  files.forEach(file => {
-    const fileContents = program.getSourceFile(file).getFullText()
-    const configuration = Configuration.findConfiguration(configurationFilename, file).results
-    linter.lint(file, fileContents, configuration)
-  })
-
-  const results = linter.getResult()
+  // Clean dist dir
+  execSync(`rm -rf ${path.join(projectRootPath, projectConfig.distDir)}`)
 
-  if (results.errorCount > 0) {
-    log(colors.red(`Tslint errors:`))
-    results.failures.forEach(failure => {
-      const errorPosition = failure.getStartPosition().getLineAndCharacter()
-      log(colors.red(`${failure.getFailure()}`), ", at: ", `${failure.getFileName()}:${errorPosition.line}:${errorPosition.character}`)
-    })
-    process.exit(0)
-  }
-
-  if (results.fixes.length > 0) {
-    log(`Tslint auto fixed ${results.fixes.length} bugs`)
-  }
+  // Clean .temp dir
+  execSync(`rm -rf ${path.join(projectRootPath, ".temp")}`)
 
   await spinner("Ensure project files", async () => {
-    ensureFiles(projectRootPath, config)
+    ensureFiles(projectRootPath, projectConfig)
   })
 
-  const entryPath = await spinner("Analyse project", async () => {
-    const info = await analyseProject(projectRootPath)
-    return createEntry(info, projectRootPath, env, config)
+  const result = await spinner("Analyse project", async () => {
+    const projectInfo = await analyseProject(projectRootPath)
+    const entryPath = await createEntry(projectInfo, projectRootPath, env, projectConfig)
+    return {
+      projectInfo, entryPath
+    }
   })
 
-  let publicUrl = ""
-  if (config.publicPath) {
-    publicUrl = `--public-url ${config.publicPath}`
+  // If using staticBuild, generate index pages for all router.
+  if (projectConfig.staticBuild) {
+    await spinner("Generate static files.", async () => {
+      await generateStaticHtml(projectRootPath, projectConfig, result.projectInfo)
+    })
   }
 
   // Run parcel
-  execSync(`${findNearestNodemodules()}/.bin/parcel build ${entryPath} --out-dir ${path.join(projectRootPath, config.distDir || "dist")} ${publicUrl}`, {
+  execSync(`${findNearestNodemodules()}/.bin/parcel build ${result.entryPath} --out-dir ${path.join(projectRootPath, projectConfig.distDir || "dist")}`, {
     stdio: "inherit",
     cwd: __dirname
-  });
-
-  createEntryHtmlFile("/entry.js", config)
-}
-
-function createEntryHtmlFile(entryPath: string, config: IConfig) {
-  const htmlPath = path.join(projectRootPath, "dist/index.html")
-
-  fs.outputFileSync(htmlPath, `
-    <html>
-
-    <head>
-      <title>${config.title}</title>
-
-      <style>
-        html,
-        body {
-          margin: 0;
-          padding: 0;
-        }
-      </style>
-    </head>
-
-    <body>
-      <div id="root"></div>
-      <script src="${entryPath}"></script>
-    </body>
-
-    </html>
-  `)
+  })
 
-  return htmlPath
+  generateHtmlByRouterPath("/", projectRootPath, projectConfig)
 }

src/commands/build/index.ts

@@ -1,7 +1,7 @@
 import { IProjectInfo } from "../../../../utils/analyse-project-interface"
-import { IConfig } from "../../../../utils/project-config-interface"
+import { IProjectConfig } from "../../../../utils/project-config-interface"
 
 export interface IProjectStatus {
-  config: IConfig
+  config: IProjectConfig
   info: IProjectInfo
 }

src/commands/dev/dashboard/server/project-status-interface.ts

@@ -9,7 +9,7 @@ import { ensureFiles } from "../../utils/ensure-files"
 import { log, spinner } from "../../utils/log"
 import { findNearestNodemodules } from "../../utils/npm-finder"
 import { getConfig } from "../../utils/project-config"
-import { IConfig } from "../../utils/project-config-interface"
+import { IProjectConfig } from "../../utils/project-config-interface"
 
 const projectRootPath = process.cwd();
 
@@ -76,7 +76,7 @@ export const CommandDev = async () => {
   }
 }
 
-function createEntryHtmlFile(entryPath: string, config: IConfig, dashboardServerPort: number) {
+function createEntryHtmlFile(entryPath: string, config: IProjectConfig, dashboardServerPort: number) {
   const htmlPath = path.join(projectRootPath, ".temp/dev.html")
 
   fs.outputFileSync(htmlPath, `