engine-v12

engine-v12 for vuejs 2.x projects, provide these class or factory for the frontend architect

• ViewController
• ViewService
• DataAccessObject
• ConfigProvider
• ViewContextProvider

ViewController

factory

add 2 optional fields for vuejs component options

• controlled

• services

controlled

object

auto render the controlled component if provided

interface ViewControllerOptionControlled {
  // vue sfc object or some component exports
  controlled: VueComponentOptions;

  getProps: () => any;
}

services

array

auto create services from the option: services, and drop them onto the vuejs component instance

type ViewControllerOptionServices =
  | ViewService[]
  | { id?: string; service: ViewService; args?: any[]; initArgs: any[] };

there are some special directive for initArgs

@vm

engine-v12 would replace it with the vue component instance

@vm-service

engine-v12 would replace it with the service declared

import { ViewController } from 'engine-v12';
import { ViewRequestService, SomeViewService } from './services';
import { SomeControlledComponent } from './components';

export default ViewController({
  // name is required
  name: 'some-component',

  // option services is optional
  services: [
    {
      service: ViewRequestService,
      initArgs: ['@vm'],
    },

    SomeViewService,

    {
      id: 'someViewService2',
      service: SomeViewService,
      args: [
        // ... some args you provide for the SomeViewService constructor
      ],
      initArgs: [
        '@vm',
        // viewRequestService is ViewRequestService instance
        '@vm-service.viewRequestService',
      ],
    },
  ],

  // option controlled is optional
  controlled: {
    component: SomeControlledComponent,

    getProps() {
      // the returned object would passed to SomeControlledComponent as props
      return {
        message: 'hello world',
      };
    },
  },

  mounted() {
    console.log(this.viewRequestService);
    console.log(this.someViewService);
    console.log(this.someViewService2);
  },
});

ViewService

class

use ViewService as base class for extend purpose, ViewService make sure your class instances would set onto the vue component instance

example

import { ViewService } from 'engine-v12';

export class ViewRequestService extends ViewService {
  #vm;

  init(vm) {
    // and you would treat the #vm as data provider
    this.#vm = vm;
  }
}

DataAccessObject

singleton class

commonly used for request api, and make data access more clear

const daos = new DataAccessObject({
  // required
  api: someUserRequest,

  // optional
  requestAdapter(requestDto) {
    // we can do sth for adapt
    return requestDto;
  },

  // optional
  responseAdapter(responseDto) {
    // we can do sth for adapt
    return responseDto;
  },
});

ConfigProvider

class

commonly used for providing config

const someConfigProvider = new ConfigProvider({
  obj: {
    color: '#fff',
  },
});

const color = someConfigProvider.get('obj.color');

ViewContextProvider

factory

commonly used for providing view context

const viewCtxProvider = ViewContextProvider(['someProp']);

// set it for the vue component options
// () => { someProp: this['someProp'] }
viewCtxProvider.provide;

// set it for the vue component options
// ['someProp']
viewCtxProvider.inject;