3. Move logic out of the component#

Goal: move component-owned task state behind a named service that the component and its children can consume.

From the component to craftService#

The factory body moves out almost unchanged — it was already a generator:

import { craftComputed, craftService, craftUse, state } from '@craft-ts/core';

export const { TaskList, provideTaskList } = craftService(
  { name: 'TaskList', providedIn: 'toProvide' },
  function* () {
    yield* state('tasks', [] as Task[], ({ state, update }) => ({
      add: (title: string) => update((current) => [...current, newTask(title)]),
      toggle: (id: string) =>
        update((current) =>
          current.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
        ),
      remaining: craftUse(
        craftComputed('remaining', function* () {
          return (yield* state()).filter((t) => !t.done).length;
        }),
      ),
    }));
  },
);

A service is the same shape as a component, minus the nodes: a generator that yields what it needs. The differences: a name, a scope — and no return. A service exposes every named primitive it yields, under its name, so TaskList exposes tasks and has a toProvide scope because the component owns this mutable state.

Using it#

The component mounts one service instance in its provider scope, then resolves it without passing inputs each time:

export const Tasks = craftComponent(
  'Tasks',
  { providers: [provideTaskList()] },
  function* () {
    const { tasks } = yield* TaskList();

    return [
      /* unchanged */
    ];
  },
);

craftService returns a helper named after the service — here TaskList. There is no injectTaskList and no class to import.

Picking a scope#

Choose a scope from the lifetime and owner of the service:

Use toProvide even when only the owning component uses the service. A provider keeps that component's state in one instance and lets child components resolve the same instance. provideX() registers the provider; the service factory runs only when X() is first resolved. appStart: true is the eager exception.

For a reusable operation called by other services, use function. Every X(inputs) helper call creates a fresh service context and receives its own inputs. It is not a cached state store for a component.

The service in this lesson has no configurable inputs, so a regular component provider is enough:

export const Tasks = craftComponent(
  'Tasks',
  { providers: [provideTaskList()] },
  function* () {
    const { tasks } = yield* TaskList();

    return [
      /* … */
    ];
  },
);

The two remaining scopes (manuallyProvidedAtRoot, and the details of abstract) are covered in Service scopes.

Passing configuration#

A reusable function service can take call-site inputs. Changing values are yieldable readers (CraftServiceInput<T>) — yield them so the input-to-service edge stays in the graph:

import { craftExpose, craftService, type CraftServiceInput } from '@craft-ts/core';

export const { TaskDetails } = craftService(
  { name: 'TaskDetails', providedIn: 'function' },
  function* (inputs: { taskId: CraftServiceInput<string> }) {
    yield* craftExpose('taskId', yield* inputs.taskId());
  },
);

const { taskId } = yield* TaskDetails({ taskId: 'task-42' });

Use this shape when each service call needs its own parameters. When values configure state owned by a component or route, put them under $provided on a toProvide service and register them once. For component inputs, use withComponentProviders; Service inputs shows the complete example.

Giving the service its own providers#

The service config also takes providers, for dependencies that should be scoped to this service rather than to whoever mounts it:

export const { TaskList } = craftService(
  {
    name: 'TaskList',
    providedIn: 'function',
    providers: [provideTaskApi()],
  },
  function* () {
    const api = yield* TaskApi();
    // …
  },
);

Note this is a different thing from provideTaskList(), which is the helper other code uses to mount a toProvide service.

Exposing less than everything#

A service's API is what it yields; wrap what should stay internal in craftPrivate(...). If a consumer only needs one exposed property, it can say so:

const tasks = yield* TaskList.tasks();

The dependency graph then records that only tasks was used — which makes tests smaller, and is why step 10 is short.

What you gained#

Component-owned state now lives in a named, injectable and testable service — no @Injectable, no constructor. Reusable per-call logic can use the function scope and compose other services without owning a shared instance.