diff options
Diffstat (limited to 'examples/integrations-playground')
17 files changed, 284 insertions, 0 deletions
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" + } +} |
