diff options
Diffstat (limited to 'packages/integrations/vue')
71 files changed, 2001 insertions, 0 deletions
diff --git a/packages/integrations/vue/CHANGELOG.md b/packages/integrations/vue/CHANGELOG.md new file mode 100644 index 000000000..528143438 --- /dev/null +++ b/packages/integrations/vue/CHANGELOG.md @@ -0,0 +1,652 @@ +# @astrojs/vue + +## 5.0.6 + +### Patch Changes + +- [#13011](https://github.com/withastro/astro/pull/13011) [`cf30880`](https://github.com/withastro/astro/commit/cf3088060d45227dcb48e041c4ed5e0081d71398) Thanks [@ascorbic](https://github.com/ascorbic)! - Upgrades Vite + +## 5.0.5 + +### Patch Changes + +- [#12887](https://github.com/withastro/astro/pull/12887) [`ea603ae`](https://github.com/withastro/astro/commit/ea603aec80531205d38fed11c525b3faa0271903) Thanks [@louisescher](https://github.com/louisescher)! - Adds a warning message when multiple JSX-based UI frameworks are being used without either the `include` or `exclude` property being set on the integration. + +## 5.0.4 + +### Patch Changes + +- [#12776](https://github.com/withastro/astro/pull/12776) [`8809b85`](https://github.com/withastro/astro/commit/8809b85747c1af4a772a3649ce8a8b3bb0f31236) Thanks [@aminevg](https://github.com/aminevg)! - Fixes an issue where TypeScript couldn't infer the correct types of the `server.mjs` file + +## 5.0.3 + +### Patch Changes + +- [#12799](https://github.com/withastro/astro/pull/12799) [`739dbfb`](https://github.com/withastro/astro/commit/739dbfba4214107cf8fc40c702834dad33eed3b0) Thanks [@ascorbic](https://github.com/ascorbic)! - Upgrades Vite to pin esbuild + +## 5.0.2 + +### Patch Changes + +- [#12688](https://github.com/withastro/astro/pull/12688) [`7dc2fca`](https://github.com/withastro/astro/commit/7dc2fca2eeb646bf3fd362d21c5bbfe273838b5a) Thanks [@yoyo837](https://github.com/yoyo837)! - fix vite peer dependency issue for vue integration + +## 5.0.1 + +### Patch Changes + +- [#12594](https://github.com/withastro/astro/pull/12594) [`4f2fd0a`](https://github.com/withastro/astro/commit/4f2fd0a0d67a748af8b611b9afc7d4c789f7c8cc) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fixes compatibility with Astro 5 + +## 5.0.0 + +### Major Changes + +- [#12060](https://github.com/withastro/astro/pull/12060) [`cb5d3ae`](https://github.com/withastro/astro/commit/cb5d3ae6ee6af646c9d7d46a9d8f551edac3092e) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Updates peer dependency range to support Astro 5 + +- [#12524](https://github.com/withastro/astro/pull/12524) [`9f44019`](https://github.com/withastro/astro/commit/9f440196dc39f36fce0198bf4c97131160e5bcc1) Thanks [@bluwy](https://github.com/bluwy)! - Updates Vite dependency to v6 to match Astro v5 + +### Minor Changes + +- [#12539](https://github.com/withastro/astro/pull/12539) [`827093e`](https://github.com/withastro/astro/commit/827093e6175549771f9d93ddf3f2be4c2c60f0b7) Thanks [@bluwy](https://github.com/bluwy)! - Drops node 21 support + +### Patch Changes + +- [#12551](https://github.com/withastro/astro/pull/12551) [`81b0bf5`](https://github.com/withastro/astro/commit/81b0bf5734735a0633bfc1089151e174ba9fbc83) Thanks [@ematipico](https://github.com/ematipico)! - New release to include changes from 4.5.2 + +## 5.0.0-beta.3 + +### Major Changes + +- [#12524](https://github.com/withastro/astro/pull/12524) [`9f44019`](https://github.com/withastro/astro/commit/9f440196dc39f36fce0198bf4c97131160e5bcc1) Thanks [@bluwy](https://github.com/bluwy)! - Updates Vite dependency to v6 to match Astro v5 + +### Minor Changes + +- [#12539](https://github.com/withastro/astro/pull/12539) [`827093e`](https://github.com/withastro/astro/commit/827093e6175549771f9d93ddf3f2be4c2c60f0b7) Thanks [@bluwy](https://github.com/bluwy)! - Drops node 21 support + +## 5.0.0-beta.1 + +### Patch Changes + +- [`81b0bf5`](https://github.com/withastro/astro/commit/81b0bf5734735a0633bfc1089151e174ba9fbc83) Thanks [@bluwy](https://github.com/bluwy)! - New release to include changes from 4.5.2 + +## 5.0.0-beta.0 + +### Major Changes + +- [#12060](https://github.com/withastro/astro/pull/12060) [`cb5d3ae`](https://github.com/withastro/astro/commit/cb5d3ae6ee6af646c9d7d46a9d8f551edac3092e) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Updates peer dependency range to support Astro 5 + +## 5.0.0-alpha.0 + +### Patch Changes + +- Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]: + - astro@5.0.0-alpha.0 + +## 4.5.3 + +### Patch Changes + +- [#12481](https://github.com/withastro/astro/pull/12481) [`8a46e80`](https://github.com/withastro/astro/commit/8a46e8074d6afb4a23badbd59ed239d526294e8c) Thanks [@marbrex](https://github.com/marbrex)! - Resolve `vite` peer dependency problem for strict package managers like **Yarn in PnP mode**. + +## 4.5.2 + +### Patch Changes + +- [#12112](https://github.com/withastro/astro/pull/12112) [`f9dd942`](https://github.com/withastro/astro/commit/f9dd9428c6cd1c9d23488ea4645f186b4a4ad4b2) Thanks [@florian-lefebvre](https://github.com/florian-lefebvre)! - Fixes a case where IDs generated by `useId()` (introduced in Vue 3.5) would not be unique between islands + +- [#12116](https://github.com/withastro/astro/pull/12116) [`af8401e`](https://github.com/withastro/astro/commit/af8401ebf9e5cbe94ded0d0f745ed1e3ec6f6d8a) Thanks [@sammibajrami](https://github.com/sammibajrami)! - Fixes an Reference Error that occurred during client transitions + +## 4.5.1 + +### Patch Changes + +- [#11946](https://github.com/withastro/astro/pull/11946) [`b75bfc8`](https://github.com/withastro/astro/commit/b75bfc8cc41f5c631c10055b78670fdc26dff23a) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix vue islands keeping their state when using view transition persistence + +## 4.5.0 + +### Minor Changes + +- [#11234](https://github.com/withastro/astro/pull/11234) [`4385bf7`](https://github.com/withastro/astro/commit/4385bf7a4dc9c65bff53a30c660f7a909fcabfc9) Thanks [@ematipico](https://github.com/ematipico)! - Adds a new function called `addServerRenderer` to the Container API. Use this function to manually store renderers inside the instance of your container. + + This new function should be preferred when using the Container API in environments like on-demand pages: + + ```ts + import type { APIRoute } from 'astro'; + import { experimental_AstroContainer } from 'astro/container'; + import reactRenderer from '@astrojs/react/server.js'; + import vueRenderer from '@astrojs/vue/server.js'; + import ReactComponent from '../components/button.jsx'; + import VueComponent from '../components/button.vue'; + + // MDX runtime is contained inside the Astro core + import mdxRenderer from 'astro/jsx/server.js'; + + // In case you need to import a custom renderer + import customRenderer from '../renderers/customRenderer.js'; + + export const GET: APIRoute = async (ctx) => { + const container = await experimental_AstroContainer.create(); + container.addServerRenderer({ renderer: reactRenderer }); + container.addServerRenderer({ renderer: vueRenderer }); + container.addServerRenderer({ renderer: customRenderer }); + // You can pass a custom name too + container.addServerRenderer({ + name: 'customRenderer', + renderer: customRenderer, + }); + const vueComponent = await container.renderToString(VueComponent); + return await container.renderToResponse(Component); + }; + ``` + +## 4.4.0 + +### Minor Changes + +- [#11144](https://github.com/withastro/astro/pull/11144) [`803dd80`](https://github.com/withastro/astro/commit/803dd8061df02138b4928442bcb76e77dcf6f5e7) Thanks [@ematipico](https://github.com/ematipico)! - The integration now exposes a function called `getContainerRenderer`, that can be used inside the Container APIs to load the relative renderer. + + ```js + import { experimental_AstroContainer as AstroContainer } from 'astro/container'; + import ReactWrapper from '../src/components/ReactWrapper.astro'; + import { loadRenderers } from 'astro:container'; + import { getContainerRenderer } from '@astrojs/react'; + + test('ReactWrapper with react renderer', async () => { + const renderers = await loadRenderers([getContainerRenderer()]); + const container = await AstroContainer.create({ + renderers, + }); + const result = await container.renderToString(ReactWrapper); + + expect(result).toContain('Counter'); + expect(result).toContain('Count: <!-- -->5'); + }); + ``` + +## 4.3.0 + +### Minor Changes + +- [#11055](https://github.com/withastro/astro/pull/11055) [`b92de22`](https://github.com/withastro/astro/commit/b92de22d2853efc4da4270a3812b9db120d06d3a) Thanks [@niklas-wortmann](https://github.com/niklas-wortmann)! - Updates the `devtools` type to allow passing `VueDevToolsOptions` + + For more customization, you can pass options that the [Vue DevTools Vite Plugin](https://devtools-next.vuejs.org/guide/vite-plugin#options) supports. (Note: `appendTo` is not supported.) For example, you can set `launchEditor` to your preferred editor if you are not using Visual Studio Code: + + ```js title="astro.config.mjs" + import { defineConfig } from 'astro/config'; + import vue from '@astrojs/vue'; + + export default defineConfig({ + // ... + integrations: [ + vue({ + devtools: { launchEditor: 'webstorm' }, + }), + ], + }); + ``` + +## 4.2.0 + +### Minor Changes + +- [#10929](https://github.com/withastro/astro/pull/10929) [`082abb8`](https://github.com/withastro/astro/commit/082abb82d574a200f9168ee5ae92c65c71e29eda) Thanks [@florian-lefebvre](https://github.com/florian-lefebvre)! - Adds a `devtools` option + + You can enable the [official Vue DevTools](https://devtools-next.vuejs.org/) while working in development mode by setting `devtools:true` in your `vue()` integration config: + + ```js + import { defineConfig } from 'astro/config'; + import vue from '@astrojs/vue'; + + export default defineConfig({ + integrations: [vue({ devtools: true })], + }); + ``` + +## 4.1.0 + +### Minor Changes + +- [#10689](https://github.com/withastro/astro/pull/10689) [`683d51a5eecafbbfbfed3910a3f1fbf0b3531b99`](https://github.com/withastro/astro/commit/683d51a5eecafbbfbfed3910a3f1fbf0b3531b99) Thanks [@ematipico](https://github.com/ematipico)! - Deprecate support for versions of Node.js older than `v18.17.1` for Node.js 18, older than `v20.0.3` for Node.js 20, and the complete Node.js v19 release line. + + This change is in line with Astro's [Node.js support policy](https://docs.astro.build/en/upgrade-astro/#support). + +## 4.0.11 + +### Patch Changes + +- [#10687](https://github.com/withastro/astro/pull/10687) [`4ea042c38839783fb42e8261d89d7c7149892518`](https://github.com/withastro/astro/commit/4ea042c38839783fb42e8261d89d7c7149892518) Thanks [@bluwy](https://github.com/bluwy)! - Removes unused `jsxTransformOptions` and `jsxImportSource` options from the renderer config + +## 4.0.10 + +### Patch Changes + +- [#10601](https://github.com/withastro/astro/pull/10601) [`b3028caecf1a96310e2ee7a65075a81c231d87be`](https://github.com/withastro/astro/commit/b3028caecf1a96310e2ee7a65075a81c231d87be) Thanks [@kalepail](https://github.com/kalepail)! - Remove the unnecessary and deprecated @vue/server-renderer package from the ssr.external vite config + +## 4.0.9 + +### Patch Changes + +- [#10419](https://github.com/withastro/astro/pull/10419) [`ee07e62942eb07532bd70365c7dd3ca2e4a18064`](https://github.com/withastro/astro/commit/ee07e62942eb07532bd70365c7dd3ca2e4a18064) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fixes using images from public inside Vue components not working correctly + +## 4.0.8 + +### Patch Changes + +- [#9620](https://github.com/withastro/astro/pull/9620) [`a1bb5fea552ce65585f49ecb6701733c48d117f9`](https://github.com/withastro/astro/commit/a1bb5fea552ce65585f49ecb6701733c48d117f9) Thanks [@bluwy](https://github.com/bluwy)! - Fixes `class` property hydration error + +- [#9490](https://github.com/withastro/astro/pull/9490) [`a1c31665cbc48bfdf4885112b427db48ecc48276`](https://github.com/withastro/astro/commit/a1c31665cbc48bfdf4885112b427db48ecc48276) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Fixes a bug that caused styles referenced by `appEntrypoint` to be excluded from the build + +## 4.0.7 + +### Patch Changes + +- [#9558](https://github.com/withastro/astro/pull/9558) [`e496b2e3b84b673b81c872dad9a6b3f9dd32396a`](https://github.com/withastro/astro/commit/e496b2e3b84b673b81c872dad9a6b3f9dd32396a) Thanks [@michaelhthomas](https://github.com/michaelhthomas)! - Fixes support for async `appEntrypoint` + +## 4.0.6 + +### Patch Changes + +- [#9479](https://github.com/withastro/astro/pull/9479) [`1baf0b0d3cbd0564954c2366a7278794fad6726e`](https://github.com/withastro/astro/commit/1baf0b0d3cbd0564954c2366a7278794fad6726e) Thanks [@sarah11918](https://github.com/sarah11918)! - Updates README + +## 4.0.5 + +### Patch Changes + +- [#9452](https://github.com/withastro/astro/pull/9452) [`e83b5095f`](https://github.com/withastro/astro/commit/e83b5095f164f48ba40fc715a805fc66a3e39dcf) Thanks [@florian-lefebvre](https://github.com/florian-lefebvre)! - Upgrades vite to latest + +## 4.0.4 + +### Patch Changes + +- [#9362](https://github.com/withastro/astro/pull/9362) [`a5db8d2ad`](https://github.com/withastro/astro/commit/a5db8d2ad02275e6cc989bd0a04ff2845f6f34c4) Thanks [@bluwy](https://github.com/bluwy)! - Simplifies `appEntrypoint` handling + +## 4.0.3 + +### Patch Changes + +- [#9366](https://github.com/withastro/astro/pull/9366) [`1b4e91898`](https://github.com/withastro/astro/commit/1b4e91898116f75b02b66ec402385cf44e559118) Thanks [@lilnasy](https://github.com/lilnasy)! - Updates NPM package to refer to the stable Astro version instead of a beta. + +## 4.0.2 + +### Patch Changes + +- [#9333](https://github.com/withastro/astro/pull/9333) [`b832cd190`](https://github.com/withastro/astro/commit/b832cd190199d4269d25d5d6e6b7efb399a69070) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Fixes issue with `appEntrypoint` when running `astro dev` + +## 4.0.1 + +### Patch Changes + +- [#8794](https://github.com/withastro/astro/pull/8794) [`4d4e34d45`](https://github.com/withastro/astro/commit/4d4e34d451e351f8a52e04124027850a575ba752) Thanks [@yoyo837](https://github.com/yoyo837)! - Prevents Astro from crashing when no default function is exported from the `appEntrypoint`. Now, the entrypoint will be ignored with a warning instead. + +## 4.0.0 + +### Patch Changes + +- [#9122](https://github.com/withastro/astro/pull/9122) [`1c48ed286`](https://github.com/withastro/astro/commit/1c48ed286538ab9e354eca4e4dcd7c6385c96721) Thanks [@bluwy](https://github.com/bluwy)! - Adds Vite 5 support. There are no breaking changes from Astro. Check the [Vite migration guide](https://vite.dev/guide/migration.html) for details of the breaking changes from Vite instead. + +## 4.0.0-beta.0 + +### Patch Changes + +- [#9122](https://github.com/withastro/astro/pull/9122) [`1c48ed286`](https://github.com/withastro/astro/commit/1c48ed286538ab9e354eca4e4dcd7c6385c96721) Thanks [@bluwy](https://github.com/bluwy)! - Adds Vite 5 support. There are no breaking changes from Astro. Check the [Vite migration guide](https://vite.dev/guide/migration.html) for details of the breaking changes from Vite instead. + +- Updated dependencies [[`abf601233`](https://github.com/withastro/astro/commit/abf601233f8188d118a8cb063c777478d8d9f1a3), [`6201bbe96`](https://github.com/withastro/astro/commit/6201bbe96c2a083fb201e4a43a9bd88499821a3e), [`cdabf6ef0`](https://github.com/withastro/astro/commit/cdabf6ef02be7220fd2b6bdcef924ceca089381e), [`1c48ed286`](https://github.com/withastro/astro/commit/1c48ed286538ab9e354eca4e4dcd7c6385c96721), [`37697a2c5`](https://github.com/withastro/astro/commit/37697a2c5511572dc29c0a4ea46f90c2f62be8e6), [`bd0c2e9ae`](https://github.com/withastro/astro/commit/bd0c2e9ae3389a9d3085050c1e8134ae98dff299), [`0fe3a7ed5`](https://github.com/withastro/astro/commit/0fe3a7ed5d7bb1a9fce1623e84ba14104b51223c), [`710be505c`](https://github.com/withastro/astro/commit/710be505c9ddf416e77a75343d8cae9c497d72c6), [`153a5abb9`](https://github.com/withastro/astro/commit/153a5abb905042ac68b712514dc9ec387d3e6b17)]: + - astro@4.0.0-beta.0 + +## 3.0.4 + +### Patch Changes + +- [#8998](https://github.com/withastro/astro/pull/8998) [`14e586cc7`](https://github.com/withastro/astro/commit/14e586cc77570b08afae5eeef605e978fec287d8) Thanks [@minht11](https://github.com/minht11)! - Adds editor support for Vue non setup script blocks and Vue 3.3 generics. + +## 3.0.3 + +### Patch Changes + +- [#8930](https://github.com/withastro/astro/pull/8930) [`c77f55d9c`](https://github.com/withastro/astro/commit/c77f55d9c075569be018dc1fb5a42c932b9071c7) Thanks [@matthewp](https://github.com/matthewp)! - Fixes an issue where Astro slot names were being rendered as attributes in components. Astro slot names will no longer be sent as props to framework components. + +## 3.0.2 + +### Patch Changes + +- [#8860](https://github.com/withastro/astro/pull/8860) [`65c7bd149`](https://github.com/withastro/astro/commit/65c7bd149cf9024f8026a73426d51c76be543cc4) Thanks [@bluwy](https://github.com/bluwy)! - Fix Vue component HMR when updating the script tag + +- Updated dependencies [[`5ea6ee0ed`](https://github.com/withastro/astro/commit/5ea6ee0ed494c792a4c94928a83c5c85b9b6ac32), [`5c888c10b`](https://github.com/withastro/astro/commit/5c888c10b712ca60a23e66b88af8051b54b42323), [`ad2bb9155`](https://github.com/withastro/astro/commit/ad2bb9155997380d0880b0c6c7b12f079a031d48), [`326e17893`](https://github.com/withastro/astro/commit/326e178933f7a22f4e897b763832619f168b53dd)]: + - astro@3.3.3 + +## 3.0.1 + +### Patch Changes + +- [#8737](https://github.com/withastro/astro/pull/8737) [`6f60da805`](https://github.com/withastro/astro/commit/6f60da805e0014bc50dd07bef972e91c73560c3c) Thanks [@ematipico](https://github.com/ematipico)! - Add provenance statement when publishing the library from CI + +- Updated dependencies [[`6f60da805`](https://github.com/withastro/astro/commit/6f60da805e0014bc50dd07bef972e91c73560c3c), [`d78806dfe`](https://github.com/withastro/astro/commit/d78806dfe0301ea7ffe6c7c1f783bd415ac7cda9), [`d1c75fe15`](https://github.com/withastro/astro/commit/d1c75fe158839699c59728cf3a83888e8c72a459), [`aa265d730`](https://github.com/withastro/astro/commit/aa265d73024422967c1b1c68ad268c419c6c798f), [`78adbc443`](https://github.com/withastro/astro/commit/78adbc4433208458291e36713909762e148e1e5d), [`21e0757ea`](https://github.com/withastro/astro/commit/21e0757ea22a57d344c934045ca19db93b684436), [`357270f2a`](https://github.com/withastro/astro/commit/357270f2a3d0bf2aa634ba7e52e9d17618eff4a7)]: + - astro@3.2.3 + +## 3.0.0 + +### Major Changes + +- [#8188](https://github.com/withastro/astro/pull/8188) [`d0679a666`](https://github.com/withastro/astro/commit/d0679a666f37da0fca396d42b9b32bbb25d29312) Thanks [@ematipico](https://github.com/ematipico)! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023. + +- [#8179](https://github.com/withastro/astro/pull/8179) [`6011d52d3`](https://github.com/withastro/astro/commit/6011d52d38e43c3e3d52bc3bc41a60e36061b7b7) Thanks [@matthewp](https://github.com/matthewp)! - Astro 3.0 Release Candidate + +### Patch Changes + +- [#8264](https://github.com/withastro/astro/pull/8264) [`1f58a7a1b`](https://github.com/withastro/astro/commit/1f58a7a1bea6888868b689dac94801d554319b02) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Automatically unmount islands when `astro:unmount` is fired + +- Updated dependencies [[`d0679a666`](https://github.com/withastro/astro/commit/d0679a666f37da0fca396d42b9b32bbb25d29312), [`db39206cb`](https://github.com/withastro/astro/commit/db39206cbb85b034859ac416179f141184bb2bff), [`adf9fccfd`](https://github.com/withastro/astro/commit/adf9fccfdda107c2224558f1c2e6a77847ac0a8a), [`0c7b42dc6`](https://github.com/withastro/astro/commit/0c7b42dc6780e687e416137539f55a3a427d1d10), [`46c4c0e05`](https://github.com/withastro/astro/commit/46c4c0e053f830585b9ef229ce1c259df00a80f8), [`364d861bd`](https://github.com/withastro/astro/commit/364d861bd527b8511968e2837728148f090bedef), [`2484dc408`](https://github.com/withastro/astro/commit/2484dc4080e5cd84b9a53648a1de426d7c907be2), [`81545197a`](https://github.com/withastro/astro/commit/81545197a32fd015d763fc386c8b67e0e08b7393), [`6011d52d3`](https://github.com/withastro/astro/commit/6011d52d38e43c3e3d52bc3bc41a60e36061b7b7), [`c2c71d90c`](https://github.com/withastro/astro/commit/c2c71d90c264a2524f99e0373ab59015f23ad4b1), [`cd2d7e769`](https://github.com/withastro/astro/commit/cd2d7e76981ef9b9013453aa2629838e1e9fd422), [`80f1494cd`](https://github.com/withastro/astro/commit/80f1494cdaf72e58a420adb4f7c712d4089e1923), [`e45f30293`](https://github.com/withastro/astro/commit/e45f3029340db718b6ed7e91b5d14f5cf14cd71d), [`c0de7a7b0`](https://github.com/withastro/astro/commit/c0de7a7b0f042cd49cbea4f4ac1b2ab6f9fef644), [`65c354969`](https://github.com/withastro/astro/commit/65c354969e6fe0ef6d622e8f4c545e2f717ce8c6), [`3c3100851`](https://github.com/withastro/astro/commit/3c31008519ce68b5b1b1cb23b71fbe0a2d506882), [`34cb20021`](https://github.com/withastro/astro/commit/34cb2002161ba88df6bcb72fecfd12ed867c134b), [`a824863ab`](https://github.com/withastro/astro/commit/a824863ab1c451f4068eac54f28dd240573e1cba), [`44f7a2872`](https://github.com/withastro/astro/commit/44f7a28728c56c04ac377b6e917329f324874043), [`1048aca55`](https://github.com/withastro/astro/commit/1048aca550769415e528016e42b358ffbfd44b61), [`be6bbd2c8`](https://github.com/withastro/astro/commit/be6bbd2c86b9bf5268e765bb937dda00ff15781a), [`9e021a91c`](https://github.com/withastro/astro/commit/9e021a91c57d10809f588dd47968fc0e7f8b4d5c), [`7511a4980`](https://github.com/withastro/astro/commit/7511a4980fd36536464c317de33a5190427f430a), [`c37632a20`](https://github.com/withastro/astro/commit/c37632a20d06164fb97a4c2fc48df6d960398832), [`acf652fc1`](https://github.com/withastro/astro/commit/acf652fc1d5db166231e87e22d0d50444f5556d8), [`42785c7b7`](https://github.com/withastro/astro/commit/42785c7b784b151e6d582570e5d74482129e8eb8), [`8450379db`](https://github.com/withastro/astro/commit/8450379db854fb1eaa9f38f21d65db240bc616cd), [`dbc97b121`](https://github.com/withastro/astro/commit/dbc97b121f42583728f1cdfdbf14575fda943f5b), [`7d2f311d4`](https://github.com/withastro/astro/commit/7d2f311d428e3d1c8c13b9bf2a708d6435713fc2), [`2540feedb`](https://github.com/withastro/astro/commit/2540feedb06785d5a20eecc3668849f147d778d4), [`ea7ff5177`](https://github.com/withastro/astro/commit/ea7ff5177dbcd7b2508cb1eef1b22b8ee1f47079), [`68efd4a8b`](https://github.com/withastro/astro/commit/68efd4a8b29f248397667801465b3152dc98e9a7), [`7bd1b86f8`](https://github.com/withastro/astro/commit/7bd1b86f85c06fdde0a1ed9146d01bac69990671), [`036388f66`](https://github.com/withastro/astro/commit/036388f66dab68ad54b895ed86f9176958dd83c8), [`519a1c4e8`](https://github.com/withastro/astro/commit/519a1c4e8407c7abcb8d879b67a9f4b960652cae), [`1f58a7a1b`](https://github.com/withastro/astro/commit/1f58a7a1bea6888868b689dac94801d554319b02), [`2ae9d37f0`](https://github.com/withastro/astro/commit/2ae9d37f0a9cb21ab288d3c30aecb6d84db87788), [`a8f35777e`](https://github.com/withastro/astro/commit/a8f35777e7e322068a4e2f520c2c9e43ade19e58), [`70f34f5a3`](https://github.com/withastro/astro/commit/70f34f5a355f42526ee9e5355f3de8e510002ea2), [`5208a3c8f`](https://github.com/withastro/astro/commit/5208a3c8fefcec7694857fb344af351f4631fc34), [`84af8ed9d`](https://github.com/withastro/astro/commit/84af8ed9d1e6401c6ebc9c60fe8cddb44d5044b0), [`f003e7364`](https://github.com/withastro/astro/commit/f003e7364317cafdb8589913b26b28e928dd07c9), [`ffc9e2d3d`](https://github.com/withastro/astro/commit/ffc9e2d3de46049bf3d82140ef018f524fb03187), [`732111cdc`](https://github.com/withastro/astro/commit/732111cdce441639db31f40f621df48442d00969), [`0f637c71e`](https://github.com/withastro/astro/commit/0f637c71e511cb4c51712128d217a26c8eee4d40), [`33b8910cf`](https://github.com/withastro/astro/commit/33b8910cfdce5713891c50a84a0a8fe926311710), [`8a5b0c1f3`](https://github.com/withastro/astro/commit/8a5b0c1f3a4be6bb62db66ec70144109ff5b4c59), [`148e61d24`](https://github.com/withastro/astro/commit/148e61d2492456811f8a3c8daaab1c3429a2ffdc), [`e79e3779d`](https://github.com/withastro/astro/commit/e79e3779df0ad35253abcdb931d622847d9adb12), [`632579dc2`](https://github.com/withastro/astro/commit/632579dc2094cc342929261c89e689f0dd358284), [`3674584e0`](https://github.com/withastro/astro/commit/3674584e02b161a698b429ceb66723918fdc56ac), [`1db4e92c1`](https://github.com/withastro/astro/commit/1db4e92c12ed73681217f5cefd39f2f47542f961), [`e7f872e91`](https://github.com/withastro/astro/commit/e7f872e91e852b901cf221a5151077dec64305bf), [`16f09dfff`](https://github.com/withastro/astro/commit/16f09dfff7722fda99dd0412e3006a7a39c80829), [`4477bb41c`](https://github.com/withastro/astro/commit/4477bb41c8ed688785c545731ef5b184b629f4e5), [`55c10d1d5`](https://github.com/withastro/astro/commit/55c10d1d564e805efc3c1a7c48e0d9a1cdf0c7ed), [`3e834293d`](https://github.com/withastro/astro/commit/3e834293d47ab2761a7aa013916e8371871efb7f), [`96beb883a`](https://github.com/withastro/astro/commit/96beb883ad87f8bbf5b2f57e14a743763d2a6f58), [`997a0db8a`](https://github.com/withastro/astro/commit/997a0db8a4e3851edd69384cf5eadbb969e1d547), [`80f1494cd`](https://github.com/withastro/astro/commit/80f1494cdaf72e58a420adb4f7c712d4089e1923), [`0f0625504`](https://github.com/withastro/astro/commit/0f0625504145f18cba7dc6cf20291cb2abddc5a9), [`e1ae56e72`](https://github.com/withastro/astro/commit/e1ae56e724d0f83db1230359e06cd6bc26f5fa26), [`f32d093a2`](https://github.com/withastro/astro/commit/f32d093a280faafff024228c12bb438156ec34d7), [`f01eb585e`](https://github.com/withastro/astro/commit/f01eb585e7c972d940761309b1595f682b6922d2), [`b76c166bd`](https://github.com/withastro/astro/commit/b76c166bdd8e28683f62806aef968d1e0c3b06d9), [`a87cbe400`](https://github.com/withastro/astro/commit/a87cbe400314341d5f72abf86ea264e6b47c091f), [`866ed4098`](https://github.com/withastro/astro/commit/866ed4098edffb052239cdb26e076cf8db61b1d9), [`767eb6866`](https://github.com/withastro/astro/commit/767eb68666eb777965baa0d6ade20bbafecf95bf), [`32669cd47`](https://github.com/withastro/astro/commit/32669cd47555e9c7433c3998a2b6e624dfb2d8e9)]: + - astro@3.0.0 + +## 3.0.0-rc.2 + +### Patch Changes + +- [#8264](https://github.com/withastro/astro/pull/8264) [`1f58a7a1b`](https://github.com/withastro/astro/commit/1f58a7a1bea6888868b689dac94801d554319b02) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Automatically unmount islands when `astro:unmount` is fired + +- Updated dependencies [[`0c7b42dc6`](https://github.com/withastro/astro/commit/0c7b42dc6780e687e416137539f55a3a427d1d10), [`9e021a91c`](https://github.com/withastro/astro/commit/9e021a91c57d10809f588dd47968fc0e7f8b4d5c), [`1f58a7a1b`](https://github.com/withastro/astro/commit/1f58a7a1bea6888868b689dac94801d554319b02), [`1db4e92c1`](https://github.com/withastro/astro/commit/1db4e92c12ed73681217f5cefd39f2f47542f961)]: + - astro@3.0.0-rc.9 + +## 3.0.0-rc.1 + +### Major Changes + +- [#8179](https://github.com/withastro/astro/pull/8179) [`6011d52d3`](https://github.com/withastro/astro/commit/6011d52d38e43c3e3d52bc3bc41a60e36061b7b7) Thanks [@matthewp](https://github.com/matthewp)! - Astro 3.0 Release Candidate + +### Patch Changes + +- Updated dependencies [[`adf9fccfd`](https://github.com/withastro/astro/commit/adf9fccfdda107c2224558f1c2e6a77847ac0a8a), [`582132328`](https://github.com/withastro/astro/commit/5821323285646aee7ff9194a505f708028e4db57), [`81545197a`](https://github.com/withastro/astro/commit/81545197a32fd015d763fc386c8b67e0e08b7393), [`6011d52d3`](https://github.com/withastro/astro/commit/6011d52d38e43c3e3d52bc3bc41a60e36061b7b7), [`be6bbd2c8`](https://github.com/withastro/astro/commit/be6bbd2c86b9bf5268e765bb937dda00ff15781a), [`42785c7b7`](https://github.com/withastro/astro/commit/42785c7b784b151e6d582570e5d74482129e8eb8), [`95120efbe`](https://github.com/withastro/astro/commit/95120efbe817163663492181cbeb225849354493), [`2ae9d37f0`](https://github.com/withastro/astro/commit/2ae9d37f0a9cb21ab288d3c30aecb6d84db87788), [`f003e7364`](https://github.com/withastro/astro/commit/f003e7364317cafdb8589913b26b28e928dd07c9), [`732111cdc`](https://github.com/withastro/astro/commit/732111cdce441639db31f40f621df48442d00969), [`33b8910cf`](https://github.com/withastro/astro/commit/33b8910cfdce5713891c50a84a0a8fe926311710), [`e79e3779d`](https://github.com/withastro/astro/commit/e79e3779df0ad35253abcdb931d622847d9adb12), [`179796405`](https://github.com/withastro/astro/commit/179796405e053b559d83f84507e5a465861a029a), [`a87cbe400`](https://github.com/withastro/astro/commit/a87cbe400314341d5f72abf86ea264e6b47c091f), [`767eb6866`](https://github.com/withastro/astro/commit/767eb68666eb777965baa0d6ade20bbafecf95bf)]: + - astro@3.0.0-rc.5 + +## 3.0.0-beta.0 + +### Major Changes + +- [`1eae2e3f7`](https://github.com/withastro/astro/commit/1eae2e3f7d693c9dfe91c8ccfbe606d32bf2fb81) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 16. The lowest supported version by Astro and all integrations is now v18.14.1. As a reminder, Node 16 will be deprecated on the 11th September 2023. + +### Patch Changes + +- Updated dependencies [[`1eae2e3f7`](https://github.com/withastro/astro/commit/1eae2e3f7d693c9dfe91c8ccfbe606d32bf2fb81), [`76ddef19c`](https://github.com/withastro/astro/commit/76ddef19ccab6e5f7d3a5740cd41acf10e334b38), [`9b4f70a62`](https://github.com/withastro/astro/commit/9b4f70a629f55e461759ba46f68af7097a2e9215), [`3fdf509b2`](https://github.com/withastro/astro/commit/3fdf509b2731a9b2f972d89291e57cf78d62c769), [`2f951cd40`](https://github.com/withastro/astro/commit/2f951cd403dfcc2c3ca6aae618ae3e1409516e32), [`c022a4217`](https://github.com/withastro/astro/commit/c022a4217a805d223c1494e9eda4e48bbf810388), [`67becaa58`](https://github.com/withastro/astro/commit/67becaa580b8f787df58de66b7008b7098f1209c), [`bc37331d8`](https://github.com/withastro/astro/commit/bc37331d8154e3e95a8df9131e4e014e78a7a9e7), [`dfc2d93e3`](https://github.com/withastro/astro/commit/dfc2d93e3c645995379358fabbdfa9aab99f43d8), [`3dc1ca2fa`](https://github.com/withastro/astro/commit/3dc1ca2fac8d9965cc5085a5d09e72ed87b4281a), [`1be84dfee`](https://github.com/withastro/astro/commit/1be84dfee3ce8e6f5cc624f99aec4e980f6fde37), [`35f01df79`](https://github.com/withastro/astro/commit/35f01df797d23315f2bee2fc3fd795adb0559c58), [`3fdf509b2`](https://github.com/withastro/astro/commit/3fdf509b2731a9b2f972d89291e57cf78d62c769), [`78de801f2`](https://github.com/withastro/astro/commit/78de801f21fd4ca1653950027d953bf08614566b), [`59d6e569f`](https://github.com/withastro/astro/commit/59d6e569f63e175c97e82e94aa7974febfb76f7c), [`7723c4cc9`](https://github.com/withastro/astro/commit/7723c4cc93298c2e6530e55da7afda048f22cf81), [`fb5cd6b56`](https://github.com/withastro/astro/commit/fb5cd6b56dc27a71366ed5e1ab8bfe9b8f96bac5), [`631b9c410`](https://github.com/withastro/astro/commit/631b9c410d5d66fa384674027ba95d69ebb5063f)]: + - astro@3.0.0-beta.0 + +## 2.2.1 + +### Patch Changes + +- [#7196](https://github.com/withastro/astro/pull/7196) [`1c77779dd`](https://github.com/withastro/astro/commit/1c77779dd66a6db77c81ed235da076a6118decde) Thanks [@bluwy](https://github.com/bluwy)! - Fix `astro-static-slot` hydration mismatch error + +- Updated dependencies [[`8b041bf57`](https://github.com/withastro/astro/commit/8b041bf57c76830c4070330270521e05d8e58474), [`6c7df28ab`](https://github.com/withastro/astro/commit/6c7df28ab34b756b8426443bf6976e24d4611a62), [`ee2aca80a`](https://github.com/withastro/astro/commit/ee2aca80a71afe843af943b11966fcf77f556cfb), [`7851f9258`](https://github.com/withastro/astro/commit/7851f9258fae2f54795470253df9ce4bcd5f9cb0), [`bef3a75db`](https://github.com/withastro/astro/commit/bef3a75dbc48d584daff9f7f3d5a8937b0356170), [`52af9ad18`](https://github.com/withastro/astro/commit/52af9ad18840ffa4e2996386c82cbe34d9fd076a), [`f5063d0a0`](https://github.com/withastro/astro/commit/f5063d0a01e3179da902fdc0a2b22f88cb3c95c7), [`cf621340b`](https://github.com/withastro/astro/commit/cf621340b00fda441f4ef43196c0363d09eae70c), [`2bda7fb0b`](https://github.com/withastro/astro/commit/2bda7fb0bce346f7725086980e1648e2636bbefb), [`af3c5a2e2`](https://github.com/withastro/astro/commit/af3c5a2e25bd3e7b2a3f7f08e41ee457093c8cb1), [`f2f18b440`](https://github.com/withastro/astro/commit/f2f18b44055c6334a39d6379de88fe41e518aa1e)]: + - astro@2.5.6 + +## 2.2.0 + +### Minor Changes + +- [#7093](https://github.com/withastro/astro/pull/7093) [`3d525efc9`](https://github.com/withastro/astro/commit/3d525efc95cfb2deb5d9e04856d02965d66901c9) Thanks [@matthewp](https://github.com/matthewp)! - Prevent removal of nested slots within islands + + This change introduces a new flag that renderers can add called `supportsAstroStaticSlot`. What this does is let Astro know that the render is sending `<astro-static-slot>` as placeholder values for static (non-hydrated) slots which Astro will then remove. + + This change is completely backwards compatible, but fixes bugs caused by combining ssr-only and client-side framework components like so: + + ```astro + <Component> + <div> + <Component client:load> + <span>Nested</span> + </Component> + </div> + </Component> + ``` + +### Patch Changes + +- [#7104](https://github.com/withastro/astro/pull/7104) [`826e02890`](https://github.com/withastro/astro/commit/826e0289005f645b902375b98d5549c6a95ccafa) Thanks [@bluwy](https://github.com/bluwy)! - Specify `"files"` field to only publish necessary files + +- Updated dependencies [[`4516d7b22`](https://github.com/withastro/astro/commit/4516d7b22c5979cde4537f196b53ae2826ba9561), [`e186ecc5e`](https://github.com/withastro/astro/commit/e186ecc5e292de8c6a2c441a2d588512c0813068), [`c6d7ebefd`](https://github.com/withastro/astro/commit/c6d7ebefdd554a9ef29cfeb426ac55cab80d6473), [`914c439bc`](https://github.com/withastro/astro/commit/914c439bccee9fec002c6d92beaa501c398e62ac), [`e9fc2c221`](https://github.com/withastro/astro/commit/e9fc2c2213036d47cd30a47a6cdad5633481a0f8), [`075eee08f`](https://github.com/withastro/astro/commit/075eee08f2e2b0baea008b97f3523f2cb937ee44), [`719002ca5`](https://github.com/withastro/astro/commit/719002ca5b128744fb4316d4a52c5dcd46a42759), [`fc52681ba`](https://github.com/withastro/astro/commit/fc52681ba2f8fe8bcd92eeedf3c6a52fd86a390e), [`fb84622af`](https://github.com/withastro/astro/commit/fb84622af04f795de8d17f24192de105f70fe910), [`cada10a46`](https://github.com/withastro/astro/commit/cada10a466f81f8edb0aa664f9cffdb6b5b8f307), [`cd410c5eb`](https://github.com/withastro/astro/commit/cd410c5eb71f825259279c27c4c39d0ad282c3f0), [`73ec6f6c1`](https://github.com/withastro/astro/commit/73ec6f6c16cadb71dafe9f664f0debde072c3173), [`410428672`](https://github.com/withastro/astro/commit/410428672ed97bba7ca0b3352c1a7ee564921462), [`763ff2d1e`](https://github.com/withastro/astro/commit/763ff2d1e44f54b899d7c65386f1b4b877c95737), [`c1669c001`](https://github.com/withastro/astro/commit/c1669c0011eecfe65a459d727848c18c189a54ca), [`3d525efc9`](https://github.com/withastro/astro/commit/3d525efc95cfb2deb5d9e04856d02965d66901c9)]: + - astro@2.5.0 + +## 2.1.1 + +### Patch Changes + +- [#6671](https://github.com/withastro/astro/pull/6671) [`d59e511d1`](https://github.com/withastro/astro/commit/d59e511d16482cfc7067555dd0a456098ec69e30) Thanks [@wulinsheng123](https://github.com/wulinsheng123)! - Supporting the top of the await syntax sugar for Vue in the template's setup + +- Updated dependencies [[`489dd8d69`](https://github.com/withastro/astro/commit/489dd8d69cdd9d7c243cf8bec96051a914984b9c), [`a1a4f45b5`](https://github.com/withastro/astro/commit/a1a4f45b51a80215fa7598da83bd0d9c5acd20d2), [`a1108e037`](https://github.com/withastro/astro/commit/a1108e037115cdb67d03505286c7d3a4fc2a1ff5), [`8b88e4cf1`](https://github.com/withastro/astro/commit/8b88e4cf15c8bea7942b3985380164e0edf7250b), [`d54cbe413`](https://github.com/withastro/astro/commit/d54cbe41349e55f8544212ad9320705f07325920), [`4c347ab51`](https://github.com/withastro/astro/commit/4c347ab51e46f2319d614f8577fe502e3dc816e2), [`ff0430786`](https://github.com/withastro/astro/commit/ff043078630e678348ae4f4757b3015b3b862c16), [`2f2e572e9`](https://github.com/withastro/astro/commit/2f2e572e937fd25451bbc78a05d55b7caa1ca3ec), [`7116c021a`](https://github.com/withastro/astro/commit/7116c021a39eac15a6e1264dfbd11bef0f5d618a)]: + - astro@2.2.0 + +## 2.1.0 + +### Minor Changes + +- [#6213](https://github.com/withastro/astro/pull/6213) [`afbbc4d5b`](https://github.com/withastro/astro/commit/afbbc4d5bfafc1779bac00b41c2a1cb1c90f2808) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Updated compilation settings to disable downlevelling for Node 14 + +### Patch Changes + +- Updated dependencies [[`fec583909`](https://github.com/withastro/astro/commit/fec583909ab62829dc0c1600e2387979365f2b94), [`b087b83fe`](https://github.com/withastro/astro/commit/b087b83fe266c431fe34a07d5c2293cc4ab011c6), [`694918a56`](https://github.com/withastro/astro/commit/694918a56b01104831296be0c25456135a63c784), [`a20610609`](https://github.com/withastro/astro/commit/a20610609863ae3b48afe96819b8f11ae4f414d5), [`a4a74ab70`](https://github.com/withastro/astro/commit/a4a74ab70cd2aa0d812a1f6b202c4e240a8913bf), [`75921b3cd`](https://github.com/withastro/astro/commit/75921b3cd916d439f6392c487c21532fde35ed13), [`afbbc4d5b`](https://github.com/withastro/astro/commit/afbbc4d5bfafc1779bac00b41c2a1cb1c90f2808)]: + - astro@2.1.0 + +## 2.0.1 + +### Patch Changes + +- [#5478](https://github.com/withastro/astro/pull/5478) [`1c7eef308`](https://github.com/withastro/astro/commit/1c7eef308e808aa5ed4662b53e67ec8d1b814d1f) Thanks [@nemo0](https://github.com/nemo0)! - Update READMEs for consistency + +- Updated dependencies [[`b4432cd6b`](https://github.com/withastro/astro/commit/b4432cd6b65bad685a99fe15867710b0663c13b2), [`98a4a914b`](https://github.com/withastro/astro/commit/98a4a914bc47f3da2764b3bdc01577d25fe2e261), [`071e1dee7`](https://github.com/withastro/astro/commit/071e1dee7e1943be67d1ded39a9af1b7a2aafd02), [`322e059d0`](https://github.com/withastro/astro/commit/322e059d0da9ab0d6a546a111fabda755bd5f1b6), [`b994f6f35`](https://github.com/withastro/astro/commit/b994f6f35e29b2d93ff8ddc281a69c0af3cc3edf), [`12c68343c`](https://github.com/withastro/astro/commit/12c68343c0aa891037d39d3c9b9378b004be6642)]: + - astro@2.0.3 + +## 2.0.0 + +### Major Changes + +- [#5782](https://github.com/withastro/astro/pull/5782) [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0 + +- [#5685](https://github.com/withastro/astro/pull/5685) [`f6cf92b48`](https://github.com/withastro/astro/commit/f6cf92b48317a19a3840ad781b77d6d3cae143bb) Thanks [@bluwy](https://github.com/bluwy)! - Upgrade to Vite 4. Please see its [migration guide](https://vite.dev/guide/migration.html) for more information. + +- [#5806](https://github.com/withastro/astro/pull/5806) [`7572f7402`](https://github.com/withastro/astro/commit/7572f7402238da37de748be58d678fedaf863b53) Thanks [@matthewp](https://github.com/matthewp)! - Make astro a `peerDependency` of integrations + + This marks `astro` as a `peerDependency` of several packages that are already getting `major` version bumps. This is so we can more properly track the dependency between them and what version of Astro they are being used with. + +### Patch Changes + +- Updated dependencies [[`93e633922`](https://github.com/withastro/astro/commit/93e633922c2e449df3bb2357b3683af1d3c0e07b), [`16dc36a87`](https://github.com/withastro/astro/commit/16dc36a870df47a4151a8ed2d91d0bd1bb812458), [`01f3f463b`](https://github.com/withastro/astro/commit/01f3f463bf2918b310d130a9fabbf3ee21d14029), [`e2019be6f`](https://github.com/withastro/astro/commit/e2019be6ffa46fa33d92cfd346f9ecbe51bb7144), [`05caf445d`](https://github.com/withastro/astro/commit/05caf445d4d2728f1010aeb2179a9e756c2fd17d), [`49ab4f231`](https://github.com/withastro/astro/commit/49ab4f231c23b34891c3ee86f4b92bf8d6d267a3), [`a342a486c`](https://github.com/withastro/astro/commit/a342a486c2831461e24e6c2f1ca8a9d3e15477b6), [`8fb28648f`](https://github.com/withastro/astro/commit/8fb28648f66629741cb976bfe34ccd9d8f55661e), [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a), [`c2180746b`](https://github.com/withastro/astro/commit/c2180746b4f6d9ef1b6f86924f21f52cc6ab4e63), [`ae8a012a7`](https://github.com/withastro/astro/commit/ae8a012a7b6884a03c50494332ee37b4505c2c3b), [`cf2de5422`](https://github.com/withastro/astro/commit/cf2de5422c26bfdea4c75f76e57b57299ded3e3a), [`ce5c5dbd4`](https://github.com/withastro/astro/commit/ce5c5dbd46afbe738b03600758bf5c35113de522), [`ec09bb664`](https://github.com/withastro/astro/commit/ec09bb6642064dbd7d2f3369afb090363ae18de2), [`665a2c222`](https://github.com/withastro/astro/commit/665a2c2225e42881f5a9550599e8f3fc1deea0b4), [`259a539d7`](https://github.com/withastro/astro/commit/259a539d7d70c783330c797794b15716921629cf), [`f7aa1ec25`](https://github.com/withastro/astro/commit/f7aa1ec25d1584f7abd421903fbef66b1c050e2a), [`4987d6f44`](https://github.com/withastro/astro/commit/4987d6f44cfd0d81d88f21f5c380503403dc1e6a), [`304823811`](https://github.com/withastro/astro/commit/304823811eddd8e72aa1d8e2d39b40ab5cda3565), [`302e0ef8f`](https://github.com/withastro/astro/commit/302e0ef8f5d5232e3348afe680e599f3e537b5c5), [`55cea0a9d`](https://github.com/withastro/astro/commit/55cea0a9d8c8df91a46590fc04a9ac28089b3432), [`dd56c1941`](https://github.com/withastro/astro/commit/dd56c19411b126439b8bc42d681b6fa8c06e8c61), [`9963c6e4d`](https://github.com/withastro/astro/commit/9963c6e4d50c392c3d1ac4492237020f15ccb1de), [`be901dc98`](https://github.com/withastro/astro/commit/be901dc98c4a7f6b5536540aa8f7ba5108e939a0), [`f6cf92b48`](https://github.com/withastro/astro/commit/f6cf92b48317a19a3840ad781b77d6d3cae143bb), [`e818cc046`](https://github.com/withastro/astro/commit/e818cc0466a942919ea3c41585e231c8c80cb3d0), [`8c100a6fe`](https://github.com/withastro/astro/commit/8c100a6fe6cc652c3799d1622e12c2c969f30510), [`116d8835c`](https://github.com/withastro/astro/commit/116d8835ca9e78f8b5e477ee5a3d737b69f80706), [`840412128`](https://github.com/withastro/astro/commit/840412128b00a04515156e92c314a929d6b94f6d), [`1f49cddf9`](https://github.com/withastro/astro/commit/1f49cddf9e9ffc651efc171b2cbde9fbe9e8709d), [`7325df412`](https://github.com/withastro/astro/commit/7325df412107fc0e65cd45c1b568fb686708f723), [`16c7d0bfd`](https://github.com/withastro/astro/commit/16c7d0bfd49d2b9bfae45385f506bcd642f9444a), [`a9c292026`](https://github.com/withastro/astro/commit/a9c2920264e36cc5dc05f4adc1912187979edb0d), [`2a5786419`](https://github.com/withastro/astro/commit/2a5786419599b8674473c699300172b9aacbae2e), [`4a1cabfe6`](https://github.com/withastro/astro/commit/4a1cabfe6b9ef8a6fbbcc0727a0dc6fa300cedaa), [`a8d3e7924`](https://github.com/withastro/astro/commit/a8d3e79246605d252dcddad159e358e2d79bd624), [`fa8c131f8`](https://github.com/withastro/astro/commit/fa8c131f88ef67d14c62f1c00c97ed74d43a80ac), [`64b8082e7`](https://github.com/withastro/astro/commit/64b8082e776b832f1433ed288e6f7888adb626d0), [`c4b0cb8bf`](https://github.com/withastro/astro/commit/c4b0cb8bf2b41887d9106440bb2e70d421a5f481), [`23dc9ea96`](https://github.com/withastro/astro/commit/23dc9ea96a10343852d965efd41fe6665294f1fb), [`63a6ceb38`](https://github.com/withastro/astro/commit/63a6ceb38d88331451dca64d0034c7c58e3d26f1), [`a3a7fc929`](https://github.com/withastro/astro/commit/a3a7fc9298e6d88abb4b7bee1e58f05fa9558cf1), [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f), [`5fd9208d4`](https://github.com/withastro/astro/commit/5fd9208d447f5ab8909a2188b6c2491a0debd49d), [`5eba34fcc`](https://github.com/withastro/astro/commit/5eba34fcc663def20bdf6e0daad02a6a5472776b), [`899214298`](https://github.com/withastro/astro/commit/899214298cee5f0c975c7245e623c649e1842d73), [`3a00ecb3e`](https://github.com/withastro/astro/commit/3a00ecb3eb4bc44be758c064f2bde6e247e8a593), [`5eba34fcc`](https://github.com/withastro/astro/commit/5eba34fcc663def20bdf6e0daad02a6a5472776b), [`2303f9514`](https://github.com/withastro/astro/commit/2303f95142aa740c99213a098f82b99dd37d74a0), [`1ca81c16b`](https://github.com/withastro/astro/commit/1ca81c16b8b66236e092e6eb6ec3f73f5668421c), [`b66d7195c`](https://github.com/withastro/astro/commit/b66d7195c17a55ea0931bc3744888bd4f5f01ce6)]: + - astro@2.0.0 + +## 2.0.0-beta.1 + +<details> +<summary>See changes in 2.0.0-beta.1</summary> + +### Major Changes + +- [#5782](https://github.com/withastro/astro/pull/5782) [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Remove support for Node 14. Minimum supported Node version is now >=16.12.0 + +- [#5806](https://github.com/withastro/astro/pull/5806) [`7572f7402`](https://github.com/withastro/astro/commit/7572f7402238da37de748be58d678fedaf863b53) Thanks [@matthewp](https://github.com/matthewp)! - Make astro a `peerDependency` of integrations + + This marks `astro` as a `peerDependency` of several packages that are already getting `major` version bumps. This is so we can more properly track the dependency between them and what version of Astro they are being used with. + +### Patch Changes + +- Updated dependencies [[`01f3f463b`](https://github.com/withastro/astro/commit/01f3f463bf2918b310d130a9fabbf3ee21d14029), [`1f92d64ea`](https://github.com/withastro/astro/commit/1f92d64ea35c03fec43aff64eaf704dc5a9eb30a), [`c2180746b`](https://github.com/withastro/astro/commit/c2180746b4f6d9ef1b6f86924f21f52cc6ab4e63), [`ae8a012a7`](https://github.com/withastro/astro/commit/ae8a012a7b6884a03c50494332ee37b4505c2c3b), [`cf2de5422`](https://github.com/withastro/astro/commit/cf2de5422c26bfdea4c75f76e57b57299ded3e3a), [`ec09bb664`](https://github.com/withastro/astro/commit/ec09bb6642064dbd7d2f3369afb090363ae18de2), [`665a2c222`](https://github.com/withastro/astro/commit/665a2c2225e42881f5a9550599e8f3fc1deea0b4), [`f7aa1ec25`](https://github.com/withastro/astro/commit/f7aa1ec25d1584f7abd421903fbef66b1c050e2a), [`302e0ef8f`](https://github.com/withastro/astro/commit/302e0ef8f5d5232e3348afe680e599f3e537b5c5), [`840412128`](https://github.com/withastro/astro/commit/840412128b00a04515156e92c314a929d6b94f6d), [`1f49cddf9`](https://github.com/withastro/astro/commit/1f49cddf9e9ffc651efc171b2cbde9fbe9e8709d), [`4a1cabfe6`](https://github.com/withastro/astro/commit/4a1cabfe6b9ef8a6fbbcc0727a0dc6fa300cedaa), [`c4b0cb8bf`](https://github.com/withastro/astro/commit/c4b0cb8bf2b41887d9106440bb2e70d421a5f481), [`23dc9ea96`](https://github.com/withastro/astro/commit/23dc9ea96a10343852d965efd41fe6665294f1fb), [`63a6ceb38`](https://github.com/withastro/astro/commit/63a6ceb38d88331451dca64d0034c7c58e3d26f1), [`52209ca2a`](https://github.com/withastro/astro/commit/52209ca2ad72a30854947dcb3a90ab4db0ac0a6f), [`2303f9514`](https://github.com/withastro/astro/commit/2303f95142aa740c99213a098f82b99dd37d74a0)]: + - astro@2.0.0-beta.2 + +</details> + +## 2.0.0-beta.0 + +<details> +<summary>See changes in 2.0.0-beta.0</summary> + +### Major Changes + +- [#5685](https://github.com/withastro/astro/pull/5685) [`f6cf92b48`](https://github.com/withastro/astro/commit/f6cf92b48317a19a3840ad781b77d6d3cae143bb) Thanks [@bluwy](https://github.com/bluwy)! - Upgrade to Vite 4. Please see its [migration guide](https://vite.dev/guide/migration.html) for more information. + +</details> + +## 1.2.2 + +### Patch Changes + +- [#5571](https://github.com/withastro/astro/pull/5571) [`50ecb3005`](https://github.com/withastro/astro/commit/50ecb3005dae3d288e60c7a59c114d504193553b) Thanks [@matthewp](https://github.com/matthewp)! - Add primevue as an external Vue package + +## 1.2.1 + +### Patch Changes + +- [#5126](https://github.com/withastro/astro/pull/5126) [`850cc19fd`](https://github.com/withastro/astro/commit/850cc19fda8e092c1a5fcbd7abfe7c7a0e15629c) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Automatically add `vuetify` to `vite.ssr.noExternal` + +## 1.2.0 + +### Minor Changes + +- [#5075](https://github.com/withastro/astro/pull/5075) [`d25f54cb9`](https://github.com/withastro/astro/commit/d25f54cb9306eea9ed0445af8f77604dacacad43) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Add support for the `appEntrypoint` option, which accepts a root-relative path to an app entrypoint. The default export of this file should be a function that accepts a Vue `App` instance prior to rendering. This opens up the ability to extend the `App` instance with [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html). + + ```js + // astro.config.mjs + import { defineConfig } from 'astro/config'; + import vue from '@astrojs/vue'; + + export default defineConfig({ + integrations: [ + vue({ + appEntrypoint: '/src/pages/_app', + }), + ], + }); + ``` + + ```ts + // src/pages/_app.ts + import type { App } from 'vue'; + import i18nPlugin from '../plugins/i18n'; + + export default function setup(app: App) { + app.use(i18nPlugin, { + /* options */ + }); + } + ``` + +## 1.1.0 + +### Minor Changes + +- [#4897](https://github.com/withastro/astro/pull/4897) [`fd9d323a6`](https://github.com/withastro/astro/commit/fd9d323a68c0f0cbb3b019e0a05e2c33450f3d33) Thanks [@bluwy](https://github.com/bluwy)! - Support Vue JSX + +### Patch Changes + +- [#4842](https://github.com/withastro/astro/pull/4842) [`812658ad2`](https://github.com/withastro/astro/commit/812658ad2ab3732a99e35c4fd903e302e723db46) Thanks [@bluwy](https://github.com/bluwy)! - Add missing dependencies, support strict dependency installation (e.g. pnpm) + +## 1.0.2 + +### Patch Changes + +- [#4706](https://github.com/withastro/astro/pull/4706) [`b0ee81d0a`](https://github.com/withastro/astro/commit/b0ee81d0a70d8301530c321b670ab784c9bc00a2) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix Vue `script setup` with other renderers applied + +## 1.0.1 + +### Patch Changes + +- [#4639](https://github.com/withastro/astro/pull/4639) [`f08ca005e`](https://github.com/withastro/astro/commit/f08ca005e28cc7d279535680d5b44495877aa7b6) Thanks [@matthewp](https://github.com/matthewp)! - Mark vueperslides as a default noExternal + +## 1.0.0 + +### Major Changes + +- [`04ad44563`](https://github.com/withastro/astro/commit/04ad445632c67bdd60c1704e1e0dcbcaa27b9308) - > Astro v1.0 is out! Read the [official announcement post](https://astro.build/blog/astro-1/). + + **No breaking changes**. This package is now officially stable and compatible with `astro@1.0.0`! + +## 0.5.0 + +### Minor Changes + +- [#3570](https://github.com/withastro/astro/pull/3570) [`04070c0c1`](https://github.com/withastro/astro/commit/04070c0c12c00a3e17842ce48e36edc3f2c890a3) Thanks [@matthewp](https://github.com/matthewp)! - Bump to Vite 3! + +## 0.4.1 + +### Patch Changes + +- [#3937](https://github.com/withastro/astro/pull/3937) [`31f9c0bf0`](https://github.com/withastro/astro/commit/31f9c0bf029ffa4b470e620f2c32e1370643e81e) Thanks [@delucis](https://github.com/delucis)! - Roll back supported Node engines + +## 0.4.0 + +### Minor Changes + +- [#3914](https://github.com/withastro/astro/pull/3914) [`b48767985`](https://github.com/withastro/astro/commit/b48767985359bd359df8071324952ea5f2bc0d86) Thanks [@ran-dall](https://github.com/ran-dall)! - Rollback supported `node@16` version. Minimum versions are now `node@14.20.0` or `node@16.14.0`. + +## 0.3.1 + +### Patch Changes + +- [#3885](https://github.com/withastro/astro/pull/3885) [`bf5d1cc1e`](https://github.com/withastro/astro/commit/bf5d1cc1e71da38a14658c615e9481f2145cc6e7) Thanks [@delucis](https://github.com/delucis)! - Integration README fixes + +## 0.3.0 + +### Minor Changes + +- [#3871](https://github.com/withastro/astro/pull/3871) [`1cc5b7890`](https://github.com/withastro/astro/commit/1cc5b78905633608e5b07ad291f916f54e67feb1) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Update supported `node` versions. Minimum versions are now `node@14.20.0` or `node@16.16.0`. + +## 0.2.1 + +### Patch Changes + +- [#3854](https://github.com/withastro/astro/pull/3854) [`b012ee55`](https://github.com/withastro/astro/commit/b012ee55b107dea0730286263b27d83e530fad5d) Thanks [@bholmesdev](https://github.com/bholmesdev)! - [astro add] Support adapters and third party packages + +* [#3864](https://github.com/withastro/astro/pull/3864) [`f9ed77bb`](https://github.com/withastro/astro/commit/f9ed77bb0d71d1644d524547a24963210f4ecaff) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Add entrypoints for editor support for Vue and Svelte (destined to be used by our language server) + +## 0.2.0 + +### Minor Changes + +- [#3652](https://github.com/withastro/astro/pull/3652) [`7373d61c`](https://github.com/withastro/astro/commit/7373d61cdcaedd64bf5fd60521b157cfa4343558) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Adds support for passing named slots from `.astro` => framework components. + + Inside your components, use the built-in `slot` API as you normally would. + +## 0.1.5 + +### Patch Changes + +- [#3455](https://github.com/withastro/astro/pull/3455) [`e9a77d86`](https://github.com/withastro/astro/commit/e9a77d861907adccfa75811f9aaa555f186d78f8) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Update client hydration to check for `ssr` attribute. Requires `astro@^1.0.0-beta.36`. + +## 0.1.4 + +### Patch Changes + +- [#3333](https://github.com/withastro/astro/pull/3333) [`ce6d7982`](https://github.com/withastro/astro/commit/ce6d79828250e9a3631778a37d43068cae04bb4f) Thanks [@FredKSchott](https://github.com/FredKSchott)! - Fix a vite peer dependency bug + +## 0.1.3 + +### Patch Changes + +- [`0c6bbee4`](https://github.com/withastro/astro/commit/0c6bbee4c95b50e5bd43675296511fbb5b985014) Thanks [@FredKSchott](https://github.com/FredKSchott)! - Republishing. No changes from v0.1.2. + +## 0.1.2 + +### Patch Changes + +- [#3143](https://github.com/withastro/astro/pull/3143) [`44e294c9`](https://github.com/withastro/astro/commit/44e294c9cbaf8f6bbccce8b956c7c53d37c15c70) Thanks [@tony-sull](https://github.com/tony-sull)! - `@astrojs/vue` integration supports custom vue compiler options + +## 0.1.1 + +### Patch Changes + +- [`815d62f1`](https://github.com/withastro/astro/commit/815d62f151a36fef7d09590d4962ca71bda61b32) Thanks [@FredKSchott](https://github.com/FredKSchott)! - no changes. + +## 0.1.0 + +### Minor Changes + +- [#2979](https://github.com/withastro/astro/pull/2979) [`9d7a4b59`](https://github.com/withastro/astro/commit/9d7a4b59b53f8cb274266f5036d1cef841750252) Thanks [@FredKSchott](https://github.com/FredKSchott)! - Welcome to the Astro v1.0.0 Beta! Read the [official announcement](https://astro.build/blog/astro-1-beta-release/) for more details. + +## 0.0.2 + +### Patch Changes + +- [#2885](https://github.com/withastro/astro/pull/2885) [`6b004363`](https://github.com/withastro/astro/commit/6b004363f99f27e581d1e2d53a2ebff39d7afb8a) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add README across Astro built-in integrations + +* [#2847](https://github.com/withastro/astro/pull/2847) [`3b621f7a`](https://github.com/withastro/astro/commit/3b621f7a613b45983b090794fa7c015f23ed6140) Thanks [@tony-sull](https://github.com/tony-sull)! - Adds keywords to the official integrations to support discoverability on Astro's Integrations site + +## 0.0.2-next.0 + +### Patch Changes + +- [#2847](https://github.com/withastro/astro/pull/2847) [`3b621f7a`](https://github.com/withastro/astro/commit/3b621f7a613b45983b090794fa7c015f23ed6140) Thanks [@tony-sull](https://github.com/tony-sull)! - Adds keywords to the official integrations to support discoverability on Astro's Integrations site diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md new file mode 100644 index 000000000..1e9ac602c --- /dev/null +++ b/packages/integrations/vue/README.md @@ -0,0 +1,38 @@ +# @astrojs/vue 💚 + +This **[Astro integration][astro-integration]** enables server-side rendering and client-side hydration for your [Vue 3](https://vuejs.org/) components. + +## Documentation + +Read the [`@astrojs/vue` docs][docs] + +## Support + +- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more! + +- Check our [Astro Integration Documentation][astro-integration] for more on integrations. + +- Submit bug reports and feature requests as [GitHub issues][issues]. + +## Contributing + +This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started: + +- [Contributor Manual][contributing] +- [Code of Conduct][coc] +- [Community Guide][community] + +## License + +MIT + +Copyright (c) 2023–present [Astro][astro] + +[astro]: https://astro.build/ +[docs]: https://docs.astro.build/en/guides/integrations-guide/vue/ +[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md +[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md +[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md +[discord]: https://astro.build/chat/ +[issues]: https://github.com/withastro/astro/issues +[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js new file mode 100644 index 000000000..4ec2b9e68 --- /dev/null +++ b/packages/integrations/vue/client.js @@ -0,0 +1,58 @@ +import { setup } from 'virtual:@astrojs/vue/app'; +import { Suspense, createApp, createSSRApp, h } from 'vue'; +import StaticHtml from './static-html.js'; + +// keep track of already initialized apps, so we don't hydrate again for view transitions +let appMap = new WeakMap(); + +export default (element) => + async (Component, props, slotted, { client }) => { + if (!element.hasAttribute('ssr')) return; + + // Expose name on host component for Vue devtools + const name = Component.name ? `${Component.name} Host` : undefined; + const slots = {}; + for (const [key, value] of Object.entries(slotted)) { + slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key }); + } + + const isHydrate = client !== 'only'; + const bootstrap = isHydrate ? createSSRApp : createApp; + + // keep a reference to the app, props and slots so we can update a running instance later + let appInstance = appMap.get(element); + + if (!appInstance) { + appInstance = { + props, + slots, + }; + const app = bootstrap({ + name, + render() { + let content = h(Component, appInstance.props, appInstance.slots); + appInstance.component = this; + // related to https://github.com/withastro/astro/issues/6549 + // if the component is async, wrap it in a Suspense component + if (isAsync(Component.setup)) { + content = h(Suspense, null, content); + } + return content; + }, + }); + app.config.idPrefix = element.getAttribute('prefix'); + await setup(app); + app.mount(element, isHydrate); + appMap.set(element, appInstance); + element.addEventListener('astro:unmount', () => app.unmount(), { once: true }); + } else { + appInstance.props = props; + appInstance.slots = slots; + appInstance.component.$forceUpdate(); + } + }; + +function isAsync(fn) { + const constructor = fn?.constructor; + return constructor && constructor.name === 'AsyncFunction'; +} diff --git a/packages/integrations/vue/context.js b/packages/integrations/vue/context.js new file mode 100644 index 000000000..80a569ce6 --- /dev/null +++ b/packages/integrations/vue/context.js @@ -0,0 +1,24 @@ +const contexts = new WeakMap(); + +const ID_PREFIX = 'v'; + +function getContext(rendererContextResult) { + if (contexts.has(rendererContextResult)) { + return contexts.get(rendererContextResult); + } + const ctx = { + currentIndex: 0, + get id() { + return ID_PREFIX + this.currentIndex.toString(); + }, + }; + contexts.set(rendererContextResult, ctx); + return ctx; +} + +export function incrementId(rendererContextResult) { + const ctx = getContext(rendererContextResult); + const id = ctx.id; + ctx.currentIndex++; + return id; +} diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json new file mode 100644 index 000000000..de3a93e51 --- /dev/null +++ b/packages/integrations/vue/package.json @@ -0,0 +1,68 @@ +{ + "name": "@astrojs/vue", + "version": "5.0.6", + "description": "Use Vue components within Astro", + "type": "module", + "types": "./dist/index.d.ts", + "author": "withastro", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/withastro/astro.git", + "directory": "packages/integrations/vue" + }, + "keywords": [ + "astro-integration", + "astro-component", + "renderer", + "vue" + ], + "bugs": "https://github.com/withastro/astro/issues", + "homepage": "https://docs.astro.build/en/guides/integrations-guide/vue/", + "exports": { + ".": "./dist/index.js", + "./editor": "./dist/editor.cjs", + "./*": "./*", + "./client.js": "./client.js", + "./server.js": "./server.js", + "./package.json": "./package.json" + }, + "files": [ + "dist", + "client.js", + "context.js", + "server.js", + "server.d.ts", + "static-html.js" + ], + "scripts": { + "build": "astro-scripts build \"src/index.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist && tsc", + "build:ci": "astro-scripts build \"src/**/*.ts\" && astro-scripts build \"src/editor.cts\" --force-cjs --no-clean-dist", + "dev": "astro-scripts dev \"src/**/*.ts\"", + "test": "astro-scripts test \"test/**/*.test.js\"" + }, + "dependencies": { + "@vitejs/plugin-vue": "^5.2.1", + "@vitejs/plugin-vue-jsx": "^4.1.1", + "@vue/compiler-sfc": "^3.5.13", + "vite": "^6.0.11", + "vite-plugin-vue-devtools": "^7.7.1" + }, + "devDependencies": { + "astro": "workspace:*", + "astro-scripts": "workspace:*", + "cheerio": "1.0.0", + "linkedom": "^0.18.7", + "vue": "^3.5.13" + }, + "peerDependencies": { + "astro": "^5.0.0", + "vue": "^3.2.30" + }, + "engines": { + "node": "^18.17.1 || ^20.3.0 || >=22.0.0" + }, + "publishConfig": { + "provenance": true + } +} diff --git a/packages/integrations/vue/server.d.ts b/packages/integrations/vue/server.d.ts new file mode 100644 index 000000000..75cc3eb64 --- /dev/null +++ b/packages/integrations/vue/server.d.ts @@ -0,0 +1,4 @@ +import type { NamedSSRLoadedRendererValue } from 'astro'; + +declare const renderer: NamedSSRLoadedRendererValue; +export default renderer; diff --git a/packages/integrations/vue/server.js b/packages/integrations/vue/server.js new file mode 100644 index 000000000..315909087 --- /dev/null +++ b/packages/integrations/vue/server.js @@ -0,0 +1,42 @@ +import { setup } from 'virtual:@astrojs/vue/app'; +import { createSSRApp, h } from 'vue'; +import { renderToString } from 'vue/server-renderer'; +import { incrementId } from './context.js'; +import StaticHtml from './static-html.js'; + +function check(Component) { + return !!Component['ssrRender'] || !!Component['__ssrInlineRender']; +} + +async function renderToStaticMarkup(Component, inputProps, slotted, metadata) { + let prefix; + if (this && this.result) { + prefix = incrementId(this.result); + } + const attrs = { prefix }; + + const slots = {}; + const props = { ...inputProps }; + delete props.slot; + for (const [key, value] of Object.entries(slotted)) { + slots[key] = () => + h(StaticHtml, { + value, + name: key === 'default' ? undefined : key, + // Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot` + hydrate: metadata.astroStaticSlot ? !!metadata.hydrate : true, + }); + } + const app = createSSRApp({ render: () => h(Component, props, slots) }); + app.config.idPrefix = prefix; + await setup(app); + const html = await renderToString(app); + return { html, attrs }; +} + +export default { + name: '@astrojs/vue', + check, + renderToStaticMarkup, + supportsAstroStaticSlot: true, +}; diff --git a/packages/integrations/vue/src/editor.cts b/packages/integrations/vue/src/editor.cts new file mode 100644 index 000000000..96d8f8e71 --- /dev/null +++ b/packages/integrations/vue/src/editor.cts @@ -0,0 +1,65 @@ +import { parse } from '@vue/compiler-sfc'; + +export function toTSX(code: string, className: string): string { + let result = `export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`; + + // NOTE: As you can expect, using regexes for this is not exactly the most reliable way of doing things + // However, I couldn't figure out a way to do it using Vue's compiler, I tried looking at how Volar does it, but I + // didn't really understand everything happening there and it seemed to be pretty Volar-specific. I do believe + // someone more knowledgeable on Vue's internals could figure it out, but since this solution is good enough for most + // Vue components (and it's an improvement over, well, nothing), it's alright, I think + try { + const parsedResult = parse(code); + + if (parsedResult.errors.length > 0) { + return ` + let ${className}__AstroComponent_: Error + export default ${className}__AstroComponent_ + `; + } + + // Vue supports 2 type of script blocks: setup and non-setup + const regularScriptBlockContent = parsedResult.descriptor.script?.content ?? ''; + const { scriptSetup } = parsedResult.descriptor; + + if (scriptSetup) { + const codeWithoutComments = scriptSetup.content.replace(/\/\/.*|\/\*[\s\S]*?\*\//g, ''); + const definePropsType = /defineProps<([\s\S]+?)>\s?\(\)/.exec(codeWithoutComments); + const propsGeneric = scriptSetup.attrs.generic; + const propsGenericType = propsGeneric ? `<${propsGeneric}>` : ''; + + if (definePropsType) { + result = ` + ${regularScriptBlockContent} + ${scriptSetup.content} + + export default function ${className}__AstroComponent_${propsGenericType}(_props: ${definePropsType[1]}): any { + <div></div> + } + `; + } else { + // TODO. Find a way to support generics when using defineProps without passing explicit types. + // Right now something like this `defineProps({ prop: { type: Array as PropType<T[]> } })` + // won't be correctly typed in Astro. + const defineProps = /defineProps\([\s\S]+?\)/.exec(codeWithoutComments); + if (defineProps) { + result = ` + import { defineProps } from 'vue'; + + ${regularScriptBlockContent} + + const Props = ${defineProps[0]} + + export default function ${className}__AstroComponent_${propsGenericType}(_props: typeof Props): any { + <div></div> + } + `; + } + } + } + } catch { + return result; + } + + return result; +} diff --git a/packages/integrations/vue/src/index.ts b/packages/integrations/vue/src/index.ts new file mode 100644 index 000000000..f81167323 --- /dev/null +++ b/packages/integrations/vue/src/index.ts @@ -0,0 +1,178 @@ +import path from 'node:path'; +import type { Options as VueOptions } from '@vitejs/plugin-vue'; +import vue from '@vitejs/plugin-vue'; +import type { Options as VueJsxOptions } from '@vitejs/plugin-vue-jsx'; +import { MagicString } from '@vue/compiler-sfc'; +import type { AstroIntegration, AstroRenderer, ContainerRenderer, HookParameters } from 'astro'; +import type { Plugin, UserConfig } from 'vite'; +import type { VitePluginVueDevToolsOptions } from 'vite-plugin-vue-devtools'; + +const VIRTUAL_MODULE_ID = 'virtual:@astrojs/vue/app'; +const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`; + +interface Options extends VueOptions { + jsx?: boolean | VueJsxOptions; + appEntrypoint?: string; + devtools?: boolean | Omit<VitePluginVueDevToolsOptions, 'appendTo'>; +} + +function getRenderer(): AstroRenderer { + return { + name: '@astrojs/vue', + clientEntrypoint: '@astrojs/vue/client.js', + serverEntrypoint: '@astrojs/vue/server.js', + }; +} + +function getJsxRenderer(): AstroRenderer { + return { + name: '@astrojs/vue (jsx)', + clientEntrypoint: '@astrojs/vue/client.js', + serverEntrypoint: '@astrojs/vue/server.js', + }; +} + +export function getContainerRenderer(): ContainerRenderer { + return { + name: '@astrojs/vue', + serverEntrypoint: '@astrojs/vue/server.js', + }; +} + +function virtualAppEntrypoint(options?: Options): Plugin { + let isBuild: boolean; + let root: string; + let appEntrypoint: string | undefined; + + return { + name: '@astrojs/vue/virtual-app', + config(_, { command }) { + isBuild = command === 'build'; + }, + configResolved(config) { + root = config.root; + if (options?.appEntrypoint) { + appEntrypoint = options.appEntrypoint.startsWith('.') + ? path.resolve(root, options.appEntrypoint) + : options.appEntrypoint; + } + }, + resolveId(id: string) { + if (id == VIRTUAL_MODULE_ID) { + return RESOLVED_VIRTUAL_MODULE_ID; + } + }, + load(id: string) { + if (id === RESOLVED_VIRTUAL_MODULE_ID) { + if (appEntrypoint) { + return `\ +import * as mod from ${JSON.stringify(appEntrypoint)}; + +export const setup = async (app) => { + if ('default' in mod) { + await mod.default(app); + } else { + ${ + !isBuild + ? `console.warn("[@astrojs/vue] appEntrypoint \`" + ${JSON.stringify( + appEntrypoint, + )} + "\` does not export a default function. Check out https://docs.astro.build/en/guides/integrations-guide/vue/#appentrypoint.");` + : '' + } + } +}`; + } + return `export const setup = () => {};`; + } + }, + // Ensure that Vue components reference appEntrypoint directly + // This allows Astro to associate global styles imported in this file + // with the pages they should be injected to + transform(code, id) { + if (!appEntrypoint) return; + if (id.endsWith('.vue')) { + const s = new MagicString(code); + s.prepend(`import ${JSON.stringify(appEntrypoint)};\n`); + return { + code: s.toString(), + map: s.generateMap({ hires: 'boundary' }), + }; + } + }, + }; +} + +async function getViteConfiguration( + command: HookParameters<'astro:config:setup'>['command'], + options?: Options, +): Promise<UserConfig> { + let vueOptions = { + ...options, + template: { + ...options?.template, + transformAssetUrls: false, + }, + } satisfies VueOptions; + + const config: UserConfig = { + optimizeDeps: { + // We add `vue` here as `@vitejs/plugin-vue` doesn't add it and we want to prevent + // re-optimization if the `vue` import is only encountered later. + include: ['@astrojs/vue/client.js', 'vue'], + exclude: ['@astrojs/vue/server.js', VIRTUAL_MODULE_ID], + }, + plugins: [vue(vueOptions), virtualAppEntrypoint(vueOptions)], + ssr: { + noExternal: ['vuetify', 'vueperslides', 'primevue'], + }, + }; + + if (options?.jsx) { + const vueJsx = (await import('@vitejs/plugin-vue-jsx')).default; + const jsxOptions = typeof options.jsx === 'object' ? options.jsx : undefined; + config.plugins?.push(vueJsx(jsxOptions)); + } + + if (command === 'dev' && options?.devtools) { + const vueDevTools = (await import('vite-plugin-vue-devtools')).default; + const devToolsOptions = typeof options.devtools === 'object' ? options.devtools : {}; + config.plugins?.push( + vueDevTools({ + ...devToolsOptions, + appendTo: VIRTUAL_MODULE_ID, + }), + ); + } + + return config; +} + +export default function (options?: Options): AstroIntegration { + return { + name: '@astrojs/vue', + hooks: { + 'astro:config:setup': async ({ addRenderer, updateConfig, command }) => { + addRenderer(getRenderer()); + if (options?.jsx) { + addRenderer(getJsxRenderer()); + } + updateConfig({ vite: await getViteConfiguration(command, options) }); + }, + 'astro:config:done': ({ logger, config }) => { + if (!options?.jsx) return; + + const knownJsxRenderers = ['@astrojs/react', '@astrojs/preact', '@astrojs/solid-js']; + const enabledKnownJsxRenderers = config.integrations.filter((renderer) => + knownJsxRenderers.includes(renderer.name), + ); + + // This error can only be thrown from here since Vue is an optional JSX renderer + if (enabledKnownJsxRenderers.length > 1 && !options?.include && !options?.exclude) { + logger.warn( + 'More than one JSX renderer is enabled. This will lead to unexpected behavior unless you set the `include` or `exclude` option. See https://docs.astro.build/en/guides/integrations-guide/solid-js/#combining-multiple-jsx-frameworks for more information.', + ); + } + }, + }, + }; +} diff --git a/packages/integrations/vue/static-html.js b/packages/integrations/vue/static-html.js new file mode 100644 index 000000000..689b56a70 --- /dev/null +++ b/packages/integrations/vue/static-html.js @@ -0,0 +1,33 @@ +import { defineComponent, h } from 'vue'; + +/** + * Astro passes `children` as a string of HTML, so we need + * a wrapper `div` to render that content as VNodes. + * + * This is the Vue + JSX equivalent of using `<div v-html="value" />` + */ +const StaticHtml = defineComponent({ + props: { + value: String, + name: String, + hydrate: { + type: Boolean, + default: true, + }, + }, + setup({ name, value, hydrate }) { + if (!value) return () => null; + let tagName = hydrate ? 'astro-slot' : 'astro-static-slot'; + return () => h(tagName, { name, innerHTML: value }); + }, +}); + +/** + * Other frameworks have `shouldComponentUpdate` in order to signal + * that this subtree is entirely static and will not be updated + * + * Fortunately, Vue is smart enough to figure that out without any + * help from us, so this just works out of the box! + */ + +export default StaticHtml; diff --git a/packages/integrations/vue/test/app-entrypoint-css.test.js b/packages/integrations/vue/test/app-entrypoint-css.test.js new file mode 100644 index 000000000..878aa8e48 --- /dev/null +++ b/packages/integrations/vue/test/app-entrypoint-css.test.js @@ -0,0 +1,67 @@ +import * as assert from 'node:assert/strict'; +import { after, before, describe, it } from 'node:test'; +import { load as cheerioLoad } from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('App Entrypoint CSS', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-css/', + }); + }); + + describe('build', () => { + before(async () => { + await fixture.build(); + }); + + it('injects styles referenced in appEntrypoint', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + // test 1: basic component renders + assert.equal($('#foo > #bar').text(), 'works'); + // test 2: injects the global style on the page + assert.equal($('style').first().text().trim(), ':root{background-color:red}'); + }); + + it('does not inject styles to pages without a Vue component', async () => { + const html = await fixture.readFile('/unrelated/index.html'); + const $ = cheerioLoad(html); + + assert.equal($('style').length, 0); + assert.equal($('link[rel="stylesheet"]').length, 0); + }); + }); + + describe('dev', () => { + let devServer; + before(async () => { + devServer = await fixture.startDevServer(); + }); + after(async () => { + await devServer.stop(); + }); + + it('loads during SSR', async () => { + const html = await fixture.fetch('/').then((res) => res.text()); + const $ = cheerioLoad(html); + + // test 1: basic component renders + assert.equal($('#foo > #bar').text(), 'works'); + // test 2: injects the global style on the page + assert.equal($('style').first().text().replace(/\s+/g, ''), ':root{background-color:red;}'); + }); + + it('does not inject styles to pages without a Vue component', async () => { + const html = await fixture.fetch('/unrelated').then((res) => res.text()); + const $ = cheerioLoad(html); + + assert.equal($('style').length, 0); + assert.equal($('link[rel="stylesheet"]').length, 0); + }); + }); +}); diff --git a/packages/integrations/vue/test/app-entrypoint.test.js b/packages/integrations/vue/test/app-entrypoint.test.js new file mode 100644 index 000000000..c7fa82826 --- /dev/null +++ b/packages/integrations/vue/test/app-entrypoint.test.js @@ -0,0 +1,210 @@ +import * as assert from 'node:assert/strict'; +import { after, before, describe, it } from 'node:test'; +import { load as cheerioLoad } from 'cheerio'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from './test-utils.js'; + +describe('App Entrypoint', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint/', + }); + await fixture.build(); + }); + + it('loads during SSR', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + // test 1: basic component renders + assert.equal($('#foo > #bar').text(), 'works'); + + // test 2: component with multiple script blocks renders and exports + // values from non setup block correctly + assert.equal($('#multiple-script-blocks').text(), '2 4'); + + // test 3: component using generics renders + assert.equal($('#generics').text(), 'generic'); + + // test 4: component using generics and multiple script blocks renders + assert.equal($('#generics-and-blocks').text(), '1 3!!!'); + }); + + it('setup included in renderer bundle', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const island = document.querySelector('astro-island'); + const client = island.getAttribute('renderer-url'); + assert.notEqual(client, undefined); + + const js = await fixture.readFile(client); + assert.match(js, /\w+\.component\("Bar"/g); + }); + + it('loads svg components without transforming them to assets', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const client = document.querySelector('astro-island svg'); + + assert.notEqual(client, undefined); + }); +}); + +describe('App Entrypoint no export default (dev)', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + let devServer; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-no-export-default/', + }); + devServer = await fixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('loads during SSR', async () => { + const html = await fixture.fetch('/').then((res) => res.text()); + const { document } = parseHTML(html); + const bar = document.querySelector('#foo > #bar'); + assert.notEqual(bar, undefined); + assert.equal(bar.textContent, 'works'); + }); + + it('loads svg components without transforming them to assets', async () => { + const html = await fixture.fetch('/').then((res) => res.text()); + const { document } = parseHTML(html); + const client = document.querySelector('astro-island svg'); + + assert.notEqual(client, undefined); + }); +}); + +describe('App Entrypoint no export default', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-no-export-default/', + }); + await fixture.build(); + }); + + it('loads during SSR', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const bar = document.querySelector('#foo > #bar'); + assert.notEqual(bar, undefined); + assert.equal(bar.textContent, 'works'); + }); + + it('component not included in renderer bundle', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const island = document.querySelector('astro-island'); + const client = island.getAttribute('renderer-url'); + assert.notEqual(client, undefined); + const js = await fixture.readFile(client); + assert.doesNotMatch(js, /\w+\.component\("Bar"/g); + }); + + it('loads svg components without transforming them to assets', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const client = document.querySelector('astro-island svg'); + + assert.notEqual(client, undefined); + }); +}); + +describe('App Entrypoint relative', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-relative/', + }); + await fixture.build(); + }); + + it('loads during SSR', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const bar = document.querySelector('#foo > #bar'); + assert.notEqual(bar, undefined); + assert.equal(bar.textContent, 'works'); + }); + + it('component not included in renderer bundle', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const island = document.querySelector('astro-island'); + const client = island.getAttribute('renderer-url'); + assert.notEqual(client, undefined); + + const js = await fixture.readFile(client); + assert.doesNotMatch(js, /\w+\.component\("Bar"/g); + }); +}); + +describe('App Entrypoint /src/absolute', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-src-absolute/', + }); + await fixture.build(); + }); + + it('loads during SSR', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const bar = document.querySelector('#foo > #bar'); + assert.notEqual(bar, undefined); + assert.equal(bar.textContent, 'works'); + }); + + it('component not included in renderer bundle', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const island = document.querySelector('astro-island'); + const client = island.getAttribute('renderer-url'); + assert.notEqual(client, undefined); + + const js = await fixture.readFile(client); + assert.doesNotMatch(js, /\w+\.component\("Bar"/g); + }); +}); + +describe('App Entrypoint async', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/app-entrypoint-async/', + }); + await fixture.build(); + }); + + it('loads during SSR', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + // test 1: component before await renders + assert.equal($('#foo > #bar').text(), 'works'); + + // test 2: component after await renders + assert.equal($('#foo > #baz').text(), 'works'); + }); +}); diff --git a/packages/integrations/vue/test/basics.test.js b/packages/integrations/vue/test/basics.test.js new file mode 100644 index 000000000..d54ea66b6 --- /dev/null +++ b/packages/integrations/vue/test/basics.test.js @@ -0,0 +1,42 @@ +import * as assert from 'node:assert/strict'; +import { before, describe, it } from 'node:test'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from './test-utils.js'; +describe('Basics', () => { + /** @type {import('./test-utils').Fixture} */ + let fixture; + + before(async () => { + fixture = await loadFixture({ + root: './fixtures/basics/', + }); + await fixture.build(); + }); + + it('Slots are added without the slot attribute', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + const bar = document.querySelector('#foo'); + + assert.notEqual(bar, undefined); + assert.equal(bar.getAttribute('slot'), null); + }); + + it('Can show images from public', async () => { + const data = await fixture.readFile('/public/index.html'); + const { document } = parseHTML(data); + const img = document.querySelector('img'); + + assert.notEqual(img, undefined); + assert.equal(img.getAttribute('src'), '/light_walrus.avif'); + }); + + it('Should generate unique ids when using useId()', async () => { + const data = await fixture.readFile('/index.html'); + const { document } = parseHTML(data); + + const els = document.querySelectorAll('.vue-use-id'); + assert.equal(els.length, 2); + assert.notEqual(els[0].getAttribute('id'), els[1].getAttribute('id')); + }); +}); diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs new file mode 100644 index 000000000..e82b7310f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/astro.config.mjs @@ -0,0 +1,14 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; +import ViteSvgLoader from 'vite-svg-loader' + +export default defineConfig({ + integrations: [vue({ + appEntrypoint: '/src/pages/_app' + })], + vite: { + plugins: [ + ViteSvgLoader(), + ], + }, +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json new file mode 100644 index 000000000..ca23cbaa3 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/vue-app-entrypoint-async", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*", + "vite-svg-loader": "5.1.0", + "vue": "^3.5.13" + } +}
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue new file mode 100644 index 000000000..9e690ea06 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Bar.vue @@ -0,0 +1,3 @@ +<template> + <div id="bar">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue new file mode 100644 index 000000000..8d7cb6b7c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Baz.vue @@ -0,0 +1,3 @@ +<template> + <div id="baz">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue new file mode 100644 index 000000000..94dd36584 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/components/Foo.vue @@ -0,0 +1,6 @@ +<template> + <div id="foo"> + <Bar /> + <Baz /> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts new file mode 100644 index 000000000..d2bc5396a --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/_app.ts @@ -0,0 +1,11 @@ +import type { App } from 'vue' +import Bar from '../components/Bar.vue' +import Baz from '../components/Baz.vue' + +export default async function setup(app: App) { + app.component('Bar', Bar); + + await new Promise(resolve => setTimeout(resolve, 250)); + + app.component('Baz', Baz); +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro new file mode 100644 index 000000000..3240cbe0f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-async/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Foo from '../components/Foo.vue'; +--- + +<html> + <head> + <title>Vue App Entrypoint</title> + </head> + <body> + <Foo client:load /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-css/astro.config.mjs new file mode 100644 index 000000000..cfc52edc8 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/astro.config.mjs @@ -0,0 +1,8 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [ + vue({ appEntrypoint: '/src/app.ts' }) + ], +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-css/package.json new file mode 100644 index 000000000..b34b4b99c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/vue-app-entrypoint-css", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/app.ts new file mode 100644 index 000000000..3f8025bb9 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/app.ts @@ -0,0 +1,9 @@ +import type { App } from 'vue' +// Important! Test that styles here are injected to the page +import '/src/main.css' +import Bar from './components/Bar.vue' + + +export default function setup(app: App) { + app.component('Bar', Bar); +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Bar.vue new file mode 100644 index 000000000..9e690ea06 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Bar.vue @@ -0,0 +1,3 @@ +<template> + <div id="bar">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Foo.vue new file mode 100644 index 000000000..3e648808c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/components/Foo.vue @@ -0,0 +1,5 @@ +<template> + <div id="foo"> + <Bar /> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/main.css b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/main.css new file mode 100644 index 000000000..5c197d2cf --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/main.css @@ -0,0 +1,3 @@ +:root { + background-color: red; +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/index.astro new file mode 100644 index 000000000..3240cbe0f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Foo from '../components/Foo.vue'; +--- + +<html> + <head> + <title>Vue App Entrypoint</title> + </head> + <body> + <Foo client:load /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/unrelated.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/unrelated.astro new file mode 100644 index 000000000..0952e25a7 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-css/src/pages/unrelated.astro @@ -0,0 +1,8 @@ +<html> + <head> + <title>Unrelated page</title> + </head> + <body> + <h1>I shouldn't have styles</h1> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/astro.config.mjs new file mode 100644 index 000000000..e82b7310f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/astro.config.mjs @@ -0,0 +1,14 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; +import ViteSvgLoader from 'vite-svg-loader' + +export default defineConfig({ + integrations: [vue({ + appEntrypoint: '/src/pages/_app' + })], + vite: { + plugins: [ + ViteSvgLoader(), + ], + }, +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/package.json new file mode 100644 index 000000000..c25770c68 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/package.json @@ -0,0 +1,14 @@ +{ + "name": "@test/vue-app-entrypoint-no-export-default", + "version": "0.0.0", + "private": true, + "scripts": { + "astro": "astro" + }, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*", + "vite-svg-loader": "5.1.0", + "vue": "^3.5.13" + } +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Bar.vue new file mode 100644 index 000000000..9e690ea06 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Bar.vue @@ -0,0 +1,3 @@ +<template> + <div id="bar">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Circle.svg b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Circle.svg new file mode 100644 index 000000000..cf2bd92fc --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Circle.svg @@ -0,0 +1 @@ +<svg fill="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" fill="#ff0" r="40" stroke="#008000" stroke-width="4"/></svg>
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Foo.vue new file mode 100644 index 000000000..7f6808477 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/components/Foo.vue @@ -0,0 +1,11 @@ +<script setup> +import Bar from './Bar.vue' +import Circle from './Circle.svg?component' +</script> + +<template> + <div id="foo"> + <Bar /> + <Circle/> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/pages/_app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/pages/_app.ts new file mode 100644 index 000000000..2fc8bde52 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/pages/_app.ts @@ -0,0 +1,3 @@ +export const setup = () => {} + +// no default export diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/pages/index.astro new file mode 100644 index 000000000..3240cbe0f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-no-export-default/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Foo from '../components/Foo.vue'; +--- + +<html> + <head> + <title>Vue App Entrypoint</title> + </head> + <body> + <Foo client:load /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/astro.config.mjs new file mode 100644 index 000000000..05bd1b6b0 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/astro.config.mjs @@ -0,0 +1,8 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [vue({ + appEntrypoint: './src/vue.ts' + })] +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/package.json new file mode 100644 index 000000000..80483c7c6 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/package.json @@ -0,0 +1,12 @@ +{ + "name": "@test/vue-app-entrypoint-relative", + "version": "0.0.0", + "private": true, + "scripts": { + "astro": "astro" + }, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Bar.vue new file mode 100644 index 000000000..9e690ea06 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Bar.vue @@ -0,0 +1,3 @@ +<template> + <div id="bar">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Circle.svg b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Circle.svg new file mode 100644 index 000000000..cf2bd92fc --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Circle.svg @@ -0,0 +1 @@ +<svg fill="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" fill="#ff0" r="40" stroke="#008000" stroke-width="4"/></svg>
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Foo.vue new file mode 100644 index 000000000..7f6808477 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/components/Foo.vue @@ -0,0 +1,11 @@ +<script setup> +import Bar from './Bar.vue' +import Circle from './Circle.svg?component' +</script> + +<template> + <div id="foo"> + <Bar /> + <Circle/> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/pages/index.astro new file mode 100644 index 000000000..3240cbe0f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Foo from '../components/Foo.vue'; +--- + +<html> + <head> + <title>Vue App Entrypoint</title> + </head> + <body> + <Foo client:load /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/vue.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/vue.ts new file mode 100644 index 000000000..ead516c97 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-relative/src/vue.ts @@ -0,0 +1 @@ +export default () => {} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/astro.config.mjs new file mode 100644 index 000000000..64bb97494 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/astro.config.mjs @@ -0,0 +1,8 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [vue({ + appEntrypoint: '/src/vue.ts' + })] +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/package.json new file mode 100644 index 000000000..244f9120c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/package.json @@ -0,0 +1,12 @@ +{ + "name": "@test/vue-app-entrypoint-src-absolute", + "version": "0.0.0", + "private": true, + "scripts": { + "astro": "astro" + }, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*" + } +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Bar.vue new file mode 100644 index 000000000..9e690ea06 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Bar.vue @@ -0,0 +1,3 @@ +<template> + <div id="bar">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Circle.svg b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Circle.svg new file mode 100644 index 000000000..cf2bd92fc --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Circle.svg @@ -0,0 +1 @@ +<svg fill="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" fill="#ff0" r="40" stroke="#008000" stroke-width="4"/></svg>
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Foo.vue new file mode 100644 index 000000000..7f6808477 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/components/Foo.vue @@ -0,0 +1,11 @@ +<script setup> +import Bar from './Bar.vue' +import Circle from './Circle.svg?component' +</script> + +<template> + <div id="foo"> + <Bar /> + <Circle/> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/pages/index.astro new file mode 100644 index 000000000..3240cbe0f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/pages/index.astro @@ -0,0 +1,12 @@ +--- +import Foo from '../components/Foo.vue'; +--- + +<html> + <head> + <title>Vue App Entrypoint</title> + </head> + <body> + <Foo client:load /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/vue.ts b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/vue.ts new file mode 100644 index 000000000..ead516c97 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint-src-absolute/src/vue.ts @@ -0,0 +1 @@ +export default () => {} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs b/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs new file mode 100644 index 000000000..e82b7310f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs @@ -0,0 +1,14 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; +import ViteSvgLoader from 'vite-svg-loader' + +export default defineConfig({ + integrations: [vue({ + appEntrypoint: '/src/pages/_app' + })], + vite: { + plugins: [ + ViteSvgLoader(), + ], + }, +}) diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/package.json b/packages/integrations/vue/test/fixtures/app-entrypoint/package.json new file mode 100644 index 000000000..50d4f547f --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/package.json @@ -0,0 +1,11 @@ +{ + "name": "@test/vue-app-entrypoint", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/vue": "workspace:*", + "astro": "workspace:*", + "vite-svg-loader": "5.1.0", + "vue": "^3.5.13" + } +}
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Bar.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Bar.vue new file mode 100644 index 000000000..9e690ea06 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Bar.vue @@ -0,0 +1,3 @@ +<template> + <div id="bar">works</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg new file mode 100644 index 000000000..cf2bd92fc --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Circle.svg @@ -0,0 +1 @@ +<svg fill="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" fill="#ff0" r="40" stroke="#008000" stroke-width="4"/></svg>
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue new file mode 100644 index 000000000..e07193d36 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue @@ -0,0 +1,10 @@ +<script setup> +import Circle from './Circle.svg?component' +</script> + +<template> + <div id="foo"> + <Bar /> + <Circle/> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Generics.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Generics.vue new file mode 100644 index 000000000..00ceea09e --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Generics.vue @@ -0,0 +1,13 @@ +<script lang="ts" setup generic="T extends 'generic' | 'not-generic'"> +interface GenericComponentProps { + value: T +} + +defineProps<GenericComponentProps>() +</script> + +<template> + <div id="generics"> + {{ value }} + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/GenericsAndBlocks.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/GenericsAndBlocks.vue new file mode 100644 index 000000000..7ecfdc7a0 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/GenericsAndBlocks.vue @@ -0,0 +1,18 @@ +<script lang="ts"> +export const customFormatter = (num: number) => `${num * 3}!!!` + +export type FormatNumber<T> = (num: T) => string; +</script> + +<script lang="ts" setup generic="T extends number, Formatter extends FormatNumber<T>"> +const props = defineProps<{ + value: T, + formatter: Formatter +}>() +</script> + +<template> + <div id="generics-and-blocks"> + {{ value }} {{ props.formatter(props.value) }} + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/MultipleScriptBlocks.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/MultipleScriptBlocks.vue new file mode 100644 index 000000000..ac2ec0a3c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/MultipleScriptBlocks.vue @@ -0,0 +1,18 @@ +<script lang="ts"> +export const doubleNumber = (num: number) => num * 2 +</script> + +<script lang="ts" setup> +defineProps({ + value: { + type: Number, + required: true + } +}) +</script> + +<template> + <div id="multiple-script-blocks"> + {{ doubleNumber(value) }} <slot /> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/_app.ts b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/_app.ts new file mode 100644 index 000000000..bbda85382 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/_app.ts @@ -0,0 +1,6 @@ +import type { App } from 'vue' +import Bar from '../components/Bar.vue' + +export default function setup(app: App) { + app.component('Bar', Bar); +} diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro new file mode 100644 index 000000000..511b626ba --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro @@ -0,0 +1,23 @@ +--- +import Foo from '../components/Foo.vue'; +import GenericComponent from '../components/Generics.vue'; +import GenericsAndBlocks, { customFormatter } from '../components/GenericsAndBlocks.vue'; +import MultipleScriptBlocks, { doubleNumber } from '../components/MultipleScriptBlocks.vue'; +--- + +<html> + <head> + <title>Vue App Entrypoint</title> + </head> + <body> + <Foo client:load /> + + <MultipleScriptBlocks value={1}> + {doubleNumber(2)} + </MultipleScriptBlocks> + + <GenericComponent value={'generic'} /> + + <GenericsAndBlocks value={1} formatter={customFormatter} /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/basics/astro.config.mjs b/packages/integrations/vue/test/fixtures/basics/astro.config.mjs new file mode 100644 index 000000000..4cc1189af --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/astro.config.mjs @@ -0,0 +1,6 @@ +import vue from '@astrojs/vue'; +import { defineConfig } from 'astro/config'; + +export default defineConfig({ + integrations: [vue()], +}) diff --git a/packages/integrations/vue/test/fixtures/basics/package.json b/packages/integrations/vue/test/fixtures/basics/package.json new file mode 100644 index 000000000..9cae3999c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/package.json @@ -0,0 +1,9 @@ +{ + "name": "@test/vue-basics", + "version": "0.0.0", + "private": true, + "dependencies": { + "astro": "workspace:*", + "@astrojs/vue": "workspace:*" + } +} diff --git a/packages/integrations/vue/test/fixtures/basics/public/light_walrus.avif b/packages/integrations/vue/test/fixtures/basics/public/light_walrus.avif Binary files differnew file mode 100644 index 000000000..89e1c3a14 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/public/light_walrus.avif diff --git a/packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue b/packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue new file mode 100644 index 000000000..29db411cd --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/src/components/Foo.vue @@ -0,0 +1,4 @@ + +<template> + <div id="foo">bar</div> +</template> diff --git a/packages/integrations/vue/test/fixtures/basics/src/components/Image.vue b/packages/integrations/vue/test/fixtures/basics/src/components/Image.vue new file mode 100644 index 000000000..5618c579b --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/src/components/Image.vue @@ -0,0 +1,3 @@ +<template> + <img src="/light_walrus.avif" /> +</template> diff --git a/packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro b/packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro new file mode 100644 index 000000000..25c574998 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/src/components/Parent.astro @@ -0,0 +1,4 @@ +<section> + <header></header> + <footer><slot name="footer"></slot></footer> +</section> diff --git a/packages/integrations/vue/test/fixtures/basics/src/components/WithId.vue b/packages/integrations/vue/test/fixtures/basics/src/components/WithId.vue new file mode 100644 index 000000000..2c8667696 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/src/components/WithId.vue @@ -0,0 +1,9 @@ +<script setup> +import { useId } from "vue" + +const id = useId() +</script> + +<template> + <p class="vue-use-id" :id="id">{{ id }}</p> +</template>
\ No newline at end of file diff --git a/packages/integrations/vue/test/fixtures/basics/src/pages/index.astro b/packages/integrations/vue/test/fixtures/basics/src/pages/index.astro new file mode 100644 index 000000000..162b326c8 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/src/pages/index.astro @@ -0,0 +1,17 @@ +--- +import Bar from '../components/Foo.vue'; +import Parent from '../components/Parent.astro'; +import WithId from '../components/WithId.vue'; +--- +<html> + <head> + <title>Testing</title> + </head> + <body> + <Parent> + <Bar slot="footer" /> + </Parent> + <WithId client:idle /> + <WithId client:idle /> + </body> +</html> diff --git a/packages/integrations/vue/test/fixtures/basics/src/pages/public.astro b/packages/integrations/vue/test/fixtures/basics/src/pages/public.astro new file mode 100644 index 000000000..011df270e --- /dev/null +++ b/packages/integrations/vue/test/fixtures/basics/src/pages/public.astro @@ -0,0 +1,5 @@ +--- +import Image from "../components/Image.vue"; +--- + +<Image /> diff --git a/packages/integrations/vue/test/test-utils.js b/packages/integrations/vue/test/test-utils.js new file mode 100644 index 000000000..512fe28dc --- /dev/null +++ b/packages/integrations/vue/test/test-utils.js @@ -0,0 +1,16 @@ +import { loadFixture as baseLoadFixture } from '../../../astro/test/test-utils.js'; + +/** + * @typedef {import('../../../astro/test/test-utils').Fixture} Fixture + */ + +export function loadFixture(inlineConfig) { + if (!inlineConfig?.root) throw new Error("Must provide { root: './fixtures/...' }"); + + // resolve the relative root (i.e. "./fixtures/tailwindcss") to a full filepath + // without this, the main `loadFixture` helper will resolve relative to `packages/astro/test` + return baseLoadFixture({ + ...inlineConfig, + root: new URL(inlineConfig.root, import.meta.url).toString(), + }); +} diff --git a/packages/integrations/vue/test/toTsx.test.js b/packages/integrations/vue/test/toTsx.test.js new file mode 100644 index 000000000..b91b5cad1 --- /dev/null +++ b/packages/integrations/vue/test/toTsx.test.js @@ -0,0 +1,51 @@ +import assert from 'node:assert/strict'; +import { describe, it } from 'node:test'; +import { toTSX } from '../dist/editor.cjs'; + +describe('toTSX function', () => { + it('should correctly transform Vue code to TSX with comments', () => { + const vueCode = ` + <template> + <div>{{ msg }}</div> + </template> + + <script setup> + // This is a comment in script setup + // defineProps(['msg']); + // console.log('foo) + </script> + `; + + const className = 'MyComponent'; + const result = toTSX(vueCode, className); + + // Replace the expectations below with the expected result based on your logic + assert.strictEqual( + result, + `export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`, + ); + }); + it('should correctly transform Vue code to TSX', () => { + const vueCode = ` + <template> + <div @click="handleClick">{{ msg }}</div> + </template> + + <script setup> + const props defineProps({ + msg: String + }); + const handleClick = () => { + console.log('foo'); + } + </script> + `; + + const className = 'MyComponent'; + const result = toTSX(vueCode, className); + assert.strictEqual( + result.replace(/\s/g, ''), + `import{defineProps}from'vue';constProps=defineProps({msg:String})exportdefaultfunction${className}__AstroComponent_(_props:typeofProps):any{<div></div>}`, + ); + }); +}); diff --git a/packages/integrations/vue/tsconfig.json b/packages/integrations/vue/tsconfig.json new file mode 100644 index 000000000..5742d1f6e --- /dev/null +++ b/packages/integrations/vue/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.base.json", + "include": ["src"], + "compilerOptions": { + "outDir": "./dist", + "verbatimModuleSyntax": false + } +} |
