@bulba/element NPM

🧾 Explore

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!

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/utils@0.14.3/dist/bulba-template.js"
  integrity="sha256-AmDcP/sdpRYuEzpOqxrrMUe+j2N4rXBDmuOtzhsngok="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/utils@0.14.3/dist/bulba-template.min.js"
  integrity="sha256-rVw3SxOyQLMP8YGPSMmajj09cZ7Jw6y2Wol6XcE6PLo="
  crossorigin="anonymous"
></script>

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/element@0.14.3/dist/bulba-jsx.js"
  integrity="sha256-zsOCH9e2LQhReCMqnK9bsp4EliqVbp2EkXm+vsZcN/c="
  crossorigin="anonymous"
></script>
<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@bulba/element@0.14.3/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,
  },
}