Is it possible to minify html

[andriiradkevych]

I return html and there can be added some <script>code here</script> and <style>code here </style> , can I compress it and minify somehow ? Or I have to find my own solution ? Maybe you can give advice of library which I can use in deno for minify css and js strings

Example of returned style , want it to be compressed in response . Same with <script>

[marvinhagemeister]

Typically HTML minifiers only minify HTML and not other languages like CSS and JavaScript. Fresh already minifies the HTML, but doesn't minify inline stylesheets or scripts at the moment. You can do minify those sections manually by calling into esbuild's transform API before passing it to the JSX.

[andriiradkevych]

Thank you a lot . Hope it will be useful for someone

[andriiradkevych]

@marvinhagemeister tried to use transformSync , and it return The "transformSync" API does not work in Deno . I need sync method, is there any other ways ?

[marvinhagemeister]

Why do you need it to be synchronous?

[andriiradkevych]

import { ComponentType } from 'preact';

export const withStyles = function <P extends object>(
  component: ComponentType<P>
) {
  return (styles: string) => {
    return function ({ ...props }: P) {
      const Component = component;

      return (
        <>
          <style
            dangerouslySetInnerHTML={{
              __html: styles,
            }}
          />
          <Component {...props} />
        </>
      );
    };
  };
};

I have hoc , and when I do it async here , it doesn't work . How I use this hoc is withStyles(Component)(styles), where styles is style string

import { ComponentType } from 'preact';

import { transform } from 'minify';

export const withStyles = function <P extends object>(
  component: ComponentType<P>
) {
  return (styles: string) => {
    return async function ({ ...props }: P) {
      const Component = component;

      const minifiedString = await transform(styles, {
        minify: true,
        sourcemap: false,
        loader: 'css',
      });

      return (
        <>
          <style
            dangerouslySetInnerHTML={{
              __html: minifiedString.code,
            }}
          />
          <Component {...props} />
        </>
      );
    };
  };
};

I mean code like this @marvinhagemeister doesn't work

[marvinhagemeister]

Async components are not supported in Preact, but you can make the high order function async. With the function signature you provided, the styles don't change on every render. So it would be wasteful to re-compress the same styles over and over again anyway. I think you're looking more for something like this:

const withStyles = async <P extends object>(Component: ComponentType<P>, css: string) => {
  const minifed = await transform(css, {
    minify: true,
    sourcemap: false,
    loader: 'css',
  });
  
  const innerHTML = { __html: minified.code }
  
  return (props: P) => {
    return (
      <>
        <style dangerouslySetInnerHTML={innerHTML} />
        <Component {...props} />
      </>
    )
  }
}

// Usage
const MyStyledComponent = await withStyles(Foo, `.foo { color: red }`)

If you still want to still partially apply values you can always wrap it again:

const withStylesForFoo = async (css: string) => withStyles(Foo, css);