mfeflow 0.1.0 → 0.3.0

package/assets/features/analytics-clarity/feature.json

@@ -0,0 +1,64 @@
+{
+  "name": "analytics-clarity",
+  "version": "0.1.0",
+  "description": "Microsoft Clarity behind @mfeflow/analytics, next to Google Tag Manager. Clarity loads only after the visitor grants analytics consent in the banner analytics-gtm adds, and stops again if they withdraw it. The project id is the runtime config's clarityId.",
+  "requires": ["core", "tsconfig", "analytics-gtm"],
+  "files": [
+    {
+      "to": "src/analytics/clarity.ts",
+      "target": "shell",
+      "from": "files/clarity.ts"
+    },
+    {
+      "to": "src/analytics/clarity.test.ts",
+      "target": "shell",
+      "from": "files/clarity-test.ts",
+      "when": {
+        "feature:testing": true
+      }
+    }
+  ],
+  "transforms": [
+    {
+      "op": "add-boot-step",
+      "file": "src/bootstrap.tsx",
+      "target": "shell",
+      "call": "initClarityFromConfig",
+      "from": "./analytics/clarity",
+      "await": false
+    },
+    {
+      "op": "add-env-key",
+      "file": "src/config/schema.ts",
+      "target": "shell",
+      "key": "clarityId",
+      "scope": "runtime",
+      "schema": {
+        "zod": "z.string().regex(/^([a-z0-9]{8,12})?$/)",
+        "valibot": "v.pipe(v.string(), v.regex(/^([a-z0-9]{8,12})?$/))",
+        "arktype": "'/^([a-z0-9]{8,12})?$/'"
+      },
+      "value": "",
+      "configFiles": [
+        "public/config/runtime-config.dev.json",
+        "public/config/runtime-config.staging.json",
+        "public/config/runtime-config.prod.json"
+      ],
+      "when": {
+        "feature:env-t3": true
+      }
+    },
+    {
+      "op": "add-env-key",
+      "file": "public/config/runtime-config.json",
+      "target": "shell",
+      "key": "clarityId",
+      "scope": "runtime",
+      "schema": "z.string().regex(/^([a-z0-9]{8,12})?$/)",
+      "value": "",
+      "when": {
+        "feature:env-t3": false
+      }
+    }
+  ]
+}

package/assets/features/analytics-clarity/files/clarity-test.ts

@@ -0,0 +1,36 @@
+import { providerName, resetAnalyticsForTests, updateConsent } from '@mfeflow/analytics';
+import { afterEach, describe, expect, it } from 'vitest';
+import { startClarity } from './clarity';
+
+const clarityScript = () => document.querySelector('script[src*="clarity.ms/tag/"]');
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, '__MFE_RUNTIME_CONFIG__');
+  Reflect.deleteProperty(globalThis, 'clarity');
+  document.head.innerHTML = '';
+  resetAnalyticsForTests();
+});
+
+describe('startClarity', () => {
+  it('stays off without a clarityId', async () => {
+    Reflect.set(globalThis, '__MFE_RUNTIME_CONFIG__', { clarityId: '' });
+    await startClarity();
+    expect(providerName()).toBe('noop');
+  });
+
+  it('stays off when the id is not a Clarity project id', async () => {
+    Reflect.set(globalThis, '__MFE_RUNTIME_CONFIG__', { clarityId: 'GTM-ABC123' });
+    await startClarity();
+    expect(providerName()).toBe('noop');
+  });
+
+  it('waits for consent, then loads the script once', async () => {
+    Reflect.set(globalThis, '__MFE_RUNTIME_CONFIG__', { clarityId: 'k3x9m2abcd' });
+    await startClarity();
+    await startClarity();
+    expect(providerName()).toBe('clarity');
+    expect(clarityScript()).toBeNull();
+    updateConsent({ analytics_storage: 'granted' });
+    expect(document.querySelectorAll('script[src*="clarity.ms/tag/k3x9m2abcd"]')).toHaveLength(1);
+  });
+});

package/assets/features/analytics-clarity/files/clarity.ts

