auto install & import asset-packs for editor scenes

packages/@dcl/inspector/package.json

@@ -2,7 +2,7 @@
   "name": "@dcl/inspector",
   "version": "0.1.0",
   "dependencies": {
-    "@dcl/asset-packs": "^1.12.2",
+    "@dcl/asset-packs": "^1.12.3-20240301140405.commit-8aef784",
     "ts-deepmerge": "^7.0.0"
   },
   "devDependencies": {

packages/@dcl/sdk-commands/src/commands/build/index.ts

@@ -1,7 +1,14 @@
 import path from 'path'
 import { CliComponents } from '../../components'
 import { declareArgs } from '../../logic/args'
-import { installDependencies, needsDependencies, SceneProject, WearableProject } from '../../logic/project-validations'
+import {
+  installAssetPack,
+  installDependencies,
+  isEditorScene,
+  needsDependencies,
+  SceneProject,
+  WearableProject
+} from '../../logic/project-validations'
 import { getBaseCoords } from '../../logic/scene-validations'
 import { b64HashingFunction } from '../../logic/project-files'
 import { bundleProject } from '../../logic/bundle'
@@ -57,10 +64,16 @@
 }
 
 export async function buildScene(options: Options, project: SceneProject | WearableProject) {
-  const shouldInstallDeps = await needsDependencies(options.components, project.workingDirectory)
+  const canInstall = !options.args['--skip-install']
 
-  if (shouldInstallDeps && !options.args['--skip-install']) {
-    await installDependencies(options.components, project.workingDirectory)
+  if (canInstall) {
+    if (await needsDependencies(options.components, project.workingDirectory)) {
+      await installDependencies(options.components, project.workingDirectory)
+    }
+
+    if (await isEditorScene(options.components, project.workingDirectory)) {
+      await installAssetPack(options.components, project.workingDirectory)
+    }
   }
 
   const watch = !!options.args['--watch']

packages/@dcl/sdk-commands/src/logic/bundle.ts

@@ -13,6 +13,7 @@
 import { printProgressInfo, printProgressStep, printWarning } from './beautiful-logs'
 import { CliError } from './error'
 import { getAllComposites } from './composite'
+import { isEditorScene } from './project-validations'
 
 export type BundleComponents = Pick<CliComponents, 'logger' | 'fs'>
 
@@ -47,7 +48,7 @@
  * @returns the Typescript code
  */
 
-function getEntrypointCode(entrypointPath: string, forceCustomExport: boolean) {
+function getEntrypointCode(entrypointPath: string, forceCustomExport: boolean, isEditorScene: boolean = false) {
   const unixEntrypointPath = entrypointPath.replace(/(\\)/g, '/')
   if (forceCustomExport) return `;"use strict";export * from '${unixEntrypointPath}'`
 
@@ -59,6 +60,16 @@
 import { compositeProvider } from '@dcl/sdk/composite-provider'
 import { compositeFromLoader } from '~sdk/all-composites'
 
+${
+  isEditorScene &&
+  `
+import { initAssetPacks } from '@dcl/asset-packs/dist/scene-entrypoint'
+initAssetPacks(engine)
+
+// TODO: do we need to do this on runtime ?
+// I think we have that information at build-time and we avoid to do evaluate this on the worker.
+// Read composite.json or main.crdt => If that file has a NetowrkEntity import '@dcl/@sdk/network'
+
 // conditionally load networking code if the NetworkEntity component is being used...
 for (const path in compositeFromLoader) {
   const composite = compositeProvider.getCompositeOrNull(path)
@@ -69,6 +80,7 @@
       import('@dcl/sdk/network')
     }
   }
+}`
 }
 
 if ((entrypoint as any).main !== undefined) {
@@ -136,7 +148,7 @@
 
 export async function bundleSingleProject(components: BundleComponents, options: SingleProjectOptions) {
   printProgressStep(components.logger, `Bundling file ${colors.bold(options.entrypoint)}`, 1, MAX_STEP)
-
+  const editorScene = await isEditorScene(components, options.workingDirectory)
   const context = await esbuild.context({
     bundle: true,
     platform: 'browser',
@@ -175,7 +187,7 @@
     },
     plugins: [compositeLoader(components, options)],
     stdin: {
-      contents: getEntrypointCode(options.entrypoint, options.customEntryPoint),
+      contents: getEntrypointCode(options.entrypoint, options.customEntryPoint, editorScene),
       resolveDir: path.dirname(options.entrypoint),
       sourcefile: path.basename(options.entrypoint) + '.entry-point.ts',
       loader: 'ts'

packages/@dcl/sdk-commands/src/logic/config.ts

@@ -2,6 +2,7 @@
 import { CliComponents } from '../components'
 import { readStringConfig } from '../components/config'
 import { readJson } from './fs'
+import { getPackageJson } from './project-files'
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { version: sdkCommandsVersion } = require('../../package.json')
@@ -13,6 +14,33 @@
   return sdkCommandsVersion
 }
 
+/**
+ * Returns the installed version of a certain package that lives inside another package in the current working directory.
+ * Returns undefined if the package is not installed.
+ */
+export async function getInstalledPackageVersionInsidePackage(
+  components: Pick<CliComponents, 'fs'>,
+  packageName: string,
+  packageRootName: string,
+  workingDirectory: string
+) {
+  try {
+    const packagePath = path.dirname(
+      require.resolve(`${packageRootName}/package.json`, {
+        paths: [workingDirectory]
+      })
+    )
+    const packageJson = await getPackageJson(components, packagePath)
+
+    const version =
+      (packageJson.dependencies && packageJson.dependencies[packageName]) ||
+      (packageJson.devDependencies && packageJson.devDependencies[packageName])
+
+    return version ?? undefined
+  } catch (e) {
+    return 'unknown'
+  }
+}
 /**
  * Returns the installed version of a certain package in the current working directory.
  * Returns "unknown" if the package is not installed.
@@ -23,12 +51,12 @@
   workingDirectory: string
 ) {
   try {
-    const sdkPath = path.dirname(
+    const packagePath = path.dirname(
       require.resolve(`${packageName}/package.json`, {
         paths: [workingDirectory]
       })
     )
-    const packageJson = await readJson<{ version: string }>(components, path.resolve(sdkPath, 'package.json'))
+    const packageJson = await readJson<{ version: string }>(components, path.resolve(packagePath, 'package.json'))
 
     return packageJson.version ?? /* istanbul ignore next */ 'unknown'
   } catch (e) {

packages/@dcl/sdk-commands/src/logic/project-validations.ts

@@ -2,10 +2,10 @@
 import path from 'path'
 import { CliComponents } from '../components'
 import { colors } from '../components/log'
-import { printProgressInfo } from './beautiful-logs'
+import { printProgressInfo, printSuccess, printWarning } from './beautiful-logs'
 import { CliError } from './error'
 import { getSceneFilePath, getValidSceneJson } from './scene-validations'
-import { getInstalledPackageVersion } from './config'
+import { getInstalledPackageVersion, getInstalledPackageVersionInsidePackage } from './config'
 import { getSmartWearableFile, getValidWearableJson } from './portable-experience-sw-validations'
 import { getPackageJson } from './project-files'
 
@@ -74,6 +74,29 @@
   printProgressInfo(components.logger, colors.white('✅ Installing dependencies...'))
 }
 
+/*
+ * Runs "npm install" for desired project
+ */
+export async function installAssetPack(
+  components: Pick<CliComponents, 'logger' | 'spawner' | 'fs'>,
+  workingDirectory: string
+): Promise<void> {
+  const assetPack = '@dcl/asset-packs' as const
+  let assetPackVersion: string = ''
+  try {
+    assetPackVersion = await getInstalledPackageVersionInsidePackage(
+      components,
+      assetPack,
+      '@dcl/inspector',
+      workingDirectory
+    )
+    await components.spawner.exec(workingDirectory, npmBin, ['install', `${assetPack}@${assetPackVersion}`, '-D'])
+    printSuccess(components.logger, `${assetPack}@${assetPackVersion} installed`, '')
+  } catch (e: any) {
+    printWarning(components.logger, `Failed to install ${assetPack}@${assetPackVersion}' \n ${e.message}`)
+  }
+}
+
 /**
  * Run NPM commands
  */
@@ -106,15 +129,25 @@
 export async function startValidations(components: Pick<CliComponents, 'spawner' | 'fs' | 'logger'>, cwd: string) {
   try {
     const sdkVersion = await getInstalledPackageVersion(components, '@dcl/sdk', cwd)
-    // Ignore relative or s3 versions
-    if (sdkVersion.startsWith('https://') || sdkVersion.startsWith('file://') || sdkVersion === '7.0.0') return
     const packageJsonPath = path.resolve(cwd, 'package.json')
 
     if (!(await components.fs.fileExists(packageJsonPath))) {
       return
     }
-
     const packageJson = await getPackageJson(components, cwd)
+
+    // Ignore relative or s3 versions
+    const sdkPackageVersion =
+      (packageJson.dependencies && packageJson.dependencies['@dcl/sdk']) ||
+      (packageJson.devDependencies && packageJson.devDependencies['@dcl/sdk'])
+    if (
+      sdkPackageVersion?.startsWith('https://') ||
+      sdkPackageVersion?.startsWith('file://') ||
+      sdkPackageVersion === '7.0.0'
+    ) {
+      return
+    }
+
     if (
       packageJson.dependencies &&
       (packageJson.dependencies['@dcl/js-runtime'] || packageJson.dependencies['@dcl/sdk'])
@@ -128,7 +161,12 @@
       packageJson.devDependencies['@dcl/js-runtime'] = sdkVersion
     }
     await components.fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2), 'utf-8')
-  } catch (e) {
-    components.logger.error('Failed to run scene validations')
+  } catch (e: any) {
+    components.logger.error('Failed to run scene validations', e.message)
   }
 }
+
+// If there is a main.crdt file, its an editor scene. We need asset-packs package.
+export function isEditorScene(components: Pick<CliComponents, 'fs'>, workingDirectory: string) {
+  return components.fs.fileExists(path.resolve(workingDirectory, 'main.crdt'))
+}

test/sdk-commands/commands/build/index.spec.ts

@@ -55,7 +55,7 @@ describe('build command', () => {
     try {
       await build.main({ args: { _: [], '--skip-install': true }, components })
     } catch (_) {}
-    expect(needsDependenciesSpy).toBeCalledWith(components, process.cwd())
+    expect(needsDependenciesSpy).not.toBeCalled()
     expect(installDependenciesSpy).not.toBeCalled()
   })