Consommation par chaque plateforme

Consommation par chaque plateforme

Le core de share est en fonctions pures, sans aucune réactivité. Les bibliothèques UI de chaque plateforme n’ont qu’une chose à faire : lier la sortie des fonctions pures au template, et renvoyer les entrées de l’utilisateur aux fonctions pures. Voici la forme du câblage sur les quatre plateformes.

Le motif commun

Le câblage de chaque composant suit toujours ces trois étapes :

1. la côté framework garde un state (ref / useState / data réactif)
2. l’utilisateur interagit → on appelle la fonction pure core pour calculer le nouveau state → on l’écrit en retour
3. dans le template, on appelle les fonctions pures de classes / de paquets d’attributs aria pour le rendu

// côté core (indépendant des frameworks, ce dépôt)
export function getSwitchClasses(state: LhSwitchState): string
export function getSwitchAria(state: LhSwitchState): Record<string, string>
export function toggleSwitch(state: LhSwitchState, checked: boolean): LhSwitchState

Vue3 (lh-ui-plus)

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getSwitchClasses, getSwitchAria, toggleSwitch } from '@lh-ui/share/core/switch'

const checked = ref(false)
const classes = computed(() => getSwitchClasses({ checked: checked.value, disabled: false }))
const aria = computed(() => getSwitchAria({ checked: checked.value }))

function onToggle() {
  checked.value = toggleSwitch({ checked: checked.value }, !checked.value).checked
}
</script>

<template>
  <button :class="classes" v-bind="aria" @click="onToggle">
    <span class="lh-switch__handle" />
  </button>
</template>

<style lang="scss">
@use '@lh-ui/share/styles/switch';
</style>

Les styles sont injectés globalement en side-effect à l’entrée de la bibliothèque ; en général, on n’a pas besoin de les importer soi-même dans le composant (voir Stratégies d’injection).

Vue2 (lh-ui-vue2)

<script lang="ts">
import { getSwitchClasses, getSwitchAria, toggleSwitch } from '@lh-ui/share/core/switch'

export default {
  name: 'LhSwitch',
  data() {
    return { checked: false }
  },
  computed: {
    classes() {
      return getSwitchClasses({ checked: this.checked, disabled: false })
    },
    aria() {
      return getSwitchAria({ checked: this.checked })
    },
  },
  methods: {
    onToggle() {
      this.checked = toggleSwitch({ checked: this.checked }, !this.checked).checked
    },
  },
}
</script>

Les styles sont à importer à la demande par l’utilisateur :

import '@lh-ui/vue2/theme.css'
import '@lh-ui/vue2/style/switch'

React (lh-ui-react)

useMemo remplace computed ; les changements de state déclenchent naturellement un nouveau rendu, ce qui est réactif par essence :

import { memo, useMemo, useState } from 'react'
import {
  getSwitchClasses,
  getSwitchAria,
  toggleSwitch,
} from '@lh-ui/share/core/switch'
import '@lh-ui/react/style/switch'

export const LhSwitch = memo(function LhSwitch() {
  const [checked, setChecked] = useState(false)

  const classes = useMemo(
    () => getSwitchClasses({ checked, disabled: false }),
    [checked],
  )
  const aria = useMemo(() => getSwitchAria({ checked }), [checked])

  return (
    <button
      type="button"
      className={classes}
      {...aria}
      onClick={() => setChecked((c) => !c)}
    >
      <span className="lh-switch__handle" />
    </button>
  )
})

uniapp (lh-ui-uniapp)

Sur uniapp, on ne peut pas lier librement des attributs aria sur <view> / <text> : la sortie de getSwitchAria est filtrée côté mini-programme ; elle reste utilisable sur app / h5. La liaison des classes se fait via la chaîne ou le tableau :class :

<template>
  <view :class="classes" @tap="onToggle">
    <view class="lh-switch__handle" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getSwitchClasses, toggleSwitch } from '@lh-ui/share/core/switch'

const checked = ref(false)
const classes = computed(() => getSwitchClasses({ checked: checked.value }))
function onToggle() {
  checked.value = !checked.value
}
</script>

Internationalisation : un seul emitter, quatre abonnements

LhLocale est un pur émetteur d’événements : version s’incrémente à chaque changement de langue. Chaque plateforme le convertit en son propre signal de nouveau rendu :

Plateforme	Câblage
vue2 / vue3 / uniapp	ref(lhlocale.version) + lhlocale.subscribe(v => version.value = v)
react	useSyncExternalStore(lhlocale.subscribe, () => lhlocale.version)

import { lhlocale } from '@lh-ui/share/locales'

lhlocale.setLocale('en-US')          // changement : version s'incrémente et diffuse
const text = lhlocale.t('input.placeholder')

Une démonstration en direct est dans la référence d’internationalisation.

Liaison locale : modifier le code source de share prend effet immédiatement

Avec la disposition familiale, les configurations dev / test de chaque bibliothèque UI aliasent vers lh-ui-share/ au même niveau : en dev, ce sont les sources TS / SCSS qui sont utilisées, pas les artefacts de build. Un nouveau fichier profond (par exemple core/foo/bar.ts) est immédiatement disponible en dev, mais sans sync-exports il n’y a pas de clé exports côté npm — avant une release, lancez toujours le pnpm build complet, faute de quoi l’aval obtiendra un MODULE_NOT_FOUND après son pnpm up.