feat(vue3): support for vue3

MANIFEST.in

@@ -1,2 +1,3 @@
-recursive-include trame_router/module/serve *.min.js
+recursive-include trame_router/module/vue2 *.min.js
+graft trame_router/module/vue3
 include trame_router/LICENSE

examples/vue2/basic.py

@@ -0,0 +1,73 @@
+r"""
+Version for trame 1.x - https://github.com/Kitware/trame/blob/release-v1/examples/PlainPython/Router/app.py
+Delta v1..v2          - https://github.com/Kitware/trame/commit/f2ad3e65c17539315d23f5e3e981048f68b4d31e
+
+Installation requirements:
+    pip install trame trame-vuetify trame-router
+"""
+
+from trame.app import get_server
+from trame.ui.vuetify import SinglePageWithDrawerLayout
+from trame.ui.router import RouterViewLayout
+from trame.widgets import vuetify, router
+
+server = get_server()
+server.client_type = "vue2"
+state, ctrl = server.state, server.controller
+
+# Home route
+with RouterViewLayout(server, "/"):
+    with vuetify.VCard():
+        vuetify.VCardTitle("This is home")
+
+# Foo route
+with RouterViewLayout(server, "/foo"):
+    with vuetify.VCard():
+        vuetify.VCardTitle("This is foo")
+        with vuetify.VCardText():
+            vuetify.VBtn("Take me back", click="$router.back()")
+
+# Bar/id
+with RouterViewLayout(server, "/bar/:id"):
+    with vuetify.VCard():
+        vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")
+
+# Main page content
+with SinglePageWithDrawerLayout(server) as layout:
+    layout.title.set_text("Multi-Page demo")
+
+    with layout.content:
+        with vuetify.VContainer():
+            router.RouterView()
+
+    # add router buttons to the drawer
+    with layout.drawer:
+        with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
+            vuetify.VSubheader("Routes")
+
+            with vuetify.VListItem(to="/"):
+                with vuetify.VListItemIcon():
+                    vuetify.VIcon("mdi-home")
+                with vuetify.VListItemContent():
+                    vuetify.VListItemTitle("Home")
+
+            with vuetify.VListItem(to="/foo"):
+                with vuetify.VListItemIcon():
+                    vuetify.VIcon("mdi-food")
+                with vuetify.VListItemContent():
+                    vuetify.VListItemTitle("Foo")
+
+            with vuetify.VListGroup(value=("true",), sub_group=True):
+                with vuetify.Template(v_slot_activator=True):
+                    vuetify.VListItemTitle("Bars")
+                with vuetify.VListItemContent():
+                    with vuetify.VListItem(v_for="id in [1,2,3]", to=("'/bar/' + id",)):
+                        with vuetify.VListItemIcon():
+                            vuetify.VIcon("mdi-peanut-outline")
+                        with vuetify.VListItemContent():
+                            vuetify.VListItemTitle("Bar")
+                            vuetify.VListItemSubtitle("ID '{{id}}'")
+
+
+if __name__ == "__main__":
+    server.start()

examples/vue3/basic.py

