Use docusaurus as a wrapped document generator in node_modules

[cangSDARM]

our structure:

- packages
   |-- doc-gen
        |-- internal-documentaries
        |-- internal-static-files
        |-- node_modules
             |-- docusaurus
             |-- react
             |-- @mdx-js/react
   |-- project
        |-- docs
        |-- static
        |-- node_modules
             |-- doc-gen

There are 3 problems (1 solved):

1. I hope that only the doc-gen project depends on react and @mdx-react, but now an error will be reported under the project project, indicating that react and @mdx-react are not installed.
2. It seems that internal-static-files cannot be configured through staticDirectories, and it still only reads static in the project directory.
3. The env variable DOCUSAURUS_GENERATED_FILES_DIR_NAME doesn't seem to work. I want the output directory to be project/node_modules/doc-gen/.docusaurus, now it will always be generated in project/.docusaurus

update:
staticDirectories supports, require a abspath.

//docusaurus.config.js
const appDirectory = fs.realpathSync(process.cwd());

const resolve = {
  app: (...relativePaths) => {
    const p = path.resolve(appDirectory, ...relativePaths);
    console.log(p);
    return p;
  },
  src: (relativePath) => {
    const p = path.resolve(__dirname, relativePath);
    console.log(p);
    return p;
  },
};
config.staticDirectories = [resolve.src("./static"), "static"];

[slorber]

Please create a simple repro:

• init a new site in commit 1
• add your changes in commit 2 so that we can clearly see the diff

It's hard to understand what you are trying to do here and what problems you encounter.

Also it's hard to understand why you want certain things, like changing the location of .docusaurus folder using an env variable that we don't even document afaik

[cangSDARM]

https://codesandbox.io/s/tender-greider-wpiwip?file=/README.md

I built the relevant structure in codesandbox. There is no error with yarn, although the third point is not solved.

Using npm should be able to reproduce all the problems, but the npm version of codesandbox is too low to support worksapces

[slorber]

@cangSDARM this sandbox does not even start for me

Also please generate everything ahead of time so that we can inspect this easily

I see a command here, have no idea what it's supposed to do, can't you pregenerate the file you need?

  "scripts": {
    "start": "doc-gen -d ./docs -id outer-doc -base out -edit https://www.google.com/ -tags out-tags -l OutDoc"
  },

The sandbox does not even look like the FS structure you described above 🤷‍♂️

please also give very precise instructions on what to look at in this sandbox (once it is fixed)

---

I have very limited time to dedicate to help you on this. Please do the most you can to present your problem in a very easy to understand way, otherwise I'll have to ignore this and let the community help you

[cangSDARM]

Sorry I didn't describe it very clearly, although it is written in the README of the project :). Due to "some issue" with codesandbox, the doc-gen item is not synced to the interface, but it does exist in the container for that example and is only accessible via the terminal.

In a nutshell, you can start by doing the following (in the terminal):

1. cd libs/doc-test
2. yarn start (if using npm, some errors shows up. First codesandbox is not support workspaces for npm; second, as I mentioned before)
3. Refresh the Browser inside codesandbox, you can see the refreshed project example at this time
4. Navigate to /out/start or /inner/start in the inner Browser (sorry for not handling indexing)

Out part should looks like this (inner part similar):

[cangSDARM]

I wrote a simple plugin to solve problem one. The main reason for problem 1 is the configuration path of babel and the path problem when webpack resolves dependencies

const {
  mergeWithCustomize,
  customizeArray,
  customizeObject,
} = require("webpack-merge");
const fs = require("fs");

const resolve = {
  src: (relativePath) => {
    const p = path.resolve(__dirname, relativePath);
    return p;
  },
  realpath: (dir = ".") => fs.realpathSync(dir),
};

function excludeJsRule(rules) {
  return Array.from(rules || [])?.filter(
    (role) => !String(role.test).includes("sx")
  );
}

function writeFile(isServer, content) {
  const fileName = `./.runtime.webpack.${isServer}.js`;
  fs.writeFile(
    resolve.app(fileName),
    `module.exports=${JSON.stringify(
      content,
      (k, v) => (v instanceof RegExp ? v.source : v),
      "\t"
    )}`,
    { flag: "w+" },
    (e) => e && console.error("write into %s failed!", fileName)
  );
}

module.exports = function (context, options) {
  const debug = options.debugger ?? false;
  return {
    name: "dependencies-resolver",
    configureWebpack(config, isServer, utils) {
      const rules = excludeJsRule(config?.module?.rules);
      const returnedConfig = {
        mergeStrategy: {
          "module.rules": "replace",
          "resolve.modules": "replace",
          "resolveLoader.modules": "replace",
        },
        resolve: {
          fallback: {
            "@mdx-js": resolve.src("./node_modules/@mdx-js"),
          },
          modules: [
            resolve.src("./node_modules"),
            resolve.src("./node_modules/@docusaurus/core/node_modules"),
          ],
        },
        resolveLoader: {
          modules: [resolve.src("./node_modules")],
        },
        module: {
          rules: [
            {
              test: /\.(j|t)sx?$/,
              use: {
                loader: require.resolve("./node_modules/babel-loader"),
                options: {
                  babelrc: false,
                  cwd: resolve.src("."),
                  configFile: resolve.src("./babel.config.js"),
                  caller: { name: isServer ? "server" : "client" },
                },
              },
            },
            ...rules,
          ],
        },
      };
      if (debug) {
        writeFile(
          isServer,
          mergeWithCustomize({
            // @ts-ignore
            customizeObject: customizeObject(returnedConfig.mergeStrategy),
            // @ts-ignore
            customizeArray: customizeArray(returnedConfig.mergeStrategy),
          })(config, returnedConfig)
        );
      }
      return returnedConfig;
    },
  };
};

Now only problem 3 remains, and it seems that it cannot be modified through the application layer