Skip to content

Wrap naked expressions in playground blocks with console.log() #251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrjf merged 2 commits into from
Apr 30, 2026
Merged

Wrap naked expressions in playground blocks with console.log() #251

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52c0ce2
Initial plan
Copilot Apr 30, 2026
66fce5d
Add console.log() to playground TypeScript blocks so they actually pr…
Copilot Apr 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions playground/add_sub_mul_div.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ <h2>2 — add: Series + Series (positional)</h2>

const a = new Series({ data: [1, 2, 3] });
const b = new Series({ data: [4, 5, 6] });
seriesAdd(a, b).values; // [5, 7, 9]</textarea>
console.log(seriesAdd(a, b).values); // [5, 7, 9]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -213,8 +213,8 @@ <h2>3 — sub / rsub</h2>
<textarea class="playground-editor" spellcheck="false">import { Series, seriesSub, seriesRsub } from "tsb";

const s = new Series({ data: [10, 20, 30] });
seriesSub(s, 5).values; // [5, 15, 25]
seriesRsub(s, 100).values; // [90, 80, 70]</textarea>
console.log(seriesSub(s, 5).values); // [5, 15, 25]
console.log(seriesRsub(s, 100).values); // [90, 80, 70]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -235,10 +235,10 @@ <h2>4 — mul: multiply</h2>
<textarea class="playground-editor" spellcheck="false">import { Series, seriesMul } from "tsb";

const s = new Series({ data: [1, 2, 3, null] });
seriesMul(s, 3).values; // [3, 6, 9, null]
console.log(seriesMul(s, 3).values); // [3, 6, 9, null]

const weights = new Series({ data: [0.5, 1, 2, 1] });
seriesMul(s, weights).values; // [0.5, 2, 6, null]</textarea>
console.log(seriesMul(s, weights).values); // [0.5, 2, 6, null]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -261,8 +261,8 @@ <h2>5 — div / rdiv (true division)</h2>
<textarea class="playground-editor" spellcheck="false">import { Series, seriesDiv, seriesRdiv } from "tsb";

const s = new Series({ data: [4, 9, 0, null] });
seriesDiv(s, 2).values; // [2, 4.5, Infinity, null]
seriesRdiv(s, 36).values; // [9, 4, Infinity, null]</textarea>
console.log(seriesDiv(s, 2).values); // [2, 4.5, Infinity, null]
console.log(seriesRdiv(s, 36).values); // [9, 4, Infinity, null]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -285,13 +285,13 @@ <h2>6 — DataFrame arithmetic</h2>
const df = DataFrame.fromColumns({ price: [10, 20, 30], qty: [3, 5, 2] });

// Add a discount
dataFrameAdd(df, 5).col("price").values; // [15, 25, 35]
console.log(dataFrameAdd(df, 5).col("price").values); // [15, 25, 35]

// Scale everything by 2
dataFrameMul(df, 2).col("qty").values; // [6, 10, 4]
console.log(dataFrameMul(df, 2).col("qty").values); // [6, 10, 4]

// Revenue per item / some constant
dataFrameDiv(df, 10).col("price").values; // [1, 2, 3]</textarea>
console.log(dataFrameDiv(df, 10).col("price").values); // [1, 2, 3]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -312,9 +312,9 @@ <h2>7 — Missing value propagation</h2>
<textarea class="playground-editor" spellcheck="false">import { Series, seriesAdd, seriesMul, seriesDiv } from "tsb";

const s = new Series({ data: [1, null, NaN, 4] });
seriesAdd(s, 10).values; // [11, null, NaN, 14]
seriesMul(s, 2).values; // [2, null, NaN, 8]
seriesDiv(s, 2).values; // [0.5, null, NaN, 2]</textarea>
console.log(seriesAdd(s, 10).values); // [11, null, NaN, 14]
console.log(seriesMul(s, 2).values); // [2, null, NaN, 8]
console.log(seriesDiv(s, 2).values); // [0.5, null, NaN, 2]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand Down
42 changes: 21 additions & 21 deletions playground/align.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@ <h2>1 · alignSeries — outer (default)</h2>

