0.3.3 • Published 2 years ago
landing-gear v0.3.3
Landing Gear
Landing Gear is a set of Lit-powered components that builds on the work done by wickedtemplates to create wickedblocks.
It was originally called "Wicked Landing Gear", but the "Wicked" was removed to avoid confusion as this code is not created or maintained by wickedtemplates.
Getting started
1. Use a smart bundler like Parcel
2. Install landing-gear via /YARN
$ yarn add landing-gearIf you use npm then this would be:
$ npm install landing-gear3. Add HTML that uses one or more component imports
Use HTML like the folloing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Your Site</title>
<script type="module" src="../node_modules/landing-gear/dist/lg-alert/index.js"></script>
</head>
<body>
<h1>Your Site</h1>
<h2>A subtitle for your site</h2>
<!-- Basic alert, powered by landing-gear -->
<lg-alert class="alert"
variant="info"
title="Basic Alert"
description="Important alert text that needs to be shown"></lg-alert>
</body>
</html>Build your project
Build your project however it should be built depending on which bundler you used. If you used parcel this is as simple as:
$ parcelContributing
Adding a new component
To add a new component:
yarn create @vitejs/app new-component --template lit-element-ts- Copy over a
Makefilefrom an existing component - Update the
package.jsonwith the project name, and appropriatescripttasks anddevDependenciesto match other projects - Update
package.jsonfor use with Vite library mode
Alternatively you can also also copy an existing existing library, and make the appropriate replacements
Viewing an existing component's demo page
To view an existing component's demo page, run the following:
$ COMPONENT=lg-content make serve-component-demoTODO
Here are some things that should really get done at some point:
- Setup Parcel aliasing to support separate Lit static build from components (single
litimport, multiple components, rather than every component having an instance of lit inside)