Best TW Dev Framework! Easy WYSIWYG plugin developing, support TypeScript

, , ,
#1

banner
banner2016×568 52.6 KB

It’s been a long time, my friends! Guess what I brought this time? :sunglasses:

A big toy for all TW developers, even for all users!

→ View Tutorials ←

Modern.TiddlyDev is a one-click development environment for various TiddlyWiki plug-in developers built on a modern front-end technology stack, with the following features and functions:

  • Compile, test and publish plug-ins with one click:
    • Open the page server in development mode, which can be tested in the browser, automatically detect changes to the plug-in files and synchronize the plug-in content updates to the browser page, realizing the WYSIWYG of plug-in development;
    • One-click plugin building and support for generating plugin repositories for use by your subscribers.
    • Has a built-in GitHub Page publishing script that automatically publishes written plugin documentation pages and plugin repositories to the Internet;
    • Built-in GitHub Release script, which releases the plugin according to the version specified by the git tag;
  • Tailored for TypeScript plugin development, so it is now easy to use TypeScript development in TiddlyWiki:
    • Multi-entry file compilation is supported, and various plugins can be easily written in TiddlyWiki;
    • Support for .ts, .tsx, .jsx, .mjs, .cjs files compiled with the tw-react plugin for React development in TiddlyWiki;
    • Use tw5-typed to type annotate TiddlyWiki API to bring a native TypeScript experience to development;
    • Use the full amount of ESLint and Prettier rules provided by Modern.JS to normalize the code;
    • Incremental project builds using the extremely fast esbuild, which makes writing code a blast;
    • Support for setting browser compatibility ranges for plugins using browserslist;
    • Automatically generate sourcemap for source code (start by default when developing, specify to turn on when building), no need to worry about debugging!
    • The possibility of introducing CSS, JSON, etc. into the script;
    • Automatic volume compression of the plug-in (can be turned off);
    • Automatic generation of hash-check signatures for the generated plug-ins;

Don’t worry, even if you are not good at programming, it doesn’t matter, Modern.TiddlyDev can be your development tool as well. No code plugin development can be an enjoyable development experience as well!

There’s a lot of work here, but it’s just Out-of-the-Box for you. Use it and get started on your modern TiddlyWiki plugin development journey!

wysiwyg-demo

p.s. I’d appreciate it if If you star this project!

12 Likes
Server: on-demand refresh of tiddler from filesystem
Using external JS Libraries in TW Plugins
I Made a WebGL Plugin
Announcing my plugin library
Plugin Development Workflow
How to enable less/sass libraries for css processing?
Support for Svelte plugin in Modern.TiddlyDev, make complex JS plugin smaller
#2

Nice work. I’m trying it, and I’ve star it on GitHub.

3 Likes
#3

Some screenshots :camera_flash: for CLI tool:

Create a project:

image
image860×260 19.8 KB

Create a plugin:

image
image1046×406 41.9 KB

Build plugins:

image
image1070×554 41.8 KB

Next plan: Converted all the plugins I developed (echarts, codemirror-enhanced, etc.) to use Modern development. :100:

What else would you like me to provide, such as more samples of this tool in use? Or address some of your more specific needs? Feel free to reply! :speech_balloon:

3 Likes
#4

Wonderful job!
A step forward in creating professional IDE for Tiddlywiki developers.

Minor comments: add a quick tutorial

#5

Tks! And what kind of quick tutorials?

Like this one? [A minute to teach you to create and publish your own plugins!]

#6
  • quick itemized get started (1. …, 2…, 3… that is all)
    Here you just explain the very basic steps to get on board

This serves as a starting example!

#7

Is this the kind of tutorial you were expecting?

https://tiddly-gittly.github.io/Modern.TiddlyDev/#%24%3A%2Fplugins%2FModern.TiddlyDev%2Fdoc%2Ftutorials%2Fen%2F001-beginning

Or does it need to be more concise?

#8

Ah, that is fine

I feel it a little long but, maybe this is because of the steps needed for modern.tiddlywikidev to get started

#9

In this short tutorial I can’t find the installation step

#10

The strategy now looks like this, with the readme section describing what modern does, and then leading to the tutorials section:

image

A detailed tutorial is then provided by the tutorials section:

image
image702×534 46.1 KB

Were you able to find this part of the tutorial at first? Is it confusing to be guided in this way?

#11

This is good! I did not notice there is a tutorial tab! :sweat_smile:
Thank you

#12

Then I think there will indeed be others who will be confused by this as well. :cry:

I’ll try to make the tutorials section more visible, or any better suggestions?

1 Like
#13

Yes please! May be a link in readme! I assume when one open https://tiddly-gittly.github.io/Modern.TiddlyDev whill see the readme first, so may be a link to be there in front of user eyes to be clicked and switch the tutorial tab could help.

#14

I’m going to add a banner

image
image1428×1564 254 KB

I don’t know how I can use a button to make the tab group jump to [tutorials] automatically.

#15

Look at: $:/core/ui/ViewTemplate/body/plugin

The tab uses a state tiddler.

In your demo this state is
$:/state/plugin-info-946103238-$:/plugins/Modern.TiddlyDev/doc--2011631092
a button is needed to set the text value to tutorials
You can see how the state is defined. The below code works

<$button 
 setTitle="$:/state/plugin-info-946103238-$:/plugins/Modern.TiddlyDev/doc--2011631092" 
 setField=text 
 setTo=tutorials
>
tutorials
</$button>

@pmario may have better explanation here! I am not sure if an explicit state is used here or not

#16

I see, <<tabsState>> is exactly what I want. Thanks!

image
image1182×444 94.7 KB

1 Like
#17

Yep, you found the variable refer to state! Very nice!

#18

@jeremyruston @saqimtiaz I think this tool should be compatible with future plugin-library mechanisms, and if needed I will do some extra work to make its generation behavior fit with the way future plugin-libraries are planned.

As well, I can add some new utilities to facilitate developers to switch from the traditional plugin development and distribution model to the new standard, using Modern.TiddlyDev as an officially recommended development solution. This will further motivate developers and simplify the complexity of development.

So, do you have any suggestions and plans in this regard? Thanks!

1 Like
#19

I have converted all three of my main plugin repositories to Modern.TiddlyDev and have released new versions of their respective plugins in good condition:

Modern.TiddlyDev has helped me find a lot of bugs I missed before, improved the robustness of my code, and significantly increased the efficiency of my development!

4 Likes
#20

Someone recommended this to me in May. Last night I created two projects with it lol. And here it is I see it once again.

I really like that it compiles my code into tiddlers. That’s the best part :slight_smile:

2 Likes