aboutsummaryrefslogtreecommitdiffstats
path: root/resources/src/vue
Commit message (Collapse)AuthorAgeFilesLines
* Use `wikimedia/client` instead of `client-es6`Ed Sanders2025-01-031-1/+1
| | | | | | | This is currently the same as client-es6 but will automatically update when we change the default ES version. Change-Id: I77b18d049f01df18579c0b56eaf3825cffe5d9c3
* codex: Provide i18n function and messagesAnne Tomasevich2024-07-021-0/+2
| | | | | | | | | | | | - In Vue.createMwApp, provide `mw.msg` as the CdxI18nFunction, which will be used inside Codex components to get translated messages for certain strings - Include Codex messages in CodexModules that use Vue components - Add the codex i18n dir to the LocalisationCache message dirs and to the banana config in the Gruntfile Bug: T368449 Change-Id: I24477f5f6dcb34ad1c0959d60cdf221e859db5ce
* build: Update eslint-config-wikimedia to 0.28.1 and autofixEd Sanders2024-06-111-4/+2
| | | | | | | Also remove temporary explicit dependency on eslint-plugin-vue introduced in Ibd616750f046a. Change-Id: Ic6330fcb116e99d5827b4877e094e3073e2b7b72
* eslint: remove redundant ruleset wikimedia/jsdocNovem Linguae2024-05-151-2/+1
| | | | | | | | According to my testing, ruleset wikimedia/client-es6 already contains the ruleset wikimedia/jsdoc. So I don't think it needs to be declared twice. Change-Id: Ica371773b5b181e290340c24806d90255368f415
* Fix link to i18n plugin in JSDocSiebrand Mazeland2024-05-031-1/+1
| | | | | Bug: T363543 Change-Id: Id180915c9ad53b3ab35f7c4e6633039aeef99772
* docs: Use lowercase for Vue moduleapaskulin2024-04-172-4/+4
| | | | Change-Id: Ib755d64d2ccd20dd1aa6c0f6140b61058e00e0bc
* docs: Document Vue as a module in JSDocapaskulin2024-03-272-6/+9
| | | | Change-Id: Idc3770d1bdd1659b34cbacf67129e8c30eb8dfb0
* docs: Migrate Vue wrapper to JSDocapaskulin2024-03-082-10/+21
| | | | | | | | Document the i18n plugin as Vue.prototype.$i18n. This isn't quite accurate, but it's the closest thing that makes sense to jsdoc. Bug: T352308 Change-Id: I6ec345742f2d62f0adf3ef03873a1a229856bea1
* docs: Remove further references to jsduckJon Robson2023-11-301-1/+1
| | | | | Bug: T138401 Change-Id: I80739776e2fa55536d51e2d7e2743d337bd54135
* Replace Vue 3 migration build with pure Vue 3Lucas Werkmeister2023-11-282-84/+10
| | | | | | | | It is now time to stop shipping the migration build of Vue 3. Bug: T289020 Bug: T289104 Change-Id: I452e8275e7de248d8db2ddb3f14bf5218c546fb5
* Resources: Move teleportTarget module into mediawiki.page.readyEric Gardner2023-08-281-1/+1
| | | | | | | | | | | | Moves the previously created "mediawiki.page.teleportTarget" module into "mediawiki.page.ready" based on similarity of concerns. Also updates the dependencies for the Vue module (which needs to require() the element created here in order to provide it automatically to all on-wiki Vue apps). Bug: T343476 Change-Id: Id106a36f8ead7424c2ad2881ad79586e48f7bf1d
* Add "mediawiki.page.teleportTarget" module to coreEric Gardner2023-08-251-0/+2
| | | | | | | | | | | | | | | | | | | | | | | | Introduces a new ResourceLoader module, "mediawiki.page.teleportTarget". This script creates a new empty div with an ID and appends it to the end of the document body. An accompanying stylesheet has also been added that sets this element's z-index to that of the @z-index-overlay token. Skins can override this z-index value if necessary. This is done in order to provide a stable target that client-side UI code can use if a dialog or similar modal element needs to be teleported without causing collisions with other elements on the page. This module has been added as a dependency of the MW Vue module. The custom Vue.createMWApp method now provides the appended DOM element under the "CdxTeleportTarget" key so that components like Codex Dialog will use it automatically. MW Skins should consider applying skinStyles to this element to ensure that it's styles match those of the page body text elements. Bug: T343476 Change-Id: Ia79b76c0e73890dd18477e5c3ea307d753cedb3a
* Vue: make i18n plugin injectable in Vue 3 setup functionsSergio Gimeno2023-04-211-4/+13
| | | | | | | | | This allows to inject i18n function to components using the setup() function from composition API. Avoid warnings from the Vue 2 compatibility calls to Vue.use. Bug: T335188 Change-Id: I28659ff45a60fa22b9bf7d8fa2fa598bb3926508
* vue i18n: Prevent unnecessary rerender in v-i18n-htmlRoan Kattouw2023-02-081-18/+55
| | | | | | | | | | | | | | | | | | | | | When the v-i18n-html directive is used in a component, the directive function is called every time anything changes in the component. Unfortunately this is necessary for detecting when the value of the directive changes, because Vue's directive API doesn't give us a better way to detect that. However, it does give us the old value. This change adds logic that should have been part of this directive from the start, comparing the old value to the new value and doing nothing if they're the same. This avoids unnecessary rerenders when an unrelated bit of component state changes. These rerenders were wasteful, and were also causing bugs like T327229. There's no binding.oldArg, so we can't detect changes in binding.arg. Those can only happen when a dynamic argument is used, which is already discouraged, so warn in the documentation that that isn't supported. Change-Id: I71f1cc0d08bfd02e1a9edb6cbfd849f10f929f3c
* Upgrade Vuex to 4.0.2Roan Kattouw2022-01-182-11/+12
| | | | | | | | | | | | | Provide backward compatibility in Vue.createMwApp() for the store option. Vuex 4 expects Vue.createMwApp(...).use(store), but code written for Vuex 3 will do Vue.createMwApp({..., store: store }) instead. Unfortunately, it doesn't appear to be possible to provide backward compatibiltiy for new Vue( { ..., store: store } ) . I can't find a way to access the underlying app instance. Bug: T289102 Change-Id: I21641827780f4a7d8a5196c7dab14fbc3e4f4175
* Upgrade Vue to the migration build of Vue 3Roan Kattouw2021-12-076-97/+108
| | | | | | | | | | | | | | | | | * Upgrade Vue to @vue/compat version 3.2.23 * Migrate Vue.createMwApp to Vue 3 API * Add backwards-compatible wrapper emulating Vue 2 behavior for new Vue( { el: '#foo', ... } ) and new Vue( ... ).$mount( '#foo' ) * Make @vue/composition-api an alias for vue, for b/c * Convert resources/src/vue/ to ES6 * Ignore resource/src/vue/ for jsduck, since it doesn't support ES6 * VueComponentParser: Remove check for only one root node Bug: T251974 Co-Authored-By: Lucas Werkmeister <lucas.werkmeister@wikimedia.de> Depends-On: Ica0c0d0d6247383796d39199e50a9aff917f5b53 Change-Id: Ibd618765f962f57984994604c61b1aff9e6a778d
* Merge "Return instance from createMwApp().mount()"jenkins-bot2021-11-151-1/+3
|\
| * Return instance from createMwApp().mount()Lucas Werkmeister2021-11-101-1/+3
| | | | | | | | | | | | | | | | | | Some callers require access to this instance; in Vue 3, as far as I can tell, mount() returns some kind of instance as well [1]. [1]: https://github.com/vuejs/vue-next/blob/v3.2.21/packages/runtime-core/src/apiCreateApp.ts#L41 Change-Id: I6784810fe5f5534682e9c84d730d8bb6fb718f5f
* | Vue: Add propsData parameter to Vue.createMwApp()Roan Kattouw2021-11-051-2/+10
|/ | | | | | | For compatibility with the createApp() API in Vue 3. Bug: T294476 Change-Id: I1fcdcf7bf87f5af2deb9763a231f2c360ea45b23
* Add Vue composition API pluginRoan Kattouw2021-11-031-0/+12
| | | | | | | | | | Feature code that needs the composition API will need this as long as we're still on Vue 2. This will also help migrate to Vue 3 more seamlessly, as working around some breaking changes in Vue 3 requires using the composition API. Bug: T251974 Change-Id: I8e334ae5f447a8f9b64a7c910b2c1776cef118db
* Add Vue.createMwApp(), to help with Vue 2->3 migrationRoan Kattouw2021-11-021-0/+65
| | | | | | | | | | | | | | | | | | | | | | | This will allow code that mounts components to be written in a way that will keep working across the Vue 2->3 migration: var RootComponent = require( './RootComponent.vue' ), store = require( './store.js' ); // if using Vuex Vue.createMwApp( RootComponent ) .use( store ) // if using Vuex .mount( '#foo' ); While we're still using Vue 2, createMwApp() will return something that pretends to be an app object, with support for .use() and .mount(). Once we move to Vue 3, createMwApp() will remain, as a wrapper around Vue.createApp() that adds in the i18n plugin and the error logger. Migrating to this API won't be required immediately, since the change upgrading Vue from v2 to v3-compat will include a compatibility wrapper for the old calling style. Bug: T251974 Change-Id: Ib3ef9b88547b43c566abb007cde08a27baf2b7a4
* Vue: Split off error logger into its own pluginRoan Kattouw2021-09-162-16/+26
| | | | Change-Id: Idbbaf2a5fb174aabefa9206d889c62c71846ac5f
* mediawiki.api: Move example doc from constructor to @class blockTimo Tijhof2021-08-241-2/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | For 99% of JS classes, there is no constructor description and instead the class/constructor are defined together followed by both `@class` and `@constructor` in the same block. These are interpreted as the description belonging to the class and prominently displayed in the documentation. For the very rare cases where a constructor has its own description, this must follow the tag rather than preceed it. This makes sense when thinking about it in terms of how classes are usually defined (above the constructor, and thus the space above `@constructor` already belongs to `@class`). This has the unfortunate side-effect, however, that when a constructor is documented on its own, that any text above `@constructor` is ignored, as happened with mw.Api. But, as so often with strict documentation warnings, it helped uncover a mistake. The text here is quite useful and not really specific to the constructor and more broadly useful for the module as a whole, as such I moved it to the class block. Also: * Clean up the code by bringing the class and constructor definition back together. * Fix warning about invalid internal reference: > Warning: /resources/src/mediawiki.api/index.js:3: {@link https://…} The `@see` tag is only valid when referring to another index entity. There were three other uses of `@see` with a URL in core, but only in `@ignore`-ed code, which this commit fixes at the same time. Follows-up a28b76abe9513c7a121490785e4606eee51c1f17. * Use local `var` declarion for `promises`, since "one-var" style is no longer current. Change-Id: I2d4f8b99c2896d4e1af50956c9faa8b36344884e
* vue: Log component errorsSam Smith2021-02-091-0/+16
| | | | | | | | | | | | | | Log errors in Vue.js components to: - Any subscriber of the error.vue analytics event topic. On the Wikipedias, for example, these events make their way to Wikimedia's Logstash instance via EventGate; and - The console, via mw.log.error(), which is the default behavior of the Vue.js runtime Bug: T249826 Change-Id: Ie9975b0d719bc84863819a398b51722d306483dc
* Revert "vue: Log component errors"Phuedx2020-12-171-17/+0
| | | | | | | | This reverts commit f44a2724883939e1f54f5e524f96cf7487686244. Reason for revert: The supporting patch, Icdb5ea46, was reverted. Please see that patch for additional context and discussion. Change-Id: I76cdc3f7accf7dad792c8a89952da575cee361aa
* vue: Log component errorsjdlrobson2020-12-111-0/+17
| | | | | | | | | | | | | | Log errors in Vue.js components to: - The console via console.error(), the default behavior of the Vue.js runtime; and - Any subscriber of the global.error analytics event topic. On the Wikipedias, for example, global.error analytics events make their way to Wikimedia's Logstash instance via EventGate. Bug: T249826 Change-Id: I3038e88ac82992bf50e966f52cc800626b020860
* Merge "vue: Add support for parameters to the i18n plugin"jenkins-bot2020-05-041-5/+36
|\
| * vue: Add support for parameters to the i18n pluginRoan Kattouw2020-04-131-5/+36
| | | | | | | | | | | | | | | | This adds support for: - v-i18n-html:message-key="[ 'param1', 'param2' ]" - v-i18n-html="$i18n( 'message-key', [ 'param1', 'param2' ] )" Change-Id: I225a485afc5a9198bc89ab52c7915c14d7a4aa39
* | Merge "vue: Make v-i18n-html reactive"jenkins-bot2020-04-151-11/+9
|\|
| * vue: Make v-i18n-html reactiveRoan Kattouw2020-04-131-11/+9
| | | | | | | | | | | | | | | | | | | | It only listened to 'bind', but not 'update', so changes to parameters (or message keys for that matter) did not cause the UI to update. Vue provides a shorthand where just passing a function rather than an object with listeners does what you mean, so use that. Change-Id: Id1311f7352d59b6db421dbb2395f53cca4f7db55
* | Add Vuex (v3.1.3)Roan Kattouw2020-04-141-0/+9
|/ | | | | | | Requires a wrapper file to make module.exports work, just like momentjs does. Also call Vue.use( Vuex ) in the wrapper file. Change-Id: I883d9531d13faa11bb630b27437bc6272d0bc134
* Revert "build: Linting for .vue files"Catrope2020-03-301-3/+5
| | | | | | | | | This reverts commit f1eaa06d5e2222f3a94dc269977cccfb6e891a25. Reason for revert: accidentally allowed ES6 syntax. Looking for a way to redo this that doesn't break our linting as badly. Change-Id: I78974b97001bdbea9aff5717c69d71b8a2582ade
* Add Vue i18n pluginRoan Kattouw2020-02-132-0/+64
A simple plugin that connects to mw.message. Supports <p>{{$i18n('msgkey', param1, param2)}}</p> for text, and <p v-i18n-html:msgkey></p> for HTML messages. Change-Id: I47a7cabf758acc8ceed4485993d6d44c4eec5f5c