npm - @symbo.ls/cli - Versions diffs - 2.11.127 → 2.11.128 - Mend

@symbo.ls/cli 2.11.127 → 2.11.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/bin/convert.js +160 -118
package/package.json +7 -2

package/bin/convert.js CHANGED Viewed

@@ -3,12 +3,17 @@
 import * as esbuild from 'esbuild'
 import { program } from './program.js'
 import { convert } from 'kalduna'
+import { parse } from 'globusa'
 import fs from 'fs'
 import path from 'path'
-import { JSDOM } from 'jsdom'
-const l = (n) => console.log(`mark${n}`) // eslint-disable-line no-unused-vars
+// Set up webpack
+import syncWebpack from 'webpack'
+import { promisify } from 'util'
+const webpack = promisify(syncWebpack)
+// Set up jsdom
+import { JSDOM } from 'jsdom'
 const jsdom = new JSDOM('<html><head></head><body></body></html>')
 global.window = jsdom.window
 global.document = window.document
@@ -54,68 +59,145 @@ async function mkdirp (dir) {
   return null
 }
-async function importDomqlModule (modulePath) {
-  console.log(`importing ${modulePath}`)
-  return (await import(modulePath)).default
-}
-function convertDomqlModule (domqlModule, desiredFormat, options) {
+// Returns a string
+function convertDomqlModule(domqlModule, globusaStruct, desiredFormat, options) {
   let convertedStr = ''
   const whitelist = (options.only ? options.only.split(',') : null)
   console.group()
+  const exports = Object.keys(domqlModule)
+        .filter(exportName => {
+          if (!whitelist) return true
+          if (whitelist.includes(exportName)) {
+            console.log(`Skipping ${exportName} component due to whitelist exclusion`)
+            return false
+          }
+          return true
+        })
+        .filter(exportName => {
+          if (!options.internalUikit) return true
+          if (EXCLUDED_FROM_INTERNAL_UIKIT.includes(exportName)) {
+            console.log(`Skipping ${exportName} component due to internal uikit exclusion`)
+            return false
+          }
+          return true
+        })
+  const isSingleComponent = (exports.length === 1)
   const uniqueImports = []
-  const first = true
-  let currentExportIdx = 0
-  const exportCount = Object.keys(domqlModule).length
-  for (const key in domqlModule) {
-    // Skip if not found in whitelist
-    if (whitelist && !whitelist.includes(key)) { continue }
-    // Skip some components if converting smbls uikit
-    if (options.internalUikit &&
-        EXCLUDED_FROM_INTERNAL_UIKIT.includes(key)) {
-      console.log(`Skipping ${key} component due to exclusion`)
-      continue
+  for (const idx in exports) {
+    const exportName = exports[idx]
+    const dobj = domqlModule[exportName]
+    // Set component name (if not present)
+    if (!dobj.__name) {
+      dobj.__name = exportName
     }
-    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
-      const isLast = currentExportIdx === exportCount - 1
-      const out = convert(component, desiredFormat, {
-        verbose: false,
-        exportDefault: isSingleComponent,
-        returnMitosisIR: true,
-        importsToRemove: uniqueImports,
-        removeReactImport: !isFirst
-      })
+    console.group()
+    console.log(dobj.__name) // NOTE(Nikaoto): @nikoloza, don't remove this
-      convertedStr = convertedStr + out.str
-      if (options.trailingNewLine && !isLast) {
-        convertedStr += '\n'
-      }
+    const isFirst = (idx == 0)
+    const isLast = (idx == (exports.length - 1)) // NOTE: Don't use '===' here!
+    const kaldunaOpts = {
+      verbose: false,
+      returnMitosisIR: true,
+      exportDefault: isSingleComponent,
+      importsToRemove: uniqueImports,
+      /* NOTE: The option below prevents a name collision bug. For example:
+         export const A = { ... }
+         export const B = { extends: A }
-      uniqueImports.push(...out.mitosisIR.imports)
-      console.groupEnd()
-      currentExportIdx++
+         Normally, converting component B will generate an import for A like:
+         'import { A } from @symbo.ls/react'
+         But, in this case, because A is in local scope as one of the exports,
+         the component import will be ignored, preventing the collision.
+      */
+      componentImportsToIgnore: exports,
+    }
+    let out = null
+    if (isFirst) {
+      out = convert(dobj, desiredFormat, {
+        ...kaldunaOpts,
+        removeReactImport: false,
+        importsToInclude: globusaStruct.imports,
+        declarationsToInclude: globusaStruct.declarations,
+      })
     } else {
-      throw new Error(
-        'Convert from `domql-to-mitosis` is not defined. Try to install' +
-        '`domql-to-mitosis` and run this command again.')
+      out = convert(dobj, desiredFormat, {
+        ...kaldunaOpts,
+        removeReactImport: true,
+      })
     }
+    convertedStr = convertedStr + out.str
+    if (!isLast) {
+      convertedStr += '\n'
+    }
+    uniqueImports.push(...out.mitosisIR.imports)
+    console.groupEnd()
   }
   console.groupEnd()
   return convertedStr
 }
+// 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.
+async function convertFile(srcPath, tmpDirPath, destPath,
+                           desiredFormat, options) {
+  // Parse with globusa
+  console.log(`Parsing components in ${srcPath}`)
+  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' },
+    },
+    target: 'node',
+    mode: 'development'
+  })
+  // Import the bundled module to obtain exported domql objects
+  console.log(`Importing ${bundledFilePath}`)
+  const domqlModule = (await import(bundledFilePath))[libraryName]
+  // Convert it/them with kalduna
+  console.log(`Converting components in ${bundledFilePath}:`)
+  const convertedModuleStr = convertDomqlModule(
+    domqlModule,
+    globusaStruct,
+    desiredFormat,
+    options
+  )
+  // Create dest dir
+  await mkdirp(path.dirname(destPath))
+  // Write file
+  if (convertedModuleStr && convertedModuleStr.length > 0) {
+    const fh = await fs.promises.open(destPath, 'w')
+    await fh.writeFile(convertedModuleStr, 'utf8')
+    await fh.close()
+  }
+}
 program
   .command('convert')
   .description('Convert and copy all DomQL components under a directory')
