Add an Asset_Loader class

[dkotter]

What?

Adds a new Asset_Loader class and sets up our build command to work.

Why?

This functionality is currently in #83 but feels like it will be useful for other PRs, so extracting that out from there in hopes of getting this piece merged sooner.

We use wp-scripts to build our assets, which outputs both the compiled asset plus an .asset.php file. From this file you can pull out the required dependencies as well as a version number. The Asset_Loader class will do this for you automatically instead of having to do this anywhere we want to enqueue things.

How?

• Adds a new Asset_Loader class with three methods: enqueue_script, enqueue_style and localize_script
• Adds in a proper build command, npm run build
• Adds in the needed src directory with an empty index.js file, so our build command works

Testing Instructions

Locally run npm i && npm run build and ensure no errors are output and you see a proper build directory added

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dkotter <[email protected]>
Co-authored-by: swissspidy <[email protected]>
Co-authored-by: JasonTheAdams <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 34 lines in your changes missing coverage. Please review.
✅ Project coverage is 56.42%. Comparing base (7e9c935) to head (453c66c).
⚠️ Report is 10 commits behind head on trunk.

Files with missing lines	Patch %	Lines
includes/Asset_Loader.php	0.00%	34 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk      #87      +/-   ##
============================================
- Coverage     60.94%   56.42%   -4.52%     
- Complexity       81       86       +5     
============================================
  Files            10       11       +1     
  Lines           425      459      +34     
============================================
  Hits            259      259              
- Misses          166      200      +34     

Flag	Coverage Δ
unit	56.42% <0.00%> (-4.52%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[JasonTheAdams]

@dkotter This is great! Can you please update the CONTRIBUTING.md doc with basic instructions on how to use this?

[dkotter]

@dkotter This is great! Can you please update the CONTRIBUTING.md doc with basic instructions on how to use this?

Docs added in 453c66c, though note it seemed to make more sense in the DEVELOPER_GUIDE.md so I added that there, though can move that if you want, just didn't see an existing section in CONTRIBUTING.md that made sense