@arrai-innovations/reactive-helpers 8.0.4 → 8.1.0

package/utils/classes.js

@@ -0,0 +1,107 @@
+import identity from "lodash-es/identity";
+import isArray from "lodash-es/isArray";
+import isEmpty from "lodash-es/isEmpty";
+import isObject from "lodash-es/isObject";
+import isSet from "lodash-es/isSet";
+import isString from "lodash-es/isString";
+import { isRef, unref } from "vue";
+
+export const objectifyClasses = (...classes) => {
+    const flatClasses = classes.flat(Infinity).filter(identity);
+    const objects = flatClasses.map((c) => {
+        if (isString(c)) {
+            c = c.split(/\s+/);
+            c = c.reduce((acc, c) => {
+                acc[c] = true;
+                return acc;
+            }, {});
+        }
+        if (!isObject(c)) {
+            throw new Error(`Expected string or object, got ${c}`);
+        }
+        return c;
+    });
+    if (objects.some(isRef)) {
+        // don't just mash refs into each other or other objects.
+        // since it will change the order of operations, we can't mash objects with refs in between
+        // mash sequences of objects as delimited by refs
+        const objectGroups = [];
+        let currentGroup = [];
+        for (const object of objects) {
+            if (isRef(object)) {
+                if (currentGroup.length) {
+                    objectGroups.push(currentGroup);
+                    currentGroup = [];
+                }
+                objectGroups.push(object);
+            } else {
+                currentGroup.push(object);
+            }
+        }
+        if (currentGroup.length) {
+            objectGroups.push(currentGroup);
+        }
+        return objectGroups.map((group) => {
+            if (isRef(group)) {
+                return group;
+            }
+            return Object.assign({}, ...group);
+        });
+    }
+    return Object.assign({}, ...objects);
+};
+
+const deepUnrefArrays = (val) => {
+    // object values as refs is fine, but array elements as refs should be unref'd
+    let checkedVal = isRef(val) ? unref(val) : val;
+
+    if (!isObject(checkedVal)) {
+        // primatives
+        return checkedVal;
+    }
+
+    if (isSet(checkedVal)) {
+        checkedVal = Array.from(checkedVal);
+    }
+
+    if (isArray(checkedVal)) {
+        return checkedVal.map(deepUnrefArrays);
+    }
+
+    return checkedVal;
+};
+
+export const combineClasses = (...classes) => {
+    // we unref your refs, so probably want a computed around this
+    // ultimately, strings and objects are classes, arrays are organization and containers
+    const rawClasses = deepUnrefArrays(classes);
+    const flattenedClasses = rawClasses.flat(Infinity);
+    const filteredClasses = flattenedClasses.filter(identity);
+    const hasStrings = filteredClasses.some(isString);
+    const hasObjects = filteredClasses.some(isObject);
+    if (hasStrings && !hasObjects) {
+        return filteredClasses.join(" ");
+    } else if (hasObjects && !hasStrings) {
+        return Object.assign({}, ...filteredClasses);
+    }
+    const result = objectifyClasses(...filteredClasses);
+    return isEmpty(result) ? undefined : result;
+};
+
+export const stringifyClass = (cls) => {
+    if (isArray(cls)) {
+        return stringifyClasses(...cls);
+    } else if (isObject(cls)) {
+        return Object.keys(cls)
+            .filter((key) => cls[key])
+            .join(" ");
+    } else {
+        return cls;
+    }
+};
+
+export const stringifyClasses = (...classes) =>
+    classes
+        .map(stringifyClass)
+        .filter((x) => x)
+        .join(" ");

package/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./assignReactiveObject";
+export * from "./classes";
 export * from "./debugMessage";
 export * from "./debugWatch";
 export * from "./flattenPaths";
@@ -7,4 +8,5 @@ export * from "./keyDiff";
 export * from "./lifecycleDebug";
 export * from "./loadingCombine";
 export * from "./set";
+export * from "./transformWalk";
 export * from "./watches";

package/utils/keyDiff.js

@@ -1,5 +1,5 @@
-import { flattenPaths } from "./flattenPaths.js";
-import { difference, intersection } from "./set.js";
+import { flattenPaths } from "./flattenPaths";
+import { difference, intersection } from "./set";
 
 /**
  * Calculate the difference between objects in terms of what keys

package/vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    test: {
+        globals: true,
+        environment: "jsdom",
+        coverage: {
+            reporter: ["text", "json-summary", "html"],
+        },
+    },
+});

package/babel.config.js

@@ -1,15 +0,0 @@
-// Only used by Jest
-module.exports = {
-    presets: [["@babel/preset-env", { useBuiltIns: "entry", corejs: "2", targets: { node: "current" } }]],
-    plugins: [
-        function () {
-            return {
-                visitor: {
-                    MetaProperty(path) {
-                        path.replaceWithSourceString("process");
-                    },
-                },
-            };
-        },
-    ],
-};

package/jest.config.mjs

@@ -1,27 +0,0 @@
-import path, { dirname } from "path";
-import { fileURLToPath } from "url";
-
-export default {
-    rootDir: path.resolve(dirname(fileURLToPath(import.meta.url))),
-    clearMocks: true,
-    coverageDirectory: "coverage",
-    coverageProvider: "babel",
-    coverageReporters: ["json-summary", "html", "clover", "text"],
-    moduleFileExtensions: ["vue", "js", "json"],
-    moduleNameMapper: {
-        "@/(.*)$": "<rootDir>/src/$1",
-        "~/(.*)$": "<rootDir>/node_modules/$1",
-    },
-    testEnvironment: "jsdom",
-    testMatch: ["<rootDir>/tests/unit/**/*.spec.js"],
-    testPathIgnorePatterns: [],
-    transform: {
-        "^.+\\.vue$": "@vue/vue3-jest",
-        "^.+\\js$": "babel-jest",
-    },
-    globals: {
-        "@vue/vue3-jest": {
-            babelConfig: true,
-        },
-    },
-};