Vue.js integration (plugin)

[Guille Rmo]

Hi. I have been working on integrating vue.js to TW. I know we alredy have the wikitext dynamic content but I really miss having a powerful frontend tool such as vue.js. TW wikitext is awesome and it is great that the whole GUI is written in that, but I usually find myself struggling with the way of doing things with wikitext. Therefor, I have been putting some effort on this. Maybe it is not good for small snippets (wikitext is great for that sort of thing). I think this would be very helpful for complex GUIs contained in a single tiddler. 

Demo: https://rawgit.com/Guitlle/vuewiki/build/build/docs.html

Repo: https://github.com/Guitlle/vuewiki

This may still have some bugs and I still want to integrate lists and other componets. 

[TonyM]

Guille,

Thanks for contributing to the community. This looks interesting but as I am currently not a javasctipt developer (many are not, in the TiddlyWiki community) would you be able to give some more concrete examples of using vue.js especially in tiddlywiki itself?. Reviewing vue and looking into the bootstrap css and related technology in the plugin, I can see a lot of promise and capability but there seems to be a lot to learn before we could even try to understand when and how it complements tiddlywiki.

How do you expect to use it in tiddlywiki, can you give examples?

How would vue.js be used differently in Tiddlywiki to the normal implementation documented at https://vuejs.org/

• What parts of the HTML page settings are pre-configured for us in tiddlywiki?
• Which parts must OR can be coded into these special tiddlers type application/vuejs-uiv
• Is there any level of integration between these tiddlers and objects and content elsewhere in tiddlywiki ?
• Transclude content?
• Use filters etc...?
• When would one use vue instead of TiddlyWiki?
• How can we adapt vue code samples and snipits to work in tiddlywiki?

We do not need all the answers imediatly just a bit more so we can decide when and if we could make use of vue

I am a strong believer tiddlywiki could be an excellent platform to host such javascript libraries but it would be nice to understand the limitations or differences when using them in the tiddlywiki "platform" and not only inform the users but also the developers such that they may add to tiddlywiki features to help capitalise on such libraries more effectively and even simplify the process you used for this adaption.

If every javascript solution out there could leverage tiddlywiki to host and provide interactive demos we would all benefit.

Thanks

Tony

[@TiddlyTweeter]

Guille

Brilliant! I think that is a real integration with TW of great utility and well worth the work involved.

I will play with it more to learn it a bit more and comment if I see issues.

Best wishes
Josiah

[Guille Rmo]

Thanks, Josiah. I also think it is a great fit for TW. 

[Guille Rmo]

Hi Tony. 

You are right, this definitely requires the user to learn about vue.js.

This is limited to be used inside a tiddler. The tiddler content is the vue.js template. Of course, you cannot have javascript or CSS in a single vuejs tiddler. 

The default vuewrapper initializes a vue app with the tiddler fields in the "self" namespace. It binds the fields so all changes are synced, between TW and the vue app. It also allows you to import other tiddlers data. I want to add support for lists with TW filters and data tiddlers with indexes and json.

That limitations are the reason to include the library of components UIV which uses Bootstrap. This way you have some functionalities without writing javascript and css, such as modals, tooltips, buttons, radio buttons, date picker, dropdowns, and others. Ceck out the UIV documentation https://uiv.wxsm.space/getting-started . I am thinking on changing uiv for another libray (suggestions are welcome). By having a library of components  you can avoid writing javascript logic. 

You could add javascript behaviour by adding a vue component as a javascript library. I am putting this in the roadmap. So you will be able to write a vue component with special functionalities that are not possible to do without custom javascript. However this would be way more advanced.

For now I think the main applications for this is having javascript expressions inside tiddlers. I remember I posted a while ago a widget that allowed you to update a field with a math expression and required math.js plugin. I think things like adding or multiplying two fields should not be that hard. In vue.js it is quite simple {{ self.fieldA * self.fieldB + self.fieldC }}. Or, say, hiding a div when some condition is met:

<div v-if="self.fieldX > 10 ">

But right now  the TW WikiText syntax for this is more complicated than it needs to be or is just not possible (yet).

Right now you can't transclude. It could be possible, as TW makes this easy, but it needs more thought and work. Perhaps I'll add support for that in the future or someone else that needs that functionality sends a pull request.

The application for this that I have in my mind is more like a behavior similar to excel, where you can easily put formulas and manipulate the data in the spreadsheet.

This definitely needs more examples. If you come up with nice example ideas, I can write and add them to the documentation so people have a better idea of what can be done.  

