@symbo.ls/cli 2.11.60 → 2.11.70

package/bin/convert.js

@@ -65,7 +65,6 @@ function convertDomqlModule (domqlModule, desiredFormat, options) {
   const uniqueImports = []
   const first = true
   let currentExportIdx = 0
-  let removeUseContextImport = false
   const exportCount = Object.keys(domqlModule).length
   for (const key in domqlModule) {
     // Skip if not found in whitelist
@@ -78,16 +77,11 @@ function convertDomqlModule (domqlModule, desiredFormat, options) {
       continue
     }
 
-    try {
-      convert()
-    } catch (err) {
-      throw new Error('`domql-to-mitosis` is not found.')
-    }
-    // import('domql-to-mitosis').then(({ convert }) => {
     if (convert) {
       console.group()
       const component = domqlModule[key]
       component.__name = key
+      console.log(key) // NOTE: @nikoloza don't remove this (again)
 
       const isSingleComponent = exportCount === 1
       const isFirst = currentExportIdx === 0
@@ -98,8 +92,7 @@ function convertDomqlModule (domqlModule, desiredFormat, options) {
         exportDefault: isSingleComponent,
         returnMitosisIR: true,
         importsToRemove: uniqueImports,
-        removeReactImport: !isFirst,
-        removeUseContextImport
+        removeReactImport: !isFirst
       })
 
       convertedStr = convertedStr + out.str
@@ -108,11 +101,12 @@ function convertDomqlModule (domqlModule, desiredFormat, options) {
       }
 
       uniqueImports.push(...out.mitosisIR.imports)
-      if (out.mitosisIR._useContext) { removeUseContextImport = true }
       console.groupEnd()
       currentExportIdx++
     } else {
-      throw new Error('Convert from `domql-to-mitosis` is not defined. Try to install `domql-to-mitosis` and run this command again.')
+      throw new Error(
+        'Convert from `domql-to-mitosis` is not defined. Try to install' +
+        '`domql-to-mitosis` and run this command again.')
     }
   }
   console.groupEnd()
