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.

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

ref(nextjs): Prework for wrapping data-fetching functions #5508

Merged
merged 4 commits into from Aug 2, 2022

Conversation

lobsterkatie
Copy link
Member

This is a number of boring structural changes pulled out of #5503 in order to make it easier to review.

Included changes:

  • Create folders for loaders and templates, and move the existing loader and template into their respective new folders.
  • Convert the LoaderThis type into a generic, so that each loader can specify its own options but share everything specified by webpack.
  • Since we are only going to support wrapping for pages written in ESM, make sure that templates are ESM, even if the CJS version of the SDK is being used. This required creating a build script, which in turn required updating our ESLint config.
  • Add/clarify comments in existing loader files.

Copy link
Member

@lforst lforst left a comment

Choose a reason for hiding this comment

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

Looking good!

@@ -0,0 +1,10 @@
// TODO Use real webpack types
export type LoaderThis<Options> = {
Copy link
Member

Choose a reason for hiding this comment

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

Totally optional but we could type this as { addDependency: blah } & ({ query?: blah } | { getOptions?: blah }) so we have the "either-or" nature of this type baked in.

Copy link
Member Author

Choose a reason for hiding this comment

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

Good idea. Will do.

UPDATE: Turns out TS can't handle it, at least not gracefully. Doing that make lines like

const { distDir } = this.getOptions ? this.getOptions() : this.query

error out with

Property 'getOptions' does not exist on type 'LoaderThis<LoaderOptions>'.
  Property 'getOptions' does not exist on type '{ query: LoaderOptions; } & { addDependency: (filepath: string) => void; }'

Annoying that it won't let you even check to see if something is there, but not sure it's worth trying to convince it otherwise.

Copy link
Member

Choose a reason for hiding this comment

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

Ah right should have tried it out - my bad. I think you need to do the check something like 'getOptions' in this ? ... : .... But doesn't really matter.

Copy link
Member Author

Choose a reason for hiding this comment

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

Ah, but then you run into microsoft/TypeScript#21732. (Specifically - switching to 'getOptions' in this ? this.getOptions() : this.query results in Cannot invoke an object which is possibly 'undefined'. (about this.getOptions()), while still leaving you with the error above with respect to this.query.)

TS - can't live with it, can't live without it.

Comment on lines +15 to +19
// Regardless of whether nextjs is using the CJS or ESM version of our SDK, we want the code from our templates to be in
// ESM (since we'll be adding it onto page files which are themselves written in ESM), so copy the ESM versions of the
// templates over into the CJS build directory. (Building only the ESM version and sticking it in both locations is
// something which in theory Rollup could do, but it would mean refactoring our Rollup helper functions, which isn't
// worth it just for this.)
Copy link
Member

Choose a reason for hiding this comment

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

I think this is the kind of technical debt we will never get rid of. Let's leave it but take the learning that DRY has it's downsides in regards to rollup configs.

Copy link
Member Author

Choose a reason for hiding this comment

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

Interesting - not sure I'd call this tech debt. This is a weird one-off, and I feel like quite often in those cases the answer isn't "make your thing (whatever it is) support the uncommon edge case" it's "find a workaround," which to me is exactly what this is, no?

@lobsterkatie lobsterkatie merged commit 57dee8e into master Aug 2, 2022
@lobsterkatie lobsterkatie deleted the kmclb-nextjs-data-function-wrapping-prework branch August 2, 2022 13:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants