Loading tiddlywiki and plugins in html

Tips & Tricks
#1

made by cdruan’s external-js plugin. GitHub - cdruan/tw-external-js: TiddlyWiki plugin for externalizing TW core and plugins

WARNING: Plugin for cdruan WARNING This plugin is intended for users with relevant knowledge only.

Loaded with two lines of html code tw2pdf and gatha two plug-ins.

Programmers can use this form to render data with tiddlywiki and its plugins.

after the next save those elements will be gone. So this hack html is only used to render data.

The purpose is just to publish a lightweight html file that is not editable.

If you save your own wiki content as a plugin. Then that html can remain unchanged.

If tiddlywiki supports this form of plugin in the future. Then tiddlyhost.com would save a lot of money.

<body class="tc-body">
<script class="tiddlywiki-tiddler-store" type="application/json">[
{"title":"GettingStarted","created":"20220119021412186","modified":"20220119023941669","tags":"","type":"text/vnd.tiddlywiki","text":"1\n","revision":"0","bag":"default"}
 ]</script><div id="storeArea" style="display:none;"></div>
 <!--~~ Raw markup for the bottom of the body section ~~-->
 <!--~~ Load external JavaScripts ~~-->
 <!--~~ Load tw2pdf plugin  ~~-->
<script src="e-tw2pdf.js" onerror="alert('Error: Cannot load myplugins-.js');"></script>
<!--~~ Load gatha plugin ~~-->
<script src="e-gatha.js" onerror="alert('Error: Cannot load myplugins-.js');"></script>
<script src="tiddlywikicore.js" onerror="alert('Error: Cannot load tiddlywikicore-.js');"></script>
</body>

Another method:

Open $:/core/templates/tiddlywiki5-external-js.html.
Add the following code in front of the code that loads tiddlywikicore.

This way, saving the file won’t cause the html file to get bigger.

<script src=“e-tw2pdf.js” onerror=“alert(‘Error: Cannot load myplugins-.js’);”></script>
<script src=“e-gatha.js” onerror=“alert(‘Error: Cannot load myplugins-.js’);”>/script>
1 Like
#4

@cdruan – What do you think?

#5

Manually reduce the size of tiddlywiki without using cdruan’s external js plugin.

cdruan updated this plugin two years ago, and the plugin also suggests to be careful with it. This time the topic, cdruan is not present either. So I tried the method of manually reducing the size of tiddlywiki. The result of the attempt was a file size reduction from 107KB to 14KB.

There are some problems with the content of this topic above. But the topic can’t be edited anymore. So some revision updates are in this reply.

Let’s do this experiment.

  1. create a new external core version of the site on tiddlyhost. download this version and you will see that the size is 107KB.

  2. Edit $:/core/save/offline-external-js. Add “ -[[$:/themes/tiddlywiki/vanilla]]” and “ -[[$:/themes/tiddlywiki/snowwhite]]” after “[is[tiddler]]”.

  3. edit $:/core/templates/tiddlywiki5-external-js.html. replace the last part that loads the js file with

<script src=“https://tomzheng.com/f/theme-vanilla-5.3.5.js” onerror=“alert(‘Error: Cannot load myplugins-.js’);”></script>
<script src=“https://tomzheng.com/f/theme-snowwhite-5.3.5.js” onerror=“alert(‘Error: Cannot load myplugins-.js’);”></script>
<script src=“https://tiddlyhost.com/tiddlywikicore-5.3.5.js” onerror=“alert(‘Error: Cannot load tiddlywikicore-.js’);”></script>

After saving and refreshing. Download this version. You will see that the size of this version is 14KB.

The result is available at: https://smaller-than-external-tiddlywikicore.tiddlyhost.com/

The way to make these two js files is to use cdruan’s external js plugin. And removed some redundancies from the content generated by the plugin. You can also not use cdruan’s external js plugin. Directly find a template file to modify it. Plug-in generated file is very simple, very easy to read.

With the same method, you can add any number of plug-ins.

I take this opportunity to mention. Export all inputs to a backup format json file using the gatha plugin. This may be able to do a certain degree of data and program separation. To open a file is to import json. to save a file is to export json.

不用cdruan的external js 插件，手动减小tiddlywiki的尺寸。

cdruan更新这个插件是在两年前了，插件也提示了要小心使用。这次的话题，cdruan也没有出现。因此我尝试手动减小tiddlywiki的尺寸的方法。尝试的结果是文件尺寸从107KB减小到了14KB。

上面这个话题的内容存在一些问题。但是话题不能被编辑了。所以一些修订更新的内容也在这个回复中。

我们来做这个实验。

  1. 在tiddlyhost上新建一个 external core 版本的site。下载下来这个版本，会发现尺寸为107KB。

  2. 编辑 $:/core/save/offline-external-js 。在"[is[tiddler]]“后面加上 " -[[$:/themes/tiddlywiki/vanilla]]” 和 " -[[$:/themes/tiddlywiki/snowwhite]]"。

  3. 编辑 $:/core/templates/tiddlywiki5-external-js.html。将最后的加载js文件的部分替换为

<script src="https://tomzheng.com/f/theme-vanilla-5.3.5.js" onerror="alert('Error: Cannot load myplugins-.js');"></script>
<script src="https://tomzheng.com/f/theme-snowwhite-5.3.5.js" onerror="alert('Error: Cannot load myplugins-.js');"></script>
<script src="https://tiddlyhost.com/tiddlywikicore-5.3.5.js" onerror="alert('Error: Cannot load tiddlywikicore-.js');"></script>

保存并且刷新后。下载下来这个版本。会看到这个版本的尺寸是14KB。

结果见： https://smaller-than-external-tiddlywikicore.tiddlyhost.com/

制作这两个js文件的方法是使用cdruan的external js 插件。并且删除了插件生成的内容的一些多余的部分。也可以不用cdruan的external js插件。直接找一个模版文件进行修改就可以了。插件生成的文件很简单，很容易看懂。

用同样的方法，可以增加任意数量的插件。

借此机会我提一下。将输入内容都用gatha插件导出为备份格式的json文件。这样就可能做到一定程度的数据和程序分离了。打开文件就是导入json。保存文件就是导出json。

How to save the save options for $:/plugins/cdr/external-js from the browser console
#6

Not sure exactly what you mean here but, so no misunderstanding, tiddlyhost already lets you create TWs with an external core! Using this option does not inject a plugin into the TW so I’m not quite sure how it is achieved.

image
image898×633 56.9 KB

#7

The current solution for tiddlyhost is external core. It’s to put tiddlywikicore outside of html. I am talking about putting the plugins outside. This will save more traffic costs. It is also more suitable for users with slow internet speed.

1 Like