zero-query 0.9.8 → 1.0.0

package/cli/commands/dev/logger.js

@@ -1,5 +1,5 @@
 /**
- * cli/commands/dev/logger.js — Terminal output helpers
+ * cli/commands/dev/logger.js - Terminal output helpers
  *
  * Provides styled console output for the dev server: startup banner,
  * timestamped file-change messages, and error formatting.

package/cli/commands/dev/overlay.js

@@ -1,21 +1,21 @@
 /**
- * cli/commands/dev/overlay.js — Client-side error overlay + SSE live-reload
+ * cli/commands/dev/overlay.js - Client-side error overlay + SSE live-reload
  *
  * Returns an HTML <script> snippet that is injected before </body> in
  * every HTML response served by the dev server.  Responsibilities:
  *
- *   1. Error Overlay — full-screen dark overlay with code frames, stack
+ *   1. Error Overlay - full-screen dark overlay with code frames, stack
  *      traces, and ZQueryError metadata.  Dismissable via Esc or ×.
- *   2. Runtime error hooks — window.onerror, unhandledrejection, AND
+ *   2. Runtime error hooks - window.onerror, unhandledrejection, AND
  *      the zQuery $.onError() hook so framework-level errors are
  *      surfaced in the overlay automatically.
- *   3. SSE connection — listens for reload / css / error:syntax /
+ *   3. SSE connection - listens for reload / css / error:syntax /
  *      error:clear events from the dev server watcher.
  */
 
 'use strict';
 
