javascript - Ρυθμίσεις βιβλιοθήκης NPM σε παγκόσμιο επίπεδο πακέτου


Αυτή τη στιγμή εργάζομαι σε μια βιβλιοθήκη για το React, και δεν γνωρίζω ακριβώς πώς μπορώ τεχνικά να υλοποιήσω μια λειτουργία που έχω στο μυαλό μου.

Βασικά είναι μια βιβλιοθήκη επικύρωσης φορμών και όλη η διαμόρφωση περνάει ως παράμετρος στο hook. Μοιάζει έτσι:

const myFormReferenceObject = useForm({
    onSubmit: (values) => {
        // do whatever you want with the values
    },
    initialState: record,
    formatMessage: translate,
    submitUnmountedFields: false
});

Το θέμα είναι, νομίζω ότι θα μπορούσε να είναι πολύ χρήσιμο να υπάρχει κάποιο είδος παγκόσμιας ρύθμισης έτσι ώστε να μην χρειάζεται να επαναλαμβάνεσαι 100 φορές για κάθε φόρμα που δημιουργείς.

Η πρώτη μου ιδέα ήταν να το κάνω όπως το axios, όπου δημιουργείς μια περίπτωση axios και διαμορφώνεις την περίπτωση παγκοσμίως. Τώρα, δεν έχω ένα αντικείμενο περίπτωσης αφού απλώς καλώ μια συνάρτηση/κλήση hook του React.

Τότε μου ήρθε η ιδέα να έχω ένα namespace στο αντικείμενο window με τη διαμόρφωση εκεί. Τότε το hook μου θα μπορούσε πάντα να ελέγχει αν υπάρχει διαμόρφωση σε αυτό το window["namespace"] για να διαμορφώσει ή να παρακάμψει όλες τις φόρμες ταυτόχρονα.

Ένας άλλος, ίσως πιο αναλυτικός τρόπος στο React για να το κάνεις, θα ήταν να δημιουργήσεις ένα context για τη διαμόρφωση. Αλλά για να είμαι ειλικρινής, πραγματικά δεν θέλω να το κάνω με αυτόν τον τρόπο, επειδή η ίδια η βιβλιοθήκη είναι πολύ απλή και εύκολη στη χρήση. 1. Κάλεσε το hook για να δημιουργήσεις μια φόρμα, 2. δώσε την αναφορά της φόρμας σε κάθε πεδίο εισαγωγής με validator σε επίπεδο πεδίου και props κλπ. Μου αρέσει η απλότητα και η προσθήκη ενός context κάπως καταστρέφει την απλότητα, αφού πρέπει πάντα να περικλείεις τα components σου με ένα context. Από την άλλη, θα μπορούσες στη συνέχεια να έχεις πολλαπλά contexts για διαφορετικά modules στην εφαρμογή, το οποίο θα ήταν επίσης πολύ ωραίο.

Έχεις καλύτερη ιδέα ή νομίζεις ότι πρέπει απλώς να προχωρήσω με τη μέθοδο του παραθύρου;

Απάντηση #1

Αν έχετε παγκόσμια ρύθμιση, μπορείτε απλώς να τη διαδώσετε όταν καλείτε το useForm.

const myFormReferenceObject = useForm({
    ...myGlobalConfig,
    onSubmit: (values) => {
        // do whatever you want with the values
    },
});

Επίσης, αν χρησιμοποιήσετε τη μέθοδο του παραθύρου, μπορείτε να κάνετε window[a symbol] αντί για window[a string] για να αποφύγετε συγκρούσεις.