// Default join="outer" → union of indices
const [la, ra] = alignSeries(a, b);
la.toArray(); // → [1, 2, 3] (index: a, b, c)
ra.toArray(); // → [null, 10, 20] (index: a, b, c)</textarea>
console.log(la.toArray()); // → [1, 2, 3] (index: a, b, c)
console.log(ra.toArray()); // → [null, 10, 20] (index: a, b, c)</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -186,8 +186,8 @@ <h2>2 · alignSeries — inner join</h2>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">const [li, ri] = alignSeries(a, b, { join: "inner" });
li.toArray(); // → [2, 3] (only shared labels: b, c)
ri.toArray(); // → [10, 20]</textarea>
console.log(li.toArray()); // → [2, 3] (only shared labels: b, c)
console.log(ri.toArray()); // → [10, 20]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -208,13 +208,13 @@ <h2>3 · alignSeries — left / right join + fillValue</h2>

// join="left": result index = x's index
const [ll, rl] = alignSeries(x, y, { join: "left", fillValue: 0 });
ll.toArray(); // → [1, 2, 3]
rl.toArray(); // → [0, 10, 0] ("d" is outside x's index → dropped)
console.log(ll.toArray()); // → [1, 2, 3]
console.log(rl.toArray()); // → [0, 10, 0] ("d" is outside x's index → dropped)

// join="right": result index = y's index
const [lr, rr] = alignSeries(x, y, { join: "right", fillValue: 0 });
lr.toArray(); // → [2, 0] ("b" matches, "d" is new)
rr.toArray(); // → [10, 30]</textarea>
console.log(lr.toArray()); // → [2, 0] ("b" matches, "d" is new)
console.log(rr.toArray()); // → [10, 30]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand Down Expand Up @@ -247,13 +247,13 @@ <h2>4 · alignDataFrame — outer, both axes</h2>
// la → shape [2, 3] columns: x, y, z
// row r0: x=1, y=3, z=null
// row r1: x=2, y=4, z=null
la.col("z").toArray(); // → [null, null]
console.log(la.col("z").toArray()); // → [null, null]

// ra → shape [2, 3] columns: x, y, z
// row r0: x=null, y=null, z=null
// row r1: x=null, y=10, z=20
ra.col("x").toArray(); // → [null, null]
ra.col("y").toArray(); // → [null, 10]</textarea>
console.log(ra.col("x").toArray()); // → [null, null]
console.log(ra.col("y").toArray()); // → [null, 10]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -271,10 +271,10 @@ <h2>5 · alignDataFrame — axis=0 (rows only)</h2>
</div>
<textarea class="playground-editor" spellcheck="false">// axis=0 aligns rows but leaves columns untouched
const [la5, ra5] = alignDataFrame(a, b, { axis: 0 });
la5.columns.toArray(); // → ["x", "y"] (unchanged)
ra5.columns.toArray(); // → ["y", "z"] (unchanged)
la5.index.toArray(); // → ["r0", "r1"] (outer union)
ra5.index.toArray(); // → ["r0", "r1"] (outer union)</textarea>
console.log(la5.columns.toArray()); // → ["x", "y"] (unchanged)
console.log(ra5.columns.toArray()); // → ["y", "z"] (unchanged)
console.log(la5.index.toArray()); // → ["r0", "r1"] (outer union)
console.log(ra5.index.toArray()); // → ["r0", "r1"] (outer union)</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -292,10 +292,10 @@ <h2>6 · alignDataFrame — axis=1 (columns only)</h2>
</div>
<textarea class="playground-editor" spellcheck="false">// axis=1 aligns columns but leaves rows untouched
const [la6, ra6] = alignDataFrame(a, b, { axis: 1 });
la6.index.toArray(); // → ["r0", "r1"] (unchanged)
ra6.index.toArray(); // → ["r1"] (unchanged)
la6.columns.toArray().sort(); // → ["x", "y", "z"]
ra6.columns.toArray().sort(); // → ["x", "y", "z"]</textarea>
console.log(la6.index.toArray()); // → ["r0", "r1"] (unchanged)
console.log(ra6.index.toArray()); // → ["r1"] (unchanged)
console.log(la6.columns.toArray().sort()); // → ["x", "y", "z"]
console.log(ra6.columns.toArray().sort()); // → ["x", "y", "z"]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -318,8 +318,8 @@ <h2>7 · Arithmetic after alignment</h2>
const [ap, aq] = alignSeries(p, q, { fillValue: 0 });
// Now same shape — do element-wise addition
const sum = ap.add(aq);
sum.toArray(); // → [100, 201, 302]
sum.index.toArray(); // → ["a", "b", "c"]</textarea>
console.log(sum.toArray()); // → [100, 201, 302]
console.log(sum.index.toArray()); // → ["a", "b", "c"]</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand Down
88 changes: 44 additions & 44 deletions playground/api_types.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,12 +167,12 @@ <h2>isScalar(val)</h2>
</div>
<textarea class="playground-editor" spellcheck="false">import { isScalar } from "tsb";

