@tamagui/core - npm Package Compare versions

Comparing version 1.0.0-alpha.7 to 1.0.0-alpha.8

dist/createComponent.js

@@ -348,3 +348,3 @@ var __defProp = Object.defineProperty;
         hasWarnedOnce = true;
-        console.log("\u26A0\uFE0F we need to account for default styles for media queries");
+        console.log("\u26A0\uFE0F TODO account for default styles for media queries");
       }
@@ -367,6 +367,10 @@ }
   const res = component;
-  res["extractable"] = (Component2) => {
+  res["extractable"] = (Component2, conf) => {
     Component2["staticConfig"] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component2.defaultProps
+      defaultProps: {
+        ...Component2.defaultProps,
+        ...conf?.defaultProps
+      }
     });
@@ -373,0 +377,0 @@ return Component2;

dist/createTamagui.js

@@ -10,3 +10,4 @@ var __defProp = Object.defineProperty;
 const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
-const getTamaguiConfig = /* @__PURE__ */ __name(() => conf, "getTamaguiConfig");
+const getTamagui = /* @__PURE__ */ __name(() => conf, "getTamagui");
+const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
 const configListeners = new Set();
@@ -163,6 +164,7 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
   getHasConfigured,
-  getTamaguiConfig,
+  getTamagui,
   getThemeParentClassName,
+  getTokens,
   onConfiguredOnce
 };
 //# sourceMappingURL=createTamagui.js.map

dist/helpers/createPropMapper.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { getTamaguiConfig } from "../createTamagui";
+import { getTamagui } from "../createTamagui";
 import { Variable } from "../createVariable";
@@ -11,3 +11,3 @@ import { isObj } from "./isObj";
   return (key, value, theme, props) => {
-    const conf = getTamaguiConfig();
+    const conf = getTamagui();
     if (!conf) {
@@ -14,0 +14,0 @@ console.trace("no conf! err");

dist/helpers/getSplitStyles.js

@@ -11,3 +11,3 @@ var __defProp = Object.defineProperty;
 import { isWeb } from "../constants/platform";
-import { mediaQueryConfig } from "../hooks/useMedia";
+import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
@@ -34,10 +34,10 @@ import { fixNativeShadow } from "./fixNativeShadow";
       const mediaStyle = getSubStyle(valInit, staticConfig, theme, props);
-      const mediaStyles = getStylesAtomic(mediaStyle);
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"]) {
-          console.log("mediaStyles", keyInit, { mediaProps, mediaStyle, mediaStyles });
+      if (isWeb) {
+        const mediaStyles = getStylesAtomic(mediaStyle);
+        if (process.env.NODE_ENV === "development") {
+          if (props["debug"]) {
+            console.log("mediaStyles", keyInit, { mediaProps, mediaStyle, mediaStyles });
+          }
         }
-      }
-      for (const style2 of mediaStyles) {
-        if (isWeb) {
+        for (const style2 of mediaStyles) {
           const out2 = createMediaStyle(style2, mediaKey, mediaQueryConfig);
@@ -51,5 +51,7 @@ classNames = classNames || [];
           }
-        } else {
-          console.log("TODO native media style logic");
         }
+      } else {
+        if (mediaState[mediaKey]) {
+          style.push(mediaStyle);
+        }
       }
@@ -56,0 +58,0 @@ continue;

dist/helpers/matchMedia.js

@@ -6,2 +6,5 @@ var __defProp = Object.defineProperty;
     addListener() {
+      if (process.env.NODE_ENV === "development" && !process.env.IS_STATIC && process.env.TAMAGUI_TARGET !== "web") {
+        console.log("warning: matchMedia not loading! Is native picking up .native.js files?");
+      }
     },
@@ -8,0 +11,0 @@ removeListener() {

dist/helpers/matchMedia.native.js

@@ -5,2 +5,3 @@ var __defProp = Object.defineProperty;
 const matchMedia = /* @__PURE__ */ __name((media) => new MediaQueryList(media), "matchMedia");
+globalThis["matchMedia"] = matchMedia;
 export {
@@ -7,0 +8,0 @@ matchMedia

dist/hooks/useFeatures.js

@@ -5,37 +5,41 @@ var __defProp = Object.defineProperty;
 import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
-import { addMediaQueryListener, removeMediaQueryListener } from "./useMedia";
-const createDefinition = /* @__PURE__ */ __name(({ Component, propNames }) => ({
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
+const createDefinition = /* @__PURE__ */ __name(({
+  Component,
+  propNames
+}) => ({
   isEnabled: (props) => propNames.some((name) => !!props[name]),
   Component
 }), "createDefinition");
-const mediaQueryPropNames = [
-  "$xs",
-  "$sm",
-  "$md",
-  "$lg",
-  "$xl",
-  "$xxl",
-  "$pointerCoarse",
-  "$hoverNone",
-  "$tall",
-  "$short",
-  "$gtSm",
-  "$notXs",
-  "$gtMd",
-  "$gtLg"
-];
-const featureDefinitions = {
-  measureLayout: createDefinition({
+let featureDefinitions = null;
+const useFeatures = /* @__PURE__ */ __name((props, utils) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures();
+  }
+  const features = [];
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name];
+    if (isEnabled(props) && Component) {
+      features.push(/* @__PURE__ */ React.createElement(Component, {
+        key: name,
+        ...props,
+        _utils: utils
+      }));
+    }
+  }
+  return features;
+}, "useFeatures");
+function loadFeatures() {
+  return {
+    ...!isWeb && {
+      mediaQuery: loadMediaQueryFeature()
+    }
+  };
+}
+__name(loadFeatures, "loadFeatures");
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState);
+  return createDefinition({
     Component: (props) => {
-      console.log("measure", props);
-      return null;
-    },
-    propNames: ["onLayout"]
-  }),
-  mediaQuery: createDefinition({
-    Component: (props) => {
-      if (isWeb) {
-        return;
-      }
-      const keys = mediaQueryPropNames.flatMap((x) => x in props ? x.slice(1) : []);
+      const keys = mediaPropNames.flatMap((x) => x in props ? x.slice(1) : []);
       useIsomorphicLayoutEffect(() => {
@@ -53,22 +57,6 @@ for (const key of keys) {
     },
-    propNames: mediaQueryPropNames
-  })
-};
-const featureNames = Object.keys(featureDefinitions);
-const numFeatures = featureNames.length;
-const useFeatures = /* @__PURE__ */ __name((props, utils) => {
-  const features = [];
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i];
-    const { isEnabled, Component } = featureDefinitions[name];
-    if (isEnabled(props) && Component) {
-      features.push(/* @__PURE__ */ React.createElement(Component, {
-        key: name,
-        ...props,
-        _utils: utils
-      }));
-    }
-  }
-  return features;
-}, "useFeatures");
+    propNames: mediaPropNames
+  });
+}
+__name(loadMediaQueryFeature, "loadMediaQueryFeature");
 export {
@@ -75,0 +63,0 @@ useFeatures

dist/hooks/useTheme.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useForceUpdate } from "@tamagui/use-force-update";
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
@@ -20,12 +20,8 @@ import { Variable } from "../createVariable";
 }, "areEqualSets");