-// The snippet is a self-contained IIFE — no external dependencies.
+// The snippet is a self-contained IIFE - no external dependencies.
 // It must work in all browsers that support EventSource (IE11 excluded).
 
 const OVERLAY_SCRIPT = `<script>
@@ -239,7 +239,7 @@ const OVERLAY_SCRIPT = `<script>
   // Hook into zQuery's $.onError() when the library is loaded
   // =====================================================================
   function hookZQueryErrors() {
-    // $.onError is set by the framework — wait for it
+    // $.onError is set by the framework - wait for it
     if (typeof $ !== 'undefined' && typeof $.onError === 'function') {
       $.onError(function(zqErr) {
         var data = {
@@ -298,7 +298,7 @@ const OVERLAY_SCRIPT = `<script>
       });
 
       // 2) Try hot-swapping scoped <style data-zq-style-urls> elements
-      //    These come from component styleUrl — the CSS was fetched, scoped,
+      //    These come from component styleUrl - the CSS was fetched, scoped,
       //    and injected as an inline <style>. We re-fetch and re-scope it.
       if (!matched) {
         var scopedEls = document.querySelectorAll('style[data-zq-style-urls]');
@@ -315,9 +315,13 @@ const OVERLAY_SCRIPT = `<script>
 
           // Re-fetch all style URLs (cache-busted)
           var urlList = urls.split(' ').filter(Boolean);
+          var prevCSS = el.textContent; // preserve current styles as rollback
           Promise.all(urlList.map(function(u) {
             return fetch(u + (u.indexOf('?') >= 0 ? '&' : '?') + '_zqr=' + Date.now())
-              .then(function(r) { return r.text(); });
+              .then(function(r) {
+                if (!r.ok) throw new Error('CSS fetch failed: ' + r.status);
+                return r.text();
+              });
           })).then(function(results) {
             var raw = (inlineStyles ? inlineStyles + '\\n' : '') + results.join('\\n');
             // Re-scope CSS with the same scope attribute
@@ -332,11 +336,14 @@ const OVERLAY_SCRIPT = `<script>
               });
             }
             el.textContent = raw;
+          }).catch(function() {
+            // Restore previous CSS on failure to prevent blank page
+            el.textContent = prevCSS;
           });
         });
       }
 
-      // 3) Nothing matched — fall back to full reload
+      // 3) Nothing matched - fall back to full reload
       if (!matched) { location.reload(); }
     });
 
@@ -362,7 +369,7 @@ const OVERLAY_SCRIPT = `<script>
   connect();
 
   // =====================================================================
-  // Fetch / $.http Interceptor — pretty console logging
+  // Fetch / $.http Interceptor - pretty console logging
   // =====================================================================
   var __zqChannel;
   try { __zqChannel = new BroadcastChannel('__zq_devtools'); } catch(e) {}
@@ -473,7 +480,7 @@ const OVERLAY_SCRIPT = `<script>
   };
 
   // =====================================================================
-  // Morph instrumentation — hook via window.__zqMorphHook (set by diff.js)
+  // Morph instrumentation - hook via window.__zqMorphHook (set by diff.js)
   // =====================================================================
   window.__zqMorphHook = function(el, elapsed) {
     __zqMorphCount++;
@@ -505,7 +512,7 @@ const OVERLAY_SCRIPT = `<script>
   };
 
   // =====================================================================
-  // Render instrumentation — hook for first-renders & route swaps
+  // Render instrumentation - hook for first-renders & route swaps
   // =====================================================================
   window.__zqRenderHook = function(el, elapsed, kind, name) {
     __zqRenderCount++;
@@ -538,7 +545,7 @@ const OVERLAY_SCRIPT = `<script>
   };
 
   // =====================================================================
-  // Router instrumentation — history state tracking for devtools
+  // Router instrumentation - history state tracking for devtools
   // =====================================================================
   var __zqRouterEvents = [];
 
@@ -613,7 +620,7 @@ const OVERLAY_SCRIPT = `<script>
   });
 
   // =====================================================================
-  // Dev Toolbar — expandable floating bar with stats
+  // Dev Toolbar - expandable floating bar with stats
   // =====================================================================
   var devBar;
   var __zqBarExpanded = false;

package/cli/commands/dev/server.js

@@ -1,5 +1,5 @@
 /**
- * cli/commands/dev/server.js — HTTP server & SSE broadcasting
+ * cli/commands/dev/server.js - HTTP server & SSE broadcasting
  *
  * Creates the zero-http app, serves static files, injects the
  * error-overlay snippet into HTML responses, and manages the
@@ -70,10 +70,10 @@ function promptInstall() {
 
 /**
  * @param {object} opts
- * @param {string} opts.root        — absolute path to project root
- * @param {string} opts.htmlEntry   — e.g. 'index.html'
+ * @param {string} opts.root        - absolute path to project root
+ * @param {string} opts.htmlEntry   - e.g. 'index.html'
  * @param {number} opts.port
- * @param {boolean} opts.noIntercept — skip zquery.min.js auto-resolve
+ * @param {boolean} opts.noIntercept - skip zquery.min.js auto-resolve
  * @returns {Promise<{ app, pool: SSEPool, listen: Function }>}
  */
 async function createServer({ root, htmlEntry, port, noIntercept }) {
@@ -136,7 +136,7 @@ async function createServer({ root, htmlEntry, port, noIntercept }) {
   // ---- Static files ----
   app.use(serveStatic(root, { index: false, dotfiles: 'ignore' }));
 
-  // ---- SPA fallback — inject overlay/SSE snippet ----
+  // ---- SPA fallback - inject overlay/SSE snippet ----
   app.get('*', (req, res) => {
     if (path.extname(req.url) && path.extname(req.url) !== '.html') {
       res.status(404).send('Not Found');

package/cli/commands/dev/validator.js

@@ -1,5 +1,5 @@
 /**
- * cli/commands/dev/validator.js — JS syntax validation
+ * cli/commands/dev/validator.js - JS syntax validation
  *
  * Pre-validates JavaScript files on save using Node's VM module.
  * Returns structured error descriptors with code frames compatible
@@ -19,9 +19,9 @@ const vm = require('vm');
  * Build a code frame showing ~4 lines of context around the error
  * with a caret pointer at the offending column.
  *
- * @param {string} source   — full file contents
- * @param {number} line     — 1-based line number
- * @param {number} column   — 1-based column number
+ * @param {string} source   - full file contents
+ * @param {number} line     - 1-based line number
+ * @param {number} column   - 1-based column number
  * @returns {string}
  */
 function generateCodeFrame(source, line, column) {
@@ -52,9 +52,9 @@ function generateCodeFrame(source, line, column) {
  * Strips ESM import/export statements (preserving line numbers) so the
  * VM can parse module-style code, then compiles via vm.Script.
  *
- * @param {string} filePath — absolute path to the file
- * @param {string} relPath  — display-friendly relative path
- * @returns {object|null}   — error descriptor, or null if valid
+ * @param {string} filePath - absolute path to the file
+ * @param {string} relPath  - display-friendly relative path
+ * @returns {object|null}   - error descriptor, or null if valid
  */
 function validateJS(filePath, relPath) {
   let source;

package/cli/commands/dev/watcher.js

@@ -1,5 +1,5 @@
 /**
- * cli/commands/dev/watcher.js — File system watcher
+ * cli/commands/dev/watcher.js - File system watcher
  *
  * Recursively watches the project root for file changes, validates
  * JS files for syntax errors, and broadcasts reload / CSS hot-swap /
@@ -44,7 +44,7 @@ function collectWatchDirs(dir) {
       if (!entry.isDirectory() || IGNORE_DIRS.has(entry.name)) continue;
       dirs.push(...collectWatchDirs(path.join(dir, entry.name)));
     }
-  } catch { /* unreadable dir — skip */ }
+  } catch { /* unreadable dir - skip */ }
   return dirs;
 }
 
@@ -56,8 +56,8 @@ function collectWatchDirs(dir) {
  * Start watching `root` for file changes.
  *
  * @param {object}  opts
- * @param {string}  opts.root  — absolute project root
- * @param {SSEPool} opts.pool  — SSE broadcast pool
+ * @param {string}  opts.root  - absolute project root
+ * @param {SSEPool} opts.pool  - SSE broadcast pool
  * @returns {{ dirs: string[], destroy: Function }}
  */
 function startWatcher({ root, pool, bundleMode, serveRoot }) {
@@ -121,7 +121,7 @@ function startWatcher({ root, pool, bundleMode, serveRoot }) {
               pool.broadcast('error:syntax', JSON.stringify(err));
               return;
             }
-            // File was fixed — clear previous overlay
+            // File was fixed - clear previous overlay
             if (currentError === rel) {
               currentError = null;
               pool.broadcast('error:clear', '');
@@ -158,7 +158,7 @@ function startWatcher({ root, pool, bundleMode, serveRoot }) {
         }, 100);
       });
       watchers.push(watcher);
-    } catch { /* dir became inaccessible — skip */ }
+    } catch { /* dir became inaccessible - skip */ }
   }
 
   function destroy() {

package/cli/help.js

@@ -1,4 +1,4 @@
-// cli/help.js — show CLI usage information
+// cli/help.js - show CLI usage information
 
 function showHelp() {
   console.log(`
@@ -11,6 +11,8 @@ function showHelp() {
                                (defaults to the current directory)
       --minimal, -m            Use the minimal template (home, counter, about)
                                instead of the full-featured default scaffold
+      --ssr, -s                Use the SSR template - includes server/index.js
+                               SSR HTTP server with shared component definitions
 
     dev [root]                 Start a dev server with live-reload
       --port, -p <number>     Port number (default: 3100)
@@ -67,7 +69,7 @@ function showHelp() {
     zquery dev --port 8080     custom port
 
     The dev server includes a full-screen error overlay:
-      • JS files are syntax-checked on save — errors block reload
+      • JS files are syntax-checked on save - errors block reload
         and show an overlay with exact file, line:column, and code frame
       • Runtime errors and unhandled rejections are also captured
       • The overlay auto-clears when the file is fixed and saved

package/cli/index.js

@@ -1,7 +1,7 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 
 /**
- * zQuery CLI — entry point
+ * zQuery CLI - entry point
  *
  * Dispatches to the appropriate command module under cli/commands/.
  * Run `zquery --help` for full usage information.

package/cli/scaffold/default/app/app.js

@@ -1,15 +1,15 @@
-// app.js — Application entry point
+// app.js - Application entry point
 //
 // Bootstraps the app: imports components, sets up routing,
 // wires the responsive sidebar, and connects the store.
 //
 // Key APIs used:
-//   $.router     — SPA navigation (history mode)
-//   $.ready      — run after DOM is loaded
-//   $.bus        — event bus (toast notifications, contact card)
-//   $.on         — global delegated event listeners
-//   $.storage    — localStorage wrapper
-//   $.create     — create DOM elements
+//   $.router     - SPA navigation (history mode)
+//   $.ready      - run after DOM is loaded
+//   $.bus        - event bus (toast notifications, contact card)
+//   $.on         - global delegated event listeners
+//   $.storage    - localStorage wrapper
+//   $.create     - create DOM elements
 
 import './store.js';
 import './components/home.js';
@@ -25,16 +25,15 @@ import './components/not-found.js';
 import { routes } from './routes.js';
 
 // ---------------------------------------------------------------------------
-// Router — SPA navigation with history mode
+// Router - SPA navigation with history mode
 // ---------------------------------------------------------------------------
 const router = $.router({
-  el: '#app',   //@ Mount point (Set in index.html)
   routes,
   fallback: 'not-found',
   mode: 'history'
 });
 
-// Post-navigation hook — track page views on every navigation
+// Post-navigation hook - track page views on every navigation
 router.afterEach((to) => {
   const store = $.getStore('main');
   if (store) store.dispatch('incrementVisits');
@@ -65,17 +64,17 @@ function toggleMobileMenu(open) {
 
 function closeMobileMenu() { toggleMobileMenu(false); }
 
-// $.on — global delegated event listeners
+// $.on - global delegated event listeners
 $.on('click', '#menu-toggle', () => toggleMobileMenu(!$sidebar.hasClass('open')));
 $.on('click', '#overlay', closeMobileMenu);
 
-// Close sidebar on Escape key — using $.on direct (no selector needed)
+// Close sidebar on Escape key - using $.on direct (no selector needed)
 $.on('keydown', (e) => {
   if (e.key === 'Escape') closeMobileMenu();
 });
 
 // ---------------------------------------------------------------------------
-// Sidebar stats panel — collapsible, live-updating from $.store
+// Sidebar stats panel - collapsible, live-updating from $.store
 // Starts expanded by default. Open/closed state saved via $.storage.
 // ---------------------------------------------------------------------------
 $.on('click', '#stats-toggle', () => {
@@ -100,7 +99,7 @@ function updateSidebarStats() {
 }
 
 // ---------------------------------------------------------------------------
-// Sidebar contacts — live status indicators from $.store
+// Sidebar contacts - live status indicators from $.store
 // ---------------------------------------------------------------------------
 function updateSidebarContacts() {
   const store = $.getStore('main');
@@ -145,7 +144,7 @@ $.bus.on('toast', ({ message, type = 'info' }) => {
 });
 
 // ---------------------------------------------------------------------------
-// On DOM ready — final setup
+// On DOM ready - final setup
 // ---------------------------------------------------------------------------
 $.ready(() => {
   // Display version in the sidebar footer
@@ -173,7 +172,7 @@ $.ready(() => {
     $('#stats-arrow').removeClass('open');
   }
 
-  // Sidebar contact click — open the global contact card overlay
+  // Sidebar contact click - open the global contact card overlay
   $('#sc-list').on('click', '.sc-item', (e) => {
     const item = e.target.closest('.sc-item');
     if (!item) return;
@@ -193,11 +192,11 @@ $.ready(() => {
   // Mount any components outside the router outlet (e.g. <contact-card>)
   $.mountAll();
 
-  console.log('⚡ {{NAME}} — powered by zQuery v' + $.version);
+  console.log('⚡ {{NAME}} - powered by zQuery v' + $.version);
 });
 
 // ---------------------------------------------------------------------------
-// Theme helper — resolves 'system' to actual dark/light and applies it
+// Theme helper - resolves 'system' to actual dark/light and applies it
 // ---------------------------------------------------------------------------
 function applyTheme(preference) {
   let resolved = preference;

package/cli/scaffold/default/app/components/about.js

@@ -1,11 +1,11 @@
-// about.js — About page with theme switcher
+// about.js - About page with theme switcher
 //
 // Features used:
-//   $.storage        — localStorage wrapper (get / set)
-//   $.version        — library version string
-//   $.unitTests      — build-time test results object
-//   $.bus.emit       — toast notifications
-//   data-theme attr  — dark / light theming
+//   $.storage        - localStorage wrapper (get / set)
+//   $.version        - library version string
+//   $.unitTests      - build-time test results object
+//   $.bus.emit       - toast notifications
+//   data-theme attr  - dark / light theming
 
 $.component('about-page', {
   styles: `
@@ -100,7 +100,7 @@ $.component('about-page', {
       'Directives': [
         ['z-if / z-for / z-show', 'Structural directives for conditional & list rendering'],
         ['z-bind / z-class / z-style', 'Dynamic attributes, classes, and inline styles'],
-        ['z-debounce', 'Debounced model updates — z-model z-debounce="300"'],
+        ['z-debounce', 'Debounced model updates - z-model z-debounce="300"'],
         ['z-lowercase / z-uppercase', 'Auto-transform text input on contacts email'],
         ['z-html', 'Trusted HTML injection in the playground'],
         ['templateUrl / styleUrl', 'External templates and CSS with auto-scoping'],
@@ -109,7 +109,7 @@ $.component('about-page', {
         ['@click.stop / .prevent', 'Event modifiers for fine-grained control'],
         ['@click.self / .once', 'Self-only and one-shot handlers in modals'],
         ['@click.outside', 'Outside-click detection for dropdowns'],
-        ['@keydown.escape', 'Key modifiers — Escape to close forms'],
+        ['@keydown.escape', 'Key modifiers - Escape to close forms'],
       ],
       'Reactive Primitives': [
         ['$.signal() / $.computed()', 'Fine-grained reactive primitives for derived state'],
@@ -136,7 +136,7 @@ $.component('about-page', {
       <div class="about-hero">
         <span class="ver">v${$.version}</span>
         <h1>zQuery</h1>
-        <p>A zero-dependency frontend micro-library — reactive components, routing, state management, and more in <strong>${$.libSize}</strong> minified.</p>
+        <p>A zero-dependency frontend micro-library - reactive components, routing, state management, and more in <strong>${$.libSize}</strong> minified.</p>
       </div>
 
       <div class="about-stats">

package/cli/scaffold/default/app/components/api-demo.js

@@ -1,11 +1,11 @@
-// api-demo.js — HTTP client demo
+// api-demo.js - HTTP client demo
 //
 // Features used:
-//   $.get()                — fetch JSON from an API
-//   z-if / z-else / z-show — conditional rendering
-//   z-for / z-text         — list rendering & text binding
-//   $.escapeHtml()         — sanitize user-provided content
-//   async methods          — loading & error state patterns
+//   $.get()                - fetch JSON from an API
+//   z-if / z-else / z-show - conditional rendering
+//   z-for / z-text         - list rendering & text binding
+//   $.escapeHtml()         - sanitize user-provided content
+//   async methods          - loading & error state patterns
 
 $.component('api-demo', {
   styles: `

package/cli/scaffold/default/app/components/contact-card.js

@@ -1,12 +1,12 @@
-// contact-card.js — Global contact detail popup
+// contact-card.js - Global contact detail popup
 //
 // Always-mounted overlay that listens for $.bus 'openContact' events.
 // Works from any page without navigation.
 //
 // Features used:
-//   $.bus.on / $.bus.emit   — event-driven communication
-//   $.getStore              — read contact data from store
-//   @click.self             — dismiss on backdrop click
+//   $.bus.on / $.bus.emit   - event-driven communication
+//   $.getStore              - read contact data from store
+//   @click.self             - dismiss on backdrop click
 
 $.component('contact-card', {
   styles: `

package/cli/scaffold/default/app/components/contacts/contacts.css

@@ -1,6 +1,6 @@
-/* contacts.css — scoped styles for contacts-page component
+/* contacts.css - scoped styles for contacts-page component
  *
- * Loaded via styleUrl — these styles are automatically scoped
+ * Loaded via styleUrl - these styles are automatically scoped
  * to the contacts-page component by zQuery.
  */
 

package/cli/scaffold/default/app/components/contacts/contacts.html

@@ -1,5 +1,5 @@
 <!--
-  contacts.html — external template for contacts-page component
+  contacts.html - external template for contacts-page component
 
   This template is fetched via templateUrl and uses {{expression}} syntax
   for data binding. All zQuery directives work here: z-if, z-else,
@@ -10,7 +10,7 @@
   <h1>Contacts</h1>
   <p class="subtitle">
     External template &amp; styles via <code>templateUrl</code> / <code>styleUrl</code>.
-    Click a contact card to open the detail modal — dismiss with <code>Esc</code> or <code>@click.outside</code>.
+    Click a contact card to open the detail modal - dismiss with <code>Esc</code> or <code>@click.outside</code>.
   </p>
 </div>
 
@@ -74,7 +74,7 @@
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" style="width:48px;height:48px;opacity:.3;"><path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/></svg>
   </div>
   <p z-if="filterText || filterRole">No contacts match your filter.</p>
-  <p z-else>No contacts yet — hit <strong>+ Add Contact</strong> to create one!</p>
+  <p z-else>No contacts yet - hit <strong>+ Add Contact</strong> to create one!</p>
 </div>
 
 <!-- ═══ Add Contact Modal ═══ -->

package/cli/scaffold/default/app/components/contacts/contacts.js

@@ -1,13 +1,13 @@
-// contacts.js — Contact book page
+// contacts.js - Contact book page
 //
 // Features used:
-//   templateUrl / styleUrl  — external template & scoped styles
-//   z-if / z-show / z-for   — conditional & list rendering
-//   z-model / z-ref          — form bindings
-//   @click / @submit.prevent — event handling
-//   @keydown.escape          — keyboard modifier
-//   $.getStore / dispatch    — store integration
-//   $.bus.emit('toast')      — notifications
+//   templateUrl / styleUrl  - external template & scoped styles
+//   z-if / z-show / z-for   - conditional & list rendering
+//   z-model / z-ref          - form bindings
+//   @click / @submit.prevent - event handling
+//   @keydown.escape          - keyboard modifier
+//   $.getStore / dispatch    - store integration
+//   $.bus.emit('toast')      - notifications
 
 $.component('contacts-page', {
   templateUrl: 'contacts.html',
@@ -29,7 +29,7 @@ $.component('contacts-page', {
     favoriteCount: 0,
     filterText: '',
     filterRole: '',
-    // Derived state (not computed — external templates resolve state only)
+    // Derived state (not computed - external templates resolve state only)
     filteredContacts: [],
     modalContact: null,
   }),
@@ -45,7 +45,7 @@ $.component('contacts-page', {
     this._syncFromStore(store);
     this._unsub = store.subscribe(() => this._syncFromStore(store));
 
-    // Global Escape handler — template @keydown.escape on overlays is
+    // Global Escape handler - template @keydown.escape on overlays is
     // unreliable when no child element has focus (detail modal has no inputs).
     this._onEscape = (e) => {
       if (e.key !== 'Escape') return;
@@ -62,7 +62,7 @@ $.component('contacts-page', {
 
   _syncFromStore(store) {
     // Shallow-clone each contact so the framework detects new references
-    // (store actions mutate objects in place — same refs won't trigger re-render)
+    // (store actions mutate objects in place - same refs won't trigger re-render)
     this.state.contacts      = store.state.contacts.map(c => ({ ...c }));
     this.state.totalAdded    = store.state.contactsAdded;
     this.state.favoriteCount = store.getters.favoriteCount;

package/cli/scaffold/default/app/components/counter.js

@@ -1,11 +1,11 @@
-// counter.js — Interactive counter
+// counter.js - Interactive counter
 //
 // Features used:
-//   state / computed / watch  — reactive data flow
-//   @click                    — event binding
-//   z-model + z-number        — two-way binding with type coercion
-//   z-class / z-if / z-for    — conditional & list rendering
-//   $.bus.emit('toast', …)    — notifications via event bus
+//   state / computed / watch  - reactive data flow
+//   @click                    - event binding
+//   z-model + z-number        - two-way binding with type coercion
+//   z-class / z-if / z-for    - conditional & list rendering
+//   $.bus.emit('toast', …)    - notifications via event bus
 
 $.component('counter-page', {
   styles: `
@@ -72,7 +72,7 @@ $.component('counter-page', {
 
   decrement() {
     this.state.count -= this.state.step;
-    this._pushHistory('−', this.state.step, this.state.count);
+    this._pushHistory('-', this.state.step, this.state.count);
   },
 
   _pushHistory(action, value, result) {
@@ -101,7 +101,7 @@ $.component('counter-page', {
         </div>
 
         <div class="ctr-actions">
-          <button class="btn btn-outline" @click="decrement">− Subtract</button>
+          <button class="btn btn-outline" @click="decrement">- Subtract</button>
           <button class="btn btn-primary" @click="increment">+ Add</button>
         </div>