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

package/dist/js/node/features/utils/generate-files.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateFiles = generateFiles;
+
+var _difference2 = _interopRequireDefault(require("lodash/difference"));
+
+var _template2 = _interopRequireDefault(require("lodash/template"));
+
+var _union2 = _interopRequireDefault(require("lodash/union"));
+
+var _camelCase2 = _interopRequireDefault(require("lodash/camelCase"));
+
+var _startCase2 = _interopRequireDefault(require("lodash/startCase"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("@modern-js/utils");
+
+var _grayMatter = _interopRequireDefault(require("gray-matter"));
+
+var _githubSlugger = _interopRequireDefault(require("github-slugger"));
+
+var _sortPaths = _interopRequireDefault(require("sort-paths"));
+
+var _unistUtilVisit = _interopRequireDefault(require("unist-util-visit"));
+
+var _mdastUtilToString = _interopRequireDefault(require("mdast-util-to-string"));
+
+var _unistBuilder = _interopRequireDefault(require("unist-builder"));
+
+var _mdx = _interopRequireDefault(require("@mdx-js/mdx"));
+
+var _parser = _interopRequireDefault(require("@modern-js/deps/compiled/babel/parser"));
+
+var _constant = require("../constant");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const loadTemplate = async (file, customPath = false) => {
+  let result = '';
+
+  if (customPath) {
+    result = await _utils.fs.readFile(file, 'utf-8');
+  } else {
+    result = await _utils.fs.readFile(_path.default.join(_constant.UTILS_STATIC, file), 'utf-8');
+  }
+
+  return (0, _template2.default)(result, {
+    interpolate: /<%=([\s\S]+?)%>/g
+  });
+};
+
+// eslint-disable-next-line max-statements
+async function handleFile(appDirectory, tmpDir, file, images) {
+  const moduleName = file.replace(/\.(md|mdx)$/, '');
+  const content = await _utils.fs.readFile(_path.default.resolve(appDirectory, 'docs', file));
+  const parsed = (0, _grayMatter.default)(content);
+
+  if (!parsed.data.title) {
+    parsed.data.title = (0, _startCase2.default)((0, _camelCase2.default)(_path.default.basename(moduleName)));
+  }
+
+  const slugger = new _githubSlugger.default();
+  slugger.reset();
+  const babelOptions = {
+    allowUndeclaredExports: true,
+    sourceType: 'module'
+  };
+  const imported = [];
+  const exported = [];
+  const toc = [];
+
+  const modifier = () => tree => {
+    (0, _unistUtilVisit.default)(tree, 'import', node => {
+      const parsedNode = _parser.default.parse(node.value, babelOptions);
+
+      const nodes = parsedNode.program.body;
+      nodes.forEach(n => {
+        if (n.type === 'ImportDeclaration') {
+          n.specifiers.forEach(sp => {
+            imported.push({
+              id: sp.local.name,
+              node
+            });
+          });
+        }
+      });
+    });
+    (0, _unistUtilVisit.default)(tree, 'export', node => {
+      const parsedNode = _parser.default.parse(node.value, babelOptions);
+
+      const nodes = parsedNode.program.body;
+      nodes.forEach(n => {
+        if (n.type === 'ExportNamedDeclaration') {
+          n.specifiers.forEach(sp => {
+            exported.push({
+              id: sp.exported.name,
+              node
+            });
+          });
+        }
+      });
+    });
+    const extraImported = (0, _difference2.default)(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} };`;
+    });
+    (0, _unistUtilVisit.default)(tree, 'heading', node => {
+      if (node.depth === 2) {
+        const slug = slugger.slug((0, _mdastUtilToString.default)(node));
+        node.data = {
+          hProperties: {
+            id: slug
+          }
+        };
+        toc.push({
+          slug,
+          text: (0, _mdastUtilToString.default)(node)
+        });
+      }
+    });
+    (0, _unistUtilVisit.default)(tree, 'root', node => {
+      (node.children || []).unshift((0, _unistBuilder.default)('heading', {
+        depth: 1,
+        children: [(0, _unistBuilder.default)('text', {
+          value: parsed.data.title
+        })]
+      }));
+    });
+    (0, _unistUtilVisit.default)(tree, 'image', node => {
+      const {
+        url
+      } = node;
+
+      if (!url.startsWith('http')) {
+        const fullPath = _path.default.resolve(_path.default.dirname(_path.default.resolve(appDirectory, 'docs', file)), url);
+
+        const relativePath = _path.default.relative(_path.default.resolve(appDirectory, 'assets'), fullPath);
+
+        if (relativePath.startsWith('..')) {
+          _utils.logger.warn(`${url} referenced in ${file} is not under the "assets" folder`);
+        } else {
+          images.push(relativePath);
+          node.url = `/${_path.default.relative(_path.default.dirname(_path.default.resolve(appDirectory, 'docs', file)), _path.default.resolve(appDirectory, 'docs/assets', relativePath))}`;
+        }
+      }
+    });
+  };
+
+  const transpiled = await (0, _mdx.default)(parsed.content, {
+    remarkPlugins: [modifier]
+  });
+  const totalExported = (0, _union2.default)(imported.map(n => n.id), exported.map(n => n.id));
+
+  const outputFile = _path.default.resolve(tmpDir, `${moduleName}/mdx.jsx`);
+
+  await _utils.fs.outputFile(outputFile, _constant.MDX_DEFAULT_RENDERER + transpiled, {
+    encoding: 'utf8'
+  });
+
+  const pageFile = _path.default.resolve(tmpDir, `${moduleName}/index.jsx`);
+
+  const pageTemplate = await loadTemplate('docs-page.jsx.tpl');
+  const pageContent = pageTemplate({
+    moduleName,
+    toc: JSON.stringify(toc),
+    relRoot: _path.default.relative(_path.default.dirname(outputFile), tmpDir),
+    imports: totalExported.length ? `import { ${totalExported.join(', ')} } from './mdx';` : '',
+    imported: totalExported.join(',')
+  });
+  await _utils.fs.outputFile(pageFile, pageContent, {
+    encoding: 'utf8'
+  });
+  return _objectSpread(_objectSpread({}, parsed.data), {}, {
+    moduleName,
+    pageFile
+  });
+}
+
+async function generateFiles(appDirectory, tmpDir, files, isDev) {
+  await _utils.fs.remove(tmpDir);
+  await _utils.fs.ensureDir(tmpDir);
+  const images = [];
+  const meta = await Promise.all(files.map(file => handleFile(appDirectory, tmpDir, file, images)));
+  const sorted = (0, _sortPaths.default)(meta, e => e.moduleName.endsWith('index') ? e.moduleName.replace(/index$/, '') : `${e.moduleName}/`, '/');
+  const routesTemplate = await loadTemplate('DocsRoutes.jsx.tpl');
+  await _utils.fs.outputFile(_path.default.resolve(tmpDir, 'DocsRoutes.jsx'), routesTemplate({
+    meta: sorted
+  }));
+  const pkgInfo = await _utils.fs.readJson(_path.default.resolve(appDirectory, 'package.json'));
+  const entryTemplate = await loadTemplate('docs-entry.jsx.tpl');
+  await _utils.fs.outputFile(_path.default.resolve(tmpDir, 'docs-entry.jsx'), entryTemplate({
+    basename: isDev ? '/' : `${_constant.DOCS_RENDER_PATH}/${pkgInfo.name}/${pkgInfo.version}`
+  }));
+  await Promise.all(['DocsNav.jsx.tpl', 'DocsToc.jsx.tpl', 'docs.css'].map(async file => _utils.fs.copyFile(_path.default.resolve(_constant.UTILS_STATIC, file), _path.default.resolve(tmpDir, file.replace('.tpl', '')))));
+  await _utils.fs.outputJson(_path.default.resolve(tmpDir, 'meta.json'), sorted.map(({
+    title,
+    moduleName
+  }) => ({
+    title,
+    moduleName
+  })), {
+    spaces: 2
+  });
+  await _utils.fs.ensureDir(_path.default.resolve(appDirectory, 'dist/docs/assets'));
+  await Promise.all(Array.from(new Set(images)).map(file => _utils.fs.copyFile(_path.default.resolve(appDirectory, 'assets', file), _path.default.resolve(appDirectory, 'dist/docs/assets', file))));
+  return sorted;
+}

package/dist/js/node/features/utils/valid.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.valid = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var glob = _interopRequireWildcard(require("glob"));
+
+var _utils = require("@modern-js/utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const valid = ({
+  appDirectory,
+  docsDir
+}) => {
+  const docsAbsPath = _path.default.join(appDirectory, docsDir);
+
+  const files = glob.sync(`${docsAbsPath}/**/*.{md,mdx}`);
+
+  if (!_utils.fs.existsSync(docsAbsPath) || files.length <= 0) {
+    console.info(_utils.chalk.yellow('No docs found, create directory "./docs" and add md(x) files'));
+    return false;
+  }
+
+  return true;
+};
+
+exports.valid = valid;

package/dist/js/node/features/utils/webpack.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generatorWebpackConfig = generatorWebpackConfig;
+exports.runWebpack = runWebpack;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _utils = require("@modern-js/utils");
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("@modern-js/deps/compiled/html-webpack-plugin"));
+
+var _webpack = _interopRequireDefault(require("@modern-js/deps/compiled/webpack"));
+
+var _webpack2 = require("@modern-js/webpack");
+
+var _constant = require("../constant");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function generatorWebpackConfig(appDirectory, tmpDir, isDev) {
+  const originConfig = (0, _webpack2.getWebpackConfig)(_webpack2.WebpackConfigTarget.CLIENT);
+  const plugins = (originConfig.plugins || []).filter(p => p.constructor !== _webpack.default.HotModuleReplacementPlugin);
+  const config = {
+    mode: isDev ? 'development' : 'production',
+    context: tmpDir,
+    entry: {
+      index: _path.default.resolve(tmpDir, 'docs-entry.jsx')
+    },
+    output: {
+      path: _path.default.resolve(appDirectory, 'dist/docs')
+    },
+    resolve: originConfig.resolve || {
+      alias: {}
+    },
+    module: originConfig.module,
+    plugins: [...plugins, new _htmlWebpackPlugin.default({
+      templateContent: _utils.fs.readFileSync(_path.default.resolve(_constant.UTILS_STATIC, 'index.html.ejs'), 'utf8')
+    })]
+  };
+  config.resolve.modules = [...(config.resolve.modules || []), _path.default.join(__dirname, '../../../../../', 'node_modules')];
+  config.resolve.alias['@assets'] = _path.default.resolve(appDirectory, 'assets');
+  config.resolve.alias['@styles'] = _path.default.resolve(appDirectory, 'styles'); // fix this since react-live relies on core-js@2
+
+  config.resolve.alias[`${_path.default.dirname(require.resolve('core-js'))}/fn`] = 'core-js/es';
+  const pkgJSON = JSON.parse(_utils.fs.readFileSync(_path.default.join(appDirectory, 'package.json'), 'utf-8'));
+
+  if (pkgJSON.dependencies.react || pkgJSON.devDependencies.react) {
+    config.resolve.alias.react = _path.default.resolve('node_modules/react');
+  } else {
+    config.resolve.alias.react = _path.default.resolve(__dirname, '../../../../../', 'node_modules', 'react');
+  }
+
+  if (pkgJSON.dependencies['react-dom'] || pkgJSON.devDependencies['react-dom']) {
+    config.resolve.alias['react-dom'] = _path.default.resolve('node_modules/react-dom');
+  } else {
+    config.resolve.alias['react-dom'] = _path.default.resolve(__dirname, '../../../../../', 'node_modules', 'react-dom');
+  }
+
+  config.resolve.fallback = {
+    path: require.resolve('path-browserify')
+  };
+  return config;
+}
+
+async function runWebpack(config) {
+  await new Promise((resolve, reject) => {
+    (0, _webpack.default)(config).run((err, stats) => {
+      if (err) {
+        reject(err);
+      } else if (stats !== null && stats !== void 0 && stats.hasErrors()) {
+        reject(stats === null || stats === void 0 ? void 0 : stats.compilation.errors);
+      } else {
+        resolve(stats);
+      }
+    });
+  });
+}

package/dist/js/node/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("@modern-js/utils");
+
+const core = _utils.Import.lazy('@modern-js/core', require);
+
+const features = _utils.Import.lazy('./features', require);
+
+var _default = core.createPlugin(() => ({
+  commands({
+    program
+  }) {
+    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'
+});
+
+exports.default = _default;

package/dist/js/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/dist/js/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/dist/js/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/dist/js/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/dist/js/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;