use @roots/bud

[kellymears]

This PR replaces laravel-mix with @roots/bud.

[Log1x]

Let's get something implemented in Acorn to handle the manifest stuff a bit more elegantly.

cc: @QWp6t

[kellymears]

@retlehs found the cause of the node_modules bloat.

It was a single import: @babel/preset-modules. Over 1gb 😲! I had taken it on when I was trying to see if I could dogfood bud.

https://github.com/roots/bud-support/blob/6f1952a1674bfa5f8320fa89efe8287435a7f67e/packages/bud/package.json#L41

Removed in @2.0.0-next.16. Modules back down to 350MiB. I saw a couple other redundant dependencies, but it's gonna be diminishing returns in comparison.

[knowler]

I am a bit hesitant with the naming of this file since it could give the impression that secrets go in here which could be devastating for since the theme is public.

[QWp6t]

Do you think it would be sufficient to simply add a warning at the top?

We could be obnoxiously loud about it:

# ⚠ ⚠ ⚠ DO NOT STORE SECRETS HERE!

[knowler]

Ya, I thought about that too. It could work.

[kellymears]

This is a little more complex and a lot more flexible since v2 launch.

Current behavior:

• Bud only includes env values prefixed by APP_ in bundled code
• Bud will explicitly ignore env values including SECRET in their property name

Examples:

• APP_NAME -- included in bundle
• APP_SECRET_KEY -- not included in bundle
• SOME_UNRELATED_KEY -- not included in bundle

[kellymears]

I included some barebones but functional asset management: https://github.com/roots/sage/blob/2820ae421b225df095da5395d93e24b8a749a45f/app/assets.php. I hope it can be helpful when working out how to enqueue everything in Acorn.

I also added a docker-compose file to make it easier to spin up sage.

[kellymears]

New:

• sage bin replacing package.json scripts. translate command is wack for me but I think that might be a problem with wp translate implementation, not bud.
• removed jquery dependency. bud maps this dep towindow.wp automatically.
• It's possible to replace the sage.config.js file with sage.config.json:

{entrypoints: { app: ["app.js"] } }

• updated readme

[kellymears]

@roots/sage exports a bootstrap config and a tailwind config. They're wrapped so they don't conflict with another.

@Log1x to check out the one I did based on your PR, call Sage.tailwind() instead. I believe the rest of the file is the same between the two configs. But, it still expects js to be scripts and css to be styles.

Config preset source for both in this dir: https://github.com/roots/bud/tree/stable/packages/sage/src/sage

[kellymears]

Updated to 3.0.28, which adds the @roots/bud-esbuild and @roots/bud-emotion extensions.

• @roots/bud-esbuild is utilized by @roots/sage for production builds.
• @roots/bud-typescript, @roots/bud-babel and @roots/bud-react fill in for @roots/bud-esbuild in development.
• This is because esbuild does not provide HMR by design. Fair enough. We can look to snowpack and vite for inspiration on how to solve for this in a more savvy way -- maybe.
• @roots/bud-emotion is not included with @roots/sage.

[kellymears]

Closing in favor of #2643, which is way fresher.