@vnxjs/components-react

Vnmf component library (React version).

@vnxjs/components uses the Stencil framework based on Web Components for development, there will be compatibility problems on some mobile phones:

• Multi-line text truncation fails
• On some Android machines (mostly OV), the style visibility switch fails, resulting in a white screen on the page

Therefore, developers can use this package to replace the H5 component library of the React framework to improve compatibility.

Instructions

Vnmf project

This feature has not been released yet, and needs to be linked to local use.

1. Download the Vnmf repository and switch branches

git clone https://github.com/vnpaycode/vnmf.git
cd vnmf
git checkout components-compat

2. Install, compile

yarn
yarn run bootstrap
yarn run build

3. Link related dependencies to the global

cd packages/vnmf-webpack-runner
npm link
cd ../packages/vnmf-loader
npm link
cd ../packages/vnmf-components-react
npm link

project

1. Set the project configuration h5.useHtmlComponents

//config/index.js
module.exports = {
  h5: {
    useHtmlComponents: true
  }
}

2. Link related dependencies to local

npm link @vnxjs/webpack-runner
npm link @vnxjs/vnmf-loader
npm link @vnxjs/components-react

3. Start compiling

vnmf build --type h5 --watch

Transformation method

Currently, only View, Text, and Swiper components are adapted. Developers can adapt the components according to the following transformation methods:

Copy the corresponding components of Vnmf v2 and modify them

Copy the corresponding components of Vnmf2 from here to vnmf/packages/vnmf-components-react/ src/components directory.

The components that need to be modified are:

1. Change Nerv related references to react
2. Change the file to .tsx and add Typings (optional)

Modify the reference entry, rollup configuration

Add the export of the component in the entry file:

// vnmf-components/react/index
export { xxxx } from './dist/xxx'

Modify the rollup configuration and add input:

// vnmf-components/rollup.config.js
export default {
  input: {
    'xxx/index': 'src/components/xxx/index.[jsx|tsx]'
  }
}

Compile the component library

cd vnmf/packages/vnmf-components-react
npm run dev
# Refresh the browser when done