Rewrote the library to typescript.

Author: andreasbm

README.md

@@ -1,8 +1,8 @@
 <h1 align="center">@appnest/web-config</h1>
 <p align="center">
-		<a href="https://npmcharts.com/compare/@appnest/web-config?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@appnest/web-config.svg" height="20"/></a>
-<a href="https://www.npmjs.com/package/@appnest/web-config"><img alt="NPM Version" src="https://img.shields.io/npm/v/@appnest/web-config.svg" height="20"/></a>
-<a href="https://david-dm.org/andreasbm/web-config"><img alt="Dependencies" src="https://img.shields.io/david/andreasbm/web-config.svg" height="20"/></a>
+		<a href="https://npmcharts.com/compare/@appnest/web-config?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@appnest/web-config.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@appnest/web-config"><img alt="NPM Version" src="https://img.shields.io/npm/v/@appnest/web-config.svg" height="20"/></a>
+<a href="https://david-dm.org/andreasbm/web-config"><img alt="Dependencies" src="https://img.shields.io/david/andreasbm/web-config.svg" height="20"/></a>
 <a href="https://github.com/andreasbm/web-config/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/andreasbm/web-config.svg" height="20"/></a>
 	</p>
 
@@ -13,58 +13,58 @@
 
 <br />
 
-* An extensible `create-rollup-config.js` for using Rollup with sweet features as for example SCSS imports, Service Worker generation with Workbox, live reloading, coping resources, chunking, treeshaking, Typescript, production minifying and compression with brotli and gzip.
-* An extensible `create-karma-config.js` to help with your Karma testing setup
-* A `tsconfig.json` file to configure your Typescript
-* A `tslint.json` file to configure your linting
-* A `typings.d.ts` file to configure your typings
-* A `.browserslistrc` file to configure how your files are transpiled
-* A `.gitignore` file you can use as inspiration for your own `.gitignore` file
-* [`rollup-plugin-compress` - A Rollup plugin that compresses the files in the bundle after building](src/lib/rollup-plugins/compress)
-* [`rollup-plugin-copy` - A Rollup plugin that copies resources from one location to another](src/lib/rollup-plugins/copy)
-* [`rollup-plugin-html-template` - A Rollup plugin that injects the bundle entry points into a HTML file](src/lib/rollup-plugins/html-template)
-* [`rollup-plugin-import-styles` - A Rollup plugin that makes it possible to import style files using postcss](src/lib/rollup-plugins/import-styles)
-* [`rollup-plugin-live-reload` - A Rollup plugin that live reload files as they changes](src/lib/rollup-plugins/live-reload)
-* [`rollup-plugin-minify-lit-html` - A Rollup plugin that minifies lit-html templates](src/lib/rollup-plugins/minify-lit-html)
-* [`rollup-plugin-replace` - A Rollup plugin that replaces an import with another import](src/lib/rollup-plugins/replace)
-* [`rollup-plugin-workbox` - A Rollup plugin that uses workbox to generate a service worker](src/lib/rollup-plugins/workbox)
+* An extensible `create-rollup-config.js` for using Rollup with sweet features as for example SCSS imports, Service Worker generation with Workbox, live reloading, coping resources, chunking, treeshaking, Typescript, production minifying and compression with brotli and gzip.
+* An extensible `create-karma-config.js` to help with your Karma testing setup
+* A `tsconfig.json` file to configure your Typescript
+* A `tslint.json` file to configure your linting
+* A `typings.d.ts` file to configure your typings
+* A `.browserslistrc` file to configure how your files are transpiled
+* A `.gitignore` file you can use as inspiration for your own `.gitignore` file
+* [`rollup-plugin-compress` - A Rollup plugin that compresses the files in the bundle after building](src/lib/rollup-plugins/compress)
+* [`rollup-plugin-copy` - A Rollup plugin that copies resources from one location to another](src/lib/rollup-plugins/copy)
+* [`rollup-plugin-html-template` - A Rollup plugin that injects the bundle entry points into a HTML file](src/lib/rollup-plugins/html-template)
+* [`rollup-plugin-import-styles` - A Rollup plugin that makes it possible to import style files using postcss](src/lib/rollup-plugins/import-styles)
+* [`rollup-plugin-live-reload` - A Rollup plugin that live reload files as they changes](src/lib/rollup-plugins/live-reload)
+* [`rollup-plugin-minify-lit-html` - A Rollup plugin that minifies lit-html templates](src/lib/rollup-plugins/minify-lit-html)
+* [`rollup-plugin-replace` - A Rollup plugin that replaces an import with another import](src/lib/rollup-plugins/replace)
+* [`rollup-plugin-workbox` - A Rollup plugin that uses workbox to generate a service worker](src/lib/rollup-plugins/workbox)
 * [`rollup-plugin-budget` - A Rollup plugin that compares the sizes of the files to a specified budget](src/lib/rollup-plugins/budget)
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#table-of-contents)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#table-of-contents)
+
 ## ➤ Table of Contents
 
