diff --git a/editions/dev/tiddlers/javascript-widget-tutorial/Javascript Widget Tutorial.tid b/editions/dev/tiddlers/javascript-widget-tutorial/Javascript Widget Tutorial.tid index f6ee01182..3a5d18ed4 100644 --- a/editions/dev/tiddlers/javascript-widget-tutorial/Javascript Widget Tutorial.tid +++ b/editions/dev/tiddlers/javascript-widget-tutorial/Javascript Widget Tutorial.tid @@ -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]] \ No newline at end of file +* WidgetModules +* [[Widgets]] + +!! Full API doc + +[[Github Pages of TW5-Typed|https://tiddly-gittly.github.io/TW5-Typed/api/classes/modules_widgets.widget]] diff --git a/editions/dev/tiddlers/new/Using ES2016 for Writing Plugins.tid b/editions/dev/tiddlers/new/Using ES2016 for Writing Plugins.tid index f89a90f8f..ab447bc2e 100644 --- a/editions/dev/tiddlers/new/Using ES2016 for Writing Plugins.tid +++ b/editions/dev/tiddlers/new/Using ES2016 for Writing Plugins.tid @@ -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: