Page MenuHomePhabricator

Add Codex/Vue to PIRS prototype
Closed, ResolvedPublic2 Estimated Story Points

Description

As a developer, I want to use the codex/vue packages in the PIRS prototype. https://www.mediawiki.org/wiki/Codex

  • Codex/Vue was added to project. Added the below devDependencies to the prototype.
"devDependencies": {
  "@babel/preset-env": "^7.20.2",
  "@vue/test-utils": "^2.2.10",
  "@vue/vue3-jest": "^29.2.2",
  "@wikimedia/codex": "^0.6.0",
  "@wikimedia/codex-design-tokens": "^0.6.0",
  "@wikimedia/codex-icons": "^0.6.0",
  "@wikimedia/mw-node-qunit": "^6.4.1",
  "babel-core": "^6.26.3",
  "eslint-config-wikimedia": "^0.9.0",
  "grunt": "1.0.3",
  "grunt-banana-checker": "0.6.0",
  "grunt-eslint": "21.0.0",
  "grunt-jsonlint": "1.1.0",
  "grunt-stylelint": "0.10.1",
  "stylelint-config-wikimedia": "0.5.0",
  "vue": "^3.2.47"
}
  • Add codex design elements to PIRS special page.

Screenshot 2023-02-24 at 9.14.47 AM.png (1×2 px, 194 KB)

App.vue

<template>
	<div class="cdx-docs-card-group-with-thumbnails">
		<p>How to report:</p>
		<cdx-card
			v-for="card in cards"
			:key="card.pageid"
			class="cdx-docs-card-group-with-thumbnails__card"
			:url="card.url"
			:force-thumbnail="true"
			:thumbnail="card.thumbnail"
		>
			<template #title>
				{{ card.title }}
			</template>
			<template #description>
				{{ card.description }}
			</template>

		</cdx-card>
	</div>
</template>


<script>
const codex = require( '@wikimedia/codex' ),
	Vue = require( 'vue' );

const cards = [
	{
		pageid: 3613583,
		url: '#',
		title: 'Reporting Solution #1',
		description: 'Lorem Ipsem',
		thumbnail: {
			width: 150,
			height: 113,
			url: '//upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Golden_Gate_-_Lands_End_-_Point_Lobos_2009.jpg/150px-Golden_Gate_-_Lands_End_-_Point_Lobos_2009.jpg'
		},
		distance: '170m'
	},
	{
		pageid: 176931,
		url: '#',
		title: 'Reporting Solution #2',
		description: 'Lorem Ipsem',
		thumbnail: {
			width: 150,
			height: 146,
			url: '//upload.wikimedia.org/wikipedia/commons/thumb/8/84/Internet_Archive_logo_and_wordmark.svg/150px-Internet_Archive_logo_and_wordmark.svg.png'
		},
		distance: '300m'
	},
	{
		pageid: 11002203,
		url: '#',
		title: 'Reporting Solution #3',
		description: 'Lorem Ipsem',
		distance: '350m'
	}
];

// @vue/component
module.exports = exports = Vue.defineComponent( {
	name: 'Pirs',
	components: {
		CdxCard: codex.CdxCard,
		CdxIcon: codex.CdxIcon,
	},
	setup() {
		return {
			cards,
		}
	},
	props: {},
	computed: {},
	methods: {}
} );
</script>

<style lang="less">


.cdx-docs-card-group-with-thumbnails {
	p {
		margin-top: 0;
		font-weight: 50;
	}

	// The application implementing Cards must handle Card group layout styles.
	&__card {
		margin-bottom: 1.5em;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
  • What documentation is available?

Event Timeline

I have included an example of App.Vue that uses the card layout for SpecialPage:Pirs. The biggest takeaway IMO was to use the latest implementation of the Resource loader that uses package files definition rather that the scripts definition. The package files way better handles .vue files. I also used the newer Hooks implementation as well.

ResourceModules before:

"ResourceModules": {
      "ext.pirs": {
          "scripts": [
              "ext.pirs.js"
          ],
          "styles": [
              "ext.pirs.css"
          ],
          "messages": [
              "pirs",
              "pirs-desc",
              "special-pirs-title",
              "special-pirs-intro"
          ],
          "dependencies": []
      }
  },

ResourceModules After:

"ResourceModules": {
		"resources": {
			"packageFiles": [
				"resources/ext.pirs.js",
				"resources/App.vue"
			],
			"styles": [
				"resources/ext.pirs.css"
			],
			"messages": [
				"pirs",
				"pirs-desc",
				"special-pirs-title",
				"special-pirs-intro"
			],
			"dependencies": [
				"mediawiki.Uri",
				"mediawiki.jqueryMsg",
				"mediawiki.api",
				"mediawiki.storage",
				"mediawiki.ForeignApi",
				"mediawiki.user",
				"vue",
				"@vue/composition-api",
				"vuex",
				"web2017-polyfills",
				"@wikimedia/codex"
			]
		}
	},
eigyan set the point value for this task to 2.Feb 24 2023, 2:18 PM