@niibase/uniwind 1.0.0

package/dist/common/hooks/useCSSVariable/useCSSVariable.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCSSVariable = void 0;
+var _react = require("react");
+var _listener = require("../../core/listener");
+var _logger = require("../../core/logger");
+var _types = require("../../types");
+var _getVariableValue = require("./getVariableValue");
+const getValue = name => Array.isArray(name) ? name.map(_getVariableValue.getVariableValue) : (0, _getVariableValue.getVariableValue)(name);
+const arrayEquals = (a, b) => {
+  if (a.length !== b.length) {
+    return false;
+  }
+  return a.every((value, index) => value === b[index]);
+};
+let warned = false;
+const logDevError = name => {
+  warned = true;
+  _logger.Logger.warn(`We couldn't find your variable ${name}. Make sure it's used at least once in your className, or define it in a static theme as described in the docs: https://docs.uniwind.dev/api/use-css-variable`);
+};
+const useCSSVariable = name => {
+  const [value, setValue] = (0, _react.useState)(getValue(name));
+  const nameRef = (0, _react.useRef)(name);
+  (0, _react.useEffect)(() => {
+    if (Array.isArray(name) && Array.isArray(nameRef.current)) {
+      if (arrayEquals(name, nameRef.current)) {
+        return;
+      }
+      setValue(getValue(name));
+      nameRef.current = name;
+      return;
+    }
+    if (name !== nameRef.current) {
+      setValue(getValue(name));
+      nameRef.current = name;
+    }
+  }, [name]);
+  (0, _react.useEffect)(() => {
+    const updateValue = () => setValue(getValue(nameRef.current));
+    const dispose = _listener.UniwindListener.subscribe(updateValue, [_types.StyleDependency.Theme, _types.StyleDependency.Variables]);
+    return dispose;
+  }, []);
+  if (Array.isArray(value)) {
+    value.forEach((val, index) => {
+      if (val === void 0 && __DEV__ && !warned) {
+        logDevError(name[index] ?? "");
+      }
+    });
+  }
+  if (value === void 0 && __DEV__ && !warned) {
+    logDevError(name);
+  }
+  return value;
+};
+exports.useCSSVariable = useCSSVariable;

package/dist/common/hooks/useResolveClassNames.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResolveClassNames = void 0;
+var _react = require("react");
+var _web = require("../core/web");
+const emptyState = {};
+const useResolveClassNames = className => {
+  const [styles, recreate] = (0, _react.useReducer)(() => className !== "" ? (0, _web.getWebStyles)(className) : emptyState, className !== "" ? (0, _web.getWebStyles)(className) : emptyState);
+  (0, _react.useEffect)(() => {
+    if (className === "") {
+      return;
+    }
+    recreate();
+    const dispose = _web.CSSListener.subscribeToClassName(className, recreate);
+    return dispose;
+  }, [className]);
+  return styles;
+};
+exports.useResolveClassNames = useResolveClassNames;

package/dist/common/hooks/useResolveClassNames.native.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResolveClassNames = void 0;
+var _react = require("react");
+var _listener = require("../core/listener");
+var _native = require("../core/native");
+const emptyState = {
+  styles: {},
+  dependencies: []
+};
+const useResolveClassNames = (className, state) => {
+  const [uniwindState, recreate] = (0, _react.useReducer)(() => className !== "" ? _native.UniwindStore.getStyles(className, state) : emptyState, className !== "" ? _native.UniwindStore.getStyles(className, state) : emptyState);
+  (0, _react.useEffect)(() => {
+    if (className !== "") {
+      recreate();
+    }
+  }, [className, state?.isDisabled, state?.isPressed, state?.isFocused]);
+  (0, _react.useEffect)(() => {
+    if (uniwindState.dependencies.length > 0) {
+      const dispose = _listener.UniwindListener.subscribe(recreate, uniwindState.dependencies);
+      return dispose;
+    }
+  }, [uniwindState.dependencies, className]);
+  return uniwindState.styles;
+};
+exports.useResolveClassNames = useResolveClassNames;

package/dist/common/hooks/useUniwind.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUniwind = void 0;
+var _react = require("react");
+var _core = require("../core");
+var _listener = require("../core/listener");
+var _types = require("../types");
+const useUniwind = () => {
+  const [theme, setTheme] = (0, _react.useState)(_core.Uniwind.currentTheme);
+  const [hasAdaptiveThemes, setHasAdaptiveThemes] = (0, _react.useState)(_core.Uniwind.hasAdaptiveThemes);
+  (0, _react.useEffect)(() => {
+    const dispose = _listener.UniwindListener.subscribe(() => {
+      setTheme(_core.Uniwind.currentTheme);
+      setHasAdaptiveThemes(_core.Uniwind.hasAdaptiveThemes);
+    }, [_types.StyleDependency.Theme, _types.StyleDependency.AdaptiveThemes]);
+    return () => {
+      dispose();
+    };
+  }, []);
+  return {
+    theme,
+    hasAdaptiveThemes
+  };
+};
+exports.useUniwind = useUniwind;

