feat(build): use dynamic rendering and remove ssr

Author: hiroppy

packages/client/assets/style/code.css

@@ -0,0 +1,39 @@
+@import './variable';
+@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
+
+pre {
+  background: var(--color-white);
+  border-radius: 10px;
+  min-width: 50%;
+  max-width: 90%;
+  width: auto;
+}
+
+code {
+  font-family: 'Source Code Pro', monospace;
+}
+
+section {
+  & > pre[class*='language-'] {
+    margin: 0.5em auto;
+
+    & > code[class*='language-'] {
+      & .token.operator {
+        background: inherit;
+      }
+    }
+  }
+}
+
+section > pre > code[class*='language-'],
+section > pre[class*='language-'] {
+  font-size: 1.4rem;
+  line-height: 1.2;
+}
+
+@media screen and (min-width: 768px) {
+  section > pre > code[class*='language-'],
+  section > pre[class*='language-'] {
+    font-size: 2rem;
+  }
+}

packages/client/assets/style/common.css

@@ -1,6 +1,5 @@
 @import './variable';
 @import './sidebar.css';
-@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro'); /* for highlight.js */
 
 html {
   font-size: 62.5%;
@@ -31,39 +30,6 @@ img {
   margin: 0 auto;
 }
 
-pre {
-  background: var(--color-white);
-  border-radius: 10px;
-  min-width: 50%;
-  max-width: 90%;
-  width: auto;
-}
-
-pre[class*='language-'] {
-  margin: 0.5em auto;
-}
-
-code {
-  font-family: 'Source Code Pro', monospace !important;
-  padding: 0 3px;
-}
-
-code[class*='language-'],
-pre[class*='language-'] {
-  font-size: 1.4rem;
-  line-height: 1.2;
-}
-@media screen and (min-width: 768px) {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    font-size: 2rem;
-  }
-}
-
-#root {
-  display: flex;
-}
-
 .fa-hatena:before {
   content: 'B!';
   font-family: Verdana;
@@ -74,9 +40,8 @@ pre[class*='language-'] {
   background: transparent;
 }
 
-/* overwrite prismjs */
-.token.operator {
-  background: inherit;
+#root {
+  display: flex;
 }
 
 #webslides {

packages/client/src/components/ContentView/Base.js

@@ -1,8 +1,8 @@
 import React, { useEffect, memo } from 'react';
-import Prism from 'prismjs';
 import classnames from 'classnames';
 import { setup as setupWebSlides } from '../../setup/webSlides';
 import { createVMEnv } from '../../utils/createVMEnv';
+import { getSearchParams } from '../../utils/getSearchParams';
 
 const articleClass = process.env.IS_VERTICAL ? 'vertical' : undefined;
 let mermaid = null;
@@ -21,47 +21,30 @@ async function setupMermaid() {
 }
 
 export const Base = memo(
-  ({ slides, onChangeSlideIndex, hash, isJumpPage, showIndex }) => {
-    // for SSR
-    if (process.env.NODE_ENV !== 'production') {
+  ({ slides, onChangeSlideIndex, hash, showIndex }) => {
+    if (import.meta.webpackHot) {
       useEffect(() => {
-        if (process.env.CHART) {
-          reloadChart();
-        }
+        (async () => {
+          const { Prism } = await import(/* webpackPreload: true */ '../../setup/prism');
 
-        Prism.highlightAll();
+          if (process.env.CHART) {
+            reloadChart();
+          }
+          Prism.highlightAll();
+        })();
       }, [hash]);
     }
 
-    // useEffect is called too late
-    // delay Event Loop one round
-    // but on Node.js this line is an error, so put it in useEffect
-    if (process.env.BUILD_STAGE !== 'ssr') {
-      // 0 page
-      if (process.env.SSR && !isJumpPage) {
-        setupSlides();
-        Prism.highlightAll();
-      } else {
-        setTimeout(() => {
-          setupSlides();
-          Prism.highlightAll();
-        }, 0);
-      }
-
-      const hasExecutableCode = slides.some(
-        ({ fusumaProps }) => fusumaProps.hasExecutableCode === 'true'
-      );
+    useEffect(() => {
+      setupSlides();
 
-      if (hasExecutableCode) {
-        createVMEnv();
+      if (!getSearchParams().get('ssr')) {
+        // don't run when creating html
+        import(/* webpackPreload: true */ '../../setup/prism');
       }
-    }
-
-    useEffect(() => {
-      if (process.env.SSR) {
-        setupSlides();
+      if (slides.some(({ fusumaProps }) => !!fusumaProps.hasExecutableCode)) {
+        createVMEnv();
       }
-
       if (process.env.CHART && !mermaid) {
         setupMermaid();
       }
@@ -76,7 +59,6 @@ export const Base = memo(
           if (process.env.CHART) {
             reloadChart();
           }
-
           if (onChangeSlideIndex) {
             onChangeSlideIndex(e.detail.currentSlide0);
           }

packages/client/src/entryPoints/Client.js

@@ -6,7 +6,7 @@ import { AppContainer } from '../components/AppContainer';
 import '../setup/css';
 
 function createBody(slides = [], hash = 0) {
-  const renderMethod = module.hot ? render : hydrate;
+  const renderMethod = import.meta.webpackHot ? render : hydrate;
 
   renderMethod(<AppContainer slides={slides} hash={hash} />, document.getElementById('root'));
 }

packages/client/src/entryPoints/Server.js

@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react';
 import { Base } from '../components/ContentView/Base';
 
 export function useContentComponent(mode) {
-  // need to set the default value for SSR
-  const [ContentComponent, setContentComponent] = useState(mode === 'common' ? Base : null);
+  const [ContentComponent, setContentComponent] = useState(null);
 
   useEffect(() => {
     (async () => {

packages/client/src/hooks/useContentComponent.js

@@ -0,0 +1,6 @@
+import Prism from 'prismjs';
+import '../../assets/style/code.css';
+
+Prism.highlightAll();
+
+export { Prism };