Feat: Added Blockset command (STALE) #1589

theodesp · 2023-09-27T13:45:46Z

Tasks

I have signed a Contributor License Agreement (CLA) with WP Engine.
If a code change, I have written testing instructions that the whole team & outside contributors can understand.
I have written and included a comprehensive changeset to properly document the changes I've made.

Description

STALE PR. REVIEW #1585 INSTEAD

Related Issue(s):

Testing

Screenshots

Documentation Changes

Dependant PRs

changeset-bot · 2023-09-27T13:45:49Z

🦋 Changeset detected

Latest commit: 0e749c4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@faustwp/cli	Minor
@faustwp/wordpress-plugin	Minor
@faustwp/experimental-app-router	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2023-09-27T13:50:24Z

📦 Next.js Bundle Analysis for @faustwp/block-support-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`188.5 KB` (🟢 -54.49 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/preview`	`280 B`	188.77 KB	53.93% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

josephfusco · 2023-10-01T14:46:56Z

Hey @theodesp, I appreciate you stepping in to fix the CI/CD pipeline issues in #1585!

Would it be possible to extract the unrelated changes into a separate PR please into canary please? This way, we can keep the commit history clean and ensure that both our contributions are accurately represented.

I believe that #1565 should be reviewed prior to #1585 work in order to keep a separation of concerns, with the blockset command being one feature that utilizes that example.

theodesp · 2023-10-04T09:05:41Z

Hey @theodesp, I appreciate you stepping in to fix the CI/CD pipeline issues in #1585!

Would it be possible to extract the unrelated changes into a separate PR please into canary please? This way, we can keep the commit history clean and ensure that both our contributions are accurately represented.

I believe that #1565 should be reviewed prior to #1585 work in order to keep a separation of concerns, with the blockset command being one feature that utilizes that example.

@josephfusco I've approved the Block Support Example PR feel free to merge. I will remove any references of this from #1585!

github-actions · 2023-10-05T10:59:58Z

📦 Next.js Bundle Analysis for @faustwp/block-support-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`210.63 KB` (🟢 -32.35 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/preview`	`280 B`	210.91 KB	60.26% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions · 2023-10-05T11:00:44Z

📦 Next.js Bundle Analysis for @faustwp/block-support-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`210.63 KB` (🟢 -32.35 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/preview`	`280 B`	210.91 KB	60.26% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

blakewilson · 2023-10-05T14:22:22Z

@theodesp What is the best way to test this?

theodesp · 2023-10-05T14:44:07Z

Run npm run blockset -w @faustwp/block-support-example from the root of the monorepo.

Observe that wp-content/uploads/faustwp/blocks/ in your WordPress site now contains block-a & block-b.

Delete block-a from the Next.js application

Run npm run blockset -w @faustwp/block-support-example again

Observe that wp-content/uploads/faustwp/blocks/ now only contains block-b.

I've updated the testing instructions.

github-actions · 2023-10-05T16:34:47Z

📦 Next.js Bundle Analysis for @faustwp/block-support-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

🎉 Global Bundle Size Decreased

Page	Size (compressed)
`global`	`210.63 KB` (🟢 -32.35 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/preview`	`280 B`	210.91 KB	60.26% (+/- <0.01%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

github-actions · 2023-10-05T17:02:59Z

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`243.83 KB` (🟡 +871 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

TeresaGobble · 2023-10-10T01:14:25Z

Hello @theodesp, thank you for your work on this! It's a tricky piece of the puzzle and your expertise on it is appreciated. 😊

I'm having trouble getting the first step of testing to work for me. When I run the npm run blockset -w @faustwp/block-support-example from the root of the monorepo in the MERL-1235 branch, I receive the following error:

(Here is the same error in a code block for convenience:)

teresa.gobble@teresa-gobble faustjs % npm run blockset -w @faustwp/block-support-example

> @faustwp/[email protected] blockset
> faust blockset

debug - Faust is running in debug mode
debug - Discoverd GraphQL endpoint at https://faustexample.wpengine.com/index.php?graphql
error - Invalid project directory provided, no such directory: /Users/teresa.gobble/Documents/GitHub/faustjs/examples/next/block-support/blockset
npm ERR! Lifecycle script `blockset` failed with error: 
npm ERR! Error: command failed 
npm ERR!   in workspace: @faustwp/[email protected] 
npm ERR!   at location: /Users/teresa.gobble/Documents/GitHub/faustjs/examples/next/block-support 
teresa.gobble@teresa-gobble faustjs %

I have already run npm i and npm run build at the root level of the monorepo and at block-support, but I am not seeing a blockset file or folder populate inside the block-support folder. I also don't see the two blocks generated under my test repo's site inwp-content/uploads/faustwp/blocks/ as the next step in the testing instructions says I would. Am I potentially missing a step?

TeresaGobble · 2023-10-10T01:14:48Z

Related to jest testing: when I run the install and build commands in the MERL-1235 branch at the root, I receive the following error:

(Here is the same error in a code block for convenience:)

Jest (faustjs)

[info] auto config:

found:
  rootPath: /Users/teresa.gobble/Documents/GitHub/faustjs
  jestCommandLine: "/Users/teresa.gobble/Documents/GitHub/faustjs/node_modules/.bin/jest"

No tests found related to files changed since last commit.

> Test run started at 10/9/2023, 7:53:38 PM <



> Test run finished at 10/9/2023, 7:53:38 PM <

Assertion failed: (napi_call_function(env, recv, callback, 3, args, &recv) == napi_ok), function fse_dispatch_event, file fsevents.c, line 151.

[error] Jest process "watch-tests" ended unexpectedly

[info] jest test run failed, please see: https://github.com/jest-community/vscode-jest/blob/master/README.md#troubleshooting

> Test run exited at 10/9/2023, 7:53:48 PM <`

I haven't seen this error before- am I missing something here that needs to happen as a part of my testing workflow?

TeresaGobble · 2023-10-10T01:19:40Z

(Forgot to tag you, @theodesp ! Doing so in a new comment just in case the edit doesn't notify you.)

theodesp marked this pull request as ready for review September 28, 2023 09:59

theodesp requested a review from a team as a code owner September 28, 2023 09:59

theodesp force-pushed the MERL-1235 branch 2 times, most recently from 5e74d4f to 16d144b Compare October 4, 2023 13:56

Feat: (CLI) Add blockset command.

0e5bb77

theodesp force-pushed the MERL-1235 branch from 87ca895 to 0e5bb77 Compare October 5, 2023 10:55

Tests: Add unit tests for compileBlocks step.

088732f

Chore: Remove console.log

0e749c4

theodesp added the DO NOT MERGE label Oct 10, 2023

theodesp changed the title ~~Feat: Added Blockset command~~ Feat: Added Blockset command (STALE) Oct 10, 2023

blakewilson closed this Oct 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat: Added Blockset command (STALE) #1589

Feat: Added Blockset command (STALE) #1589

theodesp commented Sep 27, 2023 •

edited

Loading

changeset-bot bot commented Sep 27, 2023 •

edited

Loading

github-actions bot commented Sep 27, 2023 •

edited

Loading

josephfusco commented Oct 1, 2023

theodesp commented Oct 4, 2023 •

edited

Loading

github-actions bot commented Oct 5, 2023

github-actions bot commented Oct 5, 2023 •

edited

Loading

blakewilson commented Oct 5, 2023

theodesp commented Oct 5, 2023

github-actions bot commented Oct 5, 2023 •

edited

Loading

github-actions bot commented Oct 5, 2023

TeresaGobble commented Oct 10, 2023 •

edited

Loading

TeresaGobble commented Oct 10, 2023

TeresaGobble commented Oct 10, 2023 •

edited

Loading

Feat: Added Blockset command (STALE) #1589

Feat: Added Blockset command (STALE) #1589

Conversation

theodesp commented Sep 27, 2023 • edited Loading

Tasks

Description

Related Issue(s):

Testing

Screenshots

Documentation Changes

Dependant PRs

changeset-bot bot commented Sep 27, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Sep 27, 2023 • edited Loading

📦 Next.js Bundle Analysis for @faustwp/block-support-example

🎉 Global Bundle Size Decreased

One Page Changed Size

josephfusco commented Oct 1, 2023

theodesp commented Oct 4, 2023 • edited Loading

github-actions bot commented Oct 5, 2023

📦 Next.js Bundle Analysis for @faustwp/block-support-example

🎉 Global Bundle Size Decreased

One Page Changed Size

github-actions bot commented Oct 5, 2023 • edited Loading

📦 Next.js Bundle Analysis for @faustwp/block-support-example

🎉 Global Bundle Size Decreased

One Page Changed Size

blakewilson commented Oct 5, 2023

theodesp commented Oct 5, 2023

github-actions bot commented Oct 5, 2023 • edited Loading

📦 Next.js Bundle Analysis for @faustwp/block-support-example

🎉 Global Bundle Size Decreased

One Page Changed Size

github-actions bot commented Oct 5, 2023

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

⚠️ Global Bundle Size Increased

TeresaGobble commented Oct 10, 2023 • edited Loading

TeresaGobble commented Oct 10, 2023

TeresaGobble commented Oct 10, 2023 • edited Loading

theodesp commented Sep 27, 2023 •

edited

Loading

changeset-bot bot commented Sep 27, 2023 •

edited

Loading

github-actions bot commented Sep 27, 2023 •

edited

Loading

theodesp commented Oct 4, 2023 •

edited

Loading

github-actions bot commented Oct 5, 2023 •

edited

Loading

github-actions bot commented Oct 5, 2023 •

edited

Loading

TeresaGobble commented Oct 10, 2023 •

edited

Loading

TeresaGobble commented Oct 10, 2023 •

edited

Loading