Feat/esm

.npmignore

@@ -14,3 +14,4 @@ renovate.json
 node_modules
 tsconfig*.json
 !dist/**/*
+dist/example

package.json

@@ -1,10 +1,10 @@
 {
   "name": "nestjs-tsx-views",
-  "version": "1.2.6",
+  "version": "2.0.0-beta.0",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "description": "Server-side JSX/TSX rendering for your NestJS application 🚀",
   "author": "Philipp Busse",
+  "type": "module",
   "bugs": {
     "url": "https://github.com/pmb0/nestjs-tsx-views/issues"
   },
@@ -43,7 +43,7 @@
     "@types/node": "^16",
     "@types/react": "^18.0.28",
     "cross-fetch": "^3.1.4",
-    "express-tsx-views": "^1.3.1",
+    "express-tsx-views": "^2.0.0-beta.1",
     "graphql": "^15.5.1",
     "husky": "^7.0.0",
     "jest": "^27.0.0",
@@ -56,13 +56,13 @@
     "semantic-release": "^18.0.0",
     "ts-jest": "^27.0.0",
     "ts-node": "^10.1.0",
-    "typescript": "^4.0.0"
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "@nestjs/common": "*",
     "@nestjs/core": "*",
     "express": "^4.17.1",
-    "express-tsx-views": ">= 1.3.1",
+    "express-tsx-views": ">= 2.0.0-beta.0",
     "react": "*",
     "reflect-metadata": "*"
   },
@@ -72,11 +72,11 @@
     "clean": "rimraf dist",
     "lint": "eslint --cache .",
     "prebuild": "yarn clean",
-    "start:basic": "nodemon  --exec ts-node --files example/basic/main.ts",
-    "start:graphql": "nodemon  --exec ts-node --files example/graphql/main.ts",
-    "start:multiple-modules": "nodemon  --exec ts-node --files example/multiple-modules/main.ts",
+    "start:basic": "nodemon dist/example/basic/main.ts",
+    "start:graphql": "nodemon dist/example/graphql/main.ts",
+    "start:multiple-modules": "nodemon dist/example/multiple-modules/main.ts",
     "test": "jest",
-    "_postinstall": "is-ci || husky install",
+    "postinstall": "is-ci || husky install",
     "prepublish": "pinst --disable",
     "postpublish": "pinst --enable"
   },

example/basic/app.controller.ts → src/example/basic/app.controller.ts

@@ -1,7 +1,7 @@
 import { Controller, Get, Render } from '@nestjs/common'
