@symbo.ls/cli 2.11.132 → 2.11.158

package/bin/convert.js

@@ -6,10 +6,7 @@ import { parse } from 'globusa'
 import fs from 'fs'
 import path from 'path'
 
-// Set up webpack
-import syncWebpack from 'webpack'
-import { promisify } from 'util'
-const webpack = promisify(syncWebpack)
+import * as esbuild from 'esbuild'
 
 // Set up jsdom
 import { JSDOM } from 'jsdom'
@@ -19,15 +16,29 @@ global.document = window.document
 
 const IGNORED_FILES = ['index.js', 'package.json', 'node_modules', 'dist']
 const EXCLUDED_FROM_INTERNAL_UIKIT = [
+  // We have our own React Svg implementation
   'Svg',
+
+  // We have our own React Box implementation
+  'Box',
+
+  // These are not domql objects
   'keySetters',
   'getSystemTheme',
   'splitTransition',
   'transformDuration',
   'transformShadow',
   'transformTransition',
+
+  // FIXME: Temporary list of components we want to skip
+  'DatePicker',
   'DatePickerDay',
+  'DatePickerTwoColumns',
   'DatePickerGrid',
+  'DatePickerGridContainer',
+
+  // Not a domql object (headless-datepicker)
+  'calendar',
 ]
 const TMP_DIR_NAME = '.smbls_convert_tmp'
 const TMP_DIR_PACKAGE_JSON_STR = JSON.stringify({
@@ -37,6 +48,55 @@ const TMP_DIR_PACKAGE_JSON_STR = JSON.stringify({
   license: 'ISC'
 })
 
+function generatePackageJsonFile(
+  sourcePackageJsonPath,
+  destPath,
+  globusaStruct,
+  desiredFormat,
+  options
+) {
+  // Extract package name from source package.json
+  const str = fs.readFileSync(sourcePackageJsonPath, { encoding: 'utf8' })
+  let packageStruct
+  try {
+    packageStruct = JSON.parse(str)
+  } catch (error) {
+    console.error(`Error when parsing ${sourcePackageJsonPath}`)
+    return;
+  }
+  const split = packageStruct.name.split('/')
+  const packageName = split[split.length - 1]
+
+  // Generate list of dependencies
+  const deps = {
+    'css-in-props': 'latest',
+    [`@emotion/${desiredFormat}`]: '^11.11.0',
+    '@emotion/css': '^11.11.0',
+    '@symbo.ls/create': 'latest',
+    '@symbo.ls/react': 'latest',
+  }
+  globusaStruct.imports
+    .filter(imp => imp.path.match(/^@symbo\.ls\//))
+    .filter(imp => imp.path !== packageName)
+    .forEach(imp => deps[imp.path] = 'latest')
+
+  // Generate final package.json string
+  const genStr = JSON.stringify({
+    name: `@symbo.ls/${desiredFormat}-${packageName}`,
+    version: packageStruct.version ?? '1.0.0',
+    license: packageStruct.license ?? 'UNLICENSED',
+    dependencies: deps,
+    peerDependencies: {
+      'react': '^18.2.0',
+      'react-dom': '^18.2.0'
+    },
+    main: 'index.js',
+    source: 'index.js'
+  }, undefined, 2)
+
+  fs.writeFileSync(destPath, genStr)
+}
+
 function isDirectory (dir) { // eslint-disable-line no-unused-vars
   if (!fs.existsSync(dir)) return false
 
@@ -123,8 +183,10 @@ function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options)
       out = convert(dobj, desiredFormat, {
         ...kaldunaOpts,
         removeReactImport: false,
-        importsToInclude: globusaStruct.imports,
-        declarationsToInclude: globusaStruct.declarations,
+        // NOTE(nikaoto): Commented these out because we're using deps now, so
+        // all the imports and decls are going to be redundant
+        // importsToInclude: globusaStruct.imports,
+        // declarationsToInclude: globusaStruct.declarations,
       })
     } else {
       out = convert(dobj, desiredFormat, {
@@ -148,6 +210,7 @@ function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options)
 // Takes a source file, then bundles, parses and converts it and writes the
 // result to the destination. The tmpDirPath is used as a working directory for
 // temporary files.
+// Returns globusaStruct for later usage.
 async function convertFile(srcPath, tmpDirPath, destPath,
                            desiredFormat, options) {
   // Parse with globusa
@@ -155,28 +218,23 @@ async function convertFile(srcPath, tmpDirPath, destPath,
   const fileContent = await fs.promises.readFile(srcPath, 'utf8')
   const globusaStruct = parse(fileContent)
 
-  // Bundle with webpack
-  const libraryName = 'banunu' // This can literally be anything
   const fileName = path.basename(srcPath)
   const bundledFilePath = path.resolve(tmpDirPath, fileName)
-  console.log(`Webpack ${srcPath} -> ${bundledFilePath}`)
-  await webpack({
-    entry: srcPath,
-    output: {
-      path: tmpDirPath,
-      filename: fileName,
-      chunkFormat: 'commonjs',
-      library: { name: libraryName,
-                 type: 'commonjs-static' },
-    },
-    // experiments:  { outputModule: true },
-    target: 'node',
-    mode: 'development'
+
+  // Bundle with esbuild
+  await esbuild.build({
+    entryPoints: [srcPath],
+    bundle: true,
+    sourcemap: true,
+    target: 'node12',
+    format: 'cjs',
+    outdir: tmpDirPath
   })
 
   // Import the bundled module to obtain exported domql objects
   console.log(`Importing ${bundledFilePath}`)
-  const domqlModule = (await import(bundledFilePath))[libraryName]
+  const mod = (await import(bundledFilePath))
+  const domqlModule = mod.default
 
   // Convert it/them with kalduna
   console.log(`Converting components in ${bundledFilePath}:`)
@@ -196,12 +254,13 @@ async function convertFile(srcPath, tmpDirPath, destPath,
     await fh.writeFile(convertedModuleStr, 'utf8')
     await fh.close()
   }
+
+  return globusaStruct
 }
 
 program
   .command('convert')
-  .description('(DEPRECATED) 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 ' +
@@ -214,16 +273,12 @@ program
           '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 ' + 
+          'Only convert these components; comma separated ' +
           '(for example: --only=Flex,Img)')
   .option('--internal-uikit',
-          '(For internal use only). ' + 
+          '(For internal use only). ' +
           'Excludes particular components from the conversion')
   .action(async (src, dest, options) => {
-    console.log('smbls convert is deprecated. ' +
-                'Please use the Kalduna build script instead.')
-    return 1
-
     if (!convert) {
       throw new Error(
         'convert() from `kalduna` is not defined. Try to install ' +
@@ -320,18 +375,53 @@ program
       return 1
     }
 
-    const sourceFileNames = (await fs.promises.readdir(srcPath))
+    const sourceDirNames = (await fs.promises.readdir(srcPath))
           .filter(file => !IGNORED_FILES.includes(file))
 
-    for (const file of sourceFileNames) {
-      const indexFilePath = path.join(srcPath, file, 'index.js')
+    const dirs = []
 
-      await convertFile(
-        indexFilePath,
-        path.join(tmpDirPath, file),
-        path.join(destDirPath, file, 'index.js'),
+    for (const dir of sourceDirNames) {
+      // Ignored directories
+      if (options.internalUikit) {
+        // TODO: check with @nikoloza on these components
+        if (dir.match(/Threejs$/)) continue
+        if (dir.match(/Editorjs$/)) continue
+        if (dir.match(/User$/)) continue
+      }
+
+      const dirPath = path.join(srcPath, dir)
+      const indexFilePath = path.join(dirPath, 'index.js')
+      const pjFilePath = path.join(dirPath, 'package.json')
+
+      const globusaStruct = await convertFile(
+        indexFilePath,                           // src
+        path.join(tmpDirPath, dir),              // tmp
+        path.join(destDirPath, dir, 'index.js'), // dst
         desiredFormat,
         options
       )
+
+      if (fs.existsSync(pjFilePath)) {
+        generatePackageJsonFile(
+          pjFilePath,                                  // src
+          path.join(destDirPath, dir, 'package.json'), // dst
+          globusaStruct,
+          desiredFormat,
+          options
+        )
+      }
+
+      dirs.push(dir)
+    }
+
+    // Generate top index.js file
+    if (dirs.length > 0) {
+      const importLines = dirs.map(d => `import ${d} from './${d}'`).join('\n') + '\n'
+      const exportLines = 'export {\n' + dirs.map(d => `  ${d}`).join(',\n') + '\n}\n'
+      const fileContent = importLines + '\n' + exportLines
+
+      const fh = await fs.promises.open(path.join(destDirPath, 'index.js'), 'w')
+      await fh.writeFile(fileContent, 'utf8')
+      await fh.close()
     }
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.11.132",
+  "version": "2.11.158",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -19,13 +19,11 @@
     "@symbo.ls/socket": "latest",
     "chalk": "^5.0.0",
     "commander": "latest",
+    "esbuild": "^0.19.2",
     "globusa": "latest",
-    "jsdom": "^21.1.0",
+    "jsdom": "^22.1.0",
     "node-fetch": "^3.1.0",
     "v8-compile-cache": "^2.3.0"
   },
-  "gitHead": "13027443598f113dd2b79ddf7aaf1adbd46d97d7",
-  "devDependencies": {
-    "webpack": "^5.88.2"
-  }
+  "gitHead": "cbed9bf1f1a15c02489444ffa264acbaf2e8d918"
 }