Как создать файл конфигурации для библиотеки?

Question

[MaxRyazan]

Собственно.
Не могу найти информацию, как создать в кастомной библиотеке файл конфигурации, который можно было бы переписывать в родительском приложении, которое использует эту библиотеку.

Например, у vite есть defineConfig, в котором мы можем переопределить некоторые параметры.

Хотелось бы понять, как реализовать подобное для своей библиотеки.

Comments

[Антон Иванов]

Весь конфиг передавать пропсом в либу, а сама либа внутри себя этот конфиг обрабатывает.

Answer 1

[Сергей Левченко]

"Не могу найти информацию," - ну как так то... Вы даже доку официальную не читали что-ли?

https://vuejs.org/guide/reusability/plugins.html#w...

// твоя библиотека(plugin)
import defaultOptions from './defaultOptions';
export default {
  install: (app, options = defaultOptions) => {
    // Регистрация компонентов/директив/хелперов и тп, в общем все что делает твоя библиотека
    // options - это как раз конфиг, который придет при инициализации твоей библиотеки в приложении и перезапишет дефолтный defaultOptions, если будет передан
   // можно сделать хитрее и реализовать частичную перезапись дефолтных, а не полную
  }
}

// твое приложение
import options from './options';
import plugin from './you/plugin';

app.use(plugin, options); // передаем библиотеке/плагину конфиг

Comments

[MaxRyazan]

причем здесь плагин вообще?
я не использую глобальную регистрацию компонентов - это фигня, которая только распухает итоговый бандл. Все компоненты импортируются по мере необходимости прямо в vue шаблоне.

мне нужно понять как реализовать defineConfig для моей библиотеки, чтобы компоненты, которые я оттуда использую можно было кастомизировать до определенных пределов в приложении - "родителе".
Например, пути для иконок, какие то основные настройки и тп.

Например, у меня в библиотеке, компонент, отрисовывающий svg в переиспользуемом компоненте смотрит на публичную папку public, а пользователя библиотеки не устраивает папка public и он хочет public/icons

хотелось бы чтобы можно было сделать так:

// mylib.config.js
export default defineConfig({
     iconsBasePath: 'public/icons'
})

[Сергей Левченко]

MaxRyazan, дак и чем мой ответ не угодил... Ну не хотите глобально регистрировать компоненты - не надо. Да и бандл не распухнет при правильно настроенных инструментах, но об этом я подробно не вижу смысла писать.

Я уже вам дал верный ответ. Но дополню его, чтобы стало понятнее.

// твоя библиотека(plugin)
import defaultOptions from './defaultOptions';
export default {
  install: (app, options = defaultOptions) => {
    // ок, мы не регаем глобально компоненты и тп, но мы регаем конфиг
   app.config.globalProperties.$myPluginConfig = options;
  }
}

а уже в компоненте библиотеки своей смотри в этот конфиг

const iconsBasePath = 'public';

computed: {
    iconsPath() {
      return this.$myPluginConfig.iconsPath || iconsBasePath;
    },
  },

Но бывает что не во всех случаях этого достаточно, тогда конфиг нужно писать в глобальную переменную
window.$myPluginConfig = {}

ну или так :)

const defineConfig = (options) => {
  window.$myPluginConfig = options;
};

defineConfig({
  iconsPath:  'public/icons'
})

[MaxRyazan]

Сергей Левченко,
Покрутив ваши варианты так и сяк, я не смог решить проблему, однако, ваши рассуждения подтолкнули меня на верный путь, и в конце концов я закрыл вопрос.
Суть в том, что когда мы регистрируем плагин, у нас есть доступ к объекту app и мы можем им управлять как нам нужно. В моём же случае, в функции defineConfig нет доступа до этого объекта, и контекст приложения не получается переопределить в родителе.

const defineConfig = (options) => {
  window.$myPluginConfig = options;
};

делать так я не стал, поскольку не уверен в надежности этого метода для разных браузеров.

Мое решение на текущий момент переопределять конфиг до момента mount приложения в main файле.

const app = createApp(App)

defineConfig({
    iconsBasePath: '/'
}, app)

app.mount('#app')

Таким образом оно работает как нужно и проблем нет.. за исключением того, что хотелось бы конфиг всё таки вместе с функцией вынести в отдельный файл.
Возможно я решу эту проблему созданием отдельного плагина именно для конфигурации, и интегрирую его в библиотеку. Тогда появится возможность сделать так:

const app = createApp(App)
app.use(MyLib)
      .mount('#app')

// файл конфигурации, например, my-lib.config.js
import {defineConfig} from 'my-lib'

export default defineConfig({
    iconsBasePath: '/'
})

Если у вас появились мысли на этот счет, буду рад выслушать. Через день или два отмечу ответ "верным решением".
Спасибо.

[Сергей Левченко]

MaxRyazan, Я рад что у вас что-то начало получаться, значит я сделал главное на мой взгляд. я вас подтолкнул к решению. Я как раз таки последнее время не выдаю готовых решений, стараюсь направить. Мысли у меня есть, но я не видел ваш код, да и смысла нет его смотреть уже. Дальше сами... Успехов!

Answer 2

[Антон Антон]

Сделать вместо "файла конфигурации" параметры конструктора или функции-инициализатора (собственно, defineConfig это оно и есть). Заполнять их из "родительского приложения"

Comments

[MaxRyazan]

спасибо, есть какая то ссылка куда сходить почитать или посмотреть?