mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-27 03:57:21 +00:00
Merge branch 'tiddlywiki-com'
This commit is contained in:
commit
43a2399698
@ -1,5 +1,5 @@
|
|||||||
created: 20190202035524804
|
created: 20190202035524804
|
||||||
modified: 20221029161501848
|
modified: 20240302110658300
|
||||||
tags:
|
tags:
|
||||||
title: Javascript Widget Tutorial
|
title: Javascript Widget Tutorial
|
||||||
type: text/vnd.tiddlywiki
|
type: text/vnd.tiddlywiki
|
||||||
@ -9,21 +9,23 @@ This tutorial provides step-by-step, interactive examples of how to write code f
|
|||||||
|
|
||||||
Intended audience:
|
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.
|
# 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
|
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]].
|
||||||
*[[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
|
!! 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.
|
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.
|
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
|
* WidgetModules
|
||||||
*[[Widgets]]
|
* [[Widgets]]
|
||||||
|
|
||||||
|
!! Full API doc
|
||||||
|
|
||||||
|
[[Github Pages of TW5-Typed|https://tiddly-gittly.github.io/TW5-Typed/api/classes/modules_widgets.widget]]
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
modified: 20160305222940000
|
|
||||||
created: 20160111034749658
|
created: 20160111034749658
|
||||||
|
modified: 20240302110735646
|
||||||
title: Using ES2016 for Writing Plugins
|
title: Using ES2016 for Writing Plugins
|
||||||
type: text/vnd.tiddlywiki
|
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]]).
|
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
|
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.">>
|
<<.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:
|
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.">>
|
<<.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:
|
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.
|
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:
|
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]]:
|
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() {…}
|
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.
|
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:
|
Here is an example ES2015 plugin/widget that will show the time and update it:
|
||||||
|
|
||||||
|
42
editions/tw5.com/tiddlers/concepts/Bags and Recipes.tid
Normal file
42
editions/tw5.com/tiddlers/concepts/Bags and Recipes.tid
Normal 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
|
||||||
|
|
@ -2,8 +2,9 @@ created: 201308300841
|
|||||||
modified: 20170127221451610
|
modified: 20170127221451610
|
||||||
tags: Definitions
|
tags: Definitions
|
||||||
title: TiddlyWeb
|
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.
|
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 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
|
* [[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
|
* [[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.
|
|
||||||
|
@ -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.
|
@ -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]]">>
|
Loading…
Reference in New Issue
Block a user