MCPcopy Index your code
hub / github.com/cognitom/riot-bootstrap

github.com/cognitom/riot-bootstrap @v1.1.0

Chat with this repo
repository ↗ · DeepWiki ↗ · release v1.1.0 ↗ · + Follow
4 symbols 7 edges 7 files 1 documented · 25%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Riot Bootstrap

Bootstrap-like Components for Riot.js

  • Readable: no more cluttered class names!
  • Stand-alone: independent from Bootstrap
  • Modular: one file, one component
  • Packaged: HTML/CSS/JavaScript are packaged into one file

v1.0 API Changed

  • Use onclick event handler on <btn>, instead of onpush
  • onselect event handler on <menu> now passes an event object instead of a selected string.

Demo

Getting started

In short, use the tags as just like HTML: <btn>, <btn-group>, <menu>...etc.

<btn>Your Button</btn>

1) Use directly in HTML file

<!DOCTYPE html>
<html>
  <head>
    <title>riot-bootstrap</title>
    <link rel="stylesheet" href="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
  </head>
  <body>
    <section>
      <btn>Default</btn>
      <btn option="primary">Primary</btn>
      <btn option="success">Success</btn>
    </section>
    <script src="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/cdn.jsdelivr.net/riot/2.0/riot.js"></script>
    <script src="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/dist/riot-bootstrap.js"></script>
    <script>riot.mount('*')</script>
  </body>
</html>

2) Use in tag file (better)

  • load riot.js
  • load normalize.css
  • load riot-bootstrap (this library)
  • load your tag file
  • then, riot.mount('app')
<!DOCTYPE html>
<html>
  <head>
    <title>riot-bootstrap</title>
    <link rel="stylesheet" href="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
  </head>
  <body>
    <app></app>
    <script src="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/cdn.jsdelivr.net/riot/2.0/riot.js"></script>
    <script src="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/dist/riot-bootstrap.js"></script>
    <script src="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/app.js"></script>
    <script>riot.mount('app')</script>
  </body>
</html>

// app.html
<app>
  <section>
    <btn onclick={ click }>Say 'Hi!'</btn>
  </section>
  <script>
    click (e) {
      alert('Hi!')
    }
  </script>
</app>

3) Use with rollup (best)

  • Install riot-bootstrap via NPM.
  • Create the main script.
  • Prepare your tag files.
  • Rollup.
  • Load the compiled script into HTML.
$ npm install --save riot-bootstrap

// app.js
import riot from 'riot'
import 'riot-bootstrap'
import './app.tag' // and other components
riot.mount('app')

// app.tag
<app>
  <section>
    <btn onclick={ click }>Say 'Hi!'</btn>
  </section>
  <script>
    this.click = e => {
      alert('Hi!')
    }
  </script>
</app>

<!DOCTYPE html>
<html>
  <head>
    <title>riot-bootstrap</title>
    <link rel="stylesheet" href="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/cdn.jsdelivr.net/normalize/3.0.3/normalize.css">
  </head>
  <body>
    <app></app>
    <script src="https://github.com/cognitom/riot-bootstrap/raw/v1.1.0/app.js"></script>
  </body>
</html>

Components

See the demo page.

Scope emulation

Riot.js has a scope for most inner Tag element. So we need to write like this:

<app>
  <btn-group>
    <btn onpush={ parent.parent.push }>{ parent.parent.message }</btn>
  </btn-group>
  this.message = 'Click me!'
  push (e) {
    this.message = 'Thanks!'
    this.update() // needed to re-render
  }
</app>

But this is a little bit inconvenient, so riot-bootstrap has a simple 'Scope emulation' mechanism. Now we can write like this.

<app>
  <btn-group>
    <btn onpush={ push }>{ message }</btn>
  </btn-group>
  this.message = 'Click me!'
  push (e) {
    this.message = 'Thanks!'
    // automatically re-rendered
  }
</app>

There is some limitation:

  • The variables in the parent's scope are updated just before update event.
  • The view is automatically re-rendered only if the method is a member of Tag element. In NG case below, this.update() is needed to call manually.
    • OK: <btn onpush={ push }>Hi!</btn>
    • NG: <btn onpush={ memberOf.subObject }>Hi!</btn>
    • NG: <btn onpush={ returnFunction() }>Hi!</btn>

History

  • v0.0.1: Buttons, button groups, dropdowns
  • v0.1.0: Now transclusion is supported, thanks to Riot 2.0.15
  • v0.1.1: Radio groups
  • v0.1.2: Support Browserify and publish to NPM
  • v0.1.7: Fix: CommonJS issue
  • v0.2.0: Scope emulation. Related to https://github.com/muut/riotjs/issues/662
  • v0.2.1: Fix: automatic update
  • v0.2.2: Fix: opts also supported in scope emulation
  • v0.2.3: Fix: disabled now works with boolean
  • v0.2.4: Fix: update disabled status after second update
  • v0.3.0: parentScope as a mixin
  • v0.3.1: Use mixin initializer
  • v0.3.2: Add href attribute to btn tag
  • v0.3.3: Fix the bug #10
  • v1.0.0: Completely rewrites into ES6!, supports domEvent, makes parentScope external. Add: <calendar> and <time-picker>.
  • v1.1.0: align="right" option for <menu> by @cuu508

TODO:

Rebuilding Bootstrap components for Riot.js

  • Input groups
  • Breadcrumbs
  • Badges
  • Panels
  • Progress bars
  • Anything else? Send us a new issue or PR!

Core symbols most depended-on inside this repo

runner
called by 1
test/helper.js
fNOP
called by 0
test/polyfill.js
fBound
called by 0
test/polyfill.js
serial
called by 0
test/helper.js

Shape

Function 4

Languages

TypeScript100%

Modules by API surface

test/polyfill.js2 symbols
test/helper.js2 symbols

For agents

$ claude mcp add riot-bootstrap \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact