Fix error when using computed outside (#22)

Author: agustito37

demo/styles/global.js

@@ -2,10 +2,10 @@ import { GlobalStyles } from "react-native-use-styles";
 
 GlobalStyles({
   constants: {
-    midnight: '#2c3e50',
-    clouds: '#ecf0f1',
-    disabled: '#7f7f7f',
+    midnight: "#2c3e50",
+    clouds: "#ecf0f1",
+    disabled: "#7f7f7f",
     title: 40
   },
-  container: "bg:color:$midnight fx:1 jf:content:center",
+  container: "bg:color:$midnight fx:1 jf:content:center"
 });

demo/styles/namespaced.js

@@ -2,7 +2,9 @@ import { Styles } from "react-native-use-styles";
 
 export default Styles({
   computed: {
-    disabled: ([isDisabled]) => ({ color: isDisabled ? '$disabled' : '$clouds' })
+    disabled: ([isDisabled]) => ({
+      color: isDisabled ? "$disabled" : "$clouds"
+    })
   },
   centered: "txt:align:center"
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-use-styles",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "React Native useStyles",
   "main": "lib/index.js",
   "module": "src/index.js",

src/core/manager.js

@@ -11,6 +11,7 @@ import {
   getNamespace,
   hasPath
 } from "../utils";
+import { CONSTANTS_KEY, COMPUTED_KEY } from "../constants";
 
 export const getFromStorage = (
   pKey,
@@ -44,7 +45,7 @@ const computePath = (path, namespace, dependencies) => {
   if (!fn) {
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `Non-Existent-Computed: Computed ${path} not found in cache.`
+        `Non-Existent-Computed: Computed ${path} not found in cache. You are seeing this warning because you are in development mode. In a production build there will be no warning.`
       );
     }
     return;
@@ -86,9 +87,9 @@ export const GlobalUse = (rawStyles, namespace) => {
   return dependencies => {
     let styles = rawStyles;
 
-    if (typeof styles !== "object") {
+    if (typeof styles === "string") {
       styles = processStyles(styles, namespace, dependencies);
-    } else {
+    } else if (typeof styles === "object") {
       constantsMutation(styles, namespace);
     }
 
@@ -100,9 +101,19 @@ export const GlobalStyles = (definition, namespace) => {
   for (let [key, rawStyles] of Object.entries(definition)) {
     let styles = rawStyles;
 
-    if (typeof styles !== "object") {
+    if (process.env.NODE_ENV !== "production" && typeof styles === "function") {
+      console.warn(
+        `Invalid-Style-Type: The following style is invalid: "${key}", computed styles are placed inside the computed section. You are seeing this warning because you are in development mode. In a production build there will be no warning and these styles will be ignored.`
+      );
+    }
+
+    if (typeof styles === "string") {
       definition[key] = processStyles(styles, namespace, null, definition);
-    } else {
+    } else if (
+      typeof styles === "object" &&
+      key !== CONSTANTS_KEY &&
+      key !== COMPUTED_KEY
+    ) {
       constantsMutation(styles, namespace, definition);
     }
   }

tests/core/manager.spec.js

@@ -24,14 +24,6 @@ describe("utils", () => {
     expect(getFromCache("local", "namespace")).toMatchObject({ flex: 1 });
   });
 
-  it("Development mode only: GlobalUse produces a console.warn when providing a non-existent namespace", () => {
-    GlobalUse("color:@not-a-namespace$blue")();
-    expect(console.warn).toBeCalledTimes(1);
-    expect(console.warn).toHaveBeenLastCalledWith(
-      'Non-Existent-Namespace: The following namespace does not exist or has not been imported: "not-a-namespace". You are seeing this warning because you are in development mode. In a production build there will be no warning and these styles will be ignored.'
-    );
-  });
-
   it("GlobalStyles sets constants cache properly", () => {
     GlobalStyles({
       constants: {
@@ -194,4 +186,25 @@ describe("utils", () => {
   it("GlobalUse with only falsey value", () => {
     expect(GlobalUse("undefined")()).toMatchObject({});
   });
+
+  it("Development mode only: GlobalUse produces a console.warn when providing a non-existent namespace", () => {
+    GlobalUse("color:@not-a-namespace$blue")();
+    expect(console.warn).toBeCalledTimes(1);
+    expect(console.warn).toHaveBeenLastCalledWith(
+      'Non-Existent-Namespace: The following namespace does not exist or has not been imported: "not-a-namespace". You are seeing this warning because you are in development mode. In a production build there will be no warning and these styles will be ignored.'
+    );
+  });
+
+  it("Development mode only: GlobalStyles produces a console.warn when providing an Invalid-Style-Type", () => {
+    GlobalStyles({
+      computed: {
+        insideComputed: ([isColored]) => ({ color: isColored ? "red" : "blue" })
+      },
+      outsideComputed: ([isColored]) => ({ color: isColored ? "red" : "blue" })
+    });
+    expect(console.warn).toBeCalledTimes(1);
+    expect(console.warn).toHaveBeenLastCalledWith(
+      'Invalid-Style-Type: The following style is invalid: "outsideComputed", computed styles are placed inside the computed section. You are seeing this warning because you are in development mode. In a production build there will be no warning and these styles will be ignored.'
+    );
+  });
 });