voodoojs 0.6.0 → 0.6.2

package/README.md

@@ -4,6 +4,13 @@
 
 No mandatory build step · No runtime dependencies · No Virtual DOM · No configuration required
 
+[Website](https://kwy404.github.io/Voodoo.js/) ·
+[Playground](https://kwy404.github.io/Voodoo.js/playground.html) ·
+[Components](https://kwy404.github.io/Voodoo.js/components.html) ·
+[Examples](https://kwy404.github.io/Voodoo.js/examples/) ·
+[Documentation](https://kwy404.github.io/Voodoo.js/docs/) ·
+[GitHub](https://github.com/kwy404/Voodoo.js)
+
 ---
 
 ## Install
@@ -15,14 +22,16 @@ npm install voodoojs
 Or drop it into a page, with nothing else:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/voodoojs/dist/voodoo.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/voodoojs@0.6/dist/voodoo.min.js" defer></script>
 
 <div v-data="{ count: 0 }">
   <button @click="count++">Clicked { count } times</button>
 </div>
 ```
 
-That page is a complete application. There is no build step, no bundler and no configuration.
+That page is a complete application. There is no build step, no bundler and no
+configuration. The tag is pinned to the `0.6` line, so patch releases arrive
+without an edit; pin the exact version if you would rather approve each one.
 
 ## Two ways to write it
 
@@ -45,30 +54,73 @@ effect(() => console.log(state.count));
 state.count++;
 ```
 
+## What you get
+
+Reactivity, components, a router, HTTP, forms with validation and masks, input
+masks, i18n, charts, motion, sound, a devtools inspector, and 29 ready-made
+components that need no registration — writing the tag is the whole usage.
+
+```html
+<v-button variant="primary">Save</v-button>
+<v-input label="Email" type="email"></v-input>
+<v-table :columns="cols" :rows="people"></v-table>
+```
+
+## No eval, anywhere
+
+Expressions run through a lexer, a Pratt parser and an interpreter, never `eval`
+or `new Function`. That is why the library works under a strict Content Security
+Policy with no `unsafe-eval`, which a browser test proves by loading it under
+`script-src 'self'` and asserting no policy violation is raised.
+
+## It cleans up after itself
+
+Once a directive is installed, its attribute is read into memory and removed from
+the document. What ships to the page is ordinary HTML, with no framework residue
+in the inspector. Turn it off with `V.config.cleanAttributes = false` if you need
+the attributes for something else.
+
 ## Builds
 
-| File | What it carries |
-| --- | --- |
-| `dist/voodoo.core.min.js` | Reactivity, expressions, DOM engine, components, core directives |
-| `dist/voodoo.min.js` | The above plus forms, validation, masks, UI and HTTP. Served by default on the CDN |
-| `dist/voodoo.full.min.js` | Everything: charts, motion, router, i18n, sound and the devtools inspector |
+| File | What it carries | Gzip |
+| --- | --- | --- |
+| `dist/voodoo.core.min.js` | Reactivity, expressions, DOM engine, components, core directives | 46 KB |
+| `dist/voodoo.min.js` | The above plus forms, validation, masks, UI and HTTP | 83 KB |
+| `dist/voodoo.full.min.js` | Everything: charts, motion, router, i18n, sound, devtools | 129 KB |
 
-Module entry points are also published for bundlers:
+Module entry points are published for bundlers, in ESM and CJS, with types:
 
 ```js
 import { reactive } from 'voodoojs/reactivity';
 import { http } from 'voodoojs/http';
 ```
 
-TypeScript definitions ship with the package.
+## Performance
 
-## Documentation
+A 1,000-row keyed list, median of 30 samples, against the same document, every
+framework bundled production and minified. Lower is better.
+
+| | create 1k | update 1 in 10 | clear 1k |
+| --- | ---: | ---: | ---: |
+| vanilla JS | 48.74 | 7.52 | 21.06 |
+| Preact 10.29.8 | 91.62 | 2.59 | 29.48 |
+| **Voodoo.js** | **97.70** | **5.42** | **30.44** |
+| React 19.2.8 | 100.23 | 4.63 | 33.59 |
+| Vue 3.5.42 | 110.56 | 19.21 | 31.65 |
+| Solid 1.9.15 | 111.63 | 0.91 | 19.99 |
+| Alpine 3.17.1 | 179.47 | 104.51 | 31.39 |
 
-Full documentation, guides, examples and the API reference live in the repository:
+Read honestly: hand-written vanilla still builds a list twice as fast, and Voodoo
+is by far the largest bundle in that table. If size is your main constraint,
+Alpine and Preact are the honest recommendation. Method and per-framework
+adapters are in the repository.
 
-**https://github.com/kwy404/Voodoo.js**
+## Documentation
 
-The documentation is written in Portuguese under `docs/`, with an English set under `docs/en/`.
+Everything lives at **[kwy404.github.io/Voodoo.js](https://kwy404.github.io/Voodoo.js/)**:
+a guide, an API reference, 13 working example applications, a playground with 26
+runnable examples, and the component gallery. The site is built with Voodoo.js
+itself and has no build step of its own.
 
 ## License
 

package/dist/index.cjs

@@ -7732,6 +7732,33 @@ function buildUrl(location2) {
   const base = settings2.base === "/" ? "" : settings2.base.replace(/\/$/, "");
   return `${base}${suffix}` || "/";
 }
+var historyRefused = false;
+var writingHash = false;
+function writeUrl(state2, url2, replace) {
+  if (!historyRefused) {
+    try {
+      if (replace) window.history.replaceState(state2, "", url2);
+      else window.history.pushState(state2, "", url2);
+      return;
+    } catch (error) {
+      if (!(error instanceof Error) || error.name !== "SecurityError") throw error;
+      historyRefused = true;
+    }
+  }
+  if (settings2.mode !== "hash") return;
+  const marker = url2.indexOf("#");
+  if (marker < 0) return;
+  const hash = url2.slice(marker);
+  if (window.location.hash === hash) return;
+  writingHash = true;
+  try {
+    window.location.hash = hash;
+  } finally {
+    setTimeout(() => {
+      writingHash = false;
+    }, 0);
+  }
+}
 function compileRoute(pattern, record) {
   const clean = pattern === "*" ? "*" : normalizePath(pattern);
   const raw = clean === "*" ? ["*"] : clean.split("/").filter(Boolean);
@@ -7918,8 +7945,7 @@ async function navigate(target2, options = {}) {
   const key = uid("rota");
   const historyState = { ...options.state ?? {}, [HISTORY_KEY]: key };
   const url2 = buildUrl(destination);
-  if (options.replace) window.history.replaceState(historyState, "", url2);
-  else window.history.pushState(historyState, "", url2);
+  writeUrl(historyState, url2, options.replace === true);
   currentKey = key;
   applyLocation(destination);
   if (options.scroll !== false) scheduleScroll(destination, from, null);
@@ -7932,17 +7958,14 @@ async function navigate(target2, options = {}) {
   return true;
 }
 async function onHistoryChange(event) {
+  if (writingHash) return;
   const { path, query: query2, hash } = readLocation();
   const destination = locationFor(path, query2, hash);
   const from = snapshot();
   if (destination.fullPath === from.fullPath) return;
   const verdict = await runGuards(destination, from);
   if (verdict === false) {
-    window.history.replaceState(
-      { [HISTORY_KEY]: currentKey },
-      "",
-      buildUrl(from)
-    );
+    writeUrl({ [HISTORY_KEY]: currentKey }, buildUrl(from), true);
     devtoolsBus.emit("navigation", {
       from: from.fullPath,
       to: destination.fullPath,
@@ -7985,6 +8008,8 @@ function stopRouter() {
   window.removeEventListener("popstate", historyListener);
   window.removeEventListener("hashchange", historyListener);
   window.removeEventListener("beforeunload", saveScroll);
+  historyRefused = false;
+  writingHash = false;
 }
 async function enterInitialRoute() {
   if (typeof window === "undefined") return;
@@ -8005,7 +8030,7 @@ async function enterInitialRoute() {
     break;
   }
   currentKey = uid("rota");
-  window.history.replaceState({ [HISTORY_KEY]: currentKey }, "", buildUrl(destination));
+  writeUrl({ [HISTORY_KEY]: currentKey }, buildUrl(destination), true);
   applyLocation(destination);
   if (destination.hash) scheduleScroll(destination, from, null);
   settings2.afterEach?.(snapshot(), from);

package/dist/index.js

@@ -128,6 +128,33 @@ function buildUrl(location) {
   const base = settings.base === "/" ? "" : settings.base.replace(/\/$/, "");
   return `${base}${suffix}` || "/";
 }
+var historyRefused = false;
+var writingHash = false;
+function writeUrl(state2, url2, replace) {
+  if (!historyRefused) {
+    try {
+      if (replace) window.history.replaceState(state2, "", url2);
+      else window.history.pushState(state2, "", url2);
+      return;
+    } catch (error) {
+      if (!(error instanceof Error) || error.name !== "SecurityError") throw error;
+      historyRefused = true;
+    }
+  }
+  if (settings.mode !== "hash") return;
+  const marker = url2.indexOf("#");
+  if (marker < 0) return;
+  const hash = url2.slice(marker);
+  if (window.location.hash === hash) return;
+  writingHash = true;
+  try {
+    window.location.hash = hash;
+  } finally {
+    setTimeout(() => {
+      writingHash = false;
+    }, 0);
+  }
+}
 function compileRoute(pattern, record) {
   const clean = pattern === "*" ? "*" : normalizePath(pattern);
   const raw = clean === "*" ? ["*"] : clean.split("/").filter(Boolean);
@@ -314,8 +341,7 @@ async function navigate(target, options = {}) {
   const key = uid("rota");
   const historyState = { ...options.state ?? {}, [HISTORY_KEY]: key };
   const url2 = buildUrl(destination);
-  if (options.replace) window.history.replaceState(historyState, "", url2);
-  else window.history.pushState(historyState, "", url2);
+  writeUrl(historyState, url2, options.replace === true);
   currentKey = key;
   applyLocation(destination);
   if (options.scroll !== false) scheduleScroll(destination, from, null);
@@ -328,17 +354,14 @@ async function navigate(target, options = {}) {
   return true;
 }
 async function onHistoryChange(event) {
+  if (writingHash) return;
   const { path, query: query2, hash } = readLocation();
   const destination = locationFor(path, query2, hash);
   const from = snapshot();
   if (destination.fullPath === from.fullPath) return;
   const verdict = await runGuards(destination, from);
   if (verdict === false) {
-    window.history.replaceState(
-      { [HISTORY_KEY]: currentKey },
-      "",
-      buildUrl(from)
-    );
+    writeUrl({ [HISTORY_KEY]: currentKey }, buildUrl(from), true);
     devtoolsBus.emit("navigation", {
       from: from.fullPath,
       to: destination.fullPath,
@@ -381,6 +404,8 @@ function stopRouter() {
   window.removeEventListener("popstate", historyListener);
   window.removeEventListener("hashchange", historyListener);
   window.removeEventListener("beforeunload", saveScroll);
+  historyRefused = false;
+  writingHash = false;
 }
 async function enterInitialRoute() {
   if (typeof window === "undefined") return;
@@ -401,7 +426,7 @@ async function enterInitialRoute() {
     break;
   }
   currentKey = uid("rota");
-  window.history.replaceState({ [HISTORY_KEY]: currentKey }, "", buildUrl(destination));
+  writeUrl({ [HISTORY_KEY]: currentKey }, buildUrl(destination), true);
   applyLocation(destination);
   if (destination.hash) scheduleScroll(destination, from, null);
   settings.afterEach?.(snapshot(), from);

package/dist/voodoo.full.js

@@ -7855,6 +7855,33 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     const base = settings2.base === "/" ? "" : settings2.base.replace(/\/$/, "");
     return `${base}${suffix}` || "/";
   }
+  var historyRefused = false;
+  var writingHash = false;
+  function writeUrl(state2, url2, replace) {
+    if (!historyRefused) {
+      try {
+        if (replace) window.history.replaceState(state2, "", url2);
+        else window.history.pushState(state2, "", url2);
+        return;
+      } catch (error) {
+        if (!(error instanceof Error) || error.name !== "SecurityError") throw error;
+        historyRefused = true;
+      }
+    }
+    if (settings2.mode !== "hash") return;
+    const marker = url2.indexOf("#");
+    if (marker < 0) return;
+    const hash = url2.slice(marker);
+    if (window.location.hash === hash) return;
+    writingHash = true;
+    try {
+      window.location.hash = hash;
+    } finally {
+      setTimeout(() => {
+        writingHash = false;
+      }, 0);
+    }
+  }
   function compileRoute(pattern, record) {
     const clean = pattern === "*" ? "*" : normalizePath(pattern);
     const raw = clean === "*" ? ["*"] : clean.split("/").filter(Boolean);
@@ -8045,8 +8072,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     const key = uid("rota");
     const historyState = { ...(_a2 = options.state) != null ? _a2 : {}, [HISTORY_KEY]: key };
     const url2 = buildUrl(destination);
-    if (options.replace) window.history.replaceState(historyState, "", url2);
-    else window.history.pushState(historyState, "", url2);
+    writeUrl(historyState, url2, options.replace === true);
     currentKey = key;
     applyLocation(destination);
     if (options.scroll !== false) scheduleScroll(destination, from, null);
@@ -8060,17 +8086,14 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
   }
   async function onHistoryChange(event) {
     var _a2, _b;
+    if (writingHash) return;
     const { path, query: query2, hash } = readLocation();
     const destination = locationFor(path, query2, hash);
     const from = snapshot();
     if (destination.fullPath === from.fullPath) return;
     const verdict = await runGuards(destination, from);
     if (verdict === false) {
-      window.history.replaceState(
-        { [HISTORY_KEY]: currentKey },
-        "",
-        buildUrl(from)
-      );
+      writeUrl({ [HISTORY_KEY]: currentKey }, buildUrl(from), true);
       devtoolsBus.emit("navigation", {
         from: from.fullPath,
         to: destination.fullPath,
@@ -8113,6 +8136,8 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
     window.removeEventListener("popstate", historyListener);
     window.removeEventListener("hashchange", historyListener);
     window.removeEventListener("beforeunload", saveScroll);
+    historyRefused = false;
+    writingHash = false;
   }
   async function enterInitialRoute() {
     var _a2;
@@ -8134,7 +8159,7 @@ Suggestion: attribute expressions accept a single value. If the logic spans more
       break;
     }
     currentKey = uid("rota");
-    window.history.replaceState({ [HISTORY_KEY]: currentKey }, "", buildUrl(destination));
+    writeUrl({ [HISTORY_KEY]: currentKey }, buildUrl(destination), true);
     applyLocation(destination);
     if (destination.hash) scheduleScroll(destination, from, null);
     (_a2 = settings2.afterEach) == null ? void 0 : _a2.call(settings2, snapshot(), from);