[Create Block] Introduce the transformer property. #55423
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: JuanMa <[email protected]>
ryanwelcher
added
[Type] Feature
|
Size Change: +55 B (0%) Total Size: 1.66 MB
ℹ️ View Unchanged
|
ryanwelcher
changed the title
gziolo
reviewed
Oct 18, 2023
There was a problem hiding this comment.
It's a very interesting idea. The biggest challenge is going to be documenting all the possible input that gets passed to the transformer and ensuring it doesn't change over time so custom templates using this new API continue working correctly. The list of properties is very long, and it probably largely overlaps with the list of documented defaultValues available for configuring templates. I'm not sure how both should co-exist together. Maybe, the transformer should only return new and modified values?
| customPackageJSON, | ||
| customBlockJSON, | ||
| example, | ||
| } ); | ||
|
|
||
| const { slug: transformedSlug, namespace: transformedNamespace } = |
There was a problem hiding this comment.
What's the reason for moving sanitization after transformation?
It only exists to enforce lower casing for the slug and the namespace, which is the requirement for the plugin name and the block name. If it would get back to the previous place in the code, we could avoid this hard to read destructuring.
There was a problem hiding this comment.
slug is used later on for messaging and to generate various variations for the view. So we needed to have any transforms applied before it's use. I agree it's not that easily read so I'll refactor.
There was a problem hiding this comment.
Would it work as expected if the sanitized version gets passed to the transformer? I don't think it matters.
There was a problem hiding this comment.
It would but there was no guarantee that the slug coming back from the transformer would be formatted correctly. That's the reason we transform first and then sanitize the results after.
juanmaguitar
approved these changes
Oct 18, 2023
This will be a challenge to document but as far as the values changing, I don't think we've ever removed one have we?
Having the transformer affect all values is very beneficial when trying to modify input or template defaults as well for example, if we wanted to take the slug and append a value to it: transformer: ( view ) => {
const hex = getRandomHexCode();
return {
...view,
slug: `${ view.slug }-${ hex }`,
};
}, |
I don't think we fully removed any options but we renamed some and added mapping for backward compatibility.
Both approaches would cover it. It all really depends how it’s used in templates. If folks mutat the input value or use |
… the pluginTemplate.
…on. They create the view based on the transformed values and access the view.slug for the CLI output.
|
@gziolo I've just pushed some changes that sanitizes the |
gziolo
approved these changes
Oct 18, 2023
bph
added
the
Needs Dev Note
32 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR introduces the concept of a transformer property to create-block and closes #55421
Why?
This provide almost complete control over how a custom template can create plugins/blocks and allows the tool to focus on scaffolding rather than providing a huge amount of options. This offloads customization to the template.
How?
Creating a default
transformerproperty that returns the data sent to it that can be overridden in a custom template.Testing Instructions
packages/create-blockes5template inlib/templates.jsafter theslugpropertynode ./index transformer-test --template es5transformer-test-random-stringand anywhere the slug is used in the files has-random-stringadded to it.Code to add: