Installation

With npm:

$ npm install bd-core

With yarn:

$ yarn add bd-core

With bower:

bower install --save bd-core

Basic Usage

Backdraft is distributed with three versions of the code:

npm and yarn install Backdraft at npm_modules/bd-core. The three versions of the code are located as follows:

bower is similarly located except it uses bower_components in place of node_modules.

If you are using AMD, then you should configure the loader to map the package backdraft to node_modules/bd-core/dist/lib-umd.js. We recommend you try out bd-load for AMD loading (we're one the original AMD loader authors and our loaders have been used in hundreds of commercial apps). Here is the main document for a trivial "hello-world" Backdraft application; the document is located as a sibling to node_modules

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="node_modules/bd-load/load.js"></script>
    <script>
		require.config({
			packages: [
				{name: 'backdraft', location: './node_modules/bd-core/dist', main: "backdraft-umd"},
			]
		});
		window.onload = function(){
			require(["backdraft"], function(backdraft){
				let e = backdraft.e;
				backdraft.render(e("div", "hello, world"), document.getElementById("root"));
			})
		}
    </script>
</head>
<body>
<div id="root"></div>
</body>
</html>

ES6 modules can be painful. Since ES6 module loaders don't exist, module mapping (which, by the way, we invented) is not available with ES6 modules. We find it inconvenient to reference the install locations in every resource that imports symbols from Backdraft. To make things easier, we always create a resource in the root source directory of our projects that re-exports Backdraft symbols. For example, if a particular project organizes all of its source code in the /src directory, then we would create a file in that directory named backdraft.js with the following contents:

export * from "../node_modules/bd-core/lib.js"

This allows us to write a module that imports from Backdraft easily. Consider what /src/hello-world.js might look like:

import {render, e} from "./backdraft.js"

render(e("div", "hello, world"), document.getElementById("root"));