Merge branch 'master' of github.com:zenn-dev/zenn-editor

catnose99 · catnose99 · commit efb87e519ebf · 2020-09-19T12:18:17.000+09:00
diff --git a/packages/zenn-cli/cli/preview/build.ts b/packages/zenn-cli/cli/preview/build.ts
@@ -1,31 +1,23 @@
-import { createServer } from "http";
+import { createServer, Server } from "http";
 import { parse } from "url";
 import next from "next";
-import arg from "arg";
 
-import { cliCommand } from ".";
-
-export const exec: cliCommand = (argv) => {
-  const args = arg(
-    {
-      // Types
-      "--port": Number,
-
-      // Alias
-      "-p": "--port",
-    },
-    { argv }
-  );
-
-  const port = args["--port"] || 8000;
-  const previewUrl = `http://localhost:${port}`;
+type BuildArgs = {
+  srcDir: string;
+  port: number;
+  previewUrl: string;
+};
 
-  const srcDir = `${__dirname}/../../.`; // refer project root from dist/cli/zenn-preview.js
+export const build = async ({
+  srcDir,
+  port,
+  previewUrl,
+}: BuildArgs): Promise<Server> => {
   const app = next({ dev: false, dir: srcDir, conf: {} });
   const handle = app.getRequestHandler();
-
-  app.prepare().then(() => {
-    createServer((req, res) => {
+  await app.prepare();
+  return new Promise((resolve) => {
+    const server = createServer((req, res) => {
       const requestUrl = req.url;
       if (!requestUrl) {
         return console.error("Undefined request url");
@@ -38,6 +30,7 @@ export const exec: cliCommand = (argv) => {
         process.exit(1);
       }
       console.log(`&#128064;Preview on ${previewUrl}`);
+      resolve(server);
     });
   });
 };
diff --git a/packages/zenn-cli/cli/preview/index.ts b/packages/zenn-cli/cli/preview/index.ts
@@ -0,0 +1,45 @@
+import arg from "arg";
+import { cliCommand } from "..";
+import { build } from "./build";
+import chokidar from "chokidar";
+import socketIo from "socket.io";
+import open from "open";
+
+export const exec: cliCommand = async (argv) => {
+  const args = arg(
+    {
+      // Types
+      "--port": Number,
+
+      // Alias
+      "-p": "--port",
+
+      // Types
+      "--watch": Boolean,
+
+      // Alias
+      "-w": "--watch",
+    },
+    { argv }
+  );
+
+  const port = args["--port"] || 8000;
+  const watch = args["--watch"] ?? true;
+  const previewUrl = `http://localhost:${port}`;
+  const srcDir = process.cwd(); // refer project root from dist/cli/zenn-preview.js
+  const server = await build({ port, previewUrl, srcDir });
+  await open(previewUrl);
+  if (watch) {
+    const watcher = chokidar.watch(srcDir);
+    const io = socketIo(server);
+    watcher.on("ready", () => {
+      io.on("connection", (socket) => {
+        watcher.on("all", async (_, path) => {
+          if (/articles|books/.test(path)) {
+            socket.emit("reload");
+          }
+        });
+      });
+    });
+  }
+};
diff --git a/packages/zenn-cli/package.json b/packages/zenn-cli/package.json
@@ -21,15 +21,20 @@
     "build": "npm run lint && npm run build:bin & npm run build:next"
   },
   "dependencies": {
+    "@types/socket.io": "^2.1.11",
     "arg": "^4.1.3",
+    "chokidar": "^3.4.2",
     "colors": "^1.4.0",
     "crypto-random-string": "^3.2.0",
     "fs-extra": "^9.0.1",
     "gray-matter": "^4.0.2",
     "js-yaml": "^3.14.0",
     "next": "9.5.2",
+    "open": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "socket.io": "^2.3.0",
+    "socket.io-client": "^2.3.0",
     "update-notifier": "^4.1.0",
     "zenn-content-css": "^0.1.22",
     "zenn-init-embed": "^0.1.3",
diff --git a/packages/zenn-cli/pages/_app.tsx b/packages/zenn-cli/pages/_app.tsx
@@ -1,11 +1,30 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { AppProps } from "next/app";
 import Head from "next/head";
 
 import "zenn-content-css";
 import "@styles/index.scss";
 
+declare global {
+  interface Window {
+    io: any;
+  }
+}
+
 export default function MyApp({ Component, pageProps }: AppProps) {
+  useEffect(() => {
+    const { body } = document;
+    const script = document.createElement("script");
+    script.src = "/socket.io/socket.io.js";
+    script.onload = () => {
+      const socket = (window.io as any).connect(location.origin);
+      socket.on("reload", () => {
+        location.reload();
+      });
+    };
+    body.append(script);
+  }, []);
+
   return (
     <>
       <Head>
diff --git a/yarn.lock b/yarn.lock
