@wral/studio-ui.utils.define-component v2.0.1

@wral/studio-ui.misc.seed

This is a seed project for creating web components using the Lit framework. It includes configurations for building, linting, testing, and documentation generation, as well as a basic example component.

Table of Contents

• Installation
• Usage
  • Development
  • Building
  • Testing
  • Generating Documentation
• Files
• Contributing
• License

Installation

Clone this repository and install the dependencies:

git clone https://github.com/your-repo-url.git
cd your-repo
npm install

Usage

Initialize Project

To replicate the files and structure of this repository into your current directory, use the following command:

npx @wral/studio-ui.misc.seed init

Development

To start the development server, run:

npm run dev

Building

To build the project, run:

npm run build

This will create the production-ready files in the dist directory.

Testing

To run the tests, use:

npm run test

This will run the tests using Web Test Runner.

Generating Documentation

To generate documentation using JSDoc, run:

npm run build:docs

The documentation will be generated in the docs directory.

Files

• index.html The main HTML file for the project.
• vite.config.js Configuration for Vite, including build settings.
• .gitignore Specifies files to ignore in the repository.
• jsdoc.json Configuration for JSDoc to generate documentation.
• README.md This file.
• eslint.config.js Configuration for ESLint, including rules and settings.
• .vimrc Vim configuration for the project.
• .npmrc NPM configuration, including authentication token.
• package.json Project metadata and dependencies.
• bitbucket-pipelines.yml Configuration for Bitbucket CI/CD pipelines.
• web-test-runner.config.mjs Configuration for Web Test Runner.
• src/ Source directory containing the component code and tests.

Contributing

Contributions are welcome! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes.
4. Commit your changes (git commit -am 'Add some feature').
5. Push to the branch (git push origin feature/your-feature-name).
6. Create a new Pull Request.

Releases

Use npm version (major|minor|patch) to tag a new version and git push --tags.

Our CI/CD pipeline will handle testing and building.

License

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

Example Component

src/hello-world.mjs

This is a simple example of a web component built with Lit.

import { LitElement, html, css } from 'lit';

/**
 * `hello-world` is a simple web component that displays a "Hello, World!"
 * message.
 *
 * @customElement
 * @extends LitElement
 */
class HelloWorld extends LitElement {
  static styles = css`
    :host {
      display: block;
      padding: 16px;
      background-color: lightgrey;
      border: 1px solid black;
    }
  `;

  render() {
    return html`
      <h1>Hello, World!</h1>
    `;
  }
}

customElements.define('hello-world', HelloWorld);

src/hello-world.test.mjs

This is an example test for the hello-world component.

import { fixture, html, expect } from '@open-wc/testing';
import '../src/hello-world.mjs';

describe('HelloWorld', () => {
  it('renders a message', async () => {
    const el = await fixture(html`<hello-world></hello-world>`);
    const h1 = el.shadowRoot.querySelector('h1');
    expect(h1).to.exist;
    expect(h1.textContent).to.equal('Hello, World!');
  });
});

CI/CD

This repository is configured to use Bitbucket Pipelines for Continuous Integration and Continuous Deployment (CI/CD). The pipeline configuration is defined in the bitbucket-pipelines.yml file.

The pipeline includes the following steps:

• Lint: Checks code syntax using ESLint.
• Test: Runs tests and generates coverage reports.
• Build: Builds the project for production.
• Publish: Publishes the package to NPM and deploys to a CDN.

Contact

For any questions or issues, please open an issue on the repository or contact the maintainer directly.

Happy coding!