Is it possible to use web components and/or js modules within tiddlywiki

#1

For example, I’ve been trying to test if this mastodon-comments module can be integrated into the wiki.

I’ve tried loading their scripts into the head including

<script type="module/text/javascript" src="./files/scripts/mastodon-comments.mjs"></script>

which references a local version of the mastodon-comments.js in the linked repo (above) in my node.js wiki dev environment.

I wasn’t able to get the web component to work. Any pointers appreciated. I was trying to follow Jeremy’s directions in this post but did not fully understand the procedure for doing so.

#2

TW uses the commonjs module system.

mjs files are ES-Modules and usually not compatible with commonjs. But in the link you provided all the examples I could find, use mastodon-comments.js, which seems to be a normal HTML custom-element definition.

Did you read the blog-post from the documentation, where it is described, how to use the library? I did a short skim and it seems there are other dependencies. But I did not look close enough, to see why.

So why did you use the .mjs extension?

#3

Possibly not an issue, but I would wrap the value on src in quotes.

I understand the answer you your Question is yes, the next question is how.

  • You should be able to implement most things you can install on any website especially if the main output is a display.
  • Please share back if you get it working :nerd_face:
#4

I tried include the js vs a ‘raw’ tiddler, see https://mastodontest.tiddlyhost.com/

It appear that the attributes passed to the web component are lost (see the tiddler notworking)

I created a hack to added call the component by using innerHtml (see tiddler hackedusingInnerHtml) which works.

The calling of dom elements (and therefore web components) appears to be here

I don’t know why this is not working

#5

Nice, you got it to work @buggyj but what is this hack with <$raw html=""" … ‘’’/> ? I can’t find anything in the official docs neither in your wiki. what is that raw widget doing ?

EDIT: I see that you added the line this.computeAttributes(); to /widgets/raw.js shadow tiddler.

@pmario I tried the mjs extension because in another project some time ago I remember I was able to get a common js module to work that way.

1 Like
#6

hi @gavcloud - this is not a solution to the problem, it just shows what the problem is. Tiddlywiki does not allow injection of html as that could lead to security problems.

It looks unlikely that tiddlywiki would be able to support a web component without rapping a widget around it.

you could have a custom tiddlywiki widget

<$mastodon-comments host="fosstodon.org" user="dpecos" tootId="109574160582937075" style="width : 1024px"/>

that would then internally create a html string from the parameters and inject that into an element that the widget creates…

1 Like
#7

understood. thank you for the clarification. I have not developed custom widgets before. I will look into that.

#8

I didn’t look at your analysis, but I have played with web components with TW and did not encounter any issues using them directly.

Here is a share link example which uses the playground-ide web component from Playground – Lit (github). This is jsbin-like functionality which allows you to load html and javascript into your browser all client side.

Making this particular web component available to the tiddlywiki requires only this simple tiddler:

module-type: startup
title: import playground-ide custom elements
type: application/javascript

import('https://cdn.jsdelivr.net/npm/playground-elements@0.18.1/+esm')

My share link example is even using html attributes:

<playground-ide line-wrapping line-numbers resizable>
[...]
1 Like
#9

@btheado Interesting. I knew nothing about web components up to a couple of hours ago. I read this thread on mdn’s web component examples How to initialize a web component from JavaScript? · Issue #25 · mdn/web-components-examples · GitHub and it seems like this would be a general problem, and this is occurring with @gavcloud usage of the above Mastodon code.

A small change the mastodon code enables it work with tiddlywiki, without injection the html code. But that is not the point.

So my comment is not accurate, and should read

sometimes tiddlywiki will be unable to support a web component without rapping a widget around it.

#10

Is this just a specific case of the general one?

More generally “TiddlyWiki is unable to Support JavaScript without it being installed (as a tiddlywiki module), saved and reloaded”.

  • So unless someone can save the wiki back to the host/server, they cannot “inject code”.
Let us avoid malware proactively
#11

With a plain html page, the html is compiled to the dom by the browser, whereas in a tiddlywiki html (within wikitext) is complied by the core. Unfortunately this leads to a difference when initializing web components; with some web components only working correctly only when they are complied by the browser. A workaround is have a widget ‘inject’ the web component as raw html into the dom - leading to the browser compiling it instead of the core. This is done by writing the raw html to the ‘innerHtml’ attribute of a dom element.

#12

Yes, good example. The only thing missing here is “state management”. If you change the code in the web component (say change the color 0 /black to 128 med grey`), that change will not persist if you close and then re-open the tiddler.

At that point, TW core will “re-render” the whole web-component from scratch. The change does persist if you edit/save other tiddlers, change the order of the stry river, fold/unfold all tiddlers, etc.

If you need state-management, tho, you need to hook into the $tw context. :slight_smile: