diff --git a/README.md b/README.md index f458cc9..22797a1 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ -# wt.core assets source [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/bellord13/kit/) -## is a dependency wt.core [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/andreyleoua/wt.core/) +# wt.core assets source + +Источник: https://bitbucket.org/bellord13/kit/ + +## is a dependency wt.core + +Репозиторий wt.core: https://bitbucket.org/andreyleoua/wt.core/ Предназначен для асинхронной работы с ресурсами на веб-проектах. @@ -20,6 +25,8 @@ git clone https://bellord@bitbucket.org/bellord13/kit.git ./ `PluginManager` - класс для работы с плагинами +`window.kit` - объект, который изолирует все плагины + ## Базовые принципы ✨ Инициализация @@ -27,84 +34,200 @@ git clone https://bellord@bitbucket.org/bellord13/kit.git ./ Выдержка из плагина `core`: ```js -manager = new PluginManager(global, plugins = {}); +manager = new PluginManager(global); manager.register('PluginManager', { - alias: 'pm', - type: moduleTypeList.loader, - loader: function(module, exports, require, global) { - // return определяет, что выкинуть в global - return module.exports = manager; + alias: 'pm', + type: MD_TYPE.HMD, + handler: function(require, exports, module, global) { + return module.exports = manager; + } +}); +manager.register('config', { + type: MD_TYPE.HMD, + handler: function(require, exports, module, global) { + global.config = Object.assign({}, defaultConfig, config); } }); manager.install('PluginManager'); ``` -Создается экземпляр класса PluginManager и регистрирует сам себя. -Переменная `global` выполняем роль фасада для все установленных плагинов с допустимостью использования `alias`. Это позволит использовать функционал вне ядра. В качестве глобальной переменной используется `window.kit`. +Создается экземпляр класса `PluginManager` и регистрирует сам себя. +Переменная `global` выполняем роль фасада для всех установленных плагинов. В качестве глобальной переменной используется `window.kit`. В паре с менеджером сразу инициализируется `config` доступный из `window.kit.config`. -Пример вызова -```js -kit.$ -kit.jquery -``` ✨ Основные этапы работы с плагином: -| этап | метод | -| ------ | ------ | +| этап | метод | +|-------------|--------------------------------------------------------------| | Регистрация | register(`pluginId`, `config`) или registerPlugins(`object`) | -| Загрузка | load(`pluginId`, `callback`) | -| Установка | install(`pluginId`, `callback`) | -| Запрос | require(`pluginId`, `callback`) | +| Загрузка | load(`pluginId`, `callback`) | +| Установка | install(`pluginId`, `callback`) | +| Запрос | require(`pluginId`, `callback`) | -## Пример конфигурации +## Примеры регистрации + +### Пример регистрации Стандартного плагина (Тип default) ```js __PluginManager__.register('menu', { - path: kit.config.assetsPath + '/menu', - module: '/menu.js', - type: 'loader', - css: [ - '/menu.css' - ], - deps: ['lib', 'align', 'utils'] - } -); + path: kit.config.assetsPath + '/menu', + module: '/menu.js', + type: 'loader', + css: [ + '/menu.css' + ], + deps: ['lib', 'align', 'utils'] +}); + +kit.pm.register('UserCart', { + path: '/assets/plugins/cart/', + module: 'main.js', + js: ['jquery.min.js', ['utils.js', 'api.js']], // jquery -> (utils + api вместе) + css: ['style.css'], + autoRequire: true +}); ``` +### Пример регистрации HMD-плагина + +```js +kit.pm.register('Logger', { + type: 'HMD', + alias: ['AltLogger'], + handler: function(require, module, exports, global) { + var object = { + log: function(msg) { console.log('[Logger]: ' + msg); } + }; + // kit.require('Logger') вернет module + module.exports = object; + // return задает, что определить в global.Logger и global.AltLogger + return object.log; + }, + onInstall: function(p) { + console.log('Logger готов!'); + } +}); +``` + +### Пример регистрации UMD-плагина + +```js +kit.pm.register('MyUmdModule', { + type: 'UMD', + path: '/js/plugins/', + module: 'my-plugin.umd.js', // Файл с UMD-оберткой + deps: ['jquery'], // Если плагину нужен jQuery + autoRequire: true, + onInstall: function(plugin) { + console.log('UMD модуль успешно инициализирован'); + } +}); +``` + +### Пример регистрации ES-плагина + +```js +kit.pm.register('UserDashboard', { + type: 'ES', // Указываем тип ES (ECMAScript) + path: '/assets/modules/', // Базовый путь + module: 'dashboard.js', // Файл, содержащий "export default" + autoRequire: true, // Начать загрузку сразу + onInstall: function(plugin) { + // В plugin.module.exports попадет то, что экспортировано из файла + console.log('ES-модуль загружен:', plugin.module.exports); + } +}); +``` + +> Особенности работы с типом ES в твоем скрипте: + +- Нативная загрузка: Вместо создания обычного тега ` + + - - \ No newline at end of file + \ No newline at end of file diff --git a/tests/menuTest.php b/tests/menuTest.php index 8f13be4..d1da2a2 100644 --- a/tests/menuTest.php +++ b/tests/menuTest.php @@ -1,19 +1,9 @@ - -service()->assets()->setPlugins([ - 'kit:config', - 'kit:flex-kit', - 'kit:core', - 'kit:bsCore', - 'kit:collapse', - 'kit:site', - 'kit:toolkit', - 'kit:theme', - ])->render(); -} -$APPLICATION->ShowHead(); -?> + + + +