Astro Integration System (#2820)

* update examples

* add initial integrations

* update tests

* update astro

* update ci

* get final tests working

* update injectelement todo

* update ben code review

* respond to final code review feedback

.github/workflows/ci.yml

@@ -99,7 +99,8 @@ jobs:
  with:
  name: artifacts
  path: |
- packages/**/dist/**
+ packages/*/dist/**
+ packages/*/*/dist/**
  packages/webapi/mod.js
  packages/webapi/mod.js.map
  if-no-files-found: error

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()],
 });

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"
  }

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/',
  },

examples/blog/package.json

@@ -10,6 +10,6 @@
  },
  "devDependencies": {
  "astro": "^0.24.3",
- "@astrojs/renderer-preact": "^0.5.0"
+ "@astrojs/preact": "^0.0.1"
  }
 }

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({});

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(),
  ],
 });

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"
  }
 }

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({});

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: [],
 });

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()],
 });

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"
  }
 }

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()],
 });

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"
  }
 }

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()],
 });

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"
  }
 }

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()],
 });

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"
  }
 }

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()],
 });

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"
  }
 }

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()],
 });

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"
  }
 }

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()],
 });

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"
  }
 }

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

examples/integrations-playground/.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

examples/integrations-playground/.stackblitzrc

@@ -0,0 +1,6 @@
+{
+ "startCommand": "npm start",
+ "env": {
+ "ENABLE_CJS_IMPORTS": true
+ }
+}

examples/integrations-playground/README.md

@@ -0,0 +1,7 @@
+# Integration Playground
+
+```
+npm init astro -- --template integration-playground
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/integration-playground)

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()],
+});

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"
+ }
+}

examples/integrations-playground/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

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"
+ }
+}

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);

examples/integrations-playground/src/components/Link.jsx

@@ -0,0 +1,3 @@
+export default function Link({ to, text }) {
+ return <a href={to}>{text}</a>;
+}