Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

library-utils

Package Overview
Dependencies
Maintainers
15
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

library-utils

Utils for component libraries processing and compilation

  • 3.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
15
Created
Source

Набор утилит для компиляции и генерации доков для react компонентов

npm license travis appveyor greenkeeper

gulpfile

Готовый gulpfile со всеми настройками, необходимыми для сборки библиотеки

Ваш package.json:

"docs": "gulp --cwd . --gulpfile ./node_modules/library-utils/gulpfile.js docs",
"compile": "gulp --cwd . --gulpfile ./node_modules/library-utils/gulpfile.js compile",

Для более тонкой настройки используйте gulp-tasks или настройки в package.json.

gulp-tasks

Вы можете использовать готовый набор gulp-задач.

Пример gulpfile вашего проекта:

const createTasks = require('library-utils/gulp-tasks');
createTasks('arui-feather');

Таким образом будет создано две задачи:

  • gulp docs - построение документации по компонентам
  • gulp compile - компиляция css/js/ts файлов библиотеки, подготовка к публикации.

Параметры createTask

  • packageName - обязательный. Имя пакета. Будет использоваться для генерации документации и тайпингов.
  • options - не обязательный. Настройки путей.
    • publishDir - имя папки для публикации, туда будут записываться скомпилированные файлы
    • docsDir - имя папки для документации
    • tsCompiler - компилятор для typescript
    • tsConfigFilename - путь до файла с конфигурацией typescript
    • componentsGlob - glob для файлов js компонентов
    • tsComponentsGlob - glob для файлов ts компонентов
    • jsGlob - glob для всех публикуемых js файлов пакета
    • tsGlob - glob для всех публикуемых ts файлов пакета
    • autoDtsGlob - glob для js файлов, для которых будет создаваться d.ts
    • cssGlob - glob для всех публикуемых css файлов пакета
    • cssCopyGlob - glob для всех копируемых css фалов пакета
    • resourcesGlob - glob для всех ресурсных файлов пакета (картинки, шрифты)
    • publishFilesGlob - glob для всех дополнительных файлов, которые должны попасть в публикацию

Настройки в package.json

Так же можно указать нужные свойства из options в ключе library-utils

Пример package.json вашего проекта:

{
    "name": "arui-feather",
    "library-utils": {
        "publishDir": ".my-custom-publish-dir",
        "tsCompiler": "my-fork-of-typescript",
    }
}

componentPackage

Плагин для создания package.json из всех файлов. Нужен для упрощения импортов. В случае, если ваша библиотека имеет структуру типа

component-name/
    component-name.js

создание package.json поможет использовать этот компонент как require('library-name/component-name').

Пример использования:

const componentPackage = require('library-utils/gulp/component-package');

gulp.src('file.js')
    .pipe(componentPackage())
    .pipe(gulp.dest('dist'));

В результате в папке dist будет создан файл package.json:

{ "main": "file.js", "typings": "file.d.ts" }

componentTypings

Плагин для создания d.ts файлов для react компонентов. Внутри использует библиотеку react-docgen. Поддерживается генерация только из es6+ кода (не будет работать для уже скомпилированного кода).

Пример использования:

const componentTypings = require('library-utils/gulp/component-typings');

gulp.src('file.js')
    .pipe(componentTypings('libraryName'))
    .pipe(gulp.dest('dist'));

В результате в папке dist будет создан файл file.d.ts.

declare module 'libraryName/file' {
    import * as React from 'react';
    export interface FileProps {
        /**
         * Управление видимостью компонента
         */
        visible?: boolean;
    }
    export default class File extends React.Component<LoaderProps, any>{
    }
}

Параметры:

  • libraryName - префикс для названия модулей. В итоговых d.ts файлах имя модуля будет создать из libraryName + '/' + filename.

componentDocs

Плагин для создания документации для react компонентов.

Пример использования:

const componentDocs = require('library-utils/gulp/component-docs');

gulp.src('file.js')
    .pipe(componentDocs('libraryName'))
    .pipe(gulp.dest('docs'));

В результате в папке docs будет создан файл README.md, с описанием props и пубичных методов компонента.

libraryDoc

Плагин для создания индексного файла документации.

Пример использования:

const libraryDoc = require('library-utils/gulp/library-doc');

gulp.src('src/*.js')
    .pipe(libraryDoc('libraryName'))
    .pipe(gulp.dest('docs'));

Лицензия

The MIT License (MIT)

Copyright (c) 2017 Alfa Laboratory

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

FAQs

Package last updated on 24 Sep 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc