@mohamedatia/fly-design-system-mocks
v0.1.0
Published
FlyOS External-App dev-seed plumbing — mock-mode HTTP interceptor, provider registry, response-envelope helpers, build-flag convention, seed-asset base indirection, and the canonical shell './Mocks' federation contract. Deliberately NOT part of the design
Maintainers
Readme
@mohamedatia/fly-design-system-mocks
Shared External-App dev-seed plumbing — the mock-mode HTTP interceptor factory, a
provider-registry dispatcher, the ok()/parseBody()/paged() response-envelope helpers,
the esbuild build-flag parsing convention, an optional static-seed-asset base-URL
indirection, and the canonical ./Mocks federation export contract the FlyOS desktop shell
already delegates to (see the shell's core/mocks/handlers/external-apps.ts).
Deliberately NOT a secondary entry point of
@mohamedatia/fly-design-system, and deliberately NOT added to any consumer'sfederation.config.jssharedmap. See "Why a separate package" below — same category of guardrail as@mohamedatia/fly-design-system-twin-face, for a different underlying reason.
Scope — plumbing, not data
This package ships the mechanism every External App was hand-rolling under a different
name (Circles' core/mocks, Thoughts' core/offline-data). Per-module providers — the
actual demo rows (trends, signals, users, tasks, …) — stay app-owned. This package has zero
knowledge of any app's domain models or seed content.
Why a separate package, not a design-system secondary entry point
A first attempt shipped this as an ng-packagr secondary entry point
(@mohamedatia/fly-design-system/mocks) specifically to avoid touching the design system's
Native Federation singleton. That broke at runtime, not build time:
@softarc/native-federation'sgetExternals()hands esbuild'sexternaloption the literalsharedkeys — for every consumer, that includes the bare string@mohamedatia/fly-design-system(it must be a shared singleton).- esbuild's own external matching treats a bare package name as external for all of its
subpaths too (
nameandname/*both match), regardless of whether the subpath is itself declared inshared. - So the
/mockssubpath got silently externalized in the built./Mocksexposed chunk — but no shared bundle orimportmap.jsonentry exists for that subpath. The chunk shipped a bareimport … from "@mohamedatia/fly-design-system/mocks"with nothing to resolve it: an unresolved-module-specifier crash in a real browser, completely invisible tong buildsucceeding or unit tests passing (verified against Thoughts' own federation build; the chunk had zero references todispatchMockApifailures until this was caught by dumping the built chunk andimportmap.jsonside by side).
A genuinely separate package name (fly-design-system-mocks) has no such prefix
relationship with fly-design-system — esbuild's external match requires an exact name or
name/ boundary — so it is bundled inline into the consuming chunk like any other ordinary,
unshared dependency.
Consumer recipe
npm install @mohamedatia/fly-design-system-mocks --legacy-peer-deps// my-app.router.ts
import { createProviderRegistry, type MockProvider } from '@mohamedatia/fly-design-system-mocks';
import { handleUsers } from './users/users.provider';
const providers: MockProvider[] = [handleUsers];
export const dispatchMyAppMocks = createProviderRegistry(providers, { delayMs: 120 });// my-app.interceptor.ts
import { createMockApiInterceptor, parseMockBuildFlag } from '@mohamedatia/fly-design-system-mocks';
import { dispatchMyAppMocks } from './my-app.router';
export const myAppMockEnabled = parseMockBuildFlag(
typeof FLY_MOCK_BACKEND !== 'undefined' ? FLY_MOCK_BACKEND : undefined,
);
export const myAppMockInterceptor = createMockApiInterceptor({
enabled: myAppMockEnabled,
apiPrefixes: ['/api/myapp/'],
dispatch: dispatchMyAppMocks,
});// federated-mocks.ts — the shell's fixed contract; rename at this one boundary
export { dispatchMyAppMocks as dispatchMockApi } from './my-app.router';// federation.config.js — expose the router, do NOT add this package to `shared`
exposes: {
'./Mocks': './src/app/core/offline-data/federated-mocks.ts',
},See src/public-api.ts for the full recipe, the FederatedMockContract type (the shell's
fixed dispatchMockApi / optional setMockSeedBase shape), and createSeedBase() for apps
whose providers fetch static JSON seed assets rather than inlining demo rows.