@@ -0,0 +1,26 @@
+import { addProvider } from '@mfeflow/analytics/providers';
+import { createClarityProvider } from '@mfeflow/analytics/clarity';
+import { fetchRuntimeConfig } from '@mfeflow/runtime';
+
+/**
+ * Adds Clarity next to the other analytics providers, from the runtime config's `clarityId`. With no id it
+ * does nothing. Even with one, Clarity requests nothing until the visitor grants analytics consent.
+ */
+export async function startClarity(): Promise<void> {
+  const config = await fetchRuntimeConfig().catch((error: unknown) => {
+    console.warn('[analytics] the runtime config did not load, so Clarity stays off', error);
+    return undefined;
+  });
+  const clarityId = config?.clarityId;
+  if (typeof clarityId !== 'string' || clarityId === '') return;
+  try {
+    addProvider(createClarityProvider({ projectId: clarityId }));
+  } catch (error) {
+    console.warn('[analytics] Clarity not started', error);
+  }
+}
+
+/** The boot step: never holds up the first render. */
+export function initClarityFromConfig(): void {
+  void startClarity();
+}

package/assets/features/analytics-gtm/files/init.ts

@@ -1,4 +1,4 @@
-import { initAnalytics } from '@mfeflow/analytics';
+import { addProvider } from '@mfeflow/analytics/providers';
 import { createGtmProvider } from '@mfeflow/analytics/gtm';
 import { fetchRuntimeConfig } from '@mfeflow/runtime';
 
