@xyd-js/atlas 0.1.0-xyd.1

package/src/docs/AtlasExample/uniform-to-references.ts

@@ -0,0 +1,101 @@
+// TODO: move to utils or somewhere else
+import React from "react";
+import {parse} from "codehike";
+import {visit} from "unist-util-visit";
+import {recmaCodeHike, remarkCodeHike} from "codehike/mdx";
+import {compile as mdxCompile} from "@mdx-js/mdx";
+
+import {Reference} from "@xyd-js/uniform";
+import {
+    compile as compileMarkdown,
+    referenceAST
+} from "@xyd-js/uniform/markdown";
+
+import {MDXReference} from "@/utils/mdx";
+import todoAppUniform from "./todo-app.uniform.json";
+
+// since unist does not support heading level > 6, we need to normalize them
+function normalizeCustomHeadings() {
+    return (tree: any) => {
+        visit(tree, 'paragraph', (node, index, parent) => {
+            const match = node.children[0] && node.children[0].value.match(/^(#+)\s+(.*)/);
+            if (match) {
+                const level = match[1].length;
+                const text = match[2];
+                if (level > 6) {
+                    // Create a new heading node with depth 6
+                    const headingNode = {
+                        type: 'heading',
+                        depth: level,
+                        children: [{type: 'text', value: text}]
+                    };
+                    // Replace the paragraph node with the new heading node
+                    //@ts-ignore
+                    parent.children[index] = headingNode;
+                }
+            }
+        });
+    };
+}
+
+const codeHikeOptions = {
+    lineNumbers: true,
+    showCopyButton: true,
+    autoImport: true,
+    components: {code: "Code"},
+    // syntaxHighlighting: { // TODO: !!! FROM SETTINGS !!! wait for rr7 rsc ??
+    //     theme: "github-dark",
+    // },
+};
+
+async function compile(content: string): Promise<string> {
+    const compiled = await mdxCompile(content, {
+        remarkPlugins: [normalizeCustomHeadings, [remarkCodeHike, codeHikeOptions]],
+        recmaPlugins: [
+            [recmaCodeHike, codeHikeOptions]
+        ],
+        outputFormat: 'function-body',
+        development: false,
+    });
+
+    return String(compiled)
+}
+
+// TODO: move below to content?
+function getMDXComponent(code: string) {
+    const mdxExport = getMDXExport(code)
+    return mdxExport.default
+}
+
+function getMDXExport(code: string) {
+    const scope = {
+        Fragment: React.Fragment,
+        jsxs: React.createElement,
+        jsx: React.createElement,
+        jsxDEV: React.createElement,
+    }
+    const fn = new Function(...Object.keys(scope), code)
+    return fn(scope)
+}
+
+export async function uniformToReferences(): Promise<MDXReference<Reference[]> | []> {
+    let content: string = ""
+
+    for (const ref of todoAppUniform as Reference[]) {
+        const ast = referenceAST(ref)
+        const md = compileMarkdown(ast)
+
+        content += md + "\n"
+    }
+
+    const compiled = await compile(content)
+    const contentCode = getMDXComponent(compiled)
+
+    const parsedContent = contentCode ? parse(contentCode) : null
+
+    if (parsedContent) {
+        return parsedContent.references
+    }
+
+    return []
+}

package/src/utils/mdx.ts

@@ -0,0 +1,31 @@
+import React from "react";
+
+export type MDXReferenceWrapper<T> = {
+    children: React.ReactNode;
+    title: string;
+};
+
+export type MDXReference<T> = T extends object
+    ? MDXReferenceWrapper<T> & {
+    [K in keyof T]: MDXReference<T[K]>;
+}
+    : MDXReferenceWrapper<T>;
+
+// TODO: unify xyd reference props with react
+export function mdxValue<T>(val: MDXReferenceWrapper<T> | null): string {
+    if (!val) {
+        return ""
+    }
+
+    if (val.title) {
+        return val.title
+    }
+
+    // if we have case like below
+    /*
+        #### !!<key> <name>
+
+        !<key> string
+    */
+    return val as unknown as string
+}

package/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/atlas/*": [
+        "src/atlas/*"
+      ],
+      "@/components/*": [
+        "src/components/*"
+      ],
+      "@/utils/*": [
+        "src/utils/*"
+      ]
+    },
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "target": "ES6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "strictNullChecks": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.json",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx",
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import {resolve} from 'path';
+
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+import wyw from '@wyw-in-js/vite';
+
+// https://vitejs.dev/config/
+
+// eslint-disable-next-line import/no-default-export
+export default defineConfig({
+    plugins: [
+        wyw({
+            include: ['**/*.{ts,tsx}'],
+            babelOptions: {
+                presets: ['@babel/preset-typescript', '@babel/preset-react'],
+            },
+        }),
+        react(),
+    ],
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, 'src'),
+        },
+    },
+});