Fix string translations in multiple views and SVG export and theming in SVG draft view (#244)

Fixes #227
Fixes #78

Reviewed-on: https://codeberg.org/freesewing/freesewing/pulls/244
Reviewed-by: Joost De Cock <joostdecock@noreply.codeberg.org>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
Co-committed-by: Jonathan Haas <haasjona@gmail.com>

packages/react/components/Editor/components/MovablePattern.mjs

@@ -13,7 +13,7 @@ export const MovablePattern = ({
   update,
   fitImmovable = false,
   immovable = [],
-  t,
+  strings,
 }) => {
   const svgRef = useRef(null)
   if (!renderProps) return null
@@ -91,7 +91,7 @@ export const MovablePattern = ({
         stackName,
         stack,
         components,
-        t,
+        strings,
         movable: !immovable.includes(stackName),
         layout: layout.stacks[stackName],
         updateLayout,
@@ -161,7 +161,7 @@ export const MovableStack = ({
   stackName,
   stack,
   components,
-  t,
+  strings,
   movable = true,
   layout,
   updateLayout,
@@ -345,7 +345,7 @@ export const MovableStack = ({
     <Group id={`stack-${stackName}`} {...getProps(stack)} ref={stackRef}>
       <Group id={`stack-inner-${stackName}`} ref={innerRef}>
         {[...stack.parts].map((part, key) => (
-          <Part {...{ components, t, part, stackName, settings }} key={key} />
+          <Part {...{ components, strings, part, stackName, settings }} key={key} />
         ))}
       </Group>
       {movable && (

packages/react/components/Editor/components/views/DraftView.mjs

@@ -6,6 +6,9 @@ import { Null } from '@freesewing/react/components/Null'
 import { ZoomablePattern } from '../ZoomablePattern.mjs'
 import { PatternLayout } from '../PatternLayout.mjs'
 import { DraftErrorHandler } from './DraftErrorHandler.mjs'
+import { i18nPlugin } from '@freesewing/plugin-i18n'
+import { themePlugin } from '@freesewing/plugin-theme'
+import { translateStrings } from '../../../Pattern/index.mjs'
 
 /**
  * The draft view allows users to tweak their pattern
@@ -39,7 +42,13 @@ export const DraftView = ({ Design, state, update, config, plugins = [], PluginO
   /*
    * First, attempt to draft
    */
-  const { pattern, failure, errors } = draft(Design, state.settings, plugins)
+  const { pattern, failure, errors } = draft(Design, state.settings, plugins, (pattern) => {
+    if (state.ui?.renderer === 'svg') {
+      const strings = bundlePatternTranslations(pattern.designConfig.data.id)
+      pattern.use(i18nPlugin, (t) => translateStrings([t], strings))
+      pattern.use(themePlugin)
+    }
+  })
 
   /*
    * Create object holding strings for translation

packages/react/components/Editor/components/views/ExportView.mjs

@@ -1,6 +1,8 @@
 // Dependencies
 import { linkClasses, horFlexClasses, patternUrlFromState } from '@freesewing/utils'
 import { handleExport } from '../../lib/export/index.mjs'
+import { translateStrings } from '../../../Pattern/index.mjs'
+import { bundlePatternTranslations } from '../../lib/index.mjs'
 // Hooks
 import React, { useState } from 'react'
 // Components
@@ -33,6 +35,8 @@ export const ExportView = (props) => {
     b: `${site}${patternUrlFromState(state, false)}`,
   }
 
+  const translations = bundlePatternTranslations(props.design)
+
   const exportProps = {
     design: props.design,
     Design: props.Design,
@@ -42,6 +46,7 @@ export const ExportView = (props) => {
     setFormat,
     startLoading: update.startLoading,
     stopLoading: update.stopLoading,
+    t: (string) => translateStrings([string], translations),
   }
 
   return (

packages/react/components/Editor/components/views/LayoutView.mjs

@@ -3,7 +3,7 @@ import React from 'react'
 import { defaultPrintSettings } from '../../lib/export/index.mjs'
 import { tilerPlugin } from '../../lib/export/plugin-tiler.mjs'
 import { get } from '@freesewing/utils'
-import { draft } from '../../lib/index.mjs'
+import { bundlePatternTranslations, draft } from '../../lib/index.mjs'
 // Components
 import { PatternLayout } from '../PatternLayout.mjs'
 import { MovablePattern } from '../MovablePattern.mjs'
@@ -25,6 +25,11 @@ export const LayoutView = (props) => {
    */
   const { pattern, failure, errors } = draft(Design, settings, [tilerPlugin(pageSettings)])
 
+  /*
+   * Create object holding strings for translation
+   */
+  const strings = bundlePatternTranslations(pattern.designConfig.data.id)
+
   const output = (
     <>
       <DraftErrorHandler {...{ failure, errors }} />
@@ -33,6 +38,7 @@ export const LayoutView = (props) => {
           update,
           renderProps: pattern.getRenderProps(),
           immovable: ['pages'],
+          strings: strings,
           state,
         }}
       />

packages/react/components/Editor/lib/editor.mjs

@@ -52,9 +52,10 @@ export const bundlePatternTranslations = (design) => {
  * @param {array} plugins - Any (extra) plugins to load into the pattern
  * @return {object} data - The drafted pattern, along with errors and failure data
  */
-export function draft(Design, settings, plugins = []) {
+export function draft(Design, settings, plugins = [], pluginsHook = false) {
   const pattern = new Design(settings)
   for (const plugin of plugins) pattern.use(plugin)
+  if (pluginsHook) pluginsHook(pattern)
   const data = {
     // The pattern
     pattern,

packages/react/components/Editor/lib/export/index.mjs

@@ -36,7 +36,7 @@ const themedPattern = (Design, settings, overwrite, format, t) => {
 
   // add the theme and translation to the pattern
   pattern.use(themePlugin, { stripped: format !== 'svg', skipGrid: ['pages'] })
-  pattern.use(pluginI18n, (key) => key)
+  pattern.use(pluginI18n, t)
 
   return pattern
 }