@@ -14,7 +14,7 @@ export async function startAnalytics(): Promise<void> {
   const gtmId = config?.gtmId;
   if (typeof gtmId !== 'string' || gtmId === '') return;
   try {
-    initAnalytics(createGtmProvider({ containerId: gtmId }));
+    addProvider(createGtmProvider({ containerId: gtmId }));
   } catch (error) {
     console.warn('[analytics] not started', error);
   }

package/assets/features/ci-github/files/ci.md

@@ -1,7 +1,7 @@
 # CI
 
 `.github/workflows/ci.yml` runs on every pull request: lint, formatting, typecheck, tests, build, then
-`mfeflow doctor`, `validate`, `check-compat` and `budget`, the runtime-config check and the Playwright smoke test.
+`pnpm mfeflow doctor`, `validate`, `check-compat` and `budget`, the runtime-config check and the Playwright smoke test.
 A step for a feature the project does not have is skipped, so adding `testing` or `env-t3` later needs no edit to the
 workflow. Every action is pinned to a commit SHA, the workflow starts from `permissions: {}`, and the job gets
 `contents: read` only. Dependabot or Renovate can keep the pins current.

package/assets/features/ci-github/files/ci.yml

@@ -39,13 +39,13 @@ jobs:
         run: pnpm run --if-present test
       - run: pnpm build
       - name: mfeflow doctor
-        run: pnpm exec mfeflow doctor
+        run: pnpm mfeflow doctor
       - name: mfeflow validate
-        run: pnpm exec mfeflow validate
+        run: pnpm mfeflow validate
       - name: mfeflow check-compat
-        run: pnpm exec mfeflow check-compat
+        run: pnpm mfeflow check-compat
       - name: mfeflow budget
-        run: pnpm exec mfeflow budget
+        run: pnpm mfeflow budget
       - name: Check runtime config
         run: pnpm run --if-present check:runtime-config
       - name: Install Playwright browser

package/assets/features/commit-prompt/feature.json

@@ -0,0 +1,27 @@
+{
+  "name": "commit-prompt",
+  "version": "0.1.0",
+  "description": "An interactive Conventional Commits prompt (czg): pnpm commit asks for the type, scope and message, then runs git commit. No emoji. Works with git-hooks, whose commitlint hook checks the same message.",
+  "requires": ["core"],
+  "files": [
+    {
+      "to": "cz.config.js",
+      "target": "root",
+      "from": "files/cz.config.js"
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "czg",
+      "range": "1.14.0",
+      "target": "root",
+      "dev": true
+    }
+  ],
+  "scripts": [
+    {
+      "name": "commit",
+      "command": "czg"
+    }
+  ]
+}

package/assets/features/commit-prompt/files/cz.config.js

@@ -0,0 +1,27 @@
+// `pnpm commit` asks for each part of a Conventional Commit, then runs `git commit`.
+// The types are the ones commitlint's conventional config accepts, so the git-hooks check passes.
+export default {
+  useEmoji: false,
+  // commitlint's conventional config rejects a capitalised subject, so the prompt lowercases it.
+  upperCaseSubject: false,
+  allowCustomScopes: true,
+  allowEmptyScopes: true,
+  allowBreakingChanges: ['feat', 'fix'],
+  maxHeaderLength: 100,
+  // Offered as a list; anything else can be typed. Add your apps and areas.
+  scopes: ['deps', 'ci'],
+  skipQuestions: ['footerPrefix'],
+  types: [
+    { value: 'feat', name: 'feat:     A new feature' },
+    { value: 'fix', name: 'fix:      A bug fix' },
+    { value: 'docs', name: 'docs:     Documentation only' },
+    { value: 'style', name: 'style:    Formatting, no change to behaviour' },
+    { value: 'refactor', name: 'refactor: Neither a fix nor a feature' },
+    { value: 'perf', name: 'perf:     Makes it faster' },
+    { value: 'test', name: 'test:     Add or fix tests' },
+    { value: 'build', name: 'build:    Build system or dependencies' },
+    { value: 'ci', name: 'ci:       CI configuration' },
+    { value: 'chore', name: 'chore:    Anything else that is not in src or tests' },
+    { value: 'revert', name: 'revert:   Revert an earlier commit' },
+  ],
+};

package/assets/features/data-react-query/feature.json

@@ -0,0 +1,89 @@
+{
+  "name": "data-react-query",
+  "version": "0.1.0",
+  "description": "Server state with TanStack Query as a shared singleton: the shell owns the QueryClient and its provider, every remote calls useQuery against the same cache, and each remote prefixes its query keys with its own name. The example query uses the http client when http is installed.",
+  "requires": ["core", "tsconfig"],
+  "files": [
+    {
+      "to": "src/query/Query.tsx",
+      "target": "shell",
+      "from": "files/shell-Query.tsx"
+    },
+    {
+      "to": "src/query/Query.test.tsx",
+      "target": "shell",
+      "from": "files/shell-Query-test.tsx",
+      "when": {
+        "feature:testing": true
+      }
+    },
+    {
+      "to": "src/query/Query.tsx",
+      "target": "remotes",
+      "from": "files/remote-Query.tsx"
+    },
+    {
+      "to": "src/query/keys.ts",
+      "target": "remotes",
+      "from": "files/keys.ts.eta",
+      "template": true
+    },
+    {
+      "to": "src/query/useHealth.ts",
+      "target": "remotes",
+      "from": "files/useHealth.http.ts.eta",
+      "template": true,
+      "when": {
+        "feature:http": true
+      }
+    },
+    {
+      "to": "src/query/useHealth.ts",
+      "target": "remotes",
+      "from": "files/useHealth.fetch.ts.eta",
+      "template": true,
+      "when": {
+        "feature:http": false
+      }
+    },
+    {
+      "to": "src/query/Query.test.tsx",
+      "target": "remotes",
+      "from": "files/remote-Query-test.tsx.eta",
+      "template": true,
+      "when": {
+        "feature:testing": true
+      }
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "@tanstack/react-query",
+      "range": "5.105.0",
+      "target": "shell"
+    },
+    {
+      "name": "@tanstack/react-query",
+      "range": "5.105.0",
+      "target": "remotes"
+    }
+  ],
+  "transforms": [
+    {
+      "op": "wrap-provider",
+      "file": "src/App.tsx",
+      "target": "shell",
+      "component": "Query",
+      "from": "./query/Query",
+      "function": "App"
+    },
+    {
+      "op": "wrap-provider",
+      "file": "src/exposed/App.tsx",
+      "target": "remotes",
+      "component": "Query",
+      "from": "../query/Query",
+      "function": "App"
+    }
+  ]
+}

package/assets/features/data-react-query/files/keys.ts.eta

@@ -0,0 +1,8 @@
+/**
+ * Every query key of this remote starts with its name, so it never meets another remote's key in the shared cache,
+ * and `queryClient.invalidateQueries({ queryKey: queryKeys.all })` refreshes just this remote.
+ */
+export const queryKeys = {
+  all: ['<%= it.app.name %>'] as const,
+  health: () => [...queryKeys.all, 'health'] as const,
+};

package/assets/features/data-react-query/files/remote-Query-test.tsx.eta

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { describe, expect, it } from 'vitest';
+import { queryKeys } from './keys';
+import { Query } from './Query';
+import { useHealth } from './useHealth';
+
+function Health() {
+  const { data } = useHealth();
+  return <p>{data ? `ok: ${String(data.ok)}` : 'loading'}</p>;
+}
+
+describe('the <%= it.app.name %> queries', () => {
+  it('start with the remote name', () => {
+    expect(queryKeys.health()[0]).toBe('<%= it.app.name %>');
+  });
+
+  it('run on their own, without the shell', async () => {
+    render(
+      <Query>
+        <Health />
+      </Query>,
+    );
+    expect(await screen.findByText('ok: true')).toBeDefined();
+  });
+
+  it('use the shell client when there is one', async () => {
+    const shell = new QueryClient();
+    render(
+      <QueryClientProvider client={shell}>
+        <Query>
+          <Health />
+        </Query>
+      </QueryClientProvider>,
+    );
+    await screen.findByText('ok: true');
+    expect(shell.getQueryData(queryKeys.health())).toEqual({ ok: true });
+  });
+});

package/assets/features/data-react-query/files/remote-Query.tsx

@@ -0,0 +1,15 @@
+import { useContext, type ReactNode } from 'react';
+import { QueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
+
+let standalone: QueryClient | undefined;
+
+/**
+ * Inside the shell this does nothing: the shell's client is already in context. When the remote runs on its own
+ * (`pnpm dev` in its folder) there is no shell, so it provides a client of its own.
+ */
+export function Query({ children }: { children: ReactNode }) {
+  const inShell = useContext(QueryClientContext) !== undefined;
+  if (inShell) return children;
+  standalone ??= new QueryClient();
+  return <QueryClientProvider client={standalone}>{children}</QueryClientProvider>;
+}

package/assets/features/data-react-query/files/shell-Query-test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import { useQuery } from '@tanstack/react-query';
+import { describe, expect, it } from 'vitest';
+import { Query, queryClient } from './Query';
+
+function Value() {
+  const { data } = useQuery({ queryKey: ['shell', 'answer'], queryFn: () => Promise.resolve(42) });
+  return <p>{data ?? 'loading'}</p>;
+}
+
+describe('Query', () => {
+  it('gives the app one cache', async () => {
+    render(
+      <Query>
+        <Value />
+      </Query>,
+    );
+    expect(await screen.findByText('42')).toBeDefined();
+    expect(queryClient.getQueryData(['shell', 'answer'])).toBe(42);
+  });
+});

package/assets/features/data-react-query/files/shell-Query.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+/**
+ * The page's one cache. Remotes call `useQuery` against it because `@tanstack/react-query` is a shared
+ * singleton, so they find this client through context. Tune the defaults here.
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: { queries: { staleTime: 30_000, retry: 1, refetchOnWindowFocus: false } },
+});
+
+export function Query({ children }: { children: ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

package/assets/features/data-react-query/files/useHealth.fetch.ts.eta

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import { queryKeys } from './keys';
+
+/** An example query with plain fetch. With the `http` feature this file uses its client instead. */
+export function useHealth() {
+  return useQuery({
+    queryKey: queryKeys.health(),
+    queryFn: async ({ signal }) => {
+      const response = await fetch(new URL('/api/health', location.origin), { signal });
+      if (!response.ok) throw new Error(`health check failed (${String(response.status)})`);
+      const body: unknown = await response.json();
+      return { ok: typeof body === 'object' && body !== null && Reflect.get(body, 'ok') === true };
+    },
+  });
+}

package/assets/features/data-react-query/files/useHealth.http.ts.eta

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '../api/client';
+import { queryKeys } from './keys';
+
+/** An example query: the API's health check through the http client, cancelled when the component unmounts. */
+export function useHealth() {
+  return useQuery({
+    queryKey: queryKeys.health(),
+    queryFn: ({ signal }) => api.get('health', { signal }),
+  });
+}

package/assets/features/env-t3/feature.json

@@ -373,6 +373,48 @@
       "when": {
         "feature:telemetry-otel": true
       }
+    },
+    {
+      "op": "add-env-key",
+      "file": "src/config/schema.ts",
+      "target": "shell",
+      "key": "apiUrl",
+      "scope": "runtime",
+      "schema": {
+        "zod": "z.string().min(1)",
+        "valibot": "v.pipe(v.string(), v.minLength(1))",
+        "arktype": "'string > 0'"
+      },
+      "value": "/api",
+      "configFiles": [
+        "public/config/runtime-config.dev.json",
+        "public/config/runtime-config.staging.json",
+        "public/config/runtime-config.prod.json"
+      ],
+      "when": {
+        "feature:http": true
+      }
+    },
+    {
+      "op": "add-env-key",
+      "file": "src/config/schema.ts",
+      "target": "shell",
+      "key": "clarityId",
+      "scope": "runtime",
+      "schema": {
+        "zod": "z.string().regex(/^([a-z0-9]{8,12})?$/)",
+        "valibot": "v.pipe(v.string(), v.regex(/^([a-z0-9]{8,12})?$/))",
+        "arktype": "'/^([a-z0-9]{8,12})?$/'"
+      },
+      "value": "",
+      "configFiles": [
+        "public/config/runtime-config.dev.json",
+        "public/config/runtime-config.staging.json",
+        "public/config/runtime-config.prod.json"
+      ],
+      "when": {
+        "feature:analytics-clarity": true
+      }
     }
   ]
 }

