Merge pull request #320 from yhatt/fix-dual-fragment-hazard

Fix `JSXSlack.Children.toArray` to make flatten children correctly even if caused dual import of `<Fragment>`

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixed
 
 - `JSXSlackTemplateTag` type now accepts pure readonly string array ([#312](https://github.com/yhatt/jsx-slack/pull/312))
+- Fix `JSXSlack.Children.toArray` to make flatten children correctly even if caused dual import of `<Fragment>` ([#319](https://github.com/yhatt/jsx-slack/issues/319), [#320](https://github.com/yhatt/jsx-slack/pull/320))
 
 ### Changed
 

jsx-dev-runtime.d.ts

@@ -1,2 +1,2 @@
 // eslint-disable-next-line import/no-unresolved
-export * from './types/jsx-dev-runtime'
+export * from './types/src/jsx-dev-runtime'

jsx-runtime.d.ts

@@ -1,2 +1,2 @@
 // eslint-disable-next-line import/no-unresolved
-export * from './types/jsx-runtime'
+export * from './types/src/jsx-runtime'

package.json

@@ -30,7 +30,7 @@
   "module": "./module/src/index.mjs",
   "exports": {
     ".": {
-      "types": "./types/index.d.ts",
+      "types": "./types/src/index.d.ts",
       "import": "./module/src/index.mjs",
       "default": "./lib/index.js"
     },
@@ -46,7 +46,7 @@
     }
   },
   "sideEffects": false,
-  "types": "types/index.d.ts",
+  "types": "types/src/index.d.ts",
   "files": [
     "lib/",
     "module/",
@@ -110,7 +110,7 @@
     "jest-junit": "^16.0.0",
     "lodash.debounce": "^4.0.8",
     "mdast-util-phrasing": "^4.1.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^7.0.1",
     "pako": "^2.1.0",
     "postcss": "^8.4.35",
     "postcss-import": "^15.1.0",

src/jsx-internals.ts

@@ -10,7 +10,7 @@ const {
 } = Object
 
 const jsxSlackObjKey = '$$jsxslack' as const
-const jsxSlackComponentObjKey = jsxSlackObjKey + `Component`
+const jsxSlackComponentObjKey = `${jsxSlackObjKey}Component` as const
 
 export interface BuiltInComponent<P extends {}> extends JSXSlack.FC<P> {
   readonly $$jsxslackComponent: { name: string } & Record<any, any>
@@ -126,17 +126,28 @@ export const isValidElementInternal = (
  * component.
  *
  * @param element - An object to verify
- * @param component - The optional component to match while verifying
+ * @param component - The optional component or the name of built-in component
+ *   to match while verifying
  * @return `true` if the passed object was a jsx-slack element created from
  *   built-in component, otherwise `false`
  */
 export const isValidElementFromComponent = (
   obj: unknown,
-  component?: JSXSlack.FunctionComponent<any>,
-): obj is JSXSlack.JSX.Element =>
-  isValidElementInternal(obj) &&
-  isValidComponent(obj[jsxSlackObjKey].type) &&
-  (!component || obj[jsxSlackObjKey].type === component)
+  component?: string | JSXSlack.FunctionComponent<any>,
+): obj is JSXSlack.JSX.Element => {
+  const valid =
+    isValidElementInternal(obj) && isValidComponent(obj[jsxSlackObjKey].type)
+
+  if (!valid) return false
+
+  if (typeof component === 'string') {
+    return obj[jsxSlackObjKey].type[jsxSlackComponentObjKey].name === component
+  } else if (component) {
+    return obj[jsxSlackObjKey].type === component
+  }
+
+  return true
+}
 
 /**
  * Clean up hidden meta value for jsx-slack from object.

src/jsx.ts

@@ -246,7 +246,7 @@ export namespace JSXSlack {
         if (child == null) return reduced
 
         // Make flatten fragment's children
-        if (isValidElementFromComponent(child, Fragment))
+        if (isValidElementFromComponent(child, 'Fragment'))
           return reduced.concat(Children.toArray([...(child as any)]))
 
         return [...reduced, child]