pmb0 / express-tsx-views Goto Github PK

Example From Readme:

setupReactViews(app, {
  viewsDirectory: resolve(__dirname, "views"),
  prettify: true, // Prettify HTML output
});

When this is used inside Nest.js bootstrap() function, we get errors regarding the app context. In the NPM module, it clearly shows app: Application, where Application is imported from Express. This means that we can't use this method in the Nest.js apps. In a Nest.js app, the app context is NestExpressApplication.

Please provide the Nest.js examples for usage, specifically, for this package and not the nestjs-tsx-views.

I'm hoping that it's as simple as

app.setViewEngine('tsx');

Is there way to give for the rendered templates some interactivity? I wondering if I will able to make couple of buttons on page.

I must use both ejs and express-tsx-views.

Is there way to import and use this package as ES Module, not as CJS?

Whenever I'm trying to run my view from the browser, the error is thrown, which occurs when using tsc to compile:

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\PROJEKTY\nodejsterminal\node_modules\tsx\dist\loader.js from C:\PROJEKTY\nodejsterminal\node_modules\express\lib\view.js not supported.
Instead change the require of loader.js in C:\PROJEKTY\nodejsterminal\node_modules\express\lib\view.js to a dynamic import() which is available in all CommonJS modules.
    at new View (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\view.js:81:14)
    at Function.render (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\application.js:587:12)
    at ServerResponse.render (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\response.js:1039:7)
    at file:///C:/PROJEKTY/nodejsterminal/dist/utils/services/PreviewService.js:30:17
    at Layer.handle [as handle_request] (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle [as handle_request] (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\layer.js:95:5)
    at C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\index.js:284:15
    at Function.process_params (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\index.js:346:12)
    at next (C:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\index.js:280:10)
    at SendStream.error (C:\PROJEKTY\nodejsterminal\node_modules\serve-static\index.js:121:7)
    at SendStream.emit (node:events:526:28)
    at SendStream.error (C:\PROJEKTY\nodejsterminal\node_modules\send\index.js:270:17)
    at SendStream.onStatError (C:\PROJEKTY\nodejsterminal\node_modules\send\index.js:417:12)
    at next (C:\PROJEKTY\nodejsterminal\node_modules\send\index.js:731:16)
    at onstat (C:\PROJEKTY\nodejsterminal\node_modules\send\index.js:720:14)
    at FSReqCallback.oncomplete (node:fs:198:21)

When I have tried with tsx, another error is thrown, but again comming from express/lib/view.js:

c:\PROJEKTY\nodejsterminal\node_modules\express\lib\view.js:84
      throw new Error('Module "' + mod + '" does not provide a view engine.')
            ^

Error: Module "tsx" does not provide a view engine.
    at null.View (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\view.js:84:13)
    at Function.render (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\application.js:587:12)
    at ServerResponse.render (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\response.js:1039:7)
    at null.<anonymous> (c:\PROJEKTY\nodejsterminal\src\utils\services\PreviewService.ts:38:11)
    at Layer.handle (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\layer.js:95:5)
    at null.next (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\route.js:144:13)
    at Route.dispatch (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\route.js:114:3)
    at Layer.handle (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\layer.js:95:5)
    at null.<anonymous> (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\index.js:284:15)
    at Function.process_params (c:\PROJEKTY\nodejsterminal\node_modules\express\lib\router\index.js:346:12)

Just like in CRA, is it possible to add babel, where we can add extra module to transpile, or import css files, add support for styling engines like scss, so we can import scss files too?

When I'm trying to render a view on Windows, I'm receiving the following error.
I've tried using a file:// url in the viewsDirectory, but that itself presents a different error (because of path.resolve giving the wrong destination)

Error:

Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

Triggered by:

https://github.com/pmb0/express-tsx-views/blob/9f1a9d90b3714bc0a1c8eff9387ebd63c38bcb4e/src/react-view-engine.ts#L57C57-L57C57

Should filename be wrapped in a url.pathToFileURL(path) call?

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

I believe I made mistakes, please take a look at my PR for NestJS example. I'm getting Failed to lookup view error, even though the file Index.tsx is there.

PR: #84
Repros: https://github.com/thachp/express-tsx-views

I'm moving from using EJS / HBS to TSX and have been experimenting with this package and it works really well for my use case.

One shortcoming is I can use a default view (main) or specify another in the render method with HbS/EJS. This is very handy when I have a module that houses its own views but may get plugged in to multiple projects with their own master layouts / views.

I'm wondering if the path to a layout might be defined as part of the context which could then be passed through the render method. I think I can achieve it with some "hackery" as is, but it would be nice if it was baked in to allow a default view and view override.

I guess this might force a particular pattern on to views to enable them to accept the layout.

When I implement style, that's not working.

import React from "react";

export interface Props {
title: string;
lang: string;
}

// Important to use the default export
export default class MyView extends React.Component {
render() {
const spanStyles = {
color: "blue",
borderColor: "red",
};

return (
  <span style={spanStyles}>
    Hello from React! {this.props.title}, This is a(n) {this.props.lang}{" "}
    greating.
  </span>
);

}
}

Hi, I absolutely don't understand this line, because once compiled, the library is in .js, so js will be assigned to this variable, and the view engine will be incorrect.
Can you explain it to me?
Because I get an error, it can't find my views. Which I solved by simply replacing the line with this const extension = 'tsx';

This is an excellent project!! But I need some help, I followed the instructions and still have some errors.

When I use HMR the hot module replacement mode in nestjs this is the error:

But when I use the normal watch mode of nest this is the error:

This is the template:

And here is the code https://github.com/Dav3rs/nestjs-with-react-templates

What i can do?