-* [➤ Step 1 - Installation](#-step-1---installation)
-* [➤ Step 2 - Setup `rollup.config.js`](#-step-2---setup-rollupconfigjs)
-* [➤ Step 3 - Setup `tslint.json`](#-step-3---setup-tslintjson)
-* [➤ Step 4 - Setup `tsconfig.json`](#-step-4---setup-tsconfigjson)
-* [➤ Step 5 - Setup `.browserslistrc`](#-step-5---setup-browserslistrc)
-* [➤ Step 6 - Setup `karma.conf.js`](#-step-6---setup-karmaconfjs)
-* [➤ Step 7 - Add start and build scripts to `package.json`](#-step-7---add-start-and-build-scripts-to-packagejson)
-* [➤ How to load stylesheets](#-how-to-load-stylesheets)
-	* [Add the following to your `typings.d.ts` file!](#add-the-following-to-your-typingsdts-file)
-	* [Load a global stylesheet (it will be added to the template file)](#load-a-global-stylesheet-it-will-be-added-to-the-template-file)
-	* [Load a stylesheet as a string](#load-a-stylesheet-as-a-string)
-* [➤ Contributors](#-contributors)
+* [➤ Step 1 - Installation](#-step-1---installation)
+* [➤ Step 2 - Setup `rollup.config.js`](#-step-2---setup-rollupconfigjs)
+* [➤ Step 3 - Setup `tslint.json`](#-step-3---setup-tslintjson)
+* [➤ Step 4 - Setup `tsconfig.json`](#-step-4---setup-tsconfigjson)
+* [➤ Step 5 - Setup `.browserslistrc`](#-step-5---setup-browserslistrc)
+* [➤ Step 6 - Setup `karma.conf.js`](#-step-6---setup-karmaconfjs)
+* [➤ Step 7 - Add start and build scripts to `package.json`](#-step-7---add-start-and-build-scripts-to-packagejson)
+* [➤ How to load stylesheets](#-how-to-load-stylesheets)
+	* [Add the following to your `typings.d.ts` file!](#add-the-following-to-your-typingsdts-file)
+	* [Load a global stylesheet (it will be added to the template file)](#load-a-global-stylesheet-it-will-be-added-to-the-template-file)
+	* [Load a stylesheet as a string](#load-a-stylesheet-as-a-string)
+* [➤ Contributors](#-contributors)
 * [➤ License](#-license)
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-1---installation)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-1---installation)
+
 ## ➤ Step 1 - Installation
 
 ```javascript
 npm i @appnest/web-config --D
 ```
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-2---setup-rollupconfigjs)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-2---setup-rollupconfigjs)
+
 ## ➤ Step 2 - Setup `rollup.config.js`
 
 Here's an example on what your Rollup configuration file could look like:
 
 ```javascript
-import path from "path";
+import {resolve, join} from "path";
 import pkg from "./package.json";
 import {
   defaultExternals,
@@ -78,16 +78,16 @@ import {
 } from "@appnest/web-config";
 
 const folders = {
-  dist: path.resolve(__dirname, "dist"),
-  src: path.resolve(__dirname, "src/demo"),
-  src_assets: path.resolve(__dirname, "src/demo/assets"),
-  dist_assets: path.resolve(__dirname, "dist/assets")
+  dist: resolve(__dirname, "dist"),
+  src: resolve(__dirname, "src/demo"),
+  src_assets: resolve(__dirname, "src/demo/assets"),
+  dist_assets: resolve(__dirname, "dist/assets")
 };
 
 const files = {
-  main: path.join(folders.src, "main.ts"),
-  src_index: path.join(folders.src, "index.html"),
-  dist_index: path.join(folders.dist, "index.html")
+  main: join(folders.src, "main.ts"),
+  src_index: join(folders.src, "index.html"),
+  dist_index: join(folders.dist, "index.html")
 };
 
 export default {
@@ -139,9 +139,9 @@ export default {
 }
 ```
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-3---setup-tslintjson)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-3---setup-tslintjson)
+
 ## ➤ Step 3 - Setup `tslint.json`
 
 ```json
@@ -150,9 +150,9 @@ export default {
 }
 ```
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-4---setup-tsconfigjson)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-4---setup-tsconfigjson)
+
 ## ➤ Step 4 - Setup `tsconfig.json`
 
 ```json
@@ -161,9 +161,9 @@ export default {
 }
 ```
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-5---setup-browserslistrc)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-5---setup-browserslistrc)
+
 ## ➤ Step 5 - Setup `.browserslistrc`
 
 The tools transpiling your code are using `browserslist` to figure out what is supported. Your `.browserslistrc` could look like this.
@@ -173,9 +173,9 @@ last 2 Chrome versions
 last 2 Safari versions
 last 2 Firefox versions
 ```
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-6---setup-karmaconfjs)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-6---setup-karmaconfjs)
+
 ## ➤ Step 6 - Setup `karma.conf.js`
 
 ```javascript
@@ -191,9 +191,9 @@ module.exports = (config) => {
   });
 };
 ```
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-7---add-start-and-build-scripts-to-packagejson)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#step-7---add-start-and-build-scripts-to-packagejson)
+
 ## ➤ Step 7 - Add start and build scripts to `package.json`
 
 Here an example on what scripts you could add to your `package.json` file.
@@ -213,9 +213,9 @@ Here an example on what scripts you could add to your `package.json` file.
 }
 ```
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#how-to-load-stylesheets)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#how-to-load-stylesheets)
+
 ## ➤ How to load stylesheets
 
 ### Add the following to your `typings.d.ts` file!
@@ -256,17 +256,17 @@ export default {
 import css from "./my-component.scss";
 ```
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#contributors)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#contributors)
+
 ## ➤ Contributors
 
-|[<img alt="Andreas Mehlsen" src="https://avatars1.githubusercontent.com/u/6267397?s=460&v=4" width="100">](https://twitter.com/andreasmehlsen) | [<img alt="You?" src="https://joeschmoe.io/api/v1/random" width="100">](https://github.com/andreasbm/web-config/blob/master/CONTRIBUTING.md)|
-|:---: | :---:|
+|[<img alt="Andreas Mehlsen" src="https://avatars1.githubusercontent.com/u/6267397?s=460&v=4" width="100">](https://twitter.com/andreasmehlsen) | [<img alt="You?" src="https://joeschmoe.io/api/v1/random" width="100">](https://github.com/andreasbm/web-config/blob/master/CONTRIBUTING.md)|
+|:---: | :---:|
 |[Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/web-config/blob/master/CONTRIBUTING.md)|
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#license)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/vintage.png)](#license)
+
 ## ➤ License
 
 Licensed under [MIT](https://opensource.org/licenses/MIT).

karma.conf.js

@@ -1,4 +1,4 @@
-const {defaultResolvePlugins, defaultKarmaConfig} = require("./dist/index.cjs.js");
+const {defaultResolvePlugins, defaultKarmaConfig} = require("./dist/lib/index.cjs.js");
 
 module.exports = (config) => {
 	config.set({

package.json

@@ -36,17 +36,17 @@
 	],
 	"license": "MIT",
 	"scripts": {
-		"b:dev": "rollup -c --environment NODE_ENV:dev",
-		"b:prod": "rollup -c --environment NODE_ENV:prod",
-		"s:dev": "rollup -c --watch --environment NODE_ENV:dev",
-		"s:prod": "rollup -c --watch --environment NODE_ENV:prod",
-		"s": "npm run s:dev",
+		"b:demo:dev": "rollup -c --environment NODE_ENV:dev",
+		"b:demo:prod": "rollup -c --environment NODE_ENV:prod",
+		"s:demo:dev": "rollup -c --watch --environment NODE_ENV:dev",
+		"s:demo:prod": "rollup -c --watch --environment NODE_ENV:prod",
+		"s": "npm run s:demo:dev",
+		"b:lib": "rollup -c=rollup-lib.config.js && node post-build.js",
 		"ncu": "ncu -u -a && npm update && npm install",
-		"b:lib": "node build.js",
 		"bump:patch": "npm version patch && git add . && git commit --no-edit --amend --no-verify",
 		"bump:minor": "npm version minor && git add . && git commit --no-edit --amend --no-verify",
 		"bump:major": "npm version major && git add . && git commit --no-edit --amend --no-verify",
-		"publish:dist": "cd dist && npm publish --access=public && cd ..",
+		"publish:dist": "cd dist/lib && npm publish --access=public && cd ../..",
 		"publish:patch": "npm run bump:patch && git push && npm run b:lib && npm run publish:dist",
 		"publish:minor": "npm run bump:minor && git push && npm run b:lib && npm run publish:dist",
 		"publish:major": "npm run bump:major && git push && npm run b:lib && npm run publish:dist",
@@ -105,6 +105,13 @@
 	},
 	"devDependencies": {
 		"@appnest/readme": "^1.1.14",
+		"@types/escodegen": "0.0.6",
+		"@types/esprima": "^4.0.2",
+		"@types/estraverse": "0.0.6",
+		"@types/filesize": "^4.1.0",
+		"@types/fs-extra": "^5.0.5",
+		"@types/gzip-size": "^4.1.0",
+		"@types/node-sass": "^4.11.0",
 		"lit-element": "^2.0.1",
 		"lit-html": "^1.0.0",
 		"weightless": "0.0.5"

build.js post-build.js

@@ -4,42 +4,13 @@ const fs = require("fs-extra");
 const rollup = require('rollup');
 const pkg = require("./package.json");
 
-const distPath = "dist";
-
-const inputOptions = (input) => {
-	return {
-		input,
-		external: [
-			...Object.keys(pkg.dependencies || {}),
-			...Object.keys(pkg.devDependencies || {}),
-		]
-	}
-};
-
-const outputOptionsEsm = (file) => {
-	return {
-		format: "esm",
-		file
-	}
-};
-
-const outputOptionsCjs = (file) => {
-	return {
-		format: "cjs",
-		file
-	}
-};
+const distPath = "dist/lib";
 
 /**
  * Builds the library.
  * @returns {Promise<void>}
  */
-async function build () {
-
-	// Clean the dist folders
-	await cleanDist();
-
-	await transpileJs();
+async function postBuild () {
 
 	// Copy the lib files
 	await copyFiles("src/lib", distPath, [
@@ -58,28 +29,6 @@ async function build () {
 	]);
 }
 
-async function transpileJs () {
-
-	// Create the lib bundle
-	const libBundle = await rollup.rollup({
-		...inputOptions("./src/lib/index.js"),
-		treeshake: false
-	});
-
-	await libBundle.write(outputOptionsEsm("dist/index.esm.js"));
-	await libBundle.write(outputOptionsCjs("dist/index.cjs.js"));
-}
-
-/**
- * Cleans the dist folder.
- * @returns {Promise<void>}
- */
-function cleanDist () {
-	return new Promise((res, rej) => {
-		rimraf(distPath, res);
-	});
-}
-
 /**
  * Copies an array of files.
  * @param inSrc
@@ -105,7 +54,7 @@ function copySync (src, dest) {
 	fs.copySync(path.resolve(__dirname, src), path.resolve(__dirname, dest));
 }
 
-build().then(_ => {
+postBuild().then(_ => {
 	console.log("Done!");
 });