-const useThemeName = /* @__PURE__ */ __name(() => {
+const useThemeName = /* @__PURE__ */ __name((opts) => {
   const parent = useContext(ThemeManagerContext);
   const [name, setName] = useState(parent.name);
-  useEffect(() => {
-    return parent.onChangeTheme((next) => {
-      setName((prev) => {
-        if (prev === next)
-          return prev;
-        return next;
-      });
+  useLayoutEffect(() => {
+    return parent.onChangeTheme((next, manager) => {
+      setName(opts?.parent ? manager.parentName : next);
     });
@@ -32,0 +28,0 @@ }, [parent]);

dist/views/ThemeManagerContext.js

@@ -10,3 +10,3 @@ var __defProp = Object.defineProperty;
     this.listeners = new Map();
-    this.callbacks = new Set();
+    this.themeListeners = new Set();
     this.theme = null;
@@ -40,8 +40,8 @@ }
     }
-    this.callbacks.forEach((cb) => cb(this.name));
+    this.themeListeners.forEach((cb) => cb(this.name, this));
   }
   onChangeTheme(cb) {
-    this.callbacks.add(cb);
+    this.themeListeners.add(cb);
     return () => {
-      this.callbacks.delete(cb);
+      this.themeListeners.delete(cb);
     };
@@ -48,0 +48,0 @@ }

package.json

 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.8",
   "source": "src/index.ts",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/cjs",
+  "module": "dist",
   "typings": "types.d.ts",
   "scripts": {
-    "build": "tamagui-build",
-    "watch": "tamagui-build --watch"
+    "build": "tamagui-build --separate",
+    "watch": "tamagui-build --separate --watch"
   },
   "files": [
+    "_",
     "types.d.ts",
@@ -18,5 +19,5 @@ "dist",
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.5",
-    "@tamagui/use-debounce": "^1.0.0-alpha.6",
-    "@tamagui/use-force-update": "^1.0.0-alpha.5",
+    "@tamagui/helpers": "^1.0.0-alpha.8",
+    "@tamagui/use-debounce": "^1.0.0-alpha.8",
+    "@tamagui/use-force-update": "^1.0.0-alpha.8",
     "react": "*",
@@ -29,3 +30,3 @@ "react-dom": "*"
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.2",
+    "@tamagui/build": "^1.0.0-alpha.8",
     "@tamagui/ow": "^0.28.1",
@@ -42,3 +43,3 @@ "@types/react": "^17.0.35",
   },
-  "gitHead": "13694a98d31535846699004532630788177537e9"
+  "gitHead": "ecb0afe6782276b1f2ece90320fd2748f2f05c93"
 }

src/createTamagui.ts

@@ -31,4 +31,6 @@ import { getStyleRules } from '@tamagui/helpers'
 export const getHasConfigured = () => !!conf
-export const getTamaguiConfig = () => conf!
 
+export const getTamagui = () => conf!
+export const getTokens = () => conf!.tokensParsed
+
 type ConfigListener = (conf: TamaguiInternalConfig) => void
@@ -35,0 +37,0 @@ const configListeners = new Set<ConfigListener>()

src/helpers/createPropMapper.ts

@@ -1,2 +0,2 @@
-import { getTamaguiConfig } from '../createTamagui'
+import { getTamagui } from '../createTamagui'
 import { Variable } from '../createVariable'
@@ -12,3 +12,3 @@ import { StaticConfig, TamaguiInternalConfig } from '../types'
   return (key: string, value: any, theme: any, props: any) => {
-    const conf = getTamaguiConfig()
+    const conf = getTamagui()
     if (!conf) {
@@ -15,0 +15,0 @@ console.trace('no conf! err')

src/helpers/matchMedia.native.ts

 import MediaQueryList from '@expo/match-media/build/MediaQueryList.js'
 
 export const matchMedia = (media: string) => new MediaQueryList(media)
+
+// @ts-ignore
+globalThis['matchMedia'] = matchMedia

src/helpers/matchMedia.ts

@@ -5,3 +5,11 @@ export const matchMedia =
     return {
-      addListener() {},
+      addListener() {
+        if (
+          process.env.NODE_ENV === 'development' &&
+          !process.env.IS_STATIC &&
+          process.env.TAMAGUI_TARGET !== 'web'
+        ) {
+          console.log('warning: matchMedia not loading! Is native picking up .native.js files?')
+        }
+      },
       removeListener() {},
@@ -8,0 +16,0 @@ matches: false,

types.d.ts

@@ -89,3 +89,3 @@ // Generated by dts-bundle-generator v5.9.0
 export declare type Themes = TamaguiConfig["themes"];
-export declare type ThemeName = keyof Themes extends `${infer Prefix}-light` ? Prefix | keyof Themes : keyof Themes;
+export declare type ThemeName = keyof Themes extends `${infer Prefix}-${string}` ? Prefix | keyof Themes : keyof Themes;
 export declare type ThemeKeys = keyof ThemeObject;
@@ -203,3 +203,3 @@ export declare type ThemeKeyVariables = `$${ThemeKeys}`;
 	variantProps?: VariantProps;
-	extractable: <X>(a: X) => X;
+	extractable: <X>(a: X, opts?: StaticConfig) => X;
 };
@@ -358,3 +358,3 @@ export declare type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, "children">> & {
 export declare const getHasConfigured: () => boolean;
-export declare const getTamaguiConfig: () => TamaguiInternalConfig<CreateTokens, {
+export declare const getTamagui: () => TamaguiInternalConfig<CreateTokens, {
 	[key: string]: {
@@ -379,2 +379,3 @@ bg: string | Variable;
 }>;
+export declare const getTokens: () => CreateTokens;
 export declare type ConfigListener = (conf: TamaguiInternalConfig) => void;
@@ -516,3 +517,5 @@ export declare const onConfiguredOnce: (cb: ConfigListener) => void;
 export declare function mediaObjectToString(query: string | MediaQueryObject): string;
-export declare const useThemeName: () => string;
+export declare const useThemeName: (opts?: {
+	parent?: true | undefined;
+} | undefined) => string;
 export declare const useDefaultThemeName: () => string | number;
@@ -519,0 +522,0 @@ export declare const useTheme: () => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

898615

increased by48.81%

Number of package files

352

increased by36.43%

Lines of code

13184

increased by37.38%

Worsened metrics

Number of low supply chain risk alerts

47

increased by51.61%

Dependency changes

• Updated@tamagui/helpers@^1.0.0-alpha.8

• Updated@tamagui/use-debounce@^1.0.0-alpha.8

• Updated@tamagui/use-force-update@^1.0.0-alpha.8