feat: add packages marketplace

src/app.css

@@ -42,7 +42,7 @@
   --background: 0.115 0 89.876;
   --foreground: 0.9461 0 0;
 
-  --border: 0.264 0 89.876;
+  --border: 0.2256 0 0;
   --input: 0.244 0 89.876;
   --ring: 0.4493 0.1953 294.69;
 

src/lib/client/action/repositories/package.repository.ts

@@ -2,30 +2,24 @@ import type { ComponentManifest, SystemManifest } from '$lib/server/project/pack
 
 import { BaseRepository } from '../base.repository';
 import type {
-  AddComponentsActionInput,
-  AddSystemsActionInput,
-  ComponentPackageResult,
+  ComponentPkg,
   CreateComponentActionInput,
   CreateSystemActionInput,
   GetComponentsManifestsActionInput,
   GetSystemsManifestsActionInput,
-  SystemPackageResult,
+  InstallPackagesActionInput,
+  Package,
+  SearchInput,
+  SearchPackages,
+  SystemPkg,
 } from '../types';
 
 export class ProjectPackageRepository extends BaseRepository {
-  addComponents(input: AddComponentsActionInput): Promise<ComponentPackageResult[]> {
-    return this.run(`/actions/project/package?/add-components`, input);
-  }
-
-  addSystems(input: AddSystemsActionInput): Promise<SystemPackageResult[]> {
-    return this.run(`/actions/project/package?/add-systems`, input);
-  }
-
-  createComponent(input: CreateComponentActionInput): Promise<ComponentPackageResult> {
+  createComponent(input: CreateComponentActionInput): Promise<ComponentPkg> {
     return this.run(`/actions/project/package?/create-component`, input);
   }
 
-  createSystem(input: CreateSystemActionInput): Promise<SystemPackageResult> {
+  createSystem(input: CreateSystemActionInput): Promise<SystemPkg> {
     return this.run(`/actions/project/package?/create-system`, input);
   }
 
@@ -37,11 +31,19 @@ export class ProjectPackageRepository extends BaseRepository {
     return this.run(`/actions/project/package?/get-systems-manifests`, input);
   }
 
-  getComponents(): Promise<ComponentPackageResult[]> {
+  getComponents(): Promise<ComponentPkg[]> {
     return this.run(`/actions/project/package?/get-components`);
   }
 
-  getSystems(): Promise<SystemPackageResult[]> {
+  getSystems(): Promise<SystemPkg[]> {
     return this.run(`/actions/project/package?/get-systems`);
   }
+
+  installPackages(input: InstallPackagesActionInput): Promise<Package[]> {
+    return this.run(`/actions/project/package?/install-packages`, input);
+  }
+
+  searchPackages(input: SearchInput): Promise<SearchPackages> {
+    return this.run(`/actions/project/package?/search-packages`, input);
+  }
 }

src/lib/client/action/types/package.type.ts

@@ -1,18 +1,19 @@
-import type { AddComponentBody } from '$lib/server/actions/project/package/add-components.action';
-import type { AddSystemBody } from '$lib/server/actions/project/package/add-systems.action';
 import type { CreateComponentBody } from '$lib/server/actions/project/package/create-component.action';
 import type { CreateSystemBody } from '$lib/server/actions/project/package/create-system.action';
 import type { GetComponentManifestBody } from '$lib/server/actions/project/package/get-components-manifests.action';
 import type { GetSystemManifestBody } from '$lib/server/actions/project/package/get-systems-manifests.action';
+import type { InstallPackagesBody } from '$lib/server/actions/project/package/install-packages.action';
+import type { SearchPackagesBody } from '$lib/server/actions/project/package/search-packages.action';
+import type { PaginateResult, Package as ServerPackage } from '$lib/server/api';
 import type { ComponentPackage, SystemPackage } from '$lib/server/project/package/package.type';
 
-export type ComponentPackageResult = ComponentPackage;
+export type ComponentPkg = ComponentPackage;
 
-export type SystemPackageResult = SystemPackage;
+export type SystemPkg = SystemPackage;
 
-export type AddComponentsActionInput = AddComponentBody;
+export type Package = ComponentPackage | SystemPackage;
 
-export type AddSystemsActionInput = AddSystemBody;
+export type InstallPackagesActionInput = InstallPackagesBody;
 
 export type GetComponentsManifestsActionInput = GetComponentManifestBody;
 
@@ -21,3 +22,9 @@ export type GetSystemsManifestsActionInput = GetSystemManifestBody;
 export type CreateComponentActionInput = CreateComponentBody;
 
 export type CreateSystemActionInput = CreateSystemBody;
+
+export type SearchInput = SearchPackagesBody;
+
+export type ApiPackage = ServerPackage;
+
+export type SearchPackages = PaginateResult<ApiPackage>;

src/lib/client/ecs/component/component-manager.ts

@@ -1,5 +1,6 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
+import type { ComponentPkg } from '$lib/client/action';
 import { useProject } from '$lib/client/project';
 
 import { componentTransformer, componentsTransformer } from '../transformers';
@@ -37,13 +38,8 @@ export class ComponentManager {
     await dir.readdir(true);
   }
 
-  async import(names: [string, ...string[]]) {
-    const { actions, ecs, fs } = useProject();
-    await actions.package.addComponents({ componentNames: names });
-    await this.sync();
-    await ecs.components.sync();
-    const dir = await fs.getDirectory();
-    await dir.readdir(true);
+  add(component: ComponentPkg) {
+    this._add(componentTransformer(component));
   }
 
   async sync() {

src/lib/client/ecs/system/system-manager.ts

@@ -1,5 +1,6 @@
 import { type Unsubscriber, get, writable } from 'svelte/store';
 
+import type { SystemPkg } from '$lib/client/action';
 import { useProject } from '$lib/client/project';
 
 import { systemTransformer, systemsTransformer } from '../transformers';
@@ -36,13 +37,8 @@ export class SystemManager {
     await dir.readdir(true);
   }
 
-  async import(names: [string, ...string[]]) {
-    const { actions, ecs, fs } = useProject();
-    await actions.package.addSystems({ systemNames: names });
-    await this.sync();
-    await ecs.components.sync();
-    const dir = await fs.getDirectory();
-    await dir.readdir(true);
+  add(system: SystemPkg) {
+    this._add(systemTransformer(system));
   }
 
   async sync() {

src/lib/client/ecs/transformers.ts

@@ -1,25 +1,25 @@
+import type { ComponentPkg, SystemPkg } from '$lib/client/action';
 import type { Component, Library, Scene, System } from '$lib/client/ecs';
-import type { ComponentPackage, SystemPackage } from '$lib/server/project/package';
 
 import type { Save, SaveLibrary } from '@utils/types';
 
-export const componentTransformer = (component: ComponentPackage): Component => ({
+export const componentTransformer = (component: ComponentPkg): Component => ({
   id: component.manifest.id,
   name: component.manifest.name,
   path: component.save.path,
   params: component.manifest.params,
 });
 
-export const componentsTransformer = (components: ComponentPackage[]): Component[] =>
+export const componentsTransformer = (components: ComponentPkg[]): Component[] =>
   components.map(componentTransformer);
 
-export const systemTransformer = (system: SystemPackage): System => ({
+export const systemTransformer = (system: SystemPkg): System => ({
   id: system.manifest.id,
   name: system.manifest.name,
   path: system.save.path,
 });
 
-export const systemsTransformer = (systems: SystemPackage[]): System[] =>
+export const systemsTransformer = (systems: SystemPkg[]): System[] =>
   systems.map(systemTransformer);
 
 export const libraryTransformer = (lib: SaveLibrary): Library => ({

src/lib/client/project/package-handler.ts

@@ -1,73 +1,20 @@
 import type { Project } from '$lib/client/project';
-import type { ComponentManifest, SystemManifest } from '$lib/server/project/package';
 
 export class PackageHandler {
   private readonly _project: Project;
 
-  private _componentsManifests: Map<string, ComponentManifest> = new Map();
-  private _systemsManifests: Map<string, SystemManifest> = new Map();
-
   constructor(project: Project) {
     this._project = project;
   }
 
-  async init() {
-    // Not working but not used currently
-    // if (this._project.save.save.components.length > 0) {
-    //   this._componentsManifests = new Map<string, EditorComponentManifest>(
-    //     (
-    //       await this._project.actions.package.getComponentsManifests({
-    //         componentPaths: this._project.save.save.components.map((c) => c.path) as [
-    //           string,
-    //           ...string[],
-    //         ],
-    //       })
-    //     ).map((e, index) => [this._project.save.save.components[index].name, e]),
-    //   );
-    // }
-    // if (this._project.save.save.systems.length > 0) {
-    //   this._systemsManifests = new Map<string, EditorSystemManifest>(
-    //     (
-    //       await this._project.actions.package.getSystemsManifests({
-    //         systemPaths: this._project.save.save.systems.map((s) => s.path) as [
-    //           string,
-    //           ...string[],
-    //         ],
-    //       })
-    //     ).map((e, index) => [this._project.save.save.systems[index].name, e]),
-    //   );
-    // }
-  }
-
-  getComponentManifest(componentName: string): ComponentManifest | undefined {
-    return this._componentsManifests.get(componentName);
-  }
-
-  getSystemManifest(systemName: string): SystemManifest | undefined {
-    return this._systemsManifests.get(systemName);
-  }
-
-  async installComponent(name: string): Promise<void> {
-    const newComponent = (
-      await this._project.actions.package.addComponents({ componentNames: [name] })
-    )[0];
+  async installPackages(names: [string, ...string[]]): Promise<void> {
+    await this._project.actions.package.installPackages({ names });
 
-    this._project.save.save.components.push(newComponent.save);
-    this._componentsManifests.set(newComponent.save.name, newComponent.manifest);
-  }
-
-  async installSystem(name: string): Promise<void> {
-    const newSystem = (await this._project.actions.package.addSystems({ systemNames: [name] }))[0];
-
-    this._project.save.save.systems.push(newSystem.save);
-    this._systemsManifests.set(newSystem.save.name, newSystem.manifest);
-  }
-
-  addComponentManifest(componentName: string, component: ComponentManifest) {
-    this._componentsManifests.set(componentName, component);
-  }
+    // installPackages does not return dependencies, so it's required to sync to fetch all new components/systems
+    await this._project.ecs.components.sync();
+    await this._project.ecs.systems.sync();
 
-  addSystemManifest(systemName: string, system: SystemManifest) {
-    this._systemsManifests.set(systemName, system);
+    const dir = await this._project.fs.getDirectory();
+    await dir.readdir(true);
   }
 }

src/lib/client/project/project.ts

@@ -32,7 +32,6 @@ export class Project {
     await this.fs.init();
     await this.ecs.init();
     await this.save.init();
-    await this.packages.init();
     this._inited = true;
     return this;
   }

src/lib/components/Widget/ecs-tree/packages/package-tab.svelte

@@ -7,8 +7,8 @@
   } from '$lib/components/ui/dropdown-menu';
   import PackageRow from './package-row.svelte';
   import DialogCreatePackage from './dialog-create-package.svelte';
-  import DialogImportPackage from './dialog-import-package.svelte';
   import { Button } from '$lib/components/ui/button';
+  import { getMarketplaceContext } from '$lib/components/marketplace';
   import {
     InputGroup,
     InputGroupAddon,
@@ -45,6 +45,7 @@
   const namePlural = $derived(type === 'library' ? 'libraries' : type + 's');
 
   const ecsQuery = getContext<{ packages: string }>('ecsQuery');
+  const marketplace = getMarketplaceContext();
 
   let query = $state('');
 
@@ -65,20 +66,13 @@
   );
 
   let createOpen = $state(false);
-  let importOpen = $state(false);
 
   const handleCreate = async (name: string) => {
     if (!('create' in manager))
       throw new Error(`Cannot create in library - use the "Import Library" button instead.`);
     await manager.create(name);
   };
 
-  const handleImport = async (names: string) => {
-    if (!('import' in manager)) throw new Error(`Cannot import in library`);
-    // if (names.length === 0) throw new Error('No elements selected');
-    await manager.import([names] as [string, ...string[]]);
-  };
-
   const validate = (raw: string, suffix: string = nameCapitalized) => {
     if (!raw) return 'Name is required';
     const name = `${formatFrom.all(raw)[type === 'system' ? 'toCamel' : 'toPascal']()}${suffix}`;
@@ -94,7 +88,6 @@
   onConfirm={handleCreate}
   {validate}
 />
-<DialogImportPackage name={nameCapitalized} bind:open={importOpen} onConfirm={handleImport} />
 
 <div class="flex flex-col flex-1 min-h-0">
   <div class="flex items-center gap-1.5 px-2 py-1.5 border-b border-border shrink-0">
@@ -135,7 +128,7 @@
             Create
           </DropdownMenuItem>
         {/if}
-        <DropdownMenuItem onclick={() => (importOpen = true)}>
+        <DropdownMenuItem onclick={() => marketplace.open()}>
           <span class="i-ic-baseline-file-upload mr-2 text-sm"></span>
           Import
         </DropdownMenuItem>

src/lib/components/marketplace/index.ts

@@ -0,0 +1,3 @@
+export { default as MarketplaceDialog } from './marketplace-dialog.svelte';
+export { setMarketplaceContext, getMarketplaceContext } from './marketplace.context';
+export type { MarketplaceContext } from './marketplace.context';