Animuz Embed

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Viewing Bundle Size

npx vite-bundle-visualizer

SVGR + SVGO

https://www.npmjs.com/package/vite-plugin-svgr

Import svg with ?react pattern and also use @svgr/plugin-svgo for optimization.

CSS Mangler

Currently we use this tool from sonofmagic for obfuscating TailwindCSS classes:

https://github.com/tailwindlabs/tailwindcss/discussions/11179

This is the instructions to use it:

https://github.com/sonofmagic/tailwindcss-mangle/tree/main/packages/unplugin-tailwindcss-mangle

Use npx tw-patch extract for extracting the css classes.

Somehow this makes the SVGs that we use broken (?) not sure if it is this or SVGO. Solving this is to define the width and height in the CSS, and remove the width and height property of the SVG file itself (or set both to 100%).

TODO

CSS Flash of Unstyled Content (FOUC)

Currently we are having problems with CSS Flickering. So I need to move some of the code to styles instead so it loads first.

Our CSS Flickers because of dynamic imports. However, I don't think that it should be dynamic because we're already know the name of the css to import. I just don't know how to inject the css to the js.

Relative references:

• SO - Wait for CSS to load before JS in React [FOUC]
  This reference looks like something that we are talking about. But I don't know how to implement it in vite.
• SO - Dynamic import vite css

But, since you import your CSS dynamically, there is no way to avoid FOUC. Because the CSS is loaded after JS and after the DOM loaded

Currently we're building with vite as js and css file, but I don't know enough configurations to work around it. vite - How to bundle as a single JS and a single CSS file

One hack to do is SO - Eliminate flash of unstyled content

<style>
  html {
    visibility: hidden;
    opacity: 0;
  }
</style>

Then, at the end of your last .css stylesheet file, set the visibility and opacity styles to 'visible' and '1', respectively:

html {
  visibility: visible;
  opacity: 1;
}

Dev Problems

VIVO Android viewport height is half

Some SO questions also face the same problem

• SO - Wrong window height on android when the HTML website is load
• SO - How do I get viewport height units to work in fullscreen mode in Chrome on Android?