mirror of
https://github.com/withastro/astro.git
synced 2025-03-10 23:01:26 -05:00
wip: remove component question, replace with astro add
This commit is contained in:
bholmesdev
parent
9c0fc6877a
commit
caab6fc6ea
3 changed files with 27 additions and 247 deletions
|
|
@ -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,14 +1,12 @@
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
|
import { exec } from 'child_process';
|
||||||
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';
|
||||||
|
|
||||||
// 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
|
||||||
|
|
@ -119,21 +117,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
|
||||||
|
|
@ -190,83 +173,39 @@ export async function main() {
|
||||||
}
|
}
|
||||||
break;
|
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();
|
||||||
console.log(bold(green('✔') + ' Done!'));
|
console.log(bold(green('✔') + ' Done!'));
|
||||||
|
|
||||||
|
const selectedTemplate = TEMPLATES.find((template) => template.value === options.template);
|
||||||
|
|
||||||
|
if (selectedTemplate?.value === 'starter') {
|
||||||
|
const { integrations } = await prompts({
|
||||||
|
type: 'confirm',
|
||||||
|
name: 'integrations',
|
||||||
|
message: 'Do you need extra integrations (TailwindCSS, component frameworks, etc)?',
|
||||||
|
initial: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (integrations === true) {
|
||||||
|
// TODO: finish once we can programmatically npm install
|
||||||
|
// astro add fails to parse config when dependencies aren't installed!
|
||||||
|
await new Promise<void>((resolve, reject) => {
|
||||||
|
const astroAdd = exec(`cd ${cwd} && npx astro@latest add`);
|
||||||
|
astroAdd.on('close', () => resolve());
|
||||||
|
astroAdd.on('error', (error) => reject(error));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
ora({
|
||||||
|
color: 'gray',
|
||||||
|
text: `You can always run "${bold('npx astro add')}" to add integrations later!`,
|
||||||
|
}).info();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
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);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue