1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-28 02:50:27 +00:00

Merge branch 'tiddlywiki-com'

This commit is contained in:
Jeremy Ruston 2024-03-09 14:49:55 +00:00
commit 43a2399698
9 changed files with 102 additions and 27 deletions

View File

@ -1,5 +1,5 @@
created: 20190202035524804
modified: 20221029161501848
modified: 20240302110658300
tags:
title: Javascript Widget Tutorial
type: text/vnd.tiddlywiki
@ -9,21 +9,23 @@ This tutorial provides step-by-step, interactive examples of how to write code f
Intended audience:
# Those who know tiddlywiki well and know programming and javascript and want to write their own widget. I don't make any effort to explain javascript here. For that you will need other resources.
# Those who know tiddlywiki well and know programming and javascript and want to write their own widget.
# Those who know tiddlywiki well and don't know javascript, but want to understand more about how tiddlywiki works. You should be able to skim through and interact with the demos and learn something.
!The tutorial
*[[Undefined widget tutorial]]
*[[Do nothing widget tutorial]]
*[[Hello World widget tutorial]]
*[[Widget refresh tutorial part I]]
*[[Widget refresh tutorial part II]]
*[[Widget refresh tutorial part III]]
*[[Widget attributes tutorial part I]]
*[[Widget attributes tutorial part II]]
*[[Child widgets tutorial]]
We don't make any effort to explain javascript here. For that you will need other resources, like [[MDN|https://developer.mozilla.org/en-US/docs/Web/JavaScript]].
! Notes
!! The tutorial
* [[Undefined widget tutorial]]
* [[Do nothing widget tutorial]]
* [[Hello World widget tutorial]]
* [[Widget refresh tutorial part I]]
* [[Widget refresh tutorial part II]]
* [[Widget refresh tutorial part III]]
* [[Widget attributes tutorial part I]]
* [[Widget attributes tutorial part II]]
* [[Child widgets tutorial]]
!! Notes
tiddlywiki doesn't support dynamically reloading javascript. If you change a javascript tiddler, then you need to save and reload the wiki before the changes will take affect.
@ -31,7 +33,11 @@ To avoid the need for such reloads, the excellent [[innerwiki plugin|https://tid
Without the need for reloads, a tiddlywiki instance with the [[innerwiki plugin|https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/]] installed works great as a playground for interacting with tiddlywiki javascript.
! Other documentation on writing TW widgets
!! Other documentation on writing TW widgets
*WidgetModules
*[[Widgets]]
* WidgetModules
* [[Widgets]]
!! Full API doc
[[Github Pages of TW5-Typed|https://tiddly-gittly.github.io/TW5-Typed/api/classes/modules_widgets.widget]]

View File

@ -1,5 +1,5 @@
modified: 20160305222940000
created: 20160111034749658
modified: 20240302110735646
title: Using ES2016 for Writing Plugins
type: text/vnd.tiddlywiki
@ -7,7 +7,15 @@ With the advent of ES2015 (also known as ES6) and the availability of [[Babel.js
Please understand how the PluginMechanism works since this is all about writing a plugin using Babel to compile the output that will be included in the final TiddlyWiki (for example [[TiddlyWiki on Node.js]]).
!! Installing and Configuring Babel
!! Use a framework
It is recommended to use develop toolkit managed by community. For example,
# [[Modern.TiddlyDev|https://tiddly-gittly.github.io/Modern.TiddlyDev/]]
They are known as "~JavaScript Meta-Framework". With them, you can start developing in a few minutes, without hours of configuration and debugging the build steps.
!! Installing and Configuring Babel by yourself
You can install Babel using
@ -33,7 +41,9 @@ Inside your plugin project edit the file `.babelrc` and enter the following:
<<.tip "I found it easier to manage my plugins as if they were ''npm'' modules complete with a `package.json` that compiles the output via `npm run build`. See [[npm-scripts documentation|https://docs.npmjs.com/misc/scripts]] for details.">>
!! Compiling the Output
Another benefit of using such a "Meta-Framework" is that you can easily maintain your configuration, you will find it difficult to upgrade those config files after several months.
!!! Compiling the Output
Pick a folder to store the ES2015 JavaScript and a folder to output the TiddlyWiki ready JavaScript. In this example I will use `src` and `lib` respectively. With Babel installed and working I can compile all the JavaScript in the `src` folder to the `lib` folder by running this command:
@ -43,7 +53,7 @@ $ babel src -d lib
<<.warning "Babel will //not// copy over non-JavaScript files. It is up to the developer to include all the supporting files themselves. Babel only converts the ~JavaScript files (ending in `.js`) from the `src` folder to the `lib` folder.">>
!! Imports and Exports
!!! Imports and Exports
In a plugin written pre-ES2015 one would `require` a module through TiddlyWiki like so:
@ -71,7 +81,7 @@ export { MyWidget as mywidget };
It is important to understand that in ES2016 the ''default'' export is not supported in TiddlyWiki. This is mostly because the core code expects specific properties to be attached to the `exports` variable. Bable's `export` conversion plays well with this //except// with the default export.
!! Classes
!!! Classes
In the example of a widget ES2016 plays well with class inheritance. To contrast the typical Widget definition would look something like this:
@ -104,7 +114,7 @@ class NameWidget extends Widget {
}
```
!!! Non Class Modules
!!!! Non Class Modules
For non class modules you can use the `export` keyword. Here is a simple [[Startup Module|ModuleType]]:
@ -122,11 +132,11 @@ export const params = {};
export function run() {…}
```
!! Polyfills
!!! Polyfills
ES2015 comes with some features that are part of the JavaScript core objects. These are not supported by all browsers. To use these features in [[most browsers|BrowserCompatibility]] you will need a <<.def "polyfill">>. Babel has a polyfill package that you can include. See [[Adding Babel Polyfill to TiddlyWiki]] for how to accomplish this.
!! Example
!!! Example
Here is an example ES2015 plugin/widget that will show the time and update it:

View File

@ -0,0 +1,42 @@
created: 20240309135835396
modified: 20240309142156125
tags: Concepts
title: Bags and Recipes
type: text/vnd.tiddlywiki
The bags and recipes model is a reference architecture for how tiddlers can be shared between multiple wikis. It was first introduced by TiddlyWeb in 2008.
The principles of bags and recipes can be simply stated:
# Tiddlers are stored in named "bags"
# Bags have access controls that determines which users can read or write to them
# Recipes are named lists of bags, ordered from lowest priority to highest
# The tiddlers within a recipe are accumulated in turn from each bag in the recipe in order of increasing priority. Thus, if there are multiple tiddlers with the same title in different bags then the one from the highest priority bag will be used as the recipe tiddler
# Wikis are composed by splicing the tiddlers from the corresponding recipe into the standard TW5 HTML template
A very simple example of the recipe/bag model might be for a single user who maintains the following bags:
* ''recipes'' - tiddlers related to cooking recipes
* ''work'' - tiddlers related to work
* ''app'' - common tiddlers for customising TiddlyWiki
Those bags would be used with the following recipes:
* ''recipes'' --> recipes, app - wiki for working with recipes, with common custom components
* ''work'' --> work, app - wiki for working with work, with common custom components
* ''app'' --> app - wiki for maintaining custom components
All of this will work dynamically, so changes to the app bag will instantly ripple into the affected hosted wikis.
A more complex example might be for a teacher working with a group of students:
* ''student-{name}'' bag for each students work
* ''teacher-course'' bag for the coursework, editable by the teacher
* ''teacher-tools'' bag for custom tools used by the teacher
Those bags would be exposed through the following hosted wikis:
* ''student-{name}'' hosted wiki for each students work, including the coursework material
* ''teacher-course'' hosted wiki for the coursework, editable by the teacher
* ''teacher'' hosted wiki for the teacher, bringing together all the bags, giving them an overview of all the students work

View File

@ -2,8 +2,9 @@ created: 201308300841
modified: 20170127221451610
tags: Definitions
title: TiddlyWeb
type: text/vnd.tiddlywiki
TiddlyWeb is a reference implementation for an interface to put [[Tiddlers]] on the web.
TiddlyWeb is a reference implementation for an interface to put [[Tiddlers]] on the web using the [[Bags and Recipes]] model.
It was created by a team led by Chris Dent at [[Osmosoft]] under [[BT]] from 2008 to 2012.
@ -16,5 +17,3 @@ Other implementations of the API include:
* [[TiddlyWiki App Engine Server|https://github.com/rsc/tiddly]], a 300-line Go implementation from Russ Cox
* [[TiddlyWiki 5 server module|https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/commands/server.js]], the bare-bones subset of the API implemented in TiddlyWiki version 5 for Node.js
* [[tiddly-wiki-server|https://github.com/nathanielknight/tiddly-wiki-server]], an implementation based on Rust and SQLite
As of early 2017, none is currently as complete as TiddlyWeb itself.

View File

@ -0,0 +1,9 @@
created: 20240309100338678
modified: 20240309135821423
tags: Definitions
title: TiddlyWebAdaptor
type: text/vnd.tiddlywiki
TiddlyWebAdaptor is a component of [[TiddlyWiki on Node.js]]. It provides the means to synchronise changes to tiddlers from the browser to a server, and from the server to the browser. It can be found in the plugin [[$:/plugins/tiddlywiki/tiddlyweb]].
TiddlyWebAdaptor was designed to be compatible both with TiddlyWeb and with TiddlyWiki's own built-in server mechanism. The [[Bags and Recipes]] model is fully supported by [[TiddlyWeb]], but TiddlyWiki's built-in server only supports a simplified model with a single bag and a single recipe.

View File

@ -0,0 +1,9 @@
created: 20240308122813807
modified: 20240308122916812
tags: [[Operator Examples]] [[sha256 Operator]]
title: sha256 Operator (Examples)
type: text/vnd.tiddlywiki
<<.operator-example 1 "[[test]sha256[]]">>
<<.operator-example 2 "[[test]sha256[64]]">>