Topic on Talk:Codex/Flow

Just wanted to share that I decided to try Codex for a community webservice: https://hitaden.toolforge.org/

Still have some difficulties with the tokens sytem, but otherwise, it is a nice framework.

(Currently the backend is broken; also had to learn how to deploy on Toolforge with Build Service).

Great to hear! Feel free to reach out if you need help with anything. Most current uses of Codex are within MediaWiki, so we're eager to hear from people who are using it outside of MW, especially if you can point us to things that aren't well documented for that use case.

Sure. Should I share here or on Phabricator?

One recent case is the following. With showSearchProgressBar = false, this code snippet works:

<div v-show="showSearchProgressBar"><cdx-progress-bar
        inline
        aria--label="ProgressBar example"
        v-show="showSearchProgressBar"
    />
</div>

and got translated in:

<div style="display: none;"><!-- ARIA progressbar default values are `aria-valuemin="0"` and `aria-valuemax="100"`,
    hence omitting them here. -->
    <div
        class="cdx-progress-bar cdx-progress-bar--inline cdx-progress-bar--enabled"
        role="progressbar"
        aria-hidden="true"
        aria-disabled="false"
    >
        <div class="cdx-progress-bar__bar"></div>
    </div>
</div>

This one doesn't:

<cdx-progress-bar
    inline
    aria--label="ProgressBar example"
    v-show="showSearchProgressBar"
/>

and got translated in:

<!-- ARIA progressbar default values are `aria-valuemin="0"` and `aria-valuemax="100"`, hence omitting them here. -->
<div
    class="cdx-progress-bar cdx-progress-bar--inline cdx-progress-bar--enabled"
    role="progressbar"
    aria-hidden="true"
    aria-disabled="false"
>
    <div class="cdx-progress-bar__bar"></div>
</div>

I think it is because the cdx-progress-bar component is getting wrapped? I don't have the knowledge to share hypothesis. I don't know if it is linked to my framework (Astro) doing some static site generation. Do you experience the same on your side?

Hmmm I think this might be because the component outputs a comment at the start, and Vue tried to apply the v-show to the comment, which doesn't work. I already noticed that we were generating comments when we shouldn't (those should be for development only), and I already planned to look into it in the new year. I'm about to go on vacation for the holidays but I'll make this the first thing I look into when I come back in early January.

In the meantime, could you file a bug report in Phabricator and link it here? That will make it easier for us to track.

Going to! Until, have a nice end of year.

Tracked in Phabricator
Task T354394

Oh no, already two weeks. A bit forgot about it. Thanks for filling. I'm gonna break the CSS-only components now! I was just using Vue to test it all. 🫡

Apologies for the late follow-up, I was sick last week. This bug should be fixed in the latest release of Codex (1.2.1), which was released on January 9th.

What an idea to be sick... 😁 Thanks for the notice!

I'd like to ask you another and rather bold question: does the team think that the Codex "design tokens" are stable enough to be incorporated by volunteers into the Wikimedia projects themselves? For example, the colors could be used to update models that have unsightly colored backgrounds.

I've also looked at the MediaWiki Skin Variables Architecture graphic, but I need your knowledge to know the ins and outs of using tokens. If the nomenclatures are unified, are we safe to use rules defined in mediawiki.skin.defaults.less? Are all the rules always delivered by MediaWiki? No problems linked to potential tree shaking with Vue or minified CSS?

Thanks!

Eh, it seems related to phab:T346469. And the answer is no. And also, it seems I clearly mis-under-understand the architecture.

Unfortunately the design tokens are only available in MW as Less variables at the moment, so they can only be used in Less styles. On-wiki styles (Gadgets, user styles, TemplateStyles) can only use CSS, not Less. I looked into fixing that, but unfortunately the lack of Less support was a deliberate decision. So instead, we need to find a way to provide the design tokens in CSS. I filed this task for that a few months ago, as part of a larger effort to support Codex in Gadgets / user scripts, which we plan to work on in the coming months.

So in summary, tokens are not currently available in on-wiki styles due to technical barriers, and we plan to fix that some time in the next few months. Once that is fixed, I completely agree that using the tokens for on-wiki templates/modules would be a great idea. In addition to making the color scheme more consistent, using tokens would probably also help make those things compatible with the upcoming dark mode feature. (Some of the technical architecture decisions around dark mode are still unsettled and I'm not in charge of them, so I can't make any promises. But I think that "encourage on-wiki content to use CSS variables that correspond to (a subset of) Codex tokens" or something similar to that is likely to be part of the plan.)

Alright, since I had my answers, I ditched my prototype and the today-published new version is using Codex with Nuxt. And it works great. Thanks for your work!