Skip to content

[2.x] fix(flags): drop literal 'undefined' from Inappropriate reason and lazy-load FlagPostModal#4659

Merged
imorland merged 1 commit into
2.xfrom
im/flags-inappropriate-no-guidelines-url
May 13, 2026
Merged

[2.x] fix(flags): drop literal 'undefined' from Inappropriate reason and lazy-load FlagPostModal#4659
imorland merged 1 commit into
2.xfrom
im/flags-inappropriate-no-guidelines-url

Conversation

@imorland
Copy link
Copy Markdown
Member

Summary

Two related changes to the Flarum-Flags "Inappropriate" flag-post path:

  1. Fix {undefined} rendering when no Community Guidelines URL is set. With no URL configured, the modal currently renders:

    This post is offensive, abusive, or violates our {undefined}.

    The reason: FlagPostModal passes undefined as the <a> rich-placeholder value to the translator, which stringifies it (the translator wraps undefined args as '{undefined}' at Translator.tsx:131, and <a> is not in the auto-provided element fallback list).

    Use a separate translation key (reason_inappropriate_text_no_guidelines) when the URL is unset, instead of trying to pass undefined as a placeholder. Matches the reporter's suggested wording ("This post is offensive or abusive.").

  2. Lazy-load FlagPostModal. The modal was imported eagerly via a side-effect import './components/FlagPostModal' in forum.ts plus a static import FlagPostModal from ... in addFlagControl.js, so its ~4 KB was always shipped in the main forum bundle even for users who never click flag. Switch to the documented lazy-load pattern:

    <Button onclick={() => app.modal.show(() => import('./components/FlagPostModal'), { post })}>

    forum.js drops from 12,454 → 11,509 bytes; FlagPostModal.js becomes a deferred ~4 KB chunk loaded on first click.

    Required follow-up: declare ->jsDirectory(__DIR__.'/js/dist/forum') on the Extend\Frontend('forum') registration so Flarum's asset publisher copies the chunked sub-bundles into assets/extensions/flarum-flags/forum/components/. Without this, the chunk requests 404.

Backwards compatibility (lazy-load)

FlagPostModal is no longer in the registry at boot time — it's only registered when the lazy chunk loads (first flag-button click). Third-party extensions using the string-path form of extend() (extend('flarum/flags/components/FlagPostModal', 'view', fn)) are unaffected: the registry's onLoad hook applies pending patches when the chunk lands (common/extend.ts:36-43).

Extensions using the direct-prototype form (import FlagPostModal from 'flarum/flags/...'; extend(FlagPostModal.prototype, ...)) at initializer-time would break, because the import would resolve to undefined until the chunk loads. The string-path form is the documented recommended pattern for cross-extension extension specifically because of this; any extension targeting 2.x's registry-based module model should already be using it.

Test plan

  • Unset Community Guidelines URL → flag modal Inappropriate option reads "This post is offensive or abusive." (no {undefined}).
  • Set Community Guidelines URL → reads "This post is offensive, abusive, or violates our [community guidelines]." with working link.
  • Initial page load: no FlagPostModal*.js request in Network tab.
  • First flag-button click: chunk requests successfully from assets/extensions/flarum-flags/forum/components/FlagPostModal.js; modal renders.
  • Second click: no additional chunk fetch (already loaded).
  • Submit flag → flow completes normally.

Closes #4574

…and lazy-load FlagPostModal

Two related changes to the Inappropriate flag-post path:

1. When no Community Guidelines URL is configured, the reason text
   rendered the literal token "{undefined}" — the translator
   stringifies undefined values passed into a rich placeholder. Use
   a separate translation key with no link placeholder when the URL
   is unset, instead of trying to pass `undefined` as the `<a>` slot.

2. The flag modal was imported eagerly via a side-effect import in
   forum.ts and a static import in addFlagControl.js, so its ~4 KB
   was always shipped in the main forum bundle even for users who
   never report a post. Switch to the documented lazy-load pattern
   (`app.modal.show(() => import('./components/FlagPostModal'), ...)`)
   and declare the chunk directory via `Extend\Frontend::jsDirectory`
   so the chunked sub-bundle is published.

Closes #4574
@imorland imorland requested a review from a team as a code owner May 13, 2026 11:19
@imorland imorland added this to the 2.0.0-rc.2 milestone May 13, 2026
@imorland imorland merged commit 0c326d3 into 2.x May 13, 2026
24 checks passed
@imorland imorland deleted the im/flags-inappropriate-no-guidelines-url branch May 13, 2026 11:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[1.x & 2.x] [Flags] Improved handling of unset community guidelines

1 participant