add webpack optimization

.gitignore

@@ -1,4 +1,3 @@
 node_modules
 build
 .DS_Store
-.vscode

README.md

@@ -9,7 +9,7 @@ Lista de cidades e estados do Brasil que carrega um campo `<select>` com os esta
 A instalação é simples e básica, só incluir o script no html e configurar os campos `select` conforme abaixo:
 
 ```html
-<script src="cidades-estados.js"></script>
+<script src="/dist/CidadesEstados.min.js"></script>
 ```
 
 ---
@@ -70,4 +70,4 @@ Para utilizar múltiplos campos é só definir o nome do grupo dos campos corres
 
 <select name="estado[]" data-estado="" data-grupo-id="4"></select>
 <select name="cidade[]" data-cidade="" data-grupo-id="4"></select>
-```
+```

demo/index.html

@@ -51,7 +51,7 @@ <h1>Cidades e Estados - Exemplo</h1>
 
 	<button id="add">Adicionar</button>
 
-	<script src="/dist/app.js"></script>
+	<script src="/dist/CidadesEstados.min.js"></script>
 
 	<script>
 		document.addEventListener('DOMContentLoaded', () => {

dist/CidadesEstados.js

@@ -0,0 +1,125 @@
+/* CidadesEstados JS
+ * https://github.com/wgenial/
+ * Developed by WGenial - http://wgenial.com.br
+ */
+
+'use strict';
+
+export class CidadesEstados {
+
+	constructor() {
+		this.json_path = {
+			estados: '/dist/json',
+			cidades: '/dist/json/cidades',
+		}
+		this.json = {
+			estados: null,
+			cidades: []
+		}
+	}
+
+	init() {
+		this.renderEstados();
+		this.changeEstados();
+		this.changeCidades();
+	}
+
+	async getEstados() {
+		const response = await fetch(`${this.json_path.estados}/estados.json`);
+		return await response.json();
+	}
+
+	async getCidades(estado) {
+		if (!this.json.cidades.hasOwnProperty(estado)) {
+			const response = await fetch(`${this.json_path.cidades}/${estado}.json`);
+			this.json.cidades[estado] = await response.json();
+		}
+		return this.json.cidades[estado];
+	}
+
+	renderEstados() {
+		let estadosObj = document.querySelectorAll('select[data-estado]');
+
+		if (estadosObj.length == 0) {
+			return false;
+		}
+
+		this.getEstados()
+			.then((response) => {
+				this.json.estados = response.estados;
+
+				estadosObj.forEach((estadoObj) => {
+					let estadoAttr = estadoObj.getAttribute('data-estado');
+					let grupoIdAttr = estadoObj.getAttribute('data-grupo-id');
+
+					while(estadoObj.firstChild) {
+						estadoObj.removeChild(estadoObj.firstChild);
+					}
+					estadoObj.options[estadoObj.options.length] = new Option('Selecione um estado', '');
+
+					this.json.estados.forEach((estado) => {
+						estadoObj.options[estadoObj.options.length] = (estado.id == estadoAttr) ? new Option(estado.estado, estado.id, null, true) : new Option(estado.estado, estado.id);
+					});
+
+					this.renderCidades(estadoAttr, grupoIdAttr);
+
+				});
+
+			})
+			.catch(err => console.log(err));
+	}
+
+	renderCidades(estado, grupoId) {
+		let cidadeObj = document.querySelector(`[data-cidade][data-grupo-id='${grupoId}']`);
+		let cidadeAttr = cidadeObj.getAttribute('data-cidade');
+
+		while (cidadeObj.firstChild) {
+			cidadeObj.removeChild(cidadeObj.firstChild);
+		}
+		cidadeObj.options[cidadeObj.options.length] = new Option('Selecione uma cidade', '');
+
+		if (estado != '') {
+			this.getCidades(estado)
+				.then((response) => {
+					response.cidades.forEach((cidade) => {
+
+						if (cidadeAttr == '' && cidade.capital) {
+							cidadeObj.options[cidadeObj.options.length] = new Option(cidade.cidade, cidade.cidade, null, true);
+							cidadeObj.setAttribute('data-cidade', cidade.cidade);
+						} else {
+							cidadeObj.options[cidadeObj.options.length] = (cidade.cidade == cidadeAttr) ? new Option(cidade.cidade, cidade.cidade, null, true) : new Option(cidade.cidade, cidade.cidade);
+						}
+
+					});
+				})
+				.catch(err => console.log(err));
+		}
+
+	}
+
+	changeEstados() {
+		document.addEventListener('change', (event) => {
+			if (event.target.matches('[data-estado]')) {
+				let estadoObj = event.target;
+				let estadoAttr = estadoObj.value;
+				let grupoIdAttr = estadoObj.getAttribute('data-grupo-id');
+				let cidadeObj = document.querySelector(`[data-cidade][data-grupo-id='${grupoIdAttr}']`);
+
+				estadoObj.setAttribute('data-estado', estadoAttr);
+				cidadeObj.setAttribute('data-cidade', '');
+
+				this.renderCidades(estadoAttr, grupoIdAttr);
+			}
+		});
+	}
+
+	changeCidades() {
+		document.addEventListener('change', (event) => {
+			if (event.target.matches('[data-cidade]')) {
+				let cidadeObj = event.target;
+				cidadeObj.setAttribute('data-cidade', cidadeObj[cidadeObj.selectedIndex].text);
+			}
+		});
+	}
+
+}