Refactoring

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@manypkg/cli": "^0.19.1",
     "@preconstruct/cli": "^2.2.0",
     "@types/jest": "^28.1.1",
     "@types/node": "17.0.36",

packages/extract-core/package.json

@@ -5,19 +5,11 @@
   "module": "dist/docsmill-extract-core.esm.js",
   "license": "MIT",
   "private": true,
-  "exports": {
-    ".": "./dist/docsmill-extract-core.cjs.js"
-  },
   "dependencies": {
     "@emotion/hash": "^0.8.0",
     "emery": "^1.4.1",
-    "typescript": "^4.7.4"
-  },
-  "preconstruct": {
-    "entrypoints": [
-      "index.ts",
-      "types.ts"
-    ]
+    "typescript": "^4.7.4",
+    "@docsmill/types": "^0.0.0"
   },
   "repository": "https://github.com/Thinkmill/docsmill"
 }

packages/extract-core/src/convert-declaration.ts

@@ -1,6 +1,6 @@
 import { ts } from "./ts";
 import { ExtractionHost, getTypeChecker, referenceSymbol } from ".";
-import { ClassMember, SerializedDeclaration, SymbolId } from "./types";
+import { ClassMember, SerializedDeclaration, SymbolId } from "@docsmill/types";
 import { convertTypeNode } from "./convert-node";
 import { convertType } from "./convert-type";
 import {

packages/extract-core/src/convert-node.ts

@@ -9,7 +9,7 @@ import {
 } from "./utils";
 import { ExtractionHost, referenceSymbol } from ".";
 import { assert, assertNever } from "emery/assertions";
-import { SerializedType, SymbolId, TupleElement } from "./types";
+import { SerializedType, SymbolId, TupleElement } from "@docsmill/types";
 
 function getModifierKind(
   modifier:

packages/extract-core/src/convert-type.ts

@@ -1,7 +1,7 @@
 import { ts } from "./ts";
 import { ExtractionHost, getTypeChecker } from ".";
 import { assert } from "emery/assertions";
-import { SerializedType } from "./types";
+import { SerializedType } from "@docsmill/types";
 import { convertTypeNode } from "./convert-node";
 
 export function convertType<Docs>(

packages/extract-core/src/index.ts

@@ -1,5 +1,5 @@
 import { ts } from "./ts";
-import { SerializedDeclaration } from "./types";
+import { SerializedDeclaration } from "@docsmill/types";
 import { convertDeclaration } from "./convert-declaration";
 import { assert } from "emery/assertions";
 import { isNonEmptyArray } from "emery/guards";

packages/extract-core/src/utils.ts

@@ -10,7 +10,7 @@ import {
   Parameter,
   SerializedType,
   SymbolId,
-} from "./types";
+} from "@docsmill/types";
 
 export function getTypeParameters<Docs>(
   node: ts.Node & {

packages/print-core/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@docsmill/print-core",
+  "version": "0.0.0",
+  "main": "dist/docsmill-print-core.cjs.js",
+  "module": "dist/docsmill-print-core.esm.js",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "@emotion/react": "11.5.0",
+    "@docsmill/types": "^0.0.0",
+    "emery": "^1.4.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "repository": "https://github.com/Thinkmill/docsmill"
+}

site/src/components/core/indent.tsx → packages/print-core/src/indent.tsx

@@ -1,7 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { css } from "@emotion/react";
+import { jsx, css } from "@emotion/react";
 import { ReactNode } from "react";
 
 const indent = css({

packages/print-core/src/index.tsx

@@ -0,0 +1,4 @@
+export { Syntax, codeFontStyleObj, syntaxColors, codeFont } from "./syntax";
+export { SimpleDeclaration } from "./simple-declaration";
+export type { Components } from "./type";
+export { Indent } from "./indent";

site/src/components/core/simple-declaration.tsx → packages/print-core/src/simple-declaration.tsx

@@ -1,26 +1,13 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
-import { css } from "@emotion/react";
 import { Fragment } from "react";
-import { codeFont, syntaxColors } from "../../lib/theme.css";
 import {
   ClassMember,
   ConstructorDeclaration,
   SimpleSerializedDeclaration,
-} from "@docsmill/extract-core/types";
+} from "@docsmill/types";
 import { Indent } from "./indent";
 import { Syntax } from "./syntax";
 import { TypeParams, Params, Type, Components } from "./type";
 
-const declarationNameStyles = css(codeFont, {
-  color: syntaxColors.symbol,
-});
-
-export function DeclarationName({ name }: { name: string }) {
-  return <span css={declarationNameStyles}>{name}</span>;
-}
-
 export function SimpleDeclaration<Docs>({
   decl,
   isExported,
@@ -34,7 +21,7 @@ export function SimpleDeclaration<Docs>({
     return (
       <Fragment>
         <Syntax kind="keyword">{isExported ? "export " : ""}function </Syntax>
-        <DeclarationName name={decl.name} />
+        <Syntax kind="symbol">{decl.name}</Syntax>
         <TypeParams components={components} params={decl.typeParams} />
         <Params components={components} params={decl.parameters} />
         <Syntax kind="colon">: </Syntax>
@@ -49,7 +36,7 @@ export function SimpleDeclaration<Docs>({
           {isExported ? "export " : ""}
           {decl.variableKind}{" "}
         </Syntax>
-        <DeclarationName name={decl.name} />
+        <Syntax kind="symbol">{decl.name}</Syntax>
         <Syntax kind="colon">: </Syntax>
         <Type components={components} type={decl.type} />
         <Syntax kind="bracket">{" = ..."}</Syntax>
@@ -59,12 +46,9 @@ export function SimpleDeclaration<Docs>({
 
   if (decl.kind === "unknown") {
     return (
-      <Fragment>
-        <DeclarationName name={decl.name} />
-        <pre css={codeFont}>
-          <code>{decl.content}</code>
-        </pre>
-      </Fragment>
+      <Syntax kind="error">
+        <code>{decl.content}</code>
+      </Syntax>
     );
   }
 
@@ -76,7 +60,7 @@ export function SimpleDeclaration<Docs>({
           {isExported ? "export " : ""}
           interface{" "}
         </Syntax>
-        <DeclarationName name={decl.name} />
+        <Syntax kind="symbol">{decl.name}</Syntax>
         <TypeParams components={components} params={decl.typeParams} />
         {decl.extends && (
           <Fragment>
@@ -119,7 +103,7 @@ export function SimpleDeclaration<Docs>({
           {isExported ? "export " : ""}
           class{" "}
         </Syntax>
-        <DeclarationName name={decl.name} />
+        <Syntax kind="symbol">{decl.name}</Syntax>
         <TypeParams components={components} params={decl.typeParams} />
         {!!classSymbol.extends && (
           <Fragment>
@@ -158,7 +142,7 @@ export function SimpleDeclaration<Docs>({
         {isExported ? "export " : ""}
         type{" "}
       </Syntax>
-      <DeclarationName name={decl.name} />
+      <Syntax kind="symbol">{decl.name}</Syntax>
       <TypeParams components={components} params={decl.typeParams} />
       <Syntax kind="bracket"> = </Syntax>
       <Type components={components} type={decl.type} />
@@ -226,7 +210,7 @@ function ClassMembers<Docs>({
         if (prop.kind === "unknown") {
           return (
             <Indent key={i}>
-              <Syntax kind="bracket">{prop.content}</Syntax>
+              <Syntax kind="error">{prop.content}</Syntax>
             </Indent>
           );
         }

packages/print-core/src/syntax.tsx

@@ -0,0 +1,60 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from "@emotion/react";
+
+import { css } from "@emotion/react";
+import { ReactNode } from "react";
+
+function mapObj<Key extends string, Input, Output>(
+  input: Record<Key, Input>,
+  map: (input: Input) => Output
+): Record<Key, Output> {
+  return Object.fromEntries(
+    Object.entries(input).map(([key, value]) => [key, map(value as any)])
+  ) as any;
+}
+
+export const syntaxColors = {
+  parameter: "#111111",
+  symbol: "#4876d6",
+  keyword: "#994cc3",
+  bracket: "#403f53",
+  colon: "#0c969b",
+  comma: "#5f7e97",
+  string: "#c96765",
+  intrinsic: "#2c8093",
+  error: "red",
+};
+
+export const codeFontStyleObj = {
+  fontFamily: `
+    'Fira Code',
+    'Source Code Pro',
+    'fontFamily.mono',
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  `,
+  fontVariantLigatures: "none",
+};
+
+export const codeFont = css(codeFontStyleObj);
+
+export const syntaxKinds = mapObj(syntaxColors, (color) =>
+  css({ color, ...codeFontStyleObj })
+);
+
+export function Syntax({
+  children,
+  kind,
+}: {
+  children: ReactNode;
+  kind: keyof typeof syntaxKinds;
+}) {
+  return <span css={syntaxKinds[kind]}>{children}</span>;
+}

site/src/components/core/type.tsx → packages/print-core/src/type.tsx

@@ -1,25 +1,21 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from "@emotion/react";
+import React from "react";
 import { Fragment, ReactElement } from "react";
-import { codeFont } from "../../lib/theme.css";
 import { Syntax } from "./syntax";
 import { Indent } from "./indent";
 import {
   SerializedType,
   TypeParam,
   Parameter,
   SymbolId,
-} from "@docsmill/extract-core/types";
-import { css } from "@emotion/react";
-import { codeFontStyleObj } from "../../lib/theme.css";
-import { assertNever } from "../../lib/assert";
-
-const intrinsicStyles = css({ color: "#2c8093", ...codeFontStyleObj });
+} from "@docsmill/types";
+import { assertNever } from "emery/assertions";
 
 export type Components<Docs> = {
   Docs: (props: { docs: Docs }) => ReactElement | null;
-  SymbolReference: (props: { id: SymbolId; name: string }) => ReactElement;
+  SymbolReference: (props: {
+    id: SymbolId;
+    name: string;
+  }) => ReactElement | null;
 };
 
 export function Type<Docs>({
@@ -30,7 +26,7 @@ export function Type<Docs>({
   components: Components<Docs>;
 }): ReactElement {
   if (type.kind === "intrinsic") {
-    return <span css={intrinsicStyles}>{type.value}</span>;
+    return <Syntax kind="intrinsic">{type.value}</Syntax>;
   }
   if (type.kind === "reference") {
     return (
@@ -340,7 +336,11 @@ export function Type<Docs>({
   }
 
   if (type.kind === "raw") {
-    return <span css={[codeFont, { color: "red" }]}>{type.value}</span>;
+    return (
+      <Syntax kind="parameter">
+        <span style={{ color: "red" }}>{type.value}</span>
+      </Syntax>
+    );
   }
   assertNever(type);
 }

packages/types/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@docsmill/types",
+  "version": "0.0.0",
+  "main": "dist/docsmill-types.cjs.js",
+  "module": "dist/docsmill-types.esm.js",
+  "license": "MIT",
+  "private": true,
+  "repository": "https://github.com/Thinkmill/docsmill"
+}