Added how to implement TS doc #209

Fran-A-Dev · 2024-12-19T00:21:55Z

Wait to merge and review this one as well.

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1208959300172938

Bumps [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) from 4.2.5 to 4.4.1. - [Release notes](https://github.com/NaturalIntelligence/fast-xml-parser/releases) - [Changelog](https://github.com/NaturalIntelligence/fast-xml-parser/blob/master/CHANGELOG.md) - [Commits](NaturalIntelligence/fast-xml-parser@v4.2.5...v4.4.1) --- updated-dependencies: - dependency-name: fast-xml-parser dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Update CODEOWNERS

Bumps [dset](https://github.com/lukeed/dset) from 3.1.3 to 3.1.4. - [Release notes](https://github.com/lukeed/dset/releases) - [Commits](lukeed/dset@v3.1.3...v3.1.4) --- updated-dependencies: - dependency-name: dset dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [micromatch](https://github.com/micromatch/micromatch) from 4.0.5 to 4.0.8. - [Release notes](https://github.com/micromatch/micromatch/releases) - [Changelog](https://github.com/micromatch/micromatch/blob/master/CHANGELOG.md) - [Commits](micromatch/micromatch@4.0.5...4.0.8) --- updated-dependencies: - dependency-name: micromatch dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [path-to-regexp](https://github.com/pillarjs/path-to-regexp) from 6.2.1 to 6.3.0. - [Release notes](https://github.com/pillarjs/path-to-regexp/releases) - [Changelog](https://github.com/pillarjs/path-to-regexp/blob/master/History.md) - [Commits](pillarjs/path-to-regexp@v6.2.1...v6.3.0) --- updated-dependencies: - dependency-name: path-to-regexp dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [next](https://github.com/vercel/next.js) from 14.1.1 to 14.2.12. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](vercel/next.js@v14.1.1...v14.2.12) --- updated-dependencies: - dependency-name: next dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 7.0.3 to 7.0.6. - [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md) - [Commits](moxystudio/node-cross-spawn@v7.0.3...v7.0.6) --- updated-dependencies: - dependency-name: cross-spawn dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]>

…pawn-7.0.6 Bump cross-spawn from 7.0.3 to 7.0.6

headless-platform-by-wp-engine · 2024-12-19T00:26:51Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

headless-platform-by-wp-engine · 2024-12-19T21:58:46Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

moonmeister · 2024-12-20T00:05:36Z

@Fran-A-Dev what are we waiting for on this one?

headless-platform-by-wp-engine · 2024-12-20T00:11:33Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

moonmeister · 2024-12-20T00:11:38Z

src/pages/docs/how-to/implement-typescript/index.mdx

+
+[View the Faust.js TypeScript scaffold application](https://github.com/wpengine/faust-scaffold-ts)
+
+### Using graphql-codegen


Why are we showing graphql codegen here? Don't we have our own generate command for this?

It's because it showed in the original docs here and it tells the user to consider it:
https://faustjs.org/guide/how-to-implement-typescript

Should I just do away with codegen @moonmeister ?

Yeah, my best guess is this doc was written before our built in generate command had shipped and it was never updated. Let's get that fixed.

Sounds good will fix it

headless-platform-by-wp-engine · 2024-12-20T00:16:12Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

headless-platform-by-wp-engine · 2024-12-20T17:17:43Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

…mmand in faust for types

headless-platform-by-wp-engine · 2024-12-30T20:02:38Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

headless-platform-by-wp-engine · 2024-12-30T20:43:18Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

…mmand in faust for types

headless-platform-by-wp-engine · 2025-01-02T19:36:52Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	https://hr…wered.com	✅ (logs)

Learn more about preview environments in our documentation.

moonmeister · 2025-01-03T00:33:32Z

okay. So this makes even less sense after the changes. What I asked before was whether Typing GraphQL was accomplished through the cli command faust generatePossibleTypes. You've changed the dsribed CLI command but nothing else here so now none of this would work cause the possible types command doesn't generate most of these files.

More reasearch suggests possible types is specific to Apollo and GraphQL Fragments. Nothing to do with TypeScript.

Let's make sure we undestand and test the docs we're writing.

Let's revert this doc have the correct codegen steps. These steps should probably to be modified to account for the fact that we have default configs for the generate script for possible types.
The "Step" prefix should be removed from the steps...most our docs are just 1...2...3...etc and that's plenty.
Let's give this how-to a more specific and apropriate title e.g. "Typing the GraphQL Client", "Generating Types for Apollo Client",

Fran-A-Dev · 2025-01-03T15:41:50Z

okay. So this makes even less sense after the changes. What I asked before was whether Typing GraphQL was accomplished through the cli command faust generatePossibleTypes. You've changed the dsribed CLI command but nothing else here so now none of this would work cause the possible types command doesn't generate most of these files.

More reasearch suggests possible types is specific to Apollo and GraphQL Fragments. Nothing to do with TypeScript.

Let's make sure we undestand and test the docs we're writing.

Let's revert this doc have the correct codegen steps. These steps should probably to be modified to account for the fact that we have default configs for the generate script for possible types.

The "Step" prefix should be removed from the steps...most our docs are just 1...2...3...etc and that's plenty.

Let's give this how-to a more specific and apropriate title e.g. "Typing the GraphQL Client", "Generating Types for Apollo Client",

Oh, gotcha. @moonmeister I did test the generate command and it worked fine. What I misunderstood was I thought you said GraphQL code gen step was not necessary at all and it would automate that within Faust. When I ran the command, it said the types in the terminal were updated. That is why I thought it was all good to go. Also, I do not use TS much. I'll add your suggestions and test again but I'll need your help to make sure it is what we want. Let's hop on a call next week or we can just use the dev time we have allocated on Wednesdays to check the docs on this. Thanks my dev dude!

moonmeister · 2025-01-03T15:50:03Z

@Fran-A-Dev sounds good. I don't either at least not with Faust, so hopefully we can get this sorted together.

…Script

headless-platform-by-wp-engine · 2025-01-03T20:31:28Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	N/A	❌ (logs)

Learn more about preview environments in our documentation.

Fran-A-Dev · 2025-01-03T20:34:08Z

@Fran-A-Dev sounds good. I don't either at least not with Faust, so hopefully we can get this sorted together.

@moonmeister I rewrote the doc to make more sense per your suggestions which made more sense than the current doc page I took this from. Here are the summary of changes I made:

Removed references to faust generatePossibleTypes for typing.
Restored the correct instructions for using @graphql-codegen/cli to generate TypeScript definitions.
Renamed the doc to a more specific title: “Typing The GraphQL Client.”
Removed “Step X” language in favor of numbered headings or plain headings.
Verified each snippet and command so that everything matches up with the actual Faust/GraphQL Codegen workflow.

Try the steps, I just went through them and it works.

kellenmace · 2025-01-10T22:26:22Z

@Fran-A-Dev I spent some time looking into this today and made a few tweaks to the wording in both the basic setup doc at the implementing TS doc.

The steps for implementing TS don't actually work. That's because when Faust's npm run generate command is run, possibleTypes.json and globalStylesheet.css files are created, but no .ts files are created, which is what a developer actually needs if they want to be able to import and use types.

The possibleTypes.json file is a JSON file is passed into Apollo Client so it can "understand the polymorphic relationship between X interface and the types that implement it" (docs are here). This helps when working with GraphQL fragments.

And the globalStylesheet.css file contains global styles from the WP backend that can be imported and used in the decoupled frontend.

Since running npm run generate does not generate a .ts file containing types that devs can make use of, more work is required.

Since Faust is already using GraphQL Codegen to run an introspection query against the /graphql endpoint's schema and generate the possibleTypes.json file, it would be nice to us to be able to tweak it so that it also produces a .ts file containing the types, like by passing a flag such as "generate": "faust generatePossibleTypes --use-ts or something. Unfortunately, that's not how Faust works currently. So I think we'll need to go back to showing devs how to set up and run GraphQL Codegen themselves to generates the types, just like the current https://faustjs.org/guide/how-to-implement-typescript page does. One change I think we should make, though:
Since the "generate": "faust generatePossibleTypes" script already exists in the package.json file of Faust projects, telling devs to add a "generate": "graphql-codegen", command to their package.json file like the current does site does doesn't make any sense. I think we should instead tell devs to update that script to be "generate": "faust generatePossibleTypes && graphql-codegen", so that both commands are run. The former will still generate the possibleTypes.json and globalStylesheet.css files, and the latter will generate the .ts files they can use in their project.

Happy to work on this with you when we come back on Monday. Thanks for working on it, Fran!

cc: @moonmeister

headless-platform-by-wp-engine · 2025-01-10T22:28:14Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	N/A	❌ (logs)

Learn more about preview environments in our documentation.

Fran-A-Dev · 2025-01-13T13:49:49Z

@Fran-A-Dev I spent some time looking into this today and made a few tweaks to the wording in both the basic setup doc at the implementing TS doc.

The steps for implementing TS don't actually work. That's because when Faust's npm run generate command is run, possibleTypes.json and globalStylesheet.css files are created, but no .ts files are created, which is what a developer actually needs if they want to be able to import and use types.

The possibleTypes.json file is a JSON file is passed into Apollo Client so it can "understand the polymorphic relationship between X interface and the types that implement it" (docs are here). This helps when working with GraphQL fragments.

And the globalStylesheet.css file contains global styles from the WP backend that can be imported and used in the decoupled frontend.

Since running npm run generate does not generate a .ts file containing types that devs can make use of, more work is required.

Since Faust is already using GraphQL Codegen to run an introspection query against the /graphql endpoint's schema and generate the possibleTypes.json file, it would be nice to us to be able to tweak it so that it also produces a .ts file containing the types, like by passing a flag such as "generate": "faust generatePossibleTypes --use-ts or something. Unfortunately, that's not how Faust works currently. So I think we'll need to go back to showing devs how to set up and run GraphQL Codegen themselves to generates the types, just like the current https://faustjs.org/guide/how-to-implement-typescript page does. One change I think we should make, though: Since the "generate": "faust generatePossibleTypes" script already exists in the package.json file of Faust projects, telling devs to add a "generate": "graphql-codegen", command to their package.json file like the current does site does doesn't make any sense. I think we should instead tell devs to update that script to be "generate": "faust generatePossibleTypes && graphql-codegen", so that both commands are run. The former will still generate the possibleTypes.json and globalStylesheet.css files, and the latter will generate the .ts files they can use in their project.

Happy to work on this with you when we come back on Monday. Thanks for working on it, Fran!

cc: @moonmeister

Thanks for taking a look and testing this out @kellenmace ! Yes, let's take a look at this together and decide on the clear fix for the doc.

…d 'implmenenting-typescript' doc, minor wording and code syntax highlighting updates

headless-platform-by-wp-engine · 2025-01-13T20:06:31Z

Check out the recent updates to your Headless Platform preview environment:

App	Environment	URL	Build
faustjs.org	preview-env-doc/implement-TypeScript	N/A	❌ (logs)

Learn more about preview environments in our documentation.

dependabot bot and others added 10 commits July 30, 2024 09:27

Update CODEOWNERS

12fd1be

Merge pull request #143 from wpengine/josephfusco-patch-1

d0dcaf6

Update CODEOWNERS

Merge pull request #191 from wpengine/dependabot/npm_and_yarn/cross-s…

fc66cca

…pawn-7.0.6 Bump cross-spawn from 7.0.3 to 7.0.6

added how to implement TS doc

ec0b72c

Fran-A-Dev requested review from kellenmace and moonmeister December 19, 2024 00:21

added fs naming and code block highlights

7896406

moonmeister added 2 commits December 19, 2024 16:07

Merge branch 'toolkit' into doc/implement-TypeScript

e741c18

missed things

bdbec88

moonmeister reviewed Dec 20, 2024

View reviewed changes

Fran-A-Dev added 2 commits December 20, 2024 10:59

merged toolkit updates

6710317

Resolved merge conflict in nav.json

5ef9e16

Fran-A-Dev requested a review from moonmeister December 20, 2024 17:22

Fran-A-Dev added 2 commits December 30, 2024 13:03

Merge branch 'toolkit' into doc/implement-TypeScript

62ef152

removed graphql codegen and replaced it with updated auto generate co…

07a5eea

…mmand in faust for types

added steps on headers

b829c14

Fran-A-Dev and others added 5 commits January 2, 2025 11:24

added fs naming and code block highlights

481e4e9

missed things

38eeff2

removed graphql codegen and replaced it with updated auto generate co…

671ad7d

…mmand in faust for types

added steps on headers

fb710ba

misc cleanup

be9dc0b

moonmeister force-pushed the doc/implement-TypeScript branch from b829c14 to be9dc0b Compare January 2, 2025 19:31

moonmeister marked this pull request as draft January 3, 2025 00:26

Fran-A-Dev added 4 commits January 3, 2025 13:28

added changes to TS doc to make it more clear and purposeful

31e7fb2

Merge remote-tracking branch 'origin/toolkit' into doc/implement-Type…

c425d77

…Script

Test commit using pnpm setup

3dba5de

merged conflicts and took care of conflict

0ee5a79

Fran-A-Dev marked this pull request as ready for review January 8, 2025 16:34

Update docs for clarity

1811675

Rename doc to 'generate-types-with-graphql-codegen' and remove the ol…

5173d95

…d 'implmenenting-typescript' doc, minor wording and code syntax highlighting updates

kellenmace merged commit 1d5b308 into toolkit Jan 13, 2025
3 of 4 checks passed

kellenmace deleted the doc/implement-TypeScript branch January 13, 2025 20:17

moonmeister mentioned this pull request Jan 15, 2025

Revert "Added how to implement TS doc" #229

Merged

moonmeister restored the doc/implement-TypeScript branch January 15, 2025 00:14

This was referenced Jan 15, 2025

fix: run with pnpx #230

Merged

Re re ts #231

Merged


		[View the Faust.js TypeScript scaffold application](https://github.com/wpengine/faust-scaffold-ts)

		### Using graphql-codegen

Added how to implement TS doc #209

Added how to implement TS doc #209

Uh oh!

Conversation

Fran-A-Dev commented Dec 19, 2024 • edited by moonmeister Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

headless-platform-by-wp-engine bot commented Dec 19, 2024

Uh oh!

headless-platform-by-wp-engine bot commented Dec 19, 2024

Uh oh!

moonmeister commented Dec 20, 2024

Uh oh!

headless-platform-by-wp-engine bot commented Dec 20, 2024

Uh oh!

moonmeister Dec 20, 2024

Choose a reason for hiding this comment

Uh oh!

Fran-A-Dev Dec 20, 2024

Choose a reason for hiding this comment

Uh oh!

moonmeister Dec 30, 2024

Choose a reason for hiding this comment

Uh oh!

Fran-A-Dev Dec 30, 2024

Choose a reason for hiding this comment

Uh oh!

headless-platform-by-wp-engine bot commented Dec 20, 2024

Uh oh!

headless-platform-by-wp-engine bot commented Dec 20, 2024

Uh oh!

headless-platform-by-wp-engine bot commented Dec 30, 2024

Uh oh!

headless-platform-by-wp-engine bot commented Dec 30, 2024

Uh oh!

headless-platform-by-wp-engine bot commented Jan 2, 2025

Uh oh!

moonmeister commented Jan 3, 2025

Uh oh!

Fran-A-Dev commented Jan 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

moonmeister commented Jan 3, 2025

Uh oh!

headless-platform-by-wp-engine bot commented Jan 3, 2025

Uh oh!

Fran-A-Dev commented Jan 3, 2025

Uh oh!

kellenmace commented Jan 10, 2025

Uh oh!

headless-platform-by-wp-engine bot commented Jan 10, 2025

Uh oh!

Fran-A-Dev commented Jan 13, 2025

Uh oh!

headless-platform-by-wp-engine bot commented Jan 13, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Fran-A-Dev commented Dec 19, 2024 •

edited by moonmeister

Loading

Fran-A-Dev commented Jan 3, 2025 •

edited

Loading