@@ -137,6 +219,18 @@ program
           '(For internal use only). ' +
           'Excludes particular components from the conversion')
   .action(async (src, dest, options) => {
+    if (!convert) {
+      throw new Error(
+        'convert() from `kalduna` is not defined. Try to install ' +
+          '`kalduna` and run this command again.')
+    }
+    if (!parse) {
+      throw new Error(
+        'parse() from `globusa` is not defined. Try to install ' +
+          '`globusa` and run this command again.')
+    }
     // Desired format
     let desiredFormat = 'react'
     if (options.angular) {
@@ -191,41 +285,18 @@ program
         destFilePath = path.join(destDir, path.basename(srcPath))
       }
-      const bundledFilePath = path.join(tmpDirPath, path.basename(srcPath))
-      console.log(`ESbuild ${srcPath} -> ${bundledFilePath}`)
-      // Bundle the component
-      await esbuild.build({
-        entryPoints: [srcPath],
-        bundle: true,
-        sourcemap: true,
-        target: 'node12',
-        format: 'cjs',
-        outfile: bundledFilePath
-      })
-      // Import the module
-      const domqlModule = await importDomqlModule(bundledFilePath, options)
-      // Convert & append each exported domql object
-      console.log(`Converting modules in ${bundledFilePath}:`)
-      const convertedModuleStr = convertDomqlModule(
-        domqlModule,
+      await convertFile(
+        srcPath,
+        tmpDirPath,
+        destFilePath,
         desiredFormat,
         options
       )
-      // Write file
-      if (convertedModuleStr.length > 0) {
-        const fh = await fs.promises.open(destFilePath, 'w')
-        await fh.writeFile(convertedModuleStr, 'utf8')
-        await fh.close()
-      }
       return 0
     }
-    // We're converting multiple files (in a directory)
+    // We're converting multiple files (in a directory).
     // Determine destDirPath & create it if needed
     if (!dest) dest = path.resolve(desiredFormat)
     let destDirPath
@@ -239,52 +310,23 @@ program
     } else {
       // dest exists and is not a directory.
       console.error(
-        `The destination ('${path.resolve(dest)}') must be a directory when` +
+        `The destination ('${path.resolve(dest)}') must be a directory when ` +
           `the source ('${srcPath}') is a directory`)
       return 1
     }
-    const origFiles = (await fs.promises.readdir(srcPath))
-      .filter(file => !IGNORED_FILES.includes(file))
-    // Bundle components
-    await esbuild.build({
-      entryPoints: origFiles.map(file =>
-        path.join(srcPath, file,'./index.js')),
-      bundle: true,
-      sourcemap: true,
-      target: 'node12',
-      format: 'cjs',
-      outdir: tmpDirPath
-    })
-    // Convert components
-    const componentDirs = await fs.promises.readdir(tmpDirPath)
-    for (const componentDir of componentDirs) {
-      const importDir = path.join(tmpDirPath, componentDir)
-      if ((await fs.promises.stat(importDir)).isDirectory()) {
-        // Import the module
-        const importPath = `${importDir}/index.js`
-        const domqlModule = await importDomqlModule(importPath)
-        // Create directory for component in dest dir
-        const destComponentDirPath = `${destDirPath}/${componentDir}`
-        await mkdirp(destComponentDirPath)
-        // Convert & append each exported domql object
-        const convertedStr = convertDomqlModule(
-          domqlModule,
-          desiredFormat,
-          { ...options, trailingNewLine: true }
-        )
-        // Write file
-        if (convertedStr.length > 0) {
-          const fh = await fs.promises
-            .open(`${destComponentDirPath}/index.js`, 'w')
-          await fh.writeFile(convertedStr, 'utf8')
-          await fh.close()
-        }
-      }
+    const sourceFileNames = (await fs.promises.readdir(srcPath))
+          .filter(file => !IGNORED_FILES.includes(file))
+    for (const file of sourceFileNames) {
+      const indexFilePath = path.join(srcPath, file, 'index.js')
+      await convertFile(
+        indexFilePath,
+        path.join(tmpDirPath, file),
+        path.join(destDirPath, file, 'index.js'),
+        desiredFormat,
+        options
+      )
     }
   })

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/cli",
-  "version": "2.11.127",
+  "version": "2.11.128",
   "description": "Fetch your Symbols configuration",
   "main": "bin/fetch.js",
   "author": "Symbols",
@@ -16,13 +16,18 @@
   },
   "dependencies": {
     "@symbo.ls/init": "latest",
+    "@symbo.ls/react": "latest",
     "@symbo.ls/socket": "latest",
     "chalk": "^5.0.0",
     "commander": "latest",
     "esbuild": "latest",
+    "globusa": "latest",
     "jsdom": "^21.1.0",
     "node-fetch": "^3.1.0",
     "v8-compile-cache": "^2.3.0"
   },
-  "gitHead": "997ec287b7bf139764e90bf460e5a6a67537bff6"
+  "gitHead": "a80004b78547611d5e422bb1fb4e6b1dd5358105",
+  "devDependencies": {
+    "webpack": "^5.88.2"
+  }
 }