@b-side/core

Description

Core functionnalities for b-side library

Installation

npm i @b-side/core

Update package.json file

Use the following scripts to build and serve your components project.

"type": "module",
"scripts": {
    "dev": "npx --yes @b-side/cli build --output=public/js",
    "build": "npx --yes @b-side/cli build --production --output=public/js",
    "serve": "npx --yes @b-side/server --port=5006 developpement",
    "types": "npx tsc --module es6",
    "start": "npx --yes @b-side/server production"
  },

Create a b-side config file

In your root directory, create a b-side.config.json file with following content:

{
  "elements": {
    "prefix": "bs"
  },
  "input": {
    "directory": "elements"
  },
  "output": {
    "prefix": "bs",
    "chunks": "none",
    "directory": "public/js"
  }
}

Using TypeScript

If you choose to use TypeScript as development language, add a tsconfig.json file in the root of your project with the following content:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": false,
    "declarationMap": false,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [ "ESNext", "DOM", "DOM.Iterable" ],
    "module": "CommonJS",
    "moduleResolution": "Node",
    "removeComments": true,
    "rootDir": "./elements",
    "sourceMap": true,
    "strict": true,
    "target": "ES2021",
    "typeRoots": [ "./typings.d.ts" ],
  },
  "include": [
    "elements/**/*",
  ],
}

When using TypeScript and external HTML file for your templates, you should add a typings.d.ts file in your ./elements folder:

declare module '*.html';

Usage

A b-side component must extends the Element function class. By default, the component will have the name of the exported class. The associted template will be loaded from an HTML file named exactly like the JavaScript file and located beside the JavaScript file. Only one component class is allowed per file.

In the following example, the HTML component will have <bs-test> as node name by default. The prefix (bs) is took from the config file and the suffix (test) is the class name.

import { Element } from '@b-side/core';

export class Test extends Element() {
	src = 'url';

	static get observedAttributes() {
		return ['src'];
	}

	attributeChanged(attributeName, oldValue, newValue) {
		// do something
	}
}

This magic association will be deprecated in future versions. You should use the @Component decorator to define explicitly the name and HTML file or string you want to associate with your custom element, like the following example.

import { Component, Element } from '@b-side/core';

const decorator = Component({
	name: 'bs-test',
	html: async function () {
		return await import(`./test.html`);
	},
});

class Test extends Element() {
	src = 'url';

	static get observedAttributes() {
		return ['src'];
	}

	attributeChanged(attributeName, oldValue, newValue) {
		// do something
	}
}

decorator(Test);

In TypeScript, when using experimental decorators, the equivalent could look like the following example.

import { Component, Element, WatchAttribute } from '@b-side/core';

@Component({
	name: 'bs-test',
	html: async function () {
		return await import('./test.html');
	},
})
export class Test extends Element() {
	@WatchAttribute() src: string = 'url';

  attributeChanged(attributeName: string, oldValue: any, newValue: any) {
		// do something
	}
}

Support

Roadmap

Authors and acknowledgment

License