Installation
Cloning the example repo
The fastest way to begin a new @lirx/dom
project, consists in cloning the examples' repository:
git clone https://github.com/lirx-js/dom-examples
It's a fresh and updated repository with everything set-up to develop and build our applications. It has:
- 📜 sass and typescript support (highly recommended)
- 🔃 hot reload
- 🏗️ agressive build optimizations
- 🖌️ many examples
Then to run the project:
- npm
- Yarn
cd dom-examples
npm i
npm run dev
cd dom-examples
yarn
yarn dev
From scratch
We'll see here how to start from scratch a new project. It may be useful, if we prefer to set up by ourselves an environment. We'll use Vite, because it's a very convenient tool to develop and build a web application.
So, let's begin by creating a new project:
- npm
- Yarn
npm create vite@latest
yarn create vite
We enter the project's name (ex: my-app
), then select the framework vanilla
with the typescript
flavour.
Then we go into the newly created folder:
cd my-app
And we install sass
using the command:
- npm
- Yarn
npm install sass -D
yarn add sass --dev
Finally, we'll have to install @lirx/dom
and @lirx/core
:
- npm
- Yarn
npm install @lirx/core @lirx/dom --save
yarn add @lirx/core @lirx/dom
@lirx/dom
is the framework itself which manages the DOM nodes and bind them with Observables.@lirx/core
contains all the tools to create and pipe Observables.
Optimizing the build
@lirx/dom
embeds a JIT compiler to convert on-the-fly the reactive-html
templates and reactive-css
styles of our components.
However, it has been build from the beginning to be able to pre-compile these templates and styles, through an AOT compiler.
This permits to remove entirely the JIT compiler, saving space, and the necessity to parse and compile these files on runtime, increasing drastically the performances.
So using @lirx/dom-aot-plugin
is strongly recommended.
- npm
- Yarn
npm install @lirx/dom-aot-plugin -D
yarn add @lirx/dom-aot-plugin --dev
Then, we'll update the vite.config.js file to enable these optimizations:
import { aotPlugin } from '@lirx/dom-aot-plugin';
/**
* @type {import('vite').UserConfig}
*/
const config = {
build: {
target: 'esnext',
},
plugins: [
aotPlugin({
pathMatches: (path) => {
return path.endsWith('.ts')
|| path.endsWith('.component.mjs');
},
}),
],
optimizeDeps: {
include: [
'@lirx/core',
'@lirx/dom',
],
},
};
export default config;
Create a component
Our environment is ready ! Now we may create our first component:
import { Component, compileReactiveHTMLAsComponentTemplate, bootstrap } from '@lirx/dom';
const AppMainComponent = new Component({
name: 'app-main',
template: compileReactiveHTMLAsComponentTemplate({
html: `
Hello world !
`,
}),
});
function run() {
bootstrap(AppMainComponent);
}
window.onload = run;
I won't explain here what this code does in details, as it is only there as an example. But, in a few words, it simply creates a component and starts the app from this entry point.
Start developing
To start our application into a dev environment, simply type the command:
- npm
- Yarn
npm run dev
yarn run dev
This will support on the fly: instant server start, hot reloading, typescript and scss transpiling, and much more.
Finally, to build the app for a prod environment:
- npm
- Yarn
npm run build
yarn run build
This will bundle our application, through an "app optimizing process" (tree-shacking, aot, minification, ...).
And voila !
We're now ready to develop and create our own app using @lirx/dom
.