refactor: use import syntax

.eslintrc.js

@@ -15,6 +15,9 @@ module.exports = {
     react: {
       version: '17.0.2',
     },
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
     'import/resolver': {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
@@ -32,6 +35,7 @@ module.exports = {
     },
   },
   rules: {
+    'import/no-unresolved': [2, { ignore: ['\\$:/'] }],
     // 'no-use-before-define': ['error', { ignoreTypeReferences: true, functions: false }],
     'unicorn/prevent-abbreviations': [
       'error',

demo/tiddlers/Index.tid

@@ -3,4 +3,6 @@ type: text/vnd.tiddlywiki
 
 {{$:/snippets/minilanguageswitcher}}
 
-Some readme here.
+Some readme here.
+
+<$example-widget />

package.json

@@ -51,7 +51,7 @@
     "eslint-import-resolver-typescript": "3.5.3",
     "eslint-plugin-autofix": "1.1.0",
     "eslint-plugin-html": "7.1.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "npm:eslint-plugin-i@2.26.0-2",
     "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.2.1",

src/index.js.meta

@@ -1,5 +1,5 @@
 creator: LinOnetwo
 title: $:/plugins/linonetwo/tw-react/widget.js
 type: application/javascript
-module-type: library
+module-type: widget
 hide-body: yes

src/index.ts

@@ -1,6 +1,5 @@
-import type { Widget as IWidget, IChangedTiddlers } from 'tiddlywiki';
-
-const Widget = (require('$:/core/modules/widgets/widget.js') as { widget: typeof IWidget }).widget;
+import type { IChangedTiddlers } from 'tiddlywiki';
+import { widget as Widget } from '$:/core/modules/widgets/widget.js';
 
 class ExampleWidget extends Widget {
   // constructor(parseTreeNode: IParseTreeNode, options?: unknown) {
@@ -14,18 +13,18 @@ class ExampleWidget extends Widget {
   /**
    * Lifecycle method: Render this widget into the DOM
    */
-  render(parent: Node, _nextSibling: Node): void {
+  render(parent: Element, _nextSibling: Element | null): void {
     this.parentDomNode = parent;
     this.computeAttributes();
     this.execute();
 
     const containerElement = document.createElement('div');
+    containerElement.textContent = 'Hello world!';
     this.domNodes.push(containerElement);
     // eslint-disable-next-line unicorn/prefer-dom-node-append
     parent.appendChild(containerElement);
   }
 }
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-exports.widget = ExampleWidget;
-exports.ExampleWidget = ExampleWidget;
+exports['example-widget'] = ExampleWidget;