Getting started

Together let's figure out how we can get Boyo Core running in a project.

Note #

None of the methods shown here will actually work for now. If you'd like to install the library, just holla at me :).

Using a script tag #

Since the library requires no build tool at all, it can easily be loaded from a <script> tag.

Auto init #

The simplest and easiest way to get started is to place a script tag pointing to a URL serving a Boyo Core script, with the addition of an init attribute, anywhere in your document.

(Don't forget the defer attribute if the script tag is placed before the HTML body).

<head>
    <script src="https://unpkg.com/@boyojs/boyo-core" defer init></script>
</head>

Once the document is fully loaded it will automatically mount up an app and make a BoyoCore property available on the global window object.

New components, directives and others can be registered during the app mounting process:

<script src="https://unpkg.com/@boyojs/boyo-core" defer init></script>

<script>
    document.addEventListener('boyo:app:mounting', ({ detail: app }) => {
        app.component(...);
    });
</script>

Auto init options #

The following attributes can be set on the script tag allong side the init attribute to customize the options of the app to be mounted:

  • prefix
  • argument
  • modifier
  • name
  • root

More details on the app options on the "Creating an application" page.

Example:

<script src="https://unpkg.com/@boyojs/boyo-core" prefix="data-o-" root="#app" defer init></script>

<div id="app">
    <button data-o-component="...">Click me</button>
</div>

<script>
    document.addEventListener('boyo:app:mounting', ({ detail: app }) => {
        app.component(...);
    });
</script>

Manual init #

If you'd like control over the mounting process, simply place a script tag anywhere on your page pointing to an URL serving a Boyo Core script but without the init attribute.

(Don't forget the defer attribute if the script tag is placed before the HTML body).

<head>
    <script src="https://unpkg.com/@boyojs/boyo-core" defer></script>
</head>

Once the script is loaded it will make a BoyoCore property available on the global window object.

Creating a new Boyo app would therefore be as easy as:

<script src="https://unpkg.com/@boyojs/boyo-core" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        BoyoCore.createApp().mount();
    });
</script>

You also have the option of loading the library through an inline script with type="module":

<script type="module">
    import { createApp } from 'https://unpkg.com/@boyojs/boyo-core?module';

    createApp().mount();
</script>

Using the NPM registry #

Prerequisites #

  • Familiarity with the command line
  • Node.js installed

If you'd like to integrate the library directly in your bundle you can do so by installing it from the NPM registry:

Via NPM

npm i @boyojs/boyo-core

or via Yarn

yarn add @boyojs/boyo-core

Then import the library into your bundle:

import { createApp } from '@boyojs/boyo-core';

createApp().mount();