Code Monkey home page Code Monkey logo

lit-starter-kit's Introduction

LitElement starter site

this project has a ready to production configuration.

Litelement + Typescript + Vitejs + Rollup.js

This project includes a VERY sample site to start using LitElement with TypeScript (you can also use JS).

The project tries to have the same structure as an Android project. The idea is that it feels familiar and we develop with a standard (or as similar as possible)

This will help the LitElement developer community grow and we all align our efforts in a standardized and orderly direction.

You will find a res folder and within it it should have the same structure as a Native Android Project.

With this configuration you can mix and use javascript. But we highly recommend that you use Typescript, if you don't already know Typescript you should learn it as this will greatly improve the quality of your code.

Let's write the future together ๐Ÿš€

โš™ Setup

Install dependencies:

npm i
#or
yarn
#or 
pnpm i

๐Ÿš€ Start

This sample uses the Babel and esbuild with Vitejs to produce JavaScript that runs in modern browsers.

Dev Server

This sample uses Vitejs for previewing the project without additional build steps. Vitejs handles resolving Node-style "bare" import specifiers, which aren't supported in browsers. It also automatically transpiles Typescript to JavaScript files.

There is a development HTML file located at index.html that you can view at http://localhost:8000.

To build and run the JavaScript version of your component (include watcher):

npm run dev
# or
yarn dev

๐Ÿ“ Editing (highly recommend)

If you use VS Code, we highly recommend the lit-plugin extension, made by @runem which enables some extremely useful features for lit-html templates:

  • Syntax highlighting
  • Type-checking
  • Code completion
  • Hover-over docs
  • Jump to definition
  • Linting
  • Quick Fixes

The project is setup to recommend lit-plugin to VS Code users if they don't already have it installed.

Go to repo to leave a start โ˜… -> https://github.com/runem/lit-analyzer

๐Ÿ“„ Formatting

Prettier is used for code formatting. It has been pre-configured according to the Polymer Project's style. You can change this in .prettierrc.json.

Prettier has not been configured to run when commiting files, but this can be added with Husky and and pretty-quick. See the prettier.io site for instructions.

If you use VS code, we reccommend the prettier-vscode extension

Contribute and more information

See we develop a Get started web site (soon) to show more information. If you have the desire to collaborate, send me a Tweet to @herberthobregon and let's talk!

lit-starter-kit's People

Contributors

herberthobregon avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.