feat: Vue3 support

.github/workflows/unit.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "18.x"
           registry-url: "https://registry.npmjs.org"
 
       - name: Install Python
@@ -117,7 +117,7 @@ jobs:
       - name: Install vuetify and test deps
         run: |
           wheel=(dist/*.whl)
-          pip install ${wheel}[test] "jupyter_server<2"
+          pip install ${wheel} https://github.com/widgetti/ipyvuetify/archive/refs/heads/vuetify3.zip ${wheel}[test] "jupyter_server<2"
 
       - name: Install playwright browsers
         run: playwright install chromium
@@ -127,7 +127,7 @@ jobs:
 
       - name: Upload Test artifacts
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: ipyvue-test-results
           path: test-results
@@ -144,7 +144,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: "18.x"
           registry-url: "https://registry.npmjs.org"
 
       - name: Install Python

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/fullVueComponent.ipynb

@@ -169,7 +169,7 @@
     "class Testing(v.VuetifyTemplate):\n",
     "    template = Unicode(\"\"\"\n",
     "    <template>\n",
-    "        <test-comp :viewer=\"some_widget\"></test_comp>\n",
+    "        <test-comp :viewer=\"some_widget\"></test-comp>\n",
     "    </template>\n",
     "    \"\"\").tag(sync=True)\n",
     "    \n",

examples/hot-reload/my_component.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 <script>
-  module.exports = {
+  export default {
     props: ['my-data']
   }
 </script>

examples/hot-reload/my_sub_component.vue

@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-  module.exports = {
+  export default {
     props: ['label']
   }
 </script>

examples/hot-reload/my_widget_template.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
     <h1>My Widget template</h1>
-    <my-component :my-data="some_data"></my-component>
+    <my-component :my-data="some_data"/>
   </div>
 </template>

ipyvue/VueTemplateWidget.py

@@ -87,6 +87,18 @@ def to_ref_structure(obj, path):
     return to_ref_structure(data, [])
 
 
+class TraitNotAvailable(Any):
+    def __init__(self, on_use_msg):
+        self.on_use_msg = on_use_msg
+        super().__init__()
+
+    def get(self, *ignored):
+        raise AttributeError(self.on_use_msg(self.name))
+
+    def set(self, *ignored):
+        raise AttributeError(AttributeError(self.on_use_msg(self.name)))
+
+
 class VueTemplate(DOMWidget, Events):
 
     class_component_serialization = {
@@ -116,11 +128,20 @@ class VueTemplate(DOMWidget, Events):
         sync=True, **widget_serialization
     )
 
-    css = Unicode(None, allow_none=True).tag(sync=True)
+    css = TraitNotAvailable(
+        lambda name: "The css trait is no longer available in v3, please use the \
+        template <style> tag instead"
+    )
 
-    methods = Unicode(None, allow_none=True).tag(sync=True)
+    methods = TraitNotAvailable(
+        lambda name: "The methods trait is no longer available in v3, please use \
+        { methods: ...} in the template <script> tag instead"
+    )
 
-    data = Unicode(None, allow_none=True).tag(sync=True)
+    data = TraitNotAvailable(
+        lambda name: "The data trait is no longer available in v3, please use \
+        { data(): ...} in the template <script> tag instead"
+    )
 
     events = List(Unicode(), allow_none=True).tag(sync=True)
 

ipyvue/_version.py

@@ -1,2 +1,2 @@
-__version__ = "1.10.1"
-semver = "^" + __version__
+__version__ = "3.0.0.alpha4"
+semver = "3.0.0-alpha.4"