Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: [transformers] add example formatting + compatible parsers #586

Merged
merged 1 commit into from
Aug 16, 2021
Merged

feat: [transformers] add example formatting + compatible parsers #586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions website/src/parsers/js/transformers/jscodeshift/codeExample.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
// jscodeshift can take a parser, like "babel", "babylon", "flow", "ts", or "tsx"
// Read more: https://github.com/facebook/jscodeshift#parser
export const parser = '{{parser}}'

// Press ctrl+space for code completion
export default function transformer(file, api) {
const j = api.jscodeshift;
Expand Down
22 changes: 22 additions & 0 deletions website/src/parsers/js/transformers/jscodeshift/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,35 @@ const ID = 'jscodeshift';

const sessionMethods = new Set();

// https://github.com/facebook/jscodeshift#parser
const getJscodeshiftParser = (parser, parserSettings) => {
if (parser === 'typescript') {
if (parserSettings.typescript && parserSettings.typescript.jsx === false) {
return 'ts'
}
return 'tsx'
}
if (parser === 'flow') {
return 'flow'
}
return 'babel'
}

Comment on lines +9 to +21
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there's probably some larger question about maintainability here since there are quite a few parsers that are capable of jsx + typescript these days beyond just the typescript parser, like @babel/parser, @typescript-parser/eslint, etc

I called out just the typescript parser as the primary one here - but alternatively, if a parser isn't defined here then we'll at least have the module.exports.parser so it'll be a bit more obvious what's needed to get jscodeshift less upset 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷 Another alternative is to just downscope this entire feature to just adding the module.parser to the codeExample and call it there.

export default {
id: ID,
displayName: ID,
version: pkg.version,
homepage: pkg.homepage || 'https://github.com/facebook/jscodeshift',

defaultParserID: 'recast',
compatibleParserIDs: new Set([
'typescript',
'flow',
]),

formatCodeExample(codeExample, { parser, parserSettings }) {
return codeExample.replace('{{parser}}', `${getJscodeshiftParser(parser, parserSettings)}`)
},

loadTransformer(callback) {
require(['../../../transpilers/babel', 'jscodeshift'], (transpile, jscodeshift) => {
Expand Down
34 changes: 29 additions & 5 deletions website/src/store/reducers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,19 @@ function format(state=initialState.enableFormatting, action) {
return state;
}

function getDefaultTransform(transformer, workbenchState) {
if (typeof transformer.formatCodeExample === 'function') {
return transformer.formatCodeExample(
transformer.defaultTransform,
{
parser: workbenchState.parser,
parserSettings: workbenchState.parserSettings || {},
},
)
}
return transformer.defaultTransform
}

function workbench(state=initialState.workbench, action, fullState) {
function parserFromCategory(category) {
const parser = fullState.parserPerCategory[category.id] ||
Expand Down Expand Up @@ -143,15 +156,26 @@ function workbench(state=initialState.workbench, action, fullState) {
// Update parser settings
newState.parserSettings =
fullState.parserSettings[action.parser.id] || null;

// Check if we might want to reformat the code example
const transformer = getTransformerByID(state.transform.transformer)
if (transformer && state.transform.code === getDefaultTransform(transformer, state)) {
newState.transform = {
...state.transform,
code: getDefaultTransform(transformer, newState),
}
}
}
return newState;
}
case actions.SET_CODE:
return {...state, code: action.code};
case actions.SELECT_TRANSFORMER:
{
const parserIsCompatible =
action.transformer.compatibleParserIDs && action.transformer.compatibleParserIDs.has(state.parser)
const differentParser =
action.transformer.defaultParserID !== state.parser;
action.transformer.defaultParserID !== state.parser && !parserIsCompatible;
const differentTransformer =
action.transformer.id !== state.transform.transformer ;

Expand All @@ -176,10 +200,10 @@ function workbench(state=initialState.workbench, action, fullState) {
transformResult: null,
code: snippetHasDifferentTransform ?
state.transform.code :
action.transformer.defaultTransform,
getDefaultTransform(action.transformer, state),
initialCode: snippetHasDifferentTransform ?
fullState.activeRevision.getTransformCode() :
action.transformer.defaultTransform,
getDefaultTransform(action.transformer, state),
};
}

Expand Down Expand Up @@ -237,8 +261,8 @@ function workbench(state=initialState.workbench, action, fullState) {
const transformer = getTransformerByID(state.transform.transformer);
newState.transform = {
...state.transform,
code: transformer.defaultTransform,
initialCode: transformer.defaultTransform,
code: getDefaultTransform(transformer, state),
initialCode: getDefaultTransform(transformer, state),
};
}
return newState;
Expand Down