Automate CI/CD

[TheJaredWilcurt]

Automate PR quality:

• [ ] Linting must pass
• [ ] Tests must pass
• [ ] Build must not fail
• [ ] Netlify preview of the docs should pass

Automate builds:

• [ ] Libray build should be produced
• [ ] Docs build should be produced

Automate deploys:

• [ ] Bump version of package.json
• [ ] Tag git with new version
• [ ] Release to npm

[TheJaredWilcurt]

Related, had an idea:

• https://youtu.be/fEA7p-4M9Xw

[AustinGil]

Yep yep yep. For sure this is an issue. Haha.

The circle-ci files I have here were copied from another project and I have been meaning to fix it. It should be a simple fix, but as you mentioned in the video, I wanted to take this opportunity to test out GH actions. So Im all on board for this.

For the time being, we can remove the Circle CI folder. And then I'll add some actions as I can. Actually working on something similar at work, so I was going to learn it first, then implement it here.

[AustinGil]

Hey @TheJaredWilcurt Im finally getting into this and testing out some stuff. Trying to run eslint I keep getting this error:

No files matching the pattern "src/components/VAction" were found.
Please check for typing mistakes in the pattern.

That mean anything to you? Seems to have something to do with VAction being a .vue file. I thought I had eslint setup to handle these fine before.

[volkipp]

No files matching the pattern "src/components/VAction" were found.
Please check for typing mistakes in the pattern.

Hi @Stegosource , it looks as though those errors are being generated by the Typescript compiler and not ESLint. It also throws some other errors related to adding non-native properties to an HTMLElement.

If you change your build command in package.json to npm run build:umd && npm run build:es && npm run build:unpkg it clears up those errors. I'm not sure if you were planning on generating some Typescript definitions for the project or something like that. If that's the case, in the short term at least that gets you closer to a working CI/CD workflow.

[volkipp]

Ok I see what's going on now with those Typescript definitions. I was able to clear up those errors by including a Vue shim. There is still an issue with some of the type annotations in src/directivees/clickout.js which I haven't had the time to dive into. Here's a branch so you can see the module resolution fixes though:

https://github.com/volkipp/vuetensils/tree/lint-fix

[AustinGil]

@volkipp That's super helpful. I am using TS to generate type definitions with the goal of providing consumers some nicer intellisense. I got as far as to know I needed a shim, but did not sort out how to set that up.

Also, good catch on that build command. My silly mistake using & instead of &&. I was wondering why it never caught the errors.

Thanks! The other type errors are easy enough to fix. I can get on that soon.

[volkipp]

No problem @Stegosource ! Glad that was helpful. I only noticed the && thing because I've done the same thing way too many times. :D

[volkipp]

The linter should be happy again with this pull request https://github.com/Stegosource/vuetensils/pull/96

I also added in those other types so the TS definition files get generated now too. It looks like there's just one test failing and that has to do with a change to VBtn

[TheJaredWilcurt]

Supposedly Visual Studio and VSCode can infer types from JSDoc comment blocks in the same way as it can from TS, and can even offer descriptions of each argument.

[AustinGil]

Yes it can. That's how I have it set up. And TS can also do it's thing with JSDoc, so I have the complier run over the code to catch any mistakes. It's pretty handy, and I like that I don't have to wrtie TS.