From 1c77839e410779d78f995f11d5c551247f054efc Mon Sep 17 00:00:00 2001 From: Trevor Manz Date: Sat, 11 May 2024 15:32:09 -0400 Subject: [PATCH] feat(create-anywidget): Simplify CSS selectors --- .changeset/nine-seas-drive.md | 5 + .../__snapshots__/index.test.js.snap | 96 +++++++++---------- packages/create-anywidget/create.js | 32 +++---- 3 files changed, 66 insertions(+), 67 deletions(-) create mode 100644 .changeset/nine-seas-drive.md diff --git a/.changeset/nine-seas-drive.md b/.changeset/nine-seas-drive.md new file mode 100644 index 00000000..6c41330f --- /dev/null +++ b/.changeset/nine-seas-drive.md @@ -0,0 +1,5 @@ +--- +"create-anywidget": patch +--- + +Simplify default CSS class names diff --git a/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap b/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap index 843d1114..ffdf39b4 100644 --- a/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap +++ b/packages/create-anywidget/__tests__/__snapshots__/index.test.js.snap @@ -162,12 +162,11 @@ import "./widget.css"; const render = createRender(() => { const [value, setValue] = useModelState("value"); return ( - +
+ +
); }); @@ -176,7 +175,7 @@ export default { render }; "path": "js/widget.jsx", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -196,7 +195,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -372,12 +371,11 @@ import "./widget.css"; const render = createRender(() => { const [value, setValue] = useModelState("value"); return ( - +
+ +
); }); @@ -386,7 +384,7 @@ export default { render }; "path": "js/widget.tsx", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -406,7 +404,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -598,7 +596,6 @@ class Widget(anywidget.AnyWidget): function render({ model, el }) { let btn = document.createElement("button"); - btn.classList.add("ipyfoo-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -607,6 +604,7 @@ function render({ model, el }) { model.on("change:value", () => { btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("ipyfoo"); el.appendChild(btn); } @@ -615,7 +613,7 @@ export default { render }; "path": "js/widget.js", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -635,7 +633,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -794,7 +792,6 @@ class Widget(anywidget.AnyWidget): /** @type {import("npm:@anywidget/types").Render} */ function render({ model, el }) { let btn = document.createElement("button"); - btn.classList.add("ipyfoo-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -804,6 +801,7 @@ function render({ model, el }) { confetti(); btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("ipyfoo"); el.appendChild(btn); } @@ -812,7 +810,7 @@ export default { render }; "path": "src/ipyfoo/static/widget.js", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -832,7 +830,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -1007,7 +1005,6 @@ interface WidgetModel { function render({ model, el }: RenderContext) { let btn = document.createElement("button"); - btn.classList.add("ipyfoo-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -1016,6 +1013,7 @@ function render({ model, el }: RenderContext) { model.on("change:value", () => { btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("ipyfoo"); el.appendChild(btn); } @@ -1024,7 +1022,7 @@ export default { render }; "path": "js/widget.ts", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -1044,7 +1042,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -1245,12 +1243,11 @@ import "./widget.css"; const render = createRender(() => { const [value, setValue] = useModelState("value"); return ( - +
+ +
); }); @@ -1259,7 +1256,7 @@ export default { render }; "path": "js/widget.jsx", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -1279,7 +1276,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -1456,12 +1453,11 @@ import "./widget.css"; const render = createRender(() => { const [value, setValue] = useModelState("value"); return ( - +
+ +
); }); @@ -1470,7 +1466,7 @@ export default { render }; "path": "js/widget.tsx", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -1490,7 +1486,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -1684,7 +1680,6 @@ class Widget(anywidget.AnyWidget): function render({ model, el }) { let btn = document.createElement("button"); - btn.classList.add("ipyfoo-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -1693,6 +1688,7 @@ function render({ model, el }) { model.on("change:value", () => { btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("ipyfoo"); el.appendChild(btn); } @@ -1701,7 +1697,7 @@ export default { render }; "path": "js/widget.js", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -1721,7 +1717,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -1880,7 +1876,6 @@ class Widget(anywidget.AnyWidget): /** @type {import("npm:@anywidget/types").Render} */ function render({ model, el }) { let btn = document.createElement("button"); - btn.classList.add("ipyfoo-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -1890,6 +1885,7 @@ function render({ model, el }) { confetti(); btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("ipyfoo"); el.appendChild(btn); } @@ -1898,7 +1894,7 @@ export default { render }; "path": "src/ipyfoo/static/widget.js", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -1918,7 +1914,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", @@ -2094,7 +2090,6 @@ interface WidgetModel { function render({ model, el }: RenderContext) { let btn = document.createElement("button"); - btn.classList.add("ipyfoo-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -2103,6 +2098,7 @@ function render({ model, el }: RenderContext) { model.on("change:value", () => { btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("ipyfoo"); el.appendChild(btn); } @@ -2111,7 +2107,7 @@ export default { render }; "path": "js/widget.ts", }, { - "content": ".ipyfoo-counter-button { + "content": ".ipyfoo button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -2131,7 +2127,7 @@ export default { render }; transition: transform 0.25s ease-in-out; } -.ipyfoo-counter-button:hover { +.ipyfoo button:hover { transform: scale(1.05); } ", diff --git a/packages/create-anywidget/create.js b/packages/create-anywidget/create.js index 5bfec79a..5b70a1b3 100644 --- a/packages/create-anywidget/create.js +++ b/packages/create-anywidget/create.js @@ -234,7 +234,7 @@ let notebook = (name) => /** @param {string} name */ let styles = (name) => `\ -.${name}-counter-button { +.${name} button { background: linear-gradient( 300deg, #9933ff 33.26%, @@ -254,7 +254,7 @@ let styles = (name) => transition: transform 0.25s ease-in-out; } -.${name}-counter-button:hover { +.${name} button:hover { transform: scale(1.05); } `; @@ -269,12 +269,11 @@ import "./widget.css"; const render = createRender(() => { const [value, setValue] = useModelState("value"); return ( - +
+ +
); }); @@ -291,12 +290,11 @@ import "./widget.css"; const render = createRender(() => { const [value, setValue] = useModelState("value"); return ( - +
+ +
); }); @@ -310,7 +308,6 @@ import "./widget.css"; function render({ model, el }) { let btn = document.createElement("button"); - btn.classList.add("${name}-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -319,6 +316,7 @@ function render({ model, el }) { model.on("change:value", () => { btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("${name}"); el.appendChild(btn); } @@ -339,7 +337,6 @@ interface WidgetModel { function render({ model, el }: RenderContext) { let btn = document.createElement("button"); - btn.classList.add("${name}-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -348,6 +345,7 @@ function render({ model, el }: RenderContext) { model.on("change:value", () => { btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("${name}"); el.appendChild(btn); } @@ -515,7 +513,6 @@ import confetti from "https://esm.sh/canvas-confetti@1"; /** @type {import("npm:@anywidget/types").Render} */ function render({ model, el }) { let btn = document.createElement("button"); - btn.classList.add("${name}-counter-button"); btn.innerHTML = \`count is \${model.get("value")}\`; btn.addEventListener("click", () => { model.set("value", model.get("value") + 1); @@ -525,6 +522,7 @@ function render({ model, el }) { confetti(); btn.innerHTML = \`count is \${model.get("value")}\`; }); + el.classList.add("${name}"); el.appendChild(btn); }