pure_mode.md

Pure mode

Example

The example is given to illustrate the difference between applyReactInVue and applyPureReactInVue.

The React component AA.
(./react_app/AA)

import React from 'react'

const containerStyle = {
  background: '#91e7fc',
  width: 500,
  margin: 'auto',
  padding: 10,
  display: 'flex',
  justifyContent: 'space-around'
}
export default function AA(props) {
  return <div style={containerStyle}>
    {props.children}
  </div>
}

The Vue example.
Shows the difference in display of AA components using applyReactInVue and applyPureReactInVue respectively.

<template>
  <h3>Pure mode</h3>
  <AAWithPure>
    <div class="flex-sub">A</div>
    <div class="flex-sub">B</div>
    <div class="flex-sub">C</div>
  </AAWithPure>
  <br/>
  <h3>Normal mode</h3>
  <AAWithNormal>
    <div class="flex-sub">A</div>
    <div class="flex-sub">B</div>
    <div class="flex-sub">C</div>
  </AAWithNormal>
</template>

<script setup>
import { applyPureReactInVue, applyReactInVue } from 'veaury'
// React component AA
import AAReact from './react_app/AA'

// Children and slots in the component will be rendered completely as pure ReactNode
const AAWithPure = applyPureReactInVue(AAReact)
const AAWithNormal = applyReactInVue(AAReact)

</script>

<style scoped>
.slot {
  background: aquamarine;
  padding: 10px;
  margin: 10px;
}
.flex-sub {
  width: 50px;
  height: 50px;
  background: dodgerblue;
  line-height: 50px;
  margin: 5px;
}
</style>

Preview

Why does it behave like this?

applyPureReactInVue will directly convert VNode into ReactNode, and a new container will be created when Vue components are encountered, while applyReactInVue will not do any conversion processing on VNode, but will create a container to render VNode uniformly.