Feat: [create astro] replace component selector with "astro add" (#3223)
* feat: remove component framework selector * feat: update templates to use "basics" * feat: add "astro add" cli step * tests: astro add step * fix: reset env for pnpm tests * fix: update install step test * chore: remove "frameworks" step from tests * deps: remove node-fetch from create-astro * chore: changeset * fix: use "preferLocal" for astro add command * refactor: remove POSTPROCESS_FILES * feat: add --yes flag to simplify astro add * feat: bring back minimal option as "completely empty"
This commit is contained in:
parent
7937852395
commit
b7cd695884
10 changed files with 134 additions and 288 deletions
5
.changeset/khaki-turkeys-sparkle.md
Normal file
5
.changeset/khaki-turkeys-sparkle.md
Normal file
|
@ -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.
|
|
@ -33,7 +33,6 @@
|
||||||
"degit": "^2.8.4",
|
"degit": "^2.8.4",
|
||||||
"execa": "^6.1.0",
|
"execa": "^6.1.0",
|
||||||
"kleur": "^4.1.4",
|
"kleur": "^4.1.4",
|
||||||
"node-fetch": "^3.2.3",
|
|
||||||
"ora": "^6.1.0",
|
"ora": "^6.1.0",
|
||||||
"prompts": "^2.4.2",
|
"prompts": "^2.4.2",
|
||||||
"yargs-parser": "^21.0.1"
|
"yargs-parser": "^21.0.1"
|
||||||
|
|
|
@ -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');
|
|
||||||
};
|
|
|
@ -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 (
|
|
||||||
<div id="preact" class="counter">
|
|
||||||
<button onClick={subtract}>-</button>
|
|
||||||
<pre>{count}</pre>
|
|
||||||
<button onClick={add}>+</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
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 (
|
|
||||||
<div id="react" className="counter">
|
|
||||||
<button onClick={subtract}>-</button>
|
|
||||||
<pre>{count}</pre>
|
|
||||||
<button onClick={add}>+</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
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 (
|
|
||||||
<div id="solid" class="counter">
|
|
||||||
<button onClick={subtract}>-</button>
|
|
||||||
<pre>{count()}</pre>
|
|
||||||
<button onClick={add}>+</button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
svelte: {
|
|
||||||
filename: `src/components/SvelteCounter.svelte`,
|
|
||||||
content: `<script>
|
|
||||||
let count = 0;
|
|
||||||
|
|
||||||
function add() {
|
|
||||||
count += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function subtract() {
|
|
||||||
count -= 1;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="svelte" class="counter">
|
|
||||||
<button on:click={subtract}>-</button>
|
|
||||||
<pre>{ count }</pre>
|
|
||||||
<button on:click={add}>+</button>
|
|
||||||
</div>
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
vue: {
|
|
||||||
filename: `src/components/VueCounter.vue`,
|
|
||||||
content: `<template>
|
|
||||||
<div id="vue" class="counter">
|
|
||||||
<button @click="subtract()">-</button>
|
|
||||||
<pre>{{ count }}</pre>
|
|
||||||
<button @click="add()">+</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
export default {
|
|
||||||
setup() {
|
|
||||||
const count = ref(0)
|
|
||||||
const add = () => count.value = count.value + 1;
|
|
||||||
const subtract = () => count.value = count.value - 1;
|
|
||||||
|
|
||||||
return {
|
|
||||||
count,
|
|
||||||
add,
|
|
||||||
subtract
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
`,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
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' },
|
|
||||||
},
|
|
||||||
];
|
|
|
@ -1,16 +1,13 @@
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
import { bold, cyan, gray, green, red, yellow } from 'kleur/colors';
|
import { bold, cyan, gray, green, red, yellow } from 'kleur/colors';
|
||||||
import fetch from 'node-fetch';
|
|
||||||
import prompts from 'prompts';
|
import prompts from 'prompts';
|
||||||
import degit from 'degit';
|
import degit from 'degit';
|
||||||
import yargs from 'yargs-parser';
|
import yargs from 'yargs-parser';
|
||||||
import ora from 'ora';
|
import ora from 'ora';
|
||||||
import { FRAMEWORKS, COUNTER_COMPONENTS, Integration } from './frameworks.js';
|
|
||||||
import { TEMPLATES } from './templates.js';
|
import { TEMPLATES } from './templates.js';
|
||||||
import { createConfig } from './config.js';
|
|
||||||
import { logger, defaultLogLevel } from './logger.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
|
// 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
|
// 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')
|
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 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.
|
||||||
const POSTPROCESS_FILES = ['package.json', 'astro.config.mjs', 'CHANGELOG.md']; // some files need processing after copying.
|
|
||||||
|
|
||||||
export async function main() {
|
export async function main() {
|
||||||
const pkgManager = pkgManagerFromUserAgent(process.env.npm_config_user_agent);
|
const pkgManager = pkgManagerFromUserAgent(process.env.npm_config_user_agent);
|
||||||
|
@ -101,9 +97,7 @@ export async function main() {
|
||||||
|
|
||||||
const hash = args.commit ? `#${args.commit}` : '';
|
const hash = args.commit ? `#${args.commit}` : '';
|
||||||
|
|
||||||
const templateTarget = options.template.includes('/')
|
const templateTarget = `withastro/astro/examples/${options.template}#latest`;
|
||||||
? options.template
|
|
||||||
: `withastro/astro/examples/${options.template}#latest`;
|
|
||||||
|
|
||||||
const emitter = degit(`${templateTarget}${hash}`, {
|
const emitter = degit(`${templateTarget}${hash}`, {
|
||||||
cache: false,
|
cache: false,
|
||||||
|
@ -117,21 +111,6 @@ export async function main() {
|
||||||
verbose: defaultLogLevel === 'debug' ? true : false,
|
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();
|
spinner = ora({ color: 'green', text: 'Copying project files...' }).start();
|
||||||
|
|
||||||
// Copy
|
// Copy
|
||||||
|
@ -178,94 +157,14 @@ export async function main() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Post-process in parallel
|
// Post-process in parallel
|
||||||
await Promise.all([
|
await Promise.all(
|
||||||
...FILES_TO_REMOVE.map(async (file) => {
|
FILES_TO_REMOVE.map(async (file) => {
|
||||||
const fileLoc = path.resolve(path.join(cwd, file));
|
const fileLoc = path.resolve(path.join(cwd, file));
|
||||||
return fs.promises.rm(fileLoc);
|
if (fs.existsSync(fileLoc)) {
|
||||||
}),
|
return fs.promises.rm(fileLoc, {});
|
||||||
...POSTPROCESS_FILES.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}),
|
})
|
||||||
]);
|
);
|
||||||
|
|
||||||
// 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*)<!-- ASTRO:COMPONENT_MARKUP -->/gm, (_, indent) => {
|
|
||||||
return components.map((ln) => indent + ln).join('\n');
|
|
||||||
});
|
|
||||||
await fs.promises.writeFile(pageFileLoc, newContent);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
spinner.succeed();
|
spinner.succeed();
|
||||||
|
@ -298,6 +197,36 @@ export async function main() {
|
||||||
spinner.succeed();
|
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:');
|
console.log('\nNext steps:');
|
||||||
let i = 1;
|
let i = 1;
|
||||||
const relative = path.relative(process.cwd(), cwd);
|
const relative = path.relative(process.cwd(), cwd);
|
||||||
|
@ -330,3 +259,12 @@ function pkgManagerFromUserAgent(userAgent?: string) {
|
||||||
const pkgSpecArr = pkgSpec.split('/');
|
const pkgSpecArr = pkgSpec.split('/');
|
||||||
return pkgSpecArr[0];
|
return pkgSpecArr[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function pkgManagerExecCommand(pkgManager: string) {
|
||||||
|
if (pkgManager === 'pnpm') {
|
||||||
|
return 'pnpx';
|
||||||
|
} else {
|
||||||
|
// note: yarn does not have an "npx" equivalent
|
||||||
|
return 'npx';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -1,8 +1,7 @@
|
||||||
export const TEMPLATES = [
|
export const TEMPLATES = [
|
||||||
{
|
{
|
||||||
title: 'Starter Kit (Generic)',
|
title: 'Just the basics',
|
||||||
value: 'starter',
|
value: 'basics',
|
||||||
integrations: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Blog',
|
title: 'Blog',
|
||||||
|
@ -17,7 +16,7 @@ export const TEMPLATES = [
|
||||||
value: 'portfolio',
|
value: 'portfolio',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Minimal',
|
title: 'Completely empty',
|
||||||
value: 'minimal',
|
value: 'minimal',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
66
packages/create-astro/test/astro-add-step.test.js
Normal file
66
packages/create-astro/test/astro-add-step.test.js
Normal file
|
@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -30,11 +30,6 @@ describe('[create-astro] install', function () {
|
||||||
seen.add(PROMPT_MESSAGES.template);
|
seen.add(PROMPT_MESSAGES.template);
|
||||||
stdin.write('\x0D');
|
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)) {
|
if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
|
||||||
seen.add(installPrompt);
|
seen.add(installPrompt);
|
||||||
resolve();
|
resolve();
|
||||||
|
@ -48,20 +43,20 @@ describe('[create-astro] install', function () {
|
||||||
return promiseWithTimeout((resolve) => {
|
return promiseWithTimeout((resolve) => {
|
||||||
const seen = new Set();
|
const seen = new Set();
|
||||||
const installPrompt = PROMPT_MESSAGES.install(FAKE_PACKAGE_MANAGER);
|
const installPrompt = PROMPT_MESSAGES.install(FAKE_PACKAGE_MANAGER);
|
||||||
|
const astroAddPrompt = PROMPT_MESSAGES.astroAdd();
|
||||||
stdout.on('data', (chunk) => {
|
stdout.on('data', (chunk) => {
|
||||||
if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
|
if (!seen.has(PROMPT_MESSAGES.template) && chunk.includes(PROMPT_MESSAGES.template)) {
|
||||||
seen.add(PROMPT_MESSAGES.template);
|
seen.add(PROMPT_MESSAGES.template);
|
||||||
stdin.write('\x0D');
|
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)) {
|
if (!seen.has(installPrompt) && chunk.includes(installPrompt)) {
|
||||||
seen.add(installPrompt);
|
seen.add(installPrompt);
|
||||||
stdin.write('n\x0D');
|
stdin.write('n\x0D');
|
||||||
}
|
}
|
||||||
|
if (!seen.has(astroAddPrompt) && chunk.includes(astroAddPrompt)) {
|
||||||
|
seen.add(astroAddPrompt);
|
||||||
|
stdin.write('\x0D');
|
||||||
|
}
|
||||||
if (chunk.includes('banana dev')) {
|
if (chunk.includes('banana dev')) {
|
||||||
resolve();
|
resolve();
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,9 +26,8 @@ export function promiseWithTimeout(testFn) {
|
||||||
export const PROMPT_MESSAGES = {
|
export const PROMPT_MESSAGES = {
|
||||||
directory: 'Where would you like to create your app?',
|
directory: 'Where would you like to create your app?',
|
||||||
template: 'Which app template would you like to use?',
|
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?"`,
|
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 = []) {
|
export function setup(args = []) {
|
||||||
|
|
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
|
@ -1225,7 +1225,6 @@ importers:
|
||||||
execa: ^6.1.0
|
execa: ^6.1.0
|
||||||
kleur: ^4.1.4
|
kleur: ^4.1.4
|
||||||
mocha: ^9.2.2
|
mocha: ^9.2.2
|
||||||
node-fetch: ^3.2.3
|
|
||||||
ora: ^6.1.0
|
ora: ^6.1.0
|
||||||
prompts: ^2.4.2
|
prompts: ^2.4.2
|
||||||
uvu: ^0.5.3
|
uvu: ^0.5.3
|
||||||
|
@ -1236,7 +1235,6 @@ importers:
|
||||||
degit: 2.8.4
|
degit: 2.8.4
|
||||||
execa: 6.1.0
|
execa: 6.1.0
|
||||||
kleur: 4.1.4
|
kleur: 4.1.4
|
||||||
node-fetch: 3.2.3
|
|
||||||
ora: 6.1.0
|
ora: 6.1.0
|
||||||
prompts: 2.4.2
|
prompts: 2.4.2
|
||||||
yargs-parser: 21.0.1
|
yargs-parser: 21.0.1
|
||||||
|
@ -5279,6 +5277,7 @@ packages:
|
||||||
/data-uri-to-buffer/4.0.0:
|
/data-uri-to-buffer/4.0.0:
|
||||||
resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
|
resolution: {integrity: sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==}
|
||||||
engines: {node: '>= 12'}
|
engines: {node: '>= 12'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/dataloader/1.4.0:
|
/dataloader/1.4.0:
|
||||||
resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
|
resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
|
||||||
|
@ -6122,6 +6121,7 @@ packages:
|
||||||
dependencies:
|
dependencies:
|
||||||
node-domexception: 1.0.0
|
node-domexception: 1.0.0
|
||||||
web-streams-polyfill: 3.2.1
|
web-streams-polyfill: 3.2.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
/file-entry-cache/6.0.1:
|
/file-entry-cache/6.0.1:
|
||||||
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
|
resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
|
||||||
|
@ -6199,6 +6199,7 @@ packages:
|
||||||
engines: {node: '>=12.20.0'}
|
engines: {node: '>=12.20.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
fetch-blob: 3.1.5
|
fetch-blob: 3.1.5
|
||||||
|
dev: true
|
||||||
|
|
||||||
/fraction.js/4.2.0:
|
/fraction.js/4.2.0:
|
||||||
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
|
resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
|
||||||
|
@ -8040,6 +8041,7 @@ packages:
|
||||||
/node-domexception/1.0.0:
|
/node-domexception/1.0.0:
|
||||||
resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
|
resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
|
||||||
engines: {node: '>=10.5.0'}
|
engines: {node: '>=10.5.0'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/node-fetch/2.6.7:
|
/node-fetch/2.6.7:
|
||||||
resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
|
resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
|
||||||
|
@ -8059,6 +8061,7 @@ packages:
|
||||||
data-uri-to-buffer: 4.0.0
|
data-uri-to-buffer: 4.0.0
|
||||||
fetch-blob: 3.1.5
|
fetch-blob: 3.1.5
|
||||||
formdata-polyfill: 4.0.10
|
formdata-polyfill: 4.0.10
|
||||||
|
dev: true
|
||||||
|
|
||||||
/node-releases/2.0.3:
|
/node-releases/2.0.3:
|
||||||
resolution: {integrity: sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==}
|
resolution: {integrity: sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==}
|
||||||
|
@ -10488,6 +10491,7 @@ packages:
|
||||||
/web-streams-polyfill/3.2.1:
|
/web-streams-polyfill/3.2.1:
|
||||||
resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
|
resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==}
|
||||||
engines: {node: '>= 8'}
|
engines: {node: '>= 8'}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/webidl-conversions/3.0.1:
|
/webidl-conversions/3.0.1:
|
||||||
resolution: {integrity: sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=}
|
resolution: {integrity: sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=}
|
||||||
|
|
Loading…
Add table
Reference in a new issue