diff --git a/.changeset/khaki-turkeys-sparkle.md b/.changeset/khaki-turkeys-sparkle.md
new file mode 100644
index 000000000000..30263b6d53b8
--- /dev/null
+++ b/.changeset/khaki-turkeys-sparkle.md
@@ -0,0 +1,5 @@
+---
+'create-astro': minor
+---
+
+Replace the component framework selector with a new "run astro add" option. This unlocks integrations beyond components during your create-astro setup, including TailwindCSS and Partytown. This also replaces our previous "starter" template with a simplified "Just the basics" option.
diff --git a/packages/create-astro/package.json b/packages/create-astro/package.json
index da44d162dacc..0c4dc260d8b4 100644
--- a/packages/create-astro/package.json
+++ b/packages/create-astro/package.json
@@ -33,7 +33,6 @@
"degit": "^2.8.4",
"execa": "^6.1.0",
"kleur": "^4.1.4",
- "node-fetch": "^3.2.3",
"ora": "^6.1.0",
"prompts": "^2.4.2",
"yargs-parser": "^21.0.1"
diff --git a/packages/create-astro/src/config.ts b/packages/create-astro/src/config.ts
deleted file mode 100644
index 4060d368c5e8..000000000000
--- a/packages/create-astro/src/config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Integration } from './frameworks';
-
-export const createConfig = ({ integrations }: { integrations: Integration[] }) => {
- if (integrations.length === 0) {
- return `import { defineConfig } from 'astro/config';
-// https://astro.build/config
-export default defineConfig({});
-`;
- }
-
- const rendererImports = integrations.map((r) => ` import ${r.id} from '${r.packageName}';`);
- const rendererIntegrations = integrations.map((r) => ` ${r.id}(),`);
- return [
- `import { defineConfig } from 'astro/config';`,
- ...rendererImports,
- `// https://astro.build/config`,
- `export default defineConfig({`,
- ` integrations: [`,
- ...rendererIntegrations,
- ` ]`,
- `});`,
- ].join('\n');
-};
diff --git a/packages/create-astro/src/frameworks.ts b/packages/create-astro/src/frameworks.ts
deleted file mode 100644
index 0483b7474e41..000000000000
--- a/packages/create-astro/src/frameworks.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-export const COUNTER_COMPONENTS = {
- preact: {
- filename: `src/components/PreactCounter.jsx`,
- content: `import { useState } from 'preact/hooks';
-
-export default function PreactCounter() {
- const [count, setCount] = useState(0);
- const add = () => setCount((i) => i + 1);
- const subtract = () => setCount((i) => i - 1);
-
- return (
-
- );
-}
-`,
- },
- react: {
- filename: `src/components/ReactCounter.jsx`,
- content: `import { useState } from 'react';
-
-export default function ReactCounter() {
- const [count, setCount] = useState(0);
- const add = () => setCount((i) => i + 1);
- const subtract = () => setCount((i) => i - 1);
-
- return (
-
- );
-}
-`,
- },
- solid: {
- filename: `src/components/SolidCounter.jsx`,
- content: `import { createSignal } from "solid-js";
-
-export default function SolidCounter() {
- const [count, setCount] = createSignal(0);
- const add = () => setCount(count() + 1);
- const subtract = () => setCount(count() - 1);
-
- return (
-
- );
-}
-`,
- },
- svelte: {
- filename: `src/components/SvelteCounter.svelte`,
- content: `
-
-
-`,
- },
- vue: {
- filename: `src/components/VueCounter.vue`,
- content: `
-
-
-
-
-`,
- },
-};
-
-export interface Integration {
- id: string;
- packageName: string;
-}
-
-export const FRAMEWORKS: { title: string; value: Integration }[] = [
- {
- title: 'Preact',
- value: { id: 'preact', packageName: '@astrojs/preact' },
- },
- {
- title: 'React',
- value: { id: 'react', packageName: '@astrojs/react' },
- },
- {
- title: 'Solid.js',
- value: { id: 'solid', packageName: '@astrojs/solid-js' },
- },
- {
- title: 'Svelte',
- value: { id: 'svelte', packageName: '@astrojs/svelte' },
- },
- {
- title: 'Vue',
- value: { id: 'vue', packageName: '@astrojs/vue' },
- },
-];
diff --git a/packages/create-astro/src/index.ts b/packages/create-astro/src/index.ts
index a6cedeb8659e..3c4e3e1a02b6 100644
--- a/packages/create-astro/src/index.ts
+++ b/packages/create-astro/src/index.ts
@@ -1,16 +1,13 @@
import fs from 'fs';
import path from 'path';
import { bold, cyan, gray, green, red, yellow } from 'kleur/colors';
-import fetch from 'node-fetch';
import prompts from 'prompts';
import degit from 'degit';
import yargs from 'yargs-parser';
import ora from 'ora';
-import { FRAMEWORKS, COUNTER_COMPONENTS, Integration } from './frameworks.js';
import { TEMPLATES } from './templates.js';
-import { createConfig } from './config.js';
import { logger, defaultLogLevel } from './logger.js';
-import { execa } from 'execa';
+import { execa, execaCommand } from 'execa';
// NOTE: In the v7.x version of npm, the default behavior of `npm init` was changed
// to no longer require `--` to pass args and instead pass `--` directly to us. This
@@ -37,8 +34,7 @@ const { version } = JSON.parse(
fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8')
);
-const FILES_TO_REMOVE = ['.stackblitzrc', 'sandbox.config.json']; // some files are only needed for online editors when using astro.new. Remove for create-astro installs.
-const POSTPROCESS_FILES = ['package.json', 'astro.config.mjs', 'CHANGELOG.md']; // some files need processing after copying.
+const FILES_TO_REMOVE = ['.stackblitzrc', 'sandbox.config.json', 'CHANGELOG.md']; // some files are only needed for online editors when using astro.new. Remove for create-astro installs.
export async function main() {
const pkgManager = pkgManagerFromUserAgent(process.env.npm_config_user_agent);
@@ -101,9 +97,7 @@ export async function main() {
const hash = args.commit ? `#${args.commit}` : '';
- const templateTarget = options.template.includes('/')
- ? options.template
- : `withastro/astro/examples/${options.template}#latest`;
+ const templateTarget = `withastro/astro/examples/${options.template}#latest`;
const emitter = degit(`${templateTarget}${hash}`, {
cache: false,
@@ -117,21 +111,6 @@ export async function main() {
verbose: defaultLogLevel === 'debug' ? true : false,
});
- const selectedTemplate = TEMPLATES.find((template) => template.value === options.template);
- let integrations: Integration[] = [];
-
- if (selectedTemplate?.integrations === true) {
- const result = await prompts([
- {
- type: 'multiselect',
- name: 'integrations',
- message: 'Which frameworks would you like to use?',
- choices: FRAMEWORKS,
- },
- ]);
- integrations = result.integrations;
- }
-
spinner = ora({ color: 'green', text: 'Copying project files...' }).start();
// Copy
@@ -178,94 +157,14 @@ export async function main() {
}
// Post-process in parallel
- await Promise.all([
- ...FILES_TO_REMOVE.map(async (file) => {
- const fileLoc = path.resolve(path.join(cwd, file));
- return fs.promises.rm(fileLoc);
- }),
- ...POSTPROCESS_FILES.map(async (file) => {
+ await Promise.all(
+ FILES_TO_REMOVE.map(async (file) => {
const fileLoc = path.resolve(path.join(cwd, file));
-
- switch (file) {
- case 'CHANGELOG.md': {
- if (fs.existsSync(fileLoc)) {
- await fs.promises.unlink(fileLoc);
- }
- break;
- }
- case 'astro.config.mjs': {
- if (selectedTemplate?.integrations !== true) {
- break;
- }
- await fs.promises.writeFile(fileLoc, createConfig({ integrations }));
- break;
- }
- case 'package.json': {
- const packageJSON = JSON.parse(await fs.promises.readFile(fileLoc, 'utf8'));
- delete packageJSON.snowpack; // delete snowpack config only needed in monorepo (can mess up projects)
- // Fetch latest versions of selected integrations
- const integrationEntries = (
- await Promise.all(
- integrations.map((integration) =>
- fetch(`https://registry.npmjs.org/${integration.packageName}/latest`)
- .then((res) => res.json())
- .then((res: any) => {
- let dependencies: [string, string][] = [[res['name'], `^${res['version']}`]];
-
- if (res['peerDependencies']) {
- for (const peer in res['peerDependencies']) {
- dependencies.push([peer, res['peerDependencies'][peer]]);
- }
- }
-
- return dependencies;
- })
- )
- )
- ).flat(1);
- // merge and sort dependencies
- packageJSON.devDependencies = {
- ...(packageJSON.devDependencies ?? {}),
- ...Object.fromEntries(integrationEntries),
- };
- packageJSON.devDependencies = Object.fromEntries(
- Object.entries(packageJSON.devDependencies).sort((a, b) => a[0].localeCompare(b[0]))
- );
- await fs.promises.writeFile(fileLoc, JSON.stringify(packageJSON, undefined, 2));
- break;
- }
+ if (fs.existsSync(fileLoc)) {
+ return fs.promises.rm(fileLoc, {});
}
- }),
- ]);
-
- // Inject framework components into starter template
- if (selectedTemplate?.value === 'starter') {
- let importStatements: string[] = [];
- let components: string[] = [];
- await Promise.all(
- integrations.map(async (integration) => {
- const component = COUNTER_COMPONENTS[integration.id as keyof typeof COUNTER_COMPONENTS];
- const componentName = path.basename(component.filename, path.extname(component.filename));
- const absFileLoc = path.resolve(cwd, component.filename);
- importStatements.push(
- `import ${componentName} from '${component.filename.replace(/^src/, '..')}';`
- );
- components.push(`<${componentName} client:visible />`);
- await fs.promises.writeFile(absFileLoc, component.content);
- })
- );
-
- const pageFileLoc = path.resolve(path.join(cwd, 'src', 'pages', 'index.astro'));
- const content = (await fs.promises.readFile(pageFileLoc)).toString();
- const newContent = content
- .replace(/^(\s*)\/\* ASTRO\:COMPONENT_IMPORTS \*\//gm, (_, indent) => {
- return indent + importStatements.join('\n');
- })
- .replace(/^(\s*)/gm, (_, indent) => {
- return components.map((ln) => indent + ln).join('\n');
- });
- await fs.promises.writeFile(pageFileLoc, newContent);
- }
+ })
+ );
}
spinner.succeed();
@@ -298,6 +197,36 @@ export async function main() {
spinner.succeed();
}
+ const astroAddCommand = installResponse.install
+ ? 'astro add --yes'
+ : `${pkgManagerExecCommand(pkgManager)} astro@latest add --yes`;
+
+ const astroAddResponse = await prompts({
+ type: 'confirm',
+ name: 'astroAdd',
+ message: `Run "${astroAddCommand}?" This lets you optionally add component frameworks (ex. React), CSS frameworks (ex. Tailwind), and more.`,
+ initial: true,
+ });
+
+ if (!astroAddResponse) {
+ process.exit(0);
+ }
+
+ if (!astroAddResponse.astroAdd) {
+ ora().info(
+ `No problem. You can always run "${pkgManagerExecCommand(pkgManager)} astro add" later!`
+ );
+ }
+
+ if (astroAddResponse.astroAdd && !args.dryrun) {
+ await execaCommand(
+ astroAddCommand,
+ astroAddCommand === 'astro add --yes'
+ ? { cwd, stdio: 'inherit', localDir: cwd, preferLocal: true }
+ : { cwd, stdio: 'inherit' }
+ );
+ }
+
console.log('\nNext steps:');
let i = 1;
const relative = path.relative(process.cwd(), cwd);
@@ -330,3 +259,12 @@ function pkgManagerFromUserAgent(userAgent?: string) {
const pkgSpecArr = pkgSpec.split('/');
return pkgSpecArr[0];
}
+
+function pkgManagerExecCommand(pkgManager: string) {
+ if (pkgManager === 'pnpm') {
+ return 'pnpx';
+ } else {
+ // note: yarn does not have an "npx" equivalent
+ return 'npx';
+ }
+}
diff --git a/packages/create-astro/src/templates.ts b/packages/create-astro/src/templates.ts
index d3982f6c6ec0..2e35d4496361 100644
--- a/packages/create-astro/src/templates.ts
+++ b/packages/create-astro/src/templates.ts
@@ -1,8 +1,7 @@
export const TEMPLATES = [
{
- title: 'Starter Kit (Generic)',
- value: 'starter',
- integrations: true,
+ title: 'Just the basics',
+ value: 'basics',
},
{
title: 'Blog',
@@ -17,7 +16,7 @@ export const TEMPLATES = [
value: 'portfolio',
},
{
- title: 'Minimal',
+ title: 'Completely empty',
value: 'minimal',
},
];
diff --git a/packages/create-astro/test/astro-add-step.test.js b/packages/create-astro/test/astro-add-step.test.js
new file mode 100644
index 000000000000..b46d836cc41e
--- /dev/null
+++ b/packages/create-astro/test/astro-add-step.test.js
@@ -0,0 +1,66 @@
+import { setup, promiseWithTimeout, timeout, PROMPT_MESSAGES } from './utils.js';
+import { sep } from 'path';
+import fs from 'fs';
+import os from 'os';
+
+// reset package manager in process.env
+// prevents test issues when running with pnpm
+const FAKE_PACKAGE_MANAGER = 'npm';
+let initialEnvValue = null;
+
+describe('[create-astro] astro add', function () {
+ this.timeout(timeout);
+ let tempDir = '';
+ beforeEach(async () => {
+ tempDir = await fs.promises.mkdtemp(`${os.tmpdir()}${sep}`);
+ });
+ this.beforeAll(() => {
+ initialEnvValue = process.env.npm_config_user_agent;
+ process.env.npm_config_user_agent = FAKE_PACKAGE_MANAGER;
+ });
+ this.afterAll(() => {
+ process.env.npm_config_user_agent = initialEnvValue;
+ });
+
+ it('should use "astro add" when user has installed dependencies', function () {
+ const { stdout, stdin } = setup([tempDir, '--dryrun']);
+ return promiseWithTimeout((resolve) => {
+ const seen = new Set();
+ const installPrompt = PROMPT_MESSAGES.install('npm');
+ stdout.on('data', (chunk) => {
+ if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
+ seen.add(PROMPT_MESSAGES.template);
+ stdin.write('\x0D');
+ }
+ if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
+ seen.add(installPrompt);
+ stdin.write('\x0D');
+ }
+ if (chunk.includes(PROMPT_MESSAGES.astroAdd('astro add --yes'))) {
+ resolve();
+ }
+ });
+ });
+ });
+
+ it('should use "npx astro@latest add" when use has NOT installed dependencies', function () {
+ const { stdout, stdin } = setup([tempDir, '--dryrun']);
+ return promiseWithTimeout((resolve) => {
+ const seen = new Set();
+ const installPrompt = PROMPT_MESSAGES.install('npm');
+ stdout.on('data', (chunk) => {
+ if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
+ seen.add(PROMPT_MESSAGES.template);
+ stdin.write('\x0D');
+ }
+ if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
+ seen.add(installPrompt);
+ stdin.write('n\x0D');
+ }
+ if (chunk.includes(PROMPT_MESSAGES.astroAdd('npx astro@latest add --yes'))) {
+ resolve();
+ }
+ });
+ });
+ });
+});
diff --git a/packages/create-astro/test/install-step.test.js b/packages/create-astro/test/install-step.test.js
index 10f27a1a88b5..fbd7f2249dae 100644
--- a/packages/create-astro/test/install-step.test.js
+++ b/packages/create-astro/test/install-step.test.js
@@ -30,11 +30,6 @@ describe('[create-astro] install', function () {
seen.add(PROMPT_MESSAGES.template);
stdin.write('\x0D');
}
- if (!seen.has(PROMPT_MESSAGES.frameworks) && chunk.includes(PROMPT_MESSAGES.frameworks)) {
- seen.add(PROMPT_MESSAGES.frameworks);
- stdin.write('\x0D');
- }
-
if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
seen.add(installPrompt);
resolve();
@@ -48,20 +43,20 @@ describe('[create-astro] install', function () {
return promiseWithTimeout((resolve) => {
const seen = new Set();
const installPrompt = PROMPT_MESSAGES.install(FAKE_PACKAGE_MANAGER);
+ const astroAddPrompt = PROMPT_MESSAGES.astroAdd();
stdout.on('data', (chunk) => {
if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
seen.add(PROMPT_MESSAGES.template);
stdin.write('\x0D');
}
- if (!seen.has(PROMPT_MESSAGES.frameworks) && chunk.includes(PROMPT_MESSAGES.frameworks)) {
- seen.add(PROMPT_MESSAGES.frameworks);
- stdin.write('\x0D');
- }
-
if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
seen.add(installPrompt);
stdin.write('n\x0D');
}
+ if (!seen.has(astroAddPrompt) && chunk.includes(astroAddPrompt)) {
+ seen.add(astroAddPrompt);
+ stdin.write('\x0D');
+ }
if (chunk.includes('banana dev')) {
resolve();
}
diff --git a/packages/create-astro/test/utils.js b/packages/create-astro/test/utils.js
index 4e0e2d5fcb59..8d7cf67c17dd 100644
--- a/packages/create-astro/test/utils.js
+++ b/packages/create-astro/test/utils.js
@@ -26,9 +26,8 @@ export function promiseWithTimeout(testFn) {
export const PROMPT_MESSAGES = {
directory: 'Where would you like to create your app?',
template: 'Which app template would you like to use?',
- // TODO: remove when framework selector is removed
- frameworks: 'Which frameworks would you like to use?',
install: (pkgManager) => `Would you like us to run "${pkgManager} install?"`,
+ astroAdd: (astroAddCommand = 'npx astro@latest add --yes') => `Run "${astroAddCommand}?" This lets you optionally add component frameworks (ex. React), CSS frameworks (ex. Tailwind), and more.`,
};
export function setup(args = []) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 40b9fd2dd32e..345b340ac7de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1225,7 +1225,6 @@ importers:
execa: ^6.1.0
kleur: ^4.1.4
mocha: ^9.2.2
- node-fetch: ^3.2.3
ora: ^6.1.0
prompts: ^2.4.2
uvu: ^0.5.3
@@ -1236,7 +1235,6 @@ importers:
degit: 2.8.4
execa: 6.1.0
kleur: 4.1.4
- node-fetch: 3.2.3
ora: 6.1.0
prompts: 2.4.2
yargs-parser: 21.0.1
@@ -5287,6 +5285,7 @@ packages:
/data-uri-to-buffer/4.0.0:
resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
engines: {node: '>= 12'}
+ dev: true
/dataloader/1.4.0:
resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
@@ -6130,6 +6129,7 @@ packages:
dependencies:
node-domexception: 1.0.0
web-streams-polyfill: 3.2.1
+ dev: true
/file-entry-cache/6.0.1:
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -6207,6 +6207,7 @@ packages:
engines: {node: '>=12.20.0'}
dependencies:
fetch-blob: 3.1.5
+ dev: true
/fraction.js/4.2.0:
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
@@ -8048,6 +8049,7 @@ packages:
/node-domexception/1.0.0:
resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
engines: {node: '>=10.5.0'}
+ dev: true
/node-fetch/2.6.7:
resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
@@ -8067,6 +8069,7 @@ packages:
data-uri-to-buffer: 4.0.0
fetch-blob: 3.1.5
formdata-polyfill: 4.0.10
+ dev: true
/node-releases/2.0.3:
resolution: {integrity: sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==}
@@ -10502,6 +10505,7 @@ packages:
/web-streams-polyfill/3.2.1:
resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
engines: {node: '>= 8'}
+ dev: true
/webidl-conversions/3.0.1:
resolution: {integrity: sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=}