create-vanilla-app

v1.1.5

Published

3 years ago

Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents and Typescript

Downloads

0High
0Medium
0Low

grandemayta

webcomponents customelements vanillaJS typescript

Create Vanilla App 🔧📦

Create Vanilla App allows you to develop vanilla javascript projects from scratch with support to Webcomponents, Sass and Typescript.

Summary

Install

npm install -g create-vanilla-app

Create a Project

create-vanilla-app <name-of-your-project>

Getting Started

Launch the following commands to start the application:

npm start

Scripts:

| Command | Description | | ------ | ------ | | npm start | Lift the application in local mode | | npm run dev | Generate a build in dev mode | | npm run prod | Generate a build in prod mode | | npm run dev:legacy | Generate a build in dev mode to support legacy browsers | | npm run prod:legacy | Generate a build in prod mode to support legacy browsers |

Integration

Build tasks will create the following output:

Build for modern browsers:

├── dist/
    ├── styles.min.css
    ├── bundle.min.js

Build with support for legacy browsers:

├── dist/
    ├── styles.min.css
    ├── bundle.min.js
    ├── polyfills.min.js
    ├── webcomponents-loader.js
    ├── bundles/                               # These scripts will load at runtime
        ├── webcomponents-ce.js
        ├── webcomponents-sd-ce-pf.js
        ├── webcomponents-sd-ce.js
        ├── webcomponents-sd.js

Html example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Vanilla App Example Integration</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <app-greetings fullname="Charlotte"></app-greetings>

    <!-- If you want support legacy browser just remove this comment
    <script src="polyfills.min.js" nomodule></script>
    <script src="webcomponents-loader.js"></script>
    -->
    <script src="bundle.min.js"></script>
</body>
</html>

Polyfills

We support the following features:

Generics
- Symbol
- fetch
- Promise
- Async / Await
Arrays
- entries
- from
- find
- findIndex
- includes
- keys
- values
Objects
- assign
- entries
- values
Strings
- endsWith
- includes
- startsWith

Browsers support

:white_check_mark: Chrome :white_check_mark: Firefox :white_check_mark: Safari :white_check_mark: Edge :white_check_mark: IE11

npm run prod

Todo

[ ] Setup Unit Testing
[ ] Setup E2E Testing

Keep calm and code!