Meteor Blaze Bootstrap 4 Components

Generic Bootstrap 4 components library for Meteor Blaze. See the DEMO

Note, that we are in status WIP, which means "Initial development is in progress, but there has not yet been a stable, usable release suitable for the public." However, there are already releases on atmosphere for trying out the latest state.

Features

• NEW! All components are imported using dynamic import, resulting in an initial package size of about 3KB!
• All Bootstrap components as parameterized Blaze Templates (see the project overview for supported components)
• Write Template code that is easier to reason about
• Keeps the naming conventions from Bootstrap
• Abstracts base classes (like btn) away, so you can focus on the code that matters
• Passing arbitrary data- attributes to components without the need for further config
• Pass events as parameters or use the classic event mapping from Blaze
• Rich examples DEMO that runs in analogy to the Bootstrap documentation

Getting started

This package comes with out-of-the-box Botstrap 4 components that can be included in any Meteor Blaze project.

Prerequisites

This package comes without a hard-wired dependency to Bootstrap. This is to make sure that you can choose the Bootstrap version to run by yourself. You need therefore to add Bootstrap yourself:

$ meteor npm install --save bootstrap jquery popper.js

In your client app you need to import Bootstrap and this package like the following:

import 'meteor/jkuester:blaze-bs4'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css' // this is the default BS theme as example
import popper from 'popper.js'
global.Popper = popper // fixes some issues with Popper and Meteor

Installing this package

You can install the package from atmosphere via:

$ meteor add jkuester:blaze-bs4

The templates are automatically added and are immediately available. Note, that the

How to use

The components are loaded using dynamic imports, so the initial bundle size is kept small.

To import the packages, you need to first import the context via

import { BlazeBs4 } from 'meteor/jkuester:blaze-bs4'

BlazeBs4.button.load().then(loaded => console.log('button template loaded'))

you can also load multiple components at once using

import { BlazeBs4 } from 'meteor/jkuester:blaze-bs4'

Promise.all([
  BlazeBs4.button.load(),
  BlazeBs4.tooltip.load(),
  BlazeBs4.modal.load()
]).then(loaded => console.log('required templates loaded'))

For a full documentation of each supported component, please run the examples DEMO

Running the tests locally

The package folder blaze-bs4/ contains all the components and also the test files. We use mocha and chai to run the unit tests.

To run the tests cd into the blaze-bs4 folder and run the following command:

$ TEST_WATCH=1 meteor test-packages ./ --driver-package meteortesting:mocha

Running the examples locally

When developing components and improving this package you may also want to improve the examples project. To run it you need clone this project to your local machine. Inside

$ git clone [email protected]:jankapunkt/meteor-blaze-bs4.git

The project contains a folder named examples which serves multiple purposes:

• Mime the code examples from the Bootstrap 4 components documentation.
• Run the code lint using JavaScript Standard Style.
• Run the tests against the components. The package itself contains no Bootstrap, so we can only test the full intended behavior including events , effects, popups, modals etc. using the examples project.
• Build the client-side project to server as Github-Page environment.

In order to set up the example project you need to first install the dependencies:

$ cd meteor-blaze-bs4/examples && meteor npm install

From there you can then run several scripts, that

Testing the package components

To test the package you can run inside the example project

$ meteor npm run test

which will run a mocha test suite that refreshes when the example or package code changes. Suitable for development.

To run the cli-only tests you need to execute the following script:

$ meteor npm run test-cli

Run the example project

You can also run the example project locally. To do that you need to execute

$ meteor npm run examples

Build the example project for Github pages

The build script uses meteor-build-client to create a client-only bundle of the example project that can be loaded via Github pages. Not, that this requires meteor-build-client to be installed.

To build the client app execute the following script

$ meteor npm run build

Deployment

This package does not need additional deployment configuration. Atmosphere publishing will be done by Jan Küster. Merged PRs will be automatically published.

Built With

• Meteor
• Blaze
• Bootstrap

Contributing

Please see the contribution guidelines.

Current Progress

1.0

See the project overview.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

The conventions for versioning are:

• major - Increment, if there is a major change in Bootstrap that affects major changes in this package. This will be 0 until all components have been implemented and 1 once all components have been basically implemented.
• minor - Increment, if there are severe changes in a component or new features added.
• patch - Increment, if there are minimal changes / updates / fixes in a component.

Authors

• Jan Küster - Initial work - jankapunkt

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• Inspired by React Bootstrap