[PMario]

Hi,

That's an interesting approach. ... I'll have a closer look. ... But 1 thing that immediately jumped into my eyes is: application/vuejs-uiv

It seems this is a standards-tree mime-type, that doesn't exist! ___If that's true: It should not be used!___ 

There is a specification RFC6838 which describes, how to specify and register a new mime-type. Creating a new standards-tree entry is a challenge and may take years! ...

The vendor- (vnd.) or personal-tree (prs.)  is much much easier!

So an application/vnd.vuejs.uiv may be an option. I did add a dot in between vuejs and uiv, see: https://tools.ietf.org/html/rfc6838#section-3.2

The problem here is, that you should be a representative of the vendor to create this mime-type.

So imo we will need to go with the personal prs prefix. eg: application/prs.vuejs.uiv which should cause no problems.

Important! ... Since I didn't have a closer look at the implementation and content of the "Sample Vue Tiddler" ... I'm not 100% sure if the suggested mime-type is right! ... but I'm sure it shouldn't be application/vuejs-uiv

have fun!

mario

[@TiddlyTweeter]

Ciao Guille

... this definitely requires the user to learn about vue.js.

Right. And understanding the visible "bootstrap type code" part of it is very helpful, I think. As you say ...

... Check out the UIV documentation https://uiv.wxsm.space/getting-started . I am thinking on changing uiv for another libray (suggestions are welcome). By having a library of components  you can avoid writing javascript logic.

 

 This is limited to be used inside a tiddler. [My emphasis :-)]

 

... I want to add support for lists with TW filters and data tiddlers with indexes and json.

Right. That would kinda "bridge the gap" with normal TW and help show how it can leverage off the store.

 
What users may not be so aware of is that your approach IS able to interrogate the internal store. It just needs some work to make it flow well.

For now I think the main applications for this is having javascript expressions inside tiddlers. I remember I posted a while ago a widget that allowed you to update a field with a math expression and required math.js plugin. I think things like adding or multiplying two fields should not be that hard. In vue.js it is quite simple {{ self.fieldA * self.fieldB + self.fieldC }}.

Good & useful.

Right now you can't transclude. It could be possible, as TW makes this easy, but it needs more thought and work.

I think transclusion INTO vue type Tiddlers would be great if its possible. I notice there may be syntax issues?

... This definitely needs more examples. If you come up with nice example ideas, I can write and add them to the documentation so people have a better idea of what can be done.  

For me better utilisation of Data Dictionaries and  JSON Tiddlers look like prime candidates? Showing how to use any array of data from the internal store would be useful.

Just thoughts
Josiah

[David Gifford]

I added this to the TiddlyWiki toolmap (https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM) under the category "Interfacing with, importing and exporting to and from other formats"

[Mohammad]

Wonderful!

Great job! keep going on!

Mohammad

[Guille Rmo]

Hi Mario. Great contribution with mentioning this. I must admit that I used that content type carelessly. But it should definitely follow the standards. 

I will refactor.

[Guille Rmo]

Thanks for your comments, Josiah. 

I am glad people find this useful. This may caught the attention of javascript devs for tiddlywiki. 

Will update soon with a more stable version of the plugin.

[Guille Rmo]

I have refactored the code that binds TW and vue. It is more appropiate now, as it gets data directly from the tiddlers with no middle values.

https://rawgit.com/Guitlle/vuewiki/build/build/docs.html

This also allowed me to bind external tiddler data (adding a watch for each tiddler field was quite bad). 

Also added 3 helper functions to manipulate arrays and objects. 

Now that I have a stable base, next step is including lists with filters and data tiddlers.

If you have some example applications using this, we can put it in the documentation.

[@TiddlyTweeter]

Guille

If you have some example applications using this, we can put it in the documentation.

Regarding examples. The way it works is very interesting in that its quite dynamic for assembling things.

One application that may be of interest could be to do accounts? This would need some kind of maths.

What I was thinking was using a Data Dictionary Tiddler with several values per line, separated by a delimiter, that vue split and assembled in a table that could total columns. Just a thought.

I doubt I could actually code it yet. But I could give you a typical data set if you are interested.

Best wishes
Josiah

[Guille Rmo]

Ok, send me the sample data, maybe I can figure it out. 

I have made a simple phonebook app to give a simple example: https://rawgit.com/Guitlle/vuewiki/build/build/docs.html#Phonebook

[@TiddlyTweeter]

I'll send you some data tomorrow. I looked and used the phone example. Its really good.