@okam/directus-block 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.2.1 (2024-07-05)
+
+This was a version bump only for directus-block to align it with other projects, there were no code changes.
+
 ## 1.2.0 (2024-06-28)
 
 

package/README.md

@@ -35,6 +35,12 @@ This would allow to remove a lot of repetitive code accross blocks definitions,
 
 This component calls the good component in the configuration from the `collection` prop
 
+#### Props
+
+- item: The block's data. Can either contain just the block's `id`, be null (in that case, the `id` will need to be sent using the block's variables). If `item` only contains the id, it will be sent to the variables for making the query
+- variables: The block's variables. Passing the id is necessary
+- document: Can also be passed in the config. The document that will be used to make a query
+
 ## Configuration
 
 A configuration uses the `components` prop to map a key value, like so:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@okam/directus-block",
   "main": "./index.js",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "types": "./index.d.ts",
   "exports": {
     ".": {

package/project.json

@@ -13,44 +13,23 @@
       }
     },
     "build": {
-      "executor": "@nx/vite:build",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/libs/directus/directus-block"
-      },
-      "configurations": {
-        "development": {
-          "mode": "development"
-        },
-        "production": {
-          "mode": "production"
-        }
-      }
-    },
-    "storybook": {
-      "executor": "@nx/storybook:storybook",
-      "options": {
-        "port": 4400,
-        "configDir": "libs/directus/directus-block/.storybook"
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
-      }
-    },
-    "build-storybook": {
-      "executor": "@nx/storybook:build",
-      "outputs": ["{options.outputDir}"],
-      "options": {
-        "outputDir": "dist/storybook/directus-block",
-        "configDir": "libs/directus/directus-block/.storybook"
-      },
-      "configurations": {
-        "ci": {
-          "quiet": true
-        }
+        "outputPath": "dist/libs/directus/directus-block",
+        "tsConfig": "libs/directus/directus-block/tsconfig.lib.json",
+        "project": "libs/directus/directus-block/package.json",
+        "entryFile": "libs/directus/directus-block/src/index.ts",
+        "external": "all",
+        "rollupConfig": "@nx/react/plugins/bundle-rollup",
+        "compiler": "swc",
+        "assets": [
+          {
+            "glob": "libs/directus/directus-next-component/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
       }
     }
   }

package/src/components/BlockSerializer/index.tsx

@@ -5,13 +5,16 @@ import type { TBlockSerializerProps } from './interface'
 const BlockSerializer = (props: TBlockSerializerProps) => {
   const { item, collection, config, variables, defaultVariant, ...rest } = props
 
-  if (!collection || !item || !config) return null
+  if (!collection || !config) return null
 
   const blockConfig = config?.components?.[collection]
 
   if (!blockConfig) return null
 
-  const { id, settings } = item
+  const { settings } = item ?? {}
+  const id = item?.id ?? variables?.id
+
+  if (!id) return null
 
   const { variant } = getFragment(BlockSettingsFragmentDoc, settings) ?? {}
 

package/src/index.ts

@@ -1,7 +1,3 @@
-// Components
-export { default as BlockDispatcher } from './components/BlockDispatcher'
-export { default as BlockSerializer } from './components/BlockSerializer'
-
 // Types
 export type { TBlockDispatcherProps } from './components/BlockDispatcher/interface'
 export type {
@@ -21,10 +17,6 @@ export type {
 // Blocks
 export { default as BlockWysiwyg } from './blocks/BlockWysiwyg'
 
-// Utils
-export { default as getBlockProps } from './utils/get-block-props'
-export { default as mergeConfigs } from './utils/merge-configs'
-
 // Configs
 export { default as blockWysiwygConfig } from './blocks/BlockWysiwyg/config'
 export { default as baseConfig } from './components/BlockDispatcher/config'

package/src/server.ts

@@ -0,0 +1,6 @@
+'server-only'
+
+export { default as BlockDispatcher } from './components/BlockDispatcher'
+export { default as BlockSerializer } from './components/BlockSerializer'
+export { default as getBlockProps } from './utils/get-block-props'
+export { default as mergeConfigs } from './utils/merge-configs'

package/src/utils/get-block-props.ts

@@ -3,6 +3,7 @@
 import { queryGql } from '@okam/directus-query'
 import type { Nullable } from '@okam/stack-ui'
 import type { Variables } from 'graphql-request'
+import { isEmpty } from 'radash'
 import type { TBlockDocument, TBlockQuery, TBlockVariables, TCommonBlockFragment } from '../types/block'
 
 type TGetBlockPropsParams<BlockFragment extends TCommonBlockFragment, BlockVariables extends Variables = Variables> = {
@@ -18,10 +19,31 @@ function isVariables<BlockVariables extends Variables>(
   return !!maybeVariables
 }
 
+function isOnlyIdInItem(item: TCommonBlockFragment): item is TBlockVariables {
+  return !isEmpty(item) && Object.keys(item).length === 1 && Object.keys(item)[0] === 'id' && !!item.id
+}
+
+async function queryFromVariables<
+  BlockFragment extends TCommonBlockFragment,
+  BlockVariables extends Variables = Variables,
+>(params: TGetBlockPropsParams<BlockFragment, BlockVariables>) {
+  const { document, blockKey, variables } = params
+
+  if (!document || !isVariables<BlockVariables>(variables)) return null
+
+  const queriedBlockProps = await queryGql(document, variables)
+
+  if (!queriedBlockProps || typeof queriedBlockProps !== 'object' || !blockKey) return null
+
+  const queriedBlockFragment = queriedBlockProps[blockKey]
+
+  return queriedBlockFragment as BlockFragment
+}
+
 /**
  * Returns the passed item if it is defined. Otherwise, queried its own block
  * @param params.blockKey Key of the queried field
- * @param params.item Item of the block. If null, the function will make a query
+ * @param params.item Item of the block. If null or only contains the block's id, the function will make a query
  * @returns The block data
  */
 export default async function getBlockProps<
@@ -30,9 +52,24 @@ export default async function getBlockProps<
 >(params: TGetBlockPropsParams<BlockFragment, BlockVariables>): Promise<BlockFragment | null | undefined> {
   const { document, item, blockKey, variables } = params
 
-  if (item) return item
+  if (item) {
+    // If the item actually contains the block's data, just return it
+    if (!isOnlyIdInItem(item)) {
+      return item
+    }
 
-  if (!document || !isVariables<BlockVariables>(variables)) return null
+    // Otherwise, the id necessary to make the query might be inside the item. Just in case, we have a fallback
+    const variablesWithFallback = { id: item.id, ...variables }
+
+    if (!isVariables<BlockVariables>(variablesWithFallback)) return null
+
+    return queryFromVariables({
+      ...params,
+      variables: variablesWithFallback,
+    })
+  }
+
+  if (!document || !isVariables(variables)) return null
 
   const queriedBlockProps = await queryGql(document, variables)
 

package/tsconfig.json

@@ -11,9 +11,6 @@
   "references": [
     {
       "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./.storybook/tsconfig.json"
     }
   ],
   "extends": "../../../tsconfig.base.json"

package/tsconfig.lib.json

@@ -18,8 +18,6 @@
     "**/*.test.js",
     "**/*.spec.jsx",
     "**/*.test.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }