Shortcodes in hydrate client component (static content in hydrated components)

Hi,

I am trying to do translation. I’d like to replace all all id’s to translated string. I did an helper which generate id’s and can add additional data.

<h2 class="vf-h2 center">{T.gST('convert.how-use.head', `How does it work?`)}</h2>

is generated to

<h2 class="vf-h2 center">__t__convert.how-use.head:eyJkZWZhdWx0IjoiSG93IGRvZXMgaXQgd29yaz8ifQ==</h2>

then it is replaced via html hook (there are adicionalita data for example variable for passing to translation) to final string.

Everything works in static components. But I do not known how to add static content into hydrate component (hydrate-client={{}}). It could be nice to apply shortcodes replace function to all components before there is anything to do (it will replace all shortcodes in all components). Or add hook beforeComponentCompiled, then users will be able to do some string replace.

Or do you have idea how to add static content into hydrated component during compiling (in my case replace translation id’s to translated text)?

Thank you.

[kiuKisas]

I think the correct way is to pass the content of your shortcode into your hydrate component. Like this: Route component

<script lang="ts">
  import Clock from '../../components/worldtime/Clock.svelte';

  const content = helpers.shortcode({ name: 'simple', props: { background: 'blue' }, content: 'Inner content' })
  export let helpers;
</script>

<Clock hydrate-client={{ content }} hydrate-options={{ preload: true }} />

Clock svelte

<script lang="ts">
  import { onMount } from 'svelte';

  export let content;

  let time = new Date();

  onMount(() => {
    const interval = setInterval(() => {
      time = moment().tz('America/Los_Angeles').format();
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  });
</script>

{@html content}

<p>{time}</p>

[Fanda36]

@nickreese I tried helpers.shortcode first. But I can not find a way how to use it in included components.

Route component

<script lang="ts">
  import Clock from '../../components/worldtime/Clock.svelte';

  export let helpers;
</script>

<!-- ROOT COMPONENT THIS WORKS -->
{@html helpers.shortcode({ name: 'simple', props: { background: 'blue' }, content: 'Inner content' })}

<Clock hydrate-client={{ helpers }} hydrate-options={{ preload: true }} />

Clock.svelte

<script lang="ts">
  import { onMount } from 'svelte';

  export let helpers;

  let time = new Date();

  onMount(() => {
    const interval = setInterval(() => {
      time = moment().tz('America/Los_Angeles').format();
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  });
</script>

<!-- NOT WORKING -->
{@html helpers.shortcode({ name: 'simple', props: { background: 'blue' }, content: 'Inner content' })}

<p>{time}</p>

/worldtime/ [
  TypeError: helpers.shortcode is not a function
      at /home/fanda/Documents/Vyvoj/frontend/___ELDER___/compiled/Clock-26f12bb3.js:7287:11
      at $$render (/home/fanda/Documents/Vyvoj/frontend/___ELDER___/compiled/index-0c372904.js:1343:22)
      at render (/home/fanda/Documents/Vyvoj/frontend/___ELDER___/compiled/index-0c372904.js:1351:26)
      at /home/fanda/Documents/Vyvoj/frontend/node_modules/@elderjs/elderjs/build/utils/svelteComponent.js:23:44
      at Object.mountComponentsInHtml [as default] (/home/fanda/Documents/Vyvoj/frontend/node_modules/@elderjs/elderjs/build/partialHydration/mountComponentsInHtml.js:46:77)
      at Object.templateComponent (/home/fanda/Documents/Vyvoj/frontend/node_modules/@elderjs/elderjs/build/utils/svelteComponent.js:36:55)
      at buildPage (/home/fanda/Documents/Vyvoj/frontend/node_modules/@elderjs/elderjs/build/utils/Page.js:43:40)
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async Object.run (/home/fanda/Documents/Vyvoj/frontend/node_modules/@elderjs/elderjs/build/hooks/index.js:83:34)
      at async /home/fanda/Documents/Vyvoj/frontend/node_modules/@elderjs/elderjs/build/utils/prepareRunHook.js:46:44
]

Clock-26f12bb3.js

	if ($$props.helpers === void 0 && $$bindings.helpers && helpers !== void 0) $$bindings.helpers(helpers);

	return `
${helpers.shortcode({            <------------- error Clock-26f12bb3.js:7287
		name: "simple",
		props: { background: "blue" },
		content: "Inner content"
	})}

<p>${index.escape(time)}</p>`;
});