Add support for other JSX libraries

[oscarotero]

JSX plugin use React. It would be nice to have other lighter alternatives.

• NanoJSX: https://nanojsx.io/
• Preact: https://preactjs.com/

[Abiti-936]

Also there's solid.js that you should take a look at. https://www.solidjs.com/

[oscarotero]

Added NanoJSX to the experimental plugins repo

[jrson83]

Added Preact JSX to the experimental plugins repo.

[jrson83]

Also there's solid.js that you should take a look at. https://www.solidjs.com/

After some testing and research I can say, it will not be an easy task to integrate solid-js as a lume plugin similar to react/preact/nanojsx, since it doesn't have it's own jsx-runtime neither supports using jsxfactory directly in typescript

solidjs needs a compile time step in order to function properly

I found this issue, with some more information regarding running solid-js with deno. The only working integration example I found on this repo. It is using esbuild & babel with preset-typescript and preset-solid to transpile the jsx. Any thoughts welcome, I wasn't able to create a working plugin after some hours.

[Abiti-936]

I think you should take a look at alephjs implementation of solidjs Loader, as there's a compilation step in Lume, we can support solidjs. Just take a look at here.

[jrson83]

I think you should take a look at alephjs implementation of solidjs Loader, as there's a compilation step in Lume, we can support solidjs. Just take a look at here.

Thanks, I will check it out.

[dz4k]

I recently started a tiny JSX library just for rendering static HTML: https://deno.land/x/[email protected]/mod.ts

It's very early and untested right now, but definitely light as a single 2kb file. I'm using it to make a server-rendered app with Oak.

[oscarotero]

I'm not sure if including another JSX renderer worth it, because there are no big differences between them (on server-side rendering). But if you want to create a plugin for Lume, feel free to PR in the experimental plugins repo. Thanks!

[oscarotero]

@jrson83 I just added the nano_jsx plugin to the main Lume repo. I've also tried to add the preact plugin but I'm getting a bunch of TypeScript errors, due duplicated declarations. For example:

