src/components/your-component/your-component.mjs - JavaScript module for your component logic.
src/components/your-component/your-component.html - HTML template for your component.
src/components/your-component/your-component.css - CSS styles for your component.

How to Define a Component

To define your component, you must import it in the src/module/define-module.mjs file.

Example

Define your component in its own module file (e.g., src/pages/home-app/home-app.mjs):

import { HomeApp } from "../pages/home-app/home-app.mjs";

const elements = [
  {
    tag: "home-app",
    element: HomeApp
  },
];

export { elements };

Run the Application

npm run start

Getting Started

Example HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/public/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Application</title>
  </head>

  <body>
    <wex-route path="/" title="Home" component="home-app"></wex-route>

    <div id="root"></div>

    <script type="module" src="../src/index.mjs"></script>
  </body>
</html>

Example Component

import { Component } from './component.js';

class HomeApp extends Component {
  constructor() {
    super('home-app', [], true);
  }

  connectedCallback() {
    this.innerHTML = '<h1>Welcome to the Home Page</h1>';
  }
}

customElements.define('home-app', HomeApp);

Main Script

// src/index.mjs
import { DefineElementsConfig } from "../lib/src/configurations/define-elements-config.mjs";
import { PageConstants } from "../lib/src/constants/page-constants.mjs";
import { elements } from "./module/define-module.mjs";

class Application {
  static start() {
    this.configure();
    this.define();
  }

  static configure() {
    PageConstants.pagesPath = "/src/pages/";
    PageConstants.componentsPath = "/src/components/";
  }

  static define() {
    DefineElementsConfig.defines(elements);
  }
}

Application.start();

// src/module/define-module.mjs
import { DefineElementsConfig } from "../lib/src/configurations/define-elements-config.mjs";
import { PageConstants } from "../lib/src/constants/page-constants.mjs";
import { elements } from "./module/define-module.mjs";

class Application {
  static start() {
    this.configure();
    this.define();
  }

  static configure() {
    PageConstants.pagesPath = "/src/pages/";
    PageConstants.componentsPath = "/src/components/";
  }

  static define() {
    DefineElementsConfig.defines(elements);
  }
}

Application.start();

Contributing

Thank you for considering contributing to Wex.JS! Please follow the guidelines below. How to Contribute

Fork the repository.
Create a new branch.
Make your changes.
Submit a pull request.

License

This project is licensed under the ISC License - see the LICENSE file for details.

Keywords

FAQs

What is wex-js?

Is wex-js popular?

Is wex-js well maintained?

Package last updated on 19 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

wex-js

Wex.JS

Installation

Creating a project

Library Structure

Pages

Components