[Feature]Compile a component to its generated html elements at compile time directly.

[mokeyish]

Compile a component to its generated html elements at compile time directly.

// assume the directive is `Compile`

const MyIcon = (props: { name: string }) => {
  const svg = fetch_from_server(`https://xxx.com/icon/${props.name}.svg`); // results <svg>[name]/<dvg>
  return <>
  <Compile>{svg}</Compile>
</>;
};


const App = () => {
  return <>
  <MyIcon name="smile"/>
  <MyIcon name="laugh"/>
</>;
};

equivalent to

const MyIcon_smile = () => {
  return <>
  <svg>smile</svg>
</>;
};

const MyIcon_laugh = () => {
  return <>
  <svg>laugh</svg>
</>;
};


const App = () => {
  return <>
  <MyIcon_smile />
  <MyIcon_laugh/>
</>;
};

It's a bit like server render，but at compile time.

[snnsnn]

Solid already uses a compiler and its components are compiled to native DOM elements in advance, if that is what you are asking for.

If the fetched content is a static value, you can save it as a file in your dev directory and consume directly or you can write it as a jsx component and import like any other component.

But there are few issues with your code since it does not work as expected because components are loaded syncronously but fetch_from_server is async, meaning when component loads it will not have the svg content yet, since svg variable is static, it will not trigger re-render even after the content is fetched.

So, you need to use a signal with a dummy svg as its initial content. Fetch the actual content and update the signal so that you can trigger re-render.

Another issue is that svg value is string and will be rendered as string, you won't get an svg icon. You need to parse it into HTML:

import { render } from 'solid-js/web';
import { Component } from 'solid-js';

export const Icon: Component<{}> = (props) => {
  const tmp = document.createElement('template');
  tmp.innerHTML = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M13.377 10.573a7.63 7.63 0 0 1-.383-2.38V6.195a5.115 5.115 0 0 0-1.268-3.446 5.138 5.138 0 0 0-3.242-1.722c-.694-.072-1.4 0-2.07.227-.67.215-1.28.574-1.794 1.053a4.923 4.923 0 0 0-1.208 1.675 5.067 5.067 0 0 0-.431 2.022v2.2a7.61 7.61 0 0 1-.383 2.37L2 12.343l.479.658h3.505c0 .526.215 1.04.586 1.412.37.37.885.586 1.412.586.526 0 1.04-.215 1.411-.586s.587-.886.587-1.412h3.505l.478-.658-.586-1.77zm-4.69 3.147a.997.997 0 0 1-.705.299.997.997 0 0 1-.706-.3.997.997 0 0 1-.3-.705h1.999a.939.939 0 0 1-.287.706zm-5.515-1.71l.371-1.114a8.633 8.633 0 0 0 .443-2.691V6.004c0-.563.12-1.113.347-1.616.227-.514.55-.969.969-1.34.419-.382.91-.67 1.436-.837.538-.18 1.1-.24 1.65-.18a4.147 4.147 0 0 1 2.597 1.4 4.133 4.133 0 0 1 1.004 2.776v2.01c0 .909.144 1.818.443 2.691l.371 1.113h-9.63v-.012z"/></svg>`;
  const svg = tmp.content.firstElementChild?.cloneNode(true) as SVGElement;
  return svg
}

export const App = () => {
  return <div><Icon /></div>;
};

render(() => <App />, document.body);

You can get the desired result using an img tag like so:

<img src=`https://xxx.com/icon/${props.name}.svg` />

You can use a compiler plugin to generate static svg icons from dynamic values fetched asynchronously at compile time.

Even if everything works as expected the use case is too narrow to be part of core library because people tend to compile svg files directly into their code through compilers to reduce network traffic. Also you almost never need an svg in its plain form, but with classes and styles etc, so not feasible.

[mokeyish]

Thanks for the explanation, compiling <svg> is just an example.

What I want to talk about is the matter of static compilation. Assuming that the component is determined to be run once, it will not be changed anymore. I hope it will directly solidify a large html template to speedup website loading.

[snnsnn]

#1399