Merge branch 'next' of https://github.com/code-hike/codehike into slideshow-auto

# Conflicts:
#	packages/mdx/src/mdx-client/slideshow.tsx

Author: brianespinosa

.github/workflows/bundle_analysis.yml

@@ -1,7 +1,7 @@
 name: 'Bundle Analysis'
 
 on:
-  pull_request:
+  pull_request_target:
   push:
     branches:
       - next # change this if your default branch is named differently

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+.DS_Store
 .next
 todo.md
 current.md
@@ -10,6 +11,7 @@ yarn-error.log
 storybook-static
 packages/playground/out
 packages/starter
+packages/mdx/components.d.ts
 
 # Contentlayer
 .contentlayer

packages/mdx/dev/content/slideshow-autofocus.mdx

@@ -0,0 +1,111 @@
+# Slideshow with controls autofocus
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.
+
+<CH.Slideshow preset="https://codesandbox.io/s/w5wfe" autoFocus={true}>
+
+Lorem ipsum dolor sit amet, consectetur adipiscing something about points, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+```jsx src/App.js
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(20, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Step 2
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(110, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Step 3
+
+Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(200, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+---
+
+## Step 4
+
+Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu.
+
+```jsx src/App.js focus=1,6,9:15
+import { motion } from "framer-motion"
+
+const transition = { duration: 1 }
+
+export default function App() {
+  const bg = "hsl(290, 100%, 50%)"
+  return (
+    <div className="container">
+      <motion.div
+        className="swatch"
+        animate={{
+          backgroundColor: bg,
+        }}
+        transition={transition}
+      />
+    </div>
+  )
+}
+```
+
+</CH.Slideshow>

packages/mdx/package.json

@@ -2,18 +2,21 @@
   "name": "@code-hike/mdx",
   "version": "0.7.2",
   "files": [
-    "dist"
+    "dist",
+    "components.d.ts"
   ],
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.mjs",
       "require": "./dist/index.cjs.js",
       "style": "./dist/index.css"
     },
     "./components": {
+      "types": "./dist/components.d.ts",
       "import": "./dist/components.esm.mjs",
       "require": "./dist/components.cjs.js",
       "default": "./dist/components.cjs.js"
@@ -23,6 +26,7 @@
     "./styles.css": "./dist/index.css",
     "./dist/index.css": "./dist/index.css",
     "./dist/components.cjs.js": {
+      "types": "./dist/components.d.ts",
       "import": "./dist/components.esm.mjs",
       "require": "./dist/components.cjs.js",
       "default": "./dist/components.cjs.js"

packages/mdx/rollup.config.js

@@ -136,6 +136,8 @@ export default function makeConfig(commandOptions) {
       input: `src/components.tsx`,
       output: [
         { file: `./dist/components.d.ts`, format: "es" },
+        // because of typescript not following package.json exports sometimes
+        { file: `./components.d.ts`, format: "es" },
       ],
       external: clientExternal,
       plugins: [dts()],

packages/mdx/src/components.tsx

@@ -14,6 +14,7 @@ import {
 } from "./mdx-client/annotations"
 import { Preview } from "./mdx-client/preview"
 import { InlineCode } from "./mdx-client/inline-code"
+import type { MDXComponents } from "mdx/types"
 
 export {
   Code,
@@ -31,7 +32,7 @@ export {
   PreviewSlot,
 }
 
-export const CH = {
+export const CH: MDXComponents = {
   Code,
   Section,
   SectionLink,

packages/mdx/src/index.tsx

@@ -1,3 +1,3 @@
-export { transform as remarkCodeHike } from "./remark/transform"
+export { attacher as remarkCodeHike } from "./remark/transform"
 
 export { highlight } from "./highlighter"

packages/mdx/src/mdx-client/annotations.tsx

@@ -3,7 +3,12 @@ import { CodeAnnotation } from "../smooth-code"
 import { getColor, transparent, ColorName } from "../utils"
 
 export function Annotation() {
-  return "error: code hike remark plugin not running or annotation isn't at the right place"
+  return (
+    <div>
+      "error: code hike remark plugin not running or
+      annotation isn't at the right place"
+    </div>
+  )
 }
 
 export const annotationsMap: Record<

packages/mdx/src/mdx-client/slideshow.tsx

@@ -7,28 +7,37 @@ import { AnimatePresence } from "framer-motion"
 
 export function Slideshow({
   children,
-  editorSteps,
+  className,
+  code,
   codeConfig,
+  editorSteps,
+  autoFocus,
+  hasPreviewSteps,
   presetConfig,
-  code,
-  className,
   style,
-  hasPreviewSteps,
   autoPlay,
   autoPlayLoop = false,
   ...rest
 }: {
   children: React.ReactNode
-  editorSteps: EditorStep[]
+  className?: string
+  code?: EditorProps["codeConfig"]
   codeConfig: EditorProps["codeConfig"]
+  editorSteps: EditorStep[]
+  hasPreviewSteps?: boolean
+  autoFocus?: boolean
   presetConfig?: PresetConfig
-  code?: EditorProps["codeConfig"]
-  className?: string
   style?: React.CSSProperties
-  hasPreviewSteps?: boolean
   autoPlay?: number
   autoPlayLoop?: boolean
 }) {
+  const controlsRef = React.useRef(null)
+
+  React.useEffect(() => {
+    // Only set focus on controls input if we have configured to do so
+    autoFocus && controlsRef.current.focus()
+  }, [])
+
   const { stepsChildren, previewChildren } =
     extractPreviewSteps(children, hasPreviewSteps)
   const withPreview = presetConfig || hasPreviewSteps
@@ -163,17 +172,19 @@ export function Slideshow({
             Prev
           </button>
           <input
-            type="range"
-            min={0}
             max={maxSteps}
-            value={state.stepIndex}
+            min={0}
+            ref={controlsRef}
             step={1}
+            type="range"
+            value={state.stepIndex}
             onChange={e =>
               setState({
                 stepIndex: +e.target.value,
                 step: editorSteps[+e.target.value],
               })
             }
+            autoFocus={autoFocus}
           />
           <button 
             onClick={() => slideNext()}

packages/mdx/src/remark/transform.ts

@@ -10,6 +10,7 @@ import { valueToEstree } from "./to-estree"
 import { CH_CODE_CONFIG_VAR_NAME } from "./unist-utils"
 import { JsxNode, SuperNode, visit } from "./nodes"
 import { addConfigDefaults, CodeHikeConfig } from "./config"
+import { Attacher } from "unified"
 
 const transforms = [
   transformPreviews,
@@ -20,7 +21,9 @@ const transforms = [
   transformInlineCodes,
   transformCodes,
 ]
-export function transform(unsafeConfig: CodeHikeConfig) {
+export const attacher: Attacher<
+  [CodeHikeConfig?]
+> = unsafeConfig => {
   return async (tree: SuperNode, file: any) => {
     const config = addConfigDefaults(
       unsafeConfig,