Migration vers vue3

.gitignore

@@ -13,3 +13,5 @@
 *.log
 package-lock.json
 
+
+*storybook.log

.storybook/main.js

@@ -1,10 +1,20 @@
-module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
+/** @type { import('@storybook/vue3-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-mdx-gfm"
+  ],
+  framework: {
+    name: "@storybook/vue3-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.js

@@ -1,6 +1,7 @@
 
+import { fn } from '@storybook/test';
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { onclick : fn() },
   controls: {
     matchers: {
       color: /(background|color)$/i,

README.md

@@ -13,7 +13,7 @@ Exemples d'utilisation de l'API des extensions du Géoportail (geoportal-extensi
 * [DevTool VueJS](https://devtools.vuejs.org/guide/installation.html)
 
 **NOTE**
-> testé avec nodeJS 14.19.0 / npm 6.14.16
+> testé avec nodeJS 16.14.0 / npm 8.3.1
 
 ## Installation
 
@@ -34,6 +34,12 @@ Exemples d'utilisation de l'API des extensions du Géoportail (geoportal-extensi
 * `npm run build` (production)
 * `npm run build -- --mode development` (development)
 
+### Upgrade UI
+
+Extract widget options from jsdoc to update UI
+
+* `npm run doclets`
+
 ### Deploying
 
 Specify what it takes to deploy your app.
@@ -45,6 +51,16 @@ Specify what it takes to deploy your app.
 
 avec un accès à notre app sur http://localhost:8888
 
+## Upgrade dependencies
+
+<https://blog.vuejs.org/posts/vue-2-7-naruto#vue-cli-webpack>
+
+## Migrate to Vue3
+
+<https://v3-migration.vuejs.org/>
+
+Download Pdf : <https://www.vuemastery.com/migration-guide-cheat-sheet/>
+
 ## Further Reading / Useful Links
 
 * [vue.js](https://fr.vuejs.org/)

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: [],
+    // presets: [
+    //   [
+    //     "@babel/preset-env"
+    //   ],
+    // ],
+  };

package.json

@@ -7,41 +7,52 @@
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "doclets": "node build/doclets.js -p . -t src/data/",
-    "storybook": "start-storybook -p 6006 -s src/assets/"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "engines": {
-    "node": "~14.19.0",
-    "npm": "~6.14.18"
+    "node": "~16.14.0",
+    "npm": "~8.3.1"
   },
   "dependencies": {
     "file-saver": "^2.0.5",
-    "geoportal-extensions-openlayers": "3.2.21",
+    "geoportal-extensions-openlayers": "3.4.0-beta4",
     "ol": "6.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.14",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/preset-env": "^7.24.3",
+    "@chromatic-com/storybook": "^1.2.25",
     "@highlightjs/vue-plugin": "^0.9.0",
-    "@storybook/addon-actions": "^6.2.2",
-    "@storybook/addon-essentials": "^6.2.2",
-    "@storybook/addon-links": "^6.2.2",
-    "@storybook/vue": "^6.2.2",
-    "@vue/cli-plugin-babel": "4.1.1",
-    "@vue/cli-plugin-eslint": "4.1.1",
-    "@vue/cli-service": "4.1.1",
-    "babel-eslint": "^10.0.3",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-mdx-gfm": "^8.0.5",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@storybook/vue3": "^8.0.5",
+    "@storybook/vue3-webpack5": "^8.0.5",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/compiler-sfc": "^3.4.21",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "common-tags": "^1.8.0",
     "dataobject-parser": "^1.2.1",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.24.0",
     "highlight.js": "^10.7.2",
-    "jsdoc": "^3.6.6",
+    "jsdoc": "^4.0.2",
     "merge-deep": "^3.0.3",
-    "vue": "^2.6.11",
-    "vue-loader": "^15.9.6",
-    "vue-router": "^3.1.6",
-    "vue-template-compiler": "^2.6.11",
-    "vuejs-logger": "^1.5.5"
+    "storybook": "^8.0.5",
+    "vue": "^3.4.21",
+    "vue-loader": "^17.4.2",
+    "vue-router": "^4.3.0",
+    "vuejs3-logger": "^1.0.0"
   },
   "eslintConfig": {
     "root": true,
@@ -50,11 +61,19 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "plugin:storybook/recommended"
     ],
-    "rules": {},
+    "rules": {
+      "vue/no-mutating-props": [
+        "error",
+        {
+          "shallowOnly": true
+        }
+      ]
+    },
     "parserOptions": {
-      "parser": "babel-eslint"
+      "parser": "@babel/eslint-parser"
     }
   },
   "postcss": {

src/components/options/TheCptOptionType.vue

@@ -103,7 +103,7 @@ export default {
         }
     },
     mounted() {
-        this.$log.debug(this, this.option.defaultvalue);
+        this.$log.debug("default values", this.option.defaultvalue);
         if ("defaultvalue" in this.option) {
             var el = this.$refs["type-option"];
             if (el) {

src/config.js

@@ -1,7 +1,7 @@
 /**
  * Configuration par defaut de la carte
  */
