@modern-js/plugin-docsite 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @modern-js/plugin-docsite
 
+## 1.2.1
+
+### Patch Changes
+
+- 83166714: change .npmignore
+- Updated dependencies [83166714]
+- Updated dependencies [c3de9882]
+- Updated dependencies [33ff48af]
+  - @modern-js/core@1.3.2
+  - @modern-js/webpack@1.2.1
+  - @modern-js/utils@1.2.2
+
 ## 1.2.0
 
 ### Minor Changes

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.2.0",
+  "version": "1.2.1",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/js/node/index.js",
@@ -37,8 +37,8 @@
     "@babel/runtime": "^7",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@modern-js/utils": "^1.2.0",
-    "@modern-js/webpack": "^1.2.0",
+    "@modern-js/utils": "^1.2.2",
+    "@modern-js/webpack": "^1.2.1",
     "antd": "^4.16.13",
     "chokidar": "^3.5.2",
     "core-js": "^3.17.2",
@@ -62,7 +62,7 @@
     "webpack-dev-server": "^4.1.1"
   },
   "devDependencies": {
-    "@modern-js/module-tools-hooks": "^1.2.0",
+    "@modern-js/module-tools-hooks": "^1.2.1",
     "@types/core-js": "^2.5.5",
     "@types/github-slugger": "^1.3.0",
     "@types/glob": "^7.1.4",
@@ -73,13 +73,13 @@
     "@types/react-dom": "^17",
     "@types/webpack-dev-server": "^4.1.0",
     "typescript": "^4",
-    "@modern-js/core": "^1.3.0",
+    "@modern-js/core": "^1.3.2",
     "@scripts/build": "0.0.0",
     "jest": "^27",
     "@scripts/jest-config": "0.0.0"
   },
   "peerDependencies": {
-    "@modern-js/core": "^1.3.0"
+    "@modern-js/core": "^1.3.2"
   },
   "sideEffects": false,
   "modernConfig": {

package/src/build-task.ts

@@ -1,35 +0,0 @@
-import type { IAppContext, CoreOptions } from '@modern-js/core';
-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,
-);
-
-interface IBuildTaskOption {
-  appContext: IAppContext;
-}
-
-const taskMain = async ({ appContext }: IBuildTaskOption) => {
-  const { appDirectory } = appContext;
-  await features.buildDocs({ appDirectory });
-};
-
-(async () => {
-  let options: CoreOptions | undefined;
-  if (process.env.CORE_INIT_OPTION_FILE) {
-    ({ options } = require(process.env.CORE_INIT_OPTION_FILE));
-  }
-  const { appContext } = await core.cli.init([], options);
-  await core.manager.run(async () => {
-    try {
-      await taskMain({ appContext });
-    } catch (e: any) {
-      console.error(e.message);
-    }
-  });
-})();

package/src/features/build.ts

@@ -1,31 +0,0 @@
-import { logger, Import, chalk } from '@modern-js/utils';
-import type { Configuration } from 'webpack';
-
-const wp: typeof import('./utils/webpack') = Import.lazy(
-  './utils/webpack',
-  require,
-);
-const gen: typeof import('./utils/generate-files') = Import.lazy(
-  './utils/generate-files',
-  require,
-);
-
-// eslint-disable-next-line max-params
-export async function build(
-  appDirectory: string,
-  tmpDir: string,
-  files: string[],
-  webpackConfig: Configuration,
-  isDev: boolean,
-) {
-  const meta = await gen.generateFiles(appDirectory, tmpDir, files, isDev);
-  try {
-    await wp.runWebpack(webpackConfig);
-    logger.log(chalk.green('build docs successful'));
-    return meta;
-  } catch (err: any) {
-    logger.error('failed to build docs');
-    logger.error(err);
-    return null;
-  }
-}

package/src/features/constant.ts

@@ -1,8 +0,0 @@
-import path from 'path';
-
-export const UTILS_STATIC = path.join(__dirname, '../../static');
-export const DOCS_RENDER_PATH = '/api/v1/docs/render';
-export const MDX_DEFAULT_RENDERER = `
-import React from 'react'
-import { mdx } from '@mdx-js/react'
-`;

package/src/features/dev.ts

@@ -1,37 +0,0 @@
-import path from 'path';
-import { logger } from '@modern-js/utils';
-import webpack, { Configuration } from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
-import { chokidarFile } from './utils/chokidar';
-import { generateFiles } from './utils/generate-files';
-
-// eslint-disable-next-line max-params
-export async function dev(
-  appDirectory: string,
-  tmpDir: string,
-  files: string[],
-  webpackConfig: Configuration,
-  isDev: boolean,
-  port: number,
-) {
-  await generateFiles(appDirectory, tmpDir, files, isDev);
-  const compiler = webpack(webpackConfig);
-  const server = new WebpackDevServer(
-    {
-      host: '0.0.0.0',
-      port,
-      historyApiFallback: true,
-      static: {
-        directory: path.resolve(appDirectory, 'assets'),
-        publicPath: '/assets',
-      },
-    } as WebpackDevServer.Configuration,
-    compiler as any,
-  );
-
-  server.startCallback(() => {
-    logger.info(`Starting server on http://localhost:${port}`);
-  });
-
-  chokidarFile(appDirectory, tmpDir, isDev);
-}

