Closed oscarotero closed 2 years ago
Also there's solid.js that you should take a look at. https://www.solidjs.com/
Added NanoJSX to the experimental plugins repo
Added Preact JSX to the experimental plugins repo.
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.
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.
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.
I recently started a tiny JSX library just for rendering static HTML: https://deno.land/x/femtojsx@v0.0.2/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.
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!
@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?
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/preact@10.10.6 */
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 ?deps=preact@10.10.6
. But this has to be done since the preact-render-to-string
should not hard coded include a preact version, instead dynamic the latest.
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
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.
JSX plugin use React. It would be nice to have other lighter alternatives.