Fix development on M1. Fix #139

.gitignore

@@ -1,4 +1,6 @@
 dist
 node_modules
 tsconfig.tsbuildinfo
-tmp
+tmp
+
+yarn-error.log

package.json

@@ -15,7 +15,7 @@
     "update:grammars": "bash ./scripts/pullGrammars.sh"
   },
   "gitHooks": {
-    "pre-commit": "ls-lint && lint-staged"
+    "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.{js,json,yml}": [
@@ -26,7 +26,6 @@
     ]
   },
   "devDependencies": {
-    "@ls-lint/ls-lint": "^1.9.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-replace": "^2.3.4",

packages/renderer-svg/package.json

@@ -24,11 +24,12 @@
     "watch": "rollup -c -w"
   },
   "peerDependencies": {
-    "puppeteer": "^5.2.1",
-    "shiki": "^0.2.7"
+    "playwright": "^1.9.2",
+    "shiki": "^0.9.3"
   },
   "devDependencies": {
-    "@types/puppeteer": "^3.0.1",
+    "@types/node": "^14.14.35",
+    "playwright": "^1.9.2",
     "shiki": "^0.2.7"
   }
 }

packages/renderer-svg/rollup.config.js

@@ -5,7 +5,7 @@ import typescript from 'rollup-plugin-typescript2'
 import replace from '@rollup/plugin-replace'
 import { terser } from 'rollup-plugin-terser'
 
