@modern-js/plugin-docsite 0.0.0-bundle-deps-202110123508

package/src/features/utils/generate-files.ts

@@ -0,0 +1,238 @@
+import path from 'path';
+import { logger, fs } from '@modern-js/utils';
+import matter from 'gray-matter';
+import { startCase, camelCase, union, template, difference } from 'lodash';
+import GithubSlugger from 'github-slugger';
+import sortPaths from 'sort-paths';
+import visit from 'unist-util-visit';
+import toString from 'mdast-util-to-string';
+import u from 'unist-builder';
+import mdx from '@mdx-js/mdx';
+import babelParser, { ParserOptions } from '@modern-js/deps/compiled/babel/parser';
+import {
+  DOCS_RENDER_PATH,
+  MDX_DEFAULT_RENDERER,
+  UTILS_STATIC,
+} from '../constant';
+
+const loadTemplate = async (file: string, customPath = false) => {
+  let result = '';
+  if (customPath) {
+    result = await fs.readFile(file, 'utf-8');
+  } else {
+    result = await fs.readFile(path.join(UTILS_STATIC, file), 'utf-8');
+  }
+
+  return template(result, { interpolate: /<%=([\s\S]+?)%>/g });
+};
+
+interface Node {
+  value?: string;
+  type: string;
+  depth?: number;
+  url?: string;
+  data?: {
+    hProperties: {
+      id: string;
+    };
+  };
+  children?: Node[];
+}
+
+// eslint-disable-next-line max-statements
+async function handleFile(
+  appDirectory: string,
+  tmpDir: string,
+  file: string,
+  images: string[],
+) {
+  const moduleName = file.replace(/\.(md|mdx)$/, '');
+  const content = await fs.readFile(path.resolve(appDirectory, 'docs', file));
+  const parsed = matter(content);
+  if (!parsed.data.title) {
+    parsed.data.title = startCase(camelCase(path.basename(moduleName)));
+  }
+
+  const slugger = new GithubSlugger();
+  slugger.reset();
+
+  const babelOptions: ParserOptions = {
+    allowUndeclaredExports: true,
+    sourceType: 'module',
+  };
+  const imported: { id: string; node: any }[] = [];
+  const exported: { id: string; node: any }[] = [];
+  const toc: { slug: string; text: string }[] = [];
+
+  const modifier = () => (tree: any) => {
+    visit<Node>(tree, 'import', node => {
+      const parsedNode = babelParser.parse(node.value!, babelOptions);
+      const nodes = parsedNode.program.body;
+      nodes.forEach((n: any) => {
+        if (n.type === 'ImportDeclaration') {
+          n.specifiers.forEach((sp: any) => {
+            imported.push({
+              id: sp.local.name,
+              node,
+            });
+          });
+        }
+      });
+    });
+    visit<Node>(tree, 'export', node => {
+      const parsedNode = babelParser.parse(node.value!, babelOptions);
+      const nodes = parsedNode.program.body;
+      nodes.forEach((n: any) => {
+        if (n.type === 'ExportNamedDeclaration') {
+          n.specifiers.forEach((sp: any) => {
+            exported.push({
+              id: sp.exported.name,
+              node,
+            });
+          });
+        }
+      });
+    });
+    const extraImported = difference(
+      imported.map(n => n.id),
+      exported.map(n => n.id),
+    );
+    // we have to put the export statement with the import,
+    // otherwise the mdx's babel transformer cannot found
+    // the corresponding imports
+    extraImported.forEach(id => {
+      const { node } = imported.find(n => n.id === id)!;
+      node.value += `\nexport { ${id} };`;
+    });
+    visit<Node>(tree, 'heading', node => {
+      if (node.depth === 2) {
+        const slug = slugger.slug(toString(node));
+        node.data = { hProperties: { id: slug } };
+        toc.push({
+          slug,
+          text: toString(node),
+        });
+      }
+    });
+    visit<Node>(tree, 'root', node => {
+      (node.children || []).unshift(
+        u('heading', {
+          depth: 1,
+          children: [u('text', { value: parsed.data.title })],
+        }),
+      );
+    });
+    visit<Node>(tree, 'image', node => {
+      const { url } = node;
+      if (!url!.startsWith('http')) {
+        const fullPath = path.resolve(
+          path.dirname(path.resolve(appDirectory, 'docs', file)),
+          url!,
+        );
+        const relativePath = path.relative(
+          path.resolve(appDirectory, 'assets'),
+          fullPath,
+        );
+        if (relativePath.startsWith('..')) {
+          logger.warn(
+            `${url!} referenced in ${file} is not under the "assets" folder`,
+          );
+        } else {
+          images.push(relativePath);
+          node.url = `/${path.relative(
+            path.dirname(path.resolve(appDirectory, 'docs', file)),
+            path.resolve(appDirectory, 'docs/assets', relativePath),
+          )}`;
+        }
+      }
+    });
+  };
+
+  const transpiled = await mdx(parsed.content, { remarkPlugins: [modifier] });
+  const totalExported = union(
+    imported.map(n => n.id),
+    exported.map(n => n.id),
+  );
+  const outputFile = path.resolve(tmpDir, `${moduleName}/mdx.jsx`);
+  await fs.outputFile(outputFile, MDX_DEFAULT_RENDERER + transpiled, {
+    encoding: 'utf8',
+  });
+
+  const pageFile = path.resolve(tmpDir, `${moduleName}/index.jsx`);
+  const pageTemplate = await loadTemplate('docs-page.jsx.tpl');
+  const pageContent = pageTemplate({
+    moduleName,
+    toc: JSON.stringify(toc),
+    relRoot: path.relative(path.dirname(outputFile), tmpDir),
+    imports: totalExported.length
+      ? `import { ${totalExported.join(', ')} } from './mdx';`
+      : '',
+    imported: totalExported.join(','),
+  });
+  await fs.outputFile(pageFile, pageContent, { encoding: 'utf8' });
+  return {
+    ...parsed.data,
+    moduleName,
+    pageFile,
+  };
+}
+export async function generateFiles(
+  appDirectory: string,
+  tmpDir: string,
+  files: string[],
+  isDev: boolean,
+) {
+  await fs.remove(tmpDir);
+  await fs.ensureDir(tmpDir);
+  const images: string[] = [];
+
+  const meta = await Promise.all(
+    files.map(file => handleFile(appDirectory, tmpDir, file, images)),
+  );
+  const sorted: { moduleName: string; title: string }[] = sortPaths(
+    meta,
+    (e: { moduleName: string; title: string }) =>
+      e.moduleName.endsWith('index')
+        ? e.moduleName.replace(/index$/, '')
+        : `${e.moduleName}/`,
+    '/',
+  );
+  const routesTemplate = await loadTemplate('DocsRoutes.jsx.tpl');
+  await fs.outputFile(
+    path.resolve(tmpDir, 'DocsRoutes.jsx'),
+    routesTemplate({ meta: sorted }),
+  );
+  const pkgInfo = await fs.readJson(path.resolve(appDirectory, 'package.json'));
+  const entryTemplate = await loadTemplate('docs-entry.jsx.tpl');
+  await fs.outputFile(
+    path.resolve(tmpDir, 'docs-entry.jsx'),
+    entryTemplate({
+      basename: isDev
+        ? '/'
+        : `${DOCS_RENDER_PATH}/${pkgInfo.name}/${pkgInfo.version}`,
+    }),
+  );
+  await Promise.all(
+    ['DocsNav.jsx.tpl', 'DocsToc.jsx.tpl', 'docs.css'].map(async file =>
+      fs.copyFile(
+        path.resolve(UTILS_STATIC, file),
+        path.resolve(tmpDir, file.replace('.tpl', '')),
+      ),
+    ),
+  );
+  await fs.outputJson(
+    path.resolve(tmpDir, 'meta.json'),
+    sorted.map(({ title, moduleName }) => ({ title, moduleName })),
+    { spaces: 2 },
+  );
+  await fs.ensureDir(path.resolve(appDirectory, 'dist/docs/assets'));
+  await Promise.all(
+    Array.from(new Set(images)).map(file =>
+      fs.copyFile(
+        path.resolve(appDirectory, 'assets', file),
+        path.resolve(appDirectory, 'dist/docs/assets', file),
+      ),
+    ),
+  );
+  return sorted;
+}

package/src/features/utils/valid.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import * as glob from 'glob';
+import { chalk, fs } from '@modern-js/utils';
+
+interface ValidOption {
+  appDirectory: string;
+  docsDir: string;
+}
+
+export const valid = ({ appDirectory, docsDir }: ValidOption) => {
+  const docsAbsPath = path.join(appDirectory, docsDir);
+  const files: string[] = glob.sync(`${docsAbsPath}/**/*.{md,mdx}`);
+  if (!fs.existsSync(docsAbsPath) || files.length <= 0) {
+    console.info(
+      chalk.yellow(
+        'No docs found, create directory "./docs" and add md(x) files',
+      ),
+    );
+    return false;
+  }
+
+  return true;
+};

package/src/features/utils/webpack.ts

@@ -0,0 +1,107 @@
+import path from 'path';
+import { fs } from '@modern-js/utils';
+import HtmlWebpackPlugin from '@modern-js/deps/compiled/html-webpack-plugin';
+import webpack, {
+  Configuration,
+  WebpackPluginInstance,
+} from '@modern-js/deps/compiled/webpack';
+import { getWebpackConfig, WebpackConfigTarget } from '@modern-js/webpack';
+import { UTILS_STATIC } from '../constant';
+
+interface Alias {
+  [index: string]: string | false | string[];
+}
+
+export function generatorWebpackConfig(
+  appDirectory: string,
+  tmpDir: string,
+  isDev: boolean,
+): Configuration {
+  const originConfig: any = getWebpackConfig(WebpackConfigTarget.CLIENT);
+  const plugins = (
+    (originConfig.plugins || []) as WebpackPluginInstance[]
+  ).filter(p => p.constructor !== webpack.HotModuleReplacementPlugin);
+  const config: Configuration = {
+    mode: isDev ? 'development' : 'production',
+    context: tmpDir,
+    entry: { index: path.resolve(tmpDir, 'docs-entry.jsx') },
+    output: { path: path.resolve(appDirectory, 'dist/docs') },
+    resolve: originConfig.resolve || { alias: {} },
+    module: originConfig.module,
+    plugins: [
+      ...plugins,
+      new HtmlWebpackPlugin({
+        templateContent: fs.readFileSync(
+          path.resolve(UTILS_STATIC, 'index.html.ejs'),
+          'utf8',
+        ),
+      }),
+    ],
+  };
+
+  config.resolve!.modules = [
+    ...(config.resolve!.modules || []),
+    path.join(__dirname, '../../../../../', 'node_modules'),
+  ];
+  (config.resolve!.alias as Alias)['@assets'] = path.resolve(
+    appDirectory,
+    'assets',
+  );
+  (config.resolve!.alias as Alias)['@styles'] = path.resolve(
+    appDirectory,
+    'styles',
+  );
+  // fix this since react-live relies on core-js@2
+  (config.resolve!.alias as Alias)[
+    `${path.dirname(require.resolve('core-js'))}/fn`
+  ] = 'core-js/es';
+
+  const pkgJSON = JSON.parse(
+    fs.readFileSync(path.join(appDirectory, 'package.json'), 'utf-8'),
+  );
+
+  if (pkgJSON.dependencies.react || pkgJSON.devDependencies.react) {
+    (config.resolve!.alias as Alias).react = path.resolve('node_modules/react');
+  } else {
+    (config.resolve!.alias as Alias).react = path.resolve(
+      __dirname,
+      '../../../../../',
+      'node_modules',
+      'react',
+    );
+  }
+  if (
+    pkgJSON.dependencies['react-dom'] ||
+    pkgJSON.devDependencies['react-dom']
+  ) {
+    (config.resolve!.alias as Alias)['react-dom'] = path.resolve(
+      'node_modules/react-dom',
+    );
+  } else {
+    (config.resolve!.alias as Alias)['react-dom'] = path.resolve(
+      __dirname,
+      '../../../../../',
+      'node_modules',
+      'react-dom',
+    );
+  }
+
+  config.resolve!.fallback = {
+    path: require.resolve('path-browserify'),
+  };
+  return config;
+}
+
+export async function runWebpack(config: Configuration) {
+  await new Promise((resolve, reject) => {
+    webpack(config).run((err, stats) => {
+      if (err) {
+        reject(err);
+      } else if (stats?.hasErrors()) {
+        reject(stats?.compilation.errors);
+      } else {
+        resolve(stats);
+      }
+    });
+  });
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+import { Import } from '@modern-js/utils';
+
+const core: typeof import('@modern-js/core') = Import.lazy(
+  '@modern-js/core',
+  require,
+);
+const features: typeof import('./features') = Import.lazy(
+  './features',
+  require,
+);
+
+export default core.createPlugin(
+  () => ({
+    commands({ program }: any) {
+      const { appDirectory } = core.useAppContext();
+      const devCommand = program.commandsMap.get('dev');
+      if (devCommand) {
+        devCommand.command('docs').action(async () => {
+          await features.buildDocs({ appDirectory, isDev: true });
+        });
+      }
+    },
+    // module-tools menu mode
+    moduleToolsMenu() {
+      const { appDirectory } = core.useAppContext();
+      return {
+        name: 'Docsite 调试',
+        value: 'docsite',
+        runTask: async () => features.buildDocs({ appDirectory, isDev: true }),
+      };
+    },
+    platformBuild() {
+      return {
+        name: 'docsite',
+        title: 'Run Docsite log',
+        taskPath: require.resolve('./build-task'),
+        params: [],
+      };
+    },
+  }),
+  { name: '@modern-js/plugin-docsite' },
+);

package/src/type.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="@modern-js/module-tools-hooks" />
+declare module 'find-node-modules';
+declare module '@mdx-js/mdx';
+declare module 'sort-paths';

package/static/DocsNav.jsx.tpl

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import Menu from 'antd/es/menu';
+
+const MenuItem = Menu.Item;
+const { SubMenu } = Menu;
+
+const Container = styled.div`
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 2rem 0;
+  border-right: 1px solid var(--theme-border);
+  overflow: auto;
+`;
+
+const DocsNav = ({ meta }) => {
+  return (
+    <Container>
+      <Menu>
+        {meta.map(page => {
+          const parts = page.moduleName.split(/\//g) || [];
+          if (parts[parts.length - 1] === 'index') {
+            parts.pop();
+          }
+          const level = Math.max(parts.length, 1);
+
+          return (
+            <MenuItem
+              key={page.moduleName}
+              style={{ paddingLeft: `${level + 0.5}rem` }}>
+              <Link to={`/${page.moduleName}`}>{page.title}</Link>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </Container>
+  );
+};
+
+export default DocsNav;

package/static/DocsRoutes.jsx.tpl

@@ -0,0 +1,19 @@
+import React from 'react';
+import {
+  Switch,
+  Route,
+  Redirect,
+} from "react-router-dom";
+
+const DocsRoutes = ({ meta }) => {
+  return (
+    <Switch>
+      <Redirect exact from='/' to="/<%= meta[0].moduleName %>" />
+      <% meta.forEach(function(page) { %>
+      <Route path={'/<%= page.moduleName %>'} component={require('./<%= page.moduleName %>/index').default}/>
+      <% }); %>
+    </Switch>
+  );
+};
+
+export default DocsRoutes;

package/static/DocsToc.jsx.tpl

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+import Anchor from 'antd/es/anchor';
+
+const AnchorLink = Anchor.Link;
+
+const DocsToc = ({ entries }) => {
+  return (
+    <Anchor affix={false} scrollContainer=".markdown-body">
+      {entries.map(entry => (
+        <AnchorLink
+          key={entry.slug}
+          href={`#${entry.slug}`}
+          title={entry.text}
+        />
+      ))}
+    </Anchor>
+  );
+};
+export default DocsToc;

package/static/docs-entry.jsx.tpl

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from 'react-dom';
+import styled from 'styled-components';
+import { BrowserRouter as Router } from 'react-router-dom';
+import DocsNav from './DocsNav';
+import DocsRoutes from './DocsRoutes';
+import meta from './meta.json';
+import 'antd/dist/antd.css';
+import './docs.css';
+
+const NavWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 12rem;
+  overflow-y: auto;
+`;
+const MainWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 12rem;
+  right: 0;
+`;
+
+const App = () => (
+  <Router basename="<%= basename || '/' %>">
+    <NavWrapper>
+      <DocsNav meta={meta} />
+    </NavWrapper>
+    <MainWrapper>
+      <DocsRoutes />
+    </MainWrapper>
+  </Router>
+);
+
+const root = document.createElement('div');
+root.setAttribute('id', 'root');
+document.body.append(root);
+render(<App />, document.querySelector('#root'));

package/static/docs-page.jsx.tpl

@@ -0,0 +1,107 @@
+import React from 'react';
+import { MDXProvider, mdx } from '@mdx-js/react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
+import styled from 'styled-components';
+import DocsNav from './<%= relRoot %>/DocsNav';
+import DocsToc from './<%= relRoot %>/DocsToc';
+import Main from './mdx';
+<%= imports %>
+
+const CodeBlock = ({ children, className, live, render }) => {
+  const language = className.replace(/language-/, '');
+  if (live) {
+    return (
+      <div style={{ marginTop: '40px' }}>
+        <LiveProvider
+          code={children.trim()}
+          transformCode={code => `/** @jsx mdx */${code}`}
+          scope={{
+            mdx,
+            <%= imported %>
+          }}>
+          <LivePreview style={{
+            boxShadow: '0 0 10px 5px gray',
+            margin: '1rem 0',
+            padding: '1rem',
+          }}/>
+          <LiveError />
+          <LiveEditor style={{ backgroundColor: 'black', color: 'white' }} />
+        </LiveProvider>
+      </div>
+    );
+  }
+  if (render) {
+    return (
+      <div style={{ marginTop: '40px' }}>
+        <LiveProvider code={children.trim()}
+          transformCode={code => `/** @jsx mdx */${code}`}
+          scope={{
+            mdx,
+            <%= imported %>
+          }}>
+          <LivePreview style={{
+            boxShadow: '0 0 10px 5px gray',
+            margin: '1rem 0',
+            padding: '1rem',
+          }}/>
+        </LiveProvider>
+      </div>
+    );
+  }
+
+  return (
+    <Highlight {...defaultProps} code={children.trim()} language={language}>
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className} style={{ ...style, padding: '20px' }}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
+
+const components = {
+  pre: props => <div {...props} />,
+  code: CodeBlock,
+  <%= imported %>
+};
+
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+const MainWrapper = styled.div`
+  flex: 1;
+  overflow-y: scroll;
+  padding-right: 230px !important;
+`;
+const TocWrapper = styled.div`
+  position: fixed;
+  top: 2rem;
+  right: 1.5rem;
+`;
+
+const Page = () => {
+  return (
+    <Wrapper>
+      <MainWrapper className="markdown-body">
+        <MDXProvider components={components}>
+          <Main />
+        </MDXProvider>
+      </MainWrapper>
+      <TocWrapper>
+        <DocsToc entries={JSON.parse('<%= toc %>')}/>
+      </TocWrapper>
+    </Wrapper>
+  );
+};
+
+export default Page;