🧾 Explore

• 🎮 Getting Started
  • Install
  • CDN
• 🌍 Browser Support
• 🤝 Contribute

Getting Started

So you're ready to take the dive? Awesome! Check out the wiki articles below on getting started. If you run into any problems or simply have ideas and suggestions, don't be shy about submitting an issue or pull request!

• Getting started
• Create a view
• JSX Renderer
• Add styles
• Properties & state
• Custom properties
• Lifecycle methods
• DOM events
• Methods & utilities

Install

With NPM:

$ npm i @bulba/element

Bulba will include needed packages alongside itself: @bulba/utils, @bulba/jsx, @bulba/template.

Using Bulba is then as simple as this for the Template flavor:

import { BulbaElement, register} from "@bulba/element"
import { Renderer } from "@bulba/template"

class MyComponent extends BulbaElement(Renderer) { ... }

And for the JSX flavor:

import { BulbaElement, register} from "@bulba/element"
import { Renderer, jsx, Fragment } from "@bulba/jsx"

class MyComponent extends BulbaElement(Renderer) { ... }

Note that the jsx and Fragment are pragmas for the internal JSX library, snabbdom, and should be included in any file with JSX. You'll also need to configure your environment to transform JSX.

Learn more about the Snabbdom JSX API in the modules section of their documentation. Bulba uses a syntax modifier internally for JSX to enable a more user-friendly prop signature.

CDN

You can specify the JSX or Template flavors using CDN. BulbaElement, the renderer, and utilities will be bundled together in this scenario.

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/[email protected]/dist/bulba-template.js"
  integrity="sha256-AmDcP/sdpRYuEzpOqxrrMUe+j2N4rXBDmuOtzhsngok="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/[email protected]/dist/bulba-template.min.js"
  integrity="sha256-rVw3SxOyQLMP8YGPSMmajj09cZ7Jw6y2Wol6XcE6PLo="
  crossorigin="anonymous"
></script>

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/[email protected]/dist/bulba-jsx.js"
  integrity="sha256-zsOCH9e2LQhReCMqnK9bsp4EliqVbp2EkXm+vsZcN/c="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/[email protected]/dist/bulba-jsx.min.js"
  integrity="sha256-ygwZLJhcHsbSyVfO+0gcgJqCWEYvcI+dNDdg+OL56Is="
  crossorigin="anonymous"
></script>

Note that if you use the CDN bundles, you should set all "@bulba/*" package external names to "Bulba" in your app bundler of choice.

Here's a rollup example:

const globals = {
  "@bulba/element": "Bulba",
  "@bulba/jsx": "Bulba",
  "@bulba/template": "Bulba",
  "@bulba/utils": "Bulba",
}

// export config
export default {
  // ...
  external: (id) => /@bulba\/./.test(id),
  output: {
    // ...,
    globals,
  },
}

Browser Support

The npm and browser bundles will work in all major browsers, except IE11. The package contains no explicit polyfills.

Use the below polyfills to achieve IE11 support. Include them once in your app (or page) before importing Bulba.

• Symbols (import via npm as core-js/features/symbol)
• Web Components

You will also need to run the bundle through ES5 transpilation for things like arrow functions.

Contribute

If you like the project or find issues, feel free to contribute!

See this StackOverflow answer on prerelease versioning.