-var  apiKey = "jhyvi0fgmnuxvfv0zjzorvdn";
+var  apiKey = "full";
 
 /**
  * Configuration par defaut du projet
@@ -15,8 +15,8 @@ var project = {
         url: "https://openlayers.org/",
         logo: "./assets/logo-openlayers.png",
         dist: {
-            js: "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js",
-            css: "https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/css/ol.css"
+            js: "https://raw.githubusercontent.com/IGNF/geoportal-extensions/master/samples-src/resources/vendor/ol/v6.9.0/ol.js",
+            css: "https://raw.githubusercontent.com/IGNF/geoportal-extensions/master/samples-src/resources/vendor/ol/v6.9.0/ol.css"
         },
         plugin: {
             js: "https://ignf.github.io/geoportal-extensions/openlayers-latest/dist/GpPluginOpenLayers.js",

src/main.js

@@ -1,13 +1,15 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
+import { createApp } from 'vue';
+import { createMemoryHistory, createRouter } from 'vue-router'
 import App from "./App.vue";
 
 // composants
 import TheCptGeneratorMap from "./components/router/TheCptGeneratorMap";
 import TheCptJsdoc from "./components/router/TheCptJsdoc";
 
-import VueLogger from 'vuejs-logger';
+// logger
+import VueLogger from 'vuejs3-logger';
 
+// lib JS
 import hljs from 'highlight.js/lib/core';
 import javascript from 'highlight.js/lib/languages/javascript';
 import vuePlugin from "@highlightjs/vue-plugin";
@@ -26,24 +28,20 @@ const options = {
     showConsoleColors: true
 };
 
-Vue.use(vuePlugin);
 
-Vue.use(VueLogger, options);
+const app =createApp(App);
 
-Vue.use(VueRouter);
+app.use(vuePlugin);
 
-Vue.config.productionTip = false;
+app.use(VueLogger, options);
 
-const router = new VueRouter({
-    mode: 'history',
-    base: __dirname,
+const router = new createRouter({
+    history: createMemoryHistory(),
     routes : [
         { path: '/jsdoc', component: TheCptJsdoc },
         { path: '/generator', component: TheCptGeneratorMap }
     ]
 });
 
-new Vue({
-    router,
-    render: h => h(App)
-}).$mount("#app");
+app.use(router);
+app.mount('#app');

src/stories/Button.stories.js

@@ -0,0 +1,43 @@
+import { fn } from '@storybook/test';
+import MyButton from './Button.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'select' }, options: ['small', 'medium', 'large'] },
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

src/stories/Button.vue

@@ -0,0 +1,52 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+import { reactive, computed } from 'vue';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    props = reactive(props);
+    return {
+      classes: computed(() => ({
+        'storybook-button': true,
+        'storybook-button--primary': props.primary,
+        'storybook-button--secondary': !props.primary,
+        [`storybook-button--${props.size || 'medium'}`]: true,
+      })),
+      style: computed(() => ({
+        backgroundColor: props.backgroundColor,
+      })),
+      onClick() {
+        emit('click');
+      },
+    };
+  },
+};
+</script>