-const external = ['shiki', 'puppeteer']
+const external = ['shiki', 'playwright']
 
 export default [
   {

packages/renderer-svg/src/measureMonospaceTypeface.ts

@@ -1,4 +1,4 @@
-function measureFont(fontName: string, fontSize: number) {
+function measureFont([fontName, fontSize]: [string, number]) {
   /**
    * Measure `M` for width
    */
@@ -49,12 +49,14 @@ export async function measureMonospaceTypeface(
   fontSize: number
 ): Promise<{ width: number; height: number }> {
   if (__BROWSER__) {
-    return measureFont(fontName, fontSize)
+    return measureFont([fontName, fontSize])
   } else {
-    const puppeteer = require('puppeteer') as typeof import('puppeteer')
-    const browser = await puppeteer.launch({ headless: true })
+    const playwright = require('playwright') as typeof import('playwright')
+    const browser = await playwright.chromium.launch({ headless: true })
+
     const page = await browser.newPage()
-    const measurement = await page.evaluate(measureFont, fontName, fontSize)
+    const measurement = await page.evaluate(measureFont, [fontName, fontSize])
+
     await browser.close()
     return measurement
   }

packages/site/mono.html

@@ -1,5 +1,6 @@
 <pre class="shiki" style="background-color: #0a1219"><code><span class="line"><span style="color: #6B7177">const</span><span style="color: #ACB1B6"> </span><span style="color: #6F767B">shiki</span><span style="color: #ACB1B6"> = </span><span style="color: #7E8489">require</span><span style="color: #ACB1B6">(</span><span style="color: #ACB1B6">&#39;</span><span style="color: #878D92">shiki</span><span style="color: #ACB1B6">&#39;</span><span style="color: #ACB1B6">)</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #6F767B">shiki</span><span style="color: #ACB1B6">.</span><span style="color: #61676D">getHighlighter</span><span style="color: #ACB1B6">({</span></span>
 <span class="line"><span style="color: #ACB1B6">  theme: JSON.</span><span style="color: #7E8489">parse</span><span style="color: #ACB1B6">(</span><span style="color: #6F767B">fs</span><span style="color: #ACB1B6">.</span><span style="color: #61676D">readfileSync</span><span style="color: #ACB1B6">(</span><span style="color: #ACB1B6">&#39;</span><span style="color: #878D92">./monochrome-dark-subtle.json</span><span style="color: #ACB1B6">&#39;</span><span style="color: #ACB1B6">, </span><span style="color: #ACB1B6">&#39;</span><span style="color: #878D92">utf-8</span><span style="color: #ACB1B6">&#39;</span><span style="color: #ACB1B6">))</span></span>
-<span class="line"><span style="color: #ACB1B6">})</span></span></code></pre>
+<span class="line"><span style="color: #ACB1B6">})</span></span>
+<span class="line"></span></code></pre>

packages/site/package.json

@@ -5,7 +5,8 @@
   "devDependencies": {
     "@types/node": "^10.12.2",
     "markdown-it": "^8.4.2",
-    "shiki": "^0.2.7",
+    "playwright": "^1.9.2",
+    "shiki": "^0.9.3",
     "shiki-renderer-svg": "^0.9.3"
   },
   "scripts": {

packages/site/palenight.html

@@ -1,9 +1,9 @@
 <pre class="shiki" style="background-color: #292D3E"><code><span class="line"><span style="color: #89DDFF">import</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">*</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">as</span><span style="color: #A6ACCD"> React </span><span style="color: #89DDFF">from</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">react</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
 <span class="line"><span style="color: #89DDFF">import</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">./App.css</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
 <span class="line"><span style="color: #89DDFF">import</span><span style="color: #A6ACCD"> Hello </span><span style="color: #89DDFF">from</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">./components/Hello</span><span style="color: #89DDFF">&#39;</span><span style="color: #89DDFF">;</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #C792EA">const</span><span style="color: #A6ACCD"> logo </span><span style="color: #89DDFF">=</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">require</span><span style="color: #A6ACCD">(</span><span style="color: #89DDFF">&#39;</span><span style="color: #C3E88D">./logo.svg</span><span style="color: #89DDFF">&#39;</span><span style="color: #A6ACCD">)</span><span style="color: #89DDFF">;</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #C792EA">function</span><span style="color: #A6ACCD"> </span><span style="color: #82AAFF">App</span><span style="color: #89DDFF">()</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">{</span></span>
 <span class="line"><span style="color: #F07178">  </span><span style="color: #89DDFF">return</span><span style="color: #F07178"> (</span></span>
 <span class="line"><span style="color: #F07178">    </span><span style="color: #89DDFF">&lt;</span><span style="color: #F07178">div</span><span style="color: #89DDFF"> </span><span style="color: #C792EA">className</span><span style="color: #89DDFF">=</span><span style="color: #89DDFF">&quot;</span><span style="color: #C3E88D">App</span><span style="color: #89DDFF">&quot;</span><span style="color: #89DDFF">&gt;</span></span>
@@ -18,5 +18,6 @@
 <span class="line"><span style="color: #A6ACCD">    </span><span style="color: #89DDFF">&lt;/</span><span style="color: #F07178">div</span><span style="color: #89DDFF">&gt;</span></span>
 <span class="line"><span style="color: #F07178">  )</span><span style="color: #89DDFF">;</span></span>
 <span class="line"><span style="color: #89DDFF">}</span></span>
-
-<span class="line"><span style="color: #89DDFF">export</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">default</span><span style="color: #A6ACCD"> App</span><span style="color: #89DDFF">;</span></span></code></pre>
+<span class="line"></span>
+<span class="line"><span style="color: #89DDFF">export</span><span style="color: #A6ACCD"> </span><span style="color: #89DDFF">default</span><span style="color: #A6ACCD"> App</span><span style="color: #89DDFF">;</span></span>
+<span class="line"></span></code></pre>

packages/site/rockstar.html

@@ -1,10 +1,10 @@
 <pre class="shiki" style="background-color: #2e3440ff"><code><span class="line"><span style="color: #81A1C1">Midnight</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">takes</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">your heart</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">and</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">your soul</span></span>
 <span class="line"><span style="color: #81A1C1">While your heart</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">as high as</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">your soul</span></span>
 <span class="line"><span style="color: #D8DEE9FF">Put </span><span style="color: #81A1C1">your heart</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">without</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">your soul</span><span style="color: #D8DEE9FF"> into </span><span style="color: #81A1C1">your heart</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">Give</span><span style="color: #D8DEE9FF"> back </span><span style="color: #81A1C1">your heart</span></span>
-
-
+<span class="line"></span>
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">Desire</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">a lovestruck ladykiller</span></span>
 <span class="line"><span style="color: #81A1C1">My world</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">nothing</span><span style="color: #D8DEE9FF"> </span></span>
 <span class="line"><span style="color: #81A1C1">Fire</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #B48EAD">ice</span></span>
@@ -14,13 +14,14 @@
 <span class="line"><span style="color: #81A1C1">If</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">Midnight</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">taking</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">my world</span><span style="color: #D8DEE9FF">, </span><span style="color: #81A1C1">Fire</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">nothing</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">and</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">Midnight</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">taking</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">my world</span><span style="color: #D8DEE9FF">, </span><span style="color: #81A1C1">Hate</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">nothing</span></span>
 <span class="line"><span style="color: #88C0D0">Shout</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">&quot;FizzBuzz!&quot;</span></span>
 <span class="line"><span style="color: #81A1C1">Take it to the top</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">If</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">Midnight</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">taking</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">my world</span><span style="color: #D8DEE9FF">, </span><span style="color: #81A1C1">Fire</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">nothing</span></span>
 <span class="line"><span style="color: #88C0D0">Shout</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">&quot;Fizz!&quot;</span></span>
 <span class="line"><span style="color: #81A1C1">Take it to the top</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">If</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">Midnight</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">taking</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">my world</span><span style="color: #D8DEE9FF">, </span><span style="color: #81A1C1">Hate</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">is</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">nothing</span></span>
 <span class="line"><span style="color: #88C0D0">Say</span><span style="color: #D8DEE9FF"> </span><span style="color: #A3BE8C">&quot;Buzz!&quot;</span></span>
 <span class="line"><span style="color: #81A1C1">Take it to the top</span></span>
 <span class="line"><span style="color: #D8DEE9FF">  </span></span>
-<span class="line"><span style="color: #88C0D0">Whisper</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">my world</span></span></code></pre>
+<span class="line"><span style="color: #88C0D0">Whisper</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">my world</span></span>
+<span class="line"></span></code></pre>

packages/site/文言.html

@@ -1,11 +1,11 @@
 <pre class="shiki" style="background-color: #2e3440ff"><code><span class="line"><span style="color: #81A1C1">吾有</span><span style="color: #B48EAD">一</span><span style="color: #81A1C1">言</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">曰</span><span style="color: #A3BE8C">「「春日宴。」」</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">書之</span><span style="color: #ECEFF4">。</span></span>
 <span class="line"><span style="color: #81A1C1">有數</span><span style="color: #B48EAD">九</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">名之曰</span><span style="color: #D8DEE9">「酒數」</span><span style="color: #ECEFF4">。</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">恆為是</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">若</span><span style="color: #D8DEE9">「酒數」</span><span style="color: #81A1C1">等於</span><span style="color: #B48EAD">零</span><span style="color: #81A1C1">者乃止也</span><span style="color: #ECEFF4">。</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #D8DEE9FF">  </span><span style="color: #81A1C1">吾有</span><span style="color: #B48EAD">三</span><span style="color: #81A1C1">言</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">曰</span><span style="color: #A3BE8C">「「與君」」</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">曰</span><span style="color: #D8DEE9">「酒數」</span><span style="color: #ECEFF4">。</span></span>
 <span class="line"><span style="color: #D8DEE9FF">    </span><span style="color: #81A1C1">曰</span><span style="color: #A3BE8C">「「杯酒。可以窮歡宴。綠酒一杯歌一遍。」」</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">書之</span><span style="color: #ECEFF4">。</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">減</span><span style="color: #D8DEE9">「酒數」</span><span style="color: #81A1C1">以</span><span style="color: #B48EAD">一</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">昔之</span><span style="color: #D8DEE9">「酒數」</span><span style="color: #81A1C1">者</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">今其是矣云云</span><span style="color: #ECEFF4">。</span></span>
-
+<span class="line"></span>
 <span class="line"><span style="color: #81A1C1">吾有</span><span style="color: #B48EAD">一</span><span style="color: #81A1C1">言</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">曰</span><span style="color: #A3BE8C">「「綠酒千杯腸已爛。」」</span><span style="color: #ECEFF4">。</span><span style="color: #81A1C1">書之</span><span style="color: #ECEFF4">。</span></span></code></pre>