（question）Is there any practical example of purely using CDN?

[oomgomgxx]

Hello, I am a back-end developer, but I don’t know much about front-end engineering technology. I would like to ask if there is a practical case of purely using CDN, because I am observing whether Preact can be integrated with Thymeleaf in SpringBoot.

[rschristian]

Looking for anything beyond this?

https://preactjs.com/guide/v10/getting-started#using-preact-with-htm-and-importmaps

Edit: Usually people want "buildless", hence HTM + CDNs in that example. Is that what you're after, or do you just want the CDN bit (and still compiling JSX in some form)?

[oomgomgxx]

Looking for anything beyond this?

https://preactjs.com/guide/v10/getting-started#using-preact-with-htm-and-importmaps

Edit: Usually people want "buildless", hence HTM + CDNs in that example. Is that what you're after, or do you just want the CDN bit (and still compiling JSX in some form)?

This is indeed what I want, but the example is too simple. Based on the usage in the example, how should I write a reusable component? Or how the component should be stored in a separate js file and then used elsewhere

[rschristian]

Based on the usage in the example, how should I write a reusable component?

App is a component in that example. Probably not one you'd want to use more than once, but you absolutely could. There's no functional difference.

Or how the component should be stored in a separate js file and then used elsewhere

Use standard ES6 imports.

// my-count.js
import { useState } from 'preact/hooks';
import { html } from 'htm/preact';

export function MyCount({ label }) {
  const [count, setCount] = useState(0);

  return html`
    <p>${label}</p>
    <button onClick=${() => setCount(count + 1)}>Current count is: ${count}</button>
  `;
}

<script type="module">
  import { render } from 'preact';
  import { useReducer } from 'preact/hooks';
  import { html } from 'htm/preact';

  import { MyCount } from './my-count.js';

  export function App() {
    const [count, add] = useReducer((a, b) => a + b, 0);

    return html`
      <button onClick=${() => add(-1)}>Decrement</button>
      <input readonly size="4" value=${count} />
      <button onClick=${() => add(1)}>Increment</button>
      <${MyCount} label="1" />
      <${MyCount} label="2" />
    `;
  }

  render(html`<${App} />`, document.body);
</script>

[oomgomgxx]

Based on the usage in the example, how should I write a reusable component?

App is a component in that example. Probably not one you'd want to use more than once, but you absolutely could. There's no functional difference.

Or how the component should be stored in a separate js file and then used elsewhere

Use standard ES6 imports.

// my-count.js
import { useState } from 'preact/hooks';
import { html } from 'htm/preact';

export function MyCount({ label }) {
  const [count, setCount] = useState(0);

  return html`
    <p>${label}</p>
    <button onClick=${() => setCount(count + 1)}>Current count is: ${count}</button>
  `;
}

<script type="module">
  import { render } from 'preact';
  import { useReducer } from 'preact/hooks';
  import { html } from 'htm/preact';

  import { MyCount } from './my-count.js';

  export function App() {
    const [count, add] = useReducer((a, b) => a + b, 0);

    return html`
      <button onClick=${() => add(-1)}>Decrement</button>
      <input readonly size="4" value=${count} />
      <button onClick=${() => add(1)}>Increment</button>
      <${MyCount} label="1" />
      <${MyCount} label="2" />
    `;
  }

  render(html`<${App} />`, document.body);
</script>

thank

[rschristian]

No problem, and if you do have any further questions, our Slack is a great place to get faster answers usually.