[Vue Rewrite] Enable Typescript Vue Components

[devlinjunker]

Adding typescript to the build process

• Follows [Vue Rewrite] Fix CI Jobs #1816
• Re-engineered configuration from typescript+vue2 project generated by the @vue/cli-plugin v5.0.0
  • Update webpack config to handle typescript with decorators inside of vue templates
  • Added tsconfig + shim files (from generated projected)
• Added more eslint configs
• Converted Explore component to Typescript Vue Class with decorator as working example

see devlinjunker#28 for full work history

TODO Before Merge:

• Remove class decorator/babel-loader + class component

Up Next:

• Remove unique linting rules (+ standardize indentation and clean up any other failures/warnings)
• Move all Components to typescript (no classes/decorators though)
• Add Unit Tests to run with npm run test
• Add Vuex Store (see 58a196b for preview)
• Add Proper Routing (see devlinjunker/news@vue-version...devlinjunker:vue-routes for preview)

[tcitworld]

Note: vue-class-components is kinda abandonned, using typescript with vue2 makes a better experience and future proof with @vue/composition-api.

[devlinjunker]

@tcitworld oh dang! thanks for pointing that out!

I'm new to the Vue world and thought this was pretty cool to get working - but I'd rather follow future-proof conventions like you mention.

using typescript with vue2

Do you mean just adding typescript/type-checking to the original syntax of the Vue components (i.e. before I converted the Explore component to a class)?

e.g.

export default {
    components: {
        // Modal,
        Button,
        AddFeed,
    },
    props: {
        feed: '',
    },
    data() {
        return {
            explorableSites: [],
            showAddFeed: false,
        }
    },
    created() {
    ... 
    },
    methods: {
    ...
    }
}

[devlinjunker]

or should I be using Vue.component and Vue.extends?

I found this guide: https://v2.vuejs.org/v2/guide/typescript.html but that's for Vue 2.... 🤔 still seems applicable though for typescript

[devlinjunker]

Also found a migration guide from Vue 2 to Vue 3: https://v3-migration.vuejs.org/ that I will try to read and include details from:

• Avoid Scoped slots
• Can we use vue-router v4 (for transition and keepAlive directives in Vue 3)?
• Also seems like vuex v4 will be important

[devlinjunker]

Seems like we can't use the v4 versions of the libraries until we transition to vue v3... so I didn't update either of those.

I did remove the vue-property-decorator library and the class decorators then reverted the Class component to Vue.extends({ ... syntax

Please review/merge and I will move forward with the Up Next section in PR

[tcitworld]

The standard experience with Typescript and Vue 2 isn't terrible, but it's being improved with Vue 2.7 (currently in beta) or with @vue/composition-api (if we would be using this API in the future) by using defineComponent instead of Vue.extend. Then when @nextcloud/vue is Vue 3 ready it will be easier to jump.

In any case, I would predict keeping the class components wouldn't help at all, glad you switched from it.

[Grotax]

Thanks for working on this, it is highly appreciated :)

[devlinjunker]

currently put some time in on the next two tasks mentioned above

• Remove unique linting rules (+ standardize indentation and clean up any other failures/warnings)
• Move all Components to typescript (no classes/decorators though)

(see these two PRs):

• [Vue Rewrite] Fix Linting Rules + Lint Warnings + Update Indentation  devlinjunker/news#33
• [Vue Rewrite] Move All Components to Typescript+Vue devlinjunker/news#34

once this PR is merged I can rebase these branches and create PRs against nextcloud:vue-rewrite branch in this repo

[Grotax]

Is there anything left to do for this PR then?

[devlinjunker]

@Grotax i don’t think there is anything left on this one

[devlinjunker]

@SMillerDev @Grotax you guys ready to approve and merge this PR?

[anoymouserver]

LGTM