chore: Flarum 2.0 compatibility (#1)

* chore(2.0): update dependencies

Update dependencies to Flarum 2.0 compatible versions.

* chore(2.0): update infrastructure

Update the extension infrastructure

* chore(2.0): remove compat API

The compat API has been removed. Modules from extensions are now automatically accessible from other extensions using the format ext:vendor/extension/module-path.

* chore(2.0): misc frontend changes

Miscellaneous frontend changes

* chore(2.0): misc backend changes

Miscellaneous backend changes

* chore(2.0): `LESS` code changes

Many variables have been renamed to light/dark specific names and most are now used as CSS variables instead.

* chore: 2.0 upgrade

* chore: update README

Author: imorland

.github/workflows/backend.yml

@@ -4,10 +4,9 @@ on: [workflow_dispatch, push, pull_request]
 
 jobs:
   run:
-    uses: flarum/framework/.github/workflows/REUSABLE_backend.yml@1.x
+    uses: flarum/framework/.github/workflows/REUSABLE_backend.yml@2.x
     with:
       enable_backend_testing: false
       enable_phpstan: true
-      php_versions: '["8.2", "8.3", "8.4", "8.5"]'
 
       backend_directory: .

.github/workflows/frontend.yml

@@ -4,7 +4,7 @@ on: [workflow_dispatch, push, pull_request]
 
 jobs:
   run:
-    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@1.x
+    uses: flarum/framework/.github/workflows/REUSABLE_frontend.yml@2.x
     with:
       enable_bundlewatch: false
       enable_prettier: true
@@ -13,7 +13,7 @@ jobs:
       frontend_directory: ./js
       backend_directory: .
       js_package_manager: yarn
-      main_git_branch: 1.x
+      main_git_branch: 2.x
 
     secrets:
       bundlewatch_github_token: ${{ secrets.BUNDLEWATCH_GITHUB_TOKEN }}

README.md

@@ -55,7 +55,7 @@ Extension developers wanting to create widgets with this small framework, the fo
 2. Create your widget's component in `common/components` by extending the base `Widget` component:
 
 ```jsx
-import Widget from 'flarum/extensions/fof-forum-widgets-core/common/components/Widget';
+import Widget from 'ext:fof/forum-widgets-core/common/components/Widget';
 
 export default class MyWidget extends Widget {
   className() {
@@ -81,7 +81,7 @@ export default class MyWidget extends Widget {
 3. Register your widget in both frontends. Create `common/registerWidget.js`:
 
 ```js
-import Widgets from 'flarum/extensions/fof-forum-widgets-core/common/extend/Widgets';
+import Widgets from 'ext:fof/forum-widgets-core/common/extend/Widgets';
 import MyWidget from './components/MyWidget';
 
 export default function (app) {
@@ -114,7 +114,7 @@ app.initializers.add('my-extension-id', () => {
 4. For TypeScript, add this to the `paths` key in your `tsconfig.json`:
 
 ```json
-"flarum/extensions/fof-forum-widgets-core/*": ["../vendor/fof/forum-widgets-core/js/dist-typings/*"]
+"ext:fof/forum-widgets-core/*": ["../vendor/fof/forum-widgets-core/js/dist-typings/*"]
 ```
 
 ## Links

composer.json

@@ -2,7 +2,10 @@
     "name": "fof/forum-widgets-core",
     "description": "Core Extension for Managing Forum Widgets",
     "keywords": [
-        "flarum", "widgets", "framework", "core"
+        "flarum",
+        "widgets",
+        "framework",
+        "core"
     ],
     "type": "flarum-extension",
     "license": "MIT",
@@ -28,21 +31,22 @@
         "afrux/forum-widgets-core": "*"
     },
     "require": {
-        "php": "^8.2",
-        "flarum/core": "^1.8"
+        "flarum/core": "^2.0.0"
     },
     "require-dev": {
-        "flarum/phpstan": "*"
+        "flarum/phpstan": "^2.0.0"
     },
     "autoload": {
         "psr-4": {
             "FoF\\ForumWidgets\\": "src/"
         },
-        "files": ["src/helpers.php"]
+        "files": [
+            "src/helpers.php"
+        ]
     },
     "extra": {
         "branch-alias": {
-            "dev-1.x": "1.x-dev"
+            "dev-2.x": "2.x-dev"
         },
         "flarum-extension": {
             "title": "FoF Widgets Core",
@@ -63,5 +67,7 @@
     },
     "scripts-descriptions": {
         "analyse:phpstan": "Run static analysis"
-    }
+    },
+    "minimum-stability": "beta",
+    "prefer-stable": true
 }

js/package.json

@@ -10,24 +10,24 @@
     "@flarum/prettier-config": "^1.0.0",
     "webpack": "^5.0",
     "webpack-cli": "^4.0",
-    "flarum-webpack-config": "^2.0.0",
+    "flarum-webpack-config": "^3.0.0",
     "@types/sortablejs": "^1.10.7",
     "bundlewatch": "^0.3.2",
     "prettier": "^3.0.3",
-    "flarum-tsconfig": "^1.0.2",
+    "flarum-tsconfig": "^2.0.0",
     "typescript": "^4.5.4",
     "typescript-coverage-report": "^0.6.1"
   },
   "scripts": {
-        "dev": "webpack --mode development --watch",
-        "build": "webpack --mode production",
-        "analyze": "cross-env ANALYZER=true npm run build",
-        "format": "prettier --write src",
-        "format-check": "prettier --check src",
-        "clean-typings": "npx rimraf dist-typings && mkdir dist-typings",
-        "build-typings": "npm run clean-typings && ([ -e src/@types ] && cp -r src/@types dist-typings/@types || true) && tsc && npm run post-build-typings",
-        "post-build-typings": "find dist-typings -type f -name '*.d.ts' -print0 | xargs -0 sed -i '' 's,../src/@types,@types,g'",
-        "check-typings": "tsc --noEmit --emitDeclarationOnly false",
-        "check-typings-coverage": "typescript-coverage-report"
-    }
+    "dev": "webpack --mode development --watch",
+    "build": "webpack --mode production",
+    "analyze": "cross-env ANALYZER=true npm run build",
+    "format": "prettier --write src",
+    "format-check": "prettier --check src",
+    "clean-typings": "npx rimraf dist-typings && mkdir dist-typings",
+    "build-typings": "npm run clean-typings && ([ -e src/@types ] && cp -r src/@types dist-typings/@types || true) && tsc && npm run post-build-typings",
+    "post-build-typings": "find dist-typings -type f -name '*.d.ts' -print0 | xargs -0 sed -i '' 's,../src/@types,@types,g'",
+    "check-typings": "tsc --noEmit --emitDeclarationOnly false",
+    "check-typings-coverage": "typescript-coverage-report"
+  }
 }

js/src/admin/admin.ts

@@ -0,0 +1 @@
+import '../common/common';

js/src/admin/compat.ts

@@ -1,8 +1,9 @@
+import Form from 'flarum/common/components/Form';
 import app from 'flarum/admin/app';
 import sortable from 'sortablejs';
 import type Mithril from 'mithril';
 import ExtensionPage, { ExtensionPageAttrs } from 'flarum/admin/components/ExtensionPage';
-import icon from 'flarum/common/helpers/icon';
+import Icon from 'flarum/common/components/Icon';
 
 import sortWidgets from '../../common/utils/sortWidgets';
 import type { Widget } from '../../common/extend/Widgets';
@@ -30,19 +31,19 @@ export default class WidgetEditor extends ExtensionPage<WidgetEditorAttrs> {
   }
 
   content() {
-    const settings = app.extensionData.getSettings(this.extension.id);
+    const settings = app.registry.getSettings(this.extension.id);
 
     return (
       <div className="ExtensionPage-settings">
         <div className="container">
           {!app.data['fof-forum-widgets-core.cache_store_writable'] ? (
             <Alert type="error">{app.translator.trans('fof-forum-widgets-core.admin.cache_not_writable_warning')}</Alert>
           ) : null}
-          <div className="Form">
+          <Form>
             <div className="Form-group">{this.editor()}</div>
             {settings ? settings.map(this.buildSettingComponent.bind(this)) : null}
             <div className="Form-group">{this.submitButton()}</div>
-          </div>
+          </Form>
         </div>
       </div>
     );
@@ -206,7 +207,7 @@ export default class WidgetEditor extends ExtensionPage<WidgetEditorAttrs> {
       <div className="FoF-ForumWidgets-Widget-container">
         <div className="FoF-ForumWidgets-Widget">
           <span className="FoF-ForumWidgets-Widget-icon ExtensionIcon" style={extension.icon}>
-            {extension.icon ? icon(extension.icon.name) : ''}
+            {extension.icon ? <Icon name={extension.icon.name} /> : ''}
           </span>
           <span className="FoF-ForumWidgets-Widget-title">{extension.extra['flarum-extension'].title}</span>
         </div>

js/src/admin/components/WidgetEditor.tsx

@@ -0,0 +1,14 @@
+import app from 'flarum/admin/app';
+import Extend from 'flarum/common/extenders';
+import WidgetEditor from './components/WidgetEditor';
+
+export default [
+  new Extend.Admin() //
+    .page(WidgetEditor)
+    .setting(() => ({
+      setting: 'fof-forum-widgets-core.prefer_data_with_initial_load',
+      label: app.translator.trans('fof-forum-widgets-core.admin.settings.prefer_data_with_initial_load'),
+      help: app.translator.trans('fof-forum-widgets-core.admin.settings.prefer_data_with_initial_load_help'),
+      type: 'boolean',
+    })),
+];

js/src/admin/extend.ts

@@ -1,24 +1,14 @@
 import app from 'flarum/admin/app';
 import WidgetManager from '../common/WidgetManager';
-import WidgetEditor from './components/WidgetEditor';
+
+export { default as extend } from './extend';
 
 app.widgets = new WidgetManager();
 
 app.initializers.add('fof/forum-widgets-core', () => {
-  app.extensionData
-    .for('fof-forum-widgets-core')
-    .registerSetting({
-      setting: 'fof-forum-widgets-core.prefer_data_with_initial_load',
-      label: app.translator.trans('fof-forum-widgets-core.admin.settings.prefer_data_with_initial_load'),
-      help: app.translator.trans('fof-forum-widgets-core.admin.settings.prefer_data_with_initial_load_help'),
-      type: 'boolean',
-    })
-    .registerPage(WidgetEditor);
+  // Nothing to do here yet.
 });
 
-// Expose compat API
-import customCompat from './compat';
+// Allow flarum to discover modules
+import './admin';
 // @ts-ignore
-import { compat } from '@flarum/core/admin';
-
-Object.assign(compat, customCompat);