@asteby/metacore-app- professors (帮助)

用于元核心主机应用程序的通用,可重复使用的 React 提供者. 一个 套接字将交叉关注 每一个元核心应用股份—— 方向,字体,布局,搜索,平台品牌——外加可选 "满包" <MetacoreAppShell> 将API + PWA + 烤面包机装入 单标签.

稳定

稳定到1.0级。 以下出口品如下: 持久性密钥 (cookie 名称, 本地Storage 密钥) 和提供者上下文形状不会 改变在少校内部。 可选择的同伴融合@asteby/metacore-pwa, (中文(简体) ), @asteby/metacore-runtime-react, (中文(简体) ), @asteby/metacore-ui, (中文(简体) ), sonner移动 - 贝壳能容忍兼容的版本 已声明对等区域 package.json。 。 。 .

安装

pnpm add @asteby/metacore-app-providers @radix-ui/react-direction
# transports / kits used by MetacoreAppShell + PlatformConfigProvider
pnpm add @tanstack/react-query sonner
# optional, only if you mount MetacoreAppShell:
pnpm add @asteby/metacore-pwa @asteby/metacore-runtime-react @asteby/metacore-ui

出口概况

类型 : Direction, (中文(简体) ), Collapsible, (中文(简体) ), Variant, (中文(简体) ), FontProviderProps, (中文(简体) ), SearchProviderProps, (中文(简体) ), PlatformBranding, (中文(简体) ), BrandingFetcher, (中文(简体) ), PlatformConfigProviderProps, (中文(简体) ), MetacoreAppShellProps, (中文(简体) ), MetacoreInstallRequest。 。 。 .

基本提供者

import {
  DirectionProvider,
  FontProvider,
  LayoutProvider,
  SearchProvider,
} from '@asteby/metacore-app-providers'
import { fonts } from '@asteby/metacore-starter-config/fonts'

<DirectionProvider>
  <FontProvider fonts={fonts}>
    <LayoutProvider>
      <SearchProvider>
        <App />
      </SearchProvider>
    </LayoutProvider>
  </FontProvider>
</DirectionProvider>

• FontProvider 需求 fonts (第一个条目是默认).
• SearchProvider 接受 hotkey (默认) 'k',带有Cmd/Ctrl). 这个 消费者使用 useSearch().open 编号 : setOpen()。 。 。 .
• 所有四个持续状态在饼干 这样SSR/前沿运行时间可以恢复 初始帧.

平台设计——租户品牌

任何元核心应用软件的品牌集中化. Apps拿租户的 来自后端的品牌( 名称、 标志、 主要颜色、 支持 URL) 他们拥有的终点; 此提供者缓存它, 应用 CSS 变量 (单位:千美元)--primary, (中文(简体) ), --background, (中文(简体) ), --sidebar-*,(...)改为 <html>,持续 有效载荷在 localStorage 因此,随后的负载画 正确的品牌 在此之前 反应挂载,并在暗/光切换上重新应用.

提供商为运输-不可知:呼叫者通过Aync fetcher。无 HTTP 客户端为硬接线- 任意轴/ 取取/ 切/ 手卷 工作时.

import {
  PlatformConfigProvider,
  applyCachedBranding,
  type PlatformBranding,
} from '@asteby/metacore-app-providers'
import { api } from './lib/api'

// Paint the cached brand BEFORE React mounts.
applyCachedBranding()

const defaults: PlatformBranding = {
  platform_name: 'Acme Hub',
  platform_logo: '/logo.svg',
  primary_color: '#84cc16',
  accent_color: '#22d3ee',
  favicon_url: '/favicon.ico',
  support_email: '[email protected]',
  support_url: 'https://acme.test/support',
}

<PlatformConfigProvider
  fetcher={async () => (await api.get('/platform/branding')).data}
  defaults={defaults}
>
  <App />
</PlatformConfigProvider>

在树上:

const { platform_name, primary_color, refetch } = usePlatformConfig()

refetch() 如果主机只知道品牌, 查询无效 更改(例如在设置保存后).

合同

• fetcher 决定: Partial<PlatformBranding>。供应商合并 结束了 defaults因此,缺失的字段倒回 而不是空白 乌伊 UI.
• 十六进制颜色( H)#rrggbb改为 oklch() 并推倒在 <html> 元素作为 CSS 变量。 暗/光变体是衍生出来的 读取 document.documentElement.classList; 提供者观察 类更改并重新应用到切换上.
• 持久性键是 platform-branding 内 localStorage通过 storageKey。 。 。 . applyCachedBranding(storageKey?) 为主机导出 在他们的预反应启动脚本中需要一个非默认密钥.
• 第一个框架:如果 window.__BRAND__ 存在(服务器通过 /api/brand/boot.js,与 PlatformBranding, (中文(简体) ), applyCachedBranding 绘制并重写存储密钥 存储值仅在 __BRAND__ 不在(离线)。 每个真实的 获取器响应 REPLACES 存储字段( 不与旧值合并) . 颜色必须是 #RRGGBB; 在绘画或存储之前, 任何其它东西都会被丢弃 (单位:千美元)sanitizeBranding, (中文(简体) ), persistBranding, (中文(简体) ), readWindowBranding ) .
• staleTime 默认为5分钟(TanStack Query). 提供者保留 每个查询 storageKey。 。 。 .

Metacore AppShell —— 全套工具包

<MetacoreAppShell> 给每个供应商电线 一个应用程序需要运行在 metacore平台:API上下文,查询客户端,PWA安装+更新 提示、 离线指示器、 声纳烤面包机、 附加安装桥 嵌入式枢纽iframes, 以及 stale- while- revalidate 元数据缓存 应用服务员更新时无效 .

import { MetacoreAppShell } from '@asteby/metacore-app-providers/shell'
import { QueryClient } from '@tanstack/react-query'
import { api } from './lib/api'

const queryClient = new QueryClient()

<MetacoreAppShell api={api} queryClient={queryClient}>
  <RouterProvider router={router} />
</MetacoreAppShell>

可选旗帜( 所有默认启用) :

外壳会拉同龄人@asteby/metacore-pwa, (中文(简体) ), @asteby/metacore-runtime-react, (中文(简体) ), @asteby/metacore-ui, (中文(简体) ), sonner当 安装。 只想要子集线的应用程序 单个提供者和 跳过外壳.

Addon 安装桥

当被安装在(或与)元核枢纽一起时,外壳会听 页:1 window.postMessage({ type: 'metacore:install', addonKey, ... }) 事件,或者:

1. 引用 onAddonInstall(req, source) 如果你提供了一个,或
2. 职位 req 改为 /marketplace/install 在捆绑的API客户端.

如果成功,它显示一个音速烤面包, 放弃运行时间元数据缓存, 发件人a metacore:metadata-changed CustomEvent 打开 window (这样) 侧边栏和命令菜单在不重新装入的情况下进行反切),和回复 内框 metacore:installed失败时,它答复 metacore:install-failed 并显示错误.

持久性摘要

许可证

阿帕奇 - 2.0