@@ -0,0 +1,68 @@
+r"""
+Version for trame 1.x - https://github.com/Kitware/trame/blob/release-v1/examples/PlainPython/Router/app.py
+Delta v1..v2          - https://github.com/Kitware/trame/commit/f2ad3e65c17539315d23f5e3e981048f68b4d31e
+
+Installation requirements:
+    pip install trame trame-vuetify trame-router
+"""
+
+from trame.app import get_server
+from trame.ui.vuetify3 import SinglePageWithDrawerLayout
+from trame.ui.router import RouterViewLayout
+from trame.widgets import router, vuetify3 as vuetify
+
+server = get_server()
+server.client_type = "vue3"
+state, ctrl = server.state, server.controller
+
+# Home route
+with RouterViewLayout(server, "/"):
+    with vuetify.VCard():
+        vuetify.VCardTitle("This is home")
+
+# Foo route
+with RouterViewLayout(server, "/foo"):
+    with vuetify.VCard():
+        vuetify.VCardTitle("This is foo")
+        with vuetify.VCardText():
+            vuetify.VBtn("Take me back", click="$router.back()")
+
+# Bar/id
+with RouterViewLayout(server, "/bar/:id"):
+    with vuetify.VCard():
+        vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")
+
+# Main page content
+with SinglePageWithDrawerLayout(server) as layout:
+    layout.title.set_text("Multi-Page demo")
+
+    with layout.content:
+        with vuetify.VContainer():
+            router.RouterView()
+
+    # add router buttons to the drawer
+    with layout.drawer:
+        with vuetify.VList(
+            shaped=True,
+            v_model=("selectedRoute", 0),
+            v_model_opened=("open", []),
+            __properties=[("v_model_opened", "v-model:opened")],
+        ) as c:
+            vuetify.VListSubheader("Routes")
+
+            vuetify.VListItem(to="/", prepend_icon="mdi-home", title="Home")
+            vuetify.VListItem(to="/foo", prepend_icon="mdi-food", title="Foo")
+
+            vuetify.VListSubheader("Bars")
+            vuetify.VListItem(
+                v_for="id in 3",
+                key="id",
+                to=("`/bar/${id}`",),
+                prepend_icon="mdi-peanut-outline",
+                title=("`Bar: Id ${id}`",),
+            )
+
+        print(c)
+
+if __name__ == "__main__":
+    server.start()

trame_router/module/.gitignore

@@ -1,8 +1,2 @@
-serve
-# serve/trame-router.umd.min.js.map
-serve/trame-router.umd.js
-serve/trame-router.umd.js.map
-# serve/trame-router.umd.min.js
-serve/demo.html
-serve/trame-router.common.js
-serve/trame-router.common.js.map
+vue2
+vue3

trame_router/module/__init__.py

@@ -1,13 +1,17 @@
-from pathlib import Path
+def setup(server, **kargs):
+    client_type = "vue2"
+    if hasattr(server, "client_type"):
+        client_type = server.client_type
 
-# Compute local path to serve
-serve_path = str(Path(__file__).with_name("serve").resolve())
+    if client_type == "vue2":
+        from . import vue2
 
-# Serve directory for JS/CSS files
-serve = {"__trame_router": serve_path}
+        server.enable_module(vue2)
+    elif client_type == "vue3":
+        from . import vue3
 
-# List of JS files to load (usually from the serve path above)
-scripts = ["__trame_router/trame-router.umd.min.js"]
-
-# List of Vue plugins to install/load
-vue_use = ["trame_router"]
+        server.enable_module(vue3)
+    else:
+        raise TypeError(
+            f"Trying to initialize trame_router with unknown client_type={client_type}"
+        )

trame_router/module/vue2.py

@@ -0,0 +1,13 @@
+from pathlib import Path
+
+# Compute local path to serve
+serve_path = str(Path(__file__).with_name("vue2").resolve())
+
+# Serve directory for JS/CSS files
+serve = {"__trame_router2": serve_path}
+
+# List of JS files to load (usually from the serve path above)
+scripts = ["__trame_router2/trame-router.umd.min.js"]
+
+# List of Vue plugins to install/load
+vue_use = ["trame_router"]

trame_router/module/vue3.py

@@ -0,0 +1,13 @@
+from pathlib import Path
+
+# Compute local path to serve
+serve_path = str(Path(__file__).with_name("vue3").resolve())
+
+# Serve directory for JS/CSS files
+serve = {"__trame_router3": serve_path}
+
+# List of JS files to load (usually from the serve path above)
+scripts = ["__trame_router3/trame-router.umd.js"]
+
+# List of Vue plugins to install/load
+vue_use = ["trame_router"]

vue-components/vue.config.js → vue2/vue.config.js

@@ -1,5 +1,5 @@
 const path = require('path');
-const DST_PATH = '../trame_router/module/serve';
+const DST_PATH = '../trame_router/module/vue2';
 
 module.exports = {
   outputDir: path.resolve(__dirname, DST_PATH),

vue3/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

vue3/.eslintignore

@@ -0,0 +1,5 @@
+build/
+dist/
+node_modules/
+.snapshots/
+*.min.js

vue3/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+};

vue3/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

vue3/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "trailingComma": "es5"
+}

vue3/README.md

@@ -0,0 +1,6 @@
+## Build
+
+```bash
+npm i
+npm run build
+```