feat(unify): removing prism and adding infrastructure for shiki

npm/vite-dev-server/package.json

@@ -20,7 +20,7 @@
     "@cypress/react": "0.0.0-development",
     "@cypress/vue": "0.0.0-development",
     "@testing-library/cypress": "7.0.4",
-    "@vitejs/plugin-vue": "1.2.0",
+    "@vitejs/plugin-vue": "1.2.4",
     "@vue/compiler-sfc": "3.2.6",
     "cypress": "0.0.0-development",
     "eslint-plugin-vue": "7.18.0",

packages/app/package.json

@@ -44,7 +44,6 @@
     "graphql-tag": "^2.12.5",
     "javascript-time-ago": "2.3.8",
     "just-my-luck": "3.0.0",
-    "prismjs": "1.24.0",
     "rimraf": "3.0.2",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "unplugin-icons": "^0.11.3",
@@ -59,8 +58,6 @@
     "vite-svg-loader": "2.1.1",
     "vue": "3.2.6",
     "vue-i18n": "9.2.0-beta.7",
-    "vue-prism-component": "2.0.0",
-    "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "4",
     "vue-tsc": "^0.3.0",
     "windicss": "3.1.4",

packages/frontend-shared/README.md

@@ -29,3 +29,7 @@ Windi CSS can create an awesome interactive summary showing our usage of utility
 ## from this directory
 yarn windi
 ```
+
+## Generate the theme for shiki
+
+See [the readme in the src/public/shiki/themes directory](./src/public/shiki/themes/ReadMe.md)

packages/frontend-shared/cypress/plugins/index.js

@@ -33,7 +33,6 @@ module.exports = (on, config) => {
           optimizeDeps: {
             include: [
               '@headlessui/vue',
-              'vue-prism-component',
               'vue3-file-selector',
               'just-my-luck',
               'combine-properties',

packages/frontend-shared/cypress/support/common.ts

@@ -1,2 +1,9 @@
 // Add cy.mount, cy.mountFragment, cy.mountFragmentList
 export * from './mock-graphql/mountFragment'
+
+import { initHighlighter } from '@cy/components/ShikiHighlight.vue'
+
+// Make sure highlighter is initialized before
+// we show any code to avoid jank at rendering
+// @ts-ignore
+initHighlighter()

packages/frontend-shared/cypress/support/mock-graphql/stubgql-Wizard.ts

@@ -33,9 +33,9 @@ export const stubWizard: MaybeResolver<Wizard> = {
   ],
   allBundlers,
   sampleCode: `
-    import { startDevServer } from '@cypress/vite-dev-server'
+import { startDevServer } from '@cypress/vite-dev-server'
 
-    /* This is some test data. It does not need to be valid code. */
+/* This is some test data. It does not need to be valid code. */
   `,
   chosenTestingTypePluginsInitialized: false,
   testingTypes: (TESTING_TYPES as Writeable<typeof TESTING_TYPES>).map((type) => {

packages/frontend-shared/package.json

@@ -11,9 +11,12 @@
     "windi": "yarn windicss-analysis",
     "cypress:open": "cross-env TZ=America/New_York node ../../scripts/cypress open-ct --project ${PWD}",
     "cypress:run": "cross-env TZ=America/New_York node ../../scripts/cypress run-ct --project ${PWD}",
-    "dev": "vite --open"
+    "dev": "vite --open",
+    "generate-shiki-theme": "node ./script/generate-shiki-theme.js"
+  },
+  "dependencies": {
+    "shiki": "^0.9.12"
   },
-  "dependencies": {},
   "devDependencies": {
     "@antfu/utils": "^0.3.0",
     "@cypress/vite-dev-server": "0.0.0-development",
@@ -27,8 +30,8 @@
     "@urql/exchange-execute": "1.1.0",
     "@urql/exchange-graphcache": "4.3.3",
     "@urql/vue": "0.4.3",
-    "@vitejs/plugin-vue": "^1.9.2",
-    "@vitejs/plugin-vue-jsx": "^1.1.8",
+    "@vitejs/plugin-vue": "1.2.4",
+    "@vitejs/plugin-vue-jsx": "1.1.6",
     "@vue/compiler-core": "3.2.6",
     "@vue/compiler-dom": "3.2.6",
     "@vue/compiler-sfc": "3.2.6",
@@ -57,5 +60,33 @@
     "windicss-analysis": "^0.3.4",
     "wonka": "^4.0.15"
   },
-  "module": "es2020"
+  "module": "es2020",
+  "vite": {
+    "optimizeDeps": {
+      "include": [
+        "@testing-library/cypress/add-commands",
+        "@urql/core",
+        "@urql/devtools",
+        "@urql/exchange-execute",
+        "@urql/exchange-graphcache",
+        "@urql/vue",
+        "@vue/test-utils",
+        "@vueuse/core",
+        "cypress-file-upload",
+        "dedent",
+        "fake-uuid",
+        "graphql",
+        "graphql-relay",
+        "graphql/jsutils/Path",
+        "lodash",
+        "path",
+        "shiki",
+        "socket.io-client",
+        "vue",
+        "vue-i18n",
+        "vue-toastification",
+        "wonka"
+      ]
+    }
+  }
 }

packages/frontend-shared/script/generate-shiki-theme-ts.ts

@@ -0,0 +1,30 @@
+/* eslint-disable no-console */
+import { colors } from '../.windicss/colors'
+import * as fs from 'fs'
+
+const filePath = './src/public/shiki/themes/cypress.theme'
+
+fs.readFile(`${filePath}.template.json`,
+  { encoding: 'utf8' },
+  (err, contents) => {
+    if (err) {
+      throw err
+    }
+
+    for (let colorName in colors) {
+      const colorScale = colors[colorName]
+
+      for (let colorGrade in colorScale) {
+        const variableNameRegExp = new RegExp(`-${colorName}-${colorGrade}"`, 'g')
+
+        contents = contents.replace(variableNameRegExp, `${colorScale[colorGrade]}"`)
+      }
+    }
+    fs.writeFile(`${filePath}.json`, contents, (err) => {
+      if (err) {
+        throw err
+      }
+
+      console.log(`${filePath}.json generated successfully`)
+    })
+  })

