Bay.js

An easy to use, lightweight library for web-components.

Web ComponentsUI Framework
Dunks1980/bay.jsbayjs.org/@dunks1980/bay.js

README

bay.js


An easy to use, lightweight library for web-components. It doesn't need a build step but can be included in a build step if you want to. It's a great way to create reusable components for your projects. It's available as a NPM package and doesn't use any dependencies and is 4kb minified + gzipped. It also doesn't use eval or new Function so can be used in strict CSP polices without a build step. For documentation and demos go to Bayjs.org.

If you wish to support this project please buy me a coffee. ☕

Installation


Bay.js can be used via a script tag or importing as a module.

Script tag:

  1. ```html
  2. <script src="//unpkg.com/@dunks1980/bay.js/bay.min.js"></script>
  3. ```

Module Script tag:

  1. ```html
  2. <script type="module" src="main.js"></script>
  3. ```
  1. ```javascript
  2. // In main.js
  3. import bay from '//unpkg.com/@dunks1980/bay.js/bay.mjs';
  4. bay();
  5. ```
You may want to add a version number like this to prevent breaking changes: '//unpkg.com/@dunks1980/bay.js@< VERSION >/bay.mjs' the version number is optional and can be acquired from going to the npm package page. Or if using node_modules: './node_modules/@dunks1980/bay.js/bay.mjs';

Module NPM:

  1. ```javascript
  2. npm i @dunks1980/bay.js
  3. import bay from '@dunks1980/bay.js';
  4. bay();
  5. ```

Usage


There are 3 ways to define a component in bay.js:

1. In your html create an inline template and supply bay.js the templates id.
  1. ```html
  2. <template id="my-template">
  3.   <h1>${this.message}</h1>
  4. </template>
  6. <my-component bay="#my-template" message="Hello world!"></my-component>
  7. ```

2. Create a file and supply bay.js the url (don't wrap file contents in template). The file extension can be anything you like as long as its contents are in the HTML format.

  1. ```html
  2. <my-component bay="/url/to/my/components.html" message="Hello world!"></my-component>
  3. !-- or -->
  4. <my-component bay="/url/to/my/components.php" message="Hello world!"></my-component>
  5. ```

  1. ```html
  2. !-- in component file -->
  3. <h1>${this.message}</h1>
  4. ```

3. Pass bay.js the template
  1. ```js
  2. import my_component from "./../component_imports/my_component.html?raw";
  3. import bay from "@dunks1980/bay.js";
  4. bay();
  5. bay.create("my-component", my_component, ["message"]);
  6. ```

  1. ```html
  2. !-- Anywhere in the HTML including other components -->
  3. <my-component message="Hello world!"></my-component>
  4. ```

A component can be used anywhere in the HTML but inline templates must be in the body of the document. "my-component" can be anything you like but it must have a dash in the name per the custom element spec.