package/dist/common/hooks/useUniwindAccent.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUniwindAccent = void 0;
+var _formatColor = require("../core/web/formatColor");
+var _useResolveClassNames = require("./useResolveClassNames");
+const useUniwindAccent = className => {
+  const styles = (0, _useResolveClassNames.useResolveClassNames)(className ?? "");
+  return styles.accentColor !== void 0 ? (0, _formatColor.formatColor)(styles.accentColor) : void 0;
+};
+exports.useUniwindAccent = useUniwindAccent;

package/dist/common/hooks/useUniwindAccent.native.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUniwindAccent = void 0;
+var _useResolveClassNames = require("./useResolveClassNames.native");
+const useUniwindAccent = (className, state) => {
+  const styles = (0, _useResolveClassNames.useResolveClassNames)(className ?? "", state);
+  return styles.accentColor;
+};
+exports.useUniwindAccent = useUniwindAccent;

package/dist/common/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Uniwind", {
+  enumerable: true,
+  get: function () {
+    return _core.Uniwind;
+  }
+});
+Object.defineProperty(exports, "useCSSVariable", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useCSSVariable;
+  }
+});
+Object.defineProperty(exports, "useResolveClassNames", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useResolveClassNames;
+  }
+});
+Object.defineProperty(exports, "useUniwind", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useUniwind;
+  }
+});
+Object.defineProperty(exports, "withUniwind", {
+  enumerable: true,
+  get: function () {
+    return _hoc.withUniwind;
+  }
+});
+var _core = require("./core");
+var _hoc = require("./hoc");
+var _hooks = require("./hooks");

package/dist/common/types.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyleDependency = exports.Orientation = exports.ColorScheme = void 0;
+var StyleDependency = exports.StyleDependency = /* @__PURE__ */(StyleDependency2 => {
+  StyleDependency2[StyleDependency2["ColorScheme"] = 1] = "ColorScheme";
+  StyleDependency2[StyleDependency2["Theme"] = 2] = "Theme";
+  StyleDependency2[StyleDependency2["Dimensions"] = 3] = "Dimensions";
+  StyleDependency2[StyleDependency2["Orientation"] = 4] = "Orientation";
+  StyleDependency2[StyleDependency2["Insets"] = 5] = "Insets";
+  StyleDependency2[StyleDependency2["FontScale"] = 6] = "FontScale";
+  StyleDependency2[StyleDependency2["Rtl"] = 7] = "Rtl";
+  StyleDependency2[StyleDependency2["AdaptiveThemes"] = 8] = "AdaptiveThemes";
+  StyleDependency2[StyleDependency2["Variables"] = 9] = "Variables";
+  return StyleDependency2;
+})(StyleDependency || {});
+var Orientation = exports.Orientation = /* @__PURE__ */(Orientation2 => {
+  Orientation2["Portrait"] = "portrait";
+  Orientation2["Landscape"] = "landscape";
+  return Orientation2;
+})(Orientation || {});
+var ColorScheme = exports.ColorScheme = /* @__PURE__ */(ColorScheme2 => {
+  ColorScheme2["Light"] = "light";
+  ColorScheme2["Dark"] = "dark";
+  return ColorScheme2;
+})(ColorScheme || {});

package/dist/common/utils/buildDtsFile.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildDtsFile = void 0;
+var _fs = _interopRequireDefault(require("fs"));
+var _package = require("../../package.json");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const buildDtsFile = (dtsPath, stringifiedThemes) => {
+  const oldDtsContent = _fs.default.existsSync(dtsPath) ? _fs.default.readFileSync(dtsPath, "utf-8") : "";
+  const dtsContent = [`// NOTE: This file is generated by ${_package.name} and it should not be edited manually.`, `/// <reference types="${_package.name}/types" />`, "", `declare module '${_package.name}' {`, `    export interface UniwindConfig {`, `        themes: readonly ${stringifiedThemes}`, `    }`, `}`, "", `export {}`, ""].join("\n");
+  if (oldDtsContent === dtsContent) {
+    return;
+  }
+  _fs.default.writeFileSync(dtsPath, dtsContent);
+};
+exports.buildDtsFile = buildDtsFile;

package/dist/common/utils/stringifyThemes.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringifyThemes = void 0;
+const stringifyThemes = (themes = []) => `[${themes.map(theme => `'${theme}'`).join(", ")}]`;
+exports.stringifyThemes = stringifyThemes;

package/dist/common/vite/index.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from 'vite'
+
+type UniwindConfig = {
+    cssEntryFile: string
+    extraThemes?: Array<string>
+    dtsFile?: string
+}
+
+export declare function uniwind(config: UniwindConfig): Plugin

package/dist/common/vite/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _vite = require("./vite");
+Object.keys(_vite).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _vite[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _vite[key];
+    }
+  });
+});

package/dist/common/vite/vite.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uniwind = void 0;
+var _node = require("@tailwindcss/node");
+var _path = _interopRequireDefault(require("path"));
+var _package = require("../../package.json");
+var _css = require("../css");
+var _processFunctions = require("../css/processFunctions");
+var _utils = require("../metro/utils");
+var _buildDtsFile = require("../utils/buildDtsFile");
+var _stringifyThemes = require("../utils/stringifyThemes");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
+const componentPath = _path.default.resolve(dirname, "../module/components/web/index.js");
+const uniwind = ({
+  cssEntryFile,
+  extraThemes,
+  dtsFile = "uniwind-types.d.ts"
+}) => {
+  const themes = (0, _utils.uniq)(["light", "dark", ...(extraThemes ?? [])]);
+  const stringifiedThemes = (0, _stringifyThemes.stringifyThemes)(themes);
+  return {
+    name: "uniwind",
+    config: () => ({
+      css: {
+        transformer: "lightningcss",
+        lightningcss: {
+          visitor: {
+            Function: _processFunctions.processFunctions
+          }
+        }
+      },
+      optimizeDeps: {
+        exclude: [_package.name, "react-native"]
+      },
+      resolve: {
+        alias: [{
+          find: /^react-native$/,
+          replacement: componentPath,
+          customResolver: {
+            resolveId(_, importer) {
+              if (importer !== void 0 && (0, _node.normalizePath)(importer).includes(`${_package.name}/dist`)) {
+                return this.resolve("react-native-web");
+              }
+              return componentPath;
+            }
+          }
+        }]
+      }
+    }),
+    transform: (code, id) => {
+      const normalizedId = (0, _node.normalizePath)(id);
+      if (normalizedId.includes(`${_package.name}/dist`) && normalizedId.includes("config/config.js")) {
+        return {
+          code: `${code}Uniwind.__reinit(() => ({}), ${stringifiedThemes})`
+        };
+      }
+    },
+    buildStart: async () => {
+      await (0, _css.buildCSS)(themes, cssEntryFile);
+      (0, _buildDtsFile.buildDtsFile)(dtsFile, stringifiedThemes);
+    },
+    generateBundle: async () => {
+      await (0, _css.buildCSS)(themes, cssEntryFile);
+      (0, _buildDtsFile.buildDtsFile)(dtsFile, stringifiedThemes);
+    }
+  };
+};
+exports.uniwind = uniwind;

package/dist/metro/index.cjs

@@ -0,0 +1,166 @@
+'use strict';
+
+const FileStoreBase = require('metro-cache/private/stores/FileStore');
+const os = require('os');
+const path = require('path');
+const node_path = require('node:path');
+const common = require('../shared/uniwind.BgZDHdUR.cjs');
+const types = require('../shared/uniwind.BZIuaszw.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+const FileStoreBase__default = /*#__PURE__*/_interopDefaultCompat(FileStoreBase);
+const os__default = /*#__PURE__*/_interopDefaultCompat(os);
+const path__default = /*#__PURE__*/_interopDefaultCompat(path);
+
+class FileStore extends FileStoreBase__default {
+  async set(key, value) {
+    if (value?.output?.[0]?.data?.css?.skipCache) {
+      return;
+    }
+    return super.set(key, value);
+  }
+}
+const cacheStore = new FileStore({
+  root: path__default.join(os__default.tmpdir(), "metro-cache")
+});
+const patchMetroGraphToSupportUncachedModules = () => {
+  const { Graph } = require("metro/private/DeltaBundler/Graph");
+  const original_traverseDependencies = Graph.prototype.traverseDependencies;
+  if (original_traverseDependencies.__patched) {
+    return;
+  }
+  original_traverseDependencies.__patched = true;
+  function traverseDependencies(paths, options) {
+    this.dependencies.forEach((dependency) => {
+      if (dependency.output.find((file) => file.data.css?.skipCache === true) && !paths.includes(dependency.path)) {
+        dependency.unstable_transformResultKey = `${dependency.unstable_transformResultKey}.`;
+        paths.push(dependency.path);
+      }
+    });
+    return original_traverseDependencies.call(this, paths, options);
+  }
+  Graph.prototype.traverseDependencies = traverseDependencies;
+  traverseDependencies.__patched = true;
+};
+
+const thisModuleDist = node_path.resolve(__dirname, "../../dist");
+const thisModuleSrc = node_path.resolve(__dirname, "../../src");
+const isFromThisModule = (filename) => filename.startsWith(thisModuleDist) || filename.startsWith(thisModuleSrc);
+const SUPPORTED_COMPONENTS = [
+  "ActivityIndicator",
+  "Button",
+  "FlatList",
+  "Image",
+  "ImageBackground",
+  "InputAccessoryView",
+  "KeyboardAvoidingView",
+  "Modal",
+  "Pressable",
+  "RefreshControl",
+  "SafeAreaView",
+  "ScrollView",
+  "SectionList",
+  "Switch",
+  "Text",
+  "TextInput",
+  "TouchableHighlight",
+  "TouchableNativeFeedback",
+  "TouchableOpacity",
+  "TouchableWithoutFeedback",
+  "View",
+  "VirtualizedList"
+];
+const nativeResolver = ({
+  context,
+  moduleName,
+  platform,
+  resolver
+}) => {
+  const resolution = resolver(context, moduleName, platform);
+  const isInternal = isFromThisModule(context.originModulePath);
+  const isReactNativeIndex = context.originModulePath.endsWith(
+    `react-native${node_path.sep}index.js`
+  );
+  if (isInternal || resolution.type !== "sourceFile" || isReactNativeIndex) {
+    return resolution;
+  }
+  if (moduleName === "react-native") {
+    return resolver(context, `${common.name}/components`, platform);
+  }
+  if (resolution.filePath.includes(`${node_path.sep}react-native${node_path.sep}Libraries${node_path.sep}`)) {
+    const filename = node_path.basename(resolution.filePath.split(node_path.sep).at(-1) ?? "");
+    const module = filename.split(".").at(0);
+    if (module !== void 0 && SUPPORTED_COMPONENTS.includes(module)) {
+      return resolver(context, `${common.name}/components/${module}`, platform);
+    }
+  }
+  return resolution;
+};
+const webResolver = ({
+  context,
+  moduleName,
+  platform,
+  resolver
+}) => {
+  const resolution = resolver(context, moduleName, platform);
+  if (isFromThisModule(context.originModulePath) || resolution.type !== "sourceFile" || !resolution.filePath.includes(`${node_path.sep}react-native-web${node_path.sep}`)) {
+    return resolution;
+  }
+  const segments = resolution.filePath.split(node_path.sep);
+  const isIndex = segments.at(-1)?.startsWith("index.");
+  const module = segments.at(-2);
+  if (!isIndex || module === void 0 || !SUPPORTED_COMPONENTS.includes(module) || context.originModulePath.endsWith(`${module}${node_path.sep}index.js`)) {
+    return resolution;
+  }
+  return resolver(context, `${common.name}/components/${module}`, platform);
+};
+
+const withUniwindConfig = (config, uniwindConfig) => {
+  uniwindConfig.themes = common.uniq([
+    "light",
+    "dark",
+    ...uniwindConfig.extraThemes ?? []
+  ]);
+  patchMetroGraphToSupportUncachedModules();
+  if (typeof uniwindConfig === "undefined") {
+    throw new Error("Uniwind: You need to pass second parameter to withUniwindConfig");
+  }
+  if (typeof uniwindConfig.cssEntryFile === "undefined") {
+    throw new Error(
+      'Uniwind: You need to pass css css entry file to withUniwindConfig, e.g. withUniwindConfig(config, { cssEntryFile: "./global.css" })'
+    );
+  }
+  return {
+    ...config,
+    cacheStores: [cacheStore],
+    transformerPath: require.resolve("./metro-transformer.cjs"),
+    transformer: {
+      ...config.transformer,
+      uniwind: uniwindConfig
+    },
+    resolver: {
+      ...config.resolver,
+      sourceExts: [
+        ...config.resolver?.sourceExts ?? [],
+        "css"
+      ],
+      assetExts: config.resolver?.assetExts?.filter(
+        (ext) => ext !== "css"
+      ),
+      resolveRequest: (context, moduleName, platform) => {
+        const resolver = config.resolver?.resolveRequest ?? context.resolveRequest;
+        const platformResolver = platform === types.Platform.Web ? webResolver : nativeResolver;
+        const resolved = platformResolver({
+          context,
+          moduleName,
+          platform,
+          resolver
+        });
+        return resolved;
+      }
+    }
+  };
+};
+
+exports.withUniwindConfig = withUniwindConfig;

package/dist/metro/index.d.ts

@@ -0,0 +1,15 @@
+import type { MetroConfig } from 'metro-config'
+
+type Polyfills = {
+    rem?: number
+}
+
+type UniwindConfig = {
+    cssEntryFile: string
+    extraThemes?: Array<string>
+    dtsFile?: string
+    polyfills?: Polyfills
+    debug?: boolean
+}
+
+export declare function withUniwindConfig(config: MetroConfig, options: UniwindConfig): MetroConfig