@miurajs/miura-data-flow 0.0.1

package/src/global-state.ts

@@ -0,0 +1,158 @@
+import { Store, StoreState, StoreActions } from './store';
+import { debugLog } from '@miura/miura-debugger';
+
+/**
+ * Global state interface
+ */
+export interface GlobalState extends StoreState {
+  // Add common global properties
+  user?: {
+    id: string;
+    name: string;
+    email: string;
+  };
+  theme?: 'light' | 'dark';
+  language?: string;
+  notifications?: Array<{
+    id: string;
+    message: string;
+    type: 'info' | 'success' | 'warning' | 'error';
+  }>;
+}
+
+/**
+ * Global State Manager
+ * Manages application-wide state using the Store system
+ */
+export class GlobalStateManager {
+  private static instance: GlobalStateManager;
+  private store: Store<GlobalState>;
+  private componentSubscriptions = new Map<string, Set<string>>();
+
+  private constructor() {
+    this.store = new Store<GlobalState>({
+      theme: 'light',
+      language: 'en',
+      notifications: []
+    });
+  }
+
+  static getInstance(): GlobalStateManager {
+    if (!GlobalStateManager.instance) {
+      GlobalStateManager.instance = new GlobalStateManager();
+    }
+    return GlobalStateManager.instance;
+  }
+
+  /**
+   * Get the global store
+   */
+  getStore(): Store<GlobalState> {
+    return this.store;
+  }
+
+  /**
+   * Get a global property
+   */
+  get<K extends keyof GlobalState>(key: K): GlobalState[K] {
+    return this.store.get(key);
+  }
+
+  /**
+   * Set a global property
+   */
+  set<K extends keyof GlobalState>(key: K, value: GlobalState[K]): void {
+    this.store.setState({ [key]: value } as Partial<GlobalState>);
+  }
+
+  /**
+   * Subscribe to global state changes
+   */
+  subscribe(
+    componentId: string,
+    properties: (keyof GlobalState)[],
+    callback: (state: GlobalState, prevState: GlobalState) => void
+  ): () => void {
+    // Track component subscriptions
+    if (!this.componentSubscriptions.has(componentId)) {
+      this.componentSubscriptions.set(componentId, new Set());
+    }
+    this.componentSubscriptions.get(componentId)!.add(properties.join(','));
+
+    debugLog('element', 'Subscribed to global state', { componentId, properties });
+
+    // Subscribe to store with selector
+    return this.store.subscribe(
+      callback,
+      (state) => {
+        const selected: Partial<GlobalState> = {};
+        properties.forEach(prop => {
+          selected[prop] = state[prop];
+        });
+        return selected;
+      }
+    );
+  }
+
+  /**
+   * Subscribe to a specific global property
+   */
+  subscribeTo<K extends keyof GlobalState>(
+    componentId: string,
+    key: K,
+    callback: (value: GlobalState[K], prevValue: GlobalState[K]) => void
+  ): () => void {
+    return this.subscribe(componentId, [key], (state, prevState) => {
+      if (state[key] !== prevState[key]) {
+        callback(state[key], prevState[key]);
+      }
+    });
+  }
+
+  /**
+   * Unsubscribe component from all global state
+   */
+  unsubscribe(componentId: string): void {
+    this.componentSubscriptions.delete(componentId);
+    debugLog('element', 'Unsubscribed from global state', { componentId });
+  }
+
+  /**
+   * Define global actions
+   */
+  defineActions(actions: StoreActions<GlobalState>): void {
+    this.store.defineActions(actions);
+  }
+
+  /**
+   * Dispatch a global action
+   */
+  async dispatch(action: string, ...args: unknown[]): Promise<void> {
+    await this.store.dispatch(action, ...args);
+  }
+
+  /**
+   * Add middleware to global store
+   */
+  use(middleware: any): void {
+    this.store.use(middleware);
+  }
+
+  /**
+   * Get debug information
+   */
+  getDebugInfo() {
+    return {
+      ...this.store.getDebugInfo(),
+      componentSubscriptions: Object.fromEntries(
+        Array.from(this.componentSubscriptions.entries()).map(([id, props]) => [
+          id, 
+          Array.from(props)
+        ])
+      )
+    };
+  }
+}
+
+// Export singleton instance
+export const globalState = GlobalStateManager.getInstance(); 

package/src/middleware.ts