@@ -122,16 +116,24 @@ function convertDomqlModule (domqlModule, desiredFormat, options) {
 
 program
   .command('convert')
-  .description('Recursively convert and copy all DomQL components under a directory')
+  .description('Convert and copy all DomQL components under a directory')
   .argument('[src]', 'Source directory/file. By default, it is "src/"')
-  .argument('[dest]', 'Destination directory/file. Will be overwritten. By default, it becomes the name of the desired format')
+  .argument('[dest]',
+            'Destination directory/file. Will be overwritten. 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')
   .option('--vue2', 'Convert all DomQL components to Vue2')
   .option('--vue3', 'Convert all DomQL components to Vue3')
-  .option('-t, --tmp-dir <path>', `Use this directory for storing intermediate & build files instead of the default (dest/${TMP_DIR_NAME})`)
-  .option('-o, --only <components>', 'Only convert these components; comma separated (for example: --only=Flex,Img)')
-  .option('--internal-uikit', '(For internal use only). Excludes particular components from the conversion')
+  .option('-t, --tmp-dir <path>',
+          'Use this directory for storing intermediate & build files instead of ' +
+          `the default (dest/${TMP_DIR_NAME})`)
+  .option('-o, --only <components>',
+          'Only convert these components; comma separated ' + 
+          '(for example: --only=Flex,Img)')
+  .option('--internal-uikit',
+          '(For internal use only). ' + 
+          'Excludes particular components from the conversion')
   .action(async (src, dest, options) => {
     // Desired format
     let desiredFormat = 'react'
@@ -159,7 +161,8 @@ program
     // Put a package.json file so that when we import() the modules from the
     // directory, node doesn't recognize them as ES modules (in case the parent
     // directory of the tmp dir has "type": "module" in its package.json
-    const pj = await fs.promises.open(path.resolve(tmpDirPath, 'package.json'), 'w')
+    const pj = await fs.promises.open(
+      path.resolve(tmpDirPath, 'package.json'), 'w')
     await pj.writeFile(TMP_DIR_PACKAGE_JSON_STR, 'utf8')
     await pj.close()
 
@@ -233,7 +236,9 @@ program
       destDirPath = path.resolve(dest)
     } else {
       // dest exists and is not a directory.
-      console.error(`The destination ('${path.resolve(dest)}') must be a directory when the source ('${srcPath}') is a directory`)
+      console.error(
+        `The destination ('${path.resolve(dest)}') must be a directory when` +
+          `the source ('${srcPath}') is a directory`)
       return 1
     }
 
@@ -242,7 +247,8 @@ program
 
     // Bundle components
     await esbuild.build({
-      entryPoints: origFiles.map(file => path.join(srcPath, file, './index.js')),
+      entryPoints: origFiles.map(file =>
+        path.join(srcPath, file,'./index.js')),
       bundle: true,
       sourcemap: true,
       target: 'node12',

package/bin/create.js

@@ -2,8 +2,10 @@
 
 import chalk from 'chalk'
 import fs from 'fs'
+import path from 'path'
 import { execSync } from 'child_process'
 import { program } from './program.js'
+import { addToJson } from './init-helpers/addToJson.js'
 
 function folderExists (path) {
   try {
@@ -31,7 +33,7 @@ program
   .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) => {
+  .action(async (dest = 'symbols-starter-kit', options) => {
     // Determine framework
     let framework = 'domql'
     if (options.react) {
@@ -54,6 +56,10 @@ program
     execSync(`git clone ${cloneUrl} ${dest}`)
 
     process.chdir(dest)
+
+    const SYMBOLS_FILE_PATH = path.join(process.cwd(), 'symbols.json')
+    addToJson(SYMBOLS_FILE_PATH, 'key', `${dest}.symbo.ls`)
+
     console.log('Installing Dependencies...')
     console.log()
     execSync('npm i')

package/bin/init-helpers/DesignSystem.js

@@ -1,14 +1,15 @@
 export const CustomDesignSystem = {
-  color: {
-    snowWhite: '#F3F6FB'
-  },
-  theme: {},
-  typography: {},
-  space: {},
-  media: {},
-  icons: {},
-  font: {},
-  font_family: {},
-  timing: {},
-  reset: {}
+  ANIMATION: {},
+  COLOR: {},
+  GRADIENT: {},
+  THEME: {},
+  TYPOGRAPHY: {},
+  SPACING: {},
+  SVG: {},
+  ICONS: {},
+  FONT: {},
+  FONT_FAMILY: {},
+  TIMING: {},
+  MEDIA: {},
+  RESET: {}
 }

package/bin/init-helpers/addToJson.js

@@ -0,0 +1,28 @@
+'use strict'
+
+import fs from 'fs'
+
+// Step 1: Read the JSON file
+export const addToJson = (filePath, key, value) => {
+  fs.readFile(filePath, 'utf8', (err, data) => {
+    if (err) {
+      console.error('Error reading file:', err)
+      return
+    }
+
+    try {
+      const jsonData = JSON.parse(data)
+
+      jsonData[key] = value
+
+      fs.writeFileSync(filePath, JSON.stringify(jsonData, null, 2), 'utf8', err => {
+        if (err) {
+          console.error('Error writing file:', err)
+        }
+        console.log(filePath, JSON.stringify(jsonData, null, 2))
+      })
+    } catch (parseError) {
+      console.error('Error parsing JSON:', parseError)
+    }
+  })
+}

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

@@ -1,11 +1,16 @@
 'use strict'
 
-import { execSync } from 'child_process'
+import chalk from 'chalk'
 import fs from 'fs'
 import path from 'path'
+import { execSync } from 'child_process'
 import { fileURLToPath } from 'url'
+import { addToJson } from './addToJson.js'
+
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
+const SYMBOLS_FILE_PATH = path.join(
+  __dirname, 'symbols.json')
 const DESIGN_SYSTEM_FILE_PATH = path.join(
   __dirname, 'DesignSystem.js')
 
@@ -20,18 +25,38 @@ export async function initRepo (dest, framework) {
     process.chdir(cwd)
   }
 
+  // Determine framework
+  let pkg = 'smbls'
+  if (framework === 'react') {
+    pkg = '@symbo.ls/react'
+  } else if (framework === 'angular') {
+    pkg = '@symbo.ls/react'
+  } else if (framework === 'vue2') {
+    pkg = '@symbo.ls/vue2'
+  } else if (framework === 'vue3') {
+    pkg = '@symbo.ls/vue3'
+  }
+
   // TODO: inject smbls dependencies into package.json
 
   // Install
-  console.log('Installing NPM dependencies...')
+  console.log(`Installing \`${pkg}\` from NPM...`)
   process.chdir(dest)
-  execSync('npm install', { stdio: ['inherit', 'inherit', 'ignore'] })
+  // execSync(`npm i ${pkg} --save`)
   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()
+  const dsfilePath = path.join(dest, 'DesignSystem.js')
+  console.log('Creating', chalk.bold(dsfilePath))
+  await fs.promises.copyFile(DESIGN_SYSTEM_FILE_PATH, dsfilePath)
+
+  // Copy design system file
+  const rcfilePath = path.join(dest, 'symbols.json')
+  console.log('Creating', chalk.bold(rcfilePath))
+  await fs.promises.copyFile(SYMBOLS_FILE_PATH, rcfilePath)
+  if (framework !== 'domql') addToJson(SYMBOLS_FILE_PATH, 'framework', framework)
+  console.log()
 
-  console.log('Done!')
+  console.log(chalk.green.bold('Initialized project successfully.'))
 }

package/bin/init-helpers/symbols.json

@@ -0,0 +1,3 @@
+{
+  "key": "projectKey.symbo.ls"
+}

package/bin/init.js

@@ -7,8 +7,8 @@ program
   .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('--domql', 'Use Domql in the project', true)
+  .option('--react', 'Use React in the project (default)')
   .option('--angular', 'Use Angular in the project')
   .option('--vue2', 'Use Vue2 in the project')
   .option('--vue3', 'Use Vue3 in the project')
@@ -16,9 +16,9 @@ program
     if (!dest) dest = '.'
 
     // Determine framework
-    let framework = 'react'
-    if (options.domql) {
-      framework = 'domql'
+    let framework = 'domql'
+    if (options.react) {
+      framework = 'react'
     } else if (options.angular) {
       framework = 'angular'
     } else if (options.vue2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.11.60",
+  "version": "2.11.70",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -27,5 +27,5 @@
   "peerDependencies": {
     "domql-to-mitosis": "latest"
   },
-  "gitHead": "3ba5ee704005367abf07a342904d9b99d1c4ae81"
+  "gitHead": "329c180a4cf02896ec76566a5b2f5368f62a6b06"
 }