mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-26 19:47:20 +00:00
Code Issues Releases Wiki Activity

DevDocs: about modern frameworks in TiddlyWiki (#8027)

Browse Source 
* docs: abount modern frameworks

(cherry picked from commit 783547bac2d1bfaa20def3eeda0dc10b6b465d8d)

* docs: modified time

(cherry picked from commit c8db907fe273a414768f5292f61986800e092dfe)
This commit is contained in:
lin onetwo 2024-03-06 11:35:42 -06:00 committed by GitHub
parent f02fafe365
commit 6f9cabd352
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
editions/dev/tiddlers/javascript-widget-tutorial/Javascript Widget Tutorial.tid
View File

@ -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]]

26
editions/dev/tiddlers/new/Using ES2016 for Writing Plugins.tid
View File

@ -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: