@fgv/ts-res-browser 1.0.0

package/src/utils/tsResIntegration.ts

@@ -0,0 +1,467 @@
+import { Result, succeed, fail, FileTree } from '@fgv/ts-utils';
+import {
+  QualifierTypes,
+  Qualifiers,
+  ResourceTypes,
+  Resources,
+  Import,
+  Runtime,
+  ResourceJson,
+  Config
+} from '@fgv/ts-res';
+import { ImportedDirectory, ImportedFile } from './fileImport';
+import { BrowserFileTreeAccessors } from './browserFileTreeAccessors';
+
+/**
+ * Configuration for setting up ts-res system
+ */
+export interface TsResConfig {
+  qualifierDecls?: Qualifiers.IQualifierDecl[];
+  additionalQualifierTypes?: QualifierTypes.QualifierType[];
+  additionalResourceTypes?: ResourceTypes.ResourceType[];
+}
+
+/**
+ * Complete ts-res system setup
+ */
+export interface TsResSystem {
+  qualifierTypes: QualifierTypes.ReadOnlyQualifierTypeCollector;
+  qualifiers: Qualifiers.IReadOnlyQualifierCollector;
+  resourceTypes: ResourceTypes.ReadOnlyResourceTypeCollector;
+  resourceManager: Resources.ResourceManagerBuilder;
+  importManager: Import.ImportManager;
+  contextQualifierProvider: Runtime.ValidatingSimpleContextQualifierProvider;
+}
+
+/**
+ * Result of processing resources
+ */
+export interface ProcessedResources {
+  system: TsResSystem;
+  compiledCollection: ResourceJson.Compiled.ICompiledResourceCollection;
+  resolver: Runtime.ResourceResolver;
+  resourceCount: number;
+  summary: {
+    totalResources: number;
+    resourceIds: string[];
+    errorCount: number;
+    warnings: string[];
+  };
+}
+
+/**
+ * Get the default system configuration from ts-res library
+ */
+export function getDefaultSystemConfiguration(): Config.Model.ISystemConfiguration {
+  const defaultResult = Config.getPredefinedDeclaration('default');
+  if (defaultResult.isSuccess()) {
+    return defaultResult.value;
+  }
+
+  // Fallback configuration if predefined default is not available
+  return {
+    name: 'Browser Default Configuration',
+    description: 'Fallback default configuration for ts-res browser tool',
+    qualifierTypes: [
+      {
+        name: 'language',
+        systemType: 'language',
+        configuration: {
+          allowContextList: true
+        }
+      },
+      {
+        name: 'territory',
+        systemType: 'territory',
+        configuration: {
+          allowContextList: false
+        }
+      }
+    ],
+    qualifiers: [
+      {
+        name: 'currentTerritory',
+        token: 'geo',
+        typeName: 'territory',
+        defaultPriority: 850
+      },
+      {
+        name: 'language',
+        token: 'lang',
+        typeName: 'language',
+        defaultPriority: 800
+      }
+    ],
+    resourceTypes: [
+      {
+        name: 'json',
+        typeName: 'json'
+      }
+    ]
+  };
+}
+
+/**
+ * Default system configuration for ts-res browser tool
+ * Now uses the predefined default from ts-res library
+ */
+export const DEFAULT_SYSTEM_CONFIGURATION: Config.Model.ISystemConfiguration =
+  getDefaultSystemConfiguration();
+
+/**
+ * Get all available predefined configuration options
+ */
+export function getAvailablePredefinedConfigurations(): {
+  name: Config.PredefinedSystemConfiguration;
+  label: string;
+  description: string;
+}[] {
+  return [
+    {
+      name: 'default',
+      label: 'Default',
+      description: 'Default system configuration'
+    },
+    {
+      name: 'language-priority',
+      label: 'Language Priority',
+      description: 'Language priority system configuration'
+    },
+    {
+      name: 'territory-priority',
+      label: 'Territory Priority',
+      description: 'Territory priority system configuration'
+    },
+    {
+      name: 'extended-example',
+      label: 'Extended Example',
+      description: 'Extended example configuration with market, role, environment, and currency qualifiers'
+    }
+  ];
+}
+
+/**
+ * Get a predefined configuration by name
+ */
+export function getPredefinedConfiguration(
+  name: Config.PredefinedSystemConfiguration
+): Result<Config.Model.ISystemConfiguration> {
+  return Config.getPredefinedDeclaration(name);
+}
+
+/**
+ * Legacy default qualifier declarations for backward compatibility
+ */
+export const DEFAULT_QUALIFIER_DECLARATIONS: Qualifiers.IQualifierDecl[] = [
+  {
+    name: 'homeTerritory',
+    typeName: 'territory',
+    defaultPriority: 800,
+    token: 'home'
+  },
+  {
+    name: 'currentTerritory',
+    typeName: 'territory',
+    defaultPriority: 700
+  },
+  {
+    name: 'language',
+    typeName: 'language',
+    defaultPriority: 600,
+    token: 'lang'
+  },
+  {
+    name: 'role',
+    typeName: 'literal',
+    defaultPriority: 550
+  },
+  {
+    name: 'env',
+    typeName: 'literal',
+    defaultPriority: 500
+  },
+  {
+    name: 'platform',
+    typeName: 'literal',
+    defaultPriority: 450
+  },
+  {
+    name: 'density',
+    typeName: 'literal',
+    defaultPriority: 400
+  }
+];
+
+/**
+ * Creates a complete ts-res system setup using SystemConfiguration
+ */
+export function createTsResSystemFromConfig(
+  systemConfig?: Config.Model.ISystemConfiguration
+): Result<TsResSystem> {
+  const configToUse = systemConfig ?? DEFAULT_SYSTEM_CONFIGURATION;
+
+  return Config.SystemConfiguration.create(configToUse).onSuccess((systemConfiguration) => {
+    try {
+      // Set up resource manager
+      const resourceManager = Resources.ResourceManagerBuilder.create({
+        qualifiers: systemConfiguration.qualifiers,
+        resourceTypes: systemConfiguration.resourceTypes
+      }).orThrow();
+
+      // Set up import manager
+      const importManager = Import.ImportManager.create({
+        resources: resourceManager
+      }).orThrow();
+
+      // Set up context qualifier provider
+      const contextQualifierProvider = Runtime.ValidatingSimpleContextQualifierProvider.create({
+        qualifiers: systemConfiguration.qualifiers
+      }).orThrow();
+
+      return succeed({
+        qualifierTypes: systemConfiguration.qualifierTypes,
+        qualifiers: systemConfiguration.qualifiers,
+        resourceTypes: systemConfiguration.resourceTypes,
+        resourceManager,
+        importManager,
+        contextQualifierProvider
+      });
+    } catch (error) {
+      return fail(
+        `Failed to create ts-res system: ${error instanceof Error ? error.message : String(error)}`
+      );
+    }
+  });
+}
+
+/**
+ * Legacy function - creates a complete ts-res system setup using manual construction
+ * @deprecated Use createTsResSystemFromConfig instead
+ */
+export function createTsResSystem(config: TsResConfig = {}): Result<TsResSystem> {
+  try {
+    // Set up qualifier types
+    const defaultQualifierTypes = [
+      QualifierTypes.LanguageQualifierType.create().orThrow(),
+      QualifierTypes.TerritoryQualifierType.create().orThrow(),
+      QualifierTypes.LiteralQualifierType.create().orThrow()
+    ];
+
+    const qualifierTypes = QualifierTypes.QualifierTypeCollector.create({
+      qualifierTypes: [...defaultQualifierTypes, ...(config.additionalQualifierTypes ?? [])]
+    }).orThrow();
+
+    // Set up qualifiers
+    const qualifierDecls = config.qualifierDecls ?? DEFAULT_QUALIFIER_DECLARATIONS;
+    const qualifiers = Qualifiers.QualifierCollector.create({
+      qualifierTypes,
+      qualifiers: qualifierDecls
+    }).orThrow();
+
+    // Set up resource types
+    const defaultResourceTypes = [ResourceTypes.JsonResourceType.create().orThrow()];
+
+    const resourceTypes = ResourceTypes.ResourceTypeCollector.create({
+      resourceTypes: [...defaultResourceTypes, ...(config.additionalResourceTypes ?? [])]
+    }).orThrow();
+
+    // Set up resource manager
+    const resourceManager = Resources.ResourceManagerBuilder.create({
+      qualifiers,
+      resourceTypes
+    }).orThrow();
+
+    // Set up import manager
+    const importManager = Import.ImportManager.create({
+      resources: resourceManager
+    }).orThrow();
+
+    // Set up context qualifier provider
+    const contextQualifierProvider = Runtime.ValidatingSimpleContextQualifierProvider.create({
+      qualifiers
+    }).orThrow();
+
+    return succeed({
+      qualifierTypes,
+      qualifiers,
+      resourceTypes,
+      resourceManager,
+      importManager,
+      contextQualifierProvider
+    });
+  } catch (error) {
+    return fail(`Failed to create ts-res system: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+/**
+ * Processes imported files through ts-res ImportManager
+ */
+export function processImportedFiles(
+  files: ImportedFile[],
+  systemConfigOrSystem?: Config.Model.ISystemConfiguration | TsResSystem
+): Result<ProcessedResources> {
+  if (files.length === 0) {
+    return fail('No files provided for processing');
+  }
+
+  // Determine if we have a system or a config
+  const systemResult =
+    systemConfigOrSystem &&
+    'qualifierTypes' in systemConfigOrSystem &&
+    'resourceManager' in systemConfigOrSystem
+      ? succeed(systemConfigOrSystem as TsResSystem)
+      : createTsResSystemFromConfig(systemConfigOrSystem as Config.Model.ISystemConfiguration);
+
+  return systemResult.onSuccess((tsResSystem) => {
+    // Convert ImportedFile[] to IInMemoryFile[] format
+    const inMemoryFiles = files.map((file) => ({
+      path: file.path,
+      contents: file.content
+    }));
+
+    return FileTree.inMemory(inMemoryFiles)
+      .onSuccess((fileTree) => {
+        return Import.ImportManager.create({
+          fileTree,
+          resources: tsResSystem.resourceManager
+        });
+      })
+      .onSuccess<ProcessedResources>((importManager) => {
+        // Import each file using its filesystem path
+        for (const file of files) {
+          const importResult = importManager.importFromFileSystem(file.path);
+          if (importResult.isFailure()) {
+            return fail(`Failed to import file ${file.path}: ${importResult.message}`);
+          }
+        }
+        // Update the system with the new ImportManager
+        const updatedSystem = {
+          ...tsResSystem,
+          importManager
+        };
+        return finalizeProcessing(updatedSystem);
+      })
+      .withErrorFormat((message) => `processImportedFiles failed: ${message}`);
+  });
+}
+
+export function processImportedDirectory(
+  directory: ImportedDirectory,
+  systemConfigOrSystem?: Config.Model.ISystemConfiguration | TsResSystem
+): Result<ProcessedResources> {
+  // Determine if we have a system or a config
+  const systemResult =
+    systemConfigOrSystem &&
+    'qualifierTypes' in systemConfigOrSystem &&
+    'resourceManager' in systemConfigOrSystem
+      ? succeed(systemConfigOrSystem as TsResSystem)
+      : createTsResSystemFromConfig(systemConfigOrSystem as Config.Model.ISystemConfiguration);
+
+  return systemResult.onSuccess((tsResSystem) => {
+    // Create custom FileTree that preserves directory structure
+    return BrowserFileTreeAccessors.create(directory)
+      .onSuccess((accessors) => {
+        return FileTree.FileTree.create(accessors);
+      })
+      .onSuccess((fileTree) => {
+        return Import.ImportManager.create({
+          fileTree,
+          resources: tsResSystem.resourceManager
+        });
+      })
+      .onSuccess<ProcessedResources>((importManager) => {
+        // Import from root path since we set the imported directory as the FileTree root
+        // The importer will traverse the tree structure and extract qualifiers from directory names
+        const importResult = importManager.importFromFileSystem('/');
+        if (importResult.isFailure()) {
+          return fail(`Failed to import directory ${directory.name}: ${importResult.message}`);
+        }
+
+        // Update the system with the new ImportManager
+        const updatedSystem = {
+          ...tsResSystem,
+          importManager
+        };
+        return finalizeProcessing(updatedSystem);
+      })
+      .withErrorFormat((message) => `processImportedDirectory failed: ${message}`);
+  });
+}
+
+/**
+ * Finalizes processing and creates compiled resources
+ */
+function finalizeProcessing(system: TsResSystem): Result<ProcessedResources> {
+  console.log('=== FINALIZING PROCESSING ===');
+  console.log('Resource manager resources:', system.resourceManager.resources.size);
+  console.log('Resource manager resource keys:', Array.from(system.resourceManager.resources.keys()));
+
+  return system.resourceManager
+    .getCompiledResourceCollection({ includeMetadata: true })
+    .onSuccess((compiledCollection: ResourceJson.Compiled.ICompiledResourceCollection) => {
+      console.log('=== COMPILED COLLECTION CREATED ===');
+      console.log('Compiled collection data:', compiledCollection);
+      console.log('Decisions length:', compiledCollection.decisions?.length);
+      console.log('ConditionSets length:', compiledCollection.conditionSets?.length);
+      console.log('Conditions length:', compiledCollection.conditions?.length);
+      console.log('Resources length:', compiledCollection.resources?.length);
+
+      return Runtime.ResourceResolver.create({
+        resourceManager: system.resourceManager,
+        qualifierTypes: system.qualifierTypes,
+        contextQualifierProvider: system.contextQualifierProvider
+      }).onSuccess((resolver) => {
+        // Create summary
+        const resourceIds = Array.from(system.resourceManager.resources.keys());
+        const summary = {
+          totalResources: resourceIds.length,
+          resourceIds,
+          errorCount: 0, // TODO: Track errors during processing
+          warnings: [] // TODO: Collect warnings during processing
+        };
+
+        console.log('=== FINALIZATION COMPLETE ===');
+        console.log('Resource count:', resourceIds.length);
+        console.log('Resource IDs:', resourceIds);
+
+        return succeed({
+          system,
+          compiledCollection,
+          resolver,
+          resourceCount: resourceIds.length,
+          summary
+        });
+      });
+    })
+    .withErrorFormat((message: string) => `Failed to finalize processing: ${message}`);
+}
+
+/**
+ * Creates a simple context for resource resolution
+ */
+export function createSimpleContext(
+  contextValues: Record<string, string>,
+  system: TsResSystem
+): Result<Runtime.ValidatingSimpleContextQualifierProvider> {
+  return Runtime.ValidatingSimpleContextQualifierProvider.create({
+    qualifiers: system.qualifiers
+  })
+    .onSuccess((provider): Result<Runtime.ValidatingSimpleContextQualifierProvider> => {
+      // Set context values
+      for (const [qualifierName, value] of Object.entries(contextValues)) {
+        try {
+          provider.set(qualifierName as any, value as any);
+        } catch (error) {
+          return fail(
+            `Failed to set context value ${qualifierName}=${value}: ${
+              error instanceof Error ? error.message : String(error)
+            }`
+          );
+        }
+      }
+
+      return succeed(provider);
+    })
+    .withErrorFormat((message) => `Failed to create context: ${message}`);
+}

package/tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './public/index.html',
+    './src/components/**/*.{js,jsx,ts,tsx}',
+    './src/hooks/**/*.{js,jsx,ts,tsx}',
+    './src/utils/**/*.{js,jsx,ts,tsx}'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Custom colors for the ts-res browser
+        'res-primary': '#2563eb',
+        'res-secondary': '#1e40af',
+        'res-accent': '#3b82f6'
+      }
+    }
+  },
+  plugins: []
+};

package/test-data/README.md

@@ -0,0 +1,184 @@
+# TS-RES Test Data
+
+This directory contains test data for the ts-res-browser tool that demonstrates all ts-res file formats and naming conventions.
+
+## Structure
+
+The test data demonstrates three different JSON file formats supported by ts-res:
+
+### 1. Simple JSON Files (Auto-converted to Resource Candidates)
+Individual JSON files with plain resource values that the ImportManager automatically converts to resource candidates.
+
+### 2. Resource Collection Format (`IResourceCollectionDecl`)
+JSON files that explicitly define multiple resources with their candidates and conditions.
+
+### 3. Resource Tree Format (`IResourceTreeRootDecl`)
+JSON files that define hierarchical resource structures with nested organization.
+
+## Directory Structure
+
+```
+src/resources/
+├── strings.json                              # Resource Collection (common, errors resources)
+├── app.json                                  # Resource Tree (app.config, app.ui.dashboard, app.ui.icons.* resources)
+├── strings/
+│   ├── common.json                           # Simple JSON → "common" resource
+│   ├── common.language=es.json               # Simple JSON → "common" resource (Spanish)
+│   ├── common.language=fr.json               # Simple JSON → "common" resource (French)
+│   ├── language=en-US.json                   # Simple JSON → "language" resource
+│   ├── dashboard.json                        # Simple JSON → "dashboard" resource
+│   ├── dashboard.role=user.json              # Simple JSON → "dashboard" resource (user)
+│   ├── dashboard.role=admin.json             # Simple JSON → "dashboard" resource (admin)
+│   ├── dashboard.home=CA,language=fr.json    # Simple JSON → "dashboard" resource (CA+FR)
+│   └── errors.json                           # Simple JSON → "errors" resource
+├── config/
+│   ├── app.json                              # Simple JSON → "app" resource
+│   ├── app.env=development.json              # Simple JSON → "app" resource (dev)
+│   └── app.platform=mobile.json             # Simple JSON → "app" resource (mobile)
+├── images/
+│   ├── home.json                             # Simple JSON → "home" resource
+│   ├── home.density=hdpi.json                # Simple JSON → "home" resource (hdpi)
+│   ├── user.json                             # Simple JSON → "user" resource
+│   ├── user.density=hdpi.json                # Simple JSON → "user" resource (hdpi)
+│   ├── settings.json                         # Simple JSON → "settings" resource
+│   ├── settings.density=hdpi.json            # Simple JSON → "settings" resource (hdpi)
+│   ├── logout.json                           # Simple JSON → "logout" resource
+│   └── logout.density=hdpi.json              # Simple JSON → "logout" resource (hdpi)
+├── en-US/
+│   └── common.json                           # Simple JSON → "common" resource (en-US context)
+├── home=CA/
+│   └── common.json                           # Simple JSON → "common" resource (CA context)
+└── import-config.json                        # TS-RES configuration
+```
+
+## Format Examples
+
+### Simple JSON Format
+```json
+{
+  "welcome": "Welcome to the application",
+  "hello": "Hello",
+  "goodbye": "Goodbye"
+}
+```
+*Auto-converted to resource candidate by ImportManager*
+
+### Resource Collection Format
+```json
+{
+  "resources": [
+    {
+      "id": "common",
+      "resourceTypeName": "json", 
+      "candidates": [
+        {
+          "json": {
+            "welcome": "Welcome to the application",
+            "hello": "Hello"
+          }
+        },
+        {
+          "json": {
+            "welcome": "Bienvenido a la aplicación", 
+            "hello": "Hola"
+          },
+          "conditions": {
+            "language": "es"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+### Resource Tree Format
+```json
+{
+  "context": {
+    "baseId": "app"
+  },
+  "resources": {
+    "config": {
+      "resourceTypeName": "json",
+      "candidates": [
+        {
+          "json": {
+            "app_name": "Sample Application",
+            "version": "1.0.0"
+          }
+        }
+      ]
+    }
+  },
+  "children": {
+    "ui": {
+      "resources": {
+        "dashboard": {
+          "resourceTypeName": "json",
+          "candidates": [
+            {
+              "json": {
+                "title": "Dashboard",
+                "overview": "Overview"
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+}
+```
+
+## Resources Generated
+
+The test data creates these resources:
+
+### From Simple JSON Files
+- `common` (4 candidates: base, Spanish, French, directory-based)
+- `dashboard` (4 candidates: base, user, admin, CA+French)
+- `errors` (1 candidate: base)
+- `language` (1 candidate: en-US)
+- `app` (3 candidates: base, dev, mobile)
+- `home`, `user`, `settings`, `logout` (2 candidates each: standard, hdpi)
+
+### From Resource Collection (strings.json)
+- `common` (3 candidates: base, Spanish, French)
+- `errors` (1 candidate: base)
+
+### From Resource Tree (app.json)
+- `app.config` (3 candidates: base, dev, mobile)
+- `app.ui.dashboard` (3 candidates: base, user, admin)
+- `app.ui.icons.home` (2 candidates: standard, hdpi)
+- `app.ui.icons.user` (2 candidates: standard, hdpi)
+
+## Qualifiers Demonstrated
+
+- **language**: `es`, `fr`, `en-US` (language codes)
+- **homeTerritory**: `CA` (with `home=` token, optional)
+- **role**: `user`, `admin` (literal values)
+- **env**: `development` (literal values)
+- **platform**: `mobile` (literal values)
+- **density**: `hdpi` (literal values)
+
+## Import Configuration
+
+The `import-config.json` file defines:
+- **Qualifier Types**: language, territory, literal
+- **Qualifiers**: language, homeTerritory, currentTerritory, role, env, platform, density
+- **Resource Types**: json
+
+## Usage
+
+This test data demonstrates:
+
+1. **Simple JSON Import**: Basic file-to-resource conversion
+2. **Resource Collections**: Multiple resources with candidates in one file
+3. **Resource Trees**: Hierarchical organization with nested resources
+4. **Qualifier Parsing**: File-based and explicit condition formats
+5. **Multi-condition Resources**: Complex qualifier combinations
+6. **Directory-based Organization**: Conditional directories
+7. **Mixed Formats**: Using different formats together
+
+The data follows ts-res patterns and provides comprehensive examples for testing all browser tool features.