Replace invalid variable characters for import name

[JingLi1998]

Closes: #4294

When using provided variables, with ESM, the Relay compiler incorrectly assumes that the module path can also be reused for the default import name.

This is not valid Javascript as variables cannot use '.' or '-' characters.

To fix, simply replace '.' and '-' with underscores.

Before:

import include-can-edit-providers-three.relayprovider from './../include-can-edit-providers-three.relayprovider';
import include-can-edit-providers.relayprovider from './../include-can-edit-providers.relayprovider';
const providedVariablesDefinition: ProvidedVariablesType = {
  "__relay_internal__pv__includecaneditprovidersrelayprovider": include-can-edit-providers-three.relayprovider,
  "__relay_internal__pv__includecaneditprovidersthreerelayprovider": include-can-edit-providers.relayprovider
};

After:

import include_can_edit_providers_two_relayprovider from './../include-can-edit-providers-two.relayprovider';
import include_can_edit_providers_relayprovider from './../include-can-edit-providers.relayprovider';
const providedVariablesDefinition: ProvidedVariablesType = {
  "__relay_internal__pv__includecaneditprovidersrelayprovider": include_can_edit_providers_relayprovider,
  "__relay_internal__pv__includecaneditproviderstworelayprovider": include_can_edit_providers_two_relayprovider
};

I'm unfamiliar with Rust so am unsure if there is a better approach.

[facebook-github-bot]

Hi @JingLi1998!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[captbaritone]

Thanks for looking at this! The approach does not seem robust though, since there may be other characters that are valid for filenames for but not for JS variables. What about using provider.original_variable_name.0, perhaps with a prefix to avoid name collisions. I believe that's already a GraphQL variable, which I believe means its also a valid JS variable name.

[JingLi1998]

@captbaritone thank you for the suggestion it makes a lot of sense. I've updated the implementation to use the existing variable and added a prefix of __relay_internal__pv__.

Here is the output when testing locally:

import __relay_internal__pv__includeCanEditTwo from './../include-can-edit-two.relayprovider';
import __relay_internal__pv__includeCanEdit from './../include-can-edit.relayprovider';
const providedVariablesDefinition: ProvidedVariablesType = {
  "__relay_internal__pv__includecaneditrelayprovider": __relay_internal__pv__includeCanEdit,
  "__relay_internal__pv__includecanedittworelayprovider": __relay_internal__pv__includeCanEditTwo
};

[captbaritone]

Can we replace the slice+join with a simpler concatenation using the + operator?

Also, can we go with <variableName>_provider. A suffix instead of a prefix and avoid the cryptic "pv" dimminution.

[JingLi1998]

@captbaritone Thanks for the feedback I've updated it to reflect the changes you requested. I had assumed that the __relay_internal__pv was the preferred way to prefix variables since I saw it used elsewhere in the codebase 😅

[facebook-github-bot]

@captbaritone has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@captbaritone merged this pull request in 04005db.