puter-cli 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -4,8 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v1.4.1](https://github.com/bitsnaps/puter-cli/compare/v1.4.0...v1.4.1)
+
+- feat: init command will scaffold new project [`c61d3f8`](https://github.com/bitsnaps/puter-cli/commit/c61d3f8669d66eb1a869db38b877d226d00b8aca)
+- changelog: update [`c09aa17`](https://github.com/bitsnaps/puter-cli/commit/c09aa179bd0ad2f437bdf779916050c2496424cd)
+
 #### [v1.4.0](https://github.com/bitsnaps/puter-cli/compare/v1.3.0...v1.4.0)
 
+> 26 January 2025
+
 - offline mode to get version [`d3c1dc2`](https://github.com/bitsnaps/puter-cli/commit/d3c1dc275bf8a1f38f083c8cdb066fb884a08138)
 - changelog: update [`f0cc1e3`](https://github.com/bitsnaps/puter-cli/commit/f0cc1e36b2b246d65a88f32c626942c0e15ac245)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puter-cli",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Command line interface for Puter cloud platform",
   "main": "index.js",
   "bin": {

package/src/commands/init.js

@@ -3,7 +3,12 @@ import chalk from 'chalk';
 import ora from 'ora';
 import { promises as fs } from 'fs';
 import path from 'path';
-import { generateAppName } from '../commons.js';
+import { generateAppName, getDefaultHomePage } from '../commons.js';
+
+const JS_BUNDLERS = ['Vite', 'Webpack', 'Parcel', 'esbuild', 'Farm'];
+const FULLSTACK_FRAMEWORKS = ['Next', 'Nuxt', 'SvelteKit', 'Astro'];
+const JS_LIBRARIES = ['React', 'Vue', 'Angular', 'Svelte', 'jQuery'];
+const CSS_LIBRARIES = ['Bootstrap', 'Bulma', 'shadcn', 'Tailwind', 'Material-UI', 'Semantic UI', 'AntDesign', 'Element-Plus', 'PostCSS', 'AutoPrefixer'];
 
 export async function init() {
   const answers = await inquirer.prompt([
@@ -15,47 +20,223 @@ export async function init() {
     },
     {
       type: 'list',
-      name: 'template',
-      message: 'Select a template:',
-      choices: ['basic', 'static-site', 'full-stack']
+      name: 'useBundler',
+      message: 'Do you want to use a JavaScript bundler?',
+      choices: ['Yes', 'No (Use CDN)']
     }
   ]);
 
+  let jsFiles = [];
+  let cssFiles = [];
+  let extraFiles = [];
+  let bundlerAnswers = null;
+  let frameworkAnswers = null;
+
+  if (answers.useBundler === 'Yes') {
+    bundlerAnswers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'bundler',
+        message: 'Select a JavaScript bundler:',
+        choices: JS_BUNDLERS
+      },
+      {
+        type: 'list',
+        name: 'frameworkType',
+        message: 'Do you want to use a full-stack framework or custom libraries?',
+        choices: ['Full-stack framework', 'Custom libraries']
+      }
+    ]);
+
+    if (bundlerAnswers.frameworkType === 'Full-stack framework') {
+      frameworkAnswers = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'framework',
+          message: 'Select a full-stack framework:',
+          choices: FULLSTACK_FRAMEWORKS
+        }
+      ]);
+
+      switch (frameworkAnswers.framework) {
+        case FULLSTACK_FRAMEWORKS[0]:
+          jsFiles.push('next@latest');
+          extraFiles.push({
+            path: 'src/index.tsx',
+            content: `export default function Home() { return (<h1>${answers.name}</h1>) }`
+          });
+          break;
+        case FULLSTACK_FRAMEWORKS[1]:
+          jsFiles.push('nuxt@latest');
+          extraFiles.push({
+            path: 'src/app.vue',
+            content: `<template><h1>${answers.name}</h1></template>`
+          });
+          break;
+          case FULLSTACK_FRAMEWORKS[2]:
+            jsFiles.push('svelte@latest', 'sveltekit@latest');
+            extraFiles.push({
+              path: 'src/app.vue',
+              content: `<template><h1>${answers.name}</h1></template>`
+            });
+            break;
+            case FULLSTACK_FRAMEWORKS[3]:
+              jsFiles.push('astro@latest', 'astro@latest');
+              extraFiles.push({
+                path: 'src/pages/index.astro',
+                content: `---\n\n<Layout title="Welcome to ${answers.name}."><h1>${answers.name}</h1></Layout>`
+              });
+          break;
+      }
+    } else {
+      const libraryAnswers = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'library',
+          message: 'Select a JavaScript library/framework:',
+          choices: JS_LIBRARIES
+        }
+      ]);
+
+      switch (libraryAnswers.library) {
+        case JS_LIBRARIES[0]:
+          jsFiles.push('react@latest', 'react-dom@latest');
+          const reactLibs = await inquirer.prompt([
+            {
+              type: 'checkbox',
+              name: 'reactLibraries',
+              message: 'Select React libraries:',
+              choices: CSS_LIBRARIES.concat(['react-router-dom', 'react-redux', 'react-bootstrap', '@chakra-ui/react', 'semantic-ui-react'])
+            }
+          ]);
+          jsFiles.push(...reactLibs.reactLibraries);
+          extraFiles.push({
+            path: 'src/App.jsx',
+            content: `export default function Home() { return (<h1>${answers.name}</h1>) }`
+          });
+          break;
+        case JS_LIBRARIES[1]:
+          jsFiles.push('vue@latest');
+          const vueLibs = await inquirer.prompt([
+            {
+              type: 'checkbox',
+              name: 'vueLibraries',
+              message: 'Select Vue libraries:',
+              choices: CSS_LIBRARIES.concat(['shadcn-vue', 'UnoCSS', 'NaiveUI', 'bootstrap-vue-next', 'buefy', 'vue-router', 'pinia'])
+            }
+          ]);
+          jsFiles.push(...vueLibs.vueLibraries);
+          extraFiles.push({
+            path: 'src/App.vue',
+            content: `<template><h1>${answers.name}</h1></template>`
+          });
+          break;
+        case JS_LIBRARIES[2]:
+          jsFiles.push('@angular/core@latest');
+          extraFiles.push({
+            path: 'src/index.controller.js',
+            content: `(function () { angular.module('app', [])})`
+          });
+          break;
+        case JS_LIBRARIES[3]:
+          jsFiles.push('svelte@latest');
+          break;
+        case JS_LIBRARIES[4]:
+          jsFiles.push('jquery@latest');
+          extraFiles.push({
+            path: 'src/main.js',
+            content: `$(function(){})`
+          });
+          break;
+      }
+    }
+  } else {
+
+    const cdnAnswers = await inquirer.prompt([
+      {
+        type: 'list',
+        name: 'jsFramework',
+        message: 'Select a JavaScript framework/library (CDN):',
+        choices: JS_LIBRARIES
+      },
+      {
+        type: 'list',
+        name: 'cssFramework',
+        message: 'Select a CSS framework/library (CDN):',
+        choices: CSS_LIBRARIES //'Tailwind', 'Bootstrap', 'Bulma'...
+      }
+    ]);
+
+    switch (cdnAnswers.jsFramework) {
+      case JS_LIBRARIES[0]:
+        jsFiles.push('https://unpkg.com/react@latest/umd/react.production.min.js');
+        jsFiles.push('https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js');
+        break;
+      case JS_LIBRARIES[1]:
+        jsFiles.push('https://unpkg.com/vue@latest/dist/vue.global.js');
+        break;
+      case JS_LIBRARIES[2]:
+        jsFiles.push('https://unpkg.com/@angular/core@latest/bundles/core.umd.js');
+        break;
+      case JS_LIBRARIES[3]:
+        jsFiles.push('https://unpkg.com/svelte@latest/compiled/svelte.js');
+        break;
+      case JS_LIBRARIES[4]:
+        jsFiles.push('https://code.jquery.com/jquery-latest.min.js');
+        break;
+    }
+
+    switch (cdnAnswers.cssFramework) {
+      case CSS_LIBRARIES[0]:
+        cssFiles.push('https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css');
+        break;
+        case CSS_LIBRARIES[1]:
+          cssFiles.push('https://cdn.jsdelivr.net/npm/bulma@latest/css/bulma.min.css');
+          break;
+      case CSS_LIBRARIES[2]:
+        cssFiles.push('https://cdn.tailwindcss.com');
+        break;
+    }
+  }
+
   const spinner = ora('Creating Puter app...').start();
 
   try {
+    const useBundler = answers.useBundler === 'Yes';
     // Create basic app structure
-    await createAppStructure(answers);
+    await createAppStructure(answers.name, useBundler, bundlerAnswers, frameworkAnswers, jsFiles, cssFiles, extraFiles);
     spinner.succeed(chalk.green('Successfully created Puter app!'));
-    
+
     console.log('\nNext steps:');
     console.log(chalk.cyan('1. cd'), answers.name);
-    console.log(chalk.cyan('2. npm install'));
-    console.log(chalk.cyan('3. npm start'));
+    if (useBundler) {
+      console.log(chalk.cyan('2. npm install'));
+      console.log(chalk.cyan('3. npm start'));
+    } else {
+      console.log(chalk.cyan('2. Open index.html in your browser'));
+    }
   } catch (error) {
     spinner.fail(chalk.red('Failed to create app'));
     console.error(error);
   }
 }
 
