Deprecate py-button, py-inputbox, py-box and py-title (#931)

pyscriptjs/src/components/pybox.ts

@@ -1,4 +1,4 @@
-import { getAttribute, addClasses } from '../utils';
+import { getAttribute, addClasses, createDeprecationWarning } from '../utils';
 import { getLogger } from '../logger';
 
 const logger = getLogger('py-box');
@@ -20,6 +20,11 @@ export class PyBox extends HTMLElement {
     }
 
     connectedCallback() {
+        const deprecationMessage = (
+            '<p>The element &lt;py-box&gt; is deprecated, you should create a ' +
+            'div with "py-box" class name instead. For example: &lt;div class="py-box"&gt; '
+        )
+        createDeprecationWarning(deprecationMessage, "py-box")
         const mainDiv = document.createElement('div');
         addClasses(mainDiv, ['py-box']);
 

pyscriptjs/src/components/pybutton.ts

@@ -1,4 +1,4 @@
-import { getAttribute, addClasses, htmlDecode, ensureUniqueId } from '../utils';
+import { getAttribute, addClasses, htmlDecode, ensureUniqueId, createDeprecationWarning } from '../utils';
 import { getLogger } from '../logger';
 import type { Runtime } from '../runtime';
 
@@ -42,6 +42,12 @@ export function make_PyButton(runtime: Runtime) {
         }
 
         async connectedCallback() {
+            const deprecationMessage = (
+                '<p>The element &lt;py-button&gt; is deprecated, create a function with your ' +
+                'inline code and use &lt;button py-click="function()" class="py-button"&gt; instead.</p>'
+            )
+            createDeprecationWarning(deprecationMessage, "py-button")
+
             ensureUniqueId(this);
             this.code = htmlDecode(this.innerHTML) || '';
             this.mount_name = this.id.split('-').join('_');

pyscriptjs/src/components/pyinputbox.ts

@@ -1,4 +1,4 @@
-import { getAttribute, addClasses, htmlDecode, ensureUniqueId } from '../utils';
+import { getAttribute, addClasses, htmlDecode, ensureUniqueId, createDeprecationWarning } from '../utils';
 import { getLogger } from '../logger';
 import type { Runtime } from '../runtime';
 
@@ -21,6 +21,11 @@ export function make_PyInputBox(runtime: Runtime) {
         }
 
         async connectedCallback() {
+            const deprecationMessage = (
+                '<p>The element &lt;py-input&gt; is deprecated, ' +
+                'use &lt;input class="py-input"&gt; instead.</p>'
+            )
+            createDeprecationWarning(deprecationMessage, "py-input")
             ensureUniqueId(this);
             this.code = htmlDecode(this.innerHTML);
             this.mount_name = this.id.split('-').join('_');

pyscriptjs/src/components/pytitle.ts

@@ -1,4 +1,4 @@
-import { addClasses, htmlDecode } from '../utils';
+import { addClasses, htmlDecode, createDeprecationWarning } from '../utils';
 
 export class PyTitle extends HTMLElement {
     widths: string[];
@@ -9,6 +9,10 @@ export class PyTitle extends HTMLElement {
     }
 
     connectedCallback() {
+        const deprecationMessage = (
+            '<p>The element &lt;py-title&gt; is deprecated, please use an  &lt;h1&gt; tag instead.</p>'
+        )
+        createDeprecationWarning(deprecationMessage, "py-title")
         this.label = htmlDecode(this.innerHTML);
         this.mount_name = this.id.split('-').join('_');
         this.innerHTML = '';

pyscriptjs/src/styles/pyscript_base.css

@@ -293,6 +293,7 @@ input {
     border-color: rgba(37, 99, 235, var(--tw-border-opacity));
     border-width: 1px;
     border-radius: 0.25rem;
+    cursor: pointer;
 }
 
 .py-li-element p {

pyscriptjs/src/utils.ts

@@ -111,3 +111,16 @@ export function joinPaths(parts: string[], separator = '/') {
     }
     return res;
 }
+
+export function createDeprecationWarning(msg: string, elementName: string): void {
+    const banners = document.getElementsByClassName('alert-banner py-warning');
+    let bannerCount = 0;
+    for (const banner of banners) {
+        if (banner.innerHTML.includes(elementName)) {
+            bannerCount++;
+        }
+    }
+    if (bannerCount == 0) {
+        _createAlertBanner(msg, "warning");
+    }
+}

pyscriptjs/tests/integration/test_py_box.py

@@ -16,3 +16,19 @@ class TestPyButton(PyScriptTest):
 
         assert len(pybox_element) == 2
         assert pybox_element[1].get_attribute("class") == "py-box-child"
+
+    def test_deprecated_element(self):
+        self.pyscript_run(
+            """
+            <py-box>
+            </py-box>
+        """
+        )
+        banner = self.page.locator(".py-warning")
+        banner_content = banner.inner_text()
+        expected = (
+            "The element <py-box> is deprecated, you should create a div "
+            'with "py-box" class name instead. For example: <div class="py-box">'
+        )
+
+        assert banner_content == expected

pyscriptjs/tests/integration/test_py_button.py

@@ -16,3 +16,44 @@ class TestPyButton(PyScriptTest):
         self.page.locator("text=my button").click()
         self.page.locator("text=my button").click()
         assert self.console.log.lines == [self.PY_COMPLETE, "clicked!", "clicked!"]
+
+    def test_deprecated_element(self):
+        self.pyscript_run(
+            """
+            <py-button label="my button">
+                import js
+                def on_click(evt):
+                    js.console.log('clicked!')
+            </py-button>
+        """
+        )
+        banner = self.page.locator(".py-warning")
+        banner_content = banner.inner_text()
+        expected = (
+            "The element <py-button> is deprecated, create a function with your "
+            'inline code and use <button py-click="function()" class="py-button"> instead.'
+        )
+
+        assert banner_content == expected
+
+    def test_creates_single_deprecation_banner(self):
+        self.pyscript_run(
+            """
+            <py-button label="my button">
+                import js
+                def on_click(evt):
+                    js.console.log('clicked!')
+            </py-button>
+            <py-button label="another button!">
+            </py-button>
+        """
+        )
+        banner = self.page.query_selector_all(".py-warning")
+        assert len(banner) == 1
+        banner_content = banner[0].inner_text()
+        expected = (
+            "The element <py-button> is deprecated, create a function with your "
+            'inline code and use <button py-click="function()" class="py-button"> instead.'
+        )
+
+        assert banner_content == expected

pyscriptjs/tests/integration/test_py_inputbox.py

@@ -20,3 +20,23 @@ class TestPyInputBox(PyScriptTest):
         input.press("Enter")
 
         assert self.console.log.lines == [self.PY_COMPLETE, "Hello"]
+
+    def test_deprecated_element(self):
+        self.pyscript_run(
+            """
+            <py-inputbox label="my input">
+                import js
+                def on_keypress(evt):
+                    if evt.key == "Enter":
+                        js.console.log(evt.target.value)
+            </py-inputbox>
+            """
+        )
+        banner = self.page.locator(".py-warning")
+        banner_content = banner.inner_text()
+        expected = (
+            "The element <py-input> is deprecated, "
+            'use <input class="py-input"> instead.'
+        )
+
+        assert banner_content == expected

pyscriptjs/tests/integration/test_py_title.py

@@ -14,3 +14,17 @@ class TestPyTitle(PyScriptTest):
         # py_title will be none
         assert py_title
         assert py_title.text_content() == "Hello, World!"
+
+    def test_deprecated_element(self):
+        self.pyscript_run(
+            """
+            <py-title>Hello, world!</py-title>
+        """
+        )
+        banner = self.page.locator(".py-warning")
+        banner_content = banner.inner_text()
+        expected = (
+            "The element <py-title> is deprecated, please use an <h1> tag instead."
+        )
+
+        assert banner_content == expected

pyscriptjs/tests/integration/test_zz_examples.py

@@ -282,7 +282,7 @@ class TestExamples(PyScriptTest):
         self.page.locator("py-repl").type("import utils\ndisplay(utils.now())")
         self.page.locator("button").click()
         # Make sure the output is in the page
-        self.page.wait_for_selector("#output")
+        self.page.wait_for_selector("#my-repl-1-1")
         # utils.now returns current date time
         content = self.page.content()
         pattern = "\\d+/\\d+/\\d+, \\d+:\\d+:\\d+"  # e.g. 08/09/2022 15:57:32

pyscriptjs/tests/unit/pybutton.test.ts

@@ -11,6 +11,11 @@ describe('PyButton', () => {
     let instance;
     beforeEach(() => {
         instance = new PyButton();
+        // Remove all the alert banners created when calling `connectedCallback`
+        const banners = document.getElementsByClassName("alert-banner")
+        for (const banner of banners) {
+            banner.remove()
+        }
     });
 
     it('should get the Button to just instantiate', async () => {
@@ -65,4 +70,19 @@ describe('PyButton', () => {
         expect(instanceId).toMatch(/py-(\w+-){1,5}container/);
         expect(instance.mount_name).toBe(instanceId.replace('-container', '').split('-').join('_'));
     });
+
+    it('should create a single deprecation banner', async () => {
+        document.body.innerHTML = ""
+        let alertBanners = document.getElementsByClassName('alert-banner');
+        expect(alertBanners.length).toBe(0);
+
+        instance.connectedCallback();
+        expect(alertBanners.length).toBe(1);
+        expect(alertBanners[0].innerHTML).toContain("<py-button> is deprecated");
+
+        // Calling `connectedCallback` again should not create a new banner
+        instance.connectedCallback();
+        alertBanners = document.getElementsByClassName('alert-banner');
+        expect(alertBanners.length).toBe(1);
+    })
 });