nest-jsx-template-engine - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/h.d.ts

@@ -1,1 +0,1 @@
-export declare const h: any;
+export declare const h: (tagName: Function | string, props?: object, ...children: any[]) => any;

dist/h.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.h = void 0;
-const react_1 = require("react");
-exports.h = react_1.createElement;
+function stringifyChildren(child) {
+    let stringifiedChild = typeof child === 'string' ? child : '';
+    if (!stringifiedChild) {
+        if (child instanceof String) {
+            stringifiedChild = child.toString();
+        }
+        if (Array.isArray(child)) {
+            stringifiedChild = child.join('\n');
+        }
+        if (child && typeof child.toString === 'function') {
+            stringifiedChild = child.toString();
+        }
+        if (!child) {
+            stringifiedChild = `${child}`;
+        }
+    }
+    return stringifiedChild;
+}
+exports.h = (tagName, props, ...children) => {
+    if (typeof tagName === 'function') {
+        return tagName(Object.assign(Object.assign({}, props), { children }));
+    }
+    let stringifiedChildren = children.map(stringifyChildren).join('\n');
+    let stringifiedProps = '';
+    if (props) {
+        stringifiedProps = Object.entries(props)
+            .map(([key, value]) => {
+            if (value && typeof value.toString === 'function') {
+                return `${key}="${value.toString()}"`;
+            }
+            return `${key}="${value}"`;
+        })
+            .join(' ');
+    }
+    return `<${tagName}${stringifiedProps ? ' ' + stringifiedProps : ''}>${stringifiedChildren}</${tagName}>`;
+};
 //# sourceMappingURL=h.js.map

dist/index.d.ts

 import { h } from './h';
 import { Render } from './render';
 import { RenderMiddleware } from './middleware';
-import { JSX } from 'react';
-export { h, Render, RenderMiddleware, JSX };
+export { h, Render, RenderMiddleware, };

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JSX = exports.RenderMiddleware = exports.Render = exports.h = void 0;
+exports.RenderMiddleware = exports.Render = exports.h = void 0;
 const h_1 = require("./h");
@@ -10,4 +10,2 @@ Object.defineProperty(exports, "h", { enumerable: true, get: function () { return h_1.h; } });
 Object.defineProperty(exports, "RenderMiddleware", { enumerable: true, get: function () { return middleware_1.RenderMiddleware; } });
-const react_1 = require("react");
-Object.defineProperty(exports, "JSX", { enumerable: true, get: function () { return react_1.JSX; } });
 //# sourceMappingURL=index.js.map

dist/middleware.js

@@ -11,3 +11,2 @@ "use strict";
 const common_1 = require("@nestjs/common");
