Documentation: Make example for Angular.

[LeeWannacott]

Make example documentation for using TABLE-SORT-JS with VueJS and Angular.
Suitable issue for someone with experience using these frameworks.

There is an example for ReactJS made already in public/docs/react.html.

We need examples for other front-end frameworks such as VueJS and Angular.
Relevant files:
public/docs/vue.html
public/docs/angular.html

• HTML example.
• React in class style.
• React in functional/hooks style.
• Vue 2.0 example.
• Vue 3.0 example.
• Angular example.

[haiderali171]

@LeeWannacott should I do it? As a first contribution?

[LeeWannacott]

@haiderali171. Sure feel free to do it, as a first contribution 👍

Basically you want to translate the React example into examples for Angular and/or Vue. (I should put another example for React in the function/hooks style in addition to classes.) Look at the React example for how to escape < > tags in html code blocks and how the syntax highlighting works for a code block. I'm just using basic HTML to write the docs.

Just leave a comment if you need any help, or clarification.

Thanks.

[haiderali171]

On it! I will shoot you a comment if I need any help..

[haiderali171]

@LeeWannacott Hey! Just wanted to tell you that I am almost done with the vue example. This example uses the Vue CLI. Was wondering if I should include another way because there is one. And one more thing. Should I make the pull request when I complete the angular example or should I do it indepedently, when the vue example is completed first?

[haiderali171]

If you are up for it.. I can do the react hooks example too if you allow it and when both vue and angular are complete!

[LeeWannacott]

I have an example for React hooks that I haven't pushed yet. Edit: have pushed it now.

I haven't used Vue. But, If we can get the main ways that people use Vue would be good. If the other way isn't some obscure edge case then sure include it. I should have a look at the Vue documentation.

I would do them as separate/independent PR's on separate branches, but not the end of the world if you do them as one and on master.

You can always make PR's and then turn it into a draft while you are working on it and then ask for review when it's ready.

Thanks.

[haiderali171]

@LeeWannacott Pleasee see my pull request!

[haiderali171]

@LeeWannacott Please see my resolve in the pull request!

[LeeWannacott]

Vue 2.0 example by haiderali171 merged in commit: 84d2de1

[haiderali171]

@LeeWannacott Hello There, was a bit busy with work but got back to table-sort just today! I've been researching the angular example. There are two ways that one can use an external library (like yours) in Angular. Angular 2+ is a Typescript-based framework and the AngularJS is based on the good ol' Javascript.

The easiest way to use an external library in Angular is using the Angular CLI, which is only available on Angular 2+. But it throws an error of not including type declarations (probably because of Typescript) in the library. It seems you need to add them! So, I'm going to go with the AngularJS example when it's ready until then! What do you say?

[LeeWannacott]

@haiderali171 I guess Angular using TypeScript makes sense considering Angular tends to be directed towards really large projects.

hmm interesting ... just make the AngularJS example in that case. I'm not sure how adding TypeScript to table-sort-js would work considering TypeScript uses a compiler, would people still be able to download as a script file? Maybe I just need to add type annotations and not actually use the compiler/TypeScript. (Can you post a screenshot of the errors it gives you?, if it's not too much trouble?). Thanks.

[haiderali171]

@LeeWannacott The file that declares the types tend to be something like this d.ts. These are compiled first in tsc (Typescript compiler) and thus can only be used by something that uses it, which Angular 2+ does. This file includes the type information rather than the implementation, which I think is read by the compiler or its own version of package.json aka tsconfig.json, from what I have gathered. It is then transpiled into regular javascript before being published, which how it can be used through npm.

It could be type annotations too! Here are the errors (Note: I have tried different variations on importing):

error TS7016: Could not find a declaration file for module 'table-sort-js/table-sort.js'. '/Users/Batman/Desktop/Programming/tablesort-app/node_modules/table-sort-js/table-sort.js' implicitly has an 'any' type.
Try npm i --save-dev @types/table-sort-js if it exists or add a new declaration (.d.ts) file containing declare module 'table-sort-js/table-sort.js';

2 import { TableSort } from "table-sort-js/table-sort.js";
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

[haiderali171]

or users have to declare types themselves before using a javascript lib in a typescript-based Angular 2+. I will be working on the AngularJS example meanwhile.

Some resources on the d.ts file:

https://blog.logrocket.com/publishing-node-modules-typescript-es-modules/
https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html
https://medium.com/@steveruiz/using-a-javascript-library-without-type-declarations-in-a-typescript-project-3643490015f3

[LeeWannacott]

@haiderali171 Hey, are you still interested in this issue?; I'm not that worried about having examples for Angular at the moment. Would be good to get an example for the newer version of Vue(3.0) though. All good if you're not interested anymore though. Thanks for doing the examples 👍

[haiderali171]

@LeeWannacott I have been royally busy with my work schedule. I do work on your examples whenever I have enough free time. Angular was out of my ballpark because I had never used it before. But I have accumulated enough knowledge about it now. As mentioned, Angular 2+ has the issue of something like not having @types and all that. But I am close to completing the AngularJS (<2) example. If for some reason I am unable to complete the remaining examples, I'll take myself out. Till that time comes, I am interested. For the time being, I will start on the Vue 3.0 example but hopefully, you will have a pull request for the AngularJS too after I complete the Vue one, because I naively thought you didn't need that so early after already having a Vue example. Thanks a lot for your patience. I really love working on table-sort-js!

[haiderali171]

Update!

@LeeWannacott I am done with the Vue 3.0 example. Will PR when I am able to update upstream and codify the example into HTML, ASAP!

[LeeWannacott]

@haiderali171 No worries; Okay cool,
I'm just not that worried about Angular because I don't think it's that popular these days; it's used more for pretty big corporate projects, or legacy code bases I think 🤔; if someone really wants support for Angular 2+ they can open an issue, but at this time I'm not too worried about supporting documentation for it; if you can get the older version of Angular working at least that's something. I should probably redo the documentation page to use a template system rather than just the same page copied each time for each of the links 💭 ; although I'm not sure how that works with it being in the public folder.

Cheers.