@symbo.ls/cli 2.10.225 → 2.10.227

package/bin/convert.js

@@ -28,7 +28,7 @@ async function mkdirp(dir) {
 program
   .command('convert')
   .description('Recursively convert and copy all DomQL components under a directory')
-  .argument('[src]', 'Source directory. By default, it is "."', '.')
+  .argument('[src]', 'Source directory. By default, it is "src/"')
   .argument('[dest]', 'Destination directory. By default, it becomes the name of the desired format')
   .option('--react', 'Convert all DomQL components to React')
   .option('--angular', 'Convert all DomQL components to Angular')

package/bin/create.js

@@ -2,59 +2,44 @@
 
 import { execSync } from 'child_process'
 import { program } from './program.js'
-import fs from 'fs'
+import { initRepo } from './init-helpers/init-repo.js'
 import path from 'path'
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 
-const DESIGN_SYSTEM_FILE_PATH = path.join(
-  __dirname, 'create', 'DesignSystem.js')
 const REPO_URLS = {
-  domql: 'https://github.com/symbo-ls/create-domql-app.git',
-  react: 'https://github.com/symbo-ls/create-react-app.git',
-  angular: 'https://github.com/symbo-ls/create-angular-app.git',
-  vue2: 'https://github.com/symbo-ls/create-vue2-app.git',
-  vue3: 'https://github.com/symbo-ls/create-vue3-app.git',
+  'domql': 'https://github.com/symbo-ls/create-domql-app.git',
+  'react': 'https://github.com/symbo-ls/create-react-app.git',
+  'angular': 'https://github.com/symbo-ls/create-angular-app.git',
+  'vue2': 'https://github.com/symbo-ls/create-vue2-app.git',
+  'vue3': 'https://github.com/symbo-ls/create-vue3-app.git',
 }
 
 program
   .command('create')
-  .description('Create a new project that uses Symbols')
-  .argument('dest', 'Project directory name')
-  .option('--domql', 'Use Domql in the project (default)')
-  .option('--react', 'Use React in the project (default)')
+  .description('Create and initialize a new project')
+  .argument('dest', 'Project directory')
+  .option('--domql', 'Use Domql in the project')
+  .option('--react', 'Use React in the project (default)', true)
   .option('--angular', 'Use Angular in the project')
   .option('--vue2', 'Use Vue2 in the project')
   .option('--vue3', 'Use Vue3 in the project')
   .action(async (dest, options) => {
-    // Determine repo to clone
-    let cloneUrl = REPO_URLS.react
+    // Determine framework
+    let framework = 'react'
     if (options.domql) {
-      cloneUrl = REPO_URLS.domql
+      framework = 'domql'
     } else if (options.angular) {
-      cloneUrl = REPO_URLS.angular
+      framework = 'angular'
     } else if (options.vue2) {
-      cloneUrl = REPO_URLS.vue2
+      framework = 'vue2'
     } else if (options.vue3) {
-      cloneUrl = REPO_URLS.vue3
+      framework = 'vue3'
     }
+    let cloneUrl = REPO_URLS[framework]
 
     // Clone
-    console.log(`Cloning ${cloneUrl} into ${dest}...`)
+    console.log(`Cloning ${cloneUrl} into '${dest}'...`)
     execSync(`git clone ${cloneUrl} ${dest}`)
 
-    // Install
-    const cwd = process.cwd()
-    console.log('Installing NPM dependencies...')
-    process.chdir(dest)
-    execSync(`npm install`)
-    process.chdir(cwd)
-
-    // Copy design system file
-    const filePath = path.join(dest, 'DesignSystem.js')
-    console.log(`Writing DesignSystem.js to ${filePath}`)
-    await fs.promises.copyFile(DESIGN_SYSTEM_FILE_PATH, filePath)
-
-    console.log('Done!')
+    // Leave the rest to init
+    return await initRepo(dest, framework)
   })

package/bin/init-helpers/init-repo.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { execSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const DESIGN_SYSTEM_FILE_PATH = path.join(
+  __dirname, 'DesignSystem.js')
+
+export async function initRepo(dest, framework) {
+  const cwd = process.cwd()
+
+  // Init NPM if necessary
+  if (!fs.existsSync(path.join(dest, 'package.json'))) {
+    process.chdir(dest)
+    console.log('Running npm init')
+    execSync(`npm init -y`)
+    process.chdir(cwd)
+  }
+
+  // TODO: inject smbls dependencies into package.json
+
+  // Install
+  console.log('Installing NPM dependencies...')
+  process.chdir(dest)
+  execSync(`npm install`, { stdio: ['inherit', 'inherit', 'ignore'] })
+  process.chdir(cwd)
+
+  // Copy design system file
+  const filePath = path.join(dest, 'DesignSystem.js')
+  console.log(`Writing DesignSystem.js to ${filePath}`)
+  await fs.promises.copyFile(DESIGN_SYSTEM_FILE_PATH, filePath)
+
+  console.log('Done!')
+}

package/bin/init.js

@@ -1,29 +1,32 @@
 'use strict'
 
-import { exec } from 'child_process'
-import chalk from 'chalk'
 import { program } from './program.js'
+import { initRepo } from './init-helpers/init-repo.js'
 
 program
-  .command('init [name]')
-  .description('Initialize a repository')
-  .option('--framework', 'Which Symbols to install (domql, react)')
-  .action(async (framework) => {
-    const packageName = `@symbo.ls/${framework || 'uikit'}`
-    console.log('Creating', chalk.green.bold(packageName))
+  .command('init')
+  .description('Initialize a project')
+  .argument('[dest]', 'Project directory. By default, it is "."')
+  .option('--domql', 'Use Domql in the project')
+  .option('--react', 'Use React in the project (default)', true)
+  .option('--angular', 'Use Angular in the project')
+  .option('--vue2', 'Use Vue2 in the project')
+  .option('--vue3', 'Use Vue3 in the project')
+  .action(async (dest, options) => {
+    if (!dest) dest = '.'
 
-    // exec(`git clone git@github.com:symbo-ls/starter-kit.git`, (error, stdout, stderr) => {
-    //   if (error) {
-    //     console.log(`error: ${error.message}`)
-    //     return
-    //   }
-    //   if (stderr) {
-    //     console.warn(`stderr: ${stderr}`)
-    //     return
-    //   }
-    //   console.log(`stdout: ${stdout}`)
-    //   console.log(chalk.green.bold(packageName), 'successfuly added!')
-    //   console.log('')
-    //   console.log(chalk.dim.underline('Now you can import components like:'), `import { Button } from "${chalk.green.bold(packageName)}""`)
-    // })
+    // Determine framework
+    let framework = 'react'
+    if (options.domql) {
+      framework = 'domql'
+    } else if (options.angular) {
+      framework = 'angular'
+    } else if (options.vue2) {
+      framework = 'vue2'
+    } else if (options.vue3) {
+      framework = 'vue3'
+    }
+
+    // Leave the rest to init
+    return await initRepo(dest, framework)
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.10.225",
+  "version": "2.10.227",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -19,10 +19,11 @@
     "@symbo.ls/socket": "latest",
     "chalk": "^5.0.0",
     "commander": "latest",
+    "domql-to-mitosis": "^1.4.15",
     "esbuild": "latest",
     "jsdom": "^21.1.0",
     "node-fetch": "^3.1.0",
     "v8-compile-cache": "^2.3.0"
   },
-  "gitHead": "ab9664d8dfad6716978095254e3e3526f8cad696"
+  "gitHead": "4da2b1c77bd894f10cc5d85d9fcd84696614675f"
 }