jsxte - npm Package Compare versions
Comparing version 1.0.1-canary-624a5d7d6dd32ecde94b298635c9b42d2fcb9052.0 to 1.0.1-canary-71e69646ac75d58f18e1979508dc3481c7ad4c0e.0
@@ -1,2 +0,1 @@ | ||
| export * from "./dist/jsx/jsx.types"; | ||
| export * from "./dist/jsx/jsx-runtime"; | ||
| export * from "./dist/types/jsx-runtime"; |
@@ -34,3 +34,2 @@ "use strict"; | ||
| exports.renderToHTML = void 0; | ||
| __exportStar(require("./dist/jsx/jsx.types"), exports); | ||
| __exportStar(require("./dist/jsx/jsx-runtime"), exports); | ||
| __exportStar(require("./dist/legacy/jsx-runtime"), exports); |
@@ -6,18 +6,36 @@ { | ||
| "@typescript-eslint/parser": "^5.23.0", | ||
| "esbuild": "^0.14.51", | ||
| "eslint": "^8.15.0", | ||
| "eslint-config-prettier": "^8.5.0", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "eslint": "^8.15.0", | ||
| "git-hook-tasks": "github:ncpa0cpl/git-hook-tasks", | ||
| "husky": "^8.0.1", | ||
| "jest": "^28.1.0", | ||
| "node-os-walk": "^1.0.0", | ||
| "prettier": "^2.6.2", | ||
| "prettier-plugin-jsdoc": "^0.3.38", | ||
| "prettier": "^2.6.2", | ||
| "ts-jest": "^28.0.2", | ||
| "typescript": "^4.6.4" | ||
| "typescript": "^4.7.4" | ||
| }, | ||
| "name": "jsxte", | ||
| "version": "1.0.1-canary-624a5d7d6dd32ecde94b298635c9b42d2fcb9052.0", | ||
| "main": "./dist/index.js", | ||
| "version": "1.0.1-canary-71e69646ac75d58f18e1979508dc3481c7ad4c0e.0", | ||
| "main": "./dist/legacy/index.js", | ||
| "types": "./dist/types/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/types/index.d.ts", | ||
| "import": "./dist/esm/index.mjs", | ||
| "require": "./dist/cjs/index.cjs" | ||
| }, | ||
| "./jsx-runtime": { | ||
| "types": "./dist/types/jsx-runtime.d.ts", | ||
| "import": "./dist/esm/jsx-runtime.mjs", | ||
| "require": "./dist/cjs/jsx-runtime.cjs" | ||
| } | ||
| }, | ||
| "scripts": { | ||
| "build": "rm -rf ./dist && tsc -p tsconfig.build.json", | ||
| "build": "rm -rf ./dist && yarn build:esm && yarn build:cjs && yarn build:types", | ||
| "build:esm": "node ./scripts/build.mjs esmodule", | ||
| "build:cjs": "node ./scripts/build.mjs commonjs", | ||
| "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --outDir ./dist/types", | ||
| "test:lint": "eslint .", | ||
@@ -24,0 +42,0 @@ "test:tsc": "tsc --noEmit", |
@@ -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,84 @@ <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<{ label: 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, { label: "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>; | ||
| }; | ||
| ``` | ||
| ### Provider/Consumer Pattern | ||
| It is possible to incorporate a Provider/Consumer pattern with the ContextMap API. | ||
| ```tsx | ||
| const makeContextWithProvider = <T,>() => { | ||
| const ctx = defineContext<T>(); | ||
| const Provider: JSXTE.Component<{ | ||
| value: T; | ||
| }> = (props, contextMap) => { | ||
| contextMap.set(ctx, props.value); | ||
| return <>{props.children}</>; | ||
| }; | ||
| const Consumer = ( | ||
| props: { render: (value?: T) => JSX.Element }, | ||
| contextMap: ContextMap | ||
| ) => { | ||
| if (contextMap.has(ctx)) { | ||
| const value = contextMap.get(ctx); | ||
| return <>{props.render(value)}</>; | ||
| } else { | ||
| return <>{props.render()}</>; | ||
| } | ||
| }; | ||
| return { | ||
| context: ctx, | ||
| Provider, | ||
| Consumer, | ||
| }; | ||
| }; | ||
| // Use it | ||
| const MyContext = makeContextWithProvider<string>(); | ||
| const App: JSXTE.Component = () => { | ||
| return ( | ||
| <MyContext.Provider value={"Hello World!"}> | ||
| <div> | ||
| <MyContext.Consumer | ||
| render={(providedValue) => <h1>{providedValue ?? ""}</h1>} | ||
| /> | ||
| </div> | ||
| </MyContext.Provider> | ||
| ); | ||
| }; | ||
| ``` | ||
| ## Extending the typings | ||
@@ -131,3 +213,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 +216,0 @@ ); |
@@ -5,2 +5,3 @@ { | ||
| "module": "commonjs", | ||
| "moduleResolution": "node", | ||
| "declaration": true, | ||
@@ -7,0 +8,0 @@ "outDir": "./dist", |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
- increased by235.61%
218902
- Number of package files
- increased by94%
291
- Lines of code
- increased by267.55%
5142
- Number of lines in readme file
- increased by36.94%
304
Worsened metrics
- Dev dependency count
- increased by15.38%
15
- Number of low supply chain risk alerts
- increased by200%
6