Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface ViewFactoryRegistryBeta

    Registry for view factories

    A view factory is used to create or transform a view representation from data, typically a LimeObject but can also be any other data type. View factories enable components to customize how data is displayed without modifying the core rendering logic.

    Multiple factories can be registered for the same view type. They run in the order they were registered, and each one receives the view returned by the previous factory. The first receives undefined, because nothing has built a view yet.

    A factory does not own the view it receives. It returns a new object instead of changing the one it was given. See ViewFactory for the full rule.

    registerFactory and getFactory take their types from the view type name, so neither call names a type argument. A name and its factory type become known through a module augmentation, written by the package that introduces the view type.

    A package that introduces a view type of its own writes the whole augmentation itself, next to the component that renders the view. TypeScript merges every such block, so the platform's view types and your own are both known at the call site. Code that registers a factory for a view type that already exists writes none of this.

    A name that no augmentation declares still compiles, because these blocks add to the declarations below rather than replacing them. Its factory falls back to unknown for both data and view, which is the signal that the augmentation is missing.

    import { PlatformServiceName } from '@limetech/lime-web-components';

    const registry = platform.get(PlatformServiceName.ViewFactoryRegistry);

    registry.registerFactory('list', (limeobject, scope, view) => {
        return {
            ...view,
            id: limeobject.id,
            title: limeobject.getValue('name'),
            icon: 'file',
        };
    });

    registry.registerFactory('list', (limeobject, scope, view) => {
        if (!view) {
            return view;
        }

        return {
            ...view,
            subtitle: limeobject.getLimetype().localname.singular,
        };
    });

    registry.registerFactory('list', (limeobject, scope, view) => {
        const status = limeobject.getValue('status');
        if (!view || !status) {
            return view;
        }

        return {
            ...view,
            badge: String(status).toUpperCase(),
        };
    });

    import {
        PlatformServiceName,
        ViewFactory,
    } from '@limetech/lime-web-components';

    // Written once, by the package that introduces the view type. TypeScript
    // merges these blocks, so each package declares only its own view types.

    interface TeamMember {
        username: string;
        email: string;
    }

    interface MemberCard {
        title: string;
        subtitle: string;
    }

    type ViewFactories = {
        'user-card': ViewFactory<MemberCard, TeamMember>;
    };

    // Narrowing both methods to the keys of the map is what removes the type
    // argument from the call site. Registering a factory that does not match the
    // view type it is registered under becomes a compile error.
    declare module '@limetech/lime-web-components' {
        interface ViewFactoryRegistry {
            registerFactory<Key extends Extract<keyof ViewFactories, string>>(
                type: Key,
                factory: ViewFactories[Key]
            ): void;

            getFactory<Key extends Extract<keyof ViewFactories, string>>(
                type: Key
            ): ViewFactories[Key] | undefined;
        }
    }

    const registry = platform.get(PlatformServiceName.ViewFactoryRegistry);

    // `member` and `view` are inferred from the 'user-card' entry.
    registry.registerFactory('user-card', (member, scope, view) => {
        return { ...view, title: member.username, subtitle: member.email };
    });
    interface ViewFactoryRegistry {
        getFactory<TView = unknown, TData = unknown>(
            type: string,
        ): ViewFactory<TView, TData> | undefined;
        registerFactory<TView = unknown, TData = unknown>(
            type: string,
            factory: ViewFactory<TView, TData>,
        ): void;
    }
    Index

    Methods

    getFactory registerFactory

    Methods

    • Beta

      Get a factory function for the given view type

      With a single factory registered, that factory is returned as it is. With several, the returned factory calls each one in turn and passes the view from one to the next. If nothing is registered for the type, returns undefined.

      Type Parameters

      • TView = unknown
      • TData = unknown

      Parameters

      • type: string

        the type of view to get a factory for (e.g., 'list', 'card', 'table')

      Returns ViewFactory<TView, TData> | undefined

      a composite factory function, or undefined if no factories are registered

      import { LimeObject, PlatformServiceName } from '@limetech/lime-web-components';

      const registry = platform.get(PlatformServiceName.ViewFactoryRegistry);

      // The 'list' key fixes the return type, so `factory` is already known to
      // build a ListItem from a LimeObject.
      const factory = registry.getFactory('list');

      const scope = platform.get(PlatformServiceName.ContextRegistry).scope({
          host: document.createElement('my-list'),
      });

      // `getFactory` returns undefined when nothing is registered for the type,
      // so the call has to be guarded.
      const toListItem = (limeobject: LimeObject) => factory?.(limeobject, scope);
    • Beta

      Register a factory for a given view type

      Adds a factory to the chain for the view type. A factory registered later runs after the ones already registered.

      A factory has to handle a view of undefined, which is what the first factory in a chain receives.

      A factory must not change the view it receives. See ViewFactory for what it may do with it instead.

      Type Parameters

      • TView = unknown
      • TData = unknown

      Parameters

      • type: string

        the type of view to register a factory for (e.g., 'list', 'card', 'table')

      • factory: ViewFactory<TView, TData>

        factory function to create or transform a view of the specific type

      Returns void

      import { PlatformServiceName } from '@limetech/lime-web-components';

      const registry = platform.get(PlatformServiceName.ViewFactoryRegistry);

      registry.registerFactory('list', (data, scope, view) => {
          return {
              ...view,
              id: data.id,
              title: data.getValue('name'),
          };
      });

    Settings

    Member Visibility

    On This Page

    Methods