feat: Vue3 support

.github/workflows/unit.yml

@@ -9,13 +9,19 @@ on:
   pull_request:
   workflow_dispatch:
 
+env:
+  PKG_URL: https://nbg1.your-objectstorage.com/ipyvue3-packages/packages
+
+permissions:
+  contents: read
+
 jobs:
   code-quality:
     runs-on: ubuntu-24.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Install Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
           python-version: "3.11"
       - name: Install dependencies
@@ -28,23 +34,23 @@ jobs:
   build:
     runs-on: ubuntu-24.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: "14.x"
+          node-version: "20.x"
           registry-url: "https://registry.npmjs.org"
 
       - name: Install Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
           python-version: "3.11"
 
       - name: Install dependencies
         run: |
           python -m pip install --upgrade pip
-          pip install twine wheel jupyter-packaging "jupyterlab<4"
+          pip install twine wheel jupyter-packaging "jupyterlab<5"
 
       - name: Build
         run: |
@@ -70,22 +76,43 @@ jobs:
             ./dist
             ./js/*.tgz
 
+      - name: Publish dev wheel to object storage
+        if: >
+          github.event_name == 'pull_request' &&
+          github.event.pull_request.head.ref == 'vue3' &&
+          github.event.pull_request.head.repo.full_name == github.repository
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
+          AWS_REGION: nbg1
+          AWS_ENDPOINT_URL_S3: https://nbg1.your-objectstorage.com
+          S3_BUCKET: ipyvue3-packages
+        run: |
+          python -m pip install --upgrade awscli
+
+          aws s3 cp dist/ "s3://${S3_BUCKET}/packages/ipyvue/" \
+            --recursive \
+            --exclude "*" \
+            --include "*.whl" \
+            --endpoint-url "$AWS_ENDPOINT_URL_S3" \
+            --region "$AWS_REGION"
+
   test:
     needs: [build]
     runs-on: ubuntu-24.04
     strategy:
       fail-fast: false
       matrix:
-        python-version: [3.8, 3.9, "3.10", "3.11"]
+        python-version: [3.8, 3.9, "3.10", "3.11", "3.12"]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - uses: actions/download-artifact@v4
         with:
           name: ipyvue-dist-${{ github.run_number }}
 
       - name: Install Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
 
@@ -107,21 +134,26 @@ jobs:
     needs: [build]
     runs-on: ubuntu-24.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - uses: actions/download-artifact@v4
         with:
           name: ipyvue-dist-${{ github.run_number }}
 
       - name: Install Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
           python-version: 3.8
 
       - name: Install vuetify and test deps
         run: |
           wheel=(dist/*.whl)
-          pip install ${wheel}[test] "jupyter_server<2"
+          pip install ${wheel}
+          pip install "${PKG_URL}/ipyvuetify/ipyvuetify-3.0.0a3-py2.py3-none-any.whl"
+          pip install "solara-ui[all] @ ${PKG_URL}/solara/solara_ui-1.57.3-py3-none-any.whl"
+          pip install "solara-server[starlette,dev] @ ${PKG_URL}/solara-server/solara_server-1.57.3-py3-none-any.whl"
+          pip install "pytest-ipywidgets[all] @ ${PKG_URL}/pytest-ipywidgets/pytest_ipywidgets-1.57.3-py3-none-any.whl"
+          pip install "jupyter_server<2"
 
       - name: Install playwright browsers
         run: playwright install chromium
@@ -137,17 +169,17 @@ jobs:
           path: test-results
 
   release-dry-run:
-    needs: [ test,ui-test,code-quality ]
+    needs: [test, ui-test, code-quality]
     runs-on: ubuntu-24.04
     steps:
       - uses: actions/download-artifact@v4
         with:
           name: ipyvue-dist-${{ github.run_number }}
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: "14.x"
+          node-version: "20.x"
           registry-url: "https://registry.npmjs.org"
 
       - name: Publish the NPM package
@@ -159,6 +191,7 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           PRE_RELEASE: ${{ github.event.release.prerelease }}
+
   release:
     if: startsWith(github.event.ref, 'refs/tags/v')
     needs: [release-dry-run]
@@ -169,15 +202,15 @@ jobs:
           name: ipyvue-dist-${{ github.run_number }}
 
       - name: Install node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: "14.x"
+          node-version: "20.x"
           registry-url: "https://registry.npmjs.org"
 
       - name: Install Python
-        uses: actions/setup-python@v2
+        uses: actions/setup-python@v5
         with:
-          python-version: 3.8
+          python-version: "3.11"
 
       - name: Install dependencies
         run: |

.pre-commit-config.yaml

@@ -4,6 +4,6 @@ repos:
       hooks:
         - id: black
   -   repo: https://github.com/PyCQA/flake8
-      rev: 3.9.2
+      rev: 7.1.1
       hooks:
         - id: flake8

README.md

@@ -29,21 +29,8 @@ For a development installation (requires npm),
 Scoped CSS Support
 ------------------
 
-`<style scoped>` in `VueTemplate` templates is supported but disabled by default for backwards
-compatibility. When enabled, CSS rules only apply to the component's own elements.
-
-Enable globally via environment variable:
-
-    $ IPYVUE_SCOPED_CSS_SUPPORT=1 jupyter lab
-
-Or in Python:
-
-```python
-import ipyvue
-ipyvue.scoped_css_support = True
-```
-
-Or per widget:
+`<style scoped>` in `VueTemplate` templates is supported. Scoped CSS rules only apply
+to the component's own elements.
 
 ```python
 from ipyvue import VueTemplate
@@ -58,17 +45,7 @@ class MyComponent(VueTemplate):
     </style>
     """
 
-widget = MyComponent(scoped_css_support=True)
-```
-
-Note: The `css` trait with `scoped=True` always works, regardless of this setting:
-
-```python
-widget = VueTemplate(
-    template="<template><span class='x'>Hi</span></template>",
-    css=".x { color: blue; }",
-    scoped=True
-)
+widget = MyComponent()
 ```
 
 Sponsors

class_components.ipynb

@@ -21,9 +21,11 @@
     "    input = Unicode().tag(sync=True)\n",
     "    something = Unicode('defaultvalue').tag(sync=True)\n",
     "    template = Unicode('''\n",
+    "    <template>\n",
     "        <div style=\"border: 1px solid green; margin: 2px\" @click=\"append_one()\">\n",
     "            [{{ something }}] input: {{ input }} \n",
     "        </div>\n",
+    "    </template>    \n",
     "    ''').tag(sync=True)\n",
     "    \n",
     "    def vue_append_one(self, *args):\n",
@@ -44,6 +46,7 @@
     "    texts = List(['xxxx', 'yyyy']).tag(sync=True)\n",
     "    direct = Unicode('aaa').tag(sync=True)\n",
     "    template = Unicode('''\n",
+    "    <template>\n",
     "        <div>\n",
     "            <div style=\"border: 1px solid black\">\n",
     "               <sub-component v-for=\"t in texts\" :input=\"t\" :key=\"t\" />\n",
@@ -52,6 +55,7 @@
     "            <w-button v-for=\"t in texts\" :description=\"t\" :key=\"t\" />\n",
     "            <w-button description=\"no v-for\"/>\n",
     "        </div>\n",
+    "    </template>\n",
     "    ''').tag(sync=True)\n",
     "    \n",
     "    components=Dict({\n",
@@ -113,9 +117,11 @@
     "    label = Unicode().tag(sync=True)\n",
     "    \n",
     "    template = Unicode('''\n",
+    "    <template>\n",
     "        <div style=\"border: 1px solid green; margin: 2px\">\n",
     "            [{{ label }}] Db URL: {{ info }}\n",
     "        </div>\n",
+    "    </template>\n",
     "    ''').tag(sync=True)\n",
     "    \n",
     "    @observe('db')\n",
@@ -135,6 +141,7 @@
     "    supplier_db_collection = Dict().tag(sync_ref=True)\n",
     "    \n",
     "    template = Unicode('''\n",
+    "    <template>\n",
     "        <div>\n",
     "            <database-info label=\"customers\" :db=\"customer_db\" />\n",
     "            \n",
@@ -146,6 +153,7 @@
     "            \n",
     "            <database-info label=\"function\" :db=\"{functionRef: 'db_factory', args: ['localhost/function1']}\" />\n",
     "        </div>\n",
+    "    </template>\n",
     "    ''').tag(sync=True)\n",
     "    \n",
     "    components = Dict({\n",

examples/DeepWatch.ipynb

@@ -15,6 +15,7 @@
     "    deep_array = traitlets.List(['array']).tag(sync=True)\n",
     "    deep_array2 = traitlets.List([{'prop': 'array2'}]).tag(sync=True)\n",
     "    template = traitlets.Unicode('''\n",
+    "    <template>\n",
     "        <div>\n",
     "            <v-text-field v-model=\"deep.prop\" />\n",
     "            <v-text-field v-model=\"deep.deeper.prop\" />\n",
@@ -27,6 +28,7 @@
     "            {{ deep_array[0] }} |\n",
     "            {{ deep_array2[0].prop }}\n",
     "        </div>\n",
+    "    </template>\n",
     "    ''').tag(sync=True)\n",
     "    \n",
     "md = MyDeep()\n",

examples/EmbeddingJupyterWidgetsInVueTemplate.ipynb

@@ -29,12 +29,14 @@
     "\n",
     "\n",
     "    template=Unicode(\"\"\"\n",
-    "        <div>\n",
-    "            <div v-for=\"item in items\" :key=\"item.title + item.content\">\n",
-    "                {{ item.title }}: <jupyter-widget :widget=\"item.content\" />\n",
+    "        <template>\n",
+    "            <div>\n",
+    "                <div v-for=\"item in items\" :key=\"item.title + item.content\">\n",
+    "                    {{ item.title }}: <jupyter-widget :widget=\"item.content\" />\n",
+    "                </div>\n",
+    "                Single widget: <jupyter-widget :widget=\"single_widget\" />\n",
     "            </div>\n",
-    "            Single widget: <jupyter-widget :widget=\"single_widget\" />\n",
-    "        </div>\n",
+    "        </template>\n",
     "    \"\"\").tag(sync=True)\n",
     "\n",
     "my_component = MyComponent()\n",

examples/ScopedCSS.ipynb

@@ -6,9 +6,9 @@
    "source": [
     "# Scoped CSS\n",
     "\n",
-    "By default, CSS in ipyvue templates is **global** — it affects all elements on the page with matching selectors. Scoped CSS limits styles to the component that defines them.\n",
+    "CSS in ipyvue templates is global unless it is marked with `<style scoped>`. Scoped CSS limits styles to the component that defines them.\n",
     "\n",
-    "**How it works:** ipyvue adds a unique `data-v-*` attribute to your component's elements and rewrites your CSS selectors to include it (e.g., `.my-class` → `.my-class[data-v-abc123]`)."
+    "**How it works:** ipyvue adds a unique `data-v-*` attribute to your component's elements and rewrites your CSS selectors to include it (e.g., `.my-class` -> `.my-class[data-v-abc123]`)."
    ]
   },
   {
@@ -22,28 +22,6 @@
     "from traitlets import default"
    ]
   },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Enable scoped CSS support\n",
-    "\n",
-    "For backwards compatibility, `<style scoped>` in templates is **disabled by default**. Existing code that accidentally relied on CSS leaking would break if we enabled it automatically.\n",
-    "\n",
-    "Enable it globally for this notebook:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "# Enable scoped CSS support for <style scoped> in templates\n",
-    "# Can also be set via environment variable: IPYVUE_SCOPED_CSS_SUPPORT=1\n",
-    "vue.scoped_css_support = True"
-   ]
-  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -103,32 +81,6 @@
     "\n",
     "widgets.VBox([ScopedStyle(), widget_b])  # Only Widget A is green"
    ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## Using the `css` trait with `scoped=True`\n",
-    "\n",
-    "Alternative syntax when defining CSS outside the template:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "class CssTrait(vue.VueTemplate):\n",
-    "    @default(\"template\")\n",
-    "    def _default_template(self):\n",
-    "        return \"<template><span class='trait-demo'>Widget C (scoped via trait)</span></template>\"\n",
-    "\n",
-    "widget_c = CssTrait(css=\".trait-demo { color: blue; }\", scoped=True)\n",
-    "widget_d = vue.Html(tag=\"span\", children=[\"Widget D (unaffected)\"], class_=\"trait-demo\")\n",
-    "\n",
-    "widgets.VBox([widget_c, widget_d])"
-   ]
   }
  ],
  "metadata": {