jsxte - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1-canary-0ffcfc73b72dda285ad10c72e424136cdfebc67e.0

dist/html-parser/jsx-elem-to-html.d.ts

@@ -1,8 +0,9 @@
-export declare const jsxElemToHtmlSync: (element: JSX.Element, options?: {
+import { ContextMap } from "../context-map/context-map";
+export declare const jsxElemToHtmlSync: (element: JSX.Element, contextMap?: ContextMap, options?: {
     indent?: number | undefined;
     attributeMap?: Record<string, string> | undefined;
 } | undefined) => string;
-export declare const jsxElemToHtmlAsync: (element: JSX.Element, options?: {
+export declare const jsxElemToHtmlAsync: (element: JSX.Element, contextMap?: ContextMap, options?: {
     indent?: number | undefined;
     attributeMap?: Record<string, string> | undefined;
 } | undefined) => Promise<string>;

dist/html-parser/jsx-elem-to-html.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsxElemToHtmlAsync = exports.jsxElemToHtmlSync = void 0;
+const context_map_1 = require("../context-map/context-map");
 const pad_1 = require("../utilities/pad");
@@ -8,4 +9,5 @@ const attribute_to_html_tag_string_1 = require("./attribute-to-html-tag-string");
 const isSyncElem = (e) => true;
-const jsxElemToHtmlSync = (element, options) => {
+const jsxElemToHtmlSync = (element, contextMap = context_map_1.ContextMap.create(), options) => {
     const { attributeMap = {}, indent = 0 } = options ?? {};
+    contextMap = context_map_1.ContextMap.clone(contextMap);
     if (!isSyncElem(element))
@@ -18,7 +20,7 @@ throw new Error("");
     if (typeof element.tag !== "string") {
-        const subElem = element.tag(element.props);
+        const subElem = element.tag(element.props, contextMap);
         if (subElem instanceof Promise) {
             throw new Error(`Encountered an async Component: [${element.tag.name}] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`);
         }
-        return (0, exports.jsxElemToHtmlSync)(subElem, { indent, attributeMap });
+        return (0, exports.jsxElemToHtmlSync)(subElem, contextMap, { indent, attributeMap });
     }
@@ -30,3 +32,3 @@ else {
             for (const child of htmlStruct.children) {
-                const renderedChild = (0, exports.jsxElemToHtmlSync)(child, {
+                const renderedChild = (0, exports.jsxElemToHtmlSync)(child, contextMap, {
                     indent: indent + 2,
@@ -49,3 +51,3 @@ attributeMap,
             for (const child of htmlStruct.children) {
-                const renderedChild = (0, exports.jsxElemToHtmlSync)(child, {
+                const renderedChild = (0, exports.jsxElemToHtmlSync)(child, contextMap, {
                     indent: indent + 2,
@@ -62,4 +64,5 @@ attributeMap,
 exports.jsxElemToHtmlSync = jsxElemToHtmlSync;
-const jsxElemToHtmlAsync = async (element, options) => {
+const jsxElemToHtmlAsync = async (element, contextMap = context_map_1.ContextMap.create(), options) => {
     const { attributeMap = {}, indent = 0 } = options ?? {};
+    contextMap = context_map_1.ContextMap.clone(contextMap);
     if (!isSyncElem(element))
@@ -72,4 +75,7 @@ throw new Error("");
     if (typeof element.tag !== "string") {
-        const subElem = (await element.tag(element.props));
-        return await (0, exports.jsxElemToHtmlAsync)(subElem, { indent, attributeMap });
+        const subElem = (await element.tag(element.props, contextMap));
+        return await (0, exports.jsxElemToHtmlAsync)(subElem, contextMap, {
+            indent,
+            attributeMap,
+        });
     }
@@ -81,3 +87,3 @@ else {
             for (const child of htmlStruct.children) {
-                const renderedChild = await (0, exports.jsxElemToHtmlAsync)(child, {
+                const renderedChild = await (0, exports.jsxElemToHtmlAsync)(child, contextMap, {
                     indent: indent + 2,
@@ -100,3 +106,3 @@ attributeMap,
             for (const child of htmlStruct.children) {
-                const renderedChild = await (0, exports.jsxElemToHtmlAsync)(child, {
+                const renderedChild = await (0, exports.jsxElemToHtmlAsync)(child, contextMap, {
                     indent: indent + 2,
@@ -103,0 +109,0 @@ attributeMap,

dist/index.d.ts

 export { renderToHtml, renderToHtmlAsync } from "./html-parser/render-to-html";
 export * from "./express";
-export { renderToStringTemplateTag, StringTemplateParserOptions, } from "./string-template-parser/render-to-string-template-tag";
+export { renderToStringTemplateTag, type StringTemplateParserOptions, } from "./string-template-parser/render-to-string-template-tag";
+export { type ContextDefinition, type ContextMap, defineContext, } from "./context-map/context-map";
+export type { HTMLProps, AttributeBool } from "./jsx/base-html-tag-props";

dist/index.js

@@ -17,3 +17,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderToStringTemplateTag = exports.renderToHtmlAsync = exports.renderToHtml = void 0;
+exports.defineContext = exports.renderToStringTemplateTag = exports.renderToHtmlAsync = exports.renderToHtml = void 0;
 var render_to_html_1 = require("./html-parser/render-to-html");
@@ -25,1 +25,3 @@ Object.defineProperty(exports, "renderToHtml", { enumerable: true, get: function () { return render_to_html_1.renderToHtml; } });
 Object.defineProperty(exports, "renderToStringTemplateTag", { enumerable: true, get: function () { return render_to_string_template_tag_1.renderToStringTemplateTag; } });
+var context_map_1 = require("./context-map/context-map");
+Object.defineProperty(exports, "defineContext", { enumerable: true, get: function () { return context_map_1.defineContext; } });

dist/jsx/base-html-tag-props.d.ts

@@ -0,1 +1,2 @@
+import type { ContextMap } from "../context-map/context-map";
 import type { Rewrap } from "../html-parser/types";
@@ -17,3 +18,3 @@ export declare type AttributeBool = true | false | "true" | "false";
             type: "tag";
-            tag: string | ((props: ElementProps) => Element) | ((props: ElementProps) => Promise<Element>);
+            tag: string | ((props: ElementProps, contextMap: ContextMap) => Element) | ((props: ElementProps, contextMap: ContextMap) => Promise<Element>);
             props: ElementProps;
@@ -34,4 +35,4 @@ };
         };
-        type Component<P extends object = {}> = (props: PropsWithChildren<P>) => JSX.Element;
-        type AsyncComponent<P extends object = {}> = (props: PropsWithChildren<P>) => Promise<JSX.Element>;
+        type Component<P extends object = {}> = (props: PropsWithChildren<P>, contextMap: ContextMap) => JSX.Element;
+        type AsyncComponent<P extends object = {}> = (props: PropsWithChildren<P>, contextMap: ContextMap) => Promise<JSX.Element>;
         interface BaseHTMLTagProps {
@@ -38,0 +39,0 @@ children?: ElementChildren;

dist/jsx/jsx-runtime.d.ts

@@ -0,1 +1,2 @@
+import type { ContextMap } from "../context-map/context-map";
 declare type CreateElementProps = {
@@ -5,9 +6,9 @@ [k: string]: any;
 };
-export declare const createElement: (tag: string | ((props: any) => JSX.Element) | ((props: any) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
-export declare const jsx: (tag: string | ((props: any) => JSX.Element) | ((props: any) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
-export declare const jsxs: (tag: string | ((props: any) => JSX.Element) | ((props: any) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
-export declare const _jsx: (tag: string | ((props: any) => JSX.Element) | ((props: any) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
-export declare const _jsxs: (tag: string | ((props: any) => JSX.Element) | ((props: any) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
+export declare const createElement: (tag: string | ((props: any, contextMap: ContextMap) => JSX.Element) | ((props: any, contextMap: ContextMap) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
+export declare const jsx: (tag: string | ((props: any, contextMap: ContextMap) => JSX.Element) | ((props: any, contextMap: ContextMap) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
+export declare const jsxs: (tag: string | ((props: any, contextMap: ContextMap) => JSX.Element) | ((props: any, contextMap: ContextMap) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
+export declare const _jsx: (tag: string | ((props: any, contextMap: ContextMap) => JSX.Element) | ((props: any, contextMap: ContextMap) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
+export declare const _jsxs: (tag: string | ((props: any, contextMap: ContextMap) => JSX.Element) | ((props: any, contextMap: ContextMap) => Promise<JSX.Element>), props?: CreateElementProps | undefined, ...children: Array<JSX.Element | string | number | Array<JSX.Element | string | number>>) => JSX.Element;
 export declare const Fragment = "";
 export declare const _Fragment = "";
 export {};

dist/string-template-parser/jsx-elem-to-strings.d.ts

@@ -0,3 +1,4 @@
+import { ContextMap } from "../context-map/context-map";
 declare type TagFunctionArgs = [string[], any[]];
-export declare const jsxElemToTagFuncArgsSync: (element: JSX.Element, attributeMap: Record<string, string>) => TagFunctionArgs;
+export declare const jsxElemToTagFuncArgsSync: (element: JSX.Element, attributeMap: Record<string, string>, contextMap?: ContextMap) => TagFunctionArgs;
 export {};

dist/string-template-parser/jsx-elem-to-strings.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.jsxElemToTagFuncArgsSync = void 0;
+const context_map_1 = require("../context-map/context-map");
 const map_attribute_name_1 = require("./map-attribute-name");
@@ -17,3 +18,4 @@ const resolve_element_1 = require("./resolve-element");
 };
-const jsxElemToTagFuncArgsSync = (element, attributeMap) => {
+const jsxElemToTagFuncArgsSync = (element, attributeMap, contextMap = context_map_1.ContextMap.create()) => {
+    contextMap = context_map_1.ContextMap.clone(contextMap);
     if (!isSyncElem(element))
@@ -25,7 +27,7 @@ throw new Error("");
     if (typeof element.tag !== "string") {
-        const subElem = element.tag(element.props);
+        const subElem = element.tag(element.props, contextMap);
         if (subElem instanceof Promise) {
             throw new Error(`Encountered an async Component: [${element.tag.name}] Asynchronous Component's cannot be parsed by rendertoHTML. If you wante to use asynchronous components use renderToHtmlAsync instead.`);
         }
-        return (0, exports.jsxElemToTagFuncArgsSync)(subElem, attributeMap);
+        return (0, exports.jsxElemToTagFuncArgsSync)(subElem, attributeMap, contextMap);
     }
@@ -37,3 +39,3 @@ else {
             for (const child of children) {
-                const [[first, ...strings], tagParams] = (0, exports.jsxElemToTagFuncArgsSync)(child, attributeMap);
+                const [[first, ...strings], tagParams] = (0, exports.jsxElemToTagFuncArgsSync)(child, attributeMap, contextMap);
                 concatToLastStringOrPush(results, first);
@@ -60,3 +62,3 @@ results[0].push(...strings);
             for (const child of children) {
-                const [[first, ...strings], tagParams] = (0, exports.jsxElemToTagFuncArgsSync)(child, attributeMap);
+                const [[first, ...strings], tagParams] = (0, exports.jsxElemToTagFuncArgsSync)(child, attributeMap, contextMap);
                 concatToLastStringOrPush(results, first);
@@ -63,0 +65,0 @@ results[0].push(...strings);

package.json

@@ -18,3 +18,3 @@ {
   "name": "jsxte",
-  "version": "2.0.0",
+  "version": "2.0.1-canary-0ffcfc73b72dda285ad10c72e424136cdfebc67e.0",
   "main": "./dist/index.js",
@@ -21,0 +21,0 @@ "scripts": {

README.md

@@ -27,7 +27,7 @@ # JSX Template Engine
 
-const Header = (props: { label: string }) => {
+const Header: JSXTE.Component = (props: { label: string }) => {
   return <h1>{props.label}</h1>;
 };
 
-const App = (props: { label: string }) => {
+const App: JSXTE.Component = (props: { label: string }) => {
   return (
@@ -59,7 +59,7 @@ <html>
 
-const Header = () => {
+const Header: JSXTE.Component = () => {
   return <h1>Hello World</h1>;
 };
 
-const ToDoList = async () => {
+const ToDoList: JSXTE.Component = async () => {
   const todos = await fetchMyTodosFromDB();
@@ -87,3 +87,3 @@
 
-const App = () => {
+const App: JSXTE.Component = () => {
   return (
@@ -109,2 +109,33 @@ <html>
 
+## Context
+
+Context Map is a interface provided to each functional component that provides a mechanism for providing any arbitrary data to it's descendant. This is primarily to avoid the prop-drilling.
+
+### Example
+
+```tsx
+import { defineContext } from "jsxte";
+
+const myContext = defineContext<{ foo: string }>();
+
+const App: JSXTE.Component = (props, contextMap) => {
+  // Set the context to a new value, all descendants of this component will have access to it
+  contextMap.set(myContext, { foo: "Hello" });
+
+  return <Foo />;
+};
+
+const Foo: JSXTE.Component = (props, contextMap) => {
+  let label = "";
+
+  // Check if `myContext` is being provided by any of the ancestors
+  if (contextMap.has(myContext)) {
+    // Retrieve the context data
+    label = contextMap.get(myContext).label;
+  }
+
+  return <p>{label}</p>;
+};
+```
+
 ## Extending the typings
@@ -131,3 +162,3 @@
 // with it it's possible to use this without type errors:
-const MyComponent = () => (
+const MyComponent: JSXTE.Component = () => (
   <my-custom-web-component data-example-attribute="Hello"></my-custom-web-component>
@@ -134,0 +165,0 @@ );

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66510

increased by2.05%

Lines of code

1491

increased by6.58%

Number of lines in readme file

253

increased by13.96%

Worsened metrics

Number of package files

143

decreased by-4.67%

Number of low quality alerts

2

increased by100%

No dependency changes