feat(doc-plugin-preview): support web and mobile meta for code block …

…to change preview mode (#4004)

.changeset/silver-pianos-tease.md

@@ -0,0 +1,6 @@
+---
+'@modern-js/doc-plugin-preview': minor
+---
+
+feat: support web and mobile meta for code block to change preview mode
+feat: 支持在代码块添加web和mobile meta来更改预览模式

packages/cli/doc-plugin-preview/src/codeToDemo.ts

@@ -1,5 +1,4 @@
 import { join } from 'path';
-import fs from '@modern-js/utils/fs-extra';
 import { visit } from 'unist-util-visit';
 
 import type { RouteMeta } from '@modern-js/doc-core';
@@ -33,12 +32,18 @@ export const remarkCodeToDemo: Plugin<
         );
 
       if (node.lang === 'jsx' || node.lang === 'tsx') {
-        const { value } = node;
         const isPure = node?.meta?.includes('pure');
-        // not transform pure code
+
+        // do nothing for pure mode
         if (isPure) {
           return;
         }
+
+        // every code block can change their preview mode by meta
+        const isMobileMode =
+          node?.meta?.includes('mobile') ||
+          (!node?.meta?.includes('web') && isMobile);
+
         const routeMeta = getRouteMeta();
         const { pageName } = routeMeta.find(
           meta => meta.absolutePath === vfile.path,
@@ -51,24 +56,24 @@ export const remarkCodeToDemo: Plugin<
           `virtual-demo`,
         );
         const virtualModulePath = join(demoDir, `${id}.tsx`);
-        if (!isMobile) {
-          // only need to write in web mode, in mobile mode, it has been written by addPage.
-          fs.ensureDirSync(join(demoDir));
-          fs.writeFileSync(virtualModulePath, value);
-        }
-        demos.push(getASTNodeImport(`Demo${id}`, virtualModulePath));
         const demoRoute = `/~demo/${id}`;
-        demoRoutes.push({
-          path: demoRoute,
-        });
+
+        if (isMobileMode) {
+          // only add demoRoutes in mobile mode
+          demoRoutes.push({
+            path: demoRoute,
+          });
+        } else {
+          demos.push(getASTNodeImport(`Demo${id}`, virtualModulePath));
+        }
         Object.assign(node, {
           type: 'mdxJsxFlowElement',
           name: 'Container',
           attributes: [
             {
               type: 'mdxJsxAttribute',
               name: 'isMobile',
-              value: isMobile,
+              value: isMobileMode,
             },
             {
               type: 'mdxJsxAttribute',
@@ -82,10 +87,15 @@ export const remarkCodeToDemo: Plugin<
               ...node,
               hasVisited: true,
             },
-            {
-              type: 'mdxJsxFlowElement',
-              name: `Demo${id}`,
-            },
+            isMobileMode
+              ? {
+                  type: 'mdxJsxFlowElement',
+                  name: null,
+                }
+              : {
+                  type: 'mdxJsxFlowElement',
+                  name: `Demo${id}`,
+                },
           ],
         });
       }

packages/cli/doc-plugin-preview/src/index.ts

@@ -7,6 +7,7 @@ import { toValidVarName } from './utils';
 export type Options = {
   /**
    * preview in mobile mode or not
+   * when isMobile is true, 1. aside will hide. 2. default preview component by iframe
    * @default false
    */
   isMobile: boolean;
@@ -34,9 +35,7 @@ export function pluginPreview(options?: Options): DocPlugin {
     async addPages(_config, _isProd, routes) {
       // init routeMeta
       routeMeta = routes;
-      if (!isMobile) {
-        return [];
-      }
+
       const files = routes.map(route => route.absolutePath);
       // Write the demo code ahead of time
       // Fix: rspack build error because demo file is not exist, probably the demo file was written in rspack build process?
@@ -54,10 +53,17 @@ export function pluginPreview(options?: Options): DocPlugin {
               if (node.lang === 'jsx' || node.lang === 'tsx') {
                 const { value } = node;
                 const isPure = node?.meta?.includes('pure');
-                // not transform pure code
+
+                // do not anything for pure mode
                 if (isPure) {
                   return;
                 }
+
+                // every code block can change their preview mode by meta
+                const isMobileMode =
+                  node?.meta?.includes('mobile') ||
+                  (!node?.meta?.includes('web') && isMobile);
+
                 const { pageName } = routeMeta.find(
                   meta => meta.absolutePath === filepath,
                 )!;
@@ -71,13 +77,19 @@ export function pluginPreview(options?: Options): DocPlugin {
                 );
 
                 const virtualModulePath = join(demoDir, `${id}.tsx`);
-                demoMeta[filepath] = demoMeta[filepath] ?? [];
-                const isExist = demoMeta[filepath].find(item => item.id === id);
-                if (!isExist) {
-                  demoMeta[filepath].push({
-                    id,
-                    virtualModulePath,
-                  });
+
+                if (isMobileMode) {
+                  // only add demoMeta in mobile mode
+                  demoMeta[filepath] = demoMeta[filepath] ?? [];
+                  const isExist = demoMeta[filepath].find(
+                    item => item.id === id,
+                  );
+                  if (!isExist) {
+                    demoMeta[filepath].push({
+                      id,
+                      virtualModulePath,
+                    });
+                  }
                 }
 
                 fs.ensureDirSync(join(demoDir));
@@ -109,7 +121,6 @@ export function pluginPreview(options?: Options): DocPlugin {
           .join(',')}];
         `;
       demoRuntimeModule.writeModule('virtual-meta', virtualMeta);
-      // only addPages in mobile mode
 
       return [
         {
@@ -158,7 +169,7 @@ export const pageType = "blank";
       `../static/${isMobile ? 'mobile' : 'web'}.css`,
     ),
     addSSGRoutes() {
-      return isMobile ? demoRoutes : [];
+      return demoRoutes;
     },
   };
 }

packages/cli/doc-plugin-preview/static/mobile.css

@@ -2,7 +2,7 @@
   --modern-sidebar-width: 210px;
   --modern-aside-width: 0;
 }
-:root .modern-doc div[class*='language-'] {
+:root .preview-code div[class*='language-'] {
   margin: 0;
   border-radius: 0;
   height: 100%

packages/cli/doc-plugin-preview/static/web.css

@@ -2,3 +2,9 @@
   --modern-sidebar-width: 210px;
   --modern-aside-width: 192px;
 }
+
+:root .preview-code div[class*='language-'] {
+  margin: 0;
+  border-radius: 0;
+  height: 100%
+}