@@ -0,0 +1,162 @@
+import { StoreMiddleware, StoreState } from './store';
+
+/**
+ * Logger middleware for debugging
+ */
+export function createLoggerMiddleware(): StoreMiddleware {
+  return {
+    name: 'logger',
+    before: (action, args, state) => {
+      console.group(`🔄 Action: ${action}`);
+      console.log('Arguments:', args);
+      console.log('Current State:', state);
+    },
+    after: (action, args, state, result) => {
+      console.log('New State:', state);
+      console.log('Result:', result);
+      console.groupEnd();
+    },
+    error: (action, args, error) => {
+      console.error(`❌ Action Error: ${action}`, error);
+      console.groupEnd();
+    }
+  };
+}
+
+/**
+ * Persistence middleware for localStorage
+ */
+export function createPersistenceMiddleware(keys: string[], storageKey = 'miura-store'): StoreMiddleware {
+  return {
+    name: 'persistence',
+    after: (action, args, state) => {
+      // Persist relevant keys after every action
+      try {
+        const toPersist: Partial<StoreState> = {};
+        keys.forEach(key => {
+          if (key in state) {
+            toPersist[key] = state[key];
+          }
+        });
+        localStorage.setItem(storageKey, JSON.stringify(toPersist));
+      } catch (error) {
+        console.warn('Failed to persist state:', error);
+      }
+    }
+  };
+}
+
+/**
+ * Loads persisted state from localStorage.
+ * Call this to get initial state when creating a store:
+ *   const persisted = loadPersistedState(['user', 'theme']);
+ *   const store = new Store({ ...defaults, ...persisted });
+ */
+export function loadPersistedState(keys: string[], storageKey = 'miura-store'): Partial<StoreState> {
+  try {
+    const persisted = localStorage.getItem(storageKey);
+    if (persisted) {
+      const parsed = JSON.parse(persisted);
+      const result: Partial<StoreState> = {};
+      keys.forEach(key => {
+        if (key in parsed) {
+          result[key] = parsed[key];
+        }
+      });
+      return result;
+    }
+  } catch (error) {
+    console.warn('Failed to load persisted state:', error);
+  }
+  return {};
+}
+
+/**
+ * API middleware for automatic API calls
+ */
+export function createApiMiddleware(apiConfig: {
+  baseURL: string;
+  headers?: Record<string, string>;
+  timeout?: number;
+}): StoreMiddleware & { fetch: (endpoint: string, options?: { method?: string; data?: unknown }) => Promise<unknown> } {
+  const apiFetch = async (endpoint: string, options?: { method?: string; data?: unknown }): Promise<unknown> => {
+    const method = options?.method || 'GET';
+    const data = options?.data;
+
+    const response = await fetch(`${apiConfig.baseURL}${endpoint}`, {
+      method,
+      headers: {
+        'Content-Type': 'application/json',
+        ...apiConfig.headers
+      },
+      body: data ? JSON.stringify(data) : undefined,
+      signal: apiConfig.timeout ? AbortSignal.timeout(apiConfig.timeout) : undefined
+    });
+
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status} ${response.statusText}`);
+    }
+
+    return response.json();
+  };
+
+  return {
+    name: 'api',
+    fetch: apiFetch
+  };
+}
+
+/**
+ * Cache middleware for API responses
+ */
+export function createCacheMiddleware(ttl = 5 * 60 * 1000): StoreMiddleware {
+  const cache = new Map<string, { data: unknown; timestamp: number }>();
+  
+  return {
+    name: 'cache',
+    before: async (action, args, state) => {
+      if (action.startsWith('api_')) {
+        const cacheKey = `${action}_${JSON.stringify(args)}`;
+        const cached = cache.get(cacheKey);
+        
+        if (cached && Date.now() - cached.timestamp < ttl) {
+          // Return cached data
+          const endpoint = action.replace('api_', '');
+          (state as any)[`${endpoint}_data`] = cached.data;
+          (state as any)[`${endpoint}_loading`] = false;
+          (state as any)[`${endpoint}_error`] = null;
+          return;
+        }
+      }
+    },
+    after: (action, args, state) => {
+      if (action.startsWith('api_')) {
+        const cacheKey = `${action}_${JSON.stringify(args)}`;
+        const endpoint = action.replace('api_', '');
+        const data = (state as any)[`${endpoint}_data`];
+        
+        if (data) {
+          cache.set(cacheKey, { data, timestamp: Date.now() });
+        }
+      }
+    }
+  };
+}
+
+/**
+ * DevTools middleware for Redux DevTools integration
+ */
+export function createDevToolsMiddleware(storeName = 'miuraStore'): StoreMiddleware {
+  return {
+    name: 'devtools',
+    after: (action, args, state) => {
+      if (typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION__) {
+        (window as any).__REDUX_DEVTOOLS_EXTENSION__.send(
+          { type: action, payload: args },
+          state,
+          storeName
+        );
+      }
+    }
+  };
+} 

package/src/miura-data-flow.ts

@@ -0,0 +1,114 @@
+// miuraDataFlow main entry point
+
+// Core exports
+export { Store, type StoreState, type StoreActions, type StoreMiddleware } from './store';
+export { GlobalStateManager, globalState, type GlobalState } from './global-state';
+
+// Middleware exports
+export {
+  createLoggerMiddleware,
+  createPersistenceMiddleware,
+  loadPersistedState,
+  createApiMiddleware,
+  createCacheMiddleware,
+  createDevToolsMiddleware
+} from './middleware';
+
+// Provider exports
+export * from './providers';
+
+// Import for default export
+import { Store } from './store';
+import { GlobalStateManager, globalState } from './global-state';
+import {
+  createLoggerMiddleware,
+  createPersistenceMiddleware,
+  loadPersistedState,
+  createApiMiddleware,
+  createCacheMiddleware,
+  createDevToolsMiddleware
+} from './middleware';
+import * as providers from './providers';
+
+/**
+ * miura Data Flow - Modern State Management
+ * 
+ * Features:
+ * - Reactive state management with subscriptions
+ * - Middleware system for logging, persistence, API calls
+ * - Global state management
+ * - Built-in caching and API integration
+ * - Redux DevTools support
+ * - TypeScript support
+ * - Extensible provider system for connecting to any data source
+ * 
+ * Usage:
+ * 
+ * // Create a store
+ * const store = new Store({ count: 0, user: null });
+ * 
+ * // Define actions
+ * store.defineActions({
+ *   increment: (state) => ({ count: state.count + 1 }),
+ *   setUser: (state, user) => ({ user })
+ * });
+ * 
+ * // Add middleware
+ * store.use(createLoggerMiddleware());
+ * store.use(createPersistenceMiddleware(['user']));
+ * 
+ * // Subscribe to changes
+ * const unsubscribe = store.subscribe((state, prevState) => {
+ *   console.log('State changed:', state);
+ * });
+ * 
+ * // Dispatch actions
+ * await store.dispatch('increment');
+ * await store.dispatch('setUser', { id: '1', name: 'John' });
+ * 
+ * // Using Data Providers
+ * // 1. Register a provider factory (e.g., in your app's entry point)
+ * providers.registerProvider('restApi', new providers.RestProviderFactory());
+ * 
+ * // 2. Create an instance of the provider
+ * const apiProvider = providers.createProvider('restApi', { baseUrl: 'https://my-api.com' });
+ * 
+ * // 3. Use the provider, for example in custom middleware
+ * // const user = await apiProvider.get('123', { endpoint: 'users' });
+ * 
+ * // Global state
+ * globalState.set('theme', 'dark');
+ * globalState.subscribeTo('my-component', 'theme', (theme) => {
+ *   console.log('Theme changed:', theme);
+ * });
+ */
+
+// Default export for convenience
+export default {
+  Store,
+  GlobalStateManager,
+  globalState,
+  middleware: {
+    createLoggerMiddleware,
+    createPersistenceMiddleware,
+    loadPersistedState,
+    createApiMiddleware,
+    createCacheMiddleware,
+    createDevToolsMiddleware
+  },
+  providers: {
+    registerProvider: providers.registerProvider,
+    createProvider: providers.createProvider,
+    factories: {
+      RestProviderFactory: providers.RestProviderFactory,
+      GraphQLProviderFactory: providers.GraphQLProviderFactory,
+      S3ProviderFactory: providers.S3ProviderFactory,
+      LocalStorageProviderFactory: providers.LocalStorageProviderFactory,
+      IndexedDBProviderFactory: providers.IndexedDBProviderFactory,
+      WebSocketProviderFactory: providers.WebSocketProviderFactory,
+      FirebaseProviderFactory: providers.FirebaseProviderFactory,
+      SupabaseProviderFactory: providers.SupabaseProviderFactory,
+      GrpcWebProviderFactory: providers.GrpcWebProviderFactory,
+    }
+  }
+};

package/src/providers/firebase-provider.ts

@@ -0,0 +1,39 @@
+import { DataProvider, ProviderFactory } from './provider';
+// A real implementation would import from the Firebase SDK
+// import { initializeApp } from 'firebase/app';
+// import { getFirestore, doc, getDoc, setDoc } from 'firebase/firestore';
+
+export interface FirebaseProviderOptions {
+  firebaseConfig: object; // The config object from your Firebase project
+}
+
+class FirebaseProvider<T> implements DataProvider<T> {
+  // private firestore: any;
+
+  constructor(options: FirebaseProviderOptions) {
+    // const app = initializeApp(options.firebaseConfig);
+    // this.firestore = getFirestore(app);
+    console.log('FirebaseProvider initialized with config:', options.firebaseConfig);
+  }
+
+  async get(id: string, options: { collection: string }): Promise<T> {
+    console.log(`[Firestore] Getting doc "${id}" from collection "${options.collection}"`);
+    // const docRef = doc(this.firestore, options.collection, id);
+    // const docSnap = await getDoc(docRef);
+    // if (!docSnap.exists()) throw new Error('Document not found');
+    // return docSnap.data() as T;
+    return Promise.resolve({} as T);
+  }
+
+  async put(id: string, data: T, options: { collection: string }): Promise<T> {
+    console.log(`[Firestore] Putting doc "${id}" in collection "${options.collection}"`);
+    // await setDoc(doc(this.firestore, options.collection, id), data);
+    return Promise.resolve(data);
+  }
+}
+
+export class FirebaseProviderFactory implements ProviderFactory {
+  create<T>(options: FirebaseProviderOptions): DataProvider<T> {
+    return new FirebaseProvider<T>(options);
+  }
+} 

package/src/providers/graphql-provider.ts

@@ -0,0 +1,39 @@
+import { DataProvider, ProviderFactory } from './provider';
+import { request } from 'graphql-request'; // Example dependency
+
+export interface GraphQLProviderOptions {
+  endpoint: string;
+  headers?: Record<string, string>;
+}
+
+class GraphQLProvider<T> implements DataProvider<T> {
+  private options: GraphQLProviderOptions;
+
+  constructor(options: GraphQLProviderOptions) {
+    this.options = options;
+  }
+
+  async query(options: { query: string; variables?: any }): Promise<any> {
+    return request(
+      this.options.endpoint,
+      options.query,
+      options.variables,
+      this.options.headers
+    );
+  }
+
+  async mutate(options: { mutation: string; variables?: any }): Promise<any> {
+    return request(
+      this.options.endpoint,
+      options.mutation,
+      options.variables,
+      this.options.headers
+    );
+  }
+}
+
+export class GraphQLProviderFactory implements ProviderFactory {
+  create<T>(options: GraphQLProviderOptions): DataProvider<T> {
+    return new GraphQLProvider<T>(options);
+  }
+}

package/src/providers/grpc-web-provider.ts

@@ -0,0 +1,35 @@
+import { DataProvider, ProviderFactory } from './provider';
+// A real implementation would use gRPC-Web libraries
+// import { GrpcWebClientBase } from 'grpc-web';
+
+export interface GrpcWebProviderOptions {
+  hostname: string;
+}
+
+// This is highly conceptual as gRPC is strongly-typed and code-generated
+class GrpcWebProvider<T> implements DataProvider<T> {
+  // private client: GrpcWebClientBase;
+  private hostname: string;
+
+  constructor(options: GrpcWebProviderOptions) {
+    // this.client = new GrpcWebClientBase(options);
+    this.hostname = options.hostname;
+    console.log('gRPC-Web Provider initialized for host:', options.hostname);
+  }
+
+  async query(options: any): Promise<T[]> {
+    console.log(`[gRPC-Web] Query on "${this.hostname}"`, options);
+    return Promise.resolve([]);
+  }
+
+  async mutate(options: any): Promise<T> {
+    console.log(`[gRPC-Web] Mutate on "${this.hostname}"`, options);
+    return Promise.resolve({} as T);
+  }
+}
+
+export class GrpcWebProviderFactory implements ProviderFactory {
+  create<T>(options: GrpcWebProviderOptions): DataProvider<T> {
+    return new GrpcWebProvider<T>(options);
+  }
+} 

package/src/providers/index.ts

@@ -0,0 +1,11 @@
+export * from './provider';
+export * from './provider-manager';
+export * from './graphql-provider';
+export * from './s3-provider';
+export * from './local-storage-provider';
+export * from './rest-provider';
+export * from './indexed-db-provider';
+export * from './websockets-provider';
+export * from './firebase-provider';
+export * from './supabase-provider';
+export * from './grpc-web-provider'; 

package/src/providers/indexed-db-provider.ts

@@ -0,0 +1,48 @@
+import { DataProvider, ProviderFactory } from './provider';
+// A real implementation would use a library like 'idb' for a friendlier API
+// import { openDB, IDBPDatabase } from 'idb';
+
+export interface IndexedDBProviderOptions {
+  dbName: string;
+  storeName: string;
+}
+
+class IndexedDBProvider<T> implements DataProvider<T> {
+  private dbPromise: Promise<any>; // Promise<IDBPDatabase>
+
+  constructor(options: IndexedDBProviderOptions) {
+    // This is highly simplified
+    this.dbPromise = Promise.resolve(); // openDB(options.dbName, 1, { ... });
+  }
+
+  async get(id: string): Promise<T> {
+    console.log(`[IndexedDB] Getting item with id: ${id}`);
+    // const db = await this.dbPromise;
+    // const tx = db.transaction(this.storeName, 'readonly');
+    // const store = tx.objectStore(this.storeName);
+    // const result = await store.get(id);
+    // if (!result) throw new Error('Not found');
+    // return result;
+    return Promise.resolve({} as T);
+  }
+
+  async put(id: string, data: T): Promise<T> {
+    console.log(`[IndexedDB] Putting item with id: ${id}`);
+    // const db = await this.dbPromise;
+    // const tx = db.transaction(this.storeName, 'readwrite');
+    // ...
+    return Promise.resolve(data);
+  }
+
+  async delete(id: string): Promise<void> {
+    console.log(`[IndexedDB] Deleting item with id: ${id}`);
+    // ...
+    return Promise.resolve();
+  }
+}
+
+export class IndexedDBProviderFactory implements ProviderFactory {
+  create<T>(options: IndexedDBProviderOptions): DataProvider<T> {
+    return new IndexedDBProvider<T>(options);
+  }
+} 

package/src/providers/local-storage-provider.ts

@@ -0,0 +1,36 @@
+import { DataProvider, ProviderFactory } from './provider';
+
+class LocalStorageProvider<T> implements DataProvider<T> {
+  private prefix: string;
+
+  constructor(options: { prefix: string }) {
+    this.prefix = options.prefix || 'miura';
+  }
+
+  private getKey(id: string): string {
+    return `${this.prefix}:${id}`;
+  }
+
+  async get(id: string): Promise<T> {
+    const item = localStorage.getItem(this.getKey(id));
+    if (item === null) {
+      throw new Error(`Item with id "${id}" not found in localStorage.`);
+    }
+    return JSON.parse(item);
+  }
+
+  async put(id: string, data: T): Promise<T> {
+    localStorage.setItem(this.getKey(id), JSON.stringify(data));
+    return data;
+  }
+
+  async delete(id: string): Promise<void> {
+    localStorage.removeItem(this.getKey(id));
+  }
+}
+
+export class LocalStorageProviderFactory implements ProviderFactory {
+  create<T>(options: { prefix: string }): DataProvider<T> {
+    return new LocalStorageProvider<T>(options);
+  }
+} 

package/src/providers/provider-manager.ts

@@ -0,0 +1,21 @@
+import { DataProvider, ProviderFactory } from './provider';
+
+const providerFactories = new Map<string, ProviderFactory>();
+
+export const registerProvider = (name: string, factory: ProviderFactory) => {
+  if (providerFactories.has(name)) {
+    console.warn(`Provider with name "${name}" is already registered.`);
+  }
+  providerFactories.set(name, factory);
+};
+
+export const createProvider = <T>(
+  name: string,
+  options: any
+): DataProvider<T> | undefined => {
+  const factory = providerFactories.get(name);
+  if (!factory) {
+    throw new Error(`No provider registered with name "${name}"`);
+  }
+  return factory.create<T>(options);
+}; 

package/src/providers/provider.ts

@@ -0,0 +1,23 @@
+export interface DataProvider<T> {
+  // Queries data, for sources like GraphQL/REST
+  query?(options: any): Promise<T[]>;
+
+  // Mutates data, for sources like GraphQL/REST
+  mutate?(options: any): Promise<T>;
+
+  // Retrieves an object, for sources like S3
+  get?(id: string, options?: any): Promise<T>;
+
+  // Puts an object, for sources like S3
+  put?(id: string, data: T, options?: any): Promise<T>;
+
+  // Deletes an object
+  delete?(id: string, options?: any): Promise<void>;
+
+  // Subscribes to real-time updates if supported
+  subscribe?(options: any, callback: (data: T) => void): () => void;
+}
+
+export interface ProviderFactory {
+  create<T>(options: any): DataProvider<T>;
+}