Handle namespaced jsx tagnames

noya-app · Dec 15, 2023 · 842fc0a · 842fc0a
1 parent 91fb9a2
commit 842fc0a
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/noya-compiler/src/astBuilders.ts b/packages/noya-compiler/src/astBuilders.ts
@@ -76,12 +76,17 @@ export function createExpressionCode(value: unknown): ts.Expression {
 
 export function createElementCode({
   name,
+  accessPath,
   props,
   children,
 }: SimpleElement): ts.JsxElement | ts.JsxSelfClosingElement {
   return createJsxElement(
     ts.factory.createJsxOpeningElement(
-      ts.factory.createIdentifier(name),
+      accessPath && accessPath.length > 0
+        ? // When we update typescript we can probably used JsxNamespacedName
+          // https://github.com/microsoft/TypeScript/blob/2c7162143bbbf567ccecc64105010699fa7a2128/src/compiler/factory/nodeFactory.ts#L5802
+          ts.factory.createIdentifier(`${name}.${accessPath[0]}`)
+        : ts.factory.createIdentifier(name),
       undefined,
       ts.factory.createJsxAttributes(
         Object.entries(props).flatMap(([key, value]) => {

diff --git a/packages/noya-compiler/src/common.ts b/packages/noya-compiler/src/common.ts
@@ -8,6 +8,7 @@ export type Passthrough = { [passthroughSymbol]: true };
 export type SimpleElement = {
   [simpleElementSymbol]: true;
   name: string;
+  accessPath?: string[];
   source?: string;
   props: Record<string, unknown>;
   children: (SimpleElement | string | Passthrough)[];

diff --git a/packages/noya-compiler/src/project.ts b/packages/noya-compiler/src/project.ts
@@ -48,12 +48,13 @@ type ResolvedCompilerConfiguration = CompilerConfiguration & {
 function findElementNameAndSource(
   element: React.ReactNode,
   DesignSystem: DesignSystemDefinition,
-  Components: Map<unknown, NamespaceItem>,
+  namespaceMap: Map<unknown, NamespaceItem>,
 ):
   | {
       name: string;
       element: React.ReactElement;
       source?: string;
+      accessPath?: string[];
     }
   | undefined {
   if (!React.isValidElement(element)) return;
@@ -64,10 +65,10 @@ function findElementNameAndSource(
   }
 
   // This is a component exported directly from the design system
-  const component = Components.get(element.type);
+  const namespaceItem = namespaceMap.get(element.type);
 
-  if (component) {
-    return { ...component, element };
+  if (namespaceItem) {
+    return { ...namespaceItem, element };
   }
 
   const protocolComponent = Object.values(DesignSystem.components).find(
@@ -79,7 +80,7 @@ function findElementNameAndSource(
 
   if (!isValidElement(libraryElement)) return;
 
-  return findElementNameAndSource(libraryElement, DesignSystem, Components);
+  return findElementNameAndSource(libraryElement, DesignSystem, namespaceMap);
 }
 
 export function createSimpleElement(
@@ -96,7 +97,7 @@ export function createSimpleElement(
 
   if (!elementType) return;
 
-  const { element, name, source } = elementType;
+  const { element, name, source, accessPath } = elementType;
 
   function toReactArray(children: ReactNode): ReactNode[] {
     const result: ReactNode[] = [];
@@ -137,6 +138,7 @@ export function createSimpleElement(
 
   return simpleElement({
     name,
+    accessPath,
     source,
     // Filter out children prop and undefined props
     props: Object.fromEntries(

diff --git a/packages/site/src/dseditor/DSEditor.tsx b/packages/site/src/dseditor/DSEditor.tsx
@@ -683,7 +683,7 @@ function DSGalleryCode({
         definitions: [
           'vanilla',
           '@noya-design-system/chakra',
-          // '@noya-design-system/antd',
+          '@noya-design-system/antd',
           '@noya-design-system/mui',
         ],
       });