v0.4.0

.github/workflows/bundle_analysis.yml

@@ -0,0 +1,127 @@
+name: 'Bundle Analysis'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - next # change this if your default branch is named differently
+  workflow_dispatch:
+
+defaults:
+  run:
+    # change this if your nextjs app does not live at the root of the repo
+    working-directory: .
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Cache node modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: yarn-deps-${{ hashFiles('yarn.lock') }}
+          restore-keys: |
+            yarn-deps-${{ hashFiles('yarn.lock') }}
+
+      - name: Build library
+        run: |
+          yarn install --frozen-lockfile 2>&1 | grep -v '^[warning|info]' 
+          yarn build:lib
+
+      - name: Restore next build
+        uses: actions/cache@v2
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
+          # ex: if your app builds to `dist`, replace `.next` with `dist`
+          path: ./examples/bundle-test/.next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        working-directory: ./examples/bundle-test
+        # change this if your site requires a custom build command
+        run: yarn build
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        working-directory: ./examples/bundle-test
+        run: npx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundle
+          path: ./examples/bundle-test/.next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: bundle_analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: ./examples/bundle-test/.next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        working-directory: ./examples/bundle-test
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get comment body
+        working-directory: ./examples/bundle-test
+        id: get-comment-body
+        if: success() && github.event.number
+        run: |
+          body=$(cat .next/analyze/__bundle_analysis_comment.txt)
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
+
+      - name: Create Comment
+        uses: peter-evans/[email protected]
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/[email protected]
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/release.yml

@@ -9,8 +9,6 @@ jobs:
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
     steps:
       - uses: actions/checkout@v2
-        with:
-          fetch-depth: 10 # 👈 Required to retrieve git history
 
       - name: Prepare repository
         run: git fetch --unshallow --tags
@@ -35,6 +33,7 @@ jobs:
         run: |
           yarn install --frozen-lockfile 2>&1 | grep -v '^[warning|info]' 
           yarn build
+          yarn test
           yarn release
       # - name: Publish to Chromatic
       #   uses: chromaui/action@v1

.gitignore

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

examples/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "semi": false,
+  "overrides": [
+    {
+      "files": "*.md",
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ]
+}

examples/browser/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Code Hike in the browser</title>
+    <link
+      rel="stylesheet"
+      href="https://esm.sh/@code-hike/[email protected]/dist/index.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module">
+      import React from "https://esm.sh/react"
+      import ReactDOM from "https://esm.sh/react-dom"
+      import { evaluate } from "https://esm.sh/@mdx-js/mdx?dev"
+      import * as runtime from "https://esm.sh/react/jsx-runtime.js"
+
+      import { remarkCodeHike } from "https://esm.sh/@code-hike/[email protected]/dist/index.browser.mjs"
+      import { CH } from "https://esm.sh/@code-hike/[email protected]/components"
+      import theme from "https://esm.sh/[email protected]/themes/nord.json" assert { type: "json" }
+
+      const mdx = `# Test
+
+      ~~~python hello.py mark=1[22:30]
+      print("Rendered with Code Hike")
+      ~~~
+      `
+
+      const { default: Content } = await evaluate(mdx, {
+        ...runtime,
+        remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+      })
+
+      const App = () => {
+        return React.createElement(Content, { components: { CH } })
+      }
+
+      ReactDOM.render(React.createElement(App), document.getElementById("root"))
+    </script>
+  </body>
+</html>

examples/bundle-test/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.next

examples/bundle-test/next.config.js

@@ -0,0 +1,13 @@
+const { remarkCodeHike } = require("@code-hike/mdx")
+const theme = require("shiki/themes/nord.json")
+
+const withMDX = require("@next/mdx")({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [[remarkCodeHike, { theme }]],
+  },
+})
+
+module.exports = withMDX({
+  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
+})

examples/bundle-test/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "bundle-test",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build"
+  },
+  "dependencies": {
+    "@code-hike/mdx": "^0.3.0",
+    "@mdx-js/loader": "^2.0.0",
+    "@next/mdx": "^12.1.0",
+    "next": "^12.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "nextBundleAnalysis": {
+    "budget": 358400,
+    "budgetPercentIncreaseRed": 20,
+    "showDetails": true,
+    "minimumChangeThreshold": 0
+  }
+}

examples/bundle-test/pages/_app.js

@@ -0,0 +1,7 @@
+import "@code-hike/mdx/styles"
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+
+export default MyApp

examples/bundle-test/pages/js-page.js

@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <div>
+      <h1>Hello</h1>
+      Lorem ipsum dolor sit amet. Consectetur adipiscing elit.
+    </div>
+  )
+}

examples/bundle-test/pages/just-code.mdx

@@ -0,0 +1,9 @@
+# Hello world
+
+```js focus=2,4[10:13]
+function lorem(ipsum, dolor = 1) {
+  const sit = ipsum == null ? 0 : ipsum.sit
+  dolor = sit - amet(dolor)
+  return sit ? consectetur(ipsum) : []
+}
+```

examples/bundle-test/pages/no-ch-mdx.mdx

@@ -0,0 +1,3 @@
+# Hello
+
+Lorem ipsum dolor sit amet. Consectetur adipiscing elit.