client.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. /** Test package using the published registration protocol, locale and slots. */
  2. window.__ModuleLoader__.load({
  3. id: '@fixture/live-client',
  4. factory(require) {
  5. const React = require('react')
  6. const style = document.createElement('style')
  7. style.dataset.plugin = '@fixture/live-client'
  8. style.textContent = '[data-live-client] { color: rgb(12, 34, 56); position: absolute; bottom: 20px; right: 20px; }'
  9. document.head.append(style)
  10. return {
  11. inject: ['slots', 'locale'],
  12. apply(ctx) {
  13. const counters = document.documentElement.dataset
  14. counters.liveMounts = String(Number(counters.liveMounts ?? 0) + 1)
  15. ctx.effect(() => ctx.locale.register('fixtureLive', {
  16. zh: { active: '动态插件已启用', configSummary: '示例配置项', configForm: '动态插件配置', configField: '问候语', configSave: '保存' },
  17. en: { active: 'Live plugin enabled', configSummary: 'An example setting', configForm: 'Live plugin configuration', configField: 'Greeting', configSave: 'Save' },
  18. }))
  19. ctx.slots.inject('shell.overlay', () => ctx.slots.register({
  20. name: 'shell.overlay', id: 'fixture-live-client', locale: 'fixtureLive',
  21. }, ({ t }) => React.createElement('div', { 'data-live-client': '' }, t('active'))))
  22. // The configuration of this bundle's one row, as the Plugins page renders it on the row's own page.
  23. ctx.slots.inject('plugins.row.config', () => ctx.slots.register({
  24. name: 'plugins.row.config', key: '@fixture/live-client#fixture-live-client', locale: 'fixtureLive',
  25. }, ({ t, view }) => view === 'summary'
  26. ? t('configSummary')
  27. : React.createElement('form', {
  28. 'data-live-config': '',
  29. 'aria-label': t('configForm'),
  30. onSubmit: (event) => {
  31. event.preventDefault()
  32. counters.liveSaves = String(Number(counters.liveSaves ?? 0) + 1)
  33. },
  34. },
  35. React.createElement('label', null, t('configField'), React.createElement('input', { name: 'greeting', defaultValue: 'hello' })),
  36. React.createElement('button', { type: 'submit' }, t('configSave')))))
  37. ctx.effect(() => {
  38. const ping = () => { counters.liveHits = String(Number(counters.liveHits ?? 0) + 1) }
  39. window.addEventListener('dsh-fixture-ping', ping)
  40. return async () => {
  41. window.removeEventListener('dsh-fixture-ping', ping)
  42. await Promise.resolve()
  43. counters.liveDisposals = String(Number(counters.liveDisposals ?? 0) + 1)
  44. }
  45. })
  46. },
  47. }
  48. },
  49. })