TS2403 [ERROR]: Subsequent variable declarations must have the same type.  Variable 'WritableStreamDefaultController' must be of type '{ new (): WritableStreamDefaultController; prototype: WritableStreamDefaultController; }', but here has type 'WritableStreamDefaultController'.
declare var WritableStreamDefaultController: WritableStreamDefaultController;
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at asset:///lib.deno.web.d.ts:760:13

    'WritableStreamDefaultController' was also declared here.
    declare var WritableStreamDefaultController: {
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        at asset:///lib.dom.d.ts:16882:13

TS2717 [ERROR]: Subsequent property declarations must have the same type.  Property 'closed' must be of type 'Promise<undefined>', but here has type 'Promise<void>'.
  readonly closed: Promise<void>;
           ~~~~~~
    at asset:///lib.deno.web.d.ts:770:12

    'closed' was also declared here.
        readonly closed: Promise<undefined>;
                 ~~~~~~
        at asset:///lib.dom.d.ts:16889:14

TS2717 [ERROR]: Subsequent property declarations must have the same type.  Property 'ready' must be of type 'Promise<undefined>', but here has type 'Promise<void>'.
  readonly ready: Promise<void>;
           ~~~~~
    at asset:///lib.deno.web.d.ts:772:12

    'ready' was also declared here.
        readonly ready: Promise<undefined>;
                 ~~~~~
        at asset:///lib.dom.d.ts:16891:14

TS2403 [ERROR]: Subsequent variable declarations must have the same type.  Variable 'WritableStreamDefaultWriter' must be of type '{ new <W = any>(stream: WritableStream<W>): WritableStreamDefaultWriter<W>; prototype: WritableStreamDefaultWriter<any>; }', but here has type '{ new (): WritableStreamDefaultWriter<any>; prototype: WritableStreamDefaultWriter<any>; }'.
declare var WritableStreamDefaultWriter: {
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at asset:///lib.deno.web.d.ts:780:13

    'WritableStreamDefaultWriter' was also declared here.
    declare var WritableStreamDefaultWriter: {
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~
        at asset:///lib.dom.d.ts:16898:13

TS2403 [ERROR]: Subsequent variable declarations must have the same type.  Variable 'TransformStreamDefaultController' must be of type '{ new (): TransformStreamDefaultController<any>; prototype: TransformStreamDefaultController<any>; }', but here has type 'TransformStreamDefaultController<any>'.
declare var TransformStreamDefaultController: TransformStreamDefaultController;
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    at asset:///lib.deno.web.d.ts:810:13

    'TransformStreamDefaultController' was also declared here.
    declare var TransformStreamDefaultController: {
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        at asset:///lib.dom.d.ts:14289:13

TS2717 [ERROR]: Subsequent property declarations must have the same type.  Property 'start' must be of type 'TransformerStartCallback<O> | undefined', but here has type 'TransformStreamDefaultControllerCallback<O> | undefined'.
  start?: TransformStreamDefaultControllerCallback<O>;
  ~~~~~
    at asset:///lib.deno.web.d.ts:816:3

    'start' was also declared here.
        start?: TransformerStartCallback<O>;
        ~~~~~
        at asset:///lib.dom.d.ts:1780:5

TS2374 [ERROR]: Duplicate index signature for type 'string'.
  [name: string]: any;
  ~~~~~~~~~~~~~~~~~~~~
    at asset:///lib.deno.webstorage.d.ts:41:3

TS2300 [ERROR]: Duplicate identifier 'AlgorithmIdentifier'.
type AlgorithmIdentifier = string | Algorithm;
     ~~~~~~~~~~~~~~~~~~~
    at asset:///lib.deno.crypto.d.ts:22:6

    'AlgorithmIdentifier' was also declared here.
    type AlgorithmIdentifier = Algorithm | string;
         ~~~~~~~~~~~~~~~~~~~
        at asset:///lib.dom.d.ts:18107:6

TS2300 [ERROR]: Duplicate identifier 'HashAlgorithmIdentifier'.
type HashAlgorithmIdentifier = AlgorithmIdentifier;
     ~~~~~~~~~~~~~~~~~~~~~~~
    at asset:///lib.deno.crypto.d.ts:24:6

    'HashAlgorithmIdentifier' was also declared here.
    type HashAlgorithmIdentifier = AlgorithmIdentifier;
         ~~~~~~~~~~~~~~~~~~~~~~~
        at asset:///lib.dom.d.ts:18141:6

TS2300 [ERROR]: Duplicate identifier 'KeyType'.
type KeyType = "private" | "public" | "secret";
     ~~~~~~~
    at asset:///lib.deno.crypto.d.ts:26:6

    'KeyType' was also declared here.
    type KeyType = "private" | "public" | "secret";
         ~~~~~~~
        at asset:///lib.dom.d.ts:18227:6

TS2300 [ERROR]: Duplicate identifier 'KeyUsage'.
type KeyUsage =
     ~~~~~~~~
    at asset:///lib.deno.crypto.d.ts:28:6

    'KeyUsage' was also declared here.
    type KeyUsage = "decrypt" | "deriveBits" | "deriveKey" | "encrypt" | "sign" | "unwrapKey" | "verify" | "wrapKey";
         ~~~~~~~~
        at asset:///lib.dom.d.ts:18228:6

TS2300 [ERROR]: Duplicate identifier 'KeyFormat'.
type KeyFormat = "jwk" | "pkcs8" | "raw" | "spki";
     ~~~~~~~~~
    at asset:///lib.deno.crypto.d.ts:38:6

    'KeyFormat' was also declared here.
    type KeyFormat = "jwk" | "pkcs8" | "raw" | "spki";
         ~~~~~~~~~
        at asset:///lib.dom.d.ts:18226:6

TS2300 [ERROR]: Duplicate identifier 'NamedCurve'.
type NamedCurve = string;
     ~~~~~~~~~~
    at asset:///lib.deno.crypto.d.ts:40:6

    'NamedCurve' was also declared here.
    type NamedCurve = string;
         ~~~~~~~~~~
        at asset:///lib.dom.d.ts:18151:6

TS2717 [ERROR]: Subsequent property declarations must have the same type.  Property 'label' must be of type 'BufferSource | undefined', but here has type 'Uint8Array | undefined'.
  label?: Uint8Array;
  ~~~~~
    at asset:///lib.deno.crypto.d.ts:134:3

    'label' was also declared here.
        label?: BufferSource;
        ~~~~~
        at asset:///lib.dom.d.ts:1605:5

Any idea of how to fix this?

[jrson83]

I checked the files maybe because you are importing preact in multiple test files in tests/assets/nano_jsx/ for the nano_jsx plugin?:

/** @jsxImportSource https://esm.sh/[email protected] */

https://github.com/lumeland/lume/blob/master/tests/assets/nano_jsx/index.jsx#L1 https://github.com/lumeland/lume/blob/master/tests/assets/nano_jsx/multiple.jsx#L1 https://github.com/lumeland/lume/blob/master/tests/assets/nano_jsx/with-function.jsx#L1 https://github.com/lumeland/lume/blob/master/tests/assets/nano_jsx/_components/button.jsx#L1 https://github.com/lumeland/lume/blob/master/tests/assets/nano_jsx/_includes/layout.jsx#L1

This could also maybe be an issue because we additionally to the preact package are importing preact-render-to-string with [email protected]. But this has to be done since the preact-render-to-string should not hard coded include a preact version, instead dynamic the latest.

[oscarotero]

Oops, this is because initially I started adding preact and after these errors, use the same assets for nano_jsx and forgot to remove the imports.

I'm going to fix it and let you know

[oscarotero]

Ok, I have moved Preact to the main Lume repo (will be available in v1.11.0) and decided to keep NanoJSX in the experimental plugins repo for now. I close this.