From caab6fc6ea3cdbf134e7f04d761377bc90fadcc4 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 21 Apr 2022 21:56:53 -0400 Subject: [PATCH] wip: remove component question, replace with astro add --- packages/create-astro/src/config.ts | 23 ---- packages/create-astro/src/frameworks.ts | 136 ------------------------ packages/create-astro/src/index.ts | 115 +++++--------------- 3 files changed, 27 insertions(+), 247 deletions(-) delete mode 100644 packages/create-astro/src/config.ts delete mode 100644 packages/create-astro/src/frameworks.ts diff --git a/packages/create-astro/src/config.ts b/packages/create-astro/src/config.ts deleted file mode 100644 index 4060d368c5..0000000000 --- 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 0483b7474e..0000000000 --- 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 ( -
- - 
{count}
- -
- ); -} -`, - }, - 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 ( -
- - 
{count}
- -
- ); -} -`, - }, - 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 ( -
- - 
{count()}
- -
- ); -} -`, - }, - svelte: { - filename: `src/components/SvelteCounter.svelte`, - content: ` - -
- - 
{ count }
- -
-`, - }, - 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 2286c13f52..57f1716995 100644 --- a/packages/create-astro/src/index.ts +++ b/packages/create-astro/src/index.ts @@ -1,14 +1,12 @@ import fs from 'fs'; import path from 'path'; +import { exec } from 'child_process'; 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'; // 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, }); - 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 @@ -190,83 +173,39 @@ export async function main() { } 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*)/gm, (_, indent) => { - return components.map((ln) => indent + ln).join('\n'); - }); - await fs.promises.writeFile(pageFileLoc, newContent); - } - spinner.succeed(); 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((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:'); let i = 1; const relative = path.relative(process.cwd(), cwd);