From 7ea087a26792659ed9d49a8a40e95f1553e47a24 Mon Sep 17 00:00:00 2001 From: Lucas Werkmeister Date: Tue, 10 Sep 2024 17:22:03 +0200 Subject: [PATCH] Set up Codex MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This sets up Codex components and design tokens so we can start using them. No actual components are migrated to Codex yet. Components from Wikit can be used directly in our own components. The build is set up so that, when Special:NewLexeme is used within MediaWiki, Codex will be imported from there; this means that our build should get substantially smaller once we don’t need Wikit anymore. In the dev entry point, Codex comes from node_modules/ as expected. (Notice that the styles are only imported in index.html, so they won’t be included in our build output either. As far as I could tell, Vite doesn’t have a CSS equivalent of `external` JS packages in vite.config.ts yet.) When MediaWiki upgrades to a new Codex version, Special:NewLexeme will use the new versions of the Codex components (and their styles) immediately. For the design tokens from Codex, we will start by directly importing them into each component that uses them, where they will end up being included (inlined) in the build. This means that design tokens used in our own components will be outdated after a MediaWiki upgrade to a new Codex version until we update this repository and push a new build to WikibaseLexeme. We will continue to investigate whether we can use them in some way that will automatically update them instead. (The solution will almost certainly involve using the tokens via CSS variables, but currently only a subset of the design tokens is available as CSS variables, and even then this depends on the skin. We might be able to get more variables added by MediaWiki, or we might add the variables in WikibaseLexeme ourselves.) Bug: T369505 --- index.html | 2 + package-lock.json | 152 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 + vite.config.ts | 2 +- 4 files changed, 157 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 08ff8706..e84d4edd 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,8 @@

New Lexeme

import DevLexemeCreator from './src/data-access/DevLexemeCreator'; import DevLangCodeRetriever from './src/data-access/DevLangCodeRetriever'; import LanguageItemSearcher from './src/data-access/LanguageItemSearcher'; + import '@wikimedia/codex/dist/codex.style.css'; + import '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css'; const config = { rootSelector: '#app', diff --git a/package-lock.json b/package-lock.json index bdbb6a0b..f54b1780 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.1", "license": "GPL-2.0-or-later", "dependencies": { + "@wikimedia/codex": "^1.12.0", + "@wikimedia/codex-design-tokens": "^1.12.0", "@wmde/wikibase-datamodel-types": "^0.2.0", "@wmde/wikit-tokens": "^3.0.0-alpha.12", "@wmde/wikit-vue-components": "^3.0.0-alpha.12", @@ -1232,6 +1234,63 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "dependencies": { + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, + "node_modules/@floating-ui/vue": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz", + "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==", + "dependencies": { + "@floating-ui/dom": "^1.6.1", + "@floating-ui/utils": "^0.2.1", + "vue-demi": ">=0.13.0" + } + }, + "node_modules/@floating-ui/vue/node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -3138,6 +3197,40 @@ } } }, + "node_modules/@wikimedia/codex": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.12.0.tgz", + "integrity": "sha512-tqevWQFnVEunvElPQ+adHHU2WPfNVkDw0JAfQk90uVb1haoF1XwaXwpF4/mU5WqcX97FT+j7mHjXwgm19uwWLQ==", + "dependencies": { + "@floating-ui/vue": "1.0.6", + "@wikimedia/codex-icons": "1.12.0" + }, + "engines": { + "node": ">=18", + "npm": ">=7.21.0" + }, + "peerDependencies": { + "vue": "3.4.27" + } + }, + "node_modules/@wikimedia/codex-design-tokens": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.12.0.tgz", + "integrity": "sha512-b4hB4Dz16zs7bccU2Ezu3CVD82BH6xNIn7bV0EZsDBcY9s31wi1vNDB/4yqFLhY/SR5td18PgmceLPnqF33M5Q==", + "engines": { + "node": ">=18", + "npm": ">=7.21.0" + } + }, + "node_modules/@wikimedia/codex-icons": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.12.0.tgz", + "integrity": "sha512-HkTIA/cpCF9dNLaK6QaVuqFFEqeJHPafuGclzjei9oeNCUPox+vWOxuORUTjNlLJgh5MN1n9SuuEbifskvsXKA==", + "engines": { + "node": ">=18", + "npm": ">=7.21.0" + } + }, "node_modules/@wmde/eslint-config-wikimedia-typescript": { "version": "0.2.12", "resolved": "https://registry.npmjs.org/@wmde/eslint-config-wikimedia-typescript/-/eslint-config-wikimedia-typescript-0.2.12.tgz", @@ -15467,6 +15560,46 @@ "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==", "dev": true }, + "@floating-ui/core": { + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz", + "integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==", + "requires": { + "@floating-ui/utils": "^0.2.7" + } + }, + "@floating-ui/dom": { + "version": "1.6.10", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz", + "integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==", + "requires": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.7" + } + }, + "@floating-ui/utils": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz", + "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==" + }, + "@floating-ui/vue": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz", + "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==", + "requires": { + "@floating-ui/dom": "^1.6.1", + "@floating-ui/utils": "^0.2.1", + "vue-demi": ">=0.13.0" + }, + "dependencies": { + "vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "requires": {} + } + } + }, "@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -16884,6 +17017,25 @@ "tsconfig": "^7.0.0" } }, + "@wikimedia/codex": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.12.0.tgz", + "integrity": "sha512-tqevWQFnVEunvElPQ+adHHU2WPfNVkDw0JAfQk90uVb1haoF1XwaXwpF4/mU5WqcX97FT+j7mHjXwgm19uwWLQ==", + "requires": { + "@floating-ui/vue": "1.0.6", + "@wikimedia/codex-icons": "1.12.0" + } + }, + "@wikimedia/codex-design-tokens": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.12.0.tgz", + "integrity": "sha512-b4hB4Dz16zs7bccU2Ezu3CVD82BH6xNIn7bV0EZsDBcY9s31wi1vNDB/4yqFLhY/SR5td18PgmceLPnqF33M5Q==" + }, + "@wikimedia/codex-icons": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.12.0.tgz", + "integrity": "sha512-HkTIA/cpCF9dNLaK6QaVuqFFEqeJHPafuGclzjei9oeNCUPox+vWOxuORUTjNlLJgh5MN1n9SuuEbifskvsXKA==" + }, "@wmde/eslint-config-wikimedia-typescript": { "version": "0.2.12", "resolved": "https://registry.npmjs.org/@wmde/eslint-config-wikimedia-typescript/-/eslint-config-wikimedia-typescript-0.2.12.tgz", diff --git a/package.json b/package.json index 27adfa88..61efcde8 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,8 @@ "node": ">=16" }, "dependencies": { + "@wikimedia/codex": "^1.12.0", + "@wikimedia/codex-design-tokens": "^1.12.0", "@wmde/wikibase-datamodel-types": "^0.2.0", "@wmde/wikit-tokens": "^3.0.0-alpha.12", "@wmde/wikit-vue-components": "^3.0.0-alpha.12", diff --git a/vite.config.ts b/vite.config.ts index 003e3b5e..11cf4453 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,7 +21,7 @@ function getBuildConfig( isAppBuild: boolean ): BuildOptions { formats: [ 'cjs' ], }, rollupOptions: { - external: [ 'vue', 'vuex' ], + external: [ 'vue', 'vuex', '@wikimedia/codex' ], }, }; }