package/assets/features/env-t3/files/env.arktype.ts

@@ -2,7 +2,7 @@ import { createEnv } from '@t3-oss/env-core';
 import { type } from 'arktype';
 
 // Server and build-time variables, checked when a process that imports this file starts.
-// Add one: mfeflow add env-key API_ORIGIN --scope server --schema "type('string.url')"
+// Add one: pnpm mfeflow add env-key API_ORIGIN --scope server --schema "type('string.url')"
 export const env = createEnv({
   server: {
     NODE_ENV: type("'development' | 'production' | 'test' | undefined"),

package/assets/features/env-t3/files/env.valibot.ts

@@ -2,7 +2,7 @@ import { createEnv } from '@t3-oss/env-core';
 import * as v from 'valibot';
 
 // Server and build-time variables, checked when a process that imports this file starts.
-// Add one: mfeflow add env-key API_ORIGIN --scope server --schema "v.pipe(v.string(), v.url())"
+// Add one: pnpm mfeflow add env-key API_ORIGIN --scope server --schema "v.pipe(v.string(), v.url())"
 export const env = createEnv({
   server: {
     NODE_ENV: v.optional(v.picklist(['development', 'production', 'test'])),

package/assets/features/env-t3/files/env.zod.ts

@@ -2,7 +2,7 @@ import { createEnv } from '@t3-oss/env-core';
 import { z } from 'zod';
 
 // Server and build-time variables, checked when a process that imports this file starts.
-// Add one: mfeflow add env-key API_ORIGIN --scope server --schema "z.url()"
+// Add one: pnpm mfeflow add env-key API_ORIGIN --scope server --schema "z.url()"
 export const env = createEnv({
   server: {
     NODE_ENV: z.enum(['development', 'production', 'test']).optional(),

package/assets/features/env-t3/files/schema.arktype.ts

@@ -2,7 +2,7 @@ import { type } from 'arktype';
 
 // The shape of public/config/runtime-config.<env>.json. The browser only imports this file's type
 // (see ./runtime), so the validator stays out of the bundle; `pnpm check:runtime-config` validates the files.
-// Add a key: mfeflow add env-key GTM_ID --scope runtime --schema "type('string > 0')"
+// Add a key: pnpm mfeflow add env-key GTM_ID --scope runtime --schema "type('string > 0')"
 export const runtimeConfigSchema = type({
   environment: "'dev' | 'staging' | 'prod'",
 });

package/assets/features/env-t3/files/schema.valibot.ts

@@ -2,7 +2,7 @@ import * as v from 'valibot';
 
 // The shape of public/config/runtime-config.<env>.json. The browser only imports this file's type
 // (see ./runtime), so the validator stays out of the bundle; `pnpm check:runtime-config` validates the files.
-// Add a key: mfeflow add env-key GTM_ID --scope runtime --schema "v.pipe(v.string(), v.minLength(1))"
+// Add a key: pnpm mfeflow add env-key GTM_ID --scope runtime --schema "v.pipe(v.string(), v.minLength(1))"
 export const runtimeConfigSchema = v.object({
   environment: v.picklist(['dev', 'staging', 'prod']),
 });

package/assets/features/env-t3/files/schema.zod.ts

@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 // The shape of public/config/runtime-config.<env>.json. The browser only imports this file's type
 // (see ./runtime), so the validator stays out of the bundle; `pnpm check:runtime-config` validates the files.
-// Add a key: mfeflow add env-key GTM_ID --scope runtime --schema "z.string().min(1)"
+// Add a key: pnpm mfeflow add env-key GTM_ID --scope runtime --schema "z.string().min(1)"
 export const runtimeConfigSchema = z.object({
   environment: z.enum(['dev', 'staging', 'prod']),
 });

package/assets/features/event-bus/feature.json

@@ -0,0 +1,100 @@
+{
+  "name": "event-bus",
+  "version": "0.1.0",
+  "description": "Typed events between remotes (@mfeflow/event-bus) and the contracts package that holds their types: packages/contracts/src/events, merged into the bus in every app, with a sample event.",
+  "requires": ["core", "tsconfig"],
+  "files": [
+    {
+      "to": "packages/contracts/package.json",
+      "target": "root",
+      "from": "files/contracts-package.json.eta",
+      "template": true
+    },
+    {
+      "to": "packages/contracts/src/events/index.ts",
+      "target": "root",
+      "from": "files/contracts-events.ts"
+    },
+    {
+      "to": "packages/contracts/README.md",
+      "target": "root",
+      "from": "files/contracts-readme.md"
+    },
+    {
+      "to": "src/events.ts",
+      "target": "shell",
+      "from": "files/shell-events.ts.eta",
+      "template": true
+    },
+    {
+      "to": "src/events.test.ts",
+      "target": "shell",
+      "from": "files/shell-events-test.ts.eta",
+      "template": true,
+      "when": {
+        "feature:testing": true
+      }
+    },
+    {
+      "to": "src/events.ts",
+      "target": "remotes",
+      "from": "files/events.ts.eta",
+      "template": true
+    },
+    {
+      "to": "src/events.test.ts",
+      "target": "remotes",
+      "from": "files/events-test.ts.eta",
+      "template": true,
+      "when": {
+        "feature:testing": true
+      }
+    },
+    {
+      "to": "src/Announce.tsx",
+      "target": "remotes",
+      "from": "files/announce.tsx.eta",
+      "template": true
+    }
+  ],
+  "dependencies": [
+    {
+      "name": "@mfeflow/event-bus",
+      "range": "latest",
+      "target": "shell"
+    },
+    {
+      "name": "@mfeflow/event-bus",
+      "range": "latest",
+      "target": "remotes"
+    },
+    {
+      "name": "{{scope}}/contracts",
+      "range": "workspace:*",
+      "target": "shell"
+    },
+    {
+      "name": "{{scope}}/contracts",
+      "range": "workspace:*",
+      "target": "remotes"
+    }
+  ],
+  "transforms": [
+    {
+      "op": "add-boot-step",
+      "file": "src/bootstrap.tsx",
+      "target": "shell",
+      "call": "configureShellEvents",
+      "from": "./events",
+      "await": false
+    },
+    {
+      "op": "wrap-provider",
+      "file": "src/exposed/App.tsx",
+      "target": "remotes",
+      "component": "Announce",
+      "from": "../Announce",
+      "function": "App"
+    }
+  ]
+}