Unstable esbuild & solid setup

.gitignore

@@ -2,6 +2,8 @@
 /dist
 /node_modules
 
+.rollup.cache
+
 # Logs
 logs
 *.log

esbuild.js

@@ -0,0 +1,22 @@
+const {build} = require("esbuild");
+const {solidPlugin} = require("esbuild-plugin-solid");
+const path = require("path");
+const fs = require("fs");
+
+const files = fs.readdirSync("src")
+    .filter((src) => src.endsWith(".tsx") || src.endsWith(".ts"))
+    .map((x) => path.resolve(__dirname, "./src/", x));
+
+build({
+    entryPoints: files,
+    minify: false,
+    logLevel: "info",
+    plugins: [solidPlugin({
+        solid: {
+            generate: "ssr",
+            hydratable: true,
+        },
+    })],
+    outdir: "dist",
+    format: "cjs",
+});

esbuild2.js

@@ -0,0 +1,29 @@
+const {build} = require("esbuild");
+const {solidPlugin} = require("esbuild-plugin-solid");
+const path = require("path");
+const fs = require("fs");
+
+build({
+    platform: "node",
+    entryPoints: [
+        "src/main.ts",
+    ],
+    bundle: true,
+    minify: false,
+    logLevel: "info",
+    plugins: [solidPlugin({
+        solid: {
+            generate: "ssr",
+            hydratable: true,
+        },
+    })],
+    outdir: "dist",
+    format: "cjs",
+    external: [
+        "@nestjs/*",
+        "@fastify/*",
+        "class-validator",
+        "class-transformer",
+        "cache-manager",
+    ],
+});

nest-cli.json

@@ -3,6 +3,7 @@
   "collection": "@nestjs/schematics",
   "sourceRoot": "src",
   "compilerOptions": {
-    "deleteOutDir": true
+    "deleteOutDir": false,
+    "webpack": true
   }
 }

package.json

@@ -27,22 +27,40 @@
     "mysql2": "^3.2.4",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.2.0",
+    "solid-js": "^1.7.4",
     "typeorm": "^0.3.15"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
+    "@babel/preset-env": "^7.21.5",
     "@nestjs/cli": "^9.0.0",
     "@nestjs/platform-fastify": "^9.4.0",
     "@nestjs/schematics": "^9.0.0",
     "@nestjs/testing": "^9.0.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@types/express": "^4.17.13",
     "@types/jest": "29.5.0",
     "@types/node": "18.15.11",
     "@types/supertest": "^2.0.11",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "babel-loader": "^9.1.2",
+    "babel-preset-solid": "^1.6.9",
+    "esbuild": "^0.17.18",
+    "esbuild-plugin-solid": "^0.5.0",
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "jest": "29.5.0",
+    "rollup": "^3.21.5",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-route-manifest": "^1.0.0",
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",
     "ts-jest": "29.0.5",

rollup.config.js

@@ -0,0 +1,78 @@
+const nodeResolve = require("@rollup/plugin-node-resolve");
+const common = require("@rollup/plugin-commonjs");
+const babel = require("@rollup/plugin-babel");
+const copy = require("rollup-plugin-copy");
+
+module.exports = [
+    {
+        input: "ssr/index.js",
+        output: [
+            {
+                dir: "ssr/lib",
+                format: "cjs"
+            }
+        ],
+        external: ["solid-js", "solid-js/web", "path", "express", "stream"],
+        plugins: [
+            nodeResolve({ preferBuiltins: true, exportConditions: ["solid", "node"] }),
+            babel({
+                babelHelpers: "bundled",
+                presets: [["solid", { generate: "ssr", hydratable: true }]]
+            }),
+            common()
+        ],
+        preserveEntrySignatures: false
+    },
+    {
+        input: "shared/src/index.js",
+        output: [
+            {
+                dir: "ssr/public/js",
+                format: "cjs"
+            }
+        ],
+        preserveEntrySignatures: false,
+        plugins: [
+            nodeResolve({ exportConditions: ["solid"] }),
+            babel({
+                babelHelpers: "bundled",
+                presets: [["solid", { generate: "dom", hydratable: true }]]
+            }),
+            common(),
+            copy({
+                targets: [
+                    {
+                        src: ["shared/static/*"],
+                        dest: "ssr/public"
+                    }
+                ]
+            })
+        ]
+    },
+    {
+        input: "src/app.tsx",
+        output: [
+            {
+                dir: "dist",
+                format: "cjs"
+            }
+        ],
+        preserveEntrySignatures: false,
+        plugins: [
+            nodeResolve({ exportConditions: ["solid"] }),
+            babel({
+                babelHelpers: "bundled",
+                presets: [["solid", { generate: "dom", hydratable: true }]]
+            }),
+            common(),
+            copy({
+                targets: [
+                    {
+                        src: ["shared/static/*"],
+                        dest: "ssr/public"
+                    }
+                ]
+            })
+        ]
+    }
+];

rollup2.config.js

