How to use @codesandbox/common - 10 common examples

// No idea why this typing fails!
        // @ts-ignore
        content: module.code || '',
        // @ts-ignore
        isBinary: module.isBinary,
      }));

      // TODO: What is a template really? Two different kinds of templates here, need to fix the types
      // Talk to Ives and Bogdan
      const newTemplate = (computeTemplate(parsed, modulesByPath) ||
        'node') as TemplateType;

      if (
        newTemplate !== currentTemplate &&
        templateDefinition.isServer ===
          getTemplateDefinition(newTemplate).isServer
      ) {
        state.editor.currentSandbox.template = newTemplate;
        await effects.api.saveTemplate(
          state.editor.currentSandbox.id,
          newTemplate
        );
      }
    }
  } catch (e) {
    // We don't want this to be blocking at all, it's low prio
    if (process.env.NODE_ENV === 'development') {
      console.error(e);
    }
  }
};

const submit = e => {
              e.preventDefault();
              e.stopPropagation();
              const name = this.state.inputValue;

              track('Team - Create Team');

              mutate({
                variables: {
                  name,
                },
                optimisticResponse: {
                  __typename: 'Mutation',
                  createTeam: {
                    __typename: 'Team',
                    id: 'new-team',
                    name,
                  },
                },
                update: (proxy, { data: { createTeam } }) => {
                  // Read the data from our cache for this query.
                  const d = proxy.readQuery({

this.setState({
          localSandboxesSelected: sandboxIds,
        });
      } else {
        this.props.sandboxesSelected({
          sandboxIds,
        });
        this.setState({
          localSandboxesSelected: null,
        });
      }
    };

    if (range === true) {
      if (!delay) {
        track('Dashboard - Sandbox Shift Selection');
      }
      const indexedSandboxes = sandboxes.map((sandbox, i) => ({ sandbox, i }));

      // We need to select a range
      const firstIndexInfo = indexedSandboxes.find(({ sandbox }) =>
        selectedSandboxes.includes(sandbox.id)
      );

      const [id] = ids;

      const lastIndexInfo = indexedSandboxes.find(
        ({ sandbox }) => sandbox.id === id
      );

      if (firstIndexInfo && lastIndexInfo) {
        const indexes = [firstIndexInfo.i, lastIndexInfo.i].sort();

async function getApiData(contents: any, sandbox: Sandbox) {
  const template = getTemplate(sandbox.template);

  let apiData: Partial = {
    files: [],
  };
  let packageJSON: any = {};
  let nowJSON: any = {};

  const projectPackage = contents.files['package.json'];
  const nowFile = contents.files['now.json'];

  if (projectPackage) {
    const data = await projectPackage.async('text'); // eslint-disable-line no-await-in-loop

    const parsed = JSON.parse(data);
    packageJSON = parsed;
  }

export async function deployToNetlify({ http, props, state }) {
  const { file } = props;
  state.set('deployment.netlifyLogs', null);
  const userId = state.get('user.id');
  const sandboxId = state.get('editor.currentId');
  const sandbox = state.get(`editor.sandboxes.${sandboxId}`);
  const template = getTemplate(sandbox.template);
  const buildCommand = name => {
    switch (name) {
      case 'styleguidist':
        return 'styleguide:build';
      case 'nuxt':
        return 'generate';
      default:
        return 'build';
    }
  };

  const buildConfig = getNetlifyConfig(sandbox);
  // command needs to be passed without the package manager name
  const buildCommandFromConfig = (buildConfig.command || '')
    .replace('npm run', '')
    .replace('yarn ', '');

async deploy(file: string, sandbox: Sandbox): Promise {
      const userId = _options.getUserId();
      const template = getTemplate(sandbox.template);
      const buildCommand = (name: string) => {
        if (name === 'styleguidist') {
          return 'styleguide:build';
        }
        if (name === 'nuxt') {
          return 'generate';
        }

        return 'build';
      };
      const buildConfig = getNetlifyConfig(sandbox);
      // command needs to be passed without the package manager name
      const buildCommandFromConfig = (buildConfig.command || '')
        .replace('npm run', '')
        .replace('yarn ', '');
      let id = '';

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(