• Stars
    star
    280
  • Rank 143,975 (Top 3 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 11 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Install Web Components through Composer

DEPRECATED

Component Installer has been deprecated. Use one of the following projects instead:

Example

composer require oomphinc/composer-installers-extender
  "extra": {
    "installer-types": ["component"],
    "installer-paths": {
      "components/{$name}/": ["type:component"]
    }
  }

Component Installer for Composer Build Status

Allows installation of Components via Composer.

Install

composer require robloach/component-installer
{
    "require": {
        "robloach/component-installer": "*"
    }
}

Usage

To install a Component with Composer, add the Component to your composer.json require key. The following will install jQuery and normalize.css:

composer require components/jquery
composer require components/normalize.css
{
    "require": {
        "components/jquery": "2.*",
        "components/normalize.css": "3.*",
        "robloach/component-installer": "*"
    }
}

Using the Component

The easiest approach is to use the Component statically. Just reference the Components manually using a script or link tag:

<script src="components/jquery/jquery.js"></script>
<link href="components/normalize/normalize.css" rel="stylesheet">

For complex projects, a RequireJS configuration is available, which allows autoloading scripts only when needed. A require.css file is also compiled, including all Component stylesheets:

<!DOCTYPE html>
<html>
    <head>
        <link href="components/require.css" rel="stylesheet" type="text/css">
        <script src="components/require.js"></script>
    </head>
    <body>
        <h1>jQuery+RequireJS Component Installer Sample Page</h1>
        <script>
          require(['jquery'], function($) {
            $('body').css('background-color', 'green');
          });
        </script>
    </body>
</html>

Configuration

There are a number of ways to alter how Components are installed and used.

Installation Directory

It is possible to switch where Components are installed by changing the component-dir option in your root composer.json's config. The following will install jQuery to public/jquery rather than components/jquery:

{
    "require": {
        "components/jquery": "*"
    },
    "config": {
        "component-dir": "public"
    }
}

Defaults to components.

Base URL

While component-dir depicts where the Components will be installed, component-baseurl tells RequireJS the base path that will use when attempting to load the scripts in the web browser. It is important to make sure the component-baseurl points to the component-dir when loaded externally. See more about baseUrl in the RequireJS documentation.

{
    "require": {
        "components/jquery": "*"
    },
    "config": {
        "component-dir": "public/assets",
        "component-baseurl": "/assets"
    }
}

Defaults to components.

Assetic filters

{
    "require": {
        "components/jquery": "*"
    },
    "config": {
        "component-dir": "public/assets",
        "component-baseurl": "/assets",
        "component-scriptFilters": {
            "\\Assetic\\Filter\\GoogleClosure\\CompilerApiFilter": []
        },
        "component-styleFilters": {
            "\\Assetic\\Filter\\CssImportFilter": []
        }
    }
}

Creating a Component

To set up a Component to be installed with Component Installer, have it require the package robloach/component-installer and set the type to component, but it is not necessary:

{
    "name": "components/bootstrap",
    "type": "component",
    "require": {
        "robloach/component-installer": "*"
    },
    "extra": {
        "component": {
            "scripts": [
                "js/bootstrap.js"
            ],
            "styles": [
                "css/bootstrap.css"
            ],
            "files": [
                "img/*.png",
                "js/bootstrap.min.js",
                "css/bootstrap.min.css"
            ]
        }
    }
}
  • scripts - List of all the JavaScript files that will be concatenated together and processed when loading the Component.
  • styles - List of all the CSS files that should be concatenated together into the final require.css file.
  • files - Any additional file assets that should be copied into the Component directory.

Component Name

Components can provide their own Component name. The following will install jQuery to components/myownjquery rather than components/jquery:

{
    "name": "components/jquery",
    "type": "component",
    "extra": {
        "component": {
            "name": "myownjquery"
        }
    }
}

Defaults to the package name, without the vendor.

RequireJS Configuration

Components can alter how RequireJS registers and interacts with them by changing some of the configuration options:

{
    "name": "components/backbone",
    "type": "component",
    "require": {
        "components/underscore": "*"
    },
    "extra": {
        "component": {
            "shim": {
                "deps": ["underscore", "jquery"],
                "exports": "Backbone"
            },
            "config": {
                "color": "blue"
            }
        }
    },
    "config": {
        "component": {
            "waitSeconds": 5
        }
    }
}

Current available RequireJS options for individual packages include:

  • shim
  • config
  • Anything that's passed through config.component is sent to Require.js

Packages Without Composer Support

Using repositories in composer.json allows use of Component Installer in packages that don't explicitly provide their own composer.json. In the following example, we define use of html5shiv:

{
    "require": {
        "afarkas/html5shiv": "3.6.*"
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "afarkas/html5shiv",
                "type": "component",
                "version": "3.6.2",
                "dist": {
                    "url": "https://github.com/aFarkas/html5shiv/archive/3.6.2.zip",
                    "type": "zip"
                },
                "source": {
                    "url": "https://github.com/aFarkas/html5shiv.git",
                    "type": "git",
                    "reference": "3.6.2"
                },
                "extra": {
                    "component": {
                        "scripts": [
                            "dist/html5shiv.js"
                        ]
                    }
                },
                "require": {
                    "robloach/component-installer": "*"
                }
            }
        }
    ]
}