packages/frontend-shared/script/generate-shiki-theme.js

@@ -0,0 +1,2 @@
+require('@packages/ts/register')
+module.exports = require('./generate-shiki-theme-ts').default

packages/frontend-shared/src/components/ShikiHighlight.spec.tsx

@@ -0,0 +1,72 @@
+import ShikiHighlight, { initHighlighter } from './ShikiHighlight.vue'
+import code from '../../windi.config?raw'
+
+const devServerCode = `const { defineConfig } = require('cypress')
+const { devServer, defineDevServerConfig } = require('@cypress/vite-dev-server')
+
+module.exports = defineConfig({
+  component: {
+    devServer,
+    devServerConfig: defineDevServerConfig({
+      entryHtmlFile: 'cypress/component/support/entry.html'
+    }),
+  },
+})`
+
+describe('<ShikiHighlight/>', { viewportWidth: 800, viewportHeight: 500 }, () => {
+  beforeEach(async () => {
+    await initHighlighter()
+  })
+
+  it('playground', () => {
+    cy.mount(() => (<div class="p-12">
+      <ShikiHighlight code={devServerCode} lang="js" lineNumbers />
+    </div>))
+  })
+
+  it('trims whitespace to show the correct number of lines', { viewportWidth: 500, viewportHeight: 500 }, () => {
+    const line = `console.log('my string')`
+    const numLines = 15
+
+    // Whitespace
+    // eslint-disable-next-line
+    const code = `
+
+
+      ${Array.from(Array(numLines).keys()).map(() => line).join('\n')}
+
+
+    `
+
+    cy.mount(() => (<div class="p-12">
+      <ShikiHighlight code={code} lang="js" lineNumbers />
+    </div>))
+    .get('.line')
+    .should('have.length', numLines)
+  })
+
+  it('wraps long code without line numbers', { viewportWidth: 900, viewportHeight: 500 }, () => {
+    cy.mount(() => <div class="p-12"><ShikiHighlight wrap code={code} lang="ts" /></div>)
+    cy.get('.shiki').should('be.visible')
+  })
+
+  it('wraps long code with line numbers', () => {
+    cy.mount(() => <div class="p-12"><ShikiHighlight lineNumbers wrap code={code} lang="ts" /></div>)
+    cy.get('.shiki').should('be.visible')
+  })
+
+  it('render the code without arguments', () => {
+    cy.mount(() => <div class="p-12"><ShikiHighlight code={code} lang="ts" /></div>)
+    cy.get('.shiki').should('be.visible')
+  })
+
+  it('display inline and remove some of the padding when "inline"', { viewportWidth: 300, viewportHeight: 100 }, () => {
+    cy.mount(() => <ShikiHighlight code={'project: xv123456'} lang="yaml" inline />)
+    cy.get('.shiki').should('be.visible')
+  })
+
+  it('show line numbers when the prop is passed', () => {
+    cy.mount(() => <div class="p-12"><ShikiHighlight code={code} lang="ts" lineNumbers /></div>)
+    cy.get('.shiki').should('be.visible')
+  })
+})