Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Sc 65261] Migrate to Vue 3 #108

Merged
merged 7 commits into from
Feb 5, 2024
Merged

[Sc 65261] Migrate to Vue 3 #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9637859
Bump to Vue3
ericyd Jan 31, 2024
44a6546
Fix app/store/router creation
ericyd Jan 31, 2024
fe1a103
Add `onFinish` prop
ericyd Feb 1, 2024
ce4e043
Install `@activeprospect/integration-components` v5
ericyd Feb 1, 2024
7a9de51
Install `@activeprospect/integration-dev-dependencies` v2
ericyd Feb 1, 2024
8eaa0c3
Fix Verify step
ericyd Feb 1, 2024
c319459
Install ui-components dependency
ericyd Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/ui/public/app/config/Page1.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<Navigation :onConfirm="onConfirm"/>
</div>
<div v-else-if="!isDataService">
<LoadingScreen :module-name="'TrustedForm ' + moduleName"/>
<LoadingScreen :onFinish="() => {/* NOOP */}" :module-name="'TrustedForm ' + moduleName"/>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This avoids a new error from Vuex 4 which complains when a requested action doesn't exist. The error was being thrown from here and I have no idea why this code exists so I didn't feel comfortable removing it

</div>
</div>
</template>
Expand Down
16 changes: 6 additions & 10 deletions lib/ui/public/app/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import ui from 'leadconduit-integration-ui';
import Vue from 'vue';
import { createApp } from 'vue';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is not how lc-client instantiates the app, even though it is Vue 3. The way lc-client gets around this is with the @vue/compat lib, which treats things as if they were still Vue 2. Since integrations are such simple micro-apps, I think it makes more sense to "do it right" from the start and use the newer Vue 3 APIs.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you

import Config from './config/Config.vue';
import Vuex from 'vuex';
import initStore from './store';
import router from './router';

Vue.use(Vuex);

function init (config) {
const store = initStore(config, ui);
const app = createApp(Config);

app.use(initStore(config, ui));
app.use(router);

new Vue({
render: h => h(Config),
store,
router
}).$mount('#app');
app.mount('#app');
}

ui.init(init);
8 changes: 3 additions & 5 deletions lib/ui/public/app/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import Vue from 'vue';
import Router from 'vue-router';
import { createMemoryHistory, createRouter } from 'vue-router';
import Config from './config/Config.vue';
import PageOne from './config/Page1.vue';
import PageTwo from './config/Page2.vue';
import PageThree from './config/Page3.vue';
import PageFour from './config/Page4.vue';
import PageFive from './config/Page5.vue';

Vue.use(Router);

export default new Router({
export default createRouter({
history: createMemoryHistory(),
routes: [
{
path: '/',
Expand Down
11 changes: 7 additions & 4 deletions lib/ui/public/app/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import Vuex from 'vuex';
import { createStore } from 'vuex';
import fieldData from './fieldData';
import v4Fields from './v4fields';
import axios from 'axios';
import { get } from 'lodash';
import { toRaw } from 'vue';

const initStore = (config, ui) => new Vuex.Store({
const initStore = (config, ui) => createStore({
state: {
// field descriptions
fieldData,
Expand Down Expand Up @@ -132,8 +133,10 @@ const initStore = (config, ui) => new Vuex.Store({
await context.dispatch('createFilter', filterConfig);
}
context.state.filters.forEach(filter => {
flow.steps.push(filter);
});
// the flow gets passed back to the app via a window.postMessage call, which clones objects passed in the message.
// As of Vuex 4, state items are Proxy objects, which cannot be cloned, so we have to use `toRaw()`.
flow.steps.push(toRaw(filter));
});
}
context.state.ui.create({ flow });
}
Expand Down
11 changes: 6 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
},
"license": "CC-BY-NC-ND-4.0",
"dependencies": {
"@activeprospect/integration-components": "^4.0.2",
"@activeprospect/integration-components": "^5.0.0",
"@activeprospect/ui-components": "^1.3.3",
"axios": "^1.4.0",
"body-parser": "^1.19.0",
"express": "^4.17.1",
Expand All @@ -27,11 +28,11 @@
"lodash": "^4.17.20",
"request": "^2.88.0",
"trustedform-api-client": "^1.0.7",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vuex": "^3.1.3"
"vue": "^3.4.15",
"vue-router": "^4.2.5",
"vuex": "^4.1.0"
},
"devDependencies": {
"@activeprospect/integration-dev-dependencies": "^1.1.0"
"@activeprospect/integration-dev-dependencies": "^2.0.0"
}
}
Loading