diff options
Diffstat (limited to 'examples')
63 files changed, 390 insertions, 109 deletions
diff --git a/examples/blog-multiple-authors/astro.config.mjs b/examples/blog-multiple-authors/astro.config.mjs index a024b64b4..5a51e487a 100644 --- a/examples/blog-multiple-authors/astro.config.mjs +++ b/examples/blog-multiple-authors/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; // https://astro.build/config export default defineConfig({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact integration to support Preact JSX components. + integrations: [preact()], }); diff --git a/examples/blog-multiple-authors/package.json b/examples/blog-multiple-authors/package.json index d2e77885d..c3d7d7b98 100644 --- a/examples/blog-multiple-authors/package.json +++ b/examples/blog-multiple-authors/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", + "@astrojs/preact": "^0.0.1", "astro": "^0.24.3", "sass": "^1.49.9" } diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index f682daa06..e8f14324a 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -1,8 +1,9 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; // https://astro.build/config export default defineConfig({ - renderers: ['@astrojs/renderer-preact'], + integrations: [preact()], buildOptions: { site: 'https://example.com/', }, diff --git a/examples/blog/package.json b/examples/blog/package.json index 13b11a14c..4e0efd07d 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -10,6 +10,6 @@ }, "devDependencies": { "astro": "^0.24.3", - "@astrojs/renderer-preact": "^0.5.0" + "@astrojs/preact": "^0.0.1" } } diff --git a/examples/component/demo/astro.config.mjs b/examples/component/demo/astro.config.mjs index c6e58dbdc..882e6515a 100644 --- a/examples/component/demo/astro.config.mjs +++ b/examples/component/demo/astro.config.mjs @@ -1,7 +1,4 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config -export default defineConfig({ - // Comment out "renderers: []" to enable Astro's default component support. - renderers: [], -}); +export default defineConfig({}); diff --git a/examples/docs/astro.config.mjs b/examples/docs/astro.config.mjs index 9f97b3a89..7ae8d6f7b 100644 --- a/examples/docs/astro.config.mjs +++ b/examples/docs/astro.config.mjs @@ -1,11 +1,13 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; +import react from '@astrojs/react'; // https://astro.build/config export default defineConfig({ - renderers: [ - // Enable the Preact renderer to support Preact JSX components. - '@astrojs/renderer-preact', - // Enable the React renderer, for the Algolia search component - '@astrojs/renderer-react', + integrations: [ + // Enable Preact to support Preact JSX components. + preact(), + // Enable React for the Algolia search component. + react(), ], }); diff --git a/examples/docs/package.json b/examples/docs/package.json index 60000c43f..ab596ccce 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -17,8 +17,8 @@ "react-dom": "^17.0.2" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", - "@astrojs/renderer-react": "^0.5.0", + "@astrojs/preact": "^0.0.1", + "@astrojs/react": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/env-vars/astro.config.mjs b/examples/env-vars/astro.config.mjs index e3579a160..882e6515a 100644 --- a/examples/env-vars/astro.config.mjs +++ b/examples/env-vars/astro.config.mjs @@ -1,6 +1,4 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config -export default defineConfig({ - renderers: [], -}); +export default defineConfig({}); diff --git a/examples/framework-alpine/astro.config.mjs b/examples/framework-alpine/astro.config.mjs index 9827239bb..ade2c1278 100644 --- a/examples/framework-alpine/astro.config.mjs +++ b/examples/framework-alpine/astro.config.mjs @@ -2,6 +2,6 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({ - // No renderers are needed for AlpineJS support, just use Astro components! - renderers: [], + // No integrations are needed for AlpineJS support, just use Astro components! + integrations: [], }); diff --git a/examples/framework-lit/astro.config.mjs b/examples/framework-lit/astro.config.mjs index c86c77bf7..99733e933 100644 --- a/examples/framework-lit/astro.config.mjs +++ b/examples/framework-lit/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import lit from '@astrojs/lit'; // https://astro.build/config export default defineConfig({ - // Enable the lit renderer to support LitHTML components and templates. - renderers: ['@astrojs/renderer-lit'], + // Enable Lit to support LitHTML components and templates. + integrations: [lit()], }); diff --git a/examples/framework-lit/package.json b/examples/framework-lit/package.json index 4d68428b5..651dbf2ab 100644 --- a/examples/framework-lit/package.json +++ b/examples/framework-lit/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-lit": "^0.4.0", + "@astrojs/lit": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/framework-multiple/astro.config.mjs b/examples/framework-multiple/astro.config.mjs index 90f8b2ca4..4b50887cd 100644 --- a/examples/framework-multiple/astro.config.mjs +++ b/examples/framework-multiple/astro.config.mjs @@ -1,7 +1,12 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; +import react from '@astrojs/react'; +import svelte from '@astrojs/svelte'; +import vue from '@astrojs/vue'; +import solid from '@astrojs/solid-js'; // https://astro.build/config export default defineConfig({ - // Enable many renderers to support all different kinds of components. - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], + // Enable many frameworks to support all different kinds of components. + integrations: [preact(), react(), svelte(), vue(), solid()], }); diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 1b299dba9..e24f45a97 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -9,12 +9,12 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-lit": "^0.4.0", - "@astrojs/renderer-preact": "^0.5.0", - "@astrojs/renderer-react": "^0.5.0", - "@astrojs/renderer-solid": "^0.4.0", - "@astrojs/renderer-svelte": "^0.5.2", - "@astrojs/renderer-vue": "^0.4.0", + "@astrojs/lit": "^0.0.1", + "@astrojs/preact": "^0.0.1", + "@astrojs/react": "^0.0.1", + "@astrojs/solid-js": "^0.0.1", + "@astrojs/svelte": "^0.0.1", + "@astrojs/vue": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/framework-preact/astro.config.mjs b/examples/framework-preact/astro.config.mjs index a024b64b4..b1c8d1150 100644 --- a/examples/framework-preact/astro.config.mjs +++ b/examples/framework-preact/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; // https://astro.build/config export default defineConfig({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable Preact to support Preact JSX components. + integrations: [preact()], }); diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json index 23e834b17..68ad0fabf 100644 --- a/examples/framework-preact/package.json +++ b/examples/framework-preact/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", + "@astrojs/preact": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/framework-react/astro.config.mjs b/examples/framework-react/astro.config.mjs index b35ad27e9..4b5a68ec0 100644 --- a/examples/framework-react/astro.config.mjs +++ b/examples/framework-react/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; // https://astro.build/config export default defineConfig({ - // Enable the React renderer to support React JSX components. - renderers: ['@astrojs/renderer-react'], + // Enable React to support React JSX components. + integrations: [react()], }); diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json index 399246155..f0d36db78 100644 --- a/examples/framework-react/package.json +++ b/examples/framework-react/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-react": "^0.5.0", + "@astrojs/react": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/framework-solid/astro.config.mjs b/examples/framework-solid/astro.config.mjs index c78642c43..623fb8ea5 100644 --- a/examples/framework-solid/astro.config.mjs +++ b/examples/framework-solid/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import solid from '@astrojs/solid-js'; // https://astro.build/config export default defineConfig({ - // Enable the Solid renderer to support Solid JSX components. - renderers: ['@astrojs/renderer-solid'], + // Enable Solid to support Solid JSX components. + integrations: [solid()], }); diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json index e11ec1ca5..d76f69b27 100644 --- a/examples/framework-solid/package.json +++ b/examples/framework-solid/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-solid": "^0.4.0", + "@astrojs/solid-js": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/framework-svelte/astro.config.mjs b/examples/framework-svelte/astro.config.mjs index 4452ef101..194e45917 100644 --- a/examples/framework-svelte/astro.config.mjs +++ b/examples/framework-svelte/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import svelte from '@astrojs/svelte'; // https://astro.build/config export default defineConfig({ - // Enable the Svelte renderer to support Svelte components. - renderers: ['@astrojs/renderer-svelte'], + // Enable Svelte to support Svelte components. + integrations: [svelte()], }); diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index 4370b867f..1c3bd34ca 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-svelte": "^0.5.2", + "@astrojs/svelte": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/framework-vue/astro.config.mjs b/examples/framework-vue/astro.config.mjs index 563e8b8fc..f30130a95 100644 --- a/examples/framework-vue/astro.config.mjs +++ b/examples/framework-vue/astro.config.mjs @@ -1,7 +1,8 @@ import { defineConfig } from 'astro/config'; +import vue from '@astrojs/vue'; // https://astro.build/config export default defineConfig({ - // Enable the Vue renderer to support Vue components. - renderers: ['@astrojs/renderer-vue'], + // Enable Vue to support Vue components. + integrations: [vue()], }); diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json index e8779da77..21c1df412 100644 --- a/examples/framework-vue/package.json +++ b/examples/framework-vue/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-vue": "^0.4.0", + "@astrojs/vue": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/integrations-playground/.gitignore b/examples/integrations-playground/.gitignore new file mode 100644 index 000000000..c82467453 --- /dev/null +++ b/examples/integrations-playground/.gitignore @@ -0,0 +1,17 @@ +# build output +dist + +# dependencies +node_modules/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/integrations-playground/.npmrc b/examples/integrations-playground/.npmrc new file mode 100644 index 000000000..ef83021af --- /dev/null +++ b/examples/integrations-playground/.npmrc @@ -0,0 +1,2 @@ +# Expose Astro dependencies for `pnpm` users +shamefully-hoist=true diff --git a/examples/integrations-playground/.stackblitzrc b/examples/integrations-playground/.stackblitzrc new file mode 100644 index 000000000..43798ecff --- /dev/null +++ b/examples/integrations-playground/.stackblitzrc @@ -0,0 +1,6 @@ +{ + "startCommand": "npm start", + "env": { + "ENABLE_CJS_IMPORTS": true + } +}
\ No newline at end of file diff --git a/examples/integrations-playground/README.md b/examples/integrations-playground/README.md new file mode 100644 index 000000000..0910d4b88 --- /dev/null +++ b/examples/integrations-playground/README.md @@ -0,0 +1,7 @@ +# Integration Playground + +``` +npm init astro -- --template integration-playground +``` + +[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/integration-playground) diff --git a/examples/integrations-playground/astro.config.mjs b/examples/integrations-playground/astro.config.mjs new file mode 100644 index 000000000..a1f21fe0b --- /dev/null +++ b/examples/integrations-playground/astro.config.mjs @@ -0,0 +1,12 @@ +import { defineConfig } from 'astro/config'; + +import lit from '@astrojs/lit'; +import react from '@astrojs/react'; +import tailwind from '@astrojs/tailwind'; +import turbolinks from '@astrojs/turbolinks'; +import sitemap from '@astrojs/sitemap'; +import partytown from '@astrojs/partytown'; + +export default defineConfig({ + integrations: [lit(), react(), tailwind(), turbolinks(), partytown(), sitemap()], +}); diff --git a/examples/integrations-playground/package.json b/examples/integrations-playground/package.json new file mode 100644 index 000000000..23b8c21df --- /dev/null +++ b/examples/integrations-playground/package.json @@ -0,0 +1,20 @@ +{ + "name": "@example/integrations-playground", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview" + }, + "devDependencies": { + "@astrojs/lit": "^0.0.1", + "@astrojs/react": "^0.0.1", + "@astrojs/partytown": "^0.0.1", + "@astrojs/sitemap": "^0.0.1", + "@astrojs/tailwind": "^0.0.1", + "@astrojs/turbolinks": "^0.0.1", + "astro": "^0.24.3" + } +} diff --git a/examples/integrations-playground/public/assets/logo.svg b/examples/integrations-playground/public/assets/logo.svg new file mode 100644 index 000000000..d751556b2 --- /dev/null +++ b/examples/integrations-playground/public/assets/logo.svg @@ -0,0 +1,12 @@ +<svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg"> + <style> + #flame { fill: #FF5D01; } + #a { fill: #000014; } + @media (prefers-color-scheme: dark) { + #a { fill: #fff; } + } + </style> + + <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.929c1.943 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53L99.746 60.56a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.224 180.224 0 00-52.01 17.557l43.52-142.281c1.989-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.085 1.157a16 16 0 016.488 4.806z" fill="url(#paint0_linear)"/> + <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151c-7.14 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.962 10.367-1.962 13.902 0 0-1.055 17.355 11.016 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.973-19.87 5.977-3.79 12.616-8.001 17.192-16.449a31.013 31.013 0 003.744-14.82c0-3.299-.513-6.479-1.463-9.463z" /> +</svg> diff --git a/examples/integrations-playground/public/favicon.ico b/examples/integrations-playground/public/favicon.ico Binary files differnew file mode 100644 index 000000000..578ad458b --- /dev/null +++ b/examples/integrations-playground/public/favicon.ico diff --git a/examples/integrations-playground/public/robots.txt b/examples/integrations-playground/public/robots.txt new file mode 100644 index 000000000..1f53798bb --- /dev/null +++ b/examples/integrations-playground/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/examples/integrations-playground/sandbox.config.json b/examples/integrations-playground/sandbox.config.json new file mode 100644 index 000000000..9178af77d --- /dev/null +++ b/examples/integrations-playground/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +} diff --git a/examples/integrations-playground/src/components/Counter.js b/examples/integrations-playground/src/components/Counter.js new file mode 100644 index 000000000..35fa8dbbb --- /dev/null +++ b/examples/integrations-playground/src/components/Counter.js @@ -0,0 +1,34 @@ +import { LitElement, html } from 'lit'; + +export const tagName = 'my-counter'; + +class Counter extends LitElement { + static get properties() { + return { + count: { + type: Number, + }, + }; + } + + constructor() { + super(); + this.count = 0; + } + + increment() { + this.count++; + } + + render() { + return html` + <div> + <p>Count: ${this.count}</p> + + <button type="button" @click=${this.increment}>Increment</button> + </div> + `; + } +} + +customElements.define(tagName, Counter); diff --git a/examples/integrations-playground/src/components/Link.jsx b/examples/integrations-playground/src/components/Link.jsx new file mode 100644 index 000000000..2758df130 --- /dev/null +++ b/examples/integrations-playground/src/components/Link.jsx @@ -0,0 +1,3 @@ +export default function Link({ to, text }) { + return <a href={to}>{text}</a>; +} diff --git a/examples/integrations-playground/src/components/Lorem.astro b/examples/integrations-playground/src/components/Lorem.astro new file mode 100644 index 000000000..7a3ad924a --- /dev/null +++ b/examples/integrations-playground/src/components/Lorem.astro @@ -0,0 +1,66 @@ +--- +//hey +--- +<style> +p { + color: red; +} +</style> +<p> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quam arcu, rhoncus et dui at, volutpat viverra augue. Suspendisse placerat libero tellus, ut consequat ligula + rutrum id. Vestibulum lectus libero, viverra in lacus eget, porttitor tincidunt leo. Integer sit amet turpis et felis fringilla lacinia in id nibh. Proin vitae dapibus odio. + Mauris ornare eget urna id volutpat. Duis tellus nisi, hendrerit id sodales in, rutrum a quam. Proin tempor velit turpis, et tempor lacus sagittis in. Sed congue mauris quis nibh + posuere, nec semper lacus auctor. Morbi sit amet enim sit amet arcu ullamcorper sollicitudin. Donec dignissim posuere tincidunt. Donec ultrices quam nec orci venenatis suscipit. + Maecenas sapien quam, pretium sit amet ullamcorper at, vulputate sit amet urna. Suspendisse potenti. Integer in sapien turpis. Nulla accumsan viverra diam, quis convallis magna + finibus eget. Integer sed eros bibendum, consequat velit sit amet, tincidunt orci. Mauris varius id metus in fringilla. Vestibulum dignissim massa eget erat luctus, ac congue + mauris pellentesque. In et tempor dolor. Cras blandit congue lorem at facilisis. Aenean vel lacinia quam. Pellentesque luctus metus ut scelerisque efficitur. Mauris laoreet + sodales libero eget luctus. Proin at congue dui, a cursus risus. Pellentesque lorem sem, rhoncus fermentum arcu ut, euismod fermentum ligula. Nullam eu orci posuere, laoreet leo + in, commodo dolor. Fusce at felis elementum, commodo justo at, placerat justo. Nam feugiat scelerisque arcu, ut fermentum tellus elementum in. Sed ut vulputate ante. Morbi cursus + arcu quis odio convallis egestas. Donec vulputate vestibulum dolor eget tristique. Nullam tempor semper augue, vitae lobortis neque tempor ac. Pellentesque massa leo, congue id + ligula auctor, sollicitudin pharetra lorem. Curabitur a lacus porttitor, venenatis est quis, mattis velit. Fusce hendrerit lobortis mi ac efficitur. Mauris ornare, lorem sed + varius faucibus, nisi dui pretium urna, sit amet lacinia nibh ligula in ipsum. Phasellus gravida, metus eget ornare ultrices, dolor ipsum consectetur erat, ac aliquet eros metus + sed lectus. Nullam eleifend posuere rhoncus. Curabitur semper ligula vel ante posuere, at blandit orci accumsan. Vivamus accumsan metus in lorem laoreet, a luctus arcu tempus. + Donec posuere sollicitudin nulla at vulputate. Nulla condimentum imperdiet purus, et lobortis ligula iaculis in. Donec suscipit viverra neque, ut elementum eros lacinia ut. Fusce + at odio enim. Donec rutrum lectus sit amet est auctor, ac rhoncus lorem imperdiet. Curabitur commodo ex est, non tempus massa pulvinar nec. Sed fermentum, lectus eget ultricies + luctus, enim sem sodales quam, sed laoreet tortor sem feugiat nisi. Morbi molestie vehicula viverra. Integer accumsan mi in orci ultrices posuere. Integer mi quam, faucibus et + aliquet imperdiet, ornare ac ex. Nunc mattis molestie nisi, eu venenatis nibh vehicula at. Aliquam ut elit consectetur, finibus lorem sed, condimentum sapien. Praesent fermentum + iaculis orci, vitae tincidunt est viverra nec. Morbi semper turpis sed lectus ornare tristique. Sed congue dui ex. Maecenas orci ligula, imperdiet sit amet accumsan et, finibus a + velit. Ut vitae blandit eros. Nam gravida nec ipsum non volutpat. Integer quam metus, porttitor id ante sed, rutrum porta quam. Aenean at mattis ante. Morbi id libero eget risus + sagittis gravida. Proin consequat sapien a dignissim posuere. Ut luctus sed metus ut elementum. Mauris tincidunt condimentum risus at bibendum. Aenean a sapien justo. Morbi vel + neque in eros venenatis scelerisque vitae nec justo. Vestibulum lacinia, dui eu sollicitudin ornare, est elit vestibulum arcu, nec ultrices augue turpis in massa. Duis commodo + lectus sed est posuere, et mollis nisi dapibus. Sed id ultrices arcu. Praesent tempor sodales aliquet. Donec suscipit ipsum eu odio cursus, quis sodales metus sodales. Nunc + vestibulum massa at felis ullamcorper cursus. Pellentesque facilisis ante ut lectus vulputate vestibulum. Nullam pharetra felis ac lacus sodales, vel suscipit metus faucibus. + Donec facilisis imperdiet risus, in volutpat odio tincidunt a. Aliquam vitae leo lorem. Proin scelerisque efficitur velit, vel cursus ipsum accumsan id. Morbi nibh nulla, pretium + quis venenatis et, pharetra et sapien. Cras lobortis, massa sit amet blandit pulvinar, mi magna condimentum ex, quis commodo ipsum est quis metus. Maecenas pulvinar, leo sit amet + congue pulvinar, neque magna ultrices mi, et rhoncus massa sapien quis libero. Etiam a nunc et ipsum faucibus pretium. Nulla facilisi. Nunc nec dolor velit. In semper semper mi + non condimentum. Pellentesque vehicula volutpat odio, a semper sem porta a. In sit amet lectus rutrum, sollicitudin augue auctor, maximus quam. Mauris congue, nisl non fermentum + iaculis, leo erat interdum lorem, quis bibendum arcu eros et elit. Fusce tortor ante, gravida a arcu in, lacinia finibus ante. Phasellus facilisis lectus vitae sapien feugiat + laoreet. Curabitur ultricies libero sit amet condimentum suscipit. Duis at vestibulum mi. Suspendisse at neque augue. Duis ornare a mauris id efficitur. Suspendisse in dui nec + dolor dignissim venenatis. Curabitur a magna turpis. Aliquam at commodo tellus. In id sem interdum, suscipit felis at, mattis velit. Proin accumsan sodales felis a lacinia. + Curabitur at magna a massa varius maximus. Vestibulum in auctor ante. Donec aliquam tortor sed nulla rutrum, et egestas mi efficitur. Sed viverra quam tellus, quis vulputate + felis ultrices sed. Mauris sagittis, neque quis laoreet gravida, nisi est ultrices mi, at tempus nunc justo non dui. Suspendisse porttitor tortor nulla, eget luctus quam finibus + id. Proin sodales eros mollis tellus euismod luctus a eu mi. Quisque consectetur iaculis nibh, at mollis tellus volutpat eu. Aenean a nulla vel lectus rhoncus aliquam. Donec + vitae lacinia neque. Donec non lectus eget sem finibus ultrices vel nec felis. Proin fringilla mi a leo rhoncus aliquam sit amet quis augue. Duis congue ligula at est suscipit + fringilla. Proin aliquam erat ut consequat dapibus. Suspendisse non nisi orci. Donec ac erat vel libero egestas laoreet. Nullam felis odio, tincidunt eget eleifend a, porttitor + eu nisi. Suspendisse tristique eros at dolor scelerisque hendrerit. Etiam id dignissim lectus. Fusce lacinia metus eu risus placerat, et eleifend nunc ultrices. Ut gravida a dui + sed volutpat. Sed semper quis erat sed ornare. Pellentesque sapien sem, fermentum vel nunc at, auctor posuere nisl. Maecenas aliquet lobortis leo. Vivamus tellus urna, dignissim + consectetur sapien vitae, hendrerit varius sem. Nunc dictum tristique fermentum. Duis eu suscipit odio. Curabitur quis egestas neque. Fusce eu fringilla orci, vitae euismod + sapien. Donec sit amet iaculis urna. Phasellus maximus nisl in libero bibendum volutpat. Nulla at vehicula lorem. Phasellus varius, elit ac suscipit pretium, turpis ipsum + porttitor lectus, vitae ullamcorper orci velit ut ligula. Proin mollis, orci vel commodo auctor, sapien ipsum vulputate enim, sit amet aliquam nulla sapien ut sapien. Proin + tincidunt ex non massa aliquet, quis aliquam nulla egestas. Maecenas mollis turpis dapibus, dignissim lectus tincidunt, egestas ligula. Suspendisse in lobortis purus. Sed tellus + tellus, mollis eget tempor sed, interdum ut lectus. Nulla sed ex efficitur, porta dui cursus, tristique elit. Maecenas tincidunt tortor vitae massa laoreet ultricies. Mauris ac + elit vitae orci eleifend ornare non eu ligula. Curabitur venenatis nulla ut neque tristique, non tincidunt justo pretium. Suspendisse mattis semper dui, eget vestibulum risus + elementum sed. In consequat nisi sit amet nulla euismod, at convallis tortor tincidunt. Aliquam hendrerit venenatis risus in interdum. Duis ullamcorper imperdiet elit sit amet + blandit. Mauris placerat lacinia velit id pharetra. Nam nec iaculis dui. Etiam odio mi, fringilla in rutrum in, viverra quis tellus. Aliquam egestas mauris id nisi facilisis, in + laoreet nibh malesuada. Ut eu dui laoreet, venenatis tellus ac, feugiat mauris. Nunc in velit laoreet, venenatis tellus quis, blandit dolor. Nulla ultrices et neque id placerat. + Nulla eu interdum nulla. Aliquam molestie enim quis rutrum finibus. Nulla bibendum orci vel scelerisque posuere. Praesent quis magna molestie, luctus tortor tincidunt, gravida + neque. Quisque et ligula eget magna viverra interdum at a sapien. Mauris ornare efficitur nunc sed vulputate. Praesent laoreet mollis tincidunt. Vestibulum id arcu vulputate, + eleifend enim vel, accumsan turpis. Morbi faucibus convallis tellus, semper laoreet justo lacinia nec. Sed sodales ligula consectetur dui rhoncus, et convallis metus accumsan. + Sed ullamcorper non ex sit amet ultricies. Donec finibus nulla nec blandit porttitor. Etiam aliquam quis leo a imperdiet. Cras at lobortis est. In convallis semper enim, ac porta + ligula fringilla at. Donec augue est, facilisis et odio sit amet, viverra ullamcorper nisl. Ut porta velit nec sem lacinia, sit amet mollis magna auctor. Nulla lobortis lacinia + mauris nec sagittis. Suspendisse rutrum ex vel nisi interdum hendrerit et ut purus. Sed consectetur sodales nibh eget tempus. Aenean egestas luctus viverra. Integer fermentum + tincidunt tellus, nec rhoncus velit hendrerit vitae. Proin quis neque porttitor, scelerisque risus gravida, volutpat sem. Fusce nec ex rhoncus, tempor libero nec, pellentesque + ex. Integer quis iaculis purus. Nullam vitae imperdiet orci. Sed sit amet eros condimentum, scelerisque turpis facilisis, dignissim ante. Proin quis tristique lacus, sed sagittis + nisl. Cras pharetra ultrices purus, sed ullamcorper nisi fringilla eu. Praesent risus turpis, auctor in fringilla a, fringilla eu dolor. Phasellus auctor tristique enim, eleifend + molestie diam venenatis ut. Mauris dapibus, enim eget pharetra semper, nulla dui porttitor mi, auctor hendrerit augue nulla quis urna. Aliquam in cursus justo. +</p> diff --git a/examples/integrations-playground/src/components/Test.js b/examples/integrations-playground/src/components/Test.js new file mode 100644 index 000000000..7f565f777 --- /dev/null +++ b/examples/integrations-playground/src/components/Test.js @@ -0,0 +1,19 @@ +import { LitElement, html } from 'lit'; + +export const tagName = 'calc-add'; + +class CalcAdd extends LitElement { + static get properties() { + return { + num: { + type: Number, + }, + }; + } + + render() { + return html` <div>Number: ${this.num}</div> `; + } +} + +customElements.define(tagName, CalcAdd); diff --git a/examples/integrations-playground/src/pages/foo.astro b/examples/integrations-playground/src/pages/foo.astro new file mode 100644 index 000000000..fbdd5bb1f --- /dev/null +++ b/examples/integrations-playground/src/pages/foo.astro @@ -0,0 +1,15 @@ +--- +// Page 2! +import Link from '../components/Link.jsx'; +--- + +<!DOCTYPE html> +<html lang="en"> + <head> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>Demo: Page 2</title> + </head> + <body> + <Link to="/" text="Go Home" /> + </body> +</html> diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro new file mode 100644 index 000000000..677026072 --- /dev/null +++ b/examples/integrations-playground/src/pages/index.astro @@ -0,0 +1,53 @@ +--- +import Lorem from '../components/Lorem.astro'; +import Link from '../components/Link.jsx'; +import '../components/Test.js'; +import '../components/Counter.js'; +--- + +<!DOCTYPE html> +<html lang="en"> + <head> + <link rel="icon" type="image/x-icon" href="/favicon.ico" /> + <title>Demo</title> + </head> + <body> + <h1 class="px-4 py-4">Test app</h1> + <h2 class="partytown-status"> + <strong>Party Mode!</strong> + Colors changing = partytown is enabled + </h2> + <my-counter client:load></my-counter> + <Link to="/foo" text="Go to Page 2" /> + <Lorem /> + <calc-add num={33}></calc-add> + + + <script type="text/partytown"> + // Remove `type="text/partytown"` to see this block the page + // and cause the page to become unresponsive + console.log('start partytown blocking script') + const now = Date.now() + let count = 1; + while (Date.now() - now < 10000) { + if (Date.now() - now > count * 1000) { + console.log('blocking', count); + count += 1; + } + } + console.log('end partytown blocking script') + </script> + + <script> + setInterval(() => { + const randomColor = Math.floor(Math.random()*16777215).toString(16); + document.querySelector('.partytown-status').style.color = "#" + randomColor; + }, 100); + </script> + <style> +h1, h2 { + color: blue; +} +</style> + </body> +</html> diff --git a/examples/integrations-playground/tsconfig.json b/examples/integrations-playground/tsconfig.json new file mode 100644 index 000000000..8e881cf9c --- /dev/null +++ b/examples/integrations-playground/tsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "moduleResolution": "node" + } +} diff --git a/examples/minimal/astro.config.mjs b/examples/minimal/astro.config.mjs index c6e58dbdc..882e6515a 100644 --- a/examples/minimal/astro.config.mjs +++ b/examples/minimal/astro.config.mjs @@ -1,7 +1,4 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config -export default defineConfig({ - // Comment out "renderers: []" to enable Astro's default component support. - renderers: [], -}); +export default defineConfig({}); diff --git a/examples/non-html-pages/astro.config.mjs b/examples/non-html-pages/astro.config.mjs index c6e58dbdc..882e6515a 100644 --- a/examples/non-html-pages/astro.config.mjs +++ b/examples/non-html-pages/astro.config.mjs @@ -1,7 +1,4 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config -export default defineConfig({ - // Comment out "renderers: []" to enable Astro's default component support. - renderers: [], -}); +export default defineConfig({}); diff --git a/examples/portfolio/astro.config.mjs b/examples/portfolio/astro.config.mjs index a024b64b4..f0dab7e31 100644 --- a/examples/portfolio/astro.config.mjs +++ b/examples/portfolio/astro.config.mjs @@ -1,7 +1,7 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/render-preact'; // https://astro.build/config export default defineConfig({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + integrations: [preact()], }); diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index bbf074abf..11c7b63ca 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", + "@astrojs/preact": "^0.0.1", "astro": "^0.24.3", "sass": "^1.49.9" } diff --git a/examples/ssr/astro.config.mjs b/examples/ssr/astro.config.mjs index c8e5061a6..481576db1 100644 --- a/examples/ssr/astro.config.mjs +++ b/examples/ssr/astro.config.mjs @@ -1,7 +1,9 @@ import { defineConfig } from 'astro/config'; +import svelte from '@astrojs/svelte'; +// https://astro.build/config export default defineConfig({ - renderers: ['@astrojs/renderer-svelte'], + integrations: [svelte()], vite: { server: { cors: { diff --git a/examples/ssr/package.json b/examples/ssr/package.json index fe135b832..b454978c8 100644 --- a/examples/ssr/package.json +++ b/examples/ssr/package.json @@ -12,7 +12,7 @@ "server": "node server/server.mjs" }, "devDependencies": { - "@astrojs/renderer-svelte": "^0.5.2", + "@astrojs/svelte": "^0.0.1", "astro": "^0.24.3", "concurrently": "^7.0.0", "lightcookie": "^1.0.25", diff --git a/examples/starter/astro.config.mjs b/examples/starter/astro.config.mjs index f8ad313bc..882e6515a 100644 --- a/examples/starter/astro.config.mjs +++ b/examples/starter/astro.config.mjs @@ -1,7 +1,4 @@ import { defineConfig } from 'astro/config'; // https://astro.build/config -export default defineConfig({ - // Set "renderers" to "[]" to disable all default, builtin component support. - renderers: [], -}); +export default defineConfig({}); diff --git a/examples/subpath/astro.config.mjs b/examples/subpath/astro.config.mjs index 42ecf7db4..bb680d762 100644 --- a/examples/subpath/astro.config.mjs +++ b/examples/subpath/astro.config.mjs @@ -1,10 +1,10 @@ import { defineConfig } from 'astro/config'; +import react from '@astrojs/react'; // https://astro.build/config export default defineConfig({ - // Comment out "renderers: []" to enable Astro's default component support. + integrations: [react()], buildOptions: { site: 'http://example.com/blog', }, - renderers: ['@astrojs/renderer-react'], }); diff --git a/examples/subpath/package.json b/examples/subpath/package.json index aab141e2a..d29f58717 100644 --- a/examples/subpath/package.json +++ b/examples/subpath/package.json @@ -9,7 +9,7 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-react": "^0.5.0", + "@astrojs/react": "^0.0.1", "astro": "^0.24.3", "sass": "^1.49.9" } diff --git a/examples/with-markdown-plugins/astro.config.mjs b/examples/with-markdown-plugins/astro.config.mjs index 26d986ce1..0e112712a 100644 --- a/examples/with-markdown-plugins/astro.config.mjs +++ b/examples/with-markdown-plugins/astro.config.mjs @@ -5,7 +5,6 @@ import addClasses from './add-classes.mjs'; // https://astro.build/config export default defineConfig({ // Enable Custom Markdown options, plugins, etc. - renderers: [], markdownOptions: { render: [ astroRemark, diff --git a/examples/with-markdown-shiki/astro.config.mjs b/examples/with-markdown-shiki/astro.config.mjs index 3e9c52479..7a0b4f0f2 100644 --- a/examples/with-markdown-shiki/astro.config.mjs +++ b/examples/with-markdown-shiki/astro.config.mjs @@ -4,7 +4,6 @@ import astroRemark from '@astrojs/markdown-remark'; // https://astro.build/config export default defineConfig({ // Enable Custom Markdown options, plugins, etc. - renderers: [], markdownOptions: { render: [ astroRemark, diff --git a/examples/with-markdown/astro.config.mjs b/examples/with-markdown/astro.config.mjs index f5069ec18..c5dcad073 100644 --- a/examples/with-markdown/astro.config.mjs +++ b/examples/with-markdown/astro.config.mjs @@ -1,6 +1,11 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; +import react from '@astrojs/react'; +import svelte from '@astrojs/svelte'; +import vue from '@astrojs/vue'; // https://astro.build/config export default defineConfig({ - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'], + // Enable many frameworks to support all different kinds of components. + integrations: [preact(), react(), svelte(), vue()], }); diff --git a/examples/with-markdown/package.json b/examples/with-markdown/package.json index 4979a80fa..739fa896b 100644 --- a/examples/with-markdown/package.json +++ b/examples/with-markdown/package.json @@ -10,10 +10,10 @@ }, "devDependencies": { "@astrojs/markdown-remark": "^0.6.4", - "@astrojs/renderer-preact": "^0.5.0", - "@astrojs/renderer-react": "^0.5.0", - "@astrojs/renderer-svelte": "^0.5.2", - "@astrojs/renderer-vue": "^0.4.0", + "@astrojs/preact": "^0.0.1", + "@astrojs/react": "^0.0.1", + "@astrojs/svelte": "^0.0.1", + "@astrojs/vue": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/with-nanostores/astro.config.mjs b/examples/with-nanostores/astro.config.mjs index 90f8b2ca4..4b50887cd 100644 --- a/examples/with-nanostores/astro.config.mjs +++ b/examples/with-nanostores/astro.config.mjs @@ -1,7 +1,12 @@ import { defineConfig } from 'astro/config'; +import preact from '@astrojs/preact'; +import react from '@astrojs/react'; +import svelte from '@astrojs/svelte'; +import vue from '@astrojs/vue'; +import solid from '@astrojs/solid-js'; // https://astro.build/config export default defineConfig({ - // Enable many renderers to support all different kinds of components. - renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue', '@astrojs/renderer-solid'], + // Enable many frameworks to support all different kinds of components. + integrations: [preact(), react(), svelte(), vue(), solid()], }); diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index 85b7a4d2a..c41c8b315 100644 --- a/examples/with-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -20,11 +20,11 @@ "vue": "^3.2.31" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", - "@astrojs/renderer-react": "^0.5.0", - "@astrojs/renderer-solid": "^0.4.0", - "@astrojs/renderer-svelte": "^0.5.2", - "@astrojs/renderer-vue": "^0.4.0", + "@astrojs/preact": "^0.0.1", + "@astrojs/react": "^0.0.1", + "@astrojs/solid-js": "^0.0.1", + "@astrojs/svelte": "^0.0.1", + "@astrojs/vue": "^0.0.1", "astro": "^0.24.3" } } diff --git a/examples/with-tailwindcss/astro.config.mjs b/examples/with-tailwindcss/astro.config.mjs index a024b64b4..4ad396807 100644 --- a/examples/with-tailwindcss/astro.config.mjs +++ b/examples/with-tailwindcss/astro.config.mjs @@ -1,7 +1,7 @@ import { defineConfig } from 'astro/config'; +import tailwind from '@astrojs/tailwind'; // https://astro.build/config export default defineConfig({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + integrations: [tailwind()], }); diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index b1060f02e..8e4009f18 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -9,9 +9,10 @@ "preview": "astro preview" }, "devDependencies": { - "@astrojs/renderer-preact": "^0.5.0", + "@astrojs/tailwind": "^0.0.1", "astro": "^0.24.3", "autoprefixer": "^10.4.4", + "canvas-confetti": "^1.5.1", "postcss": "^8.4.12", "tailwindcss": "^3.0.23" } diff --git a/examples/with-tailwindcss/postcss.config.js b/examples/with-tailwindcss/postcss.config.js deleted file mode 100644 index c3a002bfe..000000000 --- a/examples/with-tailwindcss/postcss.config.js +++ /dev/null @@ -1,10 +0,0 @@ -const path = require('path'); - -module.exports = { - plugins: { - tailwindcss: { - config: path.join(__dirname, 'tailwind.config.js'), // update this if your path differs! - }, - autoprefixer: {}, - }, -}; diff --git a/examples/with-tailwindcss/src/components/Button.astro b/examples/with-tailwindcss/src/components/Button.astro index 5e241c44f..11c605a2f 100644 --- a/examples/with-tailwindcss/src/components/Button.astro +++ b/examples/with-tailwindcss/src/components/Button.astro @@ -1,10 +1,11 @@ --- -let { type = 'button' } = Astro.props; +// Click button, get confetti! +// Styled by Tailwind :) --- - -<button - class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" - {type} -> +<button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75"> <slot /> </button> +<script hoist> + import confetti from 'canvas-confetti'; + document.body.querySelector('button').addEventListener("click", () => confetti()); +</script>
\ No newline at end of file diff --git a/examples/with-tailwindcss/src/pages/index.astro b/examples/with-tailwindcss/src/pages/index.astro index ba346e6c2..743653a95 100644 --- a/examples/with-tailwindcss/src/pages/index.astro +++ b/examples/with-tailwindcss/src/pages/index.astro @@ -1,7 +1,6 @@ --- // Component Imports import Button from '../components/Button.astro'; -import '../styles/global.css'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ @@ -15,6 +14,8 @@ import '../styles/global.css'; </head> <body> - <Button>I’m a Tailwind Button!</Button> + <div class="grid place-items-center h-screen"> + <Button>Click Me!</Button> + </div> </body> </html> diff --git a/examples/with-tailwindcss/src/styles/global.css b/examples/with-tailwindcss/src/styles/global.css deleted file mode 100644 index b5c61c956..000000000 --- a/examples/with-tailwindcss/src/styles/global.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/examples/with-tailwindcss/tailwind.config.js b/examples/with-tailwindcss/tailwind.config.js deleted file mode 100644 index 30b9aff01..000000000 --- a/examples/with-tailwindcss/tailwind.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], -}; diff --git a/examples/with-vite-plugin-pwa/astro.config.mjs b/examples/with-vite-plugin-pwa/astro.config.mjs index 7f5cebf51..6f95a5633 100644 --- a/examples/with-vite-plugin-pwa/astro.config.mjs +++ b/examples/with-vite-plugin-pwa/astro.config.mjs @@ -3,7 +3,6 @@ import { VitePWA } from 'vite-plugin-pwa'; // https://astro.build/config export default defineConfig({ - renderers: [], vite: { plugins: [VitePWA()], }, |
