@ribajs/ssr - npm Package Compare versions

Comparing version 2.0.0-alpha.0 to 2.0.0-alpha.1

package.json

 {
   "name": "@ribajs/ssr",
-  "version": "2.0.0-alpha.0",
+  "version": "2.0.0-alpha.1",
+  "type": "module",
+  "engines": {
+    "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+  },
+  "scripts": {
+    "test": "npm run type-check && jest --config=jest.config.cjs",
+    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx,.cts,.mts --fix && tsc --noEmit",
+    "build": "tsc",
+    "clean": "rm -rf ./dist ./lib"
+  },
   "dependencies": {
-    "@ribajs/core": "2.0.0-alpha.0",
-    "@ribajs/events": "2.0.0-alpha.0",
-    "@types/express": "^4.17.9"
+    "@ribajs/core": "^2.0.0-alpha.1",
+    "@ribajs/events": "^2.0.0-alpha.1",
+    "@ribajs/jsx": "^2.0.0-alpha.1",
+    "@ribajs/utils": "^2.0.0-alpha.1",
+    "@types/express": "^4.17.13"
   },
-  "main": "src/index.ts",
+  "main": "./src/index.ts",
   "module": "src/index.ts",
   "source": "src/index.ts",
   "devDependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@babel/runtime-corejs3": "^7.12.5",
-    "@types/node": "^14.14.20"
+    "@babel/cli": "^7.17.6",
+    "@babel/core": "^7.17.8",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.17.8",
+    "@babel/runtime-corejs3": "^7.17.8",
+    "@ribajs/eslint-config": "^2.0.0-alpha.1",
+    "@ribajs/tsconfig": "^2.0.0-alpha.1",
+    "@types/imagesloaded": "^4.1.2",
+    "@types/jest": "^27.4.1",
+    "@types/masonry-layout": "^4.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "babel-loader": "^8.2.4",
+    "babel-plugin-array-includes": "^2.0.3",
+    "core-js": "^3.21.1",
+    "eslint": "^8.11.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^27.5.1",
+    "jest-extended": "^2.0.0",
+    "prettier": "^2.6.0",
+    "ts-jest": "^27.1.3",
+    "typescript": "4.6.2",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2"
   }
 }

src/binders/index.ts

@@ -1,1 +0,1 @@
-export {};
+export * from "./csr.binder.js";

src/index.ts

@@ -1,4 +0,13 @@
-export * from "./types";
-export { TypeOfComponent, Component } from "@ribajs/core";
-export { PageComponent } from "./page-component";
-export { SSRModule } from "./ssr.module";
+export * from "./types/index.js";
+export * from "./binders/index.js";
+export * from "./formatters/index.js";
+export * from "./services/index.js";
+export * from "./components/index.js";
+export type {
+  ClassOfComponent,
+  Component,
+  ComponentLifecycleEventData,
+} from "@ribajs/core";
+export { PageComponent } from "./page-component.js";
+export { SSRModule } from "./ssr.module.js";
+export * from "./http-error.js";

src/page-component.ts

 import { Component } from "@ribajs/core";