Packages Without Component Support In composer.json

Using extra in composer.json allows use of Component Installer in packages that don't explicitly provide support for component, but do ship with their own composer.json. Using extra with packages that ship with Component Installer, will override component's settings for that package.

{
    "require": {
        "datatables/datatables": "~1.10"
    },
    "extra": {
        "component": {
            "datatables/datatables": {
                "scripts": [
                    "media/js/jquery.dataTables.js"
                ],
                "styles": [
                    "media/css/jquery.dataTables.css"
                ],
                "files": [
                    "media/js/jquery.dataTables.min.js",
                    "media/css/jquery.dataTables.min.css",
                    "media/images/*.png"
                ]
            }
        }
    }
}

Not Invented Here

There are many other amazing projects from which Component Installer was inspired. It is encouraged to take a look at some of the other great package management systems:

License

Component Installer is licensed under the MIT License - see LICENSE.md for details.

More Repositories

1

raylib-cpp

C++ Object Oriented Wrapper for raylib
C++
358
star
2

node-raylib

Node.js bindings for Raylib
JavaScript
229
star
3

docker-composer

🙆‍♀️ Docker container to install and run Composer.
Makefile
104
star
4

raylib-lua-sol

A simple and easy-to-use Lua library to enjoy videogames programming
C++
77
star
5

jquery-once

💲 Act on jQuery elements only once.
JavaScript
61
star
6

raylib-nuklear

Nuklear immediate mode GUI for raylib
C
56
star
7

Dockie

🐳 Collection of Modern Development Environments for Docker
Shell
50
star
8

base16-geany

🔮 Base16 Scheme for Geany
Makefile
40
star
9

lutris-kodi-addon

Lutris Kodi Addon
Python
38
star
10

libretro-dolphin-launcher

Launch Dolphin from RetroArch/libretro
C
37
star
11

raylib-aseprite

Load Aseprite files for animated sprites in raylib.
C
37
star
12

docker-compose-drupal

DEPRECATED: Use Docker4Drupal
31
star
13

raylib-duktape

C++
30
star
14

docker-pa11y

pa11y Docker Container
Dockerfile
27
star
15

libretro-dats

Build some of the libretro-database DATs
JavaScript
24
star
16

raylib-physfs

Integrate PhysFS with raylib to load images, audio, and fonts, from .zip files.
C
24
star
17

generator-docpad

✏️ Yeoman generator for DocPad
JavaScript
21
star
18

raylib-tmx

Load Tiled .tmx files for tile maps in raylib, using the TMX C Loader.
C
20
star
19

raylib-libretro

👾 libretro frontend using raylib.
C
19
star
20

drush-docker

🐳 Docker Container to run Drush
Dockerfile
19
star
21

libretro-thumbnails-check

Checks consistency of libretro-thumbnails
JavaScript
19
star
22

raylib-app

Application wrapper for raylib
C
15
star
23

retroarch-theme-materialdesign

Material Design theme for RetroArch
PHP
14
star
24

Bunnymark-TIC80

Bunnymark ported to a few languages in TIC-80 for performance testing.
Lua
13
star
25

docpad-plugin-grunt

🐗 Run Grunt.js tasks when building with DocPad
CoffeeScript
13
star
26

Awesome-ChaiScript

A curated list of ChaiScript Modules and Utilities.
12
star
27

docker-lamp

DEPRECATED: See Forge instead
PHP
12
star
28

ecwolf

Git mirror of ECWolf
C++
12
star
29

libretro-database-scummvm

ScummVM.dat file to run ScummVM games in RetroArch
JavaScript
12
star
30

sdl2_gfx

SDL2_gfx Mirror, likely out of date
HTML
11
star
31

docker-google-appengine

Google App Engine Docker container
Shell
10
star
32

xor-crypt

🔣 Simple JavaScript XOR string encryption library
HTML
10
star
33

composer.deb

Build a Debian package to install and use Composer.
Makefile
10
star
34

ChaiLove-Launcher

🚀 Launch applications through ChaiLove
9
star
35

raylib-wasm

WIP
C
9
star
36

ChaiLove-FloppyBird

🐦 Flappy Bird in ChaiLove
9
star
37

raylib_functions_parser

Fork of raysan5's raylib.h parser to output JSON
C
9
star
38

docpad-plugin-webpack

✏️ Bundle CommonJs/AMD Modules using webpack
CoffeeScript
8
star
39

nuklear_sdl_12

SDL 1.2 support for Nuklear
C
8
star
40

raylib-tileson

Use Tiled maps in raylib, through Tileson.
C++
7
star
41

DangerousDave-TIC80

Dangerous Dave in TIC-80
7
star
42

raylib-api

Exports of the raylib API from raylib_parser
Lua
7
star
43

