Skip to content

Latest commit

 

History

History
146 lines (116 loc) · 3.37 KB

README.md

File metadata and controls

146 lines (116 loc) · 3.37 KB
Raw

Create Vanilla App 🔧📦

Open Source Love made-with-javascript-doc

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

✅ Chrome
✅ Firefox
✅ Safari
✅ Edge
✅ IE11

npm run prod

Todo

  • Setup Unit Testing
  • Setup E2E Testing

Keep calm and code!
Open Source Love