How to use the @codesandbox/common/lib/utils/path.join function in @codesandbox/common

async function addAngularJSONResources(manager) {
  const { parsed } = manager.configurations['angular-config'];

  const { defaultProject } = parsed;
  const project = parsed.projects[defaultProject];
  const { build } = project.architect;

  if (build.options) {
    const { styles = [], scripts = [] } = build.options;

    /* eslint-disable no-await-in-loop */
    for (let i = 0; i < styles.length; i++) {
      const p = styles[i];

      const finalPath = absolute(join(project.root, p.input || p));

      const tModule = await manager.resolveTranspiledModuleAsync(
        finalPath,
        null
      );

      await tModule.transpile(manager);
      tModule.setIsEntry(true);
      tModule.evaluate(manager);
    }

    const scriptTModules = await Promise.all(
      scripts.map(async p => {
        const finalPath = absolute(join(project.root, p));
        const tModule = await manager.resolveTranspiledModuleAsync(
          finalPath,

try {
    const foundPackageJSONPath = await resolvePath(
      pathUtils.join(dependencyName, 'package.json'),
      currentTModule,
      manager,
      defaultExtensions
    );

    // If the dependency is in the root we get it from the manifest, as the manifest
    // contains all the versions that we really wanted to resolve in the first place.
    // An example of this is csb.dev packages, the package.json version doesn't say the
    // actual version, but the semver it relates to. In this case we really want to have
    // the actual url
    if (
      foundPackageJSONPath ===
      pathUtils.join('/node_modules', dependencyName, 'package.json')
    ) {
      const rootDependency = manifest.dependencies.find(
        dep => dep.name === dependencyName
      );
      if (rootDependency) {
        return {
          packageJSONPath: foundPackageJSONPath,
          version: rootDependency.version,
        };
      }
    }

    const packageJSON =
      manager.transpiledModules[foundPackageJSONPath] &&
      manager.transpiledModules[foundPackageJSONPath].module.code;
    const { version } = JSON.parse(packageJSON);

// styled-jsx/babel -> styled-jsx
  // @babel/plugin-env/package.json -> @babel/plugin-env
  const dependencyName = getDependencyName(name);
  try {
    await downloadPath(join(dependencyName, 'package.json'));

    return name;
  } catch (_e) {
    const prefixedFunction = isPreset
      ? getPrefixedPresetName
      : getPrefixedPluginName;
    // Get the prefixed path, try that
    const prefixedName = prefixedFunction(dependencyName, isV7);

    try {
      await downloadPath(join(prefixedName, 'package.json'));
    } catch (_er) {
      throw new Error(
        `Cannot find plugin '${dependencyName}' or '${prefixedName}'`
      );
    }

    return prefixedName;
  }
}

async function addAngularCLIResources(manager) {
  const { parsed } = manager.configurations['angular-cli'];
  if (parsed.apps && parsed.apps[0]) {
    const app = parsed.apps[0];

    const { styles = [], scripts = [] } = app;

    /* eslint-disable no-await-in-loop */
    for (let i = 0; i < styles.length; i++) {
      const p = styles[i];
      const finalPath = absolute(join(app.root || 'src', p.input || p));

      const tModule = await manager.resolveTranspiledModuleAsync(
        finalPath,
        null
      );

      await tModule.transpile(manager);
      tModule.setIsEntry(true);
      tModule.evaluate(manager);
    }
    /* eslint-enable no-await-in-loop */

    const scriptTModules = await Promise.all(
      scripts.map(async p => {
        const finalPath = absolute(join(app.root || 'src', p));
        const tModule = await manager.resolveTranspiledModuleAsync(

async function resolveDependencyName(
  name: string,
  isV7: boolean,
  isPreset = false
) {
  // styled-jsx/babel -> styled-jsx
  // @babel/plugin-env/package.json -> @babel/plugin-env
  const dependencyName = getDependencyName(name);
  try {
    await downloadPath(join(dependencyName, 'package.json'));

    return name;
  } catch (_e) {
    const prefixedFunction = isPreset
      ? getPrefixedPresetName
      : getPrefixedPluginName;
    // Get the prefixed path, try that
    const prefixedName = prefixedFunction(dependencyName, isV7);

    try {
      await downloadPath(join(prefixedName, 'package.json'));
    } catch (_er) {
      throw new Error(
        `Cannot find plugin '${dependencyName}' or '${prefixedName}'`
      );
    }

setup: async manager => {
        const stylesPath = absolute(join('src', 'main.css'));

        try {
          const tModule = await manager.resolveTranspiledModuleAsync(
            stylesPath,
            null
          );
          await tModule.transpile(manager);
          tModule.setIsEntry(true);
          tModule.evaluate(manager);
        } catch (e) {
          if (e.type === 'module-not-found') {
            // Do nothing
          } else {
            throw e;
          }
        }

async function addAngularJSONPolyfills(manager) {
  const { parsed } = manager.configurations['angular-config'];

  const { defaultProject } = parsed;
  const project = parsed.projects[defaultProject];
  const { build } = project.architect;

  if (build.options) {
    if (project.root && build.options.polyfill) {
      const polyfillLocation = absolute(
        join(project.root, build.options.polyfill)
      );
      const polyfills = manager.resolveModule(polyfillLocation, '/');

      await manager.transpileModules(polyfills);
      manager.evaluateModule(polyfills);
    }
  }
}

scripts.map(async p => {
        const finalPath = absolute(join(app.root || 'src', p));
        const tModule = await manager.resolveTranspiledModuleAsync(
          finalPath,
          null
        );
        tModule.setIsEntry(true);
        return tModule.transpile(manager);
      })
    );

export async function downloadDependency(
  depName: string,
  depVersion: string,
  path: string
): Promise {
  const id = depName + depVersion + path;
  if (packages[id]) {
    return packages[id];
  }

  const relativePath = path
    .replace(
      new RegExp(
        `.*${pathUtils.join('/node_modules', depName)}`.replace('/', '\\/')
      ),
      ''
    )
    .replace(/#/g, '%23');

  const nameWithoutAlias = depName.replace(ALIAS_REGEX, '');
  const protocol = getFetchProtocol(depVersion);

  packages[id] = protocol
    .file(nameWithoutAlias, depVersion, relativePath)
    .then(fetchWithRetries)
    .then(x => x.text())
    .catch(async () => {
      const fallbackProtocol = getFetchProtocol(depVersion, true);
      const fallbackUrl = await fallbackProtocol.file(
        nameWithoutAlias,