Example of using TSX (or JSX) for a component?

[bbugh]

Hi 👋 Lume seems great, thanks for the project!

I've looked through the docs and issues and can't find an example of using TSX as a component without making the entire app as React like the todo example.

1. The docs have an example of using a component from JSX, but no example for creating one. Attempts to create a _component/test_button.tsx (or .jsx) resulted in a page that renders without any errors, but does not render the component.

2. Then I found How to write client side (javascript) code ? #396 which suggested using the esbuild plugin, which I set up

   site.use(esbuild({
     extensions: [".jsx",".tsx"],
   }));

   but now when I attempt to run, I get Component "test_button" not found.

   Stack trace

   Error: Error rendering this page
   - page: /index.njk
       at (https://deno.land/x/[email protected]/core/renderer.ts:133:19)
       at Object.runMicrotasks (ext:core/01_core.js:838:30)
       at processTicksAndRejections (ext:deno_node/_next_tick.ts:53:10)
       at runNextTicks (ext:deno_node/_next_tick.ts:71:3)
       at eventLoopTick (ext:core/01_core.js:189:21)
       at async concurrent (https://deno.land/x/[email protected]/core/utils.ts:165:3)
       at async Renderer.renderPages (https://deno.land/x/[email protected]/core/renderer.ts:119:7)
       at async Site.#buildPages (https://deno.land/x/[email protected]/core/site.ts:615:5)
       at async Site.build (https://deno.land/x/[email protected]/core/site.ts:530:9)
   
   Caused by Template render error: (/Users/username/projects/test-lume/index.njk)
     Error: Component "test_button" not found
       at Object._prettifyError (file:///Users/username/Library/Caches/deno/npm/registry.npmjs.org/nunjucks/3.2.4/src/lib.js:32:11)
       at (file:///Users/username/Library/Caches/deno/npm/registry.npmjs.org/nunjucks/3.2.4/src/environment.js:464:19)
       at Template.root [as rootRenderFunc] (file:///Users/username/Library/Caches/deno/npm/registry.npmjs.org/nunjucks/3.2.4/src/environment.js:527:18)
       at Template.render (file:///Users/username/Library/Caches/deno/npm/registry.npmjs.org/nunjucks/3.2.4/src/environment.js:454:10)
       at (https://deno.land/x/[email protected]/plugins/nunjucks.ts:95:16)
       at NunjucksEngine.render (https://deno.land/x/[email protected]/plugins/nunjucks.ts:94:12)
       at Renderer.render (https://deno.land/x/[email protected]/core/renderer.ts:198:32)
       at Renderer.#renderPage (https://deno.land/x/[email protected]/core/renderer.ts:224:23)
       at (https://deno.land/x/[email protected]/core/renderer.ts:123:51)
   

3. I renamed _components/test_button.tsx to _components/test_button.njk it will print out the literal text of the file, which is just to prove to myself that the file was set up correctly.

Could you provide some guidance for how this should work?

Files

index.njk

{{ comp.test_button() | safe }}

_config.ts

import lume from "lume/mod.ts";
import esbuild from "lume/plugins/esbuild.ts";

const site = lume();

site.use(esbuild({
  extensions: [".jsx",".tsx"],
}));

export default site;

deno.json

{
  "tasks": {
    "lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "npm:react"
  },
  "imports": {
    "lume/": "https://deno.land/x/[email protected]/"
  }
}

_components/test_button.tsx

function onClick() {
  console.log("click happened");
}

export default function ({ text }) {
  return (
    <button className="test-button" onClick={onClick}>
      Click me
    </button>
  )
}

[oscarotero]

The _components folder is not intended for client-side components, but only to be used by the templates at building time. They are similar to _includes but with a couple of differences:

• They not only render HTML but also can export CSS and JavaScript
• They are preloaded so are accesible from the comp variable.

If you want interactive client-side components (with onClick callbaks, etc), you need the esbuild plugin to compile your js code. But the code architecture is up to you (Lume is not a frontend framework).

If you only want to use JSX to generate static HTML, then you can use the JSX or JSX Preact plugins and the _components/test_button.tsx will work.

[bbugh]

Thank you you for the quick reply! Lume not being a frontend framework is exactly why I want to use it. The use case is generating a mostly static site but being able to use a couple of custom components taking advantage of their ease of creating and testing. It sounds like Lume is almost a fit for this but not quite. I wonder if I could use something like lit-html to fit into the lume model in a better way.

I think using the name "component" definitely increases the confusion. Perhaps making distinction in the docs that using JSX for pages/components is solely a render-time function and not a client-side component would help.

[oscarotero]

Yeah, maybe the name is confusing. I'll update the documentation to make it more clear. Thanks for the feedback.
For simple cases, I use to create web components. It's standard, fast and works fine in any browsers.
Lit is a good option if you need something more ergonomic, and with esbuild plugin it should be easy to use it in Lume.