DI@2 syntax proposal

0-default-interfaces.js

export {YandexMetrics as Metrics} from './lib/Metrics/YandexMetrics.js';
export const RouterEvent = Symbol(); // quick replacement for router event interface

// export all deps which should be hidden by interfaces (however it is js so we do not have any interfaces)

1-client-interfaces.js

export * from './default-interfaces.js';

export {ClientRequest as Request} from './lib/ClientRequest';
export {ClientLogger as Logger} from './lib/ClientLogger';

2-server-interfaces.js

export * from './default-interfaces.js';

export {ServerRequest as Request} from './lib/ServerRequest';
export {ServerLogger as Logger} from './lib/ServerLogger';

3-Card.js

import {assignDependencies} from 'di2.js';

export class Card {
}

/**
Default DIDefinition is {
  provider: Card,
  updateMethod: container.defaultUpdateMethod,
  dependencies: Card.dependencies || {},
  annotations: Card.annotations || []
}
**/

export const CardWithCustomUpdate = new DIDefinition({
  provider: Card, // class will be instantiated with new Class()
  updateMethod: assignDependencies,
  annotations: []
});

export const FactoryCardWithCustomUpdate = new DIDefinition({
  provider: Card.factory, // function will be used as factory
  updateMethod: 'updateFromQuery',
  annotations: [
    new TransientLabel()  // do not cache inside container
  ]
});

export const CardWithCustomUpdate1 = new DIDefinition(Card); // CardWithCustomUpdate1 is pretty same as Card, however these are 2 different DI tokens
export const CardWithCustomUpdate2 = new DIDefinition(Card, assignDependencies); // sugar
export const CardWithCustomUpdate3 = new DIDefinition(Card, 'updateDependencies'); // sugar
export const CardWithCustomUpdate4 = new DIDefinition(Card, 'updateDependencies', [/* annotations */]]); // sugar

4-BasePage.js

import {SessionContainer, RouterEvent} from 'webpack/interfaces'; // this will be replaced by webpack in runtime (e.g. -> client-interfaces.js)
import {Card, CardWithCustomUpdate, FactoryCardWithCustomUpdate} from '../models/Card.js';

export class BasePage {
  
  updateDependencies({SessionContainer, RouterEvent, title, card}) {
  }
  
}

BasePage.dependencies = {
    SessionContainer,
    RouterEvent,
    card: Card
};

BasePage.annotations = [
  new ReuseLabel() // always reuse BasePage
];

export const HomePage = new DIDefinition({
  provider: BasePage,
  dependencies: {
    card: CardWithCustomUpdate,
    title: new DIDefinition(BaseTitle, 'home')
  }
});

export const CustomHomePage = new DIDefinition({
  provider: HomePage,
  dependencies: {
    card: FactoryCardWithCustomUpdate,
    title: CustomHomeTitle
  }
});

todo.js

// session mechanism remains the same

// serialization

// only DIDefinitions could be serialized
// this is because we do not have an `id` on instances (objects are used as a tokens)
let routeData = di.serialize(HomeRoute)
// ...
di.restore(HomeRoute, routeData)