Fix typescript

Author: pomber

.gitignore

@@ -9,4 +9,7 @@ yarn-error.log
 .vscode
 storybook-static
 packages/playground/out
-packages/starter
+packages/starter
+
+# Contentlayer
+.contentlayer

packages/mdx/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@code-hike/mdx",
-  "version": "0.3.0-next.0",
+  "version": "0.3.0",
   "files": [
     "dist"
   ],
   "main": "./dist/ch-core.umd.js",
-  "module": "./dist/ch-core.es.js",
+  "module": "./dist/plugin.es.js",
   "exports": {
     ".": {
       "import": "./dist/plugin.es.js",
-      "require": "./dist/plugin.umd.js"
+      "require": "./dist/plugin.umd.js",
+      "style": "./dist/style.css"
     },
-    "./components": "./dist/components.es.js"
+    "./components": "./dist/components.es.js",
+    "./dist/index.css": "./dist/style.css"
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {
     "dev": "next",
-    "build": "vite build",
+    "build": "rollup -c rollup.config.js",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },
@@ -25,8 +27,8 @@
     "diff": "^4.0.2",
     "hast-util-to-estree": "^1.4.0",
     "is-plain-obj": "^3.0.0",
-    "mdx-bundler": "^8.0.1",
     "node-fetch": "^2.0.0",
+    "mdx-bundler": "^8.0.1",
     "remark-rehype": "^8.1.0",
     "shiki": "^0.10.1",
     "unified": "^9.2.2",
@@ -35,20 +37,26 @@
     "use-spring": "^0.2.3"
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^4.1.0",
     "@mdx-js/mdx": "^2.0.0",
     "@types/node": "^17.0.21",
     "@types/node-fetch": "^2.6.1",
     "@types/react": "^17.0.39",
+    "esbuild": "^0.13.2",
+    "mdx-bundler": "^6.0.1",
     "next": "^12.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-json-view": "^1.21.3",
     "sass": "^1.49.9",
-    "typescript": "^4.6.2",
+    "typescript": "^3.9.5",
     "vite": "^2.8.6",
-    "vitest": "^0.5.9",
-    "esbuild": "^0.13.2",
-    "mdx-bundler": "^6.0.1",
-    "react-json-view": "^1.21.3"
+    "rollup": "^2.41.2",
+    "autoprefixer": "^9.8.2",
+    "cssnano": "^4.1.10",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.27.1",
+    "vitest": "^0.5.9"
   },
   "peerDependencies": {
     "react": "^16.8.3 || ^17 || ^18"

packages/mdx/rollup.config.js

@@ -0,0 +1,51 @@
+import autoprefixer from "autoprefixer"
+import postcss from "rollup-plugin-postcss"
+
+import cssnano from "cssnano"
+import typescript from "rollup-plugin-typescript2"
+// import copy from "rollup-plugin-copy"
+import path from "path"
+import json from "@rollup/plugin-json"
+import fs from "fs"
+
+const createConfig = filename => ({
+  input: `src/${filename}.tsx`,
+  output: [
+    // {
+    //   file: `./dist/${filename}.js`,
+    //   format: "umd",
+    //   name: "ch", //todo get by parameter
+    // },
+    {
+      file: `./dist/${filename}.cjs.js`,
+      format: "cjs",
+    },
+    {
+      file: `./dist/${filename}.esm.js`,
+      format: "es",
+    },
+  ],
+  // external: ["react"],
+  plugins: [
+    json({ compact: true }),
+    typescript({
+      tsconfigOverride: {
+        compilerOptions: { jsx: "react" },
+      },
+    }),
+    postcss({
+      extract: path.resolve("dist/index.css"),
+      plugins: [autoprefixer(), cssnano()],
+    }),
+    // copy({
+    //   targets: [{ src: "src/index.scss", dest: "dist" }],
+    // }),
+  ],
+})
+
+export default function makeConfig(commandOptions) {
+  const { inputs = ["index"] } = JSON.parse(
+    fs.readFileSync("package.json", "utf8")
+  )
+  return inputs.map(createConfig)
+}

packages/mdx/src/index.tsx

@@ -1 +1 @@
-export { remarkCodeHike } from "./mdx/plugin"
+export { remarkCodeHike } from "./mdx-plugin/plugin"

packages/mdx/src/mdx-plugin/annotations.ts

@@ -1,8 +1,8 @@
 import { Code, relativeToAbsolute } from "../utils"
 import { CodeAnnotation } from "../smooth-code"
-import { Node, Parent } from "unist"
 import { wrapChildren } from "./to-estree"
 import { annotationsMap } from "../mdx-client/annotations"
+import { JsxNode as JsxNode, SuperNode } from "./nodes"
 
 export function getAnnotationsFromMetastring(
   options: Record<string, string>
@@ -76,9 +76,9 @@ function getCommentData(line: Code["lines"][0]) {
 }
 
 export function extractJSXAnnotations(
-  node: Node,
+  node: SuperNode,
   index: number,
-  parent: Parent
+  parent: SuperNode
 ) {
   const annotations = [] as CodeAnnotation[]
 
@@ -87,7 +87,8 @@ export function extractJSXAnnotations(
     parent.children[nextIndex] &&
     parent.children[nextIndex].type ===
       "mdxJsxFlowElement" &&
-    parent.children[nextIndex].name === "CH.Annotation"
+    (parent.children[nextIndex] as JsxNode).name ===
+      "CH.Annotation"
   ) {
     const jsxAnnotation = parent.children[nextIndex] as any
 

packages/mdx/src/mdx-plugin/code.ts

@@ -1,4 +1,3 @@
-import { Node, Parent } from "unist"
 import { highlight } from "../highlighter"
 import { extractLinks } from "./links"
 import {
@@ -16,15 +15,16 @@ import {
   extractJSXAnnotations,
 } from "./annotations"
 import { mergeFocus } from "../utils"
+import { CodeNode, SuperNode } from "./nodes"
 
 export async function transformCodeNodes(
-  tree: Node,
+  tree: SuperNode,
   { theme }: { theme: any }
 ) {
   await visitAsync(
     tree,
     "code",
-    async (node, index, parent) => {
+    async (node: CodeNode, index, parent) => {
       await transformCode(
         { node, index, parent: parent! },
         { theme }
@@ -33,7 +33,7 @@ export async function transformCodeNodes(
   )
 }
 
-export function isEditorNode(node: Node) {
+export function isEditorNode(node: SuperNode) {
   return (
     node.type === "code" ||
     (node.type === "mdxJsxFlowElement" &&
@@ -42,7 +42,7 @@ export function isEditorNode(node: Node) {
 }
 
 async function transformCode(
-  nodeInfo: NodeInfo,
+  nodeInfo: NodeInfo<CodeNode>,
   config: { theme: any }
 ) {
   toJSX(nodeInfo.node, {
@@ -66,14 +66,14 @@ export async function mapAnyCodeNode(
 ) {
   const { node } = nodeInfo
   if (node.type === "code") {
-    return mapCode(nodeInfo, config)
+    return mapCode(nodeInfo as NodeInfo<CodeNode>, config)
   } else {
     return mapEditor(nodeInfo, config)
   }
 }
 
 async function mapCode(
-  nodeInfo: NodeInfo,
+  nodeInfo: NodeInfo<CodeNode>,
   config: { theme: any }
 ): Promise<EditorProps> {
   const file = await mapFile(nodeInfo, config)
@@ -94,19 +94,23 @@ export async function mapEditor(
   config: { theme: any }
 ): Promise<EditorProps> {
   const [northNodes, southNodes = []] = splitChildren(
-    node as Parent,
+    node,
     "thematicBreak"
   )
 
   const northFiles = await Promise.all(
     northNodes
       .filter(({ node }) => node.type === "code")
-      .map(nodeInfo => mapFile(nodeInfo, config))
+      .map((nodeInfo: NodeInfo<CodeNode>) =>
+        mapFile(nodeInfo, config)
+      )
   )
   const southFiles = await Promise.all(
     southNodes
       .filter(({ node }) => node.type === "code")
-      .map(nodeInfo => mapFile(nodeInfo, config))
+      .map((nodeInfo: NodeInfo<CodeNode>) =>
+        mapFile(nodeInfo, config)
+      )
   )
   const allFiles = [...northFiles, ...southFiles]
   const northActive =
@@ -141,7 +145,7 @@ export async function mapEditor(
 }
 
 async function mapFile(
-  { node, index, parent }: NodeInfo,
+  { node, index, parent }: NodeInfo<CodeNode>,
   config: { theme: any }
 ): Promise<CodeStep & FileOptions & { name: string }> {
   const { theme } = config

packages/mdx/src/mdx-plugin/editor.tsx

@@ -1,15 +1,15 @@
-import { Node, Parent } from "unist"
 import { visitAsync } from "./unist-utils"
 import { transformEditor } from "./code"
+import { JsxNode, SuperNode } from "./nodes"
 
 export async function transformEditorNodes(
-  tree: Node,
+  tree: SuperNode,
   { theme }: { theme: any }
 ) {
   await visitAsync(
     tree,
     "mdxJsxFlowElement",
-    async (node, index, parent) => {
+    async (node: JsxNode, index, parent) => {
       if (node.name === "CH.Code") {
         await transformEditor(
           { node, index, parent: parent! },

packages/mdx/src/mdx-plugin/inline-code.ts

@@ -3,15 +3,14 @@ import {
   toJSX,
   CH_CODE_CONFIG_PLACEHOLDER,
 } from "./unist-utils"
-import { Node, Parent } from "unist"
-import visit from "unist-util-visit"
-import visitParents from "unist-util-visit-parents"
 import { highlight } from "../highlighter"
 import { EditorStep } from "../mini-editor"
 import { Code } from "../utils"
+import { SuperNode, visit } from "./nodes"
+import visitParents from "unist-util-visit-parents"
 
 export async function transformInlineCodes(
-  tree: Node,
+  tree: SuperNode,
   { theme }: { theme: any }
 ) {
   // transform *`foo`* to <CH.InlineCode>foo</CH.InlineCode>
@@ -56,8 +55,8 @@ export async function transformInlineCodes(
 }
 
 async function getCode(
-  tree: Node,
-  node: Parent,
+  tree: SuperNode,
+  node: SuperNode,
   inlinedCode: string,
   lang: string | undefined,
   theme: any
@@ -104,10 +103,13 @@ async function getCode(
   })
 }
 
-function getAncestors(tree: Node, node: Node): Node[] {
-  let ancestors: Node[] = []
-  visitParents(tree, node, (node, nodeAncestors) => {
-    ancestors = nodeAncestors
+function getAncestors(
+  tree: SuperNode,
+  node: SuperNode
+): SuperNode[] {
+  let ancestors: SuperNode[] = []
+  visitParents(tree, node as any, (node, nodeAncestors) => {
+    ancestors = nodeAncestors as SuperNode[]
   })
   return ancestors
 }

packages/mdx/src/mdx-plugin/links.tsx

@@ -1,11 +1,11 @@
-import { Node, Parent } from "unist"
 import { CodeStep } from "../smooth-code"
 import { annotationsMap } from "../mdx-client/annotations"
+import { SuperNode } from "./nodes"
 
 export function extractLinks(
-  node: Node,
+  node: SuperNode,
   index: number,
-  parent: Parent,
+  parent: SuperNode,
   code: string
 ) {
   const annotations = [] as CodeStep["annotations"]