-const server_1 = require("react-dom/server");
 let RenderMiddleware = class RenderMiddleware {
@@ -21,4 +20,3 @@ use(req, res, next) {
             try {
-                const str = server_1.renderToString(template(Object.assign(Object.assign({}, this.locals || {}), opt)));
-                res.send(str);
+                res.send(template(Object.assign(Object.assign({}, this.locals || {}), opt)));
             }
@@ -25,0 +23,0 @@ catch (err) {

dist/render.d.ts

 import 'reflect-metadata';
-import { JSX } from 'react';
-export declare function Render(template: (props: any) => JSX.ElementClass): MethodDecorator;
+export declare function Render(template: (props: any) => string): MethodDecorator;

package.json

 {
   "name": "nest-jsx-template-engine",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "JSX-based + typescript template engine for NestJS applications",
   "main": "dist/index.js",
   "scripts": {
-    "build": "tsc",
+    "build": "rm -rf ./dist && tsc",
     "pre:publish": "build",
@@ -20,2 +20,8 @@ "publish": "npm publish",
   "author": "sjones6",
+  "homepage": "https://github.com/sjones6/nestjs-jsx-template-engine",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sjones6/nestjs-jsx-template-engine.git"
+  },
+  "bugs": "https://github.com/sjones6/nestjs-jsx-template-engine/issues",
   "license": "MIT",
@@ -30,6 +36,4 @@ "devDependencies": {
     "@nestjs/common": "^7.2.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
     "reflect-metadata": "^0.1.13"
   }
 }

readme.md

@@ -73,9 +73,9 @@ # nestjs-jsx-template-engine
 // app.view.tsx
-import { h, JSX }  from 'nest-jsx-template-engine'
+import { h }  from 'nest-jsx-template-engine'
 import { AppViewTransferObject } from './app.vto'
 
-export function App(props: AppViewTransferObject): JSX.ElementClass {
+export function App(props: AppViewTransferObject): string {
   return <html>
     <body>
-      <h1 className="foo">{props.name}</h1>
+      <h1 class="foo">{props.name}</h1>
     </body>
@@ -85,3 +85,2 @@ </html>
 ```
-JSX is react-flavored, so use things like `className` and `htmlFor`. 
 
@@ -97,2 +96,6 @@ You can define a view-transfer interface for the props passed into your template. This way, you can strongly-type the values passed from your controller into your view.
 
-See a working demo in the Github repo.
+See a working demo in the Github repo.
+
+## A Note on React-Flavored JSX
+
+This package does not support React flavored JSX (e.g., `className`, `htmlFor`, etc). It expects basic HTML properties.

src/h.ts

@@ -1,2 +0,44 @@
-import { createElement } from 'react';
-export const h = createElement;
+function stringifyChildren(child: any): string {
+
+  let stringifiedChild: string = typeof child === 'string' ? child : '';
+  if (!stringifiedChild) {
+    if (child instanceof String) {
+      stringifiedChild = child.toString();
+    }
+    if (Array.isArray(child)) {
+      stringifiedChild = child.join('\n')
+    }
+  
+    // there's a value that exposes a `toString` coercion method
+    if (child && typeof child.toString === 'function') {
+      stringifiedChild = child.toString();
+    }
+  
+    // coerce a number of falsey varietes to a string
+    if (!child) {
+      stringifiedChild = `${child}`;
+    }
+  }
+  return stringifiedChild;
+}
+
+export const h = (tagName: Function|string, props?: object, ...children) => {
+  if (typeof tagName === 'function') {
+    return tagName({ ...props, children });
+  }
+
+  let stringifiedChildren: string = children.map(stringifyChildren).join('\n');
+  let stringifiedProps: string = '';
+  if (props) {
+    stringifiedProps = Object.entries(props)
+    .map(([key, value]) => {
+      if (value && typeof value.toString === 'function') {
+        return `${key}="${value.toString()}"`
+      }
+      return `${key}="${value}"`;
+    })
+    .join(' ')
+  }
+
+  return `<${tagName}${stringifiedProps ? ' ' + stringifiedProps : ''}>${stringifiedChildren}</${tagName}>`
+}

src/index.ts

 import { h }  from './h';
 import { Render } from './render';
 import { RenderMiddleware } from './middleware';
-import { JSX } from 'react';
 
@@ -10,3 +9,2 @@ export {
   RenderMiddleware,
-  JSX
 }

src/middleware.ts

 import { Injectable, NestMiddleware } from '@nestjs/common';
 import { Request, Response } from 'express';
-import { renderToString } from 'react-dom/server'
 
@@ -15,4 +14,3 @@ @Injectable()
       try {
-        const str = renderToString(template({ ...this.locals || {}, ...opt }));
-        res.send(str);
+        res.send(template({ ...this.locals || {}, ...opt }));
       } catch (err) {
@@ -19,0 +17,0 @@ this.req.next(err);

src/render.ts

 import 'reflect-metadata';
-import { JSX } from 'react';
 import { RENDER_METADATA } from '@nestjs/common/constants';
@@ -14,3 +13,3 @@
  */
-export function Render(template: (props: any) => JSX.ElementClass): MethodDecorator {
+export function Render(template: (props: any) => string): MethodDecorator {
   return (
@@ -17,0 +16,0 @@ target: object,

tsconfig.json

@@ -14,3 +14,3 @@ {
   },
-  "exclude": ["node_modules", "dist"],
+  "exclude": ["node_modules/**", "dist/**", "demo/**"],
   "include": [
@@ -17,0 +17,0 @@ "src/**/*"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

347703

increased by1.09%

Dependency count

2

decreased by-50%

Lines of code

203

increased by40.97%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

98

increased by3.16%

Number of low supply chain risk alerts

0

decreased by-100%

Dependency changes

• - Removedreact@^16.13.1

• - Removedreact-dom@^16.13.1

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)