-async function createAppStructure({ name, template }) {
+async function createAppStructure(name, useBundler, bundlerAnswers, frameworkAnswers, jsFiles, cssFiles, extraFiles) {
   // Create project directory
   await fs.mkdir(name, { recursive: true });
 
+  // Generate default home page
+  const homePage = useBundler?getDefaultHomePage(name): getDefaultHomePage(name, jsFiles, cssFiles);
+
   // Create basic files
   const files = {
     '.env': `APP_NAME=${name}\nPUTER_API_KEY=`,
-    'index.html': `<!DOCTYPE html>
-<html>
-<head>
-    <title>${name}</title>
-</head>
-<body>
-    <h1>Welcome to ${name}</h1>
-    <script src="https://js.puter.com/v2/"></script>
-    <script src="app.js"></script>
-</body>
-</html>`,
+    'index.html': homePage,
+    'styles.css': `body {
+    font-family: 'Segoe UI', Roboto, sans-serif;
+    margin: 0 auto;
+    padding: 10px;
+  }`,
     'app.js': `// Initialize Puter app
 console.log('Puter app initialized!');`,
     'README.md': `# ${name}\n\nA Puter app created with puter-cli`
@@ -64,4 +245,44 @@ console.log('Puter app initialized!');`,
   for (const [filename, content] of Object.entries(files)) {
     await fs.writeFile(path.join(name, filename), content);
   }
+
+  // If using a bundler, create a package.json
+  // if (jsFiles.some(file => !file.startsWith('http'))) {
+  if (useBundler) {
+
+    const useFullStackFramework = bundlerAnswers.frameworkType === 'Full-stack framework';
+    const bundler = bundlerAnswers.bundler.toString().toLowerCase();
+    const framework = useFullStackFramework?frameworkAnswers.framework.toLowerCase():null;
+
+    const scripts = {
+      start: `${useFullStackFramework?`${framework} dev`:bundler} dev`,
+      build: `${useFullStackFramework?`${framework} build`:bundler} build`,
+    };
+    
+    const packageJson = {
+      name: name,
+      version: '1.0.0',
+      scripts,
+      dependencies: {},
+      devDependencies: {}
+    };
+
+    jsFiles.forEach(lib => {
+      if (!lib.startsWith('http')) {
+        packageJson.dependencies[lib.split('@')[0].toString().toLowerCase()] = lib.split('@')[1] || 'latest';
+      }
+    });
+
+    packageJson.devDependencies[bundler] = 'latest';
+
+    await fs.writeFile(path.join(name, 'package.json'), JSON.stringify(packageJson, null, 2));
+
+    extraFiles.forEach(async (extraFile) => {
+      const fullPath = path.join(name, extraFile.path);
+      // Create directories recursively if they don't exist
+      await fs.mkdir(path.dirname(fullPath), { recursive: true });
+      await fs.writeFile(fullPath, extraFile.content);
+    });
+
+  }
 }

package/src/commons.js

@@ -190,13 +190,19 @@ export function isValidAppName(name) {
    return true;
 }
 
-export function getDefaultHomePage(appName) {
+/**
+ * Generate the default home page for a new web application
+ * @param {string} appName The name of the web application
+ * @returns HTML template of the app
+ */
+export function getDefaultHomePage(appName, jsFiles = [], cssFiles= []) {
     const defaultIndexContent = `<!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>${appName}</title>
+        ${cssFiles.map(css => `<link href="${css}" rel="stylesheet">`).join('\n  ')}
         <style>
             body {
                 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -292,6 +298,11 @@ export function getDefaultHomePage(appName) {
         <footer class="footer">
             &copy; 2025 ${appName}. All rights reserved.
         </footer>
+
+        <div id="${(jsFiles.length && jsFiles.some(f => f.includes('react'))) ? 'root' : 'app'}"></div>
+  ${jsFiles.map(js => 
+    `<script ${js.endsWith('app.js') ? 'type="text/babel"' : ''} src="${js}"></script>`
+  ).join('\n  ')}
     </body>
     </html>`;