awesome-sdl

Curated list of awesome libraries and bindings for SDL.
7
star
44

net.lutris.Lutris.old

Lutris for Flatpak
6
star
45

raylib-chaiscript

ChaiScript bindings for raylib, a simple and easy-to-use library to learn videogames programming.
C++
6
star
46

wren-bind

C
5
star
47

tic80-js

Bundle your TIC-80 JavaScript ES6 Games
JavaScript
5
star
48

datfile

ClrMamePro DAT file parser for Node.js
JavaScript
5
star
49

love-lutris

Lutris game launcher for Love2D or RetroArch/libretro
Lua
5
star
50

httpserver

PHP 5.4 HTTP Server wrapper.
PHP
4
star
51

wren-assert

Minimalistic assertion library for unit testing in Wren.
Makefile
4
star
52

asdf-emsdk

Emscripten SDK plugin for asdf version manager
Shell
4
star
53

ubuntu-mate

GRUB2 Theme for Ubuntu MATE
Shell
4
star
54

raylib-meson

raylib meson build system.
Meson
4
star
55

scriptpacker

Package multiple Wren, Squirrel or ChaiScript files into one, through JavaScript.
JavaScript
4
star
56

pntr

Image manipulation library for C.
C
4
star
57

docker-clean

🐳 Kill and delete all Docker containers and images
Shell
4
star
58

docker-fig-php

A port of the Fig Quick Start example to PHP and MySQL
PHP
4
star
59

libretrojs

C++
3
star
60

wren-path

Work with file and directory paths in Wren.
3
star
61

SDL_physfs

PhysFS virtual file system support for SDL.
C
3
star
62

Fission

A C++-ish wrapper for nuklear
C++
3
star
63

awesome-dats

A curated list of awesome DAT files.
JavaScript
3
star
64

raylib-assert

Minimalistic assertion library for raylib.
C
3
star
65

libretro-database-dos

DOS.dat for libretro-database
JavaScript
3
star
66

slides

Presentation slides for various conferences
HTML
3
star
67

ChaiScript_Extras_Box2D

ChaiScript Box2D Bindings
C++
3
star
68

language-drupal

Drupal syntax highlighting and snippets for Atom.io
CoffeeScript
3
star
69

bowersatis

Satis repository to index Bower packages.
PHP
3
star
70

libretro-rimage

Use pntr instead
C
3
star
71

Sokoban

Sokoban for Dinothawr
3
star
72

component-installer-example

An example of using Component Installer.
HTML
3
star
73

raylib-umka

Umka language bindings for raylib.
C
3
star
74

dotfiles

📂 My Dotfiles
Shell
3
star
75

sdl2js

SDL2.js - Experimental Node.js bindings to SDL2.
JavaScript
2
star
76

rimage

Use raylib's Image module by itself.
C
2
star
77

CMakePacks

CMake definition file for Duktape, raylib, and Umka.
C
2
star
78

raylib-assetsys

Use the file system abstraction library, assetsys.h, to load raylib assets from .zip files.
C
2
star
79

raylib-squirrel

C++
2
star
80

assetic-bundle

Sculpin bundle to add support for Assetic?
PHP
2
star
81

ChaiScript.js

JavaScript port of ChaiScript
HTML
2
star
82

metalsmith-jstransformer-layouts

Deprecated with Metalsmith JSTransformer
JavaScript
2
star
83

docker-drupal8

DEPRECATED: See /robloach/forge instead.
Shell
2
star
84

raylib-imagedraw

Extra Image manipulation methods for raylib.
C
2
star
85

Threes-TIC80

Threes in TIC-80
JavaScript
2
star
86

libretro-database-tic80

TIC-80 database for libretro
JavaScript
2
star
87

reveal-giphy

Rapid Giphy Reveal.js presentations
JavaScript
2
star
88

require-one

🎣 Require the first found module from an array.
JavaScript
2
star
89

raygui-container

Adds state to raygui, allowing for gamepad/keyboard-only support.
C
2
star
90

node-sdl2-pong

Pong, using Node.js and SDL2
JavaScript
1
star
91

node-sdl2-gfx

SDL2_gfx bindings for Node.js
JavaScript
1
star
92

libretro-fbg

C
1
star
93

pntr_app

Application wrapper for pntr.
C
1
star
94

YoxViewOld

A GIT branch from YoxView.
JavaScript
1
star
95

node-physfs

PhysicsFS (physfs) bindings for Node.js
JavaScript
1
star
96

docker-docpad

DEPRECATED: See docpad/dockerfile instead
Shell
1
star
97

ChaiLove-JSTest

🎮 Simple ChaiLove Joystick test application
1
star
98

jquery.ui.widget

jQuery UI Widget
JavaScript
1
star
99

wasm4-as

Drop-in replacement to WASM-4's wasm4.ts to make using AssemblyScript with WASM-4 easy
TypeScript
1
star
100

metalsmith-json-feed

Experimental use of a JSON Feed in Metalsmith
JavaScript
1
star