+
diff --git a/ui/src/typedoc/signature/element.gts b/ui/src/typedoc/signature/element.gts
new file mode 100644
index 00000000..edb2ad1e
--- /dev/null
+++ b/ui/src/typedoc/signature/element.gts
@@ -0,0 +1,36 @@
+import { ExternalLink } from 'ember-primitives/components/external-link';
+
+import { Comment } from '../renderer.gts';
+
+import type { TOC } from '@ember/component/template-only';
+
+const mdnElement = (typeName: string) => {
+ let element = typeName
+ .replace('HTML', '')
+ .replace('Element', '')
+ .toLowerCase();
+
+ return `https://developer.mozilla.org/en-US/docs/Web/HTML/Element/${element}`;
+};
+
+export const Element: TOC<{
+ Args: { kind: 'component' | 'modifier'; info: any };
+}> =
+ {{#if @info}}
+
+
+
+
+ {{/if}}
+;
diff --git a/ui/src/typedoc/signature/helper.gts b/ui/src/typedoc/signature/helper.gts
new file mode 100644
index 00000000..0f15c61f
--- /dev/null
+++ b/ui/src/typedoc/signature/helper.gts
@@ -0,0 +1,121 @@
+import { Type } from '../renderer.gts';
+import { Load } from '../utils.gts';
+import { Args, getArgs } from './args.gts';
+
+import type { TOC } from '@ember/component/template-only';
+import type { DeclarationReflection } from 'typedoc';
+
+function getSignature(info: DeclarationReflection) {
+ /**
+ * export const Foo: HelperLike<{...}>
+ */
+ if (
+ info.variant === 'declaration' &&
+ info.type?.type === 'reference' &&
+ info.type?.package === '@glint/template' &&
+ info.type?.name === 'HelperLike' &&
+ Array.isArray(info.type?.typeArguments) &&
+ info.type.typeArguments[0] &&
+ 'declaration' in info.type.typeArguments[0]
+ ) {
+ // There can only be one type argument for a HelperLike
+ return info.type.typeArguments[0]?.declaration;
+ }
+
+ /**
+ * export class MyHelper extends ...
+ */
+ if (Array.isArray(info.extendedTypes) && info.extendedTypes.length > 0) {
+ let firstExtended = info.extendedTypes[0];
+
+ /**
+ * import Helper from '@ember/component/helper';
+ *
+ * export class MyHelper extends Helper<{...}>
+ */
+ if (
+ firstExtended?.type === 'reference' &&
+ firstExtended.package === 'ember-source' &&
+ firstExtended.qualifiedName.includes('/helper') &&
+ Array.isArray(firstExtended.typeArguments) &&
+ firstExtended.typeArguments[0] &&
+ 'declaration' in firstExtended.typeArguments[0]
+ ) {
+ return firstExtended.typeArguments[0].declaration;
+ }
+ }
+
+ /**
+ * export function(...): return;
+ */
+ if (info.signatures) {
+ return info.signatures;
+ }
+
+ /**
+ * export interface Signature { ... }
+ */
+ return info;
+}
+
+function getReturn(info: any) {
+ if (info.variant === 'signature') {
+ return info.type;
+ }
+
+ if (Array.isArray(info)) {
+ return info.find((item) => item.name === 'Return')?.type;
+ }
+
+ if ('children' in info) {
+ return getReturn(info.children);
+ }
+}
+
+const Return: TOC<{ Args: { info: any } }> =
+ {{#if @info}}
+
+
Return
+
+
+
+ {{/if}}
+;
+
+export const HelperSignature: TOC<{
+ Args: {
+ /**
+ * Which module to import the type from
+ */
+ module: string;
+ /**
+ * The name of the component to render the type / JSDoc of
+ */
+ name: string;
+ /**
+ * The name of the package to lookup the module and export name.
+ */
+ package: string;
+ };
+}> =
+
+ {{#let (getSignature declaration) as |info|}}
+ {{#if (Array.isArray info)}}
+ {{#each info as |signature|}}
+
+
+ {{/each}}
+ {{else}}
+ {{! Whenever we have a "Full Signature" or "HelperLike" definition }}
+
+
+ {{/if}}
+
+ {{/let}}
+
+;
diff --git a/ui/src/typedoc/signature/modifier.gts b/ui/src/typedoc/signature/modifier.gts
new file mode 100644
index 00000000..749c1453
--- /dev/null
+++ b/ui/src/typedoc/signature/modifier.gts
@@ -0,0 +1,113 @@
+/** eslint-disable @typescript-eslint/no-unused-vars */
+import { findChildDeclaration, Load } from '../utils.gts';
+import { Args } from './args.gts';
+import { Element } from './element.gts';
+
+import type { TOC } from '@ember/component/template-only';
+
+function getSignatureType(info: any) {
+ /**
+ * export const Foo: TOC<{ signature here }> =
...
+ */
+ if (
+ info.type?.type === 'reference' &&
+ info.type?.typeArguments?.[0]?.type === 'reflection'
+ ) {
+ return info.type.typeArguments[0].declaration;
+ }
+
+ /**
+ * import { modifier } from 'ember-modifier';
+ *
+ * export const foo = modifier<{ ... }>(() => {});
+ */
+ /**
+ * (implicit signature)
+ *
+ * import { modifier } from 'ember-modifier';
+ *
+ * export const foo = modifier(() => {});
+ */
+ if (info.variant === 'declaration' && 'type' in info) {
+ if (info.type.package === 'ember-modifier') {
+ // can't get at the inline signature here
+ }
+
+ /**
+ * import type { ModifierLike } from '@glint/template';
+ *
+ * export const X: ModifierLike<{ ... }>
+ */
+ if (
+ info.type.package === '@glint/template' &&
+ Array.isArray(info.type.typeArguments) &&
+ info.type.typeArguments.length > 0
+ ) {
+ return info.type.typeArguments[0].declaration;
+ }
+ }
+
+ if (info.variant === 'declaration' && 'extendedTypes' in info) {
+ let extendedType = info.extendedTypes?.[0];
+
+ if (
+ extendedType?.type === 'reference' &&
+ extendedType?.package === 'ember-modifier'
+ ) {
+ let typeArg = extendedType.typeArguments?.[0];
+
+ if (typeArg?.type === 'reflection') {
+ return typeArg.declaration;
+ }
+ }
+ }
+
+ /**
+ * export interface Signature { ... }
+ */
+ return info;
+}
+
+function getSignature(info: any) {
+ let type = getSignatureType(info);
+
+ if (!type) {
+ console.warn('Could not finde signature');
+
+ return;
+ }
+
+ return {
+ Element: findChildDeclaration(type, 'Element'),
+ Args: findChildDeclaration(type, 'Args'),
+ };
+}
+
+export const ModifierSignature: TOC<{
+ Args: {
+ /**
+ * Which module to import the type from
+ */
+ module: string;
+ /**
+ * The name of the component to render the type / JSDoc of
+ */
+ name: string;
+ /**
+ * The name of the package to lookup the module and export name.
+ */
+ package: string;
+ };
+}> =
+
+ {{#let (getSignature declaration) as |info|}}
+
+
+ {{/let}}
+
+;
diff --git a/ui/src/typedoc/styles.css b/ui/src/typedoc/styles.css
index 3274cf40..bb54c28d 100644
--- a/ui/src/typedoc/styles.css
+++ b/ui/src/typedoc/styles.css
@@ -1,6 +1,6 @@
.typedoc__type-link,
.typedoc__unknown__yield,
-.typedoc-intrinsic {
+.typedoc__intrinsic {
border: 1px solid #222;
display: inline-block;
font-style: italic;
@@ -14,52 +14,68 @@
padding: 0 0.5rem;
}
-.typedoc-declaration-name {
+.typedoc__declaration-name {
margin: 0;
display: inline-block;
line-height: 1.5rem;
}
-.typedoc-declaration {
- .typedoc-declaration-name {
+.typedoc__declaration {
+ .typedoc__declaration-name {
font-weight: bold;
}
}
section {
- > .typedoc-declaration {
- > .typedoc-declaration-name {
+ > .typedoc__declaration {
+ > .typedoc__declaration-name {
font-size: 1.5rem;
}
}
}
-.typedoc-heading {
+.typedoc__heading {
display: block;
}
-.typedoc-property,
-.typedoc-component-arg {
+.typedoc__property,
+.typedoc__component-signature__arg {
padding: 0 1rem;
}
-.typedoc-declaration-signatures {
+.typedoc__declaration-signatures {
list-style: none;
}
-.typedoc-named-tuple,
-.typedoc-component-arg-info {
+.typedoc__named-tuple,
+.typedoc__component-signature__arg-info,
+.typedoc__helper-signature__arg-info,
+.typedoc__modifier-signature__arg-info {
display: flex;
gap: 0.25rem;
align-items: baseline;
justify-content: space-between;
}
-.typedoc-component-arg-info > .typedoc-name {
+.typedoc__component-signature__arg-info > .typedoc__name,
+.typedoc__helper-signature__arg-info > .typedoc__name,
+.typedoc__modifier-signature__arg-info > .typedoc__name {
display: inline-block;
margin: 0;
font-size: 1rem;
font-weight: bold;
}
+.typedoc__helper-signature__arg-info {
+ border-bottom: 1px rgba(125, 125, 125, 0.5) dashed;
+}
+.typedoc__helper__return {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.typedoc__helper__return > .typedoc__heading {
+ margin: 0;
+}
-.typedoc-declaration-children {
+.typedoc__declaration-children,
+.typedoc__declaration-children li {
list-style: none;
padding: 0 0.5rem;
}
@@ -69,11 +85,13 @@ section {
* Component Signatures
*
*/
+.typedoc__modifier-signature__element,
.typedoc__component-signature__element,
.typedoc__component-signature__block {
display: block;
padding: 0 1rem;
}
+.typedoc__modifier-signature__element-type,
.typedoc__component-signature__element-type {
display: flex;
gap: 0.25rem;
@@ -81,12 +99,14 @@ section {
justify-content: space-between;
}
+.typedoc__modifier-signature__element-type > .typedoc__name,
.typedoc__component-signature__element-type > .typedoc__name {
display: inline-block;
margin: 0;
line-height: 1.5rem;
}
+.typedoc__modifier-signature__element-header,
.typedoc__component-signature__element-header {
display: flex;
flex-direction: row;
@@ -95,33 +115,44 @@ section {
align-items: baseline;
}
+.typedoc__helper-signature__block .typedoc-rendered-comment,
+.typedoc__component-signature__block .typedoc-rendered-comment {
+ border-top: 1px solid #333;
+ padding-top: 0.5rem;
+ margin-top: 0.5rem;
+}
+
.typedoc__component-signature__block
- .typedoc-declaration-name
- + .typedoc-reference {
+ .typedoc__declaration-name
+ + .typedoc__reference {
margin-bottom: -0.25rem;
}
.typedoc__component-signature__block
- > .typedoc-property
- .typedoc-declaration-children {
+ > .typedoc__property
+ .typedoc__declaration-children {
display: grid;
gap: 0.5rem;
}
.typedoc__component-signature__block
- > .typedoc-property
- > .typedoc-declaration
- > ul.typedoc-declaration-children
+ > .typedoc__property
+ > .typedoc__declaration
+ > ul.typedoc__declaration-children
> li
- > .typedoc-declaration {
+ > .typedoc__declaration {
border: 1px solid lightgray;
padding: 0.5rem;
}
-.typedoc-component-arg {
+.typedoc__helper-signature__arg,
+.typedoc__modifier-signature__arg,
+.typedoc__component-signature__arg {
margin-bottom: 0.5rem;
display: grid;
gap: 0.25rem;
}
-.typedoc-component-arg > .typedoc-name,
+.typedoc__helper-signature__arg > .typedoc__name,
+.typedoc__modifier-signature__arg > .typedoc__name,
+.typedoc__component-signature__arg > .typedoc__name,
.typedoc__component-signature__block > .typedoc__name {
font-size: 1.2rem;
overflow-y: hidden;
@@ -131,7 +162,9 @@ section {
max-height: unset;
}
-.typedoc-component-arg .typedoc-rendered-comment p {
+.typedoc__helper-signature__arg .typedoc-rendered-comment p,
+.typedoc__modifier-signature__arg .typedoc-rendered-comment p,
+.typedoc__component-signature__arg .typedoc-rendered-comment p {
margin-top: 0;
margin-bottom: 0.25rem;
}
@@ -163,7 +196,7 @@ section {
/**
* Array formatting
*/
-.typedoc__array > div.typedoc-declaration > ul.typedoc-declaration-children {
+.typedoc__array > div.typedoc__declaration > ul.typedoc__declaration-children {
border: 1px solid;
margin: 0;
}
diff --git a/ui/src/typedoc/utils.gts b/ui/src/typedoc/utils.gts
index 3d030c1b..624b6b51 100644
--- a/ui/src/typedoc/utils.gts
+++ b/ui/src/typedoc/utils.gts
@@ -63,7 +63,7 @@ export class Load extends Component<{
name: string;
package: string;
};
- Blocks: { default: [DeclarationReflection] };
+ Blocks: { default: [DeclarationReflection, any] };
}> {
@service('kolay/api-docs') declare apiDocs: APIDocsService;
@@ -101,7 +101,7 @@ export class Load extends Component<{
@name={{@name}}
as |type|
>
- {{yield type}}
+ {{yield type this.request.value}}
{{/if}}