Improve build and React support

CHANGELOG.md

@@ -1,3 +1,7 @@
+## v0.1.3 - 2024-10-14
+- Improve build
+- Refactor to externalize platform dependencies.
+
 ## v0.1.2 - 2024-10-14
 - Fix issues with format
 - Add examples

README.md

@@ -3,9 +3,9 @@
 ![NPM Version](https://img.shields.io/npm/v/jstracetoix)
 ![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/a-bentofreire/jstracetoix/.github%2Fworkflows%2Fnpm-package.yml)
 
-[JsTraceToIX](https://www.devtoix.com/en/projects/jstracetoix) is an expression tracer for debugging arrow functions, method chaining, and expressions.
+[JsTraceToIX](https://www.devtoix.com/en/projects/jstracetoix) is an expression tracer for debugging React components, arrow functions, method chaining, and expressions.
 
-Code editors can't set breakpoints inside expressions, arrow functions, and chained methods, forcing significant code changes to debug such code.
+Code editors cannot set breakpoints within expressions, including React components, arrow functions, and chained methods, often requiring significant code changes to debug this type of code.
 
 JsTraceToIX provides a straightforward solution to this problem.
 
@@ -26,25 +26,84 @@ This package is also available for:
 
 ## Features
 
-- Runs on Node.js and in the browser.
-- [Multithreading](https://www.devtoix.com/en/projects/jstracetoix#multithreading) support.
-- Simple and short minimalist function names.
-- Result with Inputs tracing.
-- Configurable [formatting](https://www.devtoix.com/en/projects/jstracetoix#formatting) at global level and at function level.
+- No external dependencies.
+- Runs on Node.js, browsers, and React components.
+- Supports [Multithreading](https://www.devtoix.com/en/projects/jstracetoix#multithreading).
+- Minimalist function names that are simple and short.
+- Traces results along with inputs.
 - Configurable result and input naming.
-- Output to the stdout or a stream.
-- Multiple levels.
-- Capture Input method with `allow` and `name` callback.
-- Display Result method with `allow`, `before` and `after` callbacks.
-- Input and Result output can be formatted and overridden.
+- Outputs to console.debug (browsers and React) or a stream (Node.js).
+- Supports multiple levels.
+- Capture Input method with customizable `allow` and `name` callbacks.
+- Display Result method with customizable `allow`, `before`, and `after` callbacks.
+- Input and result outputs can be formatted and overridden.
+- Configurable [formatting](https://www.devtoix.com/en/projects/jstracetoix#formatting) at both global and function levels.
 
-## Installation - Node.js
+## How to install JsTraceToIX on Node.js or React
 
 ```bash
 npm install jstracetoix --save-dev
 ```
 
-## Running in the Browser
+## How to use JsTraceToIX on React
+
+JsTraceToIX can be used to debug expressions within React components.  
+It can be installed locally or imported via URL.  
+The output is displayed in the browser's developer tools under the console tab.  
+Since the output is generated using `console.debug`, it can easily be filtered out from regular `console.log` messages.
+
+```javascript
+// Without local installation
+import { c__, d__ } from 'https://cdn.jsdelivr.net/gh/a-bentofreire/jstracetoix/component/jstracetoix.mjs?v=0.1.3';
+
+// If it's installed locally  via npm install jstracetoix --save-dev
+// import { c__, d__ } from 'jstracetoix/component/jstracetoix.mjs';
+
+                        // c__ captures the input price 
+const cityTax = (price) => c__(price, {name: 'Price'}) > 20 ? 15 : 5;
+const products = [
+    { title: 'Rice', price: 10, id: 1 },
+    { title: 'Coffee', price: 30, id: 2 },
+    { title: 'Shoes', price: 100, id: 3 },
+];
+
+function ShoppingList() {
+    // c__ captures the title and the output of the cityTax
+    // d__ displays the aggregated information in a single line: title, price, cityTax, total Price
+    const listItems = products.map(product =>
+        <tr key={product.id}>
+            <td>{c__(product.title)}</td>
+            <td>{d__(product.price + c__(cityTax(product.price), { name: 'CityTax' }))}</td>
+        </tr>
+    );
+
+    return (
+        <table><tbody>{listItems}</tbody></table>
+    );
+}
+
+function App() {
+    return (
+        <div className="App">
+            <header className="App-header">
+                <ShoppingList />
+            </header>
+        </div>
+    );
+}
+
+export default App;
+```
+
+`console.debug` output:
+
+```plaintext
+i0:`Rice` | Price:`10` | CityTax:`5` | _:`15`
+i0:`Coffee` | Price:`30` | CityTax:`15` | _:`45`
+i0:`Shoes` | Price:`100` | CityTax:`15` | _:`115`
+```
+
+## How to use JsTraceToIX on a browser
 
 ```html
 <!DOCTYPE html>

browser/jstracetoix-dev.js

@@ -2,7 +2,7 @@
 // Copyright (c) 2024 Alexandre Bento Freire. All rights reserved.
 // Licensed under the MIT license
 // --------------------------------------------------------------------
-// Version: 0.1.2
+// Version: 0.1.3
 "use strict";
 var jstracetoix = (() => {
   var __defProp = Object.defineProperty;
@@ -23,12 +23,6 @@ var jstracetoix = (() => {
       }
     return a;
   };
-  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-  }) : x)(function(x) {
-    if (typeof require !== "undefined") return require.apply(this, arguments);
-    throw Error('Dynamic require of "' + x + '" is not supported');
-  });
   var __export = (target, all) => {
     for (var name in all)
       __defProp(target, name, { get: all[name], enumerable: true });
@@ -52,43 +46,43 @@ var jstracetoix = (() => {
     init__: () => init__,
     t__: () => t__
   });
-  var import_worker_threads = __require("worker_threads");
+
+  // externals.ts
+  var _stream = console.debug;
+  var getMultithreading = () => false;
+  var setMultithreading = (multithreading) => {
+  };
+  var getThreadId = (threadIdParam = void 0) => 0;
+  var acquireLock = () => {
+  };
+  var releaseLock = () => {
+  };
+  var writeToStream = (output) => {
+    _stream(output);
+  };
+  var setStream = (stream) => {
+    _stream = stream || _stream;
+  };
+
+  // jstracetoix.ts
   var DEFAULT_FORMAT = {
     result: "{name}:`{value}`",
     input: "{name}:`{value}`",
     thread: "{id}: ",
     sep: " | ",
     new_line: true
   };
-  var _stream = false ? process.stdout : console.debug;
-  var _multithreading = false;
   var _format = DEFAULT_FORMAT;
   var _inputsPerThreads = {};
   var _threadNames = {};
-  var _sharedLockBuffer = false ? new SharedArrayBuffer(4) : void 0;
-  var _lockArray = false ? new Int32Array(_sharedLockBuffer) : void 0;
-  var acquireLock = () => {
-    if (false) {
-      while (Atomics.compareExchange(_lockArray, 0, 0, 1) !== 0) {
-      }
-    }
-  };
-  var releaseLock = () => {
-    if (false) {
-      Atomics.store(_lockArray, 0, 0);
-    }
-  };
-  var getThreadId = (threadIdParam = void 0) => {
-    return false ? threadIdParam || threadId : 0;
-  };
   var init__ = ({
-    stream = _stream,
+    stream = void 0,
     multithreading = false,
     format = DEFAULT_FORMAT
   } = {}) => {
     acquireLock();
-    _stream = stream;
-    _multithreading = false ? multithreading : false;
+    setStream(stream);
+    setMultithreading(multithreading);
     _format = format;
     _inputsPerThreads = {};
     _threadNames = {};
@@ -171,7 +165,7 @@ var jstracetoix = (() => {
       if (allow !== false) {
         format = format || _format;
         let output = "";
-        if (_multithreading && format.thread) {
+        if (getMultithreading() && format.thread) {
           output += format.thread.replace("{id}", _threadNames[_threadId] || `${_threadId}`);
         }
         const replaceMacro = (_format2, _name, _value) => _format2.replace("{name}", _name).replace(
@@ -191,12 +185,7 @@ var jstracetoix = (() => {
         data.meta__ += ["output__"];
         data.output__ = output;
         if (before === void 0 || before(data)) {
-          output = data.output__ + (format.new_line ? "\n" : "");
-          if (false) {
-            _stream.write(output);
-          } else {
-            _stream(output);
-          }
+          writeToStream(data.output__ + (format.new_line ? "\n" : ""));
         }
       } else {
         data.allow__ = false;
@@ -215,4 +204,4 @@ var jstracetoix = (() => {
   };
   return __toCommonJS(jstracetoix_exports);
 })();
-for(key of Object.keys(jstracetoix).filter((key) => key.includes("__"))) { window[key]=jstracetoix[key]; }
+for(const key of Object.keys(jstracetoix).filter((key) => key.includes("__"))) { window[key]=jstracetoix[key]; }