[f7-cli]{v5.0.1}, [vite]{v2.4.4} minify html

Questions
1

hello

is there any way to minify the <template> part of a component ?

i can minify the ‘index.html’ with this plugin:

import { minifyHtml, injectHtml } from 'vite-plugin-html';
export default {
  plugins: [
    framework7(/*params*/),
    minifyHtml(/*params*/),
    injectHtml(/*params*/),
  ]
};

but it doesn’t efect the component files (page.f7)

thank you

2

Not possible at the moment, we had minifier in Webpack loader, but it produced a lot of errors with template literals in HTML, e.g. foo=${someVar}. I can recommend you to move to JSX Router Component | Framework7 Documentation, it is more powerful than templates, and in the end it actually compiles to pure JavaScript which can be greatly minified and compressed

3

thank you

i tried the jsx
it dosen’t compile to pure js the => $h`
i can understand why (the $h`` behavior)

anyawy, jsx should work faster at run time(??)
so i’ll stick with the jsx syntax

here is an example:

export default (props, { $h }) => {
  return () => (
    <div class="page">
      <p>outer</p>
      <p>
        {true && $h`
        <span>inner</span>
        <span>inner</span>
        <span>inner</span>
        <span>inner</span>
        `}
      </p>
    </div>
  )
}

compile to =>

{
  path:"/path/",
  component: (e,{$h:t}) => () =>
    Wa("div",{class:"page"},
      Wa("p",null,"outer"),
      Wa("p",null,t`
        <span>inner</span>
        <span>inner</span>
        <span>inner</span>
        <span>inner</span>
      `)
    )
}
4

You shouldn’t use $h in JSX:

export default (props, { $h }) => {
  return () => (
    <div class="page">
      <p>outer</p>
      {true && (
        <p>
          <span>inner</span>
          <span>inner</span>
          <span>inner</span>
          <span>inner</span>
        </p>
      )}
    </div>
  )
}
5

ok
now i get it
thank you

the syntax is a little bit wired,
especially for variable in string.
but i’ll get used to it

export default () => {
  const cssClass = 'my-class';
  return () => (
    <div class="page">
      {true && (
        <div class={`block ${cssClass}`}>
          <p>text</p>
        </div>
      )}
    </div>
  )
}
6

Yeah, you will get used to it, at least whole React community using it for years without complaining much. And as it is basically just a JS it has a lot of extra features, for example creating reusable parts in place like this:

export default () => {
  const header = (
    <div class="header">
      {/* ... */}
    </div>
  )

  const footer = (
    <div class="footer">
      {/* ... */}
    </div>
  )

  const ListItem = ({ title }) => (
    <li>{title}</li>
  );

  return () => (
    <div class="page">
      {header}
      {[1,2,3].map((number) => (
        <ListItem title={`Item ${number}`} />
      ))}
      {footer}
    </div>
  )
}
7

awesome
i will definitely go with jsx
thank you

one last thing:
with respect to a normal component file (page.f7.html),
is there any positive/negative impact at run time?
[ i’m asking about the actual render (not file size) ]