-import { TsxViewsService } from '../../src/tsx-views.service'
-import { MyContext } from './views/my-context'
-import { MyViewProps } from './views/my-view'
+import { TsxViewsService } from '../../index.js'
+import { MyContext } from './views/my-context.js'
+import { MyViewProps } from './views/my-view.js'
 
 @Controller()
 export class AppController {

example/basic/app.module.ts → src/example/basic/app.module.ts

@@ -1,16 +1,18 @@
 import { Module } from '@nestjs/common'
+import { fileURLToPath, URL } from 'node:url'
 import { resolve } from 'path'
-import { TsxViewsModule } from '../../src'
-import { AppController } from './app.controller'
+import { TsxViewsModule } from '../../index.js'
+import { AppController } from './app.controller.js'
+
+const dirname = fileURLToPath(new URL('.', import.meta.url))
 
 @Module({
   imports: [
     TsxViewsModule.registerAsync({
       useFactory: () => ({
-        viewsDirectory: resolve(__dirname, './views'),
+        viewsDirectory: resolve(dirname, './views'),
         prettify: true,
         exclude: ['/throws-exception'],
-        forRoutes: [AppController],
       }),
     }),
   ],

example/basic/main.ts → src/example/basic/main.ts

@@ -1,11 +1,12 @@
 import { NestFactory } from '@nestjs/core'
-import { AppModule } from './app.module'
+import { AppModule } from './app.module.js'
 
 const DEFAULT_PORT = 3000
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule)
-  await app.listenAsync(process.env.PORT || DEFAULT_PORT)
+  await app.listen(process.env.PORT || DEFAULT_PORT)
+  console.log(`Application is running on: ${await app.getUrl()}`)
 }
 
 void bootstrap()

example/basic/views/my-view.tsx → src/example/basic/views/my-view.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useContext } from 'react'
-import { MainLayout } from './layouts/main'
-import { MyContext } from './my-context'
+import { MainLayout } from './layouts/main.js'
+import { MyContext } from './my-context.js'
 
 export interface MyViewProps {
   name: string

example/graphql/app.controller.ts → src/example/graphql/app.controller.ts

@@ -1,5 +1,5 @@
 import { Controller, Get, Render } from '@nestjs/common'
-import { MyViewProps } from './views/my-view'
+import { MyViewProps } from './views/my-view.js'
 
 @Controller()
 export class AppController {

example/graphql/app.module.ts → src/example/graphql/app.module.ts

@@ -1,16 +1,21 @@
-import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client'
+import { InMemoryCache } from '@apollo/client/cache/index.js'
+import { ApolloClient } from '@apollo/client/core/index.js'
+import { createHttpLink } from '@apollo/client/link/http/index.js'
 import { Module } from '@nestjs/common'
 import { fetch } from 'cross-fetch'
-import { ApolloRenderMiddleware } from 'express-tsx-views/dist/apollo'
+import { ApolloRenderMiddleware } from 'express-tsx-views/dist/apollo.js'
+import { fileURLToPath, URL } from 'node:url'
 import { resolve } from 'path'
-import { TsxViewsModule } from '../../src'
-import { AppController } from './app.controller'
+import { TsxViewsModule } from '../../index.js'
+import { AppController } from './app.controller.js'
+
+const dirname = fileURLToPath(new URL('.', import.meta.url))
 
 @Module({
   imports: [
     TsxViewsModule.registerAsync({
       useFactory: (apollo: ApolloClient<InMemoryCache>) => ({
-        viewsDirectory: resolve(__dirname, './views'),
+        viewsDirectory: resolve(dirname, './views'),
         prettify: true,
         exclude: ['/throws-exception'],
         forRoutes: [AppController],

example/multiple-modules/main.ts → src/example/graphql/main.ts

@@ -1,11 +1,11 @@
 import { NestFactory } from '@nestjs/core'
-import { AppModule } from './app.module'
+import { AppModule } from './app.module.js'
 
 const DEFAULT_PORT = 3000
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule)
-  await app.listenAsync(process.env.PORT || DEFAULT_PORT)
+  await app.listen(process.env.PORT || DEFAULT_PORT)
 }
 
 void bootstrap()

example/graphql/views/my-view.tsx → src/example/graphql/views/my-view.tsx

@@ -1,6 +1,7 @@
-import { gql, useQuery } from '@apollo/client'
+import { gql } from '@apollo/client/core/index.js'
+import { useQuery } from '@apollo/client/react/hooks/index.js'
 import React, { ReactElement } from 'react'
-import { MainLayout } from './layouts/main'
+import { MainLayout } from './layouts/main.js'
 
 export interface Film {
   id: string
@@ -41,6 +42,8 @@ const MyView = (props: MyViewProps): ReactElement => {
   return (
     <MainLayout {...props}>
       <h2>Films:</h2>
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-ignore */}
       {data?.allFilms.films.map((film) => (
         <ul key={film.id}>
           {film.title} ({new Date(film.releaseDate).getFullYear()})

src/example/multiple-modules/app.module.ts

@@ -0,0 +1,8 @@
+import { Module } from '@nestjs/common'
+import { Feature1Module } from './feature1/feature1.module.js'
+import { Feature2Module } from './feature2/feature2.module.js'
+
+@Module({
+  imports: [Feature1Module, Feature2Module],
+})
+export class AppModule {}

example/multiple-modules/feature1/feature1.controller.ts → src/example/multiple-modules/feature1/feature1.controller.ts

@@ -1,5 +1,5 @@
 import { Controller, Get, Render } from '@nestjs/common'
-import { MyViewProps } from './views/my-view'
+import { MyViewProps } from './views/my-view.js'
 
 @Controller('feature1')
 export class Feature1Controller {

src/example/multiple-modules/feature1/feature1.module.ts

@@ -0,0 +1,20 @@
+import { Module } from '@nestjs/common'
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'path'
+import { TsxViewsModule } from '../../../tsx-views.module.js'
+import { Feature1Controller } from './feature1.controller.js'
+
+const dirname = fileURLToPath(new URL('.', import.meta.url))
+
+@Module({
+  imports: [
+    TsxViewsModule.register({
+      viewsDirectory: resolve(dirname, './views'),
+      prettify: true,
+
+      forRoutes: [Feature1Controller],
+    }),
+  ],
+  controllers: [Feature1Controller],
+})
+export class Feature1Module {}

example/multiple-modules/feature2/feature2.controller.ts → src/example/multiple-modules/feature2/feature2.controller.ts

@@ -1,5 +1,5 @@
 import { Controller, Get, Render } from '@nestjs/common'
-import { MyViewProps } from './views/my-view'
+import { MyViewProps } from './views/my-view.js'
 
 @Controller('feature2')
 export class Feature2Controller {

src/example/multiple-modules/feature2/feature2.module.ts

@@ -0,0 +1,18 @@
+import { Module } from '@nestjs/common'
+import { fileURLToPath, URL } from 'node:url'
+import { resolve } from 'path'
+import { TsxViewsModule } from '../../../index.js'
+import { Feature2Controller } from './feature2.controller.js'
+
+const dirname = fileURLToPath(new URL('.', import.meta.url))
+
+@Module({
+  imports: [
+    TsxViewsModule.register({
+      viewsDirectory: resolve(dirname, './views'),
+      forRoutes: [Feature2Controller],
+    }),
+  ],
+  controllers: [Feature2Controller],
+})
+export class Feature2Module {}

example/graphql/main.ts → src/example/multiple-modules/main.ts

@@ -1,11 +1,11 @@
 import { NestFactory } from '@nestjs/core'
-import { AppModule } from './app.module'
+import { AppModule } from './app.module.js'
 
 const DEFAULT_PORT = 3000
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule)
-  await app.listenAsync(process.env.PORT || DEFAULT_PORT)
+  await app.listen(process.env.PORT || DEFAULT_PORT)
 }
 
 void bootstrap()

src/index.ts

@@ -1,5 +1,5 @@
 export * from 'express-tsx-views'
-export * from './tsx-views.constants'
-export * from './tsx-views.interface'
-export * from './tsx-views.module'
-export * from './tsx-views.service'
+export * from './tsx-views.constants.js'
+export * from './tsx-views.interface.js'
+export * from './tsx-views.module.js'
+export * from './tsx-views.service.js'

src/tsx-views.middleware.ts

@@ -1,8 +1,8 @@
 import { Inject, Injectable, NestMiddleware } from '@nestjs/common'
 import { Request, Response } from 'express'
 import { setupReactViews } from 'express-tsx-views'
-import { TSX_VIEWS_OPTIONS } from './tsx-views.constants'
-import { TsxViewsModuleOptions } from './tsx-views.interface'
+import { TSX_VIEWS_OPTIONS } from './tsx-views.constants.js'
+import { TsxViewsModuleOptions } from './tsx-views.interface.js'
 
 @Injectable()
 export class TsxViewsMiddleware implements NestMiddleware {

src/tsx-views.module.ts

@@ -6,14 +6,14 @@ import {
   NestModule,
   Provider,
 } from '@nestjs/common'
-import { TSX_VIEWS_OPTIONS } from './tsx-views.constants'
+import { TSX_VIEWS_OPTIONS } from './tsx-views.constants.js'
 import {
   TsxViewsModuleOptions,
   TsxViewsModuleOptionsAsyncOptions,
   TsxViewsModuleOptionsFactory,
-} from './tsx-views.interface'
-import { TsxViewsMiddleware } from './tsx-views.middleware'
-import { TsxViewsService } from './tsx-views.service'
+} from './tsx-views.interface.js'
+import { TsxViewsMiddleware } from './tsx-views.middleware.js'
+import { TsxViewsService } from './tsx-views.service.js'
 
 @Module({})
 export class TsxViewsModule implements NestModule {

tsconfig.build.json

@@ -3,10 +3,9 @@
   "exclude": [
     "node_modules",
     "__tests__",
-    "example",
     "test",
     "dist",
     "**/*spec.ts",
     "**/*test.ts"
   ]
-}
+}

tsconfig.json

@@ -8,20 +8,22 @@
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
     "jsx": "react",
-    "module": "commonjs",
+    "module": "ES2020",
     "outDir": "./dist",
     "sourceMap": true,
     "strict": true,
     "strictNullChecks": true,
     "strictPropertyInitialization": true,
-    "target": "es2019"
+    "target": "es2019",
+    "moduleResolution": "Node16",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true
   },
   "include": [
     "src/**/*",
-    "__tests__/**/*",
-    "example/**/*",
-    "__mocks__/**/*",
-    "index.ts"
   ],
-  "exclude": ["node_modules", "dist"]
-}
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}