@multiplatform.one/theme 7.16.0 → 7.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.16.0",
+  "version": "7.18.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -44,8 +44,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "7.16.0",
-    "@multiplatform.one/store": "7.16.0",
+    "@multiplatform.one/platform": "7.18.0",
+    "@multiplatform.one/store": "7.18.0",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -57,8 +57,8 @@
     "react-cookie": "^8.1.2"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.16.0",
-    "@multiplatform.one/test-utils": "7.16.0",
+    "@multiplatform.one/config": "7.18.0",
+    "@multiplatform.one/test-utils": "7.18.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/theme/activateThemeConfig.spec.tsx

@@ -0,0 +1,53 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { getConfig } from "@tamagui/web";
+import { TamaguiProvider, Theme, useThemeName } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { activateThemeConfig } from "./activateThemeConfig";
+import { createDefaultThemeConfig } from "./createDefaultThemeConfig";
+import type { ThemeConfig } from "./shared";
+
+const full = createDefaultThemeConfig({});
+const subset = createDefaultThemeConfig({
+  subset: { components: ["Button"], tints: ["accent", "error", "success", "warning"] },
+});
+
+function Name() {
+  return <span data-testid="red">{useThemeName()}</span>;
+}
+
+function ResolvedRed({ themeConfig }: { themeConfig: ThemeConfig }) {
+  return (
+    <TamaguiProvider config={themeConfig.tamagui} defaultTheme="light" disableInjectCSS>
+      <Theme name="red">
+        <Name />
+      </Theme>
+    </TamaguiProvider>
+  );
+}
+
+afterEach(cleanup);
+
+describe("activateThemeConfig", () => {
+  it("makes the given config the one Tamagui resolves against, once", () => {
+    expect(getConfig()).toBe(subset.tamagui);
+    expect(activateThemeConfig(full)).toBe(true);
+    expect(getConfig()).toBe(full.tamagui);
+    expect(activateThemeConfig(full)).toBe(false);
+  });
+
+  it("drops the resolved-name cache, so a theme the new config lacks stops resolving", () => {
+    activateThemeConfig(full);
+    const first = render(<ResolvedRed themeConfig={full} />);
+    expect(screen.getByTestId("red").textContent).toBe("light_red");
+    first.unmount();
+
+    activateThemeConfig(subset);
+    const second = render(<ResolvedRed themeConfig={subset} />);
+    expect(screen.getByTestId("red").textContent).toBe("light");
+    second.unmount();
+
+    activateThemeConfig(full);
+    render(<ResolvedRed themeConfig={full} />);
+    expect(screen.getByTestId("red").textContent).toBe("light_red");
+  });
+});

package/src/theme/activateThemeConfig.ts

@@ -0,0 +1,20 @@
+import { forceUpdateThemes, getConfig, setConfig } from "@tamagui/web";
+import type { ThemeConfig } from "./shared";
+
+/**
+ * Make `themeConfig` the config Tamagui resolves theme names against.
+ *
+ * `createTamagui` installs every config it builds as the global one, and
+ * `TamaguiProvider` never replaces it, so once two configs are loaded (the
+ * full house config and its subset) the one created last wins whichever
+ * config the provider is handed. Tamagui also caches resolved theme names,
+ * so the cache is dropped here too: without that a name the new config lacks
+ * keeps resolving to the old config's theme. Returns false when `themeConfig`
+ * is already the active one.
+ */
+export function activateThemeConfig(themeConfig: ThemeConfig): boolean {
+  if (getConfig() === themeConfig.tamagui) return false;
+  setConfig(themeConfig.tamagui);
+  forceUpdateThemes();
+  return true;
+}

package/src/theme/index.ts

@@ -1,3 +1,4 @@
+export * from "./activateThemeConfig";
 export * from "./animations/index";
 export * from "./chartPalette";
 export * from "./colorRules";

package/types/theme/activateThemeConfig.d.ts

@@ -0,0 +1,14 @@
+import type { ThemeConfig } from "./shared";
+/**
+ * Make `themeConfig` the config Tamagui resolves theme names against.
+ *
+ * `createTamagui` installs every config it builds as the global one, and
+ * `TamaguiProvider` never replaces it, so once two configs are loaded (the
+ * full house config and its subset) the one created last wins whichever
+ * config the provider is handed. Tamagui also caches resolved theme names,
+ * so the cache is dropped here too: without that a name the new config lacks
+ * keeps resolving to the old config's theme. Returns false when `themeConfig`
+ * is already the active one.
+ */
+export declare function activateThemeConfig(themeConfig: ThemeConfig): boolean;
+//# sourceMappingURL=activateThemeConfig.d.ts.map

package/types/theme/activateThemeConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"activateThemeConfig.d.ts","sourceRoot":"","sources":["../../src/theme/activateThemeConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,OAAO,CAKrE"}

package/types/theme/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./activateThemeConfig";
 export * from "./animations/index";
 export * from "./chartPalette";
 export * from "./colorRules";

package/types/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjF,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAElC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC"}