create-tinybase 0.1.0

package/README.md

@@ -0,0 +1,17 @@
+# create-tinybase
+
+CLI tool to scaffold a new TinyBase application.
+
+## Usage
+
+```bash
+npm init tinybase
+```
+
+This will prompt you with questions to configure your new TinyBase app:
+
+- Project name
+- Language (TypeScript or JavaScript)
+- Framework (React or Vanilla)
+- Persistence option (None, Local Storage, SQLite, PostgreSQL)
+- Sync capabilities

package/cli.js

@@ -0,0 +1,359 @@
+#!/usr/bin/env node
+
+import prompts from 'prompts';
+import { mkdir, writeFile } from 'fs/promises';
+import { join } from 'path';
+
+console.log('🎉 Welcome to TinyBase!\n');
+
+const questions = [
+  {
+    type: 'text',
+    name: 'projectName',
+    message: 'Project name:',
+    initial: 'my-tinybase-app',
+    validate: (value) => value.length > 0 ? true : 'Project name is required'
+  },
+  {
+    type: 'select',
+    name: 'language',
+    message: 'Language:',
+    choices: [
+      { title: 'TypeScript', value: 'typescript' },
+      { title: 'JavaScript', value: 'javascript' }
+    ],
+    initial: 0
+  },
+  {
+    type: 'select',
+    name: 'framework',
+    message: 'Framework:',
+    choices: [
+      { title: 'React', value: 'react' },
+      { title: 'Vanilla', value: 'vanilla' }
+    ],
+    initial: 0
+  },
+  {
+    type: 'select',
+    name: 'persister',
+    message: 'Persistence:',
+    choices: [
+      { title: 'None (in-memory only)', value: 'none' },
+      { title: 'Local Storage', value: 'local-storage' },
+      { title: 'SQLite', value: 'sqlite' },
+      { title: 'PostgreSQL', value: 'postgres' }
+    ],
+    initial: 0
+  },
+  {
+    type: 'confirm',
+    name: 'sync',
+    message: 'Include sync capabilities?',
+    initial: false
+  }
+];
+
+async function main() {
+  const answers = await prompts(questions, {
+    onCancel: () => {
+      console.log('\n❌ Cancelled');
+      process.exit(0);
+    }
+  });
+
+  console.log('\n📦 Creating your TinyBase app...\n');
+  
+  const projectPath = join(process.cwd(), answers.projectName);
+  
+  try {
+    await createProject(projectPath, answers);
+    console.log('✅ Done!\n');
+    console.log(`Next steps:`);
+    console.log(`  cd ${answers.projectName}`);
+    console.log(`  npm install`);
+    console.log(`  npm run dev`);
+  } catch (error) {
+    console.error('❌ Error creating project:', error.message);
+    process.exit(1);
+  }
+}
+
+async function createProject(projectPath, config) {
+  await mkdir(projectPath, { recursive: true });
+  await mkdir(join(projectPath, 'src'), { recursive: true });
+  await mkdir(join(projectPath, 'public'), { recursive: true });
+  
+  // Generate files based on config
+  await generatePackageJson(projectPath, config);
+  await generateIndexHtml(projectPath, config);
+  await generateViteConfig(projectPath, config);
+  await generateTsConfig(projectPath, config);
+  await generateSourceFiles(projectPath, config);
+  await generateReadme(projectPath, config);
+}
+
+async function generatePackageJson(projectPath, config) {
+  const isTS = config.language === 'typescript';
+  const isReact = config.framework === 'react';
+  
+  const pkg = {
+    name: config.projectName,
+    version: '0.1.0',
+    type: 'module',
+    scripts: {
+      dev: 'vite',
+      build: isTS ? 'tsc && vite build' : 'vite build',
+      preview: 'vite preview'
+    },
+    dependencies: {
+      tinybase: '^5.4.3'
+    },
+    devDependencies: {
+      vite: '^5.4.11'
+    }
+  };
+  
+  if (isReact) {
+    pkg.dependencies.react = '^18.3.1';
+    pkg.dependencies['react-dom'] = '^18.3.1';
+    pkg.devDependencies['@vitejs/plugin-react'] = '^4.3.4';
+  }
+  
+  if (isTS) {
+    pkg.devDependencies.typescript = '^5.6.3';
+  }
+  
+  if (config.persister === 'sqlite') {
+    pkg.dependencies['tinybase-sqlite-wasm'] = '^1.0.0';
+  } else if (config.persister === 'postgres') {
+    pkg.dependencies['pg'] = '^8.13.1';
+  }
+  
+  if (config.sync) {
+    pkg.dependencies['tinybase-ws-server'] = '^1.0.0';
+  }
+  
+  await writeFile(
+    join(projectPath, 'package.json'),
+    JSON.stringify(pkg, null, 2)
+  );
+}
+
+async function generateIndexHtml(projectPath, config) {
+  const isTS = config.language === 'typescript';
+  const ext = isTS ? 'tsx' : 'jsx';
+  
+  const html = `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${config.projectName}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/index.${ext}"></script>
+  </body>
+</html>
+`;
+  
+  await writeFile(join(projectPath, 'index.html'), html);
+}
+
+async function generateViteConfig(projectPath, config) {
+  const isReact = config.framework === 'react';
+  const isTS = config.language === 'typescript';
+  const ext = isTS ? 'ts' : 'js';
+  
+  let content = `import { defineConfig } from 'vite';\n`;
+  
+  if (isReact) {
+    content += `import react from '@vitejs/plugin-react';\n`;
+  }
+  
+  content += `\nexport default defineConfig({\n`;
+  content += `  plugins: [${isReact ? 'react()' : ''}],\n`;
+  content += `});\n`;
+  
+  await writeFile(join(projectPath, `vite.config.${ext}`), content);
+}
+
+async function generateTsConfig(projectPath, config) {
+  if (config.language !== 'typescript') return;
+  
+  const tsconfig = {
+    compilerOptions: {
+      target: 'ES2020',
+      useDefineForClassFields: true,
+      lib: ['ES2020', 'DOM', 'DOM.Iterable'],
+      module: 'ESNext',
+      skipLibCheck: true,
+      moduleResolution: 'bundler',
+      allowImportingTsExtensions: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      noEmit: true,
+      jsx: config.framework === 'react' ? 'react-jsx' : undefined,
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      noFallthroughCasesInSwitch: true
+    },
+    include: ['src']
+  };
+  
+  await writeFile(
+    join(projectPath, 'tsconfig.json'),
+    JSON.stringify(tsconfig, null, 2)
+  );
+}
+
+async function generateSourceFiles(projectPath, config) {
+  const isTS = config.language === 'typescript';
+  const isReact = config.framework === 'react';
+  const ext = isTS ? (isReact ? 'tsx' : 'ts') : (isReact ? 'jsx' : 'js');
+  
+  if (isReact) {
+    await generateReactApp(projectPath, config, ext);
+  } else {
+    await generateVanillaApp(projectPath, config, ext);
+  }
+}
+
+async function generateReactApp(projectPath, config, ext) {
+  const isTS = config.language === 'typescript';
+  
+  // index file
+  const indexContent = `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('app')${isTS ? '!' : ''}).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+`;
+  
+  await writeFile(join(projectPath, 'src', `index.${ext}`), indexContent);
+  
+  // App component
+  const appContent = `import { createStore } from 'tinybase';
+import { useCreateStore, useCell } from 'tinybase/ui-react';
+
+function App() {
+  const store = useCreateStore(() => createStore().setCell('data', 'row1', 'count', 0));
+  
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <h1>🎉 TinyBase App</h1>
+      <Counter store={store} />
+    </div>
+  );
+}
+
+function Counter({ store }${isTS ? ': { store: any }' : ''}) {
+  const count = useCell('data', 'row1', 'count', store) ${isTS ? 'as number' : ''};
+  
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => store.setCell('data', 'row1', 'count', count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
+
+export default App;
+`;
+  
+  await writeFile(join(projectPath, 'src', `App.${ext}`), appContent);
+  
+  // CSS
+  const cssContent = `body {
+  margin: 0;
+  padding: 0;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+}
+
+button:hover {
+  background: #0056b3;
+}
+`;
+  
+  await writeFile(join(projectPath, 'src', 'index.css'), cssContent);
+}
+
+async function generateVanillaApp(projectPath, config, ext) {
+  const content = `import { createStore } from 'tinybase';
+
+const store = createStore();
+store.setCell('data', 'row1', 'count', 0);
+
+const app = document.getElementById('app');
+app.innerHTML = \`
+  <div style="padding: 2rem; font-family: system-ui">
+    <h1>🎉 TinyBase App</h1>
+    <p>Count: <span id="count">0</span></p>
+    <button id="increment">Increment</button>
+  </div>
+\`;
+
+const countEl = document.getElementById('count');
+const button = document.getElementById('increment');
+
+store.addCellListener('data', 'row1', 'count', () => {
+  countEl.textContent = store.getCell('data', 'row1', 'count');
+});
+
+button.addEventListener('click', () => {
+  const current = store.getCell('data', 'row1', 'count');
+  store.setCell('data', 'row1', 'count', current + 1);
+});
+`;
+  
+  await writeFile(join(projectPath, 'src', `index.${ext}`), content);
+}
+
+async function generateReadme(projectPath, config) {
+  const readme = `# ${config.projectName}
+
+A TinyBase application scaffolded with \`tinybase-new\`.
+
+## Configuration
+
+- Language: ${config.language}
+- Framework: ${config.framework}
+- Persistence: ${config.persister}
+- Sync: ${config.sync ? 'Yes' : 'No'}
+
+## Getting Started
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+## Learn More
+
+- [TinyBase Documentation](https://tinybase.org/)
+- [TinyBase GitHub](https://github.com/tinyplex/tinybase)
+`;
+  
+  await writeFile(join(projectPath, 'README.md'), readme);
+}
+
+main();

package/cspell.json

@@ -0,0 +1,8 @@
+{
+  "ignorePaths": [],
+  "words": [
+    "jamesgpearce",
+    "tinybase",
+    "tinyplex"
+  ]
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "create-tinybase",
+  "version": "0.1.0",
+  "author": "jamesgpearce",
+  "repository": "github:tinyplex/tinybase",
+  "license": "MIT",
+  "homepage": "https://tinybase.org",
+  "description": "The CLI to build a new app using TinyBase, a reactive data store and sync engine.",
+  "keywords": [
+    "tiny",
+    "sync engine",
+    "local-first",
+    "reactive",
+    "state",
+    "data",
+    "react"
+  ],
+  "type": "module",
+  "bin": {
+    "create-tinybase": "./cli.js"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}