isScalar(42); // true
isScalar("hello"); // true
isScalar(null); // true
isScalar(new Date()); // true
isScalar([1, 2]); // false
isScalar({ a: 1 }); // false</textarea>
console.log(isScalar(42)); // true
console.log(isScalar("hello")); // true
console.log(isScalar(null)); // true
console.log(isScalar(new Date())); // true
console.log(isScalar([1, 2])); // false
console.log(isScalar({ a: 1 })); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -189,10 +189,10 @@ <h2>isListLike(val)</h2>
<button class="playground-reset">↺ Reset</button>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">isListLike([1, 2, 3]); // true
isListLike(new Set([1])); // true
isListLike("abc"); // false
isListLike(42); // false</textarea>
<textarea class="playground-editor" spellcheck="false">console.log(isListLike([1, 2, 3])); // true
console.log(isListLike(new Set([1]))); // true
console.log(isListLike("abc")); // false
console.log(isListLike(42)); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -209,9 +209,9 @@ <h2>isArrayLike(val)</h2>
<button class="playground-reset">↺ Reset</button>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">isArrayLike([1, 2]); // true
isArrayLike("hello"); // true
isArrayLike(42); // false</textarea>
<textarea class="playground-editor" spellcheck="false">console.log(isArrayLike([1, 2])); // true
console.log(isArrayLike("hello")); // true
console.log(isArrayLike(42)); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -228,9 +228,9 @@ <h2>isDictLike(val)</h2>
<button class="playground-reset">↺ Reset</button>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">isDictLike({ a: 1 }); // true
isDictLike(new Map()); // true
isDictLike([]); // false</textarea>
<textarea class="playground-editor" spellcheck="false">console.log(isDictLike({ a: 1 })); // true
console.log(isDictLike(new Map())); // true
console.log(isDictLike([])); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -246,14 +246,14 @@ <h2>isNumber / isBool / isStringValue / isFloat / isInteger</h2>
<button class="playground-reset">↺ Reset</button>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">isNumber(3.14); // true
isNumber(NaN); // true (typeof NaN === "number")
isBool(true); // true
isStringValue("hi"); // true
isFloat(3.14); // true
isFloat(3.0); // false (integer value)
isInteger(42); // true
isInteger(3.14); // false</textarea>
<textarea class="playground-editor" spellcheck="false">console.log(isNumber(3.14)); // true
console.log(isNumber(NaN)); // true (typeof NaN === "number")
console.log(isBool(true)); // true
console.log(isStringValue("hi")); // true
console.log(isFloat(3.14)); // true
console.log(isFloat(3.0)); // false (integer value)
console.log(isInteger(42)); // true
console.log(isInteger(3.14)); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -270,10 +270,10 @@ <h2>isMissing(val)</h2>
<button class="playground-reset">↺ Reset</button>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">isMissing(null); // true
isMissing(undefined); // true
isMissing(NaN); // true
isMissing(0); // false</textarea>
<textarea class="playground-editor" spellcheck="false">console.log(isMissing(null)); // true
console.log(isMissing(undefined)); // true
console.log(isMissing(NaN)); // true
console.log(isMissing(0)); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -290,9 +290,9 @@ <h2>isHashable(val)</h2>
<button class="playground-reset">↺ Reset</button>
</div>
</div>
<textarea class="playground-editor" spellcheck="false">isHashable("key"); // true
isHashable(42); // true
isHashable({}); // false</textarea>
<textarea class="playground-editor" spellcheck="false">console.log(isHashable("key")); // true
console.log(isHashable(42)); // true
console.log(isHashable({})); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -312,20 +312,20 @@ <h2>Dtype-Level Predicates</h2>
<textarea class="playground-editor" spellcheck="false">import { Dtype, isNumericDtype, isFloatDtype, isIntegerDtype,
isStringDtype, isDatetimeDtype, isCategoricalDtype } from "tsb";