@@ -0,0 +1,42 @@
+const glob = require("glob");
+const path = require("node:path");
+const { fileURLToPath } = require("node:url");
+const nodeResolve = require("@rollup/plugin-node-resolve");
+const babel = require("@rollup/plugin-babel");
+const common = require("@rollup/plugin-commonjs");
+const copy = require("rollup-plugin-copy");
+
+module.exports = {
+    input: Object.fromEntries(glob.sync("dist/**/*.jsx").map((file) => [
+        // This remove `src/` as well as the file extension from each
+        // file, so e.g. src/nested/foo.js becomes nested/foo
+        path.relative(
+            "dist",
+            file.slice(0, file.length - path.extname(file).length)
+        ),
+        // This expands the relative paths to absolute paths, so e.g.
+        // src/nested/foo becomes /project/src/nested/foo.js
+        file,
+    ])),
+    output: {
+        format: "es",
+        dir: "dist",
+    },
+    preserveEntrySignatures: false,
+    plugins: [
+        nodeResolve({ exportConditions: ["solid"] }),
+        babel({
+            babelHelpers: "bundled",
+            presets: [["solid", { generate: "ssr", hydratable: true }]],
+        }),
+        common(),
+        copy({
+            targets: [
+                {
+                    src: ["shared/static/*"],
+                    dest: "ssr/public",
+                },
+            ],
+        }),
+    ],
+};

shared/src/App.js

@@ -0,0 +1,7 @@
+export function App() {
+    return (
+        <div>
+            SSR :D
+        </div>
+    )
+}

shared/src/index.js

@@ -0,0 +1,5 @@
+import { hydrate } from "solid-js/web";
+import {App} from "./App";
+
+// entry point for browser
+hydrate(() => <App/>, document);

src/app.controller.ts

@@ -1,13 +1,18 @@
 import { Controller, Get } from "@nestjs/common";
 import { AppService } from "./app.service";
+import { renderToString } from "solid-js/web";
+import { SolidAppJSX } from "./solidAppJSX";
 
 @Controller()
 export class AppController {
-    constructor(private readonly appService: AppService) {
+    constructor(private appService: AppService) {
     }
 
     @Get()
     getHello(): string {
-        return this.appService.getHello();
+        console.log(typeof this.appService);
+        console.log(this.appService);
+        const html = renderToString(SolidAppJSX);
+        return html;
     }
 }

src/app.module.ts

@@ -5,6 +5,7 @@ import { TypeOrmModule } from "@nestjs/typeorm";
 
 @Module({
     imports: [
+        /*
         TypeOrmModule.forRoot({
             type: "mysql",
             host: "localhost",
@@ -14,6 +15,7 @@ import { TypeOrmModule } from "@nestjs/typeorm";
             entities: [],
             synchronize: false,
         }),
+         */
     ],
     controllers: [AppController],
     providers: [AppService],

src/app.service.ts

@@ -1,9 +1,24 @@
 import { Injectable } from "@nestjs/common";
+import { renderToString } from "solid-js/web";
+import { SolidAppJSX } from "./solidAppJSX";
+
+console.log("Service module");
 
 @Injectable()
 export class AppService {
+    constructor() {
+        console.log("Service constructor");
+    }
+
+    static {
+        console.log("Service - Static");
+    }
+
     getHello(): string {
-        return "Hello World!";
+        // console.log(typeof SolidAppJSX);
+        // console.log(SolidAppJSX);
+        const html = ":D"; // renderToString(SolidAppJSX);
+        console.log(`SSR? ${html}`);
+        return `Hello world! ${html}`;
     }
 }
-

src/main.ts

@@ -3,10 +3,7 @@ import { FastifyAdapter, NestFastifyApplication } from "@nestjs/platform-fastify
 import { AppModule } from "./app.module";
 
 async function bootstrap() {
-    const app = await NestFactory.create<NestFastifyApplication>(
+    const app = await NestFactory.create(AppModule);
-        AppModule,
-        new FastifyAdapter({ logger: true })
-    );
     await app.listen(3000);
 }
 

src/solidAppJSX.tsx

@@ -0,0 +1,7 @@
+export function SolidAppJSX() {
+    return (
+        <div>
+            OMG!! SSR!!!
+        </div>
+    );
+}

ssr/index.js

@@ -0,0 +1,6 @@
+import {renderToString} from "solid-js/web";
+import {App} from "../shared/src/App";
+
+const html = renderToString(() => <App />)
+
+console.log(html);

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "module": "commonjs",
+    "allowJs": true,
     "declaration": true,
     "removeComments": true,
     "emitDecoratorMetadata": true,
@@ -16,6 +17,8 @@
     "noImplicitAny": true,
     "strictBindCallApply": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
   }
 }

webpack.config.js

@@ -0,0 +1,70 @@
+//*
+module.exports = {
+    module: {
+        rules: [
+            // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
+            {
+                test: /\.ts(x?)$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: "babel-loader",
+                        options: {
+                            plugins: [
+                                // ["@babel/plugin-proposal-decorators", { "version": "2023-01" }],
+                            ],
+                            presets: [
+                                ["solid", { generate: "ssr", hydratable: true }],
+                            ],
+                        },
+                    },
+                    {
+                        loader: "ts-loader",
+                    },
+                ],
+                /*
+                test: /\.[j|t]sx?$/,
+                loader: "babel-loader",
+                exclude: [/node_modules/, /public/],
+                options: {
+                    plugins: [
+                        ["@babel/plugin-proposal-decorators", { "version": "2023-01" }],
+                    ],
+                    presets: [
+                        "@babel/preset-typescript",
+                        ["solid", { generate: "ssr", hydratable: true }],
+                    ],
+                },
+                */
+            },
+            // { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" },
+        ],
+    },
+};
+// */
+
+/*
+const path = require("path");
+
+module.exports = {
+    entry: "./src/main.ts",
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: "ts-loader",
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: [".tsx", ".ts", ".js"],
+    },
+    output: {
+        filename: "bundle.js",
+        path: path.resolve(__dirname, "dist"),
+    },
+};
+
+
+ */