fix(vite-plugin-angular): use babel to make transform results compati…

[goetzrobin]

…ble with Webkit

Angular's compilation results use static blocks by default. These static blocks are not supported by Safari or other webkit based browsers. https://caniuse.com/mdn-javascript_classes_static_initialization_blocks We need to use babel transformations to make the output compatible with iOS. This is for serving content in development as well as building for production.

Closes #202

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/analogjs/analog/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

Which package are you modifying?

• vite-angular-plugin
• astro-angular
• create-analog
• router
• platform
• content

What is the current behavior?

Analog output is broken in Webkit based (Safari & all iOS) browsers.

Issue Number: #202

What is the new behavior?

Analog works as expected in Webkit based browsers

Does this PR introduce a breaking change?

• Yes
• No

Other information

This is just a PR to share my findings and the patch that got it to work.
I hope someone with more insight can explain why it works and if there is a better way to achieve the same results.

[netlify]

✅ Deploy Preview for analog-app ready!

Name	Link
🔨 Latest commit	568c153
🔍 Latest deploy log	https://app.netlify.com/sites/analog-app/deploys/63d8166eba0caa00090b5902
😎 Deploy Preview	https://deploy-preview-231--analog-app.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for analog-docs ready!

Name	Link
🔨 Latest commit	568c153
🔍 Latest deploy log	https://app.netlify.com/sites/analog-docs/deploys/63d8166e851480000b3354c6
😎 Deploy Preview	https://deploy-preview-231--analog-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[brandonroberts]

The second transform is only applied at build time to Angular libraries that need it. What's the error with Prism?

[goetzrobin]

I'll need to find some time to look at it again, but it was something along the lines of:
Cannot find module ... index when index.js is expected in an mjs file.

I think applying the transformation only on build would be fine too. I think devs can live with ng serve only working in non WebKit browsers as long as the assets built work in Safari and every iOS browser

[netlify]

✅ Deploy Preview for analog-blog ready!

Name	Link
🔨 Latest commit	568c153
🔍 Latest deploy log	https://app.netlify.com/sites/analog-blog/deploys/63d8166eae6d89000940c14d
😎 Deploy Preview	https://deploy-preview-231--analog-blog.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[goetzrobin]

@brandonroberts the error was:
"default" is not exported by "node_modules/front-matter/index.js", imported by "node_modules/@analogjs/content/fesm2015/analogjs-content.mjs".

I updated the PR to what I think is the least intrusive way of getting
your production analog app working in safari by default,
while still allowing you to customize the behavior if needed.

This keeps the development experience as is but makes the built assets work on iOS and Safari.

Let me know what you think 👍

[brandonroberts]

@goetzrobin I like this option and I think that's a reasonable change