-import type { SharedContext } from "@ribajs/ssr";
-import type { EventDispatcher } from "@ribajs/events";
-import type { PageComponentAfterBindEventData, SsrHtmlHead } from "./types";
+import { EventDispatcher } from "@ribajs/events";
+import type { SsrHtmlHead, SharedContext } from "./types/index.js";
 
 export abstract class PageComponent extends Component {
-  protected events: EventDispatcher;
-  protected ctx: SharedContext["ctx"];
+  protected lifecycleEvents = EventDispatcher.getInstance("lifecycle");
+  protected ctx: SharedContext["ctx"] = {};
+  protected env: SharedContext["env"] = {};
 
@@ -14,3 +14,2 @@ /**
    * TODO add support for more head tags
-   * TODO add support for set title in happy-dom: https://github.com/capricorn86/happy-dom/blob/master/packages/happy-dom/src/nodes/document/Document.ts
    */
@@ -21,8 +20,18 @@ protected head: SsrHtmlHead = {};
     super();
-    this.ctx = window.ssr.ctx;
-    this.events = window.ssr.events;
+    if (window.ssr) {
+      this.ctx = window.ssr.ctx;
+      this.env = window.ssr.env;
+    } else {
+      console.error(
+        `window.ssr is not defined for "${this.tagName}"!\n` +
+          "Are you sure you are not trying to use this component in the browser?\n" +
+          "PageComponents may only be executed on the server side, " +
+          'but you can create a "normal" component with the same `tagName` and use it client-side. ' +
+          "This way you have the possibility to have a server side and a client side logic for this page component."
+      );
+    }
   }
 
   protected setHtmlHead() {
-    if (this.head.title) {
+    if (this.head.title && document) {
       document.title = this.head.title;
@@ -32,23 +41,11 @@ }
 
-  protected getBindEventData() {
-    const data: PageComponentAfterBindEventData = {
-      tagName: this.tagName.toLocaleLowerCase(),
-      scope: this.scope,
-      component: this,
-    };
-    return data;
+  protected async beforeBind() {
+    await super.beforeBind();
+    this.setHtmlHead();
   }
 
   protected async afterBind() {
+    this.setHtmlHead();
     await super.afterBind();
-    const data = this.getBindEventData();
-    this.setHtmlHead();
-    this.events.trigger("PageComponent:afterBind", data);
   }
-
-  protected async beforeBind() {
-    await super.beforeBind();
-    const data = this.getBindEventData();
-    this.events.trigger("PageComponent:beforeBind", data);
-  }
 }

src/services/index.ts

@@ -1,1 +0,2 @@
-export {};
+export * from "./module.service.js";
+export * from "./open-graph.service.js";

src/ssr.module.ts

@@ -1,10 +0,11 @@
-import "./types/global";
+import "./types/global.js";
 
-import { RibaModule } from "@ribajs/core";
-import * as binders from "./binders";
-import * as formatters from "./formatters";
-import * as services from "./services";
-import * as components from "./components";
+import { RibaModule, LifecycleService } from "@ribajs/core";
+import * as binders from "./binders/index.js";
+import * as formatters from "./formatters/index.js";
+import * as services from "./services/index.js";
+import * as components from "./components/index.js";
+import { SSRModuleOptions } from "./types/index.js";
 
-export const SSRModule = <RibaModule>{
+export const SSRModule: RibaModule<SSRModuleOptions> = {
   binders,
@@ -14,2 +15,27 @@ services,
   components,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  init(options = {}) {
+    services.ModuleService.setSingleton(options);
+
+    const lifecycle = LifecycleService.getInstance();
+
+    // After all components are bound wie trigger the ssr ready event,
+    // as soon as this event is triggered the ssr rendering will be done and returns the rendered html
+    lifecycle.events.on("ComponentLifecycle:allBound", () => {
+      window.ssr.events?.trigger("ready");
+    });
+
+    lifecycle.events.on("ComponentLifecycle:error", (error: Error) => {
+      window.ssr.events?.trigger("error", error);
+    });
+
+    lifecycle.events.on("ComponentLifecycle:noComponents", () => {
+      window.ssr.events?.trigger(
+        "error",
+        new Error("[SSRModule] No component to render found!")
+      );
+    });
+
+    return this;
+  },
 };

src/types/index.ts

@@ -1,7 +0,25 @@
-export * from "./html-head";
-export * from "./page-component-after-bind-event-data";
-export * from "./render-engine";
-export * from "./route";
-export * from "./shared-context";
-export * from "./template-engines";
-export * from "./theme-config";
+export * from "./jsx/index.js";
+export * from "./error-obj.js";
+export * from "./html-head.js";
+export * from "./module-options.js";
+export * from "./open-graph-article.js";
+export * from "./open-graph-audio.js";
+export * from "./open-graph-book.js";
+export * from "./open-graph-determiner.js";
+export * from "./open-graph-image.js";
+export * from "./open-graph-locale.js";
+export * from "./open-graph-music-album.js";
+export * from "./open-graph-music-song.js";
+export * from "./open-graph-music.js";
+export * from "./open-graph-namespace.js";
+export * from "./open-graph-namespaces.js";
+export * from "./open-graph-profile.js";
+export * from "./open-graph-property.js";
+export * from "./open-graph-tree.js";
+export * from "./open-graph-type.js";
+export * from "./open-graph-video-actor.js";
+export * from "./open-graph-video.js";
+export * from "./open-graph.js";
+export * from "./parsed-query.js";
+export * from "./request-context.js";
+export * from "./shared-context.js";

src/types/shared-context.ts

 import type { EventDispatcher } from "@ribajs/events";
-import type { Request } from "express";
-
-interface ExpressRoute extends Partial<Request["route"]> {
-  path: string;
-}
-
+import type { RequestContext } from "./request-context";
 export interface SharedContext {
-  events: EventDispatcher;
-  ctx: {
-    // See https://expressjs.com/de/api.html#req
-    app: Request["app"];
-    baseUrl: Request["baseUrl"];
-    body: Request["body"];
-    cookies: Request["cookies"];
-    fresh: Request["fresh"];
-    hostname: Request["hostname"];
-    ip: Request["ip"];
-    ips: Request["ips"];
-    method: Request["method"];
-    originalUrl: Request["originalUrl"];
-    params: Request["params"];
-    path: Request["path"];
-    protocol: Request["protocol"];
-    query: Request["query"];
-    route: ExpressRoute;
-    secure: Request["secure"];
-    signedCookies: Request["signedCookies"];
-    stale: Request["stale"];
-    subdomains: Request["subdomains"];
-    xhr: Request["xhr"];
+  events?: EventDispatcher;
+  env: {
+    [key: string]: string;
   };
+  templateVars: any; // TODO use TemplateVars interface here
+  ctx: Partial<RequestContext>;
 }

tsconfig.json

 {
+  "extends": "@ribajs/tsconfig",
   "compilerOptions": {
-    "module": "commonjs",
-    "declaration": true,
-    "removeComments": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "target": "es2017",
-    "sourceMap": true,
-    "outDir": "./dist",
-    "baseUrl": "./src",
-    "incremental": true,
-    "rootDirs": ["src"]
-  }
+    "outDir": "dist",
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "node_modules",
+    "**/*.d.ts"
+  ]
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

132574

increased by2163.13%

Number of package files

130

increased by550%

Lines of code

1023

increased by356.7%

Is type module

Yes

Worsened metrics

Dependency count

5

increased by66.67%

Dev dependency count

31

increased by933.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@ribajs/jsx@^2.0.0-alpha.1

• + Added@ribajs/utils@^2.0.0-alpha.1

• + Added@ribajs/core@2.0.0-rc.20(transitive)

• + Added@ribajs/events@2.0.0-rc.20(transitive)

• + Added@ribajs/history@2.0.0-rc.20(transitive)

• + Added@ribajs/jsx@2.0.0-rc.20(transitive)

• + Added@ribajs/ssr@2.0.0-rc.20(transitive)

• + Added@ribajs/utils@2.0.0-rc.20(transitive)

• - Removed@ribajs/core@2.0.0-alpha.0(transitive)

• - Removed@ribajs/events@2.0.0-alpha.0(transitive)

• - Removed@ribajs/tsconfig@2.0.0-alpha.0(transitive)

• - Removed@ribajs/utils@2.0.0-alpha.0(transitive)

• - Removedtypescript@4.9.5(transitive)

• Updated@ribajs/core@^2.0.0-alpha.1

• Updated@ribajs/events@^2.0.0-alpha.1

• Updated@types/express@^4.17.13