isNumericDtype(Dtype.float64); // true
isNumericDtype("int32"); // true
isNumericDtype("string"); // false
console.log(isNumericDtype(Dtype.float64)); // true
console.log(isNumericDtype("int32")); // true
console.log(isNumericDtype("string")); // false

isFloatDtype("float32"); // true
isIntegerDtype("int64"); // true
isUnsignedIntegerDtype("uint8"); // true
isSignedIntegerDtype("int8"); // true
isStringDtype("string"); // true
isDatetimeDtype("datetime"); // true
isCategoricalDtype("category"); // true
isObjectDtype("object"); // true
isExtensionArrayDtype("category"); // true
isExtensionArrayDtype("int32"); // false</textarea>
console.log(isFloatDtype("float32")); // true
console.log(isIntegerDtype("int64")); // true
console.log(isUnsignedIntegerDtype("uint8")); // true
console.log(isSignedIntegerDtype("int8")); // true
console.log(isStringDtype("string")); // true
console.log(isDatetimeDtype("datetime")); // true
console.log(isCategoricalDtype("category")); // true
console.log(isObjectDtype("object")); // true
console.log(isExtensionArrayDtype("category")); // true
console.log(isExtensionArrayDtype("int32")); // false</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand Down
12 changes: 8 additions & 4 deletions playground/assign.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,8 @@ <h2>Example 1 — Array and Series</h2>

// df2.columns.values → ["a", "b", "c", "d"]
// df2.col("c").values → [7, 8, 9]
// df2.col("d").values → [4, 5, 6]</textarea>
// df2.col("d").values → [4, 5, 6]
console.log(df2);</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -198,7 +199,8 @@ <h2>Example 2 — Callable (chained derivations)</h2>
});

// df3.col("total").values → [11, 22, 33]
// df3.col("tax").values → [1.1, 2.2, 3.3]</textarea>
// df3.col("tax").values → [1.1, 2.2, 3.3]
console.log(df3);</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -218,7 +220,8 @@ <h2>Example 3 — Instance method</h2>
const df4 = df.assign({
squared_a: (d: DataFrame) =&gt; d.col("a").values.map((v) =&gt; (v as number) ** 2),
});
// df4.col("squared_a").values → [1, 4, 9]</textarea>
// df4.col("squared_a").values → [1, 4, 9]
console.log(df4);</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand All @@ -238,7 +241,8 @@ <h2>Example 4 — Replace an existing column</h2>
const df5 = dataFrameAssign(df, { b: [100, 200, 300] });

// df5.columns.values → ["a", "b"] (order unchanged)
// df5.col("b").values → [100, 200, 300]</textarea>
// df5.col("b").values → [100, 200, 300]
console.log(df5);</textarea>
<div class="playground-output">Click ▶ Run to execute</div>
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
</div>
Expand Down
Loading
Loading