@harperfast/template-vanilla-studio 1.4.3 → 1.4.4

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js';
+import globals from 'globals';
+
+export default [
+	js.configs.recommended,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+		},
+		rules: {
+			'no-unused-vars': 'warn',
+			'no-console': 'off',
+		},
+	},
+	{
+		ignores: ['node_modules/'],
+	},
+];

package/package.json

@@ -1,11 +1,15 @@
 {
 	"name": "@harperfast/template-vanilla-studio",
-	"version": "1.4.3",
+	"version": "1.4.4",
 	"type": "module",
 	"repository": "github:HarperFast/create-harper",
 	"scripts": {},
 	"devDependencies": {
+		"@eslint/js": "^10.0.1",
 		"dotenv-cli": "^11.0.0",
-		"harperdb": "^4.7.15"
+		"eslint": "^10.0.2",
+		"globals": "^17.4.0",
+		"harperdb": "^4.7.20",
+		"prettier": "^3.8.1"
 	}
 }

package/test/counter.test.js

@@ -0,0 +1,15 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { decrement, increment } from '../web/counter.js';
+
+test('increment function', () => {
+	assert.strictEqual(increment(0), 1);
+	assert.strictEqual(increment(1), 2);
+	assert.strictEqual(increment(-1), 0);
+});
+
+test('decrement function', () => {
+	assert.strictEqual(decrement(0), -1);
+	assert.strictEqual(decrement(1), 0);
+	assert.strictEqual(decrement(-1), -2);
+});

package/web/counter.js

@@ -0,0 +1,7 @@
+export function increment(value) {
+	return value + 1;
+}
+
+export function decrement(value) {
+	return value - 1;
+}

package/web/index.html

@@ -23,6 +23,6 @@
       </div>
     </main>
 
-    <script src="index.js"></script>
+    <script type="module" src="index.js"></script>
   </body>
 </html>

package/web/index.js

@@ -1,3 +1,5 @@
+import { decrement, increment } from './counter.js';
+
 let count = 0;
 const counterDisplay = document.getElementById('count');
 const decrementButton = document.getElementById('decrement');
@@ -8,11 +10,11 @@ function updateDisplay() {
 }
 
 decrementButton.addEventListener('click', () => {
-	count--;
+	count = decrement(count);
 	updateDisplay();
 });
 
 incrementButton.addEventListener('click', () => {
-	count++;
+	count = increment(count);
 	updateDisplay();
 });

package/web/styles.css

@@ -1,57 +1,57 @@
 body {
-  font-family: Arial, sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  margin: 0;
-  background-color: #f5f5f5;
+	font-family: Arial, sans-serif;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	margin: 0;
+	background-color: #f5f5f5;
 }
 
 main {
-  text-align: center;
-  background-color: white;
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+	text-align: center;
+	background-color: white;
+	padding: 2rem;
+	border-radius: 8px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .count {
-  font-size: 4rem;
-  margin: 1rem 0;
-  color: #333;
+	font-size: 4rem;
+	margin: 1rem 0;
+	color: #333;
 }
 
 .counter-controls {
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
+	display: flex;
+	justify-content: center;
+	gap: 1rem;
 }
 
 button {
-  font-size: 1.5rem;
-  width: 3rem;
-  height: 3rem;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: background-color 0.2s;
+	font-size: 1.5rem;
+	width: 3rem;
+	height: 3rem;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	transition: background-color 0.2s;
 }
 
 .decrement {
-  background-color: #ff6b6b;
-  color: white;
+	background-color: #ff6b6b;
+	color: white;
 }
 
 .decrement:hover {
-  background-color: #ff5252;
+	background-color: #ff5252;
 }
 
 .increment {
-  background-color: #4ecdc4;
-  color: white;
+	background-color: #4ecdc4;
+	color: white;
 }
 
 .increment:hover {
-  background-color: #39b2a9;
+	background-color: #39b2a9;
 }