package/src/features/index.ts

@@ -1,68 +0,0 @@
-import path from 'path';
-import { fs, Import, logger } from '@modern-js/utils';
-import type { Configuration } from 'webpack';
-import { valid } from './utils/valid';
-
-const buildFeat: typeof import('./build') = Import.lazy('./build', require);
-const devFeat: typeof import('./dev') = Import.lazy('./dev', require);
-const wp: typeof import('./utils/webpack') = Import.lazy(
-  './utils/webpack',
-  require,
-);
-const glob: typeof import('glob') = Import.lazy('glob', require);
-
-const DEFAULT_PORT = 5000;
-
-interface IBuildDocsParams {
-  appDirectory: string;
-  webpackConfig?: Configuration;
-  isDev?: boolean;
-  port?: number;
-}
-export async function buildDocs({
-  appDirectory,
-  isDev = false,
-  port = DEFAULT_PORT,
-}: IBuildDocsParams) {
-  if (!valid({ appDirectory, docsDir: 'docs' })) {
-    return;
-  }
-  const docsDir = path.resolve(appDirectory, 'docs');
-  if (!fs.pathExistsSync(docsDir)) {
-    return;
-  }
-  const files = glob.sync('**/*.{md,mdx}', {
-    cwd: docsDir,
-    ignore: '**/_*',
-  });
-  if (files.length === 0) {
-    logger.warn('not find md(x) files');
-    return;
-  }
-  const tmpDir = path.join(appDirectory, './node_modules/.modern-js/docs');
-  fs.ensureDirSync(tmpDir);
-  const finalWebpackConfig = wp.generatorWebpackConfig(
-    appDirectory,
-    tmpDir,
-    isDev,
-  );
-  if (!isDev) {
-    logger.info('build docs');
-    await buildFeat.build(
-      appDirectory,
-      tmpDir,
-      files,
-      finalWebpackConfig,
-      false,
-    );
-  } else {
-    await devFeat.dev(
-      appDirectory,
-      tmpDir,
-      files,
-      finalWebpackConfig,
-      true,
-      port,
-    );
-  }
-}

package/src/features/utils/chokidar.ts

@@ -1,44 +0,0 @@
-import path from 'path';
-import { logger } from '@modern-js/utils';
-import chokidar from 'chokidar';
-import glob from 'glob';
-import { generateFiles } from './generate-files';
-
-export function chokidarFile(
-  appDirectory: string,
-  tmpDir: string,
-  isDev: boolean,
-) {
-  let dirty = false;
-  let building = false;
-  chokidar
-    .watch('docs/**/*.{md,mdx}', {
-      cwd: appDirectory,
-      ignoreInitial: true,
-    })
-    .on('all', async () => {
-      if (building) {
-        dirty = true;
-      } else {
-        building = true;
-        dirty = false;
-
-        logger.info('changed, collect and rebuild docs');
-        const files = glob.sync('**/*.{md,mdx}', {
-          cwd: path.resolve(appDirectory, 'docs'),
-          ignore: '**/_*',
-        });
-
-        if (files.length) {
-          await generateFiles(appDirectory, tmpDir, files, isDev);
-          logger.info('built');
-        }
-        // eslint-disable-next-line require-atomic-updates
-        building = false;
-
-        if (dirty) {
-          await generateFiles(appDirectory, tmpDir, files, isDev);
-        }
-      }
-    });
-}

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

@@ -1,238 +0,0 @@
-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 '@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

@@ -1,23 +0,0 @@
-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

@@ -1,114 +0,0 @@
-import path from 'path';
-import { fs } from '@modern-js/utils';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import webpack, { Configuration, WebpackPluginInstance } from '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',
-        ),
-      }),
-    ],
-  };
-  const docsiteNodeModules = [
-    // for yarn
-    path.dirname(require.resolve('@modern-js/plugin-docsite/package.json')),
-    // for pnpm
-    path.resolve(
-      path.dirname(require.resolve('@modern-js/plugin-docsite/package.json')),
-      '../..',
-    ),
-  ];
-
-  // maybe check if outside appDir or monorepoDir
-  config.resolve!.modules = [
-    ...(config.resolve!.modules || []),
-    ...docsiteNodeModules,
-  ];
-  (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

@@ -1,42 +0,0 @@
-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

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