fix @orgajs/react

Author: xiaoxinghu

.eslintrc.js

@@ -37,6 +37,7 @@ module.exports = {
     'import/no-extraneous-dependencies': ['warn'],
     semi: ['error', 'never'],
     'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
   },
   overrides: [
     {

packages/react/lib/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Get current components from the MDX Context.
+ *
+ * @param {Components | MergeComponents | null | undefined} [components]
+ *   Additional components to use or a function that takes the current
+ *   components and filters/merges/changes them.
+ * @returns {Components}
+ *   Current components.
+ */
+export function useOrgComponents(components?: Components | MergeComponents | null | undefined): Components;
+/**
+ * Provider for MDX context
+ *
+ * @param {Props} props
+ * @returns {JSX.Element}
+ */
+export function OrgProvider({ components, children, disableParentContext }: Props): JSX.Element;
+export type ReactNode = import('react').ReactNode;
+export type Components = import('@orgajs/orgx').OrgComponents;
+/**
+ * Configuration.
+ */
+export type Props = {
+    /**
+     * Mapping of names for JSX components to React components.
+     */
+    components?: Components | MergeComponents | null | undefined;
+    /**
+     * Turn off outer component context.
+     */
+    disableParentContext?: boolean | null | undefined;
+    /**
+     * Children.
+     */
+    children?: ReactNode | null | undefined;
+};
+/**
+ * Custom merge function.
+ */
+export type MergeComponents = (currentComponents: Components) => Components;

packages/react/lib/index.js

@@ -0,0 +1,77 @@
+/**
+ * @typedef {import('react').ReactNode} ReactNode
+ * @typedef {import('@orgajs/orgx').OrgComponents} Components
+ *
+ * @typedef Props
+ *   Configuration.
+ * @property {Components | MergeComponents | null | undefined} [components]
+ *   Mapping of names for JSX components to React components.
+ * @property {boolean | null | undefined} [disableParentContext=false]
+ *   Turn off outer component context.
+ * @property {ReactNode | null | undefined} [children]
+ *   Children.
+ *
+ * @callback MergeComponents
+ *   Custom merge function.
+ * @param {Components} currentComponents
+ *   Current components from the context.
+ * @returns {Components}
+ *   Merged components.
+ */
+
+import React from 'react'
+
+/** @type {import('react').Context<Components>} */
+const OrgContext = React.createContext({})
+
+/**
+ * Get current components from the org context.
+ *
+ * @param {Components | MergeComponents | null | undefined} [components]
+ *   Additional components to use or a function that takes the current
+ *   components and filters/merges/changes them.
+ * @returns {Components}
+ *   Current components.
+ */
+export function useOrgComponents(components) {
+  const contextComponents = React.useContext(OrgContext)
+
+  // Memoize to avoid unnecessary top-level context changes
+  return React.useMemo(() => {
+    // Custom merge via a function prop
+    if (typeof components === 'function') {
+      return components(contextComponents)
+    }
+
+    return { ...contextComponents, ...components }
+  }, [contextComponents, components])
+}
+
+/** @type {Components} */
+const emptyObject = {}
+
+/**
+ * Provider for org context
+ *
+ * @param {Props} props
+ * @returns {JSX.Element}
+ */
+export function OrgProvider({ components, children, disableParentContext }) {
+  /** @type {Components} */
+  let allComponents
+
+  if (disableParentContext) {
+    allComponents =
+      typeof components === 'function'
+        ? components({})
+        : components || emptyObject
+  } else {
+    allComponents = useOrgComponents(components)
+  }
+
+  return React.createElement(
+    OrgContext.Provider,
+    { value: allComponents },
+    children
+  )
+}

packages/react/package.json

@@ -2,16 +2,16 @@
   "name": "@orgajs/react",
   "version": "3.0.1",
   "license": "MIT",
+  "main": "index.js",
+  "type": "module",
+  "types": "index.d.ts",
   "files": [
-    "dist"
+    "lib/",
+    "index.d.ts",
+    "index.js"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "type": "module",
   "scripts": {
-    "build": "pnpm clean && pnpm compile",
-    "clean": "del ./dist tsconfig.tsbuildinfo",
-    "compile": "tsc -b"
+    "build": "tsc --build --clean && tsc --build"
   },
   "peerDependencies": {
     "react": ">=16"

packages/react/src/index.ts

@@ -1,8 +1,6 @@
 {
-  "extends": "../../tsconfig.esm.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist"
-  },
-  "include": ["./src"]
+  "extends": "../../tsconfig.types.json",
+  "include": ["lib/**/*.js", "index.js"],
+  "exclude": ["node_modules/"],
+  "references": [{ "path": "../orgx" }]
 }