react-native-twc 1.0.3 → 1.1.1

package/dist/index.js

@@ -2,7 +2,7 @@
 import { clsx } from "clsx";
 import React from "react";
 import { twMerge } from "tailwind-merge";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { jsx } from "react/jsx-runtime";
 function filterProps(props, shouldForwardProp) {
   const filteredProps = {};
   const keys = Object.keys(props);
@@ -19,23 +19,39 @@ var createTwc = (config = {}) => {
   const defaultShouldForwardProp = config.shouldForwardProp || ((prop) => prop[0] !== "$");
   const wrap = (Component) => {
     const createTemplate = (attrs, shouldForwardProp = defaultShouldForwardProp) => {
+      const componentCache = new Map;
       const template = (stringsOrFn, ...values) => {
         const isClassFn = typeof stringsOrFn === "function";
-        const tplClassName = !isClassFn && String.raw({ raw: stringsOrFn }, ...values);
+        const cacheKey = isClassFn ? stringsOrFn.toString() : String.raw({ raw: stringsOrFn }, ...values);
+        if (componentCache.has(cacheKey)) {
+          return componentCache.get(cacheKey);
+        }
+        const tplClassName = !isClassFn ? cacheKey : undefined;
+        const hasAttrs = attrs !== undefined;
+        const isAttrsFunction = typeof attrs === "function";
+        const staticAttrs = !isAttrsFunction && hasAttrs ? attrs : undefined;
         const ForwardedComponent = React.forwardRef((p, ref) => {
           const { className: classNameProp, ...rest } = p;
-          const resolvedAttrs = typeof attrs === "function" ? attrs(p) : attrs ? attrs : {};
-          const filteredProps = filterProps({ ...resolvedAttrs, ...rest }, shouldForwardProp);
+          let finalProps;
+          if (!hasAttrs) {
+            finalProps = filterProps(rest, shouldForwardProp);
+          } else if (isAttrsFunction) {
+            const resolvedAttrs = attrs(p);
+            finalProps = filterProps({ ...resolvedAttrs, ...rest }, shouldForwardProp);
+          } else {
+            finalProps = filterProps({ ...staticAttrs, ...rest }, shouldForwardProp);
+          }
           const baseClassName = isClassFn ? stringsOrFn(p) : tplClassName;
           const finalClassName = typeof baseClassName === "function" ? (renderProps) => compose(baseClassName(renderProps), typeof classNameProp === "function" ? classNameProp(renderProps) : classNameProp) : compose(baseClassName, classNameProp);
           const Comp = Component;
-          return /* @__PURE__ */ jsxDEV(Comp, {
+          return /* @__PURE__ */ jsx(Comp, {
             ref,
             className: finalClassName,
-            ...filteredProps
-          }, undefined, false, undefined, this);
+            ...finalProps
+          });
         });
         ForwardedComponent.displayName = `twc(${Component.displayName || Component.name || "Component"})`;
+        componentCache.set(cacheKey, ForwardedComponent);
         return ForwardedComponent;
       };
       template.transientProps = (fnOrArray) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-twc",
-    "version": "1.0.3",
+    "version": "1.1.1",
     "description": "Create reusable React Native + NativeWind components with Tailwind CSS syntax.",
     "type": "module",
     "main": "./dist/index.js",
@@ -17,10 +17,10 @@
     "scripts": {
         "test": "bun test",
         "build": "rm -rf dist && bun run build:js && bun run build:dts",
-        "build:js": "bun build src/index.tsx --outdir dist --format esm --external react --external react-native --external clsx --external tailwind-merge",
+        "build:js": "NODE_ENV=production bun build src/index.tsx --outdir dist --format esm --external react --external react-native --external clsx --external tailwind-merge",
         "build:dts": "tsc -p tsconfig.build.json",
         "check-types": "tsc --noEmit",
-        "prepublishOnly": "bun run build"
+        "prepublishOnly": "bun run build && bun test"
     },
     "keywords": [
         "react-native",