Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@wral/studio-ui.misc.seed
Advanced tools
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.
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.
Clone this repository and install the dependencies:
git clone https://github.com/your-repo-url.git
cd your-repo
npm install
To replicate the files and structure of this repository into your current directory, use the following command:
npx @wral/studio-ui.misc.seed init
To start the development server, run:
npm run dev
To build the project, run:
npm run build
This will create the production-ready files in the dist
directory.
To run the tests, use:
npm run test
This will run the tests using Web Test Runner.
To generate documentation using JSDoc, run:
npm run build:docs
The documentation will be generated in the docs
directory.
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.Contributions are welcome! Please follow these steps to contribute:
git checkout -b feature/your-feature-name
).git commit -am 'Add some feature'
).git push origin feature/your-feature-name
).Use npm version (major|minor|patch)
to tag a new version and git push --tags
.
Our CI/CD pipeline will handle testing and building.
This project is licensed under the ISC License. See the LICENSE file for details.
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!');
});
});
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:
For any questions or issues, please open an issue on the repository or contact the maintainer directly.
Happy coding!
FAQs
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.
